B.A. Baracus
0206b69381
Phase 3 (Bug #6, #8): - Stripped decorative comment blocks — simple /* Section */ headers throughout - Simplified .disc-art--sheen from 3-layer to 2-layer radial gradient - Removed standalone .advisory-row--red class (use modifier pattern) - Fixed .cd-spine--side: removed writing-mode: horizontal-tb + flex-direction: row override — side spines now inherit vertical-rl from .cd-spine base Phase 4 (Bug #2, #3, #4): - Expanded reset from 5 lines to 35 lines: font inheritance, line-height, form elements, block images, list-style, heading reset, link reset - Added --cd-tray-height: calc(236px * var(--cd-scale)) token in :root - Added max-height: var(--cd-tray-height) + overflow-y: auto to .back-tray - Changed .cd-jewel-case width to min(var(--cd-jewel-width), 100% - 2rem) - Updated .cd-jewel-case--open width to min(var(--cd-jewel-open-width), ...) - Tightened back-tray.html content (condensed credits + technical para) Co-authored-by: H.M. Murdock <murdock@a-team.dev> (Phases 1-2)
84 lines
No EOL
2.7 KiB
HTML
84 lines
No EOL
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>OpenCD · Jewel Case</title>
|
||
<link rel="stylesheet" href="../opencd.css">
|
||
<link rel="stylesheet" href="demo.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================================================
|
||
JEWEL CASE — Closed (default)
|
||
============================================================ -->
|
||
<main class="cd-jewel-case" id="jewel" data-jewel-state="closed">
|
||
|
||
<!-- Spine -->
|
||
<nav class="cd-spine">
|
||
<span class="spine-label">OPENCD · TRENTUNA</span>
|
||
<span class="spine-track">01 · jewel-case</span>
|
||
</nav>
|
||
|
||
<!-- Inner content -->
|
||
<div class="cd-jewel-inner">
|
||
|
||
<!-- Leaflet content area with disc art -->
|
||
<section class="leaflet-content cd-grid">
|
||
<article class="leaflet-page" data-leaflet-page="0" data-leaflet-active="true">
|
||
<h1>Jewel Case</h1>
|
||
<p>A compact disc (CD) jewel case is a three-piece plastic case designed to hold standard audio CDs, CD-ROMs, and other optical media. This prototype recreates the physical form factor in pure HTML and CSS.</p>
|
||
<span class="leaflet-meta">142 × 125 mm · 2× scale</span>
|
||
</article>
|
||
</section>
|
||
|
||
<!-- Disc art -->
|
||
<div class="disc-art disc-art--sheen">
|
||
<span class="disc-hole">◉</span>
|
||
</div>
|
||
|
||
<!-- Human Advisory badge -->
|
||
<aside class="human-advisory human-advisory--red">
|
||
<span class="advisory-row advisory-row--black">HUMAN</span>
|
||
<span class="advisory-row advisory-row--white">ADVISORY</span>
|
||
<span class="advisory-row advisory-row--red">PROTOTYPE CODE</span>
|
||
</aside>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Demo controls -->
|
||
<div class="demo-controls">
|
||
<label>
|
||
<input type="checkbox" id="toggle-open" onchange="toggleOpen(this.checked)">
|
||
Open case
|
||
</label>
|
||
|
||
<label>
|
||
Scale:
|
||
<select id="scale-select" onchange="setScale(this.value)">
|
||
<option value="0.5">0.5× (1× physical)</option>
|
||
<option value="1" selected>1 (default 2×)</option>
|
||
<option value="1.5">1.5× (3×)</option>
|
||
<option value="2">2× (4×)</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="demo-footnote">
|
||
An OpenCD prototype by H.M. Murdock · Built with Open Props · Pure CSS, no JS dependency
|
||
</div>
|
||
|
||
<script>
|
||
function toggleOpen(open) {
|
||
const jewel = document.getElementById('jewel');
|
||
jewel.dataset.jewelState = open ? 'open' : 'closed';
|
||
jewel.classList.toggle('cd-jewel-case--open', open);
|
||
}
|
||
|
||
function setScale(scale) {
|
||
document.documentElement.style.setProperty('--cd-scale', scale);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |