static/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="robots" content="noindex">
<title>Second Thoughts</title>
<meta name="description" content="A confidential space for exploring the complicated feelings that come with second thoughts, and practicing how to put them into words.">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="shell">

  <header class="masthead">
    <div class="masthead__glow" aria-hidden="true"></div>
    <div class="masthead__eyebrow">
      <span>Just between us</span>
    </div>
    <h1>Second Thoughts</h1>
    <p class="masthead__sub">For exploring the complicated feelings that come with second thoughts — and practicing how to put them into words.</p>
  </header>

  <div class="scroll" id="scroll">

    <div class="card">
      <p class="card__lead">Some things are hard to say out loud.</p>
      <p>Especially to the people closest to you. This is a quiet place to say it first — to yourself, really, with an AI listening.</p>
      <p>It won't argue with you, lecture you, or hand you a verdict. You don't need to have it figured out, and you don't need to end up anywhere in particular. Take whatever time you need.</p>
      <p class="card__small">No account. This site keeps no record of what you say.</p>
      <button class="text-link" type="button" data-open="about">About this space →</button>
    </div>


    <details class="disclosure">
      <summary class="disclosure__summary">
        <span>Why this might help</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </summary>
      <div class="disclosure__body">
        <p>Shame tends to grow in secret. It feeds on silence and on feeling judged. It tends to ease when someone listens and understands. That's most of what happens here. It isn't a trick to make the feeling go away. It's a chance to say it out loud to something that won't flinch, judge, or pile on.</p>
        <p>Two different things often get lumped together as "shame":</p>
        <ul>
          <li><strong>"I did something that doesn't fit who I want to be."</strong> You can live with this one. You can learn from it, choose differently, and repair things.</li>
          <li><strong>"Deep down, I'm a bad person."</strong> This one mostly makes people freeze up or get defensive. This space won't agree with it, and won't argue you out of it either.</li>
        </ul>
        <p>The goal isn't to erase the hard feeling. It's to keep the first kind from turning into the second.</p>
      </div>
    </details>

    <details class="disclosure">
      <summary class="disclosure__summary">
        <span>On telling people in your life</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </summary>
      <div class="disclosure__body">
        <p>Telling the people in your life can be the hardest part. It can strain a marriage, a friendship, or a family. If you're not ready to tell anyone yet, you're not avoiding it. You're being careful with something that matters.</p>
        <p>It can help to think of it as a set of steps, not all or nothing:</p>
        <ol>
          <li><strong>Privately</strong> — writing it down, or thinking it through alone</li>
          <li><strong>Here</strong> — saying it out loud to something that won't use it against you</li>
          <li><strong>One person you trust most</strong> — whoever that is for you</li>
          <li><strong>More people</strong> — on your own time, if and when it makes sense</li>
        </ol>
        <p>Talking here counts. It's a real first step, not a lesser one. Lots of people stay on step 1 or 2 for a long time, and some never go further. There's no schedule.</p>
        <p class="afterthought">And if it ever helps to hear from others who've been here, some have shared their stories with <a href="https://leavingmaga.org/they-left-maga/" target="_blank" rel="noopener noreferrer">Leaving MAGA</a>, a nonprofit that also runs a <a href="https://leavingmaga.org/support-group/" target="_blank" rel="noopener noreferrer">support group</a>.</p>
      </div>
    </details>

    <div class="section-label" id="starters-label">What brought you here today?</div>

    <div class="starters" id="starters" role="group" aria-labelledby="starters-label">
      <button class="starter" type="button" data-send="I don't even know where to start, I just need to get this out.">I just want to vent</button>
      <button class="starter" type="button" data-send="I keep trying to figure out why I actually voted the way I did.">Understand my own reasoning</button>
      <button class="starter" type="button" data-send="I'm not even sure this is regret, exactly — I just feel unsettled.">Not sure how I feel</button>
      <button class="starter" type="button" data-send="I need to talk about this with someone who isn't going to debate me on it.">Don't want to be argued with</button>
    </div>

    <div class="optional" id="optional" role="group" aria-labelledby="optional-label">
      <p class="optional__label" id="optional-label">
        <span class="long">Ways to use this space — tap one, or just start typing. Each one adds to this same conversation.</span>
        <span class="short">Add to this chat</span>
      </p>

      <button class="scripture" type="button" data-send="I'd like to fact-check something — and learn how to check things like it for myself." title="Sends a message asking to fact-check something. The chat carries on from there.">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.5" y2="16.5"></line></svg>
        <span class="long"><strong>Fact check</strong><small>Look at a claim together and learn to check things yourself.</small></span><span class="short">Fact check</span>
      </button>

      <button class="scripture scripture--practice" type="button" data-action="practice-intro" title="Opens a guided, step-by-step practice. You can stop at any point and go back to talking.">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z"></path></svg>
        <span class="long"><strong>Practice saying it to someone</strong><small>A guided run-through, one small step at a time. You can stop any time.</small></span><span class="short">Practice</span>
      </button>

      <button class="scripture" type="button" data-send="Is there anything from Scripture that speaks to what I've shared so far?" title="Sends a message asking for a reflection from Scripture. The chat carries on from there.">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 4c-2 0-3.5 1-4 2-0.5-1-2-2-4-2-2.5 0-4.5 2-4.5 4.5C3.5 13 12 20 12 20s8.5-7 8.5-11.5C20.5 6 18.5 4 16 4z"></path></svg>
        <span class="long"><strong>Scripture</strong><small>If you follow Jesus and want a reflection from the Bible.</small></span><span class="short">Scripture</span>
      </button>
    </div>

    <div class="path" id="path" hidden>
      <ol class="path__steps" aria-label="Practice steps">
        <li data-step="1"><span class="path__dot"></span><span class="path__label">Who</span></li>
        <li data-step="2"><span class="path__dot"></span><span class="path__label">Say it</span></li>
        <li data-step="3"><span class="path__dot"></span><span class="path__label">Notice</span></li>
        <li data-step="4"><span class="path__dot"></span><span class="path__label">Steady</span></li>
        <li data-step="5"><span class="path__dot"></span><span class="path__label">Hear back</span></li>
        <li data-step="6"><span class="path__dot"></span><span class="path__label">Keep</span></li>
      </ol>
      <button class="path__stop" type="button" data-action="practice-stop">Stop practicing — that counts too</button>
    </div>

    <p class="hint" id="hint">Or skip these and just type below. That works too.</p>

    <div class="thread" id="thread" role="log" aria-live="polite" aria-label="Conversation"></div>
  </div>

  <form class="composer" id="composer">
    <label class="visually-hidden" for="msg">Message</label>
    <textarea id="msg" rows="1" placeholder="Type how you're feeling..." autocomplete="off"></textarea>
    <button class="send" id="send" type="submit" aria-label="Send message">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
    </button>
  </form>

  <p class="footnote">
    An AI support tool, not a therapist or counselor. If you're in crisis, call or text
    <a href="tel:988">988</a> (US) anytime. · <button class="text-link text-link--quiet" type="button" data-open="about">About this space</button>
  </p>

</main>

<template id="practice-intro">
  <div class="pcard">
    <p class="pcard__title">Practice saying it to someone</p>
    <p>A way to try the words out loud, here first, and find out you can get through saying them. Nothing is sent to anyone, and you never have to say it for real.</p>
    <ol class="pcard__steps">
      <li><strong>Who</strong> — who you have in mind, and whether it's safe to tell them</li>
      <li><strong>Say it</strong> — your way, however rough</li>
      <li><strong>Notice</strong> — what comes up while you say it</li>
      <li><strong>Steady</strong> — a moment to settle</li>
      <li><strong>Hear back</strong> — only if you want: imagining their reply</li>
      <li><strong>Keep</strong> — what you want to take with you</li>
    </ol>
    <p class="pcard__note">Skip, repeat, or stop at any point. Stopping partway counts — there's no score, and nothing to finish.</p>
    <button class="pcard__begin" type="button" data-action="practice-begin">Begin when you're ready</button>
  </div>
</template>

<template id="practice-done">
  <div class="pcard pcard--done">
    <p class="pcard__title">You practiced.</p>
    <p>You found some words and stayed with what came up. That's the whole thing — whatever you do next, or don't, is yours to decide.</p>
    <div class="pcard__draft" hidden>
      <p class="pcard__label">The words you tried</p>
      <blockquote class="pcard__quote"></blockquote>
      <button class="text-link" type="button" data-action="copy-draft">Copy them</button>
    </div>
    <p class="pcard__note">You can practice again anytime, with the same person or someone else. And if you ever want to hear from people who've said it for real, <a href="https://leavingmaga.org/they-left-maga/" target="_blank" rel="noopener noreferrer">Leaving MAGA</a> shares stories and runs a <a href="https://leavingmaga.org/support-group/" target="_blank" rel="noopener noreferrer">support group</a>.</p>
  </div>
</template>

<template id="breathe">
  <div class="breathe" aria-hidden="true">
    <div class="breathe__circle"></div>
    <p class="breathe__cue">Breathe with this, if it helps</p>
  </div>
</template>

<dialog class="sheet" id="about" aria-labelledby="about-title">
  <div class="sheet__inner">
    <div class="sheet__head">
      <h2 id="about-title">About this space</h2>
      <button class="sheet__close" type="button" data-close aria-label="Close">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg>
      </button>
    </div>

    <p class="sheet__lede">Second thoughts can be some of the loneliest feelings there are — partly because they so often come with the urge to keep quiet about them. This space exists for the moment before you're ready to say it to anyone else.</p>

    <h3>What happens here</h3>
    <p>You talk; it listens. You get to say the whole thing, all the way through, before anything else happens. It'll reflect back what it hears and ask a question now and then — but it's not trying to get you anywhere.</p>
    <p>If you want more, you can ask for it: help thinking something through, practicing how you'd tell a spouse or a parent, or learning to check information for yourself.</p>

    <h3>The buttons</h3>
    <p>The buttons on the main screen are optional. You never need one.</p>
    <p><strong>Fact check</strong> and <strong>Scripture</strong> just send a request into this same conversation, as if you'd typed it. The chat carries on from there, with everything you've said so far.</p>
    <p><strong>Practice</strong> starts a guided run-through, one small step at a time. A path of steps shows where you are. You can stop at any point and go back to talking.</p>

    <h3>What it won't do</h3>
    <p>Argue. Moralize. Call you — or anyone you love — brainwashed, or worse. Push you toward a conclusion. Diagnose you. It isn't a therapist, and it won't pretend to be.</p>

    <h3>Why it's built this way</h3>
    <p>Shame grows in silence and loosens when it's met with understanding. There's a real difference between "I did something I see differently now" and "I'm a bad person" — the first is something you can live with and grow from; the second just makes people freeze. This space is here to help you hold the first without sliding into the second.</p>
    <p>It's meant to be a first step toward people, not a replacement for them. If a day comes when you want to talk to someone real, that's the point.</p>

    <h3>Being honest about what this is</h3>
    <ul>
      <li><strong>It's an AI</strong> (Claude, made by Anthropic). It can be wrong and sound sure while it is — so check anything factual it tells you, the same way you'd check anything else.</li>
      <li><strong>This site stores nothing.</strong> No accounts, no database, no tracking. Your conversation lives in this browser tab and is gone when you close it.</li>
      <li><strong>Your words do leave your device:</strong> each message is sent to Anthropic to write a reply, under their API data policies. It's best not to type your full name, address, or anything else that identifies you.</li>
    </ul>

    <h3>If you want to look further</h3>
    <p>For checking claims, several independent fact-checkers are worth comparing rather than trusting any one alone:
      <a href="https://apnews.com/ap-fact-check" target="_blank" rel="noopener noreferrer">AP</a>,
      <a href="https://www.reuters.com/fact-check/" target="_blank" rel="noopener noreferrer">Reuters</a>,
      <a href="https://www.factcheck.org/" target="_blank" rel="noopener noreferrer">FactCheck.org</a>,
      <a href="https://www.politifact.com/" target="_blank" rel="noopener noreferrer">PolitiFact</a>, and
      <a href="https://www.allsides.com/unbiased-balanced-news" target="_blank" rel="noopener noreferrer">AllSides</a>.</p>
    <p>And if it helps to hear from others who've been through something like this, <a href="https://leavingmaga.org/they-left-maga/" target="_blank" rel="noopener noreferrer">Leaving MAGA</a> collects people's stories and runs a support group. It's independent of this space.</p>

    <p class="sheet__crisis">If you're in crisis or thinking about hurting yourself, call or text <a href="tel:988">988</a> (US) — any time, day or night.</p>
  </div>
</dialog>
<script src="app.js"></script>
</body>
</html>