136 lines
4.7 KiB
HTML
136 lines
4.7 KiB
HTML
<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>
|