update
This commit is contained in:
135
.superpowers/brainstorm/73376-1779100666/content/approaches.html
Normal file
135
.superpowers/brainstorm/73376-1779100666/content/approaches.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<h2>3 Concrete Approaches</h2>
|
||||
<p class="subtitle">All share: Dracula bg (#282a36), dot matrix texture, rounded soft cards. They differ in accent color strategy.</p>
|
||||
|
||||
<style>
|
||||
/* Shared base */
|
||||
.mockup-wrap {
|
||||
font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;
|
||||
background: #282a36;
|
||||
background-image: radial-gradient(circle, rgba(98,114,164,0.55) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
border-radius: 10px;
|
||||
padding: 18px 16px 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.mockup-title {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.mockup-cards {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
.mc {
|
||||
width: 120px;
|
||||
padding: 10px 11px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.mc h5 { margin: 0 0 4px; font-size: 11px; }
|
||||
.mc p { margin: 0; font-size: 10px; opacity: 0.6; line-height: 1.4; }
|
||||
|
||||
/* ── Approach A: Purple Focus ── */
|
||||
.a-title {
|
||||
background: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.a-title::after { content: " ▌"; -webkit-text-fill-color: #bd93f9; animation: blink 1s step-end infinite; }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
.a-card {
|
||||
background: #313244;
|
||||
border: 1px solid #44475a;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.a-card h5 { color: #bd93f9; }
|
||||
|
||||
/* ── Approach B: Cyan Dev ── */
|
||||
.b-title { color: #8be9fd; text-shadow: 0 0 12px rgba(139,233,253,0.5); }
|
||||
.b-title::after { content: " ▌"; animation: blink 1s step-end infinite; }
|
||||
.b-card {
|
||||
background: #313244;
|
||||
border: 1px solid #44475a;
|
||||
border-left: 2px solid #8be9fd;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.b-card h5 { color: #8be9fd; }
|
||||
|
||||
/* ── Approach C: Multi-accent ── */
|
||||
.c-title {
|
||||
background: linear-gradient(90deg, #ff79c6 0%, #bd93f9 33%, #8be9fd 66%, #50fa7b 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.c-card {
|
||||
background: #313244;
|
||||
border: 1px solid #44475a;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.c-card-1 { border-top: 2px solid #ff79c6; }
|
||||
.c-card-1 h5 { color: #ff79c6; }
|
||||
.c-card-2 { border-top: 2px solid #bd93f9; }
|
||||
.c-card-2 h5 { color: #bd93f9; }
|
||||
.c-card-3 { border-top: 2px solid #8be9fd; }
|
||||
.c-card-3 h5 { color: #8be9fd; }
|
||||
</style>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="purple" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Purple Focus <span style="font-size:11px;opacity:0.6;font-weight:normal">(recommended)</span></h3>
|
||||
<p>#bd93f9 mauve as the single accent. Gradient title (purple→pink). Clean card hover with purple glow. Cohesive and refined.</p>
|
||||
<div class="mockup-wrap">
|
||||
<div class="mockup-title a-title">IoT Learning</div>
|
||||
<div class="mockup-cards">
|
||||
<div class="mc a-card"><h5>OJ Platform</h5><p>Online judge</p></div>
|
||||
<div class="mc a-card"><h5>Code Runner</h5><p>Run snippets</p></div>
|
||||
<div class="mc a-card"><h5>Textbooks</h5><p>Reference books</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="cyan" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Cyan Dev</h3>
|
||||
<p>#8be9fd cyan as accent. Glowing title, left-border accent on cards. Closer to the old terminal vibe — just upgraded. More "code editor", less "app".</p>
|
||||
<div class="mockup-wrap">
|
||||
<div class="mockup-title b-title">IoT Learning</div>
|
||||
<div class="mockup-cards">
|
||||
<div class="mc b-card"><h5>OJ Platform</h5><p>Online judge</p></div>
|
||||
<div class="mc b-card"><h5>Code Runner</h5><p>Run snippets</p></div>
|
||||
<div class="mc b-card"><h5>Textbooks</h5><p>Reference books</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="multi" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Multi-Accent Rainbow</h3>
|
||||
<p>Each card gets a different Dracula color top border (pink, purple, cyan…). Title uses all colors. Most colorful — looks like syntax highlighting applied to the UI.</p>
|
||||
<div class="mockup-wrap">
|
||||
<div class="mockup-title c-title">IoT Learning</div>
|
||||
<div class="mockup-cards">
|
||||
<div class="mc c-card c-card-1"><h5>OJ Platform</h5><p>Online judge</p></div>
|
||||
<div class="mc c-card c-card-2"><h5>Code Runner</h5><p>Run snippets</p></div>
|
||||
<div class="mc c-card c-card-3"><h5>Textbooks</h5><p>Reference books</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,98 @@
|
||||
<h2>Background Treatment</h2>
|
||||
<p class="subtitle">The background sets the whole mood. All options use Dracula's base color (#282a36) as the foundation.</p>
|
||||
|
||||
<style>
|
||||
.bg-preview {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
border-radius: 8px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bg-label {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
color: rgba(248,248,242,0.5);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
/* A: flat clean */
|
||||
.bg-flat {
|
||||
background: #282a36;
|
||||
}
|
||||
|
||||
/* B: radial aurora glow */
|
||||
.bg-aurora {
|
||||
background: #282a36;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 20% 30%, rgba(189,147,249,0.18) 0%, transparent 55%),
|
||||
radial-gradient(ellipse at 80% 70%, rgba(255,121,198,0.12) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 55% 90%, rgba(139,233,253,0.08) 0%, transparent 45%);
|
||||
}
|
||||
|
||||
/* C: subtle grid */
|
||||
.bg-grid {
|
||||
background: #282a36;
|
||||
background-image:
|
||||
linear-gradient(rgba(68,71,90,0.4) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(68,71,90,0.4) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
/* D: dot matrix */
|
||||
.bg-dots {
|
||||
background: #282a36;
|
||||
background-image: radial-gradient(circle, rgba(98,114,164,0.5) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="flat" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Flat & Clean</h3>
|
||||
<p>Pure #282a36, no texture. Maximum focus on content. Closest to how most Dracula apps look.</p>
|
||||
<div class="bg-preview bg-flat">
|
||||
<span class="bg-label">#282a36 — pure</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="aurora" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Aurora Glow</h3>
|
||||
<p>Subtle radial gradients using Dracula's purple, pink, and cyan — like a soft aurora bleeding through the dark. Gives depth without noise.</p>
|
||||
<div class="bg-preview bg-aurora">
|
||||
<span class="bg-label">radial glows — purple / pink / cyan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="grid" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Subtle Grid</h3>
|
||||
<p>Faint 24px grid overlay on the dark background. Keeps a technical/terminal feel while the cards are soft. Nod to graph paper or circuit boards.</p>
|
||||
<div class="bg-preview bg-grid">
|
||||
<span class="bg-label">24px grid — #44475a lines</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="dots" onclick="toggleSelect(this)">
|
||||
<div class="letter">D</div>
|
||||
<div class="content">
|
||||
<h3>Dot Matrix</h3>
|
||||
<p>Subtle dot pattern — evokes old terminal screens and LED matrices. Quiet texture, doesn't compete with content.</p>
|
||||
<div class="bg-preview bg-dots">
|
||||
<span class="bg-label">20px dot grid — comment color dots</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
<h2>Terminal Theme — Redesign Direction</h2>
|
||||
<p class="subtitle">The current theme is functional but sparse: green-on-black, square borders, blinking cursor. Which direction feels right?</p>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="crt" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>CRT Phosphor Glow</h3>
|
||||
<p>Keep the green palette but push the retro CRT aesthetic much further — stronger scanlines, phosphor bloom on text, vignette darkening at corners, subtle screen curvature illusion. Very nostalgic, visually rich.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="bios" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Retro BIOS / DOS Amber</h3>
|
||||
<p>Shift the palette from green to amber/orange (#ffb000) — the classic monochrome phosphor of early PCs. Or go full IBM-BIOS blue (dark blue bg, bright white text, cyan highlights). A completely different retro personality.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="modern" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Modern Terminal (Dracula / Catppuccin)</h3>
|
||||
<p>Inspired by popular terminal themes (Dracula, Catppuccin Mocha, One Dark). Multiple accent colors, not just green — purple, cyan, pink, yellow all used. Clean, developer-aesthetic, but rich with color. Less "retro", more "everyday dev tool".</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="matrix" onclick="toggleSelect(this)">
|
||||
<div class="letter">D</div>
|
||||
<div class="content">
|
||||
<h3>Matrix / Hacker Aesthetic</h3>
|
||||
<p>Stay green but add drama — cascading character rain animation in the background (subtle, faint), stronger glow effects, maybe ASCII art borders on cards. Very cinematic, very "movie hacker screen".</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Terminal Theme — Full Mockup</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;
|
||||
background: #282a36;
|
||||
background-image: radial-gradient(circle, rgba(98,114,164,0.55) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
min-height: 100vh;
|
||||
color: #f8f8f2;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
.controls {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
}
|
||||
.ctrl-btn {
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
background: rgba(40,42,54,0.92);
|
||||
border: 1px solid #44475a;
|
||||
border-radius: 8px;
|
||||
color: #f8f8f2;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.2s;
|
||||
min-width: 118px;
|
||||
justify-content: center;
|
||||
}
|
||||
.ctrl-btn:hover {
|
||||
border-color: #bd93f9;
|
||||
color: #bd93f9;
|
||||
background: rgba(189,147,249,0.08);
|
||||
}
|
||||
.ctrl-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
min-width: unset;
|
||||
justify-content: center;
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ctrl-icon:hover { border-color: #44475a; color: #f8f8f2; background: rgba(40,42,54,0.92); }
|
||||
.chevron { opacity: 0.6; font-size: 10px; }
|
||||
|
||||
/* Main */
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 5rem 2rem 2rem;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
background: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.title-cursor {
|
||||
-webkit-text-fill-color: #bd93f9;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
/* Description */
|
||||
.description {
|
||||
color: #6272a4;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
width: 260px;
|
||||
padding: 1.5rem;
|
||||
background: #313244;
|
||||
border: 1px solid #44475a;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.45);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: #bd93f9;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(189,147,249,0.25),
|
||||
0 8px 28px rgba(189,147,249,0.15),
|
||||
0 4px 12px rgba(0,0,0,0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card.pin { background: #383a4a; }
|
||||
.card h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #f8f8f2;
|
||||
margin-bottom: 0.5rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.card:hover h2 { color: #bd93f9; }
|
||||
.card p {
|
||||
font-size: 0.85rem;
|
||||
color: #6272a4;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.card:hover p { color: #cdd6f4; }
|
||||
|
||||
/* Beian */
|
||||
.beian {
|
||||
margin: 2rem 0 1.5rem;
|
||||
color: #6272a4;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
.beian a { color: #6272a4; text-decoration: none; transition: color 0.2s; }
|
||||
.beian a:hover { color: #bd93f9; }
|
||||
|
||||
/* Annotation layer */
|
||||
.annotation {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(30,32,43,0.97);
|
||||
border-top: 1px solid #44475a;
|
||||
padding: 14px 24px;
|
||||
font-size: 12px;
|
||||
color: #6272a4;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
font-family: ui-monospace, monospace;
|
||||
z-index: 200;
|
||||
}
|
||||
.ann-item { display: flex; align-items: center; gap: 8px; }
|
||||
.swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="controls">
|
||||
<button class="ctrl-btn">Terminal <span class="chevron">▾</span></button>
|
||||
<button class="ctrl-btn ctrl-icon">☽</button>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<h1 class="title">IoT Learning<span class="title-cursor"> ▌</span></h1>
|
||||
<p class="description">// your gateway to embedded systems & IoT resources</p>
|
||||
|
||||
<div class="grid">
|
||||
<a class="card pin" href="#">
|
||||
<h2>OJ Platform</h2>
|
||||
<p>Online judge — submit and test your code against real problems</p>
|
||||
</a>
|
||||
<a class="card" href="#">
|
||||
<h2>Code Runner</h2>
|
||||
<p>Instant code execution in-browser for quick experiments</p>
|
||||
</a>
|
||||
<a class="card" href="#">
|
||||
<h2>Reference Books</h2>
|
||||
<p>Curated textbooks and documentation for IoT & embedded dev</p>
|
||||
</a>
|
||||
<a class="card" href="#">
|
||||
<h2>Video Lectures</h2>
|
||||
<p>Course recordings and tutorials from the lab</p>
|
||||
</a>
|
||||
<a class="card" href="#">
|
||||
<h2>Arduino Docs</h2>
|
||||
<p>Official Arduino reference and community guides</p>
|
||||
</a>
|
||||
<a class="card" href="#">
|
||||
<h2>Forum</h2>
|
||||
<p>Ask questions, share projects with classmates</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="beian">
|
||||
<a href="#">备案号 12345678</a> · <a href="#">粤ICP备XXXXXXXX号</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color annotations at bottom -->
|
||||
<div class="annotation">
|
||||
<div class="ann-item"><span class="swatch" style="background:#282a36;border:1px solid #44475a"></span> bg #282a36</div>
|
||||
<div class="ann-item"><span class="swatch" style="background:#313244"></span> card #313244</div>
|
||||
<div class="ann-item"><span class="swatch" style="background:#44475a"></span> border #44475a</div>
|
||||
<div class="ann-item"><span class="swatch" style="background:#bd93f9"></span> accent #bd93f9</div>
|
||||
<div class="ann-item"><span class="swatch" style="background:#ff79c6"></span> pink #ff79c6</div>
|
||||
<div class="ann-item"><span class="swatch" style="background:#6272a4"></span> muted #6272a4</div>
|
||||
<div class="ann-item"><span class="swatch" style="background:#f8f8f2"></span> fg #f8f8f2</div>
|
||||
<div class="ann-item" style="margin-left:auto">hover a card to preview interaction →</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<h2>Which Palette?</h2>
|
||||
<p class="subtitle">Modern terminal themes each have a distinct personality. Which palette should drive the redesign?</p>
|
||||
|
||||
<style>
|
||||
.swatch-row { display: flex; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
|
||||
.swatch { width: 28px; height: 28px; border-radius: 4px; display: inline-block; }
|
||||
.palette-preview {
|
||||
font-family: ui-monospace, 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="dracula" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Dracula</h3>
|
||||
<p>Dark purple background, vibrant pink/cyan/green accents. The most iconic dark theme — moody yet colorful.</p>
|
||||
<div class="swatch-row">
|
||||
<span class="swatch" style="background:#282a36" title="Background"></span>
|
||||
<span class="swatch" style="background:#44475a" title="Current Line"></span>
|
||||
<span class="swatch" style="background:#ff79c6" title="Pink"></span>
|
||||
<span class="swatch" style="background:#8be9fd" title="Cyan"></span>
|
||||
<span class="swatch" style="background:#50fa7b" title="Green"></span>
|
||||
<span class="swatch" style="background:#bd93f9" title="Purple"></span>
|
||||
<span class="swatch" style="background:#ffb86c" title="Orange"></span>
|
||||
<span class="swatch" style="background:#f1fa8c" title="Yellow"></span>
|
||||
</div>
|
||||
<div class="palette-preview" style="background:#282a36;color:#f8f8f2">
|
||||
<span style="color:#ff79c6">fn</span> <span style="color:#50fa7b">visit</span>(<span style="color:#8be9fd">url</span>: <span style="color:#bd93f9">str</span>) {<br>
|
||||
<span style="color:#ffb86c">// navigate to resource</span><br>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="catppuccin" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Catppuccin Mocha</h3>
|
||||
<p>Warm, desaturated dark background with soft pastel accents. Gentle on the eyes, cozy and modern.</p>
|
||||
<div class="swatch-row">
|
||||
<span class="swatch" style="background:#1e1e2e" title="Base"></span>
|
||||
<span class="swatch" style="background:#313244" title="Surface0"></span>
|
||||
<span class="swatch" style="background:#f38ba8" title="Red"></span>
|
||||
<span class="swatch" style="background:#89dceb" title="Sky"></span>
|
||||
<span class="swatch" style="background:#a6e3a1" title="Green"></span>
|
||||
<span class="swatch" style="background:#cba6f7" title="Mauve"></span>
|
||||
<span class="swatch" style="background:#fab387" title="Peach"></span>
|
||||
<span class="swatch" style="background:#f9e2af" title="Yellow"></span>
|
||||
</div>
|
||||
<div class="palette-preview" style="background:#1e1e2e;color:#cdd6f4">
|
||||
<span style="color:#f38ba8">fn</span> <span style="color:#a6e3a1">visit</span>(<span style="color:#89dceb">url</span>: <span style="color:#cba6f7">str</span>) {<br>
|
||||
<span style="color:#fab387">// navigate to resource</span><br>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="tokyonight" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Tokyo Night</h3>
|
||||
<p>Deep blue-navy background, electric blue and magenta highlights. Calm, cool, city-at-night aesthetic.</p>
|
||||
<div class="swatch-row">
|
||||
<span class="swatch" style="background:#1a1b26" title="Background"></span>
|
||||
<span class="swatch" style="background:#24283b" title="Surface"></span>
|
||||
<span class="swatch" style="background:#f7768e" title="Red"></span>
|
||||
<span class="swatch" style="background:#7dcfff" title="Cyan"></span>
|
||||
<span class="swatch" style="background:#9ece6a" title="Green"></span>
|
||||
<span class="swatch" style="background:#bb9af7" title="Purple"></span>
|
||||
<span class="swatch" style="background:#ff9e64" title="Orange"></span>
|
||||
<span class="swatch" style="background:#e0af68" title="Yellow"></span>
|
||||
</div>
|
||||
<div class="palette-preview" style="background:#1a1b26;color:#c0caf5">
|
||||
<span style="color:#f7768e">fn</span> <span style="color:#9ece6a">visit</span>(<span style="color:#7dcfff">url</span>: <span style="color:#bb9af7">str</span>) {<br>
|
||||
<span style="color:#ff9e64">// navigate to resource</span><br>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
106
.superpowers/brainstorm/73376-1779100666/content/vibe.html
Normal file
106
.superpowers/brainstorm/73376-1779100666/content/vibe.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<h2>Dracula — How Far to Lean Into "Terminal"?</h2>
|
||||
<p class="subtitle">Same palette, different personality. Which card style feels right?</p>
|
||||
|
||||
<style>
|
||||
.preview-grid {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 16px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.preview-card-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
|
||||
.preview-card-wrap .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; }
|
||||
|
||||
/* Style A: still terminal — square, monospace, minimal */
|
||||
.card-terminal {
|
||||
width: 200px;
|
||||
padding: 16px;
|
||||
font-family: ui-monospace, 'JetBrains Mono', monospace;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(80,250,123,0.4);
|
||||
color: #f8f8f2;
|
||||
font-size: 13px;
|
||||
}
|
||||
.card-terminal h4 { margin: 0 0 6px; color: #50fa7b; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
.card-terminal p { margin: 0; color: #6272a4; font-size: 12px; }
|
||||
.card-terminal:hover { background: rgba(80,250,123,0.06); border-color: #50fa7b; }
|
||||
|
||||
/* Style B: soft modern — rounded, card bg, subtle */
|
||||
.card-modern {
|
||||
width: 200px;
|
||||
padding: 16px;
|
||||
font-family: ui-monospace, 'JetBrains Mono', monospace;
|
||||
background: #313244;
|
||||
border: 1px solid #44475a;
|
||||
border-radius: 10px;
|
||||
color: #f8f8f2;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||
}
|
||||
.card-modern h4 { margin: 0 0 6px; color: #bd93f9; font-size: 13px; }
|
||||
.card-modern p { margin: 0; color: #6272a4; font-size: 12px; }
|
||||
|
||||
/* Style C: vibrant accented — colored top border, gradient glow */
|
||||
.card-vibrant {
|
||||
width: 200px;
|
||||
padding: 16px;
|
||||
font-family: ui-monospace, 'JetBrains Mono', monospace;
|
||||
background: #282a36;
|
||||
border: 1px solid #44475a;
|
||||
border-top: 2px solid #ff79c6;
|
||||
border-radius: 0 0 8px 8px;
|
||||
color: #f8f8f2;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 0 0 1px rgba(255,121,198,0.08), 0 8px 24px rgba(0,0,0,0.5);
|
||||
}
|
||||
.card-vibrant h4 { margin: 0 0 6px; color: #ff79c6; font-size: 13px; }
|
||||
.card-vibrant p { margin: 0; color: #6272a4; font-size: 12px; }
|
||||
</style>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="terminal-dracula" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Still Terminal</h3>
|
||||
<p>Square corners, transparent cards, Dracula green as primary accent. Same structural DNA as today — just a better palette and more glow.</p>
|
||||
<div style="background:#282a36;padding:16px;margin-top:10px;border-radius:6px">
|
||||
<div style="color:#6272a4;font-family:monospace;font-size:11px;margin-bottom:8px"># IoT Learning Portal</div>
|
||||
<div class="card-terminal">
|
||||
<h4>▶ OJ Platform</h4>
|
||||
<p>Online judge for practice</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="modern-dracula" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Soft Modern</h3>
|
||||
<p>Rounded cards with Dracula surface colors, purple accent, subtle shadows. Feels like a polished app — less "green terminal", more "Dracula theme everything".</p>
|
||||
<div style="background:#282a36;padding:16px;margin-top:10px;border-radius:6px">
|
||||
<div style="color:#6272a4;font-family:monospace;font-size:11px;margin-bottom:8px"># IoT Learning Portal</div>
|
||||
<div class="card-modern">
|
||||
<h4>OJ Platform</h4>
|
||||
<p>Online judge for practice</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="vibrant-dracula" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Vibrant & Accented</h3>
|
||||
<p>Colored top border on cards (like Cyberpunk's treatment), pink/cyan/purple accents used actively, neon glow on hover. Most visually punchy of the three.</p>
|
||||
<div style="background:#282a36;padding:16px;margin-top:10px;border-radius:6px">
|
||||
<div style="color:#6272a4;font-family:monospace;font-size:11px;margin-bottom:8px"># IoT Learning Portal</div>
|
||||
<div class="card-vibrant">
|
||||
<h4>OJ Platform</h4>
|
||||
<p>Online judge for practice</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal…</p>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{"reason":"owner process exited","timestamp":1779101686437}
|
||||
@@ -0,0 +1 @@
|
||||
73384
|
||||
Reference in New Issue
Block a user