index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RowCode — Atelier</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=JetBrains+Mono:wght@400&display=swap');
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --bg: #0d1218; --card: #141c27; --card2: #0f151e;
            --line: rgba(255,255,255,0.08); --line2: rgba(255,255,255,0.11);
            --text: #eef2f7; --muted: #8b98b1; --muted2: #6e7c96;
            --accent: #7b90d2; --accent2: #9aa8e6; --success: #28c49a;
        }
        html { scroll-behavior: smooth; }
        body {
            font-family: "Geist", system-ui, -apple-system, sans-serif;
            background:
                radial-gradient(900px 520px at 18% -10%, rgba(123,144,210,0.16), transparent 60%),
                radial-gradient(800px 500px at 90% 0%, rgba(40,196,154,0.08), transparent 60%),
                linear-gradient(180deg, var(--bg), #090d12);
            color: var(--text);
            min-height: 100dvh;
            display: grid;
            place-items: center;
            padding: 28px 16px;
            -webkit-font-smoothing: antialiased;
        }
        body::before {
            content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.035;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        }
        .shell {
            width: 100%; max-width: 680px;
            background: linear-gradient(180deg, var(--card), var(--card2));
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: 0 20px 60px rgba(2,8,18,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
            overflow: hidden;
            position: relative;
        }
        .shell::before {
            content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
            background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
        }
        .top {
            display: flex; justify-content: space-between; align-items: center;
            padding: 14px 20px; border-bottom: 1px solid var(--line);
            font-size: 0.78rem; font-family: "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
        }
        .top b { color: var(--text); font-weight: 600; letter-spacing: -0.02em; text-transform: none; font-family: "Geist", sans-serif; font-size: 0.92rem; }
        .hero { padding: 32px 28px 20px; text-align: center; }
        .eyebrow {
            font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--accent2); margin-bottom: 14px;
        }
        h1 {
            font-family: "Newsreader", serif; font-size: clamp(2.2rem, 8vw, 3.1rem); font-weight: 400;
            letter-spacing: -0.05em; line-height: 0.92; margin-bottom: 12px; text-wrap: balance;
        }
        h1 em { font-style: italic; font-weight: 400; color: var(--accent2); }
        .sub { color: var(--muted); font-size: 0.98rem; line-height: 1.6; max-width: 44ch; margin: 0 auto 22px; text-wrap: pretty; }
        .cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
        .btn-primary {
            background: var(--success); color: #061410; border: 1px solid rgba(255,255,255,0.12);
            padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; cursor: pointer;
            display: inline-flex; align-items: center; gap: 8px;
            box-shadow: 0 8px 24px rgba(40,196,154,0.28); transition: transform 180ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 180ms;
        }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(40,196,154,0.34); }
        .btn-primary:active { transform: scale(0.97); }
        .btn-ghost {
            background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--line);
            padding: 11px 16px; border-radius: 999px; font-weight: 500; font-size: 0.88rem; cursor: pointer; transition: background 160ms;
        }
        .btn-ghost:hover { background: rgba(255,255,255,0.09); }
        .output {
            margin: 0 auto; max-width: 420px; min-height: 52px;
            background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px;
            padding: 12px 14px; font-size: 0.88rem; color: var(--muted);
            display: grid; place-items: center; text-align: center; font-variant-numeric: tabular-nums;
        }
        .output strong { color: var(--text); font-weight: 600; }
        .bento {
            display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
            padding: 20px; background: rgba(255,255,255,0.015); border-top: 1px solid var(--line);
        }
        .tile {
            background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 14px; padding: 16px;
            text-align: left;
        }
        .tile.featured { background: linear-gradient(180deg, rgba(123,144,210,0.12), rgba(255,255,255,0.02)); border-color: rgba(123,144,210,0.16); }
        .tile h3 { font-size: 0.88rem; letter-spacing: -0.02em; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
        .tile p { font-size: 0.82rem; color: var(--muted); line-height: 1.55; }
        .tile .meta { margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted2); }
        .foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; color: var(--muted2); font-family: "JetBrains Mono", monospace; }
        @media (max-width: 480px) { .bento { grid-template-columns: 1fr; } .hero { padding: 24px 18px 16px; } h1 { font-size: 2.1rem; } }
        @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
    </style>
</head>
<body>
    <div class="shell">
        <div class="top"><b>◐ RowCode</b><span>04 — Atelier</span></div>
        <div class="hero">
            <p class="eyebrow">Mobile — Instant — Private</p>
            <h1>Stillness as a <em>form</em></h1>
            <p class="sub">A pocket editor for HTML, CSS &amp; JS. Edit, run, and share — no build step, no backend, just your thumbs.</p>
            <div class="cta-row">
                <button class="btn-primary" id="demo-btn">Tap to count →</button>
                <button class="btn-ghost" onclick="document.getElementById('output').scrollIntoView({behavior:'smooth'})">How it works</button>
            </div>
            <div class="output" id="output">Ready — tap the button.</div>
        </div>
        <div class="bento">
            <div class="tile featured">
                <h3>▦ Instant preview</h3>
                <p>Sandboxed iframe. No reload, no flicker. Stays on device.</p>
                <div class="meta">0.3s open · offline</div>
            </div>
            <div class="tile">
                <h3>◐ Offline first</h3>
                <p>Install as PWA. Works in airplane mode.</p>
                <div class="meta">Autosaves 1.5s</div>
            </div>
            <div class="tile">
                <h3>◇ Export clean</h3>
                <p>One tap to HTML, CSS, JS or ZIP.</p>
                <div class="meta">No lock-in</div>
            </div>
            <div class="tile">
                <h3>⬔ Touch tuned</h3>
                <p>44px targets, haptic, keyboard-aware.</p>
                <div class="meta">Built for thumbs</div>
            </div>
        </div>
        <div class="foot"><span>rowcode.studio</span><span>Press Run to preview</span></div>
    </div>
    <script>
        let count = 0;
        const btn = document.getElementById('demo-btn');
        const out = document.getElementById('output');
        const msgs = ["Nice tap — you’re in.", "Keep going — it stacks.", "Fluid motion, no reload.", "You’re shipping.", "Tap is the new click."];
        btn.addEventListener('click', () => {
            count++;
            const msg = msgs[Math.min(count - 1, msgs.length - 1)];
            out.innerHTML = "<strong>" + msg + "</strong> &nbsp;<span style='color:#8b98b1'>· " + count + " tap" + (count !== 1 ? "s" : "") + "</span>";
            btn.style.transform = 'scale(0.97)';
            setTimeout(() => btn.style.transform = 'scale(1)', 120);
            if (navigator.vibrate) navigator.vibrate(10);
        });
        // subtle ambient gradient — rAF + prefers-reduced-motion
        const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
        if (!mql.matches) {
            let raf = null;
            document.addEventListener('mousemove', (e) => {
                if (raf) return;
                raf = requestAnimationFrame(() => {
                    const x = e.clientX / innerWidth, y = e.clientY / innerHeight;
                    document.body.style.background = `radial-gradient(900px 520px at ${18 + x*10}% -10%, rgba(123,144,210,0.16), transparent 60%), radial-gradient(800px 500px at ${90 - x*6}% 0%, rgba(40,196,154,0.08), transparent 60%), linear-gradient(180deg, #0d1218, #090d12)`;
                    raf = null;
                });
            });
        }
        // keyboard: Space/Enter triggers
        btn.addEventListener('keydown', (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); btn.click(); } });
    </script>
</body>
</html>

Press Run to open live preview — autosaves every 1.5s