style(ui): de-emphasize Whack Pack branding in header, pipeline columns, and spark cards

This commit is contained in:
airent106 committed 2026-10-29 12:02:23 -06:00
1 parent 2b756ab127
commit 3368d7201c
3 files changed
+28 -28

No files matched your search

+4 -6
View File
@@ -268,14 +268,12 @@ function renderIdeaCardHtml(idea) {
<div>
<span title="Excitement">🔥${idea.rating_excitement}</span>
${checklistTotal > 0 ? `<span> • ☑️ ${checklistDone}/${checklistTotal}</span>` : ""}
${whackCount > 0 ? `<span title="Whack Pack reflections"> • 🃏${whackCount}</span>` : ""}
${idea.mockups.length > 0 ? `<span title="Visual Mockups"> • 🍌${idea.mockups.length}</span>` : ""}
${idea.mockups.length > 0 ? `<span title="Visual Mockups"> • 🎨${idea.mockups.length}</span>` : ""}
${(idea.attachments || []).length > 0 ? `<span title="External Attachments"> • 📎${idea.attachments.length}</span>` : ""}
</div>
<div class="card-quick-actions">
<button type="button" class="icon-btn btn-card-clip" data-idea-id="${idea.id}" title="Attach External Note or Image">📎</button>
<button type="button" class="icon-btn btn-card-mockup" data-idea-id="${idea.id}" title="Open in Nano Banana Mockup Studio">🍌</button>
<button type="button" class="icon-btn btn-card-whack" data-idea-id="${idea.id}" title="Draw a Whack Card for this Idea">🃏</button>
<button type="button" class="icon-btn btn-card-mockup" data-idea-id="${idea.id}" title="Open in Mockup Studio">🎨</button>
${
idea.status !== "shipped"
? `<button type="button" class="icon-btn btn-card-advance" data-idea-id="${idea.id}" data-next="${nextStage}" title="Advance to ${nextStage}">→</button>`
@@ -2170,7 +2168,7 @@ function bindGlobalEvents() {
const origText = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = "🎲 Generating...";
showToast("🎲 Drawing a Whack Pack card & inventing an idea from your background...");
showToast("🎲 Inventing a fresh idea tailored to your background...");
try {
const catSel = document.getElementById("quick-capture-category")?.value || "any";
@@ -2181,7 +2179,7 @@ function bindGlobalEvents() {
})
});
await Promise.all([loadIdeas(), loadWhackCatalog()]);
showToast(`✨ Created "${res.idea.title}" (via Card #${res.card.number} • ${res.generatorUsed})!`);
showToast(`✨ Created "${res.idea.title}"!`);
openIdeaDrawer(res.idea.id, "details");
} catch (err) {
showToast(`⚠️ ${err.message}`);
+14 -22
View File
@@ -3,7 +3,7 @@
<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>
<title>SparkVault — Idea Tracker & Visual Mockup Studio</title>
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="stylesheet" href="/styles.css" />
</head>
@@ -15,9 +15,9 @@
<div>
<div class="brand-title-row">
<h1 class="brand-title">SparkVault</h1>
<span class="brand-badge">Whack Pack + 🍌 Nano Banana 2.1</span>
<span class="brand-badge">Idea Studio</span>
</div>
<p class="brand-subtitle">Capture sparks, break blocks with 64 Creative Whack cards, and mock up visuals</p>
<p class="brand-subtitle">Capture sparks, attach inspirations, and generate product & apparel mockups</p>
</div>
</div>
@@ -41,7 +41,7 @@
type="button"
id="btn-generate-random-idea"
class="btn btn-secondary btn-sm"
title="Generate a personalized random idea tailored to your background & a Whack Pack card"
title="Generate a personalized random idea tailored to your background"
>
🎲 Random Idea
</button>
@@ -53,19 +53,11 @@
>
📎 Clip / Attach
</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 type="button" id="btn-open-settings" class="btn btn-ghost btn-sm" title="Configure AI Generator & Personal Background">
⚙️ <span id="api-key-status-dot" class="status-dot"></span> AI Settings
</button>
<div class="dropdown">
<button type="button" id="btn-export-menu" class="btn btn-ghost btn-sm">⬇️ Export</button>
@@ -109,12 +101,12 @@
<button type="button" class="view-tab" data-view="grid" role="tab">
🗂️ Explorer
</button>
<button type="button" class="view-tab" data-view="whack" role="tab">
🃏 Whack Pack <span class="tab-pill">64</span>
</button>
<button type="button" class="view-tab" data-view="review" role="tab">
⚔️ Arena & Triage
</button>
<button type="button" class="view-tab view-tab-subtle" data-view="whack" role="tab" title="Creative Prompts & Whack Pack Deck">
💡 Prompts
</button>
</div>
<button type="button" id="btn-mobile-filter-toggle" class="btn btn-ghost btn-sm mobile-only">
🔍 Filters
@@ -183,7 +175,7 @@
<div>
<span class="status-dot status-spark"></span>
<h2>✨ Spark</h2>
<span class="role-hint">🧭 Explorer 1–16</span>
<span class="role-hint">Raw Ideas</span>
</div>
<span class="col-count" id="count-spark">0</span>
</div>
@@ -195,7 +187,7 @@
<div>
<span class="status-dot status-exploring"></span>
<h2>🔍 Exploring</h2>
<span class="role-hint">🎨 Artist & ⚖️ Judge</span>
<span class="role-hint">Research & Mockups</span>
</div>
<span class="col-count" id="count-exploring">0</span>
</div>
@@ -207,7 +199,7 @@
<div>
<span class="status-dot status-building"></span>
<h2>🛠️ Building</h2>
<span class="role-hint">⚔️ Warrior 49–64</span>
<span class="role-hint">In Progress</span>
</div>
<span class="col-count" id="count-building">0</span>
</div>
@@ -386,10 +378,10 @@
📝 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>
🎨 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>
💡 Brainstorm Prompts <span id="drawer-whack-count" class="tab-pill">0</span>
</button>
</div>
+10
View File
@@ -273,6 +273,16 @@ body {
border-color: var(--border-strong);
}
.view-tab-subtle {
opacity: 0.72;
font-size: 0.8rem;
}
.view-tab-subtle:hover,
.view-tab-subtle.active {
opacity: 1;
}
.tab-pill {
font-size: 0.7rem;
padding: 0.08rem 0.4rem;