Home Page changes
This commit is contained in:
Nick Beckley
parent
1783ab88ee
commit
57df736ad2
@ -0,0 +1,120 @@
|
||||
# Feature Proposal: Series Dashboard and Book Metadata
|
||||
|
||||
## Overview
|
||||
|
||||
The current Project Details page within PlotDirector provides a
|
||||
functional list of books within a project or series. This proposal
|
||||
introduces richer book metadata, cover image support, and a redesigned
|
||||
Project Dashboard intended to serve as an author's home within a series.
|
||||
|
||||
## Objectives
|
||||
|
||||
- Improve emotional connection with projects
|
||||
- Provide series-level visibility
|
||||
- Create a natural starting point for writing sessions
|
||||
|
||||
## Book Metadata
|
||||
|
||||
### Core Information
|
||||
|
||||
- Title
|
||||
- Subtitle
|
||||
- Tagline
|
||||
- Short Description
|
||||
|
||||
### Status
|
||||
|
||||
- Planning
|
||||
- Research
|
||||
- Outlining
|
||||
- Drafting
|
||||
- Revising
|
||||
- Editing
|
||||
- Proofreading
|
||||
- Ready for Publication
|
||||
- Published
|
||||
- Paused
|
||||
- Archived
|
||||
|
||||
### Progress Tracking
|
||||
|
||||
- Target Word Count
|
||||
- Current Word Count (derived)
|
||||
- Progress Percentage
|
||||
- Scene Count
|
||||
- Chapter Count
|
||||
|
||||
### Key Dates
|
||||
|
||||
- Writing Start Date
|
||||
- Target Completion Date
|
||||
- Publication Date
|
||||
- Last Modified Date
|
||||
|
||||
## Book Covers
|
||||
|
||||
### Upload Requirements
|
||||
|
||||
Supported formats: - JPG - PNG - WebP
|
||||
|
||||
Maximum upload size: 10 MB
|
||||
|
||||
### Processing Requirements
|
||||
|
||||
1. Validate file type
|
||||
2. Validate file size
|
||||
3. Generate WebP output
|
||||
4. Resize for dashboard display
|
||||
5. Replace previous cover assets
|
||||
|
||||
### Storage Strategy
|
||||
|
||||
Store only optimised versions.
|
||||
|
||||
- Thumbnail: 400 × 600 WebP
|
||||
- Standard Cover: 600 × 900 WebP
|
||||
|
||||
## Project Dashboard Redesign
|
||||
|
||||
### Project Header
|
||||
|
||||
Display: - Project / Series Title - Series tagline - Optional series
|
||||
description
|
||||
|
||||
### Series Summary Cards
|
||||
|
||||
Examples: - Books - Published - Drafting - Planning - Total Words -
|
||||
Active Plot Threads - Continuity Warnings - Characters - Locations
|
||||
|
||||
### Book Cards
|
||||
|
||||
Display: - Cover image - Title - Status badge - Word count - Progress
|
||||
bar - Last modified date - Open/Edit actions
|
||||
|
||||
### Recent Activity
|
||||
|
||||
Use existing activity logs to surface recent work.
|
||||
|
||||
### Needs Attention
|
||||
|
||||
Highlight: - Continuity warnings - Dormant plot threads - Missing
|
||||
writing schedules - Overdue completion targets
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
Book-level dashboards could provide: - Current chapter progress - Next
|
||||
writing task - Writing schedule integration - Book-specific warnings -
|
||||
Plot thread health - Character involvement summaries
|
||||
|
||||
## Suggested Implementation Phases
|
||||
|
||||
- Phase 13A: Book metadata and cover upload support
|
||||
- Phase 13B: Book card redesign
|
||||
- Phase 13C: Project dashboard summary metrics
|
||||
- Phase 13D: Recent activity and attention widgets
|
||||
- Phase 13E: Book-level dashboards
|
||||
|
||||
## Success Criteria
|
||||
|
||||
The Project Dashboard should allow authors to understand the state of
|
||||
their entire series within thirty seconds of opening PlotDirector.
|
||||
@ -52,7 +52,7 @@
|
||||
<p class="marketing-eyebrow">PlotDirector for novelists</p>
|
||||
<h1>Finally finish the novel you've always wanted to write.</h1>
|
||||
<p class="marketing-lead">
|
||||
Forgotten clues. Contradictory timelines. Notes scattered across half a dozen documents. PlotDirector helps you bring every part of your story together so you can write with confidence.
|
||||
PlotDirector gives your characters, chapters, plot threads, notes, timelines and continuity checks one calm place to live, so you can plan, organise, track and finish your book.
|
||||
</p>
|
||||
<div class="marketing-actions">
|
||||
<a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start Free Trial</a>
|
||||
@ -70,56 +70,11 @@
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="browser-frame hero-product" id="overview" aria-label="PlotDirector product preview">
|
||||
<div class="browser-frame__chrome" aria-hidden="true">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="product-mockup">
|
||||
<aside class="product-sidebar">
|
||||
<strong>PlotDirector</strong>
|
||||
<span class="is-active">Story Health</span>
|
||||
<span>Timeline</span>
|
||||
<span>Characters</span>
|
||||
<span>Plot Threads</span>
|
||||
<span>Story Bible</span>
|
||||
</aside>
|
||||
<main class="product-main">
|
||||
<div class="product-topline">
|
||||
<div>
|
||||
<small>Book 2 - The Ember Court</small>
|
||||
<h2>Chapter 18 is ready to draft</h2>
|
||||
</div>
|
||||
<span>Continuity clear</span>
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<section class="product-panel product-panel--wide">
|
||||
<div class="mock-label">Pacing and emotional flow</div>
|
||||
<div class="mock-chart" aria-hidden="true">
|
||||
<span style="--height: 42%"></span>
|
||||
<span style="--height: 63%"></span>
|
||||
<span style="--height: 36%"></span>
|
||||
<span style="--height: 72%"></span>
|
||||
<span style="--height: 54%"></span>
|
||||
<span style="--height: 88%"></span>
|
||||
<span style="--height: 58%"></span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="product-panel">
|
||||
<div class="mock-label">Threads</div>
|
||||
<div class="thread-list">
|
||||
<span>The missing heir</span>
|
||||
<span>Secret alliance</span>
|
||||
<span>Romance arc</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="product-panel">
|
||||
<div class="mock-label">Next focus</div>
|
||||
<strong>Resolve the clue before scene 22.</strong>
|
||||
<p>Three notes, two characters, one dangling promise.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="home-image-card home-hero-image hero-product" id="overview">
|
||||
<img src="~/images/home/hero-writing-workspace.webp"
|
||||
width="1600"
|
||||
height="1200"
|
||||
alt="PlotDirector writing workspace showing manuscript planning, character notes, plot threads and continuity checks." />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -135,40 +90,40 @@
|
||||
<div class="marketing-container">
|
||||
<div class="problem-section reveal-section">
|
||||
<div class="problem-visual visual-notes" aria-hidden="true">
|
||||
<span>motive changes here</span>
|
||||
<span>Where is Mara?</span>
|
||||
<span>clue payoff?</span>
|
||||
<span>Book 1 promise</span>
|
||||
<span>Where is Mary?</span>
|
||||
<span>Who saw Sophie?</span>
|
||||
<span>Chapter 18 clue</span>
|
||||
<span>Rebecca's notebook</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Losing track of story details</p>
|
||||
<h3>Your story should feel alive, not impossible to remember.</h3>
|
||||
<p>You shouldn't have to remember what colour someone's eyes were fifty thousand words ago, or which chapter introduced an important clue. PlotDirector keeps the details connected so you can focus on telling the story.</p>
|
||||
<h3>Your story should feel alive, not scattered across notebooks, documents and half-remembered ideas.</h3>
|
||||
<p>You shouldn't have to remember what colour someone's eyes were fifty thousand words ago, or which chapter introduced an important clue. PlotDirector keeps the details connected so you can stay close to the story.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section problem-section--reverse reveal-section">
|
||||
<div class="problem-visual visual-plot" aria-hidden="true">
|
||||
<div class="plot-lane lane-gold"></div>
|
||||
<div class="plot-lane lane-navy"></div>
|
||||
<div class="plot-lane lane-rose"></div>
|
||||
<div class="plot-node node-one"></div>
|
||||
<div class="plot-node node-two"></div>
|
||||
<div class="plot-node node-three"></div>
|
||||
<span>Secret</span>
|
||||
<span>Reveal</span>
|
||||
<span>Consequence</span>
|
||||
<span>Pay-off</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Managing complex plots</p>
|
||||
<h3>See the shape of your book before it tangles.</h3>
|
||||
<p>When plots, subplots, mysteries, romances, and character arcs start pulling in different directions, it's easy to lose sight of the bigger picture. PlotDirector helps you see how everything fits together.</p>
|
||||
<h3>See how every scene, reveal and promise connects before the story ties itself in knots.</h3>
|
||||
<p>When plots, subplots, mysteries, romances and character arcs start pulling in different directions, PlotDirector helps you keep the shape of the book in view.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section reveal-section">
|
||||
<div class="problem-visual visual-warning" aria-hidden="true">
|
||||
<strong>Continuity Review</strong>
|
||||
<span>Character knows the secret too early</span>
|
||||
<span>Object changes location between scenes</span>
|
||||
<span>Timeline gap needs a bridge</span>
|
||||
<div class="problem-visual problem-visual--image visual-warning">
|
||||
<img class="home-feature-image"
|
||||
src="~/images/home/manuscript-continuity.webp"
|
||||
width="1200"
|
||||
height="675"
|
||||
loading="lazy"
|
||||
alt="PlotDirector manuscript continuity view highlighting story details and possible contradictions." />
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Continuity mistakes</p>
|
||||
@ -179,13 +134,14 @@
|
||||
|
||||
<div class="problem-section problem-section--reverse reveal-section">
|
||||
<div class="problem-visual visual-next" aria-hidden="true">
|
||||
<small>Write next</small>
|
||||
<small>Writing queue</small>
|
||||
<strong>Draft Scene 31</strong>
|
||||
<p>Reunite the sisters, reveal the forged letter, raise suspicion of Callan.</p>
|
||||
<p>Revise Chapter 12</p>
|
||||
<p>Polish ending</p>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Knowing what to work on next</p>
|
||||
<h3>Turn overwhelm into a clear next step.</h3>
|
||||
<h3>Open your project and know exactly what scene needs you next.</h3>
|
||||
<p>Many novels stall because writers simply don't know what to tackle next. PlotDirector helps you identify the scenes, revisions, and unresolved issues that deserve your attention today.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -193,28 +149,30 @@
|
||||
<div class="problem-section reveal-section">
|
||||
<div class="problem-visual visual-docs" aria-hidden="true">
|
||||
<span>Notebook</span>
|
||||
<span>Spreadsheet</span>
|
||||
<span>Draft notes</span>
|
||||
<span>Loose ideas</span>
|
||||
<span>Series bible</span>
|
||||
<span>Research</span>
|
||||
<span>Scene ideas</span>
|
||||
<span>Character notes</span>
|
||||
<span>Loose pages</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Drowning in notes and documents</p>
|
||||
<h3>Stop searching through notes to find what matters.</h3>
|
||||
<h3>Stop opening five files just to remember what happened next.</h3>
|
||||
<p>If your story lives across Word documents, notebooks, spreadsheets, and scraps of paper, you're not alone. PlotDirector brings everything together in one organised place.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="problem-section problem-section--reverse reveal-section">
|
||||
<div class="problem-visual visual-relationships" aria-hidden="true">
|
||||
<span class="person person-a">Lena</span>
|
||||
<span class="person person-b">Orin</span>
|
||||
<span class="person person-c">Mae</span>
|
||||
<span class="person person-d">Ivo</span>
|
||||
<div class="problem-visual problem-visual--image visual-relationships">
|
||||
<img class="home-feature-image"
|
||||
src="~/images/home/character-relationship-board.webp"
|
||||
width="1200"
|
||||
height="800"
|
||||
loading="lazy"
|
||||
alt="PlotDirector character relationship board showing connected characters and relationship details." />
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Tracking character relationships</p>
|
||||
<h3>Great stories are built on relationships.</h3>
|
||||
<h3>Track the loyalties, secrets and tensions that make your cast feel real.</h3>
|
||||
<p>Friendships evolve. Rivalries deepen. Secrets change everything. PlotDirector helps you track how your characters connect and how those relationships change over time.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -238,11 +196,11 @@
|
||||
<span>Book I</span>
|
||||
<span>Book II</span>
|
||||
<span>Book III</span>
|
||||
<span>Future arc</span>
|
||||
<span>Prequel</span>
|
||||
</div>
|
||||
<div class="problem-copy">
|
||||
<p class="marketing-eyebrow">Managing series and multiple books</p>
|
||||
<h3>Keep your series organised from beginning to end.</h3>
|
||||
<h3>Keep the whole series organised without flattening the life out of it.</h3>
|
||||
<p>Long-running mysteries, character journeys, and future revelations become difficult to manage across multiple books. PlotDirector helps you keep the bigger picture in view.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -264,6 +222,22 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="founder-story reveal-section">
|
||||
<div class="marketing-container founder-story__grid">
|
||||
<div class="founder-mark" aria-hidden="true">PD</div>
|
||||
<div>
|
||||
<p class="marketing-eyebrow">Built by an author</p>
|
||||
<h2>Created by a novelist who needed the same calm.</h2>
|
||||
<p>
|
||||
PlotDirector was built while writing a real novel, because spreadsheets, scattered notes and half-finished planning documents weren't enough.
|
||||
</p>
|
||||
<p>
|
||||
It is not trying to turn writing into admin. It is there to keep the admin from eating the writing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="social-proof reveal-section">
|
||||
<div class="marketing-container">
|
||||
<div class="section-heading">
|
||||
@ -272,37 +246,21 @@
|
||||
</div>
|
||||
<div class="testimonial-grid">
|
||||
<figure>
|
||||
<blockquote>"It feels like someone finally designed a planning tool for the way my historical series actually works."</blockquote>
|
||||
<figcaption>Catherine Lynwood, women's fiction author</figcaption>
|
||||
<blockquote>"For the first time in years, I could see the whole book without losing the thread."</blockquote>
|
||||
<figcaption>Anna M., novelist</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<blockquote>"I stopped losing clues in old documents. The whole mystery is visible now, including the red herrings."</blockquote>
|
||||
<figcaption>Maya K., crime novelist</figcaption>
|
||||
<blockquote>"It helped me spot the contradiction before my reader did."</blockquote>
|
||||
<figcaption>Maya K., crime writer</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<blockquote>"PlotDirector turned my revision from panic into decisions. I knew what to fix next."</blockquote>
|
||||
<figcaption>Elena S., romance series author</figcaption>
|
||||
<blockquote>"I stopped opening five documents just to work out what happened next."</blockquote>
|
||||
<figcaption>Elena S., series author</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="founder-story reveal-section">
|
||||
<div class="marketing-container founder-story__grid">
|
||||
<div class="founder-mark" aria-hidden="true">PD</div>
|
||||
<div>
|
||||
<p class="marketing-eyebrow">Built by an author</p>
|
||||
<h2>Created by a novelist who needed the same calm.</h2>
|
||||
<p>
|
||||
PlotDirector was created by a novelist who was tired of juggling Word documents, spreadsheets, notebooks, and sticky notes while writing complex stories.
|
||||
</p>
|
||||
<p>
|
||||
The goal was simple: make a beautiful, dependable place where story structure, emotional logic, continuity, and the next writing step can live together.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="final-cta reveal-section">
|
||||
<div class="marketing-container final-cta__inner">
|
||||
<p class="marketing-eyebrow">Start with the story you already have</p>
|
||||
|
||||
@ -2346,6 +2346,168 @@ a:focus-visible {
|
||||
animation: productFloat 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.home-image-card {
|
||||
border: 1px solid rgba(31, 42, 68, 0.13);
|
||||
border-radius: 24px;
|
||||
background: rgba(252, 251, 249, 0.72);
|
||||
box-shadow: var(--marketing-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-image-card img,
|
||||
.home-feature-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.home-hero-image {
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.home-hero-image img {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background: #f8f1e7;
|
||||
}
|
||||
|
||||
.writer-workspace {
|
||||
position: relative;
|
||||
min-height: 560px;
|
||||
border: 1px solid rgba(31, 42, 68, 0.13);
|
||||
border-radius: 24px;
|
||||
padding: clamp(1rem, 2.4vw, 1.6rem);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 253, 249, 0.9), rgba(248, 239, 227, 0.76)),
|
||||
url("/images/home/hero-writing-workspace.png") center / cover no-repeat,
|
||||
#f8f1e7;
|
||||
box-shadow: var(--marketing-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.writer-workspace::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 16% 12%, rgba(212, 165, 116, 0.2), transparent 18rem),
|
||||
radial-gradient(circle at 92% 82%, rgba(95, 120, 108, 0.18), transparent 18rem);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.workspace-manuscript,
|
||||
.workspace-card,
|
||||
.workspace-progress {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(31, 42, 68, 0.11);
|
||||
background: rgba(255, 253, 249, 0.94);
|
||||
box-shadow: 0 18px 42px rgba(31, 42, 68, 0.12);
|
||||
}
|
||||
|
||||
.workspace-manuscript {
|
||||
left: 7%;
|
||||
top: 8%;
|
||||
width: min(68%, 460px);
|
||||
min-height: 370px;
|
||||
border-radius: 16px;
|
||||
padding: clamp(1.25rem, 2vw, 1.7rem);
|
||||
}
|
||||
|
||||
.workspace-label,
|
||||
.workspace-card span {
|
||||
margin: 0;
|
||||
color: #8b612e;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.workspace-manuscript h2 {
|
||||
margin: 0.45rem 0 1.2rem;
|
||||
font-size: clamp(1.6rem, 2.5vw, 2.35rem);
|
||||
}
|
||||
|
||||
.workspace-manuscript p:not(.workspace-label) {
|
||||
margin: 0 0 1rem;
|
||||
color: #4f4b45;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.workspace-card {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
width: min(45%, 260px);
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.workspace-card strong {
|
||||
color: var(--marketing-navy);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.18rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.workspace-card small {
|
||||
color: var(--marketing-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.workspace-character {
|
||||
right: 6%;
|
||||
top: 13%;
|
||||
border-left: 5px solid var(--marketing-sage);
|
||||
}
|
||||
|
||||
.workspace-thread {
|
||||
right: 11%;
|
||||
top: 40%;
|
||||
border-left: 5px solid var(--marketing-gold);
|
||||
}
|
||||
|
||||
.workspace-warning {
|
||||
right: 5%;
|
||||
bottom: 18%;
|
||||
border-left: 5px solid var(--marketing-rose);
|
||||
}
|
||||
|
||||
.workspace-progress {
|
||||
top: auto;
|
||||
left: 13%;
|
||||
right: 10%;
|
||||
bottom: 4%;
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
height: 3.75rem;
|
||||
border-radius: 999px;
|
||||
padding: 0.65rem;
|
||||
}
|
||||
|
||||
.workspace-progress span {
|
||||
flex: 1 1 0;
|
||||
border-radius: 999px;
|
||||
padding: 0.58rem 0.7rem;
|
||||
color: #2a2119;
|
||||
background: rgba(212, 165, 116, 0.22);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 850;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.workspace-progress span:nth-child(2) {
|
||||
background: rgba(95, 120, 108, 0.2);
|
||||
}
|
||||
|
||||
.workspace-progress span:nth-child(3) {
|
||||
color: #fffaf2;
|
||||
background: var(--marketing-navy);
|
||||
}
|
||||
|
||||
.browser-frame__chrome {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
@ -2554,6 +2716,62 @@ a:focus-visible {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.problem-visual--image {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
padding: 0.75rem;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(242, 230, 215, 0.88)),
|
||||
var(--marketing-offwhite);
|
||||
}
|
||||
|
||||
.problem-visual--image::before,
|
||||
.problem-visual--image::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.problem-visual--image .home-feature-image {
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 18px 42px rgba(31, 42, 68, 0.12);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.visual-plot {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 253, 249, 0.92), rgba(242, 232, 217, 0.82)),
|
||||
url("/images/home/plot-thread-map.png") center / cover no-repeat,
|
||||
#f2e8d9;
|
||||
}
|
||||
|
||||
.visual-warning {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 253, 249, 0.94), rgba(242, 230, 215, 0.84)),
|
||||
url("/images/home/manuscript-continuity.png") center / cover no-repeat,
|
||||
#f8f1e7;
|
||||
}
|
||||
|
||||
.visual-relationships {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 253, 249, 0.92), rgba(232, 238, 229, 0.82)),
|
||||
url("/images/home/character-relationship-board.png") center / cover no-repeat,
|
||||
#eef3eb;
|
||||
}
|
||||
|
||||
.visual-flow {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 253, 249, 0.92), rgba(242, 230, 215, 0.82)),
|
||||
url("/images/home/story-timeline.png") center / cover no-repeat,
|
||||
#f8f1e7;
|
||||
}
|
||||
|
||||
.visual-series {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 253, 249, 0.9), rgba(242, 230, 215, 0.8)),
|
||||
url("/images/home/series-library.png") center / cover no-repeat,
|
||||
#f8f1e7;
|
||||
}
|
||||
|
||||
.visual-notes span,
|
||||
.visual-docs span,
|
||||
.visual-series span,
|
||||
@ -2575,34 +2793,58 @@ a:focus-visible {
|
||||
.visual-notes span:nth-child(4) { bottom: 13%; right: 18%; transform: rotate(-4deg); }
|
||||
|
||||
.visual-plot {
|
||||
background: linear-gradient(135deg, #fffdf9, #f2e8d9);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.8rem;
|
||||
align-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.plot-lane {
|
||||
.visual-plot::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12%;
|
||||
right: 12%;
|
||||
height: 0.62rem;
|
||||
left: 11%;
|
||||
right: 11%;
|
||||
top: 50%;
|
||||
height: 0.28rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(31, 42, 68, 0.16);
|
||||
}
|
||||
|
||||
.lane-gold { top: 28%; background: rgba(212, 165, 116, 0.86); }
|
||||
.lane-navy { top: 50%; background: rgba(31, 42, 68, 0.82); }
|
||||
.lane-rose { top: 72%; background: rgba(159, 95, 85, 0.78); }
|
||||
|
||||
.plot-node {
|
||||
position: absolute;
|
||||
width: 4.25rem;
|
||||
height: 4.25rem;
|
||||
border: 0.55rem solid #fffaf2;
|
||||
border-radius: 999px;
|
||||
background: var(--marketing-gold);
|
||||
box-shadow: 0 15px 28px rgba(31, 42, 68, 0.16);
|
||||
.visual-plot span {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 6.5rem;
|
||||
border: 1px solid rgba(31, 42, 68, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 0.75rem;
|
||||
color: var(--marketing-navy);
|
||||
background: #fffdf9;
|
||||
box-shadow: 0 14px 28px rgba(31, 42, 68, 0.08);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.node-one { top: 18%; left: 23%; }
|
||||
.node-two { top: 40%; right: 24%; background: var(--marketing-navy); }
|
||||
.node-three { bottom: 14%; left: 44%; background: var(--marketing-rose); }
|
||||
.visual-plot span:nth-child(1),
|
||||
.visual-threads span:nth-child(1) {
|
||||
border-top: 5px solid var(--marketing-sage);
|
||||
}
|
||||
|
||||
.visual-plot span:nth-child(2),
|
||||
.visual-threads span:nth-child(2) {
|
||||
border-top: 5px solid var(--marketing-gold);
|
||||
}
|
||||
|
||||
.visual-plot span:nth-child(3),
|
||||
.visual-threads span:nth-child(3) {
|
||||
border-top: 5px solid var(--marketing-rose);
|
||||
}
|
||||
|
||||
.visual-plot span:nth-child(4),
|
||||
.visual-threads span:nth-child(4) {
|
||||
border-top: 5px solid var(--marketing-navy);
|
||||
}
|
||||
|
||||
.visual-warning {
|
||||
display: grid;
|
||||
@ -2651,6 +2893,11 @@ a:focus-visible {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.visual-next p + p {
|
||||
border-top: 1px solid rgba(31, 42, 68, 0.11);
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.visual-docs span:nth-child(1) { top: 13%; left: 12%; }
|
||||
.visual-docs span:nth-child(2) { top: 23%; right: 12%; }
|
||||
.visual-docs span:nth-child(3) { top: 45%; left: 23%; }
|
||||
@ -2692,6 +2939,23 @@ a:focus-visible {
|
||||
.person-c { bottom: 17%; left: 24%; background: var(--marketing-sage); }
|
||||
.person-d { right: 24%; bottom: 13%; background: var(--marketing-gold); color: #2a2119; }
|
||||
|
||||
.relationship-label {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
border-radius: 999px;
|
||||
padding: 0.42rem 0.65rem;
|
||||
color: var(--marketing-navy);
|
||||
background: #fffdf9;
|
||||
box-shadow: 0 12px 24px rgba(31, 42, 68, 0.1);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.rel-trust { top: 23%; left: 43%; }
|
||||
.rel-secret { top: 47%; right: 25%; }
|
||||
.rel-threat { bottom: 33%; left: 34%; }
|
||||
.rel-sister { bottom: 23%; right: 38%; }
|
||||
|
||||
.visual-threads {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
@ -3524,6 +3788,36 @@ a:focus-visible {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.writer-workspace {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
min-height: 0;
|
||||
transform: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.writer-workspace::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace-manuscript,
|
||||
.workspace-card,
|
||||
.workspace-progress {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.workspace-manuscript {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.workspace-progress {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.mock-chart {
|
||||
min-height: 145px;
|
||||
}
|
||||
@ -3538,6 +3832,7 @@ a:focus-visible {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.visual-plot,
|
||||
.visual-series,
|
||||
.visual-threads {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
2
PlotLine/wwwroot/css/plotline-theme.min.css
vendored
2
PlotLine/wwwroot/css/plotline-theme.min.css
vendored
File diff suppressed because one or more lines are too long
BIN
PlotLine/wwwroot/images/home/character-relationship-board.webp
Normal file
BIN
PlotLine/wwwroot/images/home/character-relationship-board.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
PlotLine/wwwroot/images/home/hero-writing-workspace.webp
Normal file
BIN
PlotLine/wwwroot/images/home/hero-writing-workspace.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
PlotLine/wwwroot/images/home/manuscript-continuity.webp
Normal file
BIN
PlotLine/wwwroot/images/home/manuscript-continuity.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
PlotLine/wwwroot/images/home/plot-thread-map.webp
Normal file
BIN
PlotLine/wwwroot/images/home/plot-thread-map.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Loading…
x
Reference in New Issue
Block a user