Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> | |
| <meta name="theme-color" content="#200d20" /> | |
| <meta name="description" content="A warm virtual hug, delivered to Pookie." /> | |
| <title>A Hug for Pookie</title> | |
| <link rel="stylesheet" href="/styles.css" /> | |
| </head> | |
| <body> | |
| <main class="experience" id="experience"> | |
| <div class="ambient ambient-one" aria-hidden="true"></div> | |
| <div class="ambient ambient-two" aria-hidden="true"></div> | |
| <div class="stars" aria-hidden="true"></div> | |
| <header class="topbar"> | |
| <div class="mini-mark" aria-label="A little heart for Pookie"> | |
| <span class="mini-mark-heart">♥</span> | |
| <span class="mini-mark-text">for Pookie</span> | |
| </div> | |
| <div class="topbar-note" id="topbarNote">a little something warm</div> | |
| </header> | |
| <section class="screen screen-intro is-active" id="introScreen" aria-labelledby="introTitle"> | |
| <div class="intro-copy"> | |
| <p class="eyebrow"><span class="eyebrow-line"></span> delivered with love <span class="eyebrow-line"></span></p> | |
| <h1 id="introTitle">Hey, Pookie<span class="title-dot">.</span></h1> | |
| <p class="lede">I couldn’t be right there to wrap my arms around you… so I made you the next best thing.</p> | |
| <button class="primary-button" id="openButton" type="button"> | |
| <span>Open your hug</span> | |
| <span class="button-arrow" aria-hidden="true">↗</span> | |
| </button> | |
| <p class="quiet-note">No music. No rush. Just a tiny moment for us.</p> | |
| </div> | |
| <div class="intro-orbit" aria-hidden="true"> | |
| <div class="orbit orbit-large"></div> | |
| <div class="orbit orbit-small"></div> | |
| <div class="orbit-heart">♥</div> | |
| <span class="orbit-spark spark-a">✦</span> | |
| <span class="orbit-spark spark-b">·</span> | |
| <span class="orbit-spark spark-c">✦</span> | |
| </div> | |
| </section> | |
| <section class="screen screen-hold" id="holdScreen" aria-labelledby="holdTitle" aria-hidden="true"> | |
| <div class="hold-header"> | |
| <p class="eyebrow"><span class="eyebrow-line"></span> stay here a little <span class="eyebrow-line"></span></p> | |
| <h2 id="holdTitle">Come here, Pookie<span class="title-dot">.</span></h2> | |
| <p class="hold-instruction" id="holdInstruction">Press and hold the heart to feel how much I love you.</p> | |
| </div> | |
| <div class="hug-stage" id="hugStage"> | |
| <div class="hold-halo halo-back" aria-hidden="true"></div> | |
| <div class="hold-halo halo-front" aria-hidden="true"></div> | |
| <div class="hug-sparkles" aria-hidden="true"> | |
| <span class="hug-spark sparkle-1">✦</span> | |
| <span class="hug-spark sparkle-2">·</span> | |
| <span class="hug-spark sparkle-3">✦</span> | |
| <span class="hug-spark sparkle-4">·</span> | |
| <span class="hug-spark sparkle-5">✧</span> | |
| </div> | |
| <button class="heart-hold" id="heartHold" type="button" aria-label="Press and hold to receive your hug"> | |
| <span class="heart-progress" aria-hidden="true"></span> | |
| <span class="heart-core" aria-hidden="true">♥</span> | |
| <span class="heart-shine" aria-hidden="true"></span> | |
| </button> | |
| <div class="hold-meter" aria-hidden="true"><span id="holdMeterFill"></span></div> | |
| </div> | |
| <div class="hold-status" aria-live="polite"> | |
| <span class="status-pip"></span> | |
| <span id="holdStatusText">I’m right here</span> | |
| </div> | |
| <p class="hold-support">Keep holding · you can let go whenever you need</p> | |
| </section> | |
| <section class="screen screen-complete" id="completeScreen" aria-labelledby="completeTitle" aria-hidden="true"> | |
| <div class="complete-burst" aria-hidden="true"> | |
| <span class="burst-ring ring-one"></span> | |
| <span class="burst-ring ring-two"></span> | |
| <span class="burst-heart">♥</span> | |
| <span class="burst-star star-one">✦</span> | |
| <span class="burst-star star-two">✧</span> | |
| <span class="burst-star star-three">✦</span> | |
| </div> | |
| <div class="complete-copy"> | |
| <p class="eyebrow"><span class="eyebrow-line"></span> hug delivered <span class="eyebrow-line"></span></p> | |
| <h2 id="completeTitle">There you go,<br /><em>Pookie.</em></h2> | |
| <p class="complete-message" id="completeMessage">Hold onto this feeling for a minute. That was me, choosing you, from wherever I am.</p> | |
| </div> | |
| <div class="love-notes" aria-label="Little love notes"> | |
| <article class="love-note-card"> | |
| <span class="note-number">01</span> | |
| <p>You make ordinary days feel softer.</p> | |
| </article> | |
| <article class="love-note-card"> | |
| <span class="note-number">02</span> | |
| <p>My favorite place is wherever you are.</p> | |
| </article> | |
| <article class="love-note-card"> | |
| <span class="note-number">03</span> | |
| <p>I choose you in all the little ways.</p> | |
| </article> | |
| </div> | |
| <div class="complete-actions"> | |
| <button class="primary-button" id="replayButton" type="button"> | |
| <span>Receive it again</span> | |
| <span class="button-arrow" aria-hidden="true">↻</span> | |
| </button> | |
| <button class="letter-button" id="letterButton" type="button" aria-expanded="false"><span aria-hidden="true">✉</span> Open my letter</button> | |
| <button class="text-button" id="sendBackButton" type="button"><span aria-hidden="true">♡</span> Send a hug back</button> | |
| <p class="send-back-note" id="sendBackNote" aria-live="polite"></p> | |
| </div> | |
| <aside class="letter-panel" id="letterPanel" aria-labelledby="letterTitle" hidden> | |
| <button class="letter-close" id="letterClose" type="button" aria-label="Close letter">×</button> | |
| <p class="eyebrow"><span class="eyebrow-line"></span> just for you <span class="eyebrow-line"></span></p> | |
| <h3 id="letterTitle">A little note<br /><em>for Pookie.</em></h3> | |
| <div class="letter-body"> | |
| <p>My Pookie,</p> | |
| <p>I made you this because you deserve a little smile today—and because I like having an excuse to think about you.</p> | |
| <p>You’re pretty lovely, you know. I like your energy, your little ways, and how easy it is to have a good time with you.</p> | |
| <p>So here’s a tiny hug for whenever you need one. No pressure, no big speech—just me saying I’m happy you’re you.</p> | |
| <p class="letter-signoff">Thinking of you<br /><strong>♥</strong></p> | |
| </div> | |
| </aside> | |
| </section> | |
| <footer class="footer-note" id="footerNote">made for you, always</footer> | |
| </main> | |
| <script src="/script.js" defer></script> | |
| </body> | |
| </html> | |