Files
sparkvault/public/index.html
T

695 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SparkVault — Idea Tracker, Creative Whack Pack & Nano Banana Mockup Studio</title>
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<!-- TOP HEADER & QUICK CAPTURE BAR -->
<header class="topbar">
<div class="topbar-brand">
<div class="brand-logo" aria-hidden="true">⚡</div>
<div>
<div class="brand-title-row">
<h1 class="brand-title">SparkVault</h1>
<span class="brand-badge">Whack Pack + 🍌 Nano Banana 2.1</span>
</div>
<p class="brand-subtitle">Capture sparks, break blocks with 64 Creative Whack cards, and mock up visuals</p>
</div>
</div>
<!-- Instant Quick Capture Command Bar -->
<form id="quick-capture-form" class="quick-capture-bar" autocomplete="off">
<span class="qc-icon" title="Quick Capture (Ctrl+K)">✨</span>
<input
id="quick-capture-input"
type="text"
placeholder="Quick capture an idea... e.g. Retro Ski Club Tee @creative #tshirt !high (Ctrl+K)"
aria-label="Quick capture idea"
/>
<select id="quick-capture-category" aria-label="Idea category">
<option value="spark">⚡ Spark</option>
<option value="creative">🎨 Creative / Merch</option>
<option value="project">🛠️ Project / App</option>
<option value="research">🔬 Research</option>
</select>
<button type="submit" class="btn btn-primary btn-sm">Capture</button>
<button
type="button"
id="btn-quick-whack-prompt"
class="btn btn-ghost btn-sm"
title="Draw a random Creative Whack Pack card to spark a new idea"
>
🃏 Whack Prompt
</button>
</form>
<div class="topbar-actions">
<button type="button" id="btn-open-settings" class="btn btn-ghost btn-sm" title="Configure Nano Banana 2.1 API Key & Model">
🍌 <span id="api-key-status-dot" class="status-dot"></span> Nano Banana
</button>
<div class="dropdown">
<button type="button" id="btn-export-menu" class="btn btn-ghost btn-sm">⬇️ Export</button>
<div id="export-dropdown-menu" class="dropdown-menu hidden">
<a href="/api/export?format=json" download="sparkvault-ideas.json" class="dropdown-item">📦 Export JSON Vault</a>
<a href="/api/export?format=markdown" download="sparkvault-ideas.md" class="dropdown-item">📝 Export Markdown Book</a>
</div>
</div>
<button type="button" id="btn-theme-toggle" class="btn btn-ghost btn-sm" title="Switch Dark / Warm Paper Theme">
☀️ Theme
</button>
</div>
</header>
<!-- OPTIONAL QUICK WHACK SPARK BANNER -->
<section id="quick-whack-banner" class="whack-prompt-banner hidden" aria-live="polite">
<div class="whack-banner-inner">
<img id="qwb-card-img" src="" alt="Whack Card" class="qwb-thumb" />
<div class="qwb-content">
<div class="qwb-meta">
<span id="qwb-suit-badge" class="suit-pill">Explorer</span>
<strong id="qwb-card-title">Card #1</strong>
</div>
<p id="qwb-card-question" class="qwb-question"></p>
</div>
<div class="qwb-actions">
<button type="button" id="btn-qwb-use" class="btn btn-primary btn-sm">✨ Create Idea from Card</button>
<button type="button" id="btn-qwb-redraw" class="btn btn-ghost btn-sm">🔄 Draw Another</button>
<button type="button" id="btn-qwb-close" class="btn btn-ghost btn-sm">✕</button>
</div>
</div>
</section>
<!-- NAVIGATION & STATS STRIP -->
<nav class="subnav">
<div class="view-tabs" role="tablist">
<button type="button" class="view-tab active" data-view="board" role="tab">
📋 Pipeline Board
</button>
<button type="button" class="view-tab" data-view="grid" role="tab">
🗂️ Explorer & Mockup Gallery
</button>
<button type="button" class="view-tab" data-view="whack" role="tab">
🃏 Creative Whack Pack <span class="tab-pill">64 Cards</span>
</button>
<button type="button" class="view-tab" data-view="review" role="tab">
⚔️ Review & Head-to-Head Arena
</button>
</div>
<div class="filter-bar" id="global-filter-bar">
<input
type="search"
id="filter-search"
class="filter-input"
placeholder="Search ideas, notes, #tags..."
/>
<select id="filter-category" class="filter-select" aria-label="Filter by category">
<option value="all">All Categories</option>
<option value="creative">🎨 Creative / Merch</option>
<option value="project">🛠️ Project / Product</option>
<option value="spark">⚡ Quick Spark</option>
<option value="research">🔬 Research</option>
</select>
<select id="filter-tag" class="filter-select" aria-label="Filter by tag">
<option value="all">All #Tags</option>
</select>
<label class="filter-checkbox">
<input type="checkbox" id="filter-has-mockup" />
<span>🍌 Has Mockup (<span id="stat-mockups-count">0</span>)</span>
</label>
<select id="filter-sort" class="filter-select" aria-label="Sort ideas">
<option value="score">Sort: Priority Score</option>
<option value="excitement">Sort: Excitement</option>
<option value="arena">Sort: Arena Wins</option>
<option value="updated">Sort: Recently Updated</option>
<option value="newest">Sort: Newest First</option>
</select>
</div>
</nav>
<!-- MAIN WORKSPACE -->
<main class="workspace">
<!-- VIEW 1: PIPELINE KANBAN BOARD -->
<section id="view-board" class="view-section active">
<div class="kanban-board" id="kanban-board">
<div class="kanban-column" data-status="spark">
<div class="kanban-col-header">
<div>
<span class="status-dot status-spark"></span>
<h2>✨ Spark</h2>
<span class="role-hint">🧭 Explorer 1–16</span>
</div>
<span class="col-count" id="count-spark">0</span>
</div>
<div class="kanban-dropzone" data-status="spark" id="col-spark"></div>
</div>
<div class="kanban-column" data-status="exploring">
<div class="kanban-col-header">
<div>
<span class="status-dot status-exploring"></span>
<h2>🔍 Exploring</h2>
<span class="role-hint">🎨 Artist & ⚖️ Judge</span>
</div>
<span class="col-count" id="count-exploring">0</span>
</div>
<div class="kanban-dropzone" data-status="exploring" id="col-exploring"></div>
</div>
<div class="kanban-column" data-status="building">
<div class="kanban-col-header">
<div>
<span class="status-dot status-building"></span>
<h2>🛠️ Building</h2>
<span class="role-hint">⚔️ Warrior 49–64</span>
</div>
<span class="col-count" id="count-building">0</span>
</div>
<div class="kanban-dropzone" data-status="building" id="col-building"></div>
</div>
<div class="kanban-column" data-status="shipped">
<div class="kanban-col-header">
<div>
<span class="status-dot status-shipped"></span>
<h2>🚀 Shipped</h2>
<span class="role-hint">Launched</span>
</div>
<span class="col-count" id="count-shipped">0</span>
</div>
<div class="kanban-dropzone" data-status="shipped" id="col-shipped"></div>
</div>
<div class="kanban-column" data-status="archived">
<div class="kanban-col-header">
<div>
<span class="status-dot status-archived"></span>
<h2>📦 Archived</h2>
<span class="role-hint">Parked Vault</span>
</div>
<span class="col-count" id="count-archived">0</span>
</div>
<div class="kanban-dropzone" data-status="archived" id="col-archived"></div>
</div>
</div>
</section>
<!-- VIEW 2: EXPLORER GRID & MOCKUP GALLERY -->
<section id="view-grid" class="view-section hidden">
<div class="grid-toolbar">
<div class="status-pills" id="grid-status-pills">
<button type="button" class="pill-btn active" data-status="all">All Stages</button>
<button type="button" class="pill-btn" data-status="spark">✨ Spark</button>
<button type="button" class="pill-btn" data-status="exploring">🔍 Exploring</button>
<button type="button" class="pill-btn" data-status="building">🛠️ Building</button>
<button type="button" class="pill-btn" data-status="shipped">🚀 Shipped</button>
<button type="button" class="pill-btn" data-status="archived">📦 Archived</button>
</div>
<button type="button" id="btn-new-idea-modal" class="btn btn-primary btn-sm">+ New Detailed Idea</button>
</div>
<div id="explorer-grid" class="explorer-grid"></div>
</section>
<!-- VIEW 3: CREATIVE WHACK PACK STUDIO (64 CARDS) -->
<section id="view-whack" class="view-section hidden">
<div class="whack-studio-header">
<div>
<h2>🃏 Creative Whack Pack Catalyst Studio</h2>
<p>64 lateral-thinking strategies by Roger von Oech across 4 creative roles: <strong>🧭 Explorer (1–16)</strong>, <strong>🎨 Artist (17–32)</strong>, <strong>⚖️ Judge (33–48)</strong>, and <strong>⚔️ Warrior (49–64)</strong>.</p>
</div>
<div class="whack-mode-tabs">
<button type="button" class="pill-btn active" data-whack-mode="collider">⚡ Idea Collider (Card + Idea)</button>
<button type="button" class="pill-btn" data-whack-mode="spread">🎴 4-Role Creative Spread</button>
<button type="button" class="pill-btn" data-whack-mode="browser">📚 Browse All 64 Cards</button>
</div>
</div>
<!-- SUB-MODE A: IDEA COLLIDER -->
<div id="whack-submode-collider" class="whack-submode">
<div class="collider-controls">
<div class="collider-control-group">
<label for="collider-suit-select">Filter Suit:</label>
<select id="collider-suit-select" class="filter-select">
<option value="">Stage-Matched / Any Suit</option>
<option value="explorer">🧭 Explorer (1–16: Gather & Discover)</option>
<option value="artist">🎨 Artist (17–32: Play & Transform)</option>
<option value="judge">⚖️ Judge (33–48: Evaluate & Test)</option>
<option value="warrior">⚔️ Warrior (49–64: Act & Ship)</option>
</select>
</div>
<div class="collider-control-group">
<label for="collider-idea-select">Target Idea:</label>
<select id="collider-idea-select" class="filter-select"></select>
</div>
<button type="button" id="btn-deal-collider" class="btn btn-primary">
🎲 Collide Card + Idea
</button>
<button type="button" id="btn-collider-random-both" class="btn btn-ghost">
🔀 Random Card & Random Spark
</button>
</div>
<div id="collider-stage" class="collider-stage"></div>
</div>
<!-- SUB-MODE B: 4-ROLE SPREAD -->
<div id="whack-submode-spread" class="whack-submode hidden">
<div class="spread-bar">
<p>Deal one card from each role (<strong>Explorer → Artist → Judge → Warrior</strong>) to walk an idea from raw spark to shipped execution.</p>
<button type="button" id="btn-deal-spread" class="btn btn-primary">🎴 Deal Fresh 4-Role Spread</button>
</div>
<div id="spread-grid" class="spread-grid"></div>
</div>
<!-- SUB-MODE C: 64-CARD DECK BROWSER -->
<div id="whack-submode-browser" class="whack-submode hidden">
<div class="deck-filter-bar">
<div class="suit-filter-buttons" id="deck-suit-filters">
<button type="button" class="pill-btn active" data-suit="all">All 64 Cards</button>
<button type="button" class="pill-btn suit-explorer-btn" data-suit="explorer">🧭 Explorer (1–16)</button>
<button type="button" class="pill-btn suit-artist-btn" data-suit="artist">🎨 Artist (17–32)</button>
<button type="button" class="pill-btn suit-judge-btn" data-suit="judge">⚖️ Judge (33–48)</button>
<button type="button" class="pill-btn suit-warrior-btn" data-suit="warrior">⚔️ Warrior (49–64)</button>
</div>
<input type="search" id="deck-search-input" class="filter-input" placeholder="Search 64 cards by title, number, or prompt..." />
</div>
<div id="deck-cards-grid" class="deck-cards-grid"></div>
</div>
</section>
<!-- VIEW 4: REVIEW & HEAD-TO-HEAD ARENA -->
<section id="view-review" class="view-section hidden">
<div class="review-header">
<div>
<h2>⚔️ Idea Resurfacing & Prioritization Studio</h2>
<p>Prevent the idea graveyard: pit ideas head-to-head to find what excites you most, or triage older sparks one card at a time.</p>
</div>
<div class="review-mode-tabs">
<button type="button" class="pill-btn active" data-review-mode="arena">⚔️ Head-to-Head Arena</button>
<button type="button" class="pill-btn" data-review-mode="triage">🃏 Stale Spark Triage Deck</button>
</div>
</div>
<div id="review-submode-arena" class="review-submode">
<div class="arena-instructions">
<span>Which idea excites you more to work on or prototype next?</span>
<button type="button" id="btn-skip-arena" class="btn btn-ghost btn-sm">🔀 Skip / Deal New Pair</button>
</div>
<div id="arena-stage" class="arena-stage"></div>
</div>
<div id="review-submode-triage" class="review-submode hidden">
<div id="triage-stage" class="triage-stage"></div>
</div>
</section>
</main>
<!-- SLIDE-OVER RICH IDEA WORKBENCH & NANO BANANA MOCKUP STUDIO -->
<div id="drawer-backdrop" class="drawer-backdrop hidden"></div>
<aside id="idea-drawer" class="idea-drawer hidden" aria-label="Idea Workbench">
<div class="drawer-header">
<div class="drawer-title-group">
<input type="text" id="drawer-title-input" class="drawer-title-input" placeholder="Idea Title" />
<div class="drawer-meta-row">
<select id="drawer-status-select" class="drawer-select">
<option value="spark">✨ Spark</option>
<option value="exploring">🔍 Exploring</option>
<option value="building">🛠️ Building</option>
<option value="shipped">🚀 Shipped</option>
<option value="archived">📦 Archived</option>
</select>
<select id="drawer-category-select" class="drawer-select">
<option value="creative">🎨 Creative / Merch</option>
<option value="project">🛠️ Project / Product</option>
<option value="spark">⚡ Quick Spark</option>
<option value="research">🔬 Research</option>
</select>
<button type="button" id="drawer-pin-btn" class="btn btn-ghost btn-sm" title="Pin Idea">📌 Pin</button>
<span id="drawer-score-badge" class="score-badge">Score: 75</span>
</div>
</div>
<div class="drawer-header-actions">
<button type="button" id="drawer-delete-btn" class="btn btn-danger-ghost btn-sm" title="Delete Idea">🗑️</button>
<button type="button" id="drawer-close-btn" class="btn btn-ghost btn-sm" title="Close (Esc)">✕ Close</button>
</div>
</div>
<!-- DRAWER SUB-TABS -->
<div class="drawer-tabs">
<button type="button" class="drawer-tab active" data-drawer-tab="details">
📝 Workbench & Notes
</button>
<button type="button" class="drawer-tab" data-drawer-tab="mockup">
🍌 Nano Banana Mockup Studio <span id="drawer-mockup-count" class="tab-pill">0</span>
</button>
<button type="button" class="drawer-tab" data-drawer-tab="whack">
🃏 Whack This Idea <span id="drawer-whack-count" class="tab-pill">0</span>
</button>
</div>
<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>
<!-- 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" />
</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 -->
<div class="field-group">
<div class="field-header-row">
<label>Action Checklist</label>
<span id="drawer-checklist-progress" class="muted-label">0/0 completed</span>
</div>
<div id="drawer-checklist-items" class="checklist-container"></div>
<form id="drawer-add-checklist-form" class="inline-add-form">
<input type="text" id="drawer-new-checklist-input" class="text-input input-sm" placeholder="Add next concrete step..." />
<button type="submit" class="btn btn-secondary btn-sm">+ Add Step</button>
</form>
</div>
<!-- Pros & Cons Matrix -->
<div class="pros-cons-grid">
<div class="field-group">
<label>✅ Pros / Why It Works</label>
<ul id="drawer-pros-list" class="bullet-list pros-list"></ul>
<form id="drawer-add-pro-form" class="inline-add-form">
<input type="text" id="drawer-new-pro-input" class="text-input input-sm" placeholder="Add a pro..." />
<button type="submit" class="btn btn-ghost btn-sm">+</button>
</form>
</div>
<div class="field-group">
<label>⚠️ Cons / Risks & Constraints</label>
<ul id="drawer-cons-list" class="bullet-list cons-list"></ul>
<form id="drawer-add-con-form" class="inline-add-form">
<input type="text" id="drawer-new-con-input" class="text-input input-sm" placeholder="Add a risk or constraint..." />
<button type="submit" class="btn btn-ghost btn-sm">+</button>
</form>
</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>
</div>
<!-- TAB 2: NANO BANANA 2.1 VISUAL MOCKUP STUDIO -->
<div id="drawer-tab-mockup" class="drawer-tab-panel hidden">
<div class="mockup-studio-layout">
<!-- Left: Generator & Interactive T-Shirt / Product Compositor -->
<div class="mockup-controls-pane">
<div class="studio-card">
<div class="studio-card-header">
<h3>🍌 Nano Banana 2.1 AI Mockup Generator</h3>
<button type="button" id="btn-studio-auto-prompt" class="btn btn-ghost btn-xs">✨ Auto-Prompt from Idea</button>
</div>
<div class="form-row-2">
<div>
<label for="nb-template-select">Product / Surface Preset</label>
<select id="nb-template-select" class="filter-select full-width">
<option value="tshirt-front">👕 T-Shirt (Full-Front Graphic)</option>
<option value="tshirt-left-chest">👕 T-Shirt (5-in Left-Chest Emblem)</option>
<option value="isolated-graphic">🎨 Isolated Screenprint Vector Artwork</option>
<option value="sticker">🏷️ Die-Cut Vinyl Sticker / Patch</option>
<option value="poster">🖼️ Framed Art Poster</option>
<option value="app-ui">💻 Product / App Interface</option>
</select>
</div>
<div>
<label for="nb-whack-twist-select">Optional Whack Pack Twist</label>
<select id="nb-whack-twist-select" class="filter-select full-width">
<option value="">None (Direct Concept)</option>
</select>
</div>
</div>
<!-- Garment / Surface Color Swatches -->
<div class="field-group">
<label>Garment / Surface Color: <strong id="nb-selected-color-label">Vintage Cream (#F5E8D3)</strong></label>
<div class="color-swatch-row" id="nb-color-swatches">
<button type="button" class="color-swatch active" data-color="#F5E8D3" data-name="Vintage Cream" style="background:#F5E8D3" title="Vintage Cream (#F5E8D3)"></button>
<button type="button" class="color-swatch" data-color="#1C1B1A" data-name="Vintage Black" style="background:#1C1B1A" title="Vintage Black (#1C1B1A)"></button>
<button type="button" class="color-swatch" data-color="#1B2A4A" data-name="Midnight Navy" style="background:#1B2A4A" title="Midnight Navy (#1B2A4A)"></button>
<button type="button" class="color-swatch" data-color="#1E3F2B" data-name="Forest Pine" style="background:#1E3F2B" title="Forest Pine (#1E3F2B)"></button>
<button type="button" class="color-swatch" data-color="#A8422B" data-name="Terracotta Rust" style="background:#A8422B" title="Terracotta Rust (#A8422B)"></button>
<button type="button" class="color-swatch" data-color="#C8C9CC" data-name="Heather Grey" style="background:#C8C9CC" title="Heather Grey (#C8C9CC)"></button>
<button type="button" class="color-swatch" data-color="#FFFFFF" data-name="Crisp White" style="background:#FFFFFF" title="Crisp White (#FFFFFF)"></button>
</div>
</div>
<div class="field-group">
<label for="nb-prompt-input">Visual Description / Artwork Prompt</label>
<textarea id="nb-prompt-input" rows="3" class="textarea-input" placeholder="Describe the graphic, emblem, ink colors, typography, or mockup scene..."></textarea>
</div>
<!-- Iterative Image-to-Image Edit Banner (Active when a mockup is selected for refinement) -->
<div id="nb-edit-mode-box" class="nb-edit-box hidden">
<div class="nb-edit-header">
<span>🍌 <strong>Iterative Edit Mode:</strong> Refining <em id="nb-edit-target-label">Selected Mockup</em></span>
<button type="button" id="btn-nb-clear-edit" class="btn btn-ghost btn-xs">Cancel Edit Mode</button>
</div>
<input
type="text"
id="nb-edit-instruction-input"
class="text-input"
placeholder="Tell Nano Banana what to change (e.g. 'Move graphic to left-chest pocket on a forest green shirt')"
/>
</div>
<div class="studio-action-row">
<button type="button" id="btn-generate-nano-banana" class="btn btn-primary">
🍌 Generate with Nano Banana 2.1
</button>
<span id="nb-generation-status" class="muted-label"></span>
</div>
</div>
<!-- Interactive T-Shirt & Product Canvas Compositor -->
<div class="studio-card">
<div class="studio-card-header">
<h3>👕 Interactive T-Shirt & Emblem Compositor</h3>
<span class="muted-label">Instant apparel layout & print proof</span>
</div>
<div class="form-row-3">
<div>
<label for="comp-surface-select">Mockup Surface</label>
<select id="comp-surface-select" class="filter-select full-width">
<option value="tshirt">👕 Crewneck T-Shirt</option>
<option value="sticker">🏷️ Die-Cut Sticker / Badge</option>
<option value="poster">🖼️ Framed Print</option>
</select>
</div>
<div>
<label for="comp-placement-select">Print Placement</label>
<select id="comp-placement-select" class="filter-select full-width">
<option value="center-chest">Full Center Chest</option>
<option value="left-chest">5-inch Left-Chest Pocket</option>
<option value="oversized">Oversized Vintage Front</option>
</select>
</div>
<div>
<label for="comp-emblem-select">Vector Emblem</label>
<select id="comp-emblem-select" class="filter-select full-width">
<option value="mountains">🏔️ Mountain & Sun</option>
<option value="espresso">☕ Espresso Cup</option>
<option value="lightbulb">💡 Lightbulb Boxer</option>
<option value="compass">🧭 Explorer Compass</option>
<option value="lightning">⚡ Spark Bolt</option>
<option value="none">No Icon (Text/Image Only)</option>
</select>
</div>
</div>
<div class="form-row-2">
<div>
<label for="comp-top-text">Top Headline / Club Name</label>
<input type="text" id="comp-top-text" class="text-input input-sm" placeholder="HIGH ALTITUDE CLUB" />
</div>
<div>
<label for="comp-bottom-text">Bottom Tagline / Est.</label>
<input type="text" id="comp-bottom-text" class="text-input input-sm" placeholder="EST. 1984 • COLORADO" />
</div>
</div>
<div class="form-row-2">
<div>
<label for="comp-ink-color">Primary Screenprint Ink</label>
<input type="color" id="comp-ink-color" value="#BC4921" class="color-picker-input" />
</div>
<div>
<label for="comp-upload-art">Overlay Custom PNG/JPG Graphic</label>
<input type="file" id="comp-upload-art" accept="image/*" class="file-input" />
</div>
</div>
<div class="canvas-preview-wrapper">
<canvas id="mockup-compositor-canvas" width="680" height="680"></canvas>
</div>
<div class="studio-action-row">
<button type="button" id="btn-save-canvas-mockup" class="btn btn-secondary">
📸 Save Canvas Mockup to Idea
</button>
<button type="button" id="btn-download-canvas-png" class="btn btn-ghost btn-sm">
⬇️ Download PNG
</button>
<button type="button" id="btn-clear-uploaded-art" class="btn btn-ghost btn-sm">
Clear Overlay Image
</button>
</div>
</div>
</div>
<!-- Right: Saved Mockup Gallery for this Idea -->
<div class="mockup-gallery-pane">
<div class="studio-card">
<div class="studio-card-header">
<h3>🖼️ Idea Mockup Gallery</h3>
<span class="muted-label">Click 'Refine with 🍌' to iterate on any mockup</span>
</div>
<div id="drawer-mockup-gallery" class="drawer-mockup-gallery"></div>
</div>
</div>
</div>
</div>
<!-- TAB 3: WHACK THIS IDEA -->
<div id="drawer-tab-whack" class="drawer-tab-panel hidden">
<div class="drawer-whack-controls">
<div>
<h3>🃏 Give This Idea a Creative Whack</h3>
<p class="muted-label">Draw a stage-matched card from your 64-card deck to challenge assumptions or spark a new visual direction.</p>
</div>
<div class="drawer-whack-actions">
<select id="drawer-whack-suit-select" class="filter-select">
<option value="">Stage-Matched Suit (Recommended)</option>
<option value="explorer">🧭 Explorer (1–16)</option>
<option value="artist">🎨 Artist (17–32)</option>
<option value="judge">⚖️ Judge (33–48)</option>
<option value="warrior">⚔️ Warrior (49–64)</option>
</select>
<button type="button" id="btn-drawer-draw-whack" class="btn btn-primary btn-sm">
🃏 Draw Whack Card
</button>
</div>
</div>
<div id="drawer-active-whack-stage" class="drawer-whack-stage"></div>
<div class="field-group">
<h4>📜 Whack Breakthrough Log for This Idea</h4>
<div id="drawer-whack-history-list" class="whack-history-list"></div>
</div>
</div>
</div>
</aside>
<!-- MODAL: NANO BANANA 2.1 SETTINGS -->
<div id="settings-modal" class="modal-backdrop hidden">
<div class="modal-card">
<div class="modal-header">
<h3>🍌 Nano Banana 2.1 (Gemini Image API) Settings</h3>
<button type="button" id="btn-close-settings" class="btn btn-ghost btn-sm">✕</button>
</div>
<form id="settings-form" class="modal-body">
<p class="muted-label">
SparkVault uses Google's <strong>Nano Banana 2.1 (`gemini-nano-banana-2.1`)</strong> via the official `@google/genai` Interactions API for text-to-image product mockups and multi-turn conversational image editing.
</p>
<div class="field-group">
<label for="settings-api-key">Gemini API Key (`GEMINI_API_KEY`)</label>
<input
type="password"
id="settings-api-key"
class="text-input"
placeholder="Paste your AI Studio / Gemini API key (AIza...)"
autocomplete="off"
/>
<small id="settings-key-status" class="muted-label"></small>
</div>
<div class="field-group">
<label for="settings-model-select">Nano Banana Model</label>
<select id="settings-model-select" class="filter-select full-width">
<option value="gemini-nano-banana-2.1">gemini-nano-banana-2.1 — Nano Banana 2.1 (Default High-Efficiency)</option>
<option value="gemini-3-pro-image">gemini-3-pro-image — Nano Banana Pro (High-Detail Studio)</option>
<option value="gemini-3.1-flash-lite-image">gemini-3.1-flash-lite-image — Nano Banana 2 Lite (Ultra-Fast)</option>
</select>
</div>
<div class="modal-footer">
<button type="button" id="btn-cancel-settings" class="btn btn-ghost">Cancel</button>
<button type="submit" class="btn btn-primary">Save Settings</button>
</div>
</form>
</div>
</div>
<!-- MODAL: CARD / MOCKUP LIGHTBOX INSPECTOR -->
<div id="lightbox-modal" class="modal-backdrop hidden">
<div class="lightbox-card">
<div class="modal-header">
<h3 id="lightbox-title">Card Preview</h3>
<button type="button" id="btn-close-lightbox" class="btn btn-ghost btn-sm">✕</button>
</div>
<div class="lightbox-body">
<img id="lightbox-img" src="" alt="Preview" />
<div id="lightbox-meta" class="lightbox-meta"></div>
</div>
</div>
</div>
<div id="toast-container" class="toast-container" aria-live="polite"></div>
<script type="module" src="/app.js"></script>
</body>
</html>