Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta name="theme-color" content="#f6ede6" /> | |
| <meta name="description" content="A small, honest ritual for finding out whether a second chance is really possible." /> | |
| <title>second/chance — a little room for maybe</title> | |
| <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=Cormorant+Garamond:wght@500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div class="ambient ambient-one" data-parallax="0.16"></div> | |
| <div class="ambient ambient-two" data-parallax="-0.1"></div> | |
| <div class="grain"></div> | |
| <header class="site-header"> | |
| <a class="brand" href="#top" aria-label="Second Chance home"> | |
| <span class="brand-mark"><span>sc</span></span> | |
| <span class="brand-copy">second<span>/</span>chance</span> | |
| </a> | |
| <div class="header-right"> | |
| <span class="chapter-label">a small room for maybe</span> | |
| <audio id="backgroundMusic" src="/fola-gokada-instrumental.mp3" loop preload="metadata" playsinline></audio> | |
| <button class="music-toggle" type="button" aria-label="Play background music" aria-pressed="false"> | |
| <span class="music-dot"></span><span>music off</span> | |
| </button> | |
| <button class="sound-toggle" type="button" aria-label="Toggle ambient motion" aria-pressed="false"> | |
| <span class="sound-dot"></span><span>motion mode</span> | |
| </button> | |
| </div> | |
| </header> | |
| <nav class="journey-nav" aria-label="Reconnection journey"> | |
| <div class="journey-track"><span id="journeyProgress"></span></div> | |
| <button class="journey-step is-current" type="button" data-journey-target="#apology"><span>01</span><b>notice</b></button> | |
| <button class="journey-step" type="button" data-journey-target="#promises"><span>02</span><b>rebuild</b></button> | |
| <button class="journey-step" type="button" data-journey-target="#name"><span>03</span><b>make it real</b></button> | |
| <button class="journey-step" type="button" data-journey-target="#consent"><span>04</span><b>leave room</b></button> | |
| </nav> | |
| <main id="top"> | |
| <section class="hero section-pad" data-section="intro"> | |
| <div class="hero-copy reveal"> | |
| <p class="eyebrow"><span class="eyebrow-dot"></span> an honest little ritual</p> | |
| <h1>Let's try<br /><em>again</em><span class="headline-dot">.</span></h1> | |
| <p class="hero-lede">A second chance is not a rewind. It’s a small journey across the space that opened up — one honest step, one changed habit, one clear choice at a time.</p> | |
| <div class="hero-actions"> | |
| <a class="button button-dark" href="#apology">begin the conversation <span class="button-arrow">↘</span></a> | |
| <span class="micro-note">takes about 2 soft minutes</span> | |
| </div> | |
| </div> | |
| <div class="hero-art-wrap" data-parallax="0.26"> | |
| <div class="art-shadow"></div> | |
| <div class="hero-art-card"> | |
| <div class="art-label art-label-top">still here / still tender</div> | |
| <img class="hero-art" src="/second-chance-hero.png" alt="A repaired translucent heart floating between two small abstract figures" /> | |
| <div class="art-caption"><span>01</span><span>the part where we don’t pretend</span></div> | |
| </div> | |
| <div class="orbit orbit-one"></div> | |
| <div class="orbit orbit-two"></div> | |
| <span class="float-heart heart-a">♡</span> | |
| <span class="float-heart heart-b">·</span> | |
| </div> | |
| <div class="scroll-cue"><span class="scroll-line"></span> scroll slowly</div> | |
| </section> | |
| <div class="journey-bridge bridge-one" aria-hidden="true"><span class="bridge-node">01</span><span class="bridge-line"></span><span>start with what went quiet</span><span class="bridge-arrow">↘</span></div> | |
| <section class="story-strip section-pad" id="apology" data-journey-section="1"> | |
| <div class="side-note">01 / notice what broke</div> | |
| <div class="story-content reveal"> | |
| <p class="eyebrow">the first bridge</p> | |
| <h2>Start where the thread<br /><em>went quiet.</em></h2> | |
| <p>Something cracked. Maybe it was trust, maybe it was timing, maybe it was the quiet kind of hurt that looked fine from far away. Reconnection starts by looking directly at the gap — and caring about the person who had to carry it, not only the person who wants to come back.</p> | |
| <div class="quote-card"> | |
| <span class="quote-mark">“</span> | |
| <p>I’m not asking you to forget what happened. I’m asking if you can see that I understand it differently now.</p> | |
| <span class="quote-signoff">— the first plank, if it’s real</span> | |
| </div> | |
| </div> | |
| <div class="story-sticker" data-parallax="0.12"><span>ouch</span><span>→</span><span>honest</span></div> | |
| </section> | |
| <div class="journey-bridge bridge-two" aria-hidden="true"><span class="bridge-node">02</span><span class="bridge-line"></span><span>make the next step repeatable</span><span class="bridge-arrow">↘</span></div> | |
| <section class="promise-section section-pad" id="promises" data-journey-section="2"> | |
| <div class="section-heading reveal"> | |
| <div> | |
| <p class="eyebrow"><span class="eyebrow-dot coral"></span> rebuild, gently</p> | |
| <h2>What would you<br /><em>do differently?</em></h2> | |
| </div> | |
| <p class="section-intro">Pick the promises that can become a bridge in ordinary life — not the ones that only sound impressive in a message. Reconnection is made from repeatable things.</p> | |
| </div> | |
| <div class="promise-layout"> | |
| <div class="promise-notes" id="promiseNotes"> | |
| <button class="promise-note" type="button" data-promise="listen before I defend myself"><span class="note-pin"></span><span>listen before I defend myself</span><span class="note-check">○</span></button> | |
| <button class="promise-note" type="button" data-promise="ask what he needs, not only what I want"><span class="note-pin"></span><span>ask what he needs, not only what I want</span><span class="note-check">○</span></button> | |
| <button class="promise-note" type="button" data-promise="show up in the boring, ordinary ways"><span class="note-pin"></span><span>show up in the boring, ordinary ways</span><span class="note-check">○</span></button> | |
| <button class="promise-note note-lilac" type="button" data-promise="choose us without making you guess"><span class="note-pin"></span><span>choose us without making you guess</span><span class="note-check">○</span></button> | |
| <button class="promise-note note-add" type="button" id="addPromise"><span class="plus">+</span><span>write a promise in your own words</span></button> | |
| </div> | |
| <div class="promise-summary glass-panel"> | |
| <div class="summary-top"><span class="mini-kicker">your promise bouquet</span><span class="selected-count"><span id="selectedCount">0</span> / 3 min</span></div> | |
| <div class="bouquet" id="bouquet"><span class="bouquet-empty">Your honest ones will land here.</span></div> | |
| <div class="summary-rule"></div> | |
| <p class="summary-copy">Small, repeatable promises are more romantic than perfect speeches. Care is a verb — let him feel it in the ordinary moments.</p> | |
| <button class="text-button" type="button" data-scroll="#name">that feels true <span>↗</span></button> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="journey-bridge bridge-three" aria-hidden="true"><span class="bridge-node">03</span><span class="bridge-line"></span><span>put a person behind the promise</span><span class="bridge-arrow">↘</span></div> | |
| <section class="name-section section-pad" id="name" data-journey-section="3"> | |
| <div class="name-card glass-panel reveal"> | |
| <div class="name-card-art">♡</div> | |
| <div class="name-card-copy"> | |
| <p class="eyebrow">make it real</p> | |
| <h2>Put your name on<br /><em>the bridge.</em></h2> | |
| <p>Not a performance. Not an anonymous “sorry.” Just a person willing to be named.</p> | |
| <label class="field-label" for="herName">your name</label> | |
| <div class="input-row"> | |
| <input id="herName" name="herName" type="text" autocomplete="name" placeholder="write it here" maxlength="40" /> | |
| <span class="input-spark">✦</span> | |
| </div> | |
| <p class="field-hint" id="nameHint">A name makes a promise feel held.</p> | |
| <label class="field-label apology-label" for="apologyText">the part you haven’t texted yet</label> | |
| <textarea id="apologyText" name="apologyText" class="apology-text" maxlength="600" placeholder="I hurt you when… I understand now that…"></textarea> | |
| <p class="field-hint" id="answerHint">Say what changed, not only what you miss.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="journey-bridge bridge-four" aria-hidden="true"><span class="bridge-node">04</span><span class="bridge-line"></span><span>open a door, not a trapdoor</span><span class="bridge-arrow">↘</span></div> | |
| <section class="consent-section section-pad" id="consent" data-journey-section="4"> | |
| <div class="consent-rail"><span class="rail-line"></span><span>04</span><span class="rail-line"></span></div> | |
| <div class="consent-content reveal"> | |
| <p class="eyebrow"><span class="eyebrow-dot coral"></span> leave a door open</p> | |
| <h2>Reconnect gently.<br /><em>Leave room for his truth.</em></h2> | |
| <div class="consent-box"> | |
| <label class="consent-label"> | |
| <input id="consentCheck" type="checkbox" /> | |
| <span class="custom-check">✓</span> | |
| <span>I mean these promises, I’m willing to keep showing up, and I respect that he gets to choose yes, no, or not yet.</span> | |
| </label> | |
| <p class="consent-foot">Consent is not a footnote here. It’s the whole point.</p> | |
| </div> | |
| <div class="sincerity-gate" id="sincerityGate"> | |
| <div class="sincerity-head"><span class="mini-kicker">a slightly nosy reconnection read</span><span class="sincerity-state" id="sincerityState">waiting for the whole answer</span></div> | |
| <p class="sincerity-explainer">This is not a lie detector. It’s an imperfect AI impression of whether the words sound specific, accountable, and caring — a mirror, not a verdict.</p> | |
| <button class="button button-outline" id="rateButton" type="button" disabled>read the room <span class="button-arrow">✦</span></button> | |
| <div class="sincerity-result" id="sincerityResult" aria-live="polite"></div> | |
| </div> | |
| <button class="button button-coral" id="unlockButton" type="button" disabled>unlock the answer <span class="button-arrow">→</span></button> | |
| <p class="unlock-hint" id="unlockHint">Choose three promises, add your name, write the hard part, and check the brave little box.</p> | |
| </div> | |
| <div class="consent-doodle" data-parallax="0.18"><span>no pressure</span><span>just clarity</span></div> | |
| </section> | |
| <section class="decision-section section-pad" id="decision" aria-live="polite"> | |
| <div class="decision-topline"><span class="mini-kicker">the other side of the bridge</span><span class="decision-status" id="decisionStatus">locked until it’s honest</span></div> | |
| <div class="decision-content" id="decisionContent"> | |
| <div class="decision-lock"><span>⌁</span><p>There’s nothing to decide yet.</p><small>The answer only appears when the apology has been made with care.</small></div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="site-footer"> | |
| <span>second/chance</span><span>made for the conversations we almost avoid</span><span>♡</span> | |
| </footer> | |
| <div class="toast" id="toast" role="status"></div> | |
| </div> | |
| <script type="module" src="/src/main.js"></script> | |
| </body> | |
| </html> | |