152 lines
No EOL
4.1 KiB
HTML
152 lines
No EOL
4.1 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 · Back Tray</title>
|
||
<link rel="stylesheet" href="../opencd.css">
|
||
<style>
|
||
/* Demo page chrome */
|
||
body {
|
||
min-height: 100dvh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
padding: 2rem;
|
||
background: oklch(92% .012 85);
|
||
font-family: var(--font-sans);
|
||
}
|
||
|
||
.demo-controls {
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
font-size: .875rem;
|
||
}
|
||
|
||
.demo-controls label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.demo-controls input[type="checkbox"] {
|
||
accent-color: var(--red-6);
|
||
}
|
||
|
||
.demo-footnote {
|
||
font-size: .75rem;
|
||
color: var(--gray-6);
|
||
text-align: center;
|
||
max-width: 480px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ============================================================
|
||
Back-tray specific layout
|
||
============================================================ */
|
||
/* Wrap the back-tray in a jewel-case frame */
|
||
.demo-tray-container {
|
||
width: var(--cd-jewel-width);
|
||
border-radius: var(--cd-jewel-radius);
|
||
box-shadow: var(--cd-jewel-shadow);
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================================================
|
||
BACK TRAY — Tracklist & Credits
|
||
============================================================ -->
|
||
<div class="demo-tray-container">
|
||
|
||
<div class="back-tray cd-grid--crosshatch">
|
||
|
||
<!-- Left spine -->
|
||
<nav class="cd-spine cd-spine--side">
|
||
<span class="spine-label">OPENCD</span>
|
||
<span class="spine-track">03 · back-tray</span>
|
||
</nav>
|
||
|
||
<!-- Credits / tracklist -->
|
||
<section class="tray-credits">
|
||
|
||
<span class="credits-label">Tracklist</span>
|
||
<ol>
|
||
<li>jewel-case</li>
|
||
<li>leaflet</li>
|
||
<li>back-tray</li>
|
||
<li>human-advisory</li>
|
||
<li>disc-art</li>
|
||
<li>spine-navigation</li>
|
||
<li>grid-overlay</li>
|
||
<li>print-layout</li>
|
||
</ol>
|
||
|
||
<span class="credits-label">Credits</span>
|
||
<p>
|
||
<strong>Design & Architecture</strong><br>
|
||
Hannibal · Face
|
||
</p>
|
||
<p>
|
||
<strong>Engineering & Prototypes</strong><br>
|
||
Murdock · B.A. Baracus
|
||
</p>
|
||
<p>
|
||
<strong>Quality & Verification</strong><br>
|
||
Amy Amanda Allen
|
||
</p>
|
||
|
||
<span class="credits-label">Technical</span>
|
||
<p>
|
||
Built on Open Props v2 · Pure CSS framework · No build step required<br>
|
||
ISO 15727 jewel case dimensions · 2× display scale<br>
|
||
GPG-signed commits · A-Team design collective
|
||
</p>
|
||
|
||
</section>
|
||
|
||
<!-- Right spine -->
|
||
<nav class="cd-spine cd-spine--side">
|
||
<span class="spine-label">TRENTUNA</span>
|
||
<span class="spine-track">MMXXV</span>
|
||
</nav>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Demo controls -->
|
||
<div class="demo-controls">
|
||
<label>
|
||
<input type="checkbox" id="toggle-grid" checked onchange="document.querySelector('.back-tray').classList.toggle('cd-grid--crosshatch', this.checked)">
|
||
Show grid
|
||
</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">
|
||
Back tray paper insert (151 × 118 mm physical) with dual spines, tracklist, and production credits · Grid overlay inspired by trentuna.com paper-card aesthetic
|
||
</div>
|
||
|
||
<script>
|
||
function setScale(scale) {
|
||
document.documentElement.style.setProperty('--cd-scale', scale);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |