Add thumbnail image card to main Spark page and move sliders and tags to bottom
This commit is contained in:
airent106 committed
1 parent
ffe8fab1da
commit
b5af03b628
3 files changed
+228
-51
No files matched your search
+60
-51
@@ -397,47 +397,25 @@
|
||||
<div class="drawer-body">
|
||||
<!-- TAB 1: DETAILS, NOTES, CHECKLIST, PROS/CONS, RATINGS -->
|
||||
<div id="drawer-tab-details" class="drawer-tab-panel active">
|
||||
<div class="field-group">
|
||||
<label for="drawer-pitch-input">Elevator Pitch (One-sentence essence)</label>
|
||||
<input type="text" id="drawer-pitch-input" class="text-input" placeholder="What makes this idea compelling in one sentence?" />
|
||||
</div>
|
||||
<!-- Main Spark Cover Thumbnail & Elevator Pitch Hero -->
|
||||
<div class="spark-main-hero">
|
||||
<div id="drawer-main-thumb-box" class="spark-main-thumb-box"></div>
|
||||
<div class="spark-main-pitch-col">
|
||||
<div class="field-group">
|
||||
<label for="drawer-pitch-input">Elevator Pitch (One-sentence essence)</label>
|
||||
<input type="text" id="drawer-pitch-input" class="text-input" placeholder="What makes this idea compelling in one sentence?" />
|
||||
</div>
|
||||
|
||||
<!-- Prioritization Sliders -->
|
||||
<div class="ratings-card">
|
||||
<div class="rating-control">
|
||||
<label for="slider-excitement">🔥 Excitement: <strong id="val-excitement">3</strong>/5</label>
|
||||
<input type="range" id="slider-excitement" min="1" max="5" step="1" value="3" />
|
||||
<!-- Markdown Notes -->
|
||||
<div class="field-group">
|
||||
<div class="field-header-row">
|
||||
<label for="drawer-notes-input">Specs, Brainstorm & Markdown Notes</label>
|
||||
<button type="button" id="btn-toggle-md-preview" class="btn btn-ghost btn-xs">👁️ Toggle Preview</button>
|
||||
</div>
|
||||
<textarea id="drawer-notes-input" rows="6" class="textarea-input" placeholder="Write specs, architecture notes, concept details, or markdown lists..."></textarea>
|
||||
<div id="drawer-notes-preview" class="markdown-preview hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rating-control">
|
||||
<label for="slider-impact">🎯 Impact: <strong id="val-impact">3</strong>/5</label>
|
||||
<input type="range" id="slider-impact" min="1" max="5" step="1" value="3" />
|
||||
</div>
|
||||
<div class="rating-control">
|
||||
<label for="slider-ease">⚡ Ease / Feasibility: <strong id="val-ease">3</strong>/5</label>
|
||||
<input type="range" id="slider-ease" min="1" max="5" step="1" value="3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="field-group">
|
||||
<label>Tags</label>
|
||||
<div class="tags-editor">
|
||||
<div id="drawer-tags-list" class="tags-list"></div>
|
||||
<form id="drawer-add-tag-form" class="inline-add-form">
|
||||
<input type="text" id="drawer-new-tag-input" class="text-input input-sm" placeholder="Add #tag..." />
|
||||
<button type="submit" class="btn btn-ghost btn-sm">+ Add</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Markdown Notes -->
|
||||
<div class="field-group">
|
||||
<div class="field-header-row">
|
||||
<label for="drawer-notes-input">Specs, Brainstorm & Markdown Notes</label>
|
||||
<button type="button" id="btn-toggle-md-preview" class="btn btn-ghost btn-xs">👁️ Toggle Preview</button>
|
||||
</div>
|
||||
<textarea id="drawer-notes-input" rows="6" class="textarea-input" placeholder="Write specs, fabric/ink colors, architecture notes, or markdown lists..."></textarea>
|
||||
<div id="drawer-notes-preview" class="markdown-preview hidden"></div>
|
||||
</div>
|
||||
|
||||
<!-- Action Checklist -->
|
||||
@@ -473,17 +451,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reference Links -->
|
||||
<div class="field-group">
|
||||
<label>🔗 Reference Links & Inspiration</label>
|
||||
<div id="drawer-links-list" class="links-list"></div>
|
||||
<form id="drawer-add-link-form" class="inline-add-form">
|
||||
<input type="text" id="drawer-link-title" class="text-input input-sm" placeholder="Label (e.g. Blank Shirt Spec)" />
|
||||
<input type="url" id="drawer-link-url" class="text-input input-sm" placeholder="https://..." />
|
||||
<button type="submit" class="btn btn-ghost btn-sm">+ Add Link</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- External Attachments: Clipped Notes, Screenshots & Reference Images -->
|
||||
<div class="field-group">
|
||||
<div class="field-header-row">
|
||||
@@ -510,7 +477,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-row-2">
|
||||
<input type="text" id="drawer-attach-title" class="text-input input-sm" placeholder="Title / Caption (e.g. Vintage Ski Patch Ref)" />
|
||||
<input type="text" id="drawer-attach-title" class="text-input input-sm" placeholder="Title / Caption (e.g. Concept Sketch Ref)" />
|
||||
<input type="url" id="drawer-attach-url" class="text-input input-sm" placeholder="External Image URL or Source Link (https://...)" />
|
||||
</div>
|
||||
<textarea id="drawer-attach-text" rows="2" class="textarea-input" placeholder="Paste external note, quote, spec snippet, or commentary..."></textarea>
|
||||
@@ -533,6 +500,48 @@
|
||||
|
||||
<div id="drawer-attachments-list" class="attachments-grid"></div>
|
||||
</div>
|
||||
|
||||
<!-- Reference Links -->
|
||||
<div class="field-group">
|
||||
<label>🔗 Reference Links & Inspiration</label>
|
||||
<div id="drawer-links-list" class="links-list"></div>
|
||||
<form id="drawer-add-link-form" class="inline-add-form">
|
||||
<input type="text" id="drawer-link-title" class="text-input input-sm" placeholder="Label (e.g. Spec Doc)" />
|
||||
<input type="url" id="drawer-link-url" class="text-input input-sm" placeholder="https://..." />
|
||||
<button type="submit" class="btn btn-ghost btn-sm">+ Add Link</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Tags (Moved down the page) -->
|
||||
<div class="field-group">
|
||||
<label>Tags</label>
|
||||
<div class="tags-editor">
|
||||
<div id="drawer-tags-list" class="tags-list"></div>
|
||||
<form id="drawer-add-tag-form" class="inline-add-form">
|
||||
<input type="text" id="drawer-new-tag-input" class="text-input input-sm" placeholder="Add #tag..." />
|
||||
<button type="submit" class="btn btn-ghost btn-sm">+ Add</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prioritization Sliders (Moved down the page) -->
|
||||
<div class="field-group">
|
||||
<label>Prioritization Ratings</label>
|
||||
<div class="ratings-card">
|
||||
<div class="rating-control">
|
||||
<label for="slider-excitement">🔥 Excitement: <strong id="val-excitement">3</strong>/5</label>
|
||||
<input type="range" id="slider-excitement" min="1" max="5" step="1" value="3" />
|
||||
</div>
|
||||
<div class="rating-control">
|
||||
<label for="slider-impact">🎯 Impact: <strong id="val-impact">3</strong>/5</label>
|
||||
<input type="range" id="slider-impact" min="1" max="5" step="1" value="3" />
|
||||
</div>
|
||||
<div class="rating-control">
|
||||
<label for="slider-ease">⚡ Ease / Feasibility: <strong id="val-ease">3</strong>/5</label>
|
||||
<input type="range" id="slider-ease" min="1" max="5" step="1" value="3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: IMAGE MOCKUP STUDIO -->
|
||||
|
||||
Reference in new issue
Block a user