Add concept board, v1 brief audit, and .gitignore
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; }
|
||||
@keyframes drift {
|
||||
0% { transform: translate(-22px, 14px); }
|
||||
25% { transform: translate(10px, -18px); }
|
||||
50% { transform: translate(20px, 12px); }
|
||||
75% { transform: translate(-8px, 20px); }
|
||||
100% { transform: translate(-22px, 14px); }
|
||||
}
|
||||
@keyframes driftX {
|
||||
0% { transform: translate(-46px, -50%); }
|
||||
50% { transform: translate(38px, -50%); }
|
||||
100% { transform: translate(-46px, -50%); }
|
||||
}
|
||||
@keyframes driftY {
|
||||
0% { transform: translate(-50%, 40px); }
|
||||
50% { transform: translate(-50%, -34px); }
|
||||
100% { transform: translate(-50%, 40px); }
|
||||
}
|
||||
@keyframes glowPulse {
|
||||
0%,100% { opacity: 0.55; transform: scale(1); }
|
||||
50% { opacity: 0.9; transform: scale(1.06); }
|
||||
}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="min-height:100vh;background:#EDEBE6;font-family:'Space Grotesk',sans-serif;padding:56px 56px 96px;color:#1a1a1a;">
|
||||
|
||||
<section id="1" style="max-width:1680px;margin:0 auto;">
|
||||
<div style="display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px;">
|
||||
<div style="font-size:13px;letter-spacing:3px;font-weight:600;color:#8a8578;">TURN 1</div>
|
||||
<h1 style="font-size:34px;font-weight:600;margin:0;letter-spacing:-0.5px;">Bubble level — four directions</h1>
|
||||
</div>
|
||||
<p style="max-width:640px;font-size:16px;line-height:1.5;color:#5c584e;margin:0 0 48px;">Same instrument, four personalities. All share the language: near-black glass, a warm spirit-fluid bubble, and a lime lock when the surface reads flat. Pick a lane (or mix) and I'll refine it.</p>
|
||||
|
||||
<div style="display:flex;flex-wrap:wrap;gap:56px;justify-content:center;">
|
||||
|
||||
<!-- 1a BULLSEYE -->
|
||||
<div id="1a" style="display:flex;flex-direction:column;align-items:center;gap:18px;">
|
||||
<div style="text-align:center;">
|
||||
<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;background:#1a1a1a;color:#EDEBE6;padding:4px 10px;border-radius:6px;">1a</div>
|
||||
<div style="font-size:19px;font-weight:600;margin-top:12px;">Bullseye</div>
|
||||
<div style="font-size:13px;color:#8a8578;max-width:260px;">Circular target for flat surfaces — the classic bull's-eye vial, reimagined.</div>
|
||||
</div>
|
||||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
|
||||
<div style="position:absolute;inset:0;background:radial-gradient(125% 95% at 50% 32%, #15181D 0%, #090A0C 72%);color:#fff;font-family:'Space Grotesk',sans-serif;display:flex;flex-direction:column;">
|
||||
<div style="padding:66px 30px 0;display:flex;justify-content:space-between;align-items:flex-start;">
|
||||
<div>
|
||||
<div style="font-size:12px;letter-spacing:3px;color:rgba(255,255,255,0.42);font-weight:600;">BULLSEYE</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#CBEF5C;margin-top:8px;display:flex;align-items:center;gap:7px;"><span style="width:7px;height:7px;border-radius:50%;background:#CBEF5C;box-shadow:0 0 8px #CBEF5C;"></span>LIVE</div>
|
||||
</div>
|
||||
<div style="width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.13);display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.55)" stroke-width="1.6"><circle cx="12" cy="12" r="3.2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center;">
|
||||
<div style="position:relative;width:270px;height:270px;">
|
||||
<div style="position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,0.07);"></div>
|
||||
<div style="position:absolute;inset:45px;border-radius:50%;border:1px solid rgba(255,255,255,0.09);"></div>
|
||||
<div style="position:absolute;inset:90px;border-radius:50%;border:1px dashed rgba(203,239,92,0.35);"></div>
|
||||
<div style="position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,0.08);"></div>
|
||||
<div style="position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,0.08);"></div>
|
||||
<div style="position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:1px solid rgba(203,239,92,0.55);"></div>
|
||||
<div style="position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;animation:drift 9s ease-in-out infinite;">
|
||||
<div style="width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 34% 28%, #FFEEB0, #FFC44E 52%, #E0961E);box-shadow:0 8px 26px rgba(255,178,60,0.32), inset 0 -7px 14px rgba(150,90,15,0.5), inset 0 5px 10px rgba(255,255,255,0.55);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 30px 62px;display:flex;gap:14px;">
|
||||
<div style="flex:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:16px;padding:14px 16px;">
|
||||
<div style="font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.4);font-weight:600;">X-AXIS</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:500;margin-top:4px;">1.2°</div>
|
||||
</div>
|
||||
<div style="flex:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:16px;padding:14px 16px;">
|
||||
<div style="font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.4);font-weight:600;">Y-AXIS</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:500;margin-top:4px;">0.4°</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-import>
|
||||
</div>
|
||||
|
||||
<!-- 1b CROSS VIALS -->
|
||||
<div id="1b" style="display:flex;flex-direction:column;align-items:center;gap:18px;">
|
||||
<div style="text-align:center;">
|
||||
<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;background:#1a1a1a;color:#EDEBE6;padding:4px 10px;border-radius:6px;">1b</div>
|
||||
<div style="font-size:19px;font-weight:600;margin-top:12px;">Cross vials</div>
|
||||
<div style="font-size:13px;color:#8a8578;max-width:260px;">Two spirit tubes in a cross — the honest, tool-like read every builder knows.</div>
|
||||
</div>
|
||||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
|
||||
<div style="position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%, #131611 0%, #090A08 74%);color:#fff;font-family:'Space Grotesk',sans-serif;display:flex;flex-direction:column;">
|
||||
<div style="padding:66px 30px 0;display:flex;justify-content:space-between;align-items:flex-start;">
|
||||
<div>
|
||||
<div style="font-size:12px;letter-spacing:3px;color:rgba(255,255,255,0.42);font-weight:600;">SURFACE</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(255,255,255,0.5);margin-top:8px;">calibrated · 0.0 ref</div>
|
||||
</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:13px;color:#FFC44E;">2.6°</div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center;">
|
||||
<div style="position:relative;width:300px;height:300px;">
|
||||
<!-- horizontal vial -->
|
||||
<div style="position:absolute;top:50%;left:0;right:0;height:62px;margin-top:-31px;border-radius:31px;background:linear-gradient(180deg,#1c2712,#101808);border:1px solid rgba(203,239,92,0.12);box-shadow:inset 0 3px 8px rgba(0,0,0,0.6), inset 0 -2px 4px rgba(203,239,92,0.06);overflow:hidden;">
|
||||
<div style="position:absolute;left:calc(50% - 26px);top:8px;bottom:8px;width:1px;background:rgba(255,255,255,0.22);"></div>
|
||||
<div style="position:absolute;left:calc(50% + 26px);top:8px;bottom:8px;width:1px;background:rgba(255,255,255,0.22);"></div>
|
||||
<div style="position:absolute;top:50%;left:50%;width:46px;height:46px;margin-top:-23px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle at 34% 28%, #FFEEB0, #FFC44E 52%, #E0961E);box-shadow:0 6px 18px rgba(255,178,60,0.3), inset 0 -6px 12px rgba(150,90,15,0.5), inset 0 4px 8px rgba(255,255,255,0.55);animation:driftX 7s ease-in-out infinite;"></div>
|
||||
</div>
|
||||
<!-- vertical vial -->
|
||||
<div style="position:absolute;left:50%;top:0;bottom:0;width:62px;margin-left:-31px;border-radius:31px;background:linear-gradient(90deg,#1c2712,#101808);border:1px solid rgba(203,239,92,0.12);box-shadow:inset 0 3px 8px rgba(0,0,0,0.6);overflow:hidden;">
|
||||
<div style="position:absolute;top:calc(50% - 26px);left:8px;right:8px;height:1px;background:rgba(255,255,255,0.22);"></div>
|
||||
<div style="position:absolute;top:calc(50% + 26px);left:8px;right:8px;height:1px;background:rgba(255,255,255,0.22);"></div>
|
||||
<div style="position:absolute;left:50%;top:50%;width:46px;height:46px;margin-top:-23px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle at 34% 28%, #FFEEB0, #FFC44E 52%, #E0961E);box-shadow:0 6px 18px rgba(255,178,60,0.3), inset 0 -6px 12px rgba(150,90,15,0.5), inset 0 4px 8px rgba(255,255,255,0.55);animation:driftY 8.5s ease-in-out infinite;"></div>
|
||||
</div>
|
||||
<div style="position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#EDEBE6;z-index:2;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 30px 62px;display:flex;justify-content:space-between;align-items:flex-end;">
|
||||
<div>
|
||||
<div style="font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.4);font-weight:600;">PITCH</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:500;">2.4°</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div style="font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.4);font-weight:600;">ROLL</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:500;">0.9°</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-import>
|
||||
</div>
|
||||
|
||||
<!-- 1c ANGLE-FIRST -->
|
||||
<div id="1c" style="display:flex;flex-direction:column;align-items:center;gap:18px;">
|
||||
<div style="text-align:center;">
|
||||
<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;background:#1a1a1a;color:#EDEBE6;padding:4px 10px;border-radius:6px;">1c</div>
|
||||
<div style="font-size:19px;font-weight:600;margin-top:12px;">Angle-first</div>
|
||||
<div style="font-size:13px;color:#8a8578;max-width:260px;">Numbers lead. Editorial, oversized readout with the bubble reduced to a hairline.</div>
|
||||
</div>
|
||||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
|
||||
<div style="position:absolute;inset:0;background:#0A0A0B;color:#fff;font-family:'Space Grotesk',sans-serif;display:flex;flex-direction:column;">
|
||||
<div style="padding:66px 34px 0;display:flex;justify-content:space-between;align-items:center;">
|
||||
<div style="font-size:12px;letter-spacing:3px;color:rgba(255,255,255,0.42);font-weight:600;">TILT</div>
|
||||
<div style="font-size:12px;letter-spacing:2px;color:rgba(255,255,255,0.35);font-weight:500;">HOLD TO ZERO</div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;">
|
||||
<div style="display:flex;align-items:flex-start;line-height:0.85;">
|
||||
<span style="font-size:168px;font-weight:300;letter-spacing:-6px;">8.6</span>
|
||||
<span style="font-size:56px;font-weight:300;color:#FFC44E;margin-top:14px;">°</span>
|
||||
</div>
|
||||
<div style="position:relative;width:250px;height:2px;background:rgba(255,255,255,0.12);margin-top:44px;">
|
||||
<div style="position:absolute;left:0;top:-5px;width:1px;height:12px;background:rgba(255,255,255,0.25);"></div>
|
||||
<div style="position:absolute;left:50%;top:-7px;width:1px;height:16px;background:rgba(255,255,255,0.35);"></div>
|
||||
<div style="position:absolute;right:0;top:-5px;width:1px;height:12px;background:rgba(255,255,255,0.25);"></div>
|
||||
<div style="position:absolute;left:72%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 34% 28%, #FFEEB0, #FFC44E 55%, #E0961E);box-shadow:0 0 14px rgba(255,178,60,0.5);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 34px 62px;display:flex;gap:12px;">
|
||||
<div style="flex:1;border-top:1px solid rgba(255,255,255,0.1);padding-top:12px;">
|
||||
<div style="font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.4);font-weight:600;">PITCH</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:18px;margin-top:2px;">8.6°</div>
|
||||
</div>
|
||||
<div style="flex:1;border-top:1px solid rgba(255,255,255,0.1);padding-top:12px;">
|
||||
<div style="font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.4);font-weight:600;">ROLL</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:18px;margin-top:2px;">2.1°</div>
|
||||
</div>
|
||||
<div style="flex:1;border-top:1px solid rgba(255,255,255,0.1);padding-top:12px;">
|
||||
<div style="font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.4);font-weight:600;">SLOPE</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:18px;margin-top:2px;">15%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-import>
|
||||
</div>
|
||||
|
||||
<!-- 1d IMMERSIVE / LOCKED -->
|
||||
<div id="1d" style="display:flex;flex-direction:column;align-items:center;gap:18px;">
|
||||
<div style="text-align:center;">
|
||||
<div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;background:#1a1a1a;color:#EDEBE6;padding:4px 10px;border-radius:6px;">1d</div>
|
||||
<div style="font-size:19px;font-weight:600;margin-top:12px;">Immersive horizon</div>
|
||||
<div style="font-size:13px;color:#8a8578;max-width:260px;">Full-bleed plane that tilts with the phone. Shown in its lime "locked" state.</div>
|
||||
</div>
|
||||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
|
||||
<div style="position:absolute;inset:0;background:#070808;color:#fff;font-family:'Space Grotesk',sans-serif;overflow:hidden;">
|
||||
<div style="position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle, rgba(203,239,92,0.22), rgba(203,239,92,0) 62%);animation:glowPulse 4s ease-in-out infinite;"></div>
|
||||
<div style="position:absolute;left:-10%;right:-10%;top:calc(50% - 90px);height:1px;background:rgba(255,255,255,0.06);"></div>
|
||||
<div style="position:absolute;left:-10%;right:-10%;top:calc(50% + 90px);height:1px;background:rgba(255,255,255,0.06);"></div>
|
||||
<div style="position:absolute;left:-10%;right:-10%;top:50%;height:2px;background:linear-gradient(90deg,rgba(203,239,92,0) 0%,rgba(203,239,92,0.9) 50%,rgba(203,239,92,0) 100%);box-shadow:0 0 18px rgba(203,239,92,0.6);"></div>
|
||||
<div style="position:absolute;inset:0;display:flex;flex-direction:column;">
|
||||
<div style="padding:66px 0 0;text-align:center;">
|
||||
<div style="display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:5px;font-weight:600;color:#CBEF5C;">
|
||||
<span style="width:6px;height:6px;background:#CBEF5C;transform:rotate(45deg);"></span>LEVEL
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center;">
|
||||
<div style="position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;">
|
||||
<div style="position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(203,239,92,0.7);box-shadow:0 0 24px rgba(203,239,92,0.35), inset 0 0 24px rgba(203,239,92,0.15);"></div>
|
||||
<div style="position:absolute;left:14px;right:14px;top:50%;height:1px;background:rgba(203,239,92,0.3);"></div>
|
||||
<div style="position:absolute;top:14px;bottom:14px;left:50%;width:1px;background:rgba(203,239,92,0.3);"></div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:500;color:#EAFFC2;">0.0°</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 0 66px;text-align:center;">
|
||||
<div style="font-size:15px;color:rgba(234,255,194,0.85);font-weight:500;">Surface is flat</div>
|
||||
<div style="font-size:12px;letter-spacing:2px;color:rgba(255,255,255,0.3);margin-top:6px;">TAP TO CAPTURE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-import>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user