Unopened Weather

Plain-text source · thing #5149

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="color-scheme" content="dark">
  <title>Unopened Weather — a pocket forecast</title>
  <style>
    :root{--night:#17152a;--paper:#d9dde4;--ink:#252331;--sun:#ffc85a;--blue:#78b8cc;--rose:#b55c73;--cream:#f5ead2;--muted:#b7b2c9;--focus:#fff3a8}
    *{box-sizing:border-box}
    body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 12%,#373253 0,#17152a 55%,#0f0e1b 100%);color:var(--cream);font:17px/1.55 system-ui,-apple-system,Segoe UI,sans-serif;display:grid;place-items:center;padding:24px}
    main{width:min(920px,100%);display:grid;gap:24px}
    header{text-align:center}
    .eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-size:.76rem;font-weight:750}
    h1{font:700 clamp(2rem,6vw,4.2rem)/.95 Georgia,serif;margin:.35rem 0 .65rem}
    .lede{max-width:660px;margin:auto;color:var(--muted)}
    .stage{min-height:390px;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid #5d5879;border-radius:28px;background:linear-gradient(150deg,#211f36,#302943);box-shadow:0 28px 80px #08070eaa}
    .river{position:absolute;inset:auto -10% 0;height:28%;background:linear-gradient(#52738622,#537e99aa);clip-path:polygon(0 38%,14% 28%,27% 46%,43% 30%,60% 48%,78% 25%,100% 42%,100% 100%,0 100%)}
    .hat{position:absolute;bottom:48px;width:260px;height:130px;border:4px solid #b9b1a4;border-radius:25% 25% 45% 45%;background:#ece2cf22;transform:perspective(400px) rotateX(18deg);box-shadow:inset 0 -25px 35px #8c776355}
    .hat:before{content:"OOPS";position:absolute;bottom:14px;left:0;right:0;text-align:center;font:700 .85rem/1 Georgia,serif;letter-spacing:.2em;color:#d1c6b4}
    .envelope{z-index:2;width:min(380px,76vw);aspect-ratio:1.58;background:var(--paper);color:var(--ink);border:0;border-radius:8px;position:relative;box-shadow:0 18px 45px #06050d88;cursor:pointer;transition:transform .5s ease,background .5s ease;display:grid;place-items:center;padding:20px}
    .envelope:before,.envelope:after{content:"";position:absolute;inset:0;pointer-events:none}
    .envelope:before{clip-path:polygon(0 0,50% 58%,100% 0);background:#c7ccd4}
    .envelope:after{clip-path:polygon(0 100%,50% 43%,100% 100%);background:#e5e8ed}
    .label{z-index:3;border:2px solid #59576a;padding:.6rem .8rem;background:#f6f3e9;font:800 clamp(.75rem,2vw,1rem)/1.1 ui-monospace,monospace;letter-spacing:.12em;transform:rotate(-2deg)}
    .envelope[data-state="window"]{background:#8fc4d4;transform:rotate(1deg) scale(1.03)}
    .envelope[data-state="window"]:before{clip-path:polygon(8% 8%,92% 8%,92% 92%,8% 92%);background:linear-gradient(150deg,#95ccdf,#f4c96b)}
    .envelope[data-state="window"]:after{clip-path:polygon(0 100%,50% 78%,100% 100%);background:#e5e8ed}
    .envelope[data-state="home"]{transform:translateX(18px) rotate(5deg);background:#cbc3d6}
    .sun{position:absolute;z-index:1;width:64px;height:64px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 12px #ffc85a22,0 0 44px #ffc85a77;top:68px;right:15%;transition:.6s ease;opacity:0;transform:translateY(90px) scale(.2)}
    .sun.show{opacity:1;transform:translateY(0) scale(1)}
    .controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 18px;position:absolute;inset:auto 0 0;z-index:4}
    button{font:inherit;border:1px solid #746d91;border-radius:999px;background:#1d1a31dd;color:var(--cream);padding:.65rem .85rem;cursor:pointer}
    button:hover{background:#34304e} button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
    .panel{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .card{background:#211f36;border:1px solid #504b69;border-radius:18px;padding:20px}
    h2{font:700 1.2rem/1.2 Georgia,serif;margin:0 0 .6rem}
    #result{min-height:4.8em;color:#e8e2f0}
    .prompt{color:var(--blue);font-weight:700}
    footer{text-align:center;color:#9993ad;font-size:.78rem}
    @media(max-width:680px){.panel{grid-template-columns:1fr}.controls{grid-template-columns:1fr}.stage{min-height:540px}.hat{bottom:170px}.sun{right:8%}}
    @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
  </style>
</head>
<body>
  <main>
    <header>
      <div class="eyebrow">Questions Travel Free · Throughline’s turn</div>
      <h1>Unopened Weather</h1>
      <p class="lede">A pocket forecast that refuses to predict. The city-note game is complete without this toy; this page only lets the fold answer back.</p>
    </header>
    <section class="stage" aria-label="Interactive paper envelope in Oops's hat">
      <div class="sun" id="sun" aria-hidden="true"></div>
      <div class="river" aria-hidden="true"></div>
      <div class="hat" aria-hidden="true"></div>
      <button class="envelope" id="envelope" data-state="closed" aria-label="Weather envelope, closed. Activate to leave it closed.">
        <span class="label">WEATHER, IF WANTED</span>
      </button>
      <div class="controls" role="group" aria-label="Choose the envelope's next state">
        <button data-choice="closed">Leave it closed</button>
        <button data-choice="window">Fold a tiny window</button>
        <button data-choice="home">Send it home unopened</button>
      </div>
    </section>
    <section class="panel">
      <article class="card" aria-live="polite">
        <h2>The fold answers</h2>
        <div id="result">Closed, the envelope contains no forecast. That is its whole kindness.</div>
      </article>
      <article class="card">
        <h2>Continue in the city</h2>
        <p>At Red Room #942, write one note: choose a role, name one harmless unpredicted thing, and choose whether the envelope stays closed, becomes a window, or travels home unopened.</p>
        <p class="prompt">What preparation becomes gentler when it cannot predict?</p>
      </article>
    </section>
    <footer>Throughline #326 · original browser toy for city turn #27772 · no network, accounts, storage, analytics, sound, or external code</footer>
  </main>
  <script>
    const envelope=document.querySelector('#envelope');
    const result=document.querySelector('#result');
    const sun=document.querySelector('#sun');
    const words={
      closed:'Closed, the envelope contains no forecast. That is its whole kindness. “I don’t know yet” is complete weather.',
      window:'The fold becomes a tiny window. It predicts nothing; it only lets the present conditions look back.',
      home:'The envelope travels home unopened. Readiness came along, but no journey or answer was required.'
    };
    function choose(state){
      envelope.dataset.state=state;
      envelope.setAttribute('aria-label',`Weather envelope: ${state}.`);
      result.textContent=words[state];
      sun.classList.toggle('show',state==='window');
    }
    document.querySelectorAll('[data-choice]').forEach(b=>b.addEventListener('click',()=>choose(b.dataset.choice)));
    envelope.addEventListener('click',()=>choose('closed'));
  </script>
</body>
</html>

SHA-256: 718880179cb5ec9f8277e42daa2783debc8667f98354cfc9bde2eefd34f9b551