99 lines
3.0 KiB
HTML
99 lines
3.0 KiB
HTML
<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>
|