117 lines
4.9 KiB
HTML
117 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>QR Master — Design Bake-off</title>
|
||
<style>
|
||
:root {
|
||
--bg: #141414; --panel: #1c1c1c; --line: #333333; --ink: #ECECEC; --muted: #8A8A8A;
|
||
--accent: #E8622C; --mono: "IBM Plex Mono","JetBrains Mono",ui-monospace,Consolas,monospace;
|
||
}
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
html,body { height:100%; background:var(--bg); color:var(--ink); font-family:var(--mono); }
|
||
.topbar {
|
||
display:flex; align-items:center; justify-content:space-between; gap:20px;
|
||
padding:14px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap;
|
||
}
|
||
.topbar-left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
|
||
.topbar-label { font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); line-height:1.3; }
|
||
.collection-btns { display:flex; gap:8px; flex-wrap:wrap; }
|
||
.cbtn {
|
||
font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
|
||
background:transparent; border:1px solid var(--line); color:var(--ink);
|
||
padding:9px 16px; border-radius:3px; cursor:pointer; transition:all .15s ease;
|
||
}
|
||
.cbtn:hover { border-color:var(--accent); }
|
||
.cbtn.active { background:var(--accent); border-color:var(--accent); color:#141414; }
|
||
.topbar-hint { font-size:10.5px; letter-spacing:0.06em; color:var(--muted); text-transform:uppercase; text-align:right; }
|
||
.topbar-hint b { color:var(--ink); }
|
||
|
||
.compare { display:grid; grid-template-columns:1fr 1fr; height:calc(100vh - 60px); }
|
||
.pane { display:flex; flex-direction:column; border-right:1px solid var(--line); min-width:0; }
|
||
.pane:last-child { border-right:none; }
|
||
.pane-head {
|
||
display:flex; align-items:center; justify-content:space-between; gap:12px;
|
||
padding:10px 18px; border-bottom:1px solid var(--line); background:var(--panel);
|
||
}
|
||
.pane-head .name { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
|
||
.pane-head .name.left-accent { color:var(--accent); }
|
||
.pane-head .name.right-accent { color:#5FA8FF; }
|
||
.pane-head .tag { font-size:10px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; }
|
||
.pane iframe { flex:1; width:100%; border:none; background:#fff; }
|
||
|
||
@media (max-width: 900px) {
|
||
.compare { grid-template-columns:1fr; height:auto; }
|
||
.pane { border-right:none; border-bottom:1px solid var(--line); height:70vh; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="topbar">
|
||
<div class="topbar-left">
|
||
<span class="topbar-label">Design<br>Collection:</span>
|
||
<div class="collection-btns" id="collectionBtns">
|
||
<button class="cbtn" data-slug="blueprint">Print-Tech</button>
|
||
<button class="cbtn" data-slug="dither-mono">Dither Mono</button>
|
||
<button class="cbtn" data-slug="vast-quiet">Vast Quiet</button>
|
||
<button class="cbtn" data-slug="data-texture">Data-Texture</button>
|
||
<button class="cbtn" data-slug="classical">Classical</button>
|
||
<button class="cbtn active" data-slug="quiet-mono">Quiet Mono</button>
|
||
</div>
|
||
</div>
|
||
<div class="topbar-hint">Left = <b>Light</b> · Right = <b>Dark</b> · Keys 1–6</div>
|
||
</div>
|
||
|
||
<div class="compare">
|
||
<div class="pane">
|
||
<div class="pane-head"><span class="name left-accent" id="leftName">Classical</span><span class="tag">Light</span></div>
|
||
<iframe id="leftFrame" title="Light mode preview"></iframe>
|
||
</div>
|
||
<div class="pane">
|
||
<div class="pane-head"><span class="name right-accent" id="rightName">Classical</span><span class="tag">Dark</span></div>
|
||
<iframe id="rightFrame" title="Dark mode preview"></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
var LABELS = {
|
||
"blueprint": "Print-Tech",
|
||
"dither-mono": "Dither Mono",
|
||
"vast-quiet": "Vast Quiet",
|
||
"data-texture": "Data-Texture",
|
||
"classical": "Classical",
|
||
"quiet-mono": "Quiet Mono"
|
||
};
|
||
var ORDER = ["blueprint", "dither-mono", "vast-quiet", "data-texture", "classical", "quiet-mono"];
|
||
var btns = document.querySelectorAll('.cbtn');
|
||
var leftFrame = document.getElementById('leftFrame');
|
||
var rightFrame = document.getElementById('rightFrame');
|
||
var leftName = document.getElementById('leftName');
|
||
var rightName = document.getElementById('rightName');
|
||
|
||
function setCollection(slug) {
|
||
btns.forEach(function (b) { b.classList.toggle('active', b.getAttribute('data-slug') === slug); });
|
||
leftFrame.src = 'landing-' + slug + '.html';
|
||
rightFrame.src = 'landing-' + slug + '.html#dark';
|
||
leftName.textContent = LABELS[slug];
|
||
rightName.textContent = LABELS[slug];
|
||
}
|
||
|
||
btns.forEach(function (b) {
|
||
b.addEventListener('click', function () { setCollection(b.getAttribute('data-slug')); });
|
||
});
|
||
|
||
document.addEventListener('keydown', function (e) {
|
||
var idx = parseInt(e.key, 10) - 1;
|
||
if (idx >= 0 && idx < ORDER.length) setCollection(ORDER[idx]);
|
||
});
|
||
|
||
setCollection('quiet-mono');
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|