586 lines
30 KiB
Plaintext
586 lines
30 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Theme Audit";
|
|
}
|
|
|
|
<style>
|
|
.theme-audit-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
|
|
gap: 1.5rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.theme-audit-preview {
|
|
min-width: 0;
|
|
padding: 1rem;
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: .5rem;
|
|
background: var(--bs-body-bg);
|
|
color: var(--bs-body-color);
|
|
}
|
|
|
|
.theme-audit-section {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--bs-border-color);
|
|
}
|
|
|
|
.theme-audit-section > h2 {
|
|
margin-bottom: 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.theme-audit-button-stack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.theme-audit-timeline {
|
|
overflow-x: auto;
|
|
padding-bottom: .25rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="page-heading compact">
|
|
<div>
|
|
<p class="eyebrow">Admin utility</p>
|
|
<h1>Dark Theme Audit</h1>
|
|
<p class="lead-text">Hidden internal component samples for checking PlotDirector light and dark theme coverage.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
This page is intentionally not linked from public navigation. Use it to log visual issues; avoid treating these samples as a new design system.
|
|
</div>
|
|
|
|
<div class="theme-audit-grid">
|
|
<section class="theme-audit-preview" data-theme="light" data-bs-theme="light" aria-label="Light theme preview">
|
|
<div class="page-heading compact mb-0">
|
|
<div>
|
|
<p class="eyebrow">Light theme</p>
|
|
<h1>Component Samples</h1>
|
|
<p class="lead-text">Representative UI elements using current Bootstrap and PlotDirector classes.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Typography</h2>
|
|
<nav class="breadcrumb-trail" aria-label="Sample breadcrumb">
|
|
<a href="#">Projects</a>
|
|
<a href="#">The Brass Orchard</a>
|
|
<span>Theme audit</span>
|
|
</nav>
|
|
<p class="eyebrow">Scene planning</p>
|
|
<h1>Page heading</h1>
|
|
<h2>Subheading</h2>
|
|
<p class="lead-text">A lead paragraph for introduction copy and overview states.</p>
|
|
<p class="muted mb-0">Muted helper text for metadata, hints, and quieter descriptions.</p>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Cards</h2>
|
|
<div class="content-grid">
|
|
<article class="plain-card">
|
|
<p class="eyebrow">Standard card</p>
|
|
<h3>Project overview</h3>
|
|
<p>Card body text with a short action row.</p>
|
|
<div class="button-row">
|
|
<button class="btn btn-outline-primary btn-sm" type="button">Open</button>
|
|
<button class="btn btn-outline-secondary btn-sm" type="button">Edit</button>
|
|
</div>
|
|
</article>
|
|
<article class="plain-card">
|
|
<p class="eyebrow">Dashboard card</p>
|
|
<p class="writer-kpi">42%</p>
|
|
<p>Draft progress this week.</p>
|
|
</article>
|
|
</div>
|
|
<div class="empty-panel mt-3">
|
|
<h2>Empty state</h2>
|
|
<p>No matching scenes were found for this filter.</p>
|
|
<button class="btn btn-primary" type="button">Create sample</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Tables</h2>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Scene</th>
|
|
<th>Status</th>
|
|
<th>Warnings</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Chapter 3, Scene 2</td>
|
|
<td><span class="badge text-bg-success">Drafted</span></td>
|
|
<td><span class="severity-pill warning">Warning</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Chapter 4, Scene 1</td>
|
|
<td><span class="badge text-bg-light">Outline</span></td>
|
|
<td><span class="severity-pill info">Info</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Forms</h2>
|
|
<form>
|
|
<div class="row g-2">
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="light-title">Text input</label>
|
|
<input class="form-control" id="light-title" value="The missing ledger" />
|
|
<span class="text-danger">Example validation message.</span>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="light-date">Date input</label>
|
|
<input class="form-control" id="light-date" type="date" value="2026-06-18" />
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label" for="light-summary">Textarea</label>
|
|
<textarea class="form-control" id="light-summary" rows="3">A compact sample of longer scene notes.</textarea>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="light-select">Select list</label>
|
|
<select class="form-select" id="light-select">
|
|
<option>Outline</option>
|
|
<option selected>Draft</option>
|
|
<option>Revision</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label d-block">Checkboxes and radios</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked />
|
|
<span class="form-check-label">Track continuity</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" name="light-radio" type="radio" checked />
|
|
<span class="form-check-label">Primary</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" name="light-radio" type="radio" />
|
|
<span class="form-check-label">Secondary</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Buttons</h2>
|
|
<div class="theme-audit-button-stack">
|
|
<button class="btn btn-primary" type="button">Primary</button>
|
|
<button class="btn btn-secondary" type="button">Secondary</button>
|
|
<button class="btn btn-outline-primary" type="button">Outline</button>
|
|
<button class="btn btn-danger" type="button">Danger</button>
|
|
<button class="btn btn-success" type="button">Success</button>
|
|
<button class="btn btn-warning" type="button">Warning</button>
|
|
<button class="btn btn-outline-secondary btn-sm" type="button">Small</button>
|
|
<button class="btn btn-primary" type="button" disabled>Disabled</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Alerts and Badges</h2>
|
|
<div class="alert alert-info">Info alert sample.</div>
|
|
<div class="alert alert-success">Success alert sample.</div>
|
|
<div class="alert alert-warning">Warning alert sample.</div>
|
|
<div class="alert alert-danger mb-3">Danger alert sample.</div>
|
|
<div class="theme-audit-button-stack">
|
|
<span class="badge text-bg-success">Active</span>
|
|
<span class="badge text-bg-warning">Review</span>
|
|
<span class="badge text-bg-danger">Blocked</span>
|
|
<span class="status-pill">Status pill</span>
|
|
<span class="severity-pill info">Info</span>
|
|
<span class="severity-pill warning">Warning</span>
|
|
<span class="severity-pill error">Error</span>
|
|
<span class="archived-badge">Archived</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Navigation Components</h2>
|
|
<ul class="nav nav-pills mb-3">
|
|
<li class="nav-item"><a class="nav-link active" href="#">Overview</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Scenes</a></li>
|
|
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
|
|
</ul>
|
|
<div class="accordion mb-3" id="light-audit-accordion">
|
|
<div class="accordion-item">
|
|
<h3 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#light-audit-collapse">Accordion sample</button>
|
|
</h3>
|
|
<div class="accordion-collapse collapse show" id="light-audit-collapse">
|
|
<div class="accordion-body">Collapsible content using Bootstrap accordion styling.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown mb-3">
|
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Open scene</a></li>
|
|
<li><a class="dropdown-item" href="#">Export notes</a></li>
|
|
</ul>
|
|
</div>
|
|
<nav aria-label="Light pagination">
|
|
<ul class="pagination pagination-sm mb-0">
|
|
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Modals and Overlays</h2>
|
|
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#lightThemeAuditModal">Open modal</button>
|
|
<button class="plotline-help-icon ms-2" type="button" data-help-icon data-help-key="theme.audit" data-help-title="Help popover" data-help-summary="Sample help popover content." data-help-micro="Help trigger">?</button>
|
|
<div class="modal fade" id="lightThemeAuditModal" tabindex="-1" aria-labelledby="lightThemeAuditModalTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content plotline-confirm-modal">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title fs-5" id="lightThemeAuditModalTitle">Modal sample</h2>
|
|
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">Modal body content for contrast and border checks.</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
|
|
<button class="btn btn-primary" type="button">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Progress and Timeline</h2>
|
|
<div class="progress mb-3" role="progressbar" aria-label="Draft progress" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar" style="width: 65%">65%</div>
|
|
</div>
|
|
<div class="theme-audit-timeline timeline-workspace">
|
|
<div class="timeline-chapter" style="--chapter-scene-count: 2;">
|
|
<div class="timeline-chapter-title"><strong>Chapter 7</strong><span>Two scenes</span></div>
|
|
<div class="timeline-scenes">
|
|
<article class="timeline-scene-card selected">
|
|
<strong>Scene 1</strong>
|
|
<p class="scene-summary">A public reveal changes the stakes.</p>
|
|
<div class="scene-badge-row"><span class="badge text-bg-warning">Revision</span></div>
|
|
</article>
|
|
<article class="timeline-scene-card">
|
|
<strong>Scene 2</strong>
|
|
<p class="scene-summary">The character chooses a side.</p>
|
|
<div class="scene-badge-row"><span class="badge text-bg-success">Draft</span></div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>PlotDirector-Specific Components</h2>
|
|
<div class="scene-inspector-root">
|
|
<div class="inspector-quick-nav">
|
|
<input class="form-control form-control-sm inspector-search" type="search" placeholder="Find in scene..." />
|
|
<div class="inspector-nav-links">
|
|
<a class="active" href="#">Overview</a>
|
|
<a href="#">Characters</a>
|
|
<a href="#">Warnings</a>
|
|
</div>
|
|
</div>
|
|
<section class="inspector-section is-open">
|
|
<button class="inspector-accordion-toggle" type="button" aria-expanded="true"><span>Scene Inspector Card</span><span class="accordion-count">3</span></button>
|
|
<div class="inspector-accordion-body">
|
|
<p class="inspector-subheading">Compact scene metadata</p>
|
|
<div class="overview-chip-grid">
|
|
<span class="overview-chip">Draft</span>
|
|
<span class="overview-chip attention">1 warning</span>
|
|
<span class="purpose-chip">Reveal</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<article class="warning-mini-card">
|
|
<span class="severity-pill warning">Warning</span>
|
|
<p>Sample compact continuity warning card.</p>
|
|
</article>
|
|
<article class="thread-event-item">
|
|
<span class="thread-event-marker"></span>
|
|
<div><strong>Thread event</strong><p class="mb-0">A sample plot thread note.</p></div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="theme-audit-preview" data-theme="dark" data-bs-theme="dark" aria-label="Dark theme preview">
|
|
<div class="page-heading compact mb-0">
|
|
<div>
|
|
<p class="eyebrow">Dark theme</p>
|
|
<h1>Component Samples</h1>
|
|
<p class="lead-text">The same representative elements scoped to dark theme attributes.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Typography</h2>
|
|
<nav class="breadcrumb-trail" aria-label="Sample breadcrumb">
|
|
<a href="#">Projects</a>
|
|
<a href="#">The Brass Orchard</a>
|
|
<span>Theme audit</span>
|
|
</nav>
|
|
<p class="eyebrow">Scene planning</p>
|
|
<h1>Page heading</h1>
|
|
<h2>Subheading</h2>
|
|
<p class="lead-text">A lead paragraph for introduction copy and overview states.</p>
|
|
<p class="muted mb-0">Muted helper text for metadata, hints, and quieter descriptions.</p>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Cards</h2>
|
|
<div class="content-grid">
|
|
<article class="plain-card">
|
|
<p class="eyebrow">Standard card</p>
|
|
<h3>Project overview</h3>
|
|
<p>Card body text with a short action row.</p>
|
|
<div class="button-row">
|
|
<button class="btn btn-outline-primary btn-sm" type="button">Open</button>
|
|
<button class="btn btn-outline-secondary btn-sm" type="button">Edit</button>
|
|
</div>
|
|
</article>
|
|
<article class="plain-card">
|
|
<p class="eyebrow">Dashboard card</p>
|
|
<p class="writer-kpi">42%</p>
|
|
<p>Draft progress this week.</p>
|
|
</article>
|
|
</div>
|
|
<div class="empty-panel mt-3">
|
|
<h2>Empty state</h2>
|
|
<p>No matching scenes were found for this filter.</p>
|
|
<button class="btn btn-primary" type="button">Create sample</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Tables</h2>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Scene</th>
|
|
<th>Status</th>
|
|
<th>Warnings</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Chapter 3, Scene 2</td>
|
|
<td><span class="badge text-bg-success">Drafted</span></td>
|
|
<td><span class="severity-pill warning">Warning</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Chapter 4, Scene 1</td>
|
|
<td><span class="badge text-bg-light">Outline</span></td>
|
|
<td><span class="severity-pill info">Info</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Forms</h2>
|
|
<form>
|
|
<div class="row g-2">
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="dark-title">Text input</label>
|
|
<input class="form-control" id="dark-title" value="The missing ledger" />
|
|
<span class="text-danger">Example validation message.</span>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="dark-date">Date input</label>
|
|
<input class="form-control" id="dark-date" type="date" value="2026-06-18" />
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label" for="dark-summary">Textarea</label>
|
|
<textarea class="form-control" id="dark-summary" rows="3">A compact sample of longer scene notes.</textarea>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="dark-select">Select list</label>
|
|
<select class="form-select" id="dark-select">
|
|
<option>Outline</option>
|
|
<option selected>Draft</option>
|
|
<option>Revision</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label d-block">Checkboxes and radios</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked />
|
|
<span class="form-check-label">Track continuity</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" name="dark-radio" type="radio" checked />
|
|
<span class="form-check-label">Primary</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" name="dark-radio" type="radio" />
|
|
<span class="form-check-label">Secondary</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Buttons</h2>
|
|
<div class="theme-audit-button-stack">
|
|
<button class="btn btn-primary" type="button">Primary</button>
|
|
<button class="btn btn-secondary" type="button">Secondary</button>
|
|
<button class="btn btn-outline-primary" type="button">Outline</button>
|
|
<button class="btn btn-danger" type="button">Danger</button>
|
|
<button class="btn btn-success" type="button">Success</button>
|
|
<button class="btn btn-warning" type="button">Warning</button>
|
|
<button class="btn btn-outline-secondary btn-sm" type="button">Small</button>
|
|
<button class="btn btn-primary" type="button" disabled>Disabled</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Alerts and Badges</h2>
|
|
<div class="alert alert-info">Info alert sample.</div>
|
|
<div class="alert alert-success">Success alert sample.</div>
|
|
<div class="alert alert-warning">Warning alert sample.</div>
|
|
<div class="alert alert-danger mb-3">Danger alert sample.</div>
|
|
<div class="theme-audit-button-stack">
|
|
<span class="badge text-bg-success">Active</span>
|
|
<span class="badge text-bg-warning">Review</span>
|
|
<span class="badge text-bg-danger">Blocked</span>
|
|
<span class="status-pill">Status pill</span>
|
|
<span class="severity-pill info">Info</span>
|
|
<span class="severity-pill warning">Warning</span>
|
|
<span class="severity-pill error">Error</span>
|
|
<span class="archived-badge">Archived</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Navigation Components</h2>
|
|
<ul class="nav nav-pills mb-3">
|
|
<li class="nav-item"><a class="nav-link active" href="#">Overview</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Scenes</a></li>
|
|
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
|
|
</ul>
|
|
<div class="accordion mb-3" id="dark-audit-accordion">
|
|
<div class="accordion-item">
|
|
<h3 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#dark-audit-collapse">Accordion sample</button>
|
|
</h3>
|
|
<div class="accordion-collapse collapse show" id="dark-audit-collapse">
|
|
<div class="accordion-body">Collapsible content using Bootstrap accordion styling.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown mb-3">
|
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Open scene</a></li>
|
|
<li><a class="dropdown-item" href="#">Export notes</a></li>
|
|
</ul>
|
|
</div>
|
|
<nav aria-label="Dark pagination">
|
|
<ul class="pagination pagination-sm mb-0">
|
|
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Modals and Overlays</h2>
|
|
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#darkThemeAuditModal">Open modal</button>
|
|
<button class="plotline-help-icon ms-2" type="button" data-help-icon data-help-key="theme.audit" data-help-title="Help popover" data-help-summary="Sample help popover content." data-help-micro="Help trigger">?</button>
|
|
<div class="modal fade" id="darkThemeAuditModal" tabindex="-1" aria-labelledby="darkThemeAuditModalTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content plotline-confirm-modal">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title fs-5" id="darkThemeAuditModalTitle">Modal sample</h2>
|
|
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">Modal body content for contrast and border checks.</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
|
|
<button class="btn btn-primary" type="button">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>Progress and Timeline</h2>
|
|
<div class="progress mb-3" role="progressbar" aria-label="Draft progress" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar" style="width: 65%">65%</div>
|
|
</div>
|
|
<div class="theme-audit-timeline timeline-workspace">
|
|
<div class="timeline-chapter" style="--chapter-scene-count: 2;">
|
|
<div class="timeline-chapter-title"><strong>Chapter 7</strong><span>Two scenes</span></div>
|
|
<div class="timeline-scenes">
|
|
<article class="timeline-scene-card selected">
|
|
<strong>Scene 1</strong>
|
|
<p class="scene-summary">A public reveal changes the stakes.</p>
|
|
<div class="scene-badge-row"><span class="badge text-bg-warning">Revision</span></div>
|
|
</article>
|
|
<article class="timeline-scene-card">
|
|
<strong>Scene 2</strong>
|
|
<p class="scene-summary">The character chooses a side.</p>
|
|
<div class="scene-badge-row"><span class="badge text-bg-success">Draft</span></div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="theme-audit-section">
|
|
<h2>PlotDirector-Specific Components</h2>
|
|
<div class="scene-inspector-root">
|
|
<div class="inspector-quick-nav">
|
|
<input class="form-control form-control-sm inspector-search" type="search" placeholder="Find in scene..." />
|
|
<div class="inspector-nav-links">
|
|
<a class="active" href="#">Overview</a>
|
|
<a href="#">Characters</a>
|
|
<a href="#">Warnings</a>
|
|
</div>
|
|
</div>
|
|
<section class="inspector-section is-open">
|
|
<button class="inspector-accordion-toggle" type="button" aria-expanded="true"><span>Scene Inspector Card</span><span class="accordion-count">3</span></button>
|
|
<div class="inspector-accordion-body">
|
|
<p class="inspector-subheading">Compact scene metadata</p>
|
|
<div class="overview-chip-grid">
|
|
<span class="overview-chip">Draft</span>
|
|
<span class="overview-chip attention">1 warning</span>
|
|
<span class="purpose-chip">Reveal</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<article class="warning-mini-card">
|
|
<span class="severity-pill warning">Warning</span>
|
|
<p>Sample compact continuity warning card.</p>
|
|
</article>
|
|
<article class="thread-event-item">
|
|
<span class="thread-event-marker"></span>
|
|
<div><strong>Thread event</strong><p class="mb-0">A sample plot thread note.</p></div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</div>
|