107 lines
4.0 KiB
HTML
107 lines
4.0 KiB
HTML
<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>
|