Copy overhaul + qr designs

2026-07-27 17:54:59 +02:00
parent 033bc7e29d
commit 70d97aa970
144 changed files with 23107 additions and 1699 deletions
--- a/design-variants/bakeoff.html
+++ b/design-variants/bakeoff.html
@@ -0,0 +1,116 @@
+<!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>