HTMLify

baby shower final
Views: 123 | Author: amar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Amar's Baby Shower Invitation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="You're invited to Amar's Baby Shower — 15 July. Find the secret entrance.">
<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=Beau+Rivage&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<style>
  :root{
    --bg-1:#eae3d4;
    --bg-2:#ddd0af;
    --cream:#faf6ec;
    --cream-soft:#f2e9d4;
    --tan:#e8dcc0;
    --tan-deep:#d8c69c;
    --rose:#96654c;
    --rose-soft:#cf9f89;
    --brown-deep:#3c2c1f;
    --brown:#5c4632;
    --brown-mid:#75634e;
    --brown-muted:#9c8f7c;
    --olive:#7c6339;
    --olive-deep:#63502c;
    --border:#e2d5b5;
    --white:#fffdf8;
    --boy:#7c98ad;
    --girl:#c98fa0;
    --shadow-lg: 0 40px 70px -35px rgba(60,44,31,.45);
    --shadow-sm: 0 14px 28px -18px rgba(60,44,31,.4);
    --shadow-modal: 0 50px 90px -30px rgba(35,25,16,.55);
    --radius-lg: 30px;
    --radius-md: 20px;
    --radius-sm: 12px;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }

  body{
    font-family:'EB Garamond', Georgia, serif;
    color:var(--brown-mid);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2.5rem 1.25rem;
    background:
      radial-gradient(circle at 15% 10%, rgba(255,255,255,.5), transparent 45%),
      linear-gradient(135deg, var(--bg-1), var(--bg-2) 60%, var(--bg-1));
    background-size:220% 220%;
    background-position:0% 0%;
    position:relative;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: no-preference){
    body{ animation: driftBg 22s ease-in-out infinite alternate; }
  }
  @keyframes driftBg{
    from{ background-position:0% 0%; }
    to{ background-position:100% 60%; }
  }

  [hidden]{ display:none !important; }

  .noscript-note{
    max-width:640px;
    margin:0 auto 1.5rem;
    padding:1rem 1.25rem;
    background:var(--cream);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--brown);
    text-align:center;
  }

  /* ---------- Floating woodland particles ---------- */
  .particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:1;
  }
  .particle{
    position:absolute;
    top:-10%;
    font-size:1.4rem;
    opacity:.55;
    will-change:transform;
    animation-name:floatDown;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
  }
  @keyframes floatDown{
    0%{ transform:translate3d(0,-10vh,0) rotate(0deg); }
    50%{ transform:translate3d(20px,55vh,0) rotate(180deg); }
    100%{ transform:translate3d(-15px,120vh,0) rotate(360deg); }
  }

  .stage{
    width:100%;
    max-width:1080px;
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
    position:relative;
    z-index:2;
  }
  @media (min-width:900px){
    .stage{ grid-template-columns:1.4fr 1fr; align-items:start; }
  }

  /* ---------- Main card ---------- */
  .card{
    position:relative;
    background:var(--cream);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:clamp(2rem, 5vw, 3.5rem);
    text-align:center;
    overflow:hidden;
    transition:transform .4s ease;
  }

  .eyebrow{
    font-family:'Cormorant Garamond', serif;
    text-transform:uppercase;
    letter-spacing:.32em;
    font-size:.8rem;
    color:var(--rose);
    margin:0 0 .9rem;
  }

  .invite-title{ margin:0 0 1.1rem; line-height:1; }
  .script-line{
    display:block;
    font-family:'Beau Rivage', 'Segoe Script', cursive;
    font-weight:400;
    font-size:clamp(2.8rem, 7vw, 4.4rem);
    color:var(--brown);
  }
  .caps-line{
    display:block;
    font-family:'Cormorant Garamond', serif;
    text-transform:uppercase;
    letter-spacing:.28em;
    font-weight:600;
    font-size:clamp(1.9rem, 5vw, 2.9rem);
    color:var(--brown-deep);
    margin-top:.4rem;
  }

  .subtitle{
    max-width:32rem;
    margin:0 auto 1.6rem;
    font-size:1.15rem;
    line-height:1.6;
    color:var(--brown-mid);
  }
  .subtitle strong{ color:var(--brown-deep); font-weight:600; }

  .date-pill{
    display:inline-block;
    font-family:'Cormorant Garamond', serif;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:.85rem;
    color:var(--brown);
    background:var(--cream-soft);
    border:1px solid var(--border);
    padding:.55rem 1.4rem;
    border-radius:999px;
    margin-bottom:1.4rem;
  }

  .emoji-row{
    font-size:1.4rem;
    letter-spacing:.6rem;
    margin-bottom:2rem;
  }

  .btn-group{
    display:flex;
    flex-direction:column;
    gap:.85rem;
    max-width:24rem;
    margin:0 auto;
  }
  @media (min-width:520px){
    .btn-group{ flex-direction:row; max-width:none; justify-content:center; }
  }

  .btn{
    font-family:'Cormorant Garamond', serif;
    font-size:1.08rem;
    letter-spacing:.04em;
    padding:.9rem 1.9rem;
    border-radius:999px;
    cursor:pointer;
    border:1.5px solid transparent;
    transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    background:none;
  }
  .btn-primary{
    background:var(--olive);
    color:var(--white);
    box-shadow:var(--shadow-sm);
  }
  .btn-primary:hover{ background:var(--olive-deep); transform:translateY(-3px) scale(1.02); box-shadow:0 20px 34px -16px rgba(60,44,31,.5); }
  .btn-outline{
    background:transparent;
    color:var(--brown);
    border-color:var(--rose-soft);
  }
  .btn-outline:hover{ background:var(--cream-soft); transform:translateY(-3px) scale(1.02); border-color:var(--rose); }
  .btn:focus-visible, a:focus-visible, .dot:focus-visible, .swatch:focus-visible{
    outline:3px solid var(--rose);
    outline-offset:3px;
  }
  .btn:active{ transform:translateY(0) scale(.99); }
  .btn-large{
    font-size:1.3rem;
    padding:1.15rem 2.6rem;
  }

  .hint{
    margin:1.4rem 0 0;
    font-size:.92rem;
    font-style:italic;
    color:var(--brown-muted);
  }

  .section-title{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:clamp(1.6rem, 4vw, 2.2rem);
    color:var(--brown-deep);
    margin:0 0 1rem;
  }
  .section-title:focus{ outline:none; }

  .body-copy{
    max-width:30rem;
    margin:0 auto 1.1rem;
    line-height:1.65;
    font-size:1.08rem;
    color:var(--brown-mid);
  }
  .body-copy.italic{ font-style:italic; color:var(--brown-muted); }
  .body-copy:last-of-type{ margin-bottom:1.4rem; }

  .panel-section{ padding-top:.25rem; }
  @media (prefers-reduced-motion: no-preference){
    .panel-section.enter{ animation:fadeSlideIn .55s cubic-bezier(.22,.9,.32,1) both; }
  }
  @keyframes fadeSlideIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:none; }
  }

  /* ---------- Quiz ---------- */
  .dots{ display:flex; justify-content:center; gap:.5rem; margin-bottom:1.6rem; }
  .dot{ width:.5rem; height:.5rem; border-radius:999px; background:var(--border); transition:transform .2s ease, background .2s ease; }
  .dot.active{ background:var(--rose); transform:scale(1.3); }
  .dot.filled{ background:var(--olive); }

  .quiz-question{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:clamp(1.4rem, 3.6vw, 1.9rem);
    color:var(--brown-deep);
    max-width:30rem;
    margin:0 auto 1.6rem;
  }
  .quiz-question:focus{ outline:none; }

  .options{
    display:grid;
    gap:.75rem;
    max-width:26rem;
    margin:0 auto;
  }
  .btn-option{
    background:var(--white);
    border:1.5px solid var(--border);
    color:var(--brown);
    text-align:left;
    padding:.85rem 1.3rem;
    border-radius:var(--radius-sm);
  }
  .btn-option:hover{ border-color:var(--rose-soft); background:var(--cream-soft); transform:translateY(-1px); }

  /* ---------- Colour grid ---------- */
  .color-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(4.6rem, 1fr));
    gap:1.1rem .6rem;
    max-width:34rem;
    margin:0 auto;
  }
  .swatch{
    background:none;
    border:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.5rem;
    padding:.4rem;
    border-radius:var(--radius-sm);
    transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .2s ease;
  }
  .swatch:hover{ background:var(--cream-soft); transform:translateY(-2px) scale(1.05); }
  .swatch-circle{
    width:2.6rem;
    height:2.6rem;
    border-radius:50%;
    box-shadow:0 6px 14px -6px rgba(60,44,31,.5), inset 0 0 0 1px rgba(60,44,31,.12);
    border:2px solid var(--white);
  }
  .swatch-name{
    font-family:'Cormorant Garamond', serif;
    font-size:.78rem;
    letter-spacing:.02em;
    color:var(--brown-mid);
    text-align:center;
  }

  .badge{
    display:inline-block;
    font-family:'Cormorant Garamond', serif;
    letter-spacing:.05em;
    font-size:1.15rem;
    color:var(--brown-deep);
    background:var(--cream-soft);
    border:1px solid var(--border);
    padding:.6rem 1.4rem;
    border-radius:999px;
    margin-bottom:1.2rem;
  }

  /* ---------- Pass card (side) ---------- */
  .pass{
    position:relative;
    background:linear-gradient(160deg, var(--tan), var(--tan-deep));
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:clamp(1.6rem, 3vw, 2.2rem);
    transition:transform .4s ease;
  }
  .pass-corner{
    position:absolute;
    font-size:1.3rem;
    opacity:.85;
  }
  .pass-corner.tl{ top:.9rem; left:1rem; }
  .pass-corner.tr{ top:.9rem; right:1rem; }
  .pass-corner.bl{ bottom:.9rem; left:1.1rem; }
  .pass-corner.br{ bottom:.9rem; right:1.1rem; }

  .pass-inner{
    background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:1.8rem 1.5rem;
    text-align:center;
  }
  .pass-date{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:1.6rem;
    color:var(--brown-deep);
    margin:.2rem 0 .5rem;
  }
  .pass-sub{
    font-size:.95rem;
    color:var(--brown-muted);
    margin:0 0 1.1rem;
  }
  .pass-emojis{
    font-size:1.15rem;
    letter-spacing:.4rem;
    margin-bottom:1.3rem;
  }
  .pass-status-label{
    font-family:'Cormorant Garamond', serif;
    text-transform:uppercase;
    letter-spacing:.24em;
    font-size:.72rem;
    color:var(--rose);
    margin:0 0 .3rem;
  }
  .pass-status{
    font-size:.98rem;
    color:var(--brown);
    margin:0;
    min-height:1.4em;
    transition:color .3s ease;
  }
  .pass.stamped{ box-shadow:var(--shadow-lg), 0 0 0 3px var(--rose-soft) inset; }
  .pass.stamped .pass-status{ color:var(--olive-deep); font-weight:600; }

  @media (max-width:899px){
    .pass{ order:2; }
  }

  /* ---------- Modals ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
    background:rgba(45,33,22,.38);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    animation:overlayFade .28s ease forwards;
  }
  .modal-overlay.closing{ animation:overlayFadeOut .22s ease forwards; }
  @keyframes overlayFade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes overlayFadeOut{ from{ opacity:1; } to{ opacity:0; } }

  .modal{
    background:var(--cream);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-modal);
    padding:clamp(1.8rem, 5vw, 2.6rem);
    max-width:28rem;
    width:100%;
    text-align:center;
    transform:translateY(18px) scale(.96);
    opacity:0;
    animation:modalPop .32s cubic-bezier(.22,1.1,.36,1) forwards;
    animation-delay:.04s;
  }
  .modal-overlay.closing .modal{ animation:modalPopOut .2s ease forwards; }
  @keyframes modalPop{ to{ transform:translateY(0) scale(1); opacity:1; } }
  @keyframes modalPopOut{ from{ transform:translateY(0) scale(1); opacity:1; } to{ transform:translateY(10px) scale(.97); opacity:0; } }
  @media (prefers-reduced-motion: reduce){
    .modal-overlay, .modal{ animation:none !important; opacity:1 !important; transform:none !important; }
  }

  .modal-actions{
    display:flex;
    flex-direction:column;
    gap:.75rem;
    max-width:20rem;
    margin:1.4rem auto 0;
  }
  @media (min-width:420px){
    .modal-actions{ flex-direction:row; max-width:none; justify-content:center; }
  }

  /* ---------- Gender reveal screen ---------- */
  .reveal-screen{
    position:fixed;
    inset:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem 1.25rem;
    background:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 50%),
      linear-gradient(150deg, #efe6cf, #cdb98f 55%, #e9dcbb);
    background-size:200% 200%;
    opacity:0;
    animation:overlayFade .6s ease forwards;
    text-align:center;
    overflow:hidden;
  }
  @media (prefers-reduced-motion: no-preference){
    .reveal-screen{ animation:overlayFade .6s ease forwards, driftBg 20s ease-in-out infinite alternate; }
  }

  .reveal-inner{
    max-width:36rem;
    width:100%;
    position:relative;
    z-index:2;
  }
  .reveal-eyebrow{
    font-family:'Cormorant Garamond', serif;
    text-transform:uppercase;
    letter-spacing:.34em;
    font-size:.85rem;
    color:var(--rose);
    margin:0 0 1rem;
  }
  .reveal-title{
    font-family:'Beau Rivage', 'Segoe Script', cursive;
    font-size:clamp(2.6rem, 8vw, 4rem);
    color:var(--brown-deep);
    margin:0 0 1.2rem;
  }
  .reveal-copy{
    font-size:1.15rem;
    line-height:1.7;
    color:var(--brown);
    max-width:28rem;
    margin:0 auto 2rem;
  }

  .gift-box{
    font-size:clamp(4.5rem, 14vw, 7rem);
    margin:0 auto 1.5rem;
    display:inline-block;
    transform-origin:center bottom;
  }
  @media (prefers-reduced-motion: no-preference){
    .gift-box.wobble{ animation:wobble 1.1s ease-in-out infinite; }
    .gift-box.pop{ animation:popOpen .6s cubic-bezier(.22,1.2,.4,1) forwards; }
  }
  @keyframes wobble{
    0%,100%{ transform:rotate(-4deg); }
    50%{ transform:rotate(4deg); }
  }
  @keyframes popOpen{
    0%{ transform:scale(1) rotate(0); }
    40%{ transform:scale(1.35) rotate(-6deg); }
    70%{ transform:scale(.9) rotate(4deg); }
    100%{ transform:scale(1.15) rotate(0); }
  }

  .countdown{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:clamp(3.5rem, 14vw, 6rem);
    color:var(--brown-deep);
    min-height:1.2em;
  }
  @media (prefers-reduced-motion: no-preference){
    .countdown.tick{ animation:tick .55s cubic-bezier(.22,1.2,.4,1); }
  }
  @keyframes tick{
    0%{ transform:scale(.4); opacity:0; }
    60%{ transform:scale(1.15); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
  }

  .gender-result{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:clamp(2.2rem, 7vw, 3.4rem);
    margin:0 0 .6rem;
    opacity:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .gender-result.show{ animation:resultPop .7s cubic-bezier(.22,1.2,.4,1) forwards; }
  }
  @media (prefers-reduced-motion: reduce){
    .gender-result.show{ opacity:1; }
  }
  @keyframes resultPop{
    0%{ transform:scale(.5); opacity:0; }
    60%{ transform:scale(1.1); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
  }
  .gender-result.boy{ color:var(--boy); }
  .gender-result.girl{ color:var(--girl); }

  .reveal-sub{
    font-size:1.05rem;
    color:var(--brown-mid);
    max-width:24rem;
    margin:0 auto;
  }

  .reveal-stage-inner{ min-height:9rem; display:flex; flex-direction:column; align-items:center; justify-content:center; }
</style>
</head>
<body>

<noscript>
  <p class="noscript-note">This invitation is more fun with JavaScript switched on — but here's the important bit either way: you're invited to <strong>Amar's Baby Shower</strong> on <strong>15 July</strong>. 🎉</p>
</noscript>

<div class="particles" id="particles" aria-hidden="true"></div>

<div class="stage">

  <main class="card" id="main-card">

    <!-- Home -->
    <section id="home" class="panel-section">
      <p class="eyebrow">Woodland Invitation</p>
      <h1 class="invite-title">
        <span class="script-line">Amar's Baby</span>
        <span class="caps-line">Shower</span>
      </h1>
      <p class="subtitle"><strong>Welcome!</strong><br>Before entering the celebration, please choose one of the entrances below.</p>
      <p class="date-pill">15 July</p>
      <div class="emoji-row" aria-hidden="true">🦔 🦋 🌿 🍄 🦋</div>
      <div class="btn-group">
        <button type="button" id="btn-ticket" class="btn btn-primary">🎟️ Enter Baby Shower via Ticket</button>
        <button type="button" id="btn-private" class="btn btn-outline">🔒 Private Verification</button>
      </div>
      <p class="hint">Only one of these entrances actually works.</p>
      <p class="hint" id="welcome-back" hidden>🏅 Welcome back, Legend — feel free to walk the entrance again.</p>
    </section>

    <!-- Quiz -->
    <section id="quiz" class="panel-section" hidden>
      <div class="dots" id="quiz-dots" aria-hidden="true"></div>
      <div id="quiz-body"></div>
    </section>

    <!-- Success -->
    <section id="success" class="panel-section" hidden>
      <p class="eyebrow">Private Verification</p>
      <h2 class="section-title" tabindex="-1" data-focus-target>✅ Identity Confirmed</h2>
      <p class="body-copy">Verification complete. Welcome! You've successfully confirmed that you know Amar.</p>
      <p class="body-copy italic">You're now allowed to enter the celebration.</p>
      <div class="btn-group">
        <button type="button" id="btn-success-continue" class="btn btn-primary">Continue</button>
      </div>
    </section>

  </main>

  <!-- Decorative / status pass -->
  <aside class="pass" id="pass">
    <span class="pass-corner tl" aria-hidden="true">🌳</span>
    <span class="pass-corner tr" aria-hidden="true">🌳</span>
    <span class="pass-corner bl" aria-hidden="true">🍃</span>
    <span class="pass-corner br" aria-hidden="true">🍃</span>
    <div class="pass-inner">
      <p class="eyebrow">Special Invitation</p>
      <p class="pass-date">🦋 15 July</p>
      <p class="pass-sub">Elegant baby shower guest pass</p>
      <div class="pass-emojis" aria-hidden="true">🍄 🌸 🍃 🦋 🌸</div>
      <p class="pass-status-label">Status</p>
      <p class="pass-status" id="pass-status" aria-live="polite">🔒 Locked — find the right entrance</p>
    </div>
  </aside>

</div>

<!-- Ticket / Oopsie modal -->
<div class="modal-overlay" id="modal-oops" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="oops-title">
    <h2 class="section-title" id="oops-title" tabindex="-1">🚨</h2>
    <p class="body-copy">OOPSIE WOOPSIE!! Uwu We made a fucky wucky!! A wittle fucko boingo! The code monkeys at our headquarters are working VEWY HAWD to fix this!</p>
    <p class="body-copy">Ticket entry is temporarily unavailable.</p>
    <p class="body-copy">Please continue through Private Verification instead.</p>
    <div class="modal-actions">
      <button type="button" id="oops-continue" class="btn btn-primary">Continue</button>
      <button type="button" id="oops-close" class="btn btn-outline">Close</button>
    </div>
  </div>
</div>

<!-- Private verification intro modal -->
<div class="modal-overlay" id="modal-verify" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="verify-title">
    <h2 class="section-title" id="verify-title" tabindex="-1">🔒 Private Verification</h2>
    <p class="body-copy">This entrance is reserved for family, close friends, and people who genuinely know Amar.</p>
    <p class="body-copy">If you're one of them, completing this short verification should only take a moment.</p>
    <p class="body-copy">Once verified, you'll receive access to the celebration and the final surprise.</p>
    <div class="modal-actions">
      <button type="button" id="verify-continue" class="btn btn-primary">Continue</button>
      <button type="button" id="verify-goback" class="btn btn-outline">Go Back</button>
    </div>
  </div>
</div>

<!-- Wrong answer modal -->
<div class="modal-overlay" id="modal-fail" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="fail-title">
    <h2 class="section-title" id="fail-title" tabindex="-1">❌ Verification Failed</h2>
    <p class="body-copy">Hmm... that doesn't seem quite right.</p>
    <p class="body-copy">Maybe spend a little more time with Amar before trying again. 😆</p>
    <div class="modal-actions">
      <button type="button" id="fail-tryagain" class="btn btn-primary">Try Again</button>
    </div>
  </div>
</div>

<!-- Gender reveal (final destination) -->
<div class="reveal-screen" id="reveal-screen" hidden>
  <div class="reveal-inner">

    <div id="reveal-intro">
      <p class="reveal-eyebrow">One Last Surprise</p>
      <h2 class="reveal-title">🎁 One Last Surprise...</h2>
      <p class="reveal-copy">You've successfully entered Amar's Baby Shower.<br>Before the celebration begins...<br>it's time to discover the biggest surprise.</p>
      <button type="button" id="btn-reveal" class="btn btn-primary btn-large">🎀 Reveal the Baby's Gender</button>
    </div>

    <div id="reveal-stage" class="reveal-stage-inner" hidden>
      <div class="gift-box wobble" id="gift-box" aria-hidden="true">🎁</div>
      <div class="countdown" id="countdown" aria-live="polite"></div>
    </div>

    <div id="reveal-result" hidden>
      <p class="gender-result" id="gender-result"></p>
      <p class="reveal-sub">Thank you for celebrating —Amar</p>
    </div>

  </div>
</div>

<script>
(function(){
  "use strict";

  /* =========================================================
     HOST SETTINGS — edit these before sending the invitation
     ========================================================= */

  // Set to "boy" or "girl" to control the final reveal.
  var babyGender = "girl";

  // Every verification question lives in this one array, so it's
  // easy to swap in Amar's real answers before the party.
  var questions = [
    {
      type: "color",
      text: "What is Amar's favourite colour?",
      // Edit "correct" to match the real colour name below.
      correct: "Grey",
      wrongMsgs: ["Hmm, not quite Amar's colour.", "Try a different shade."]
    },
    {
      type: "text",
      text: "Which city does Amar live in?",
      options: ["Agra", "Delhi", "Bengaluru", "Pune"],
      // Index into options above (0 = first option)
      answer: 0,
      wrongMsgs: ["Wrong postcode entirely.", "Not even close, try again.", "The map disagrees."]
    },
    {
      type: "text",
      text: "When is Amar's birthday?",
      options: ["March", "February", "October", "December"],
      answer: 1,
      wrongMsgs: ["The calendar says otherwise.", "Nice guess, still wrong."]
    },
    {
      type: "text",
      text: "Which video game does Amar enjoy the most?",
      options: ["Clash royale", "Battle cats", "Minecraft", "Pokemon unite"],
      answer: 2,
      wrongMsgs: ["Not this one.", "Try again, friend."]
    },
    {
      type: "text",
      text: "Which artist amar listen to most?",
      options: ["Eminem", "Kendrick lamar", "Kanye west", "Jay-Z"],
      answer: 0,
      wrongMsgs: ["Nice guess, still wrong."]
    },
    {
      type: "text",
      text: "Which emoji does Amar use the most?",
      options: ["🙁", "❤️", "🙌", "😛"],
      answer: 3, 
      wrongMsgs: ["That's not the one."]
    }
  ];

  // 32 common colours for the colour-grid question.
  var colorOptions = [
    { name:"Red", hex:"#c0392b" },
    { name:"Blue", hex:"#2f6fa8" },
    { name:"Black", hex:"#22201d" },
    { name:"Sage Green", hex:"#7c9473" },
    { name:"Yellow", hex:"#e0b93c" },
    { name:"Orange", hex:"#d4763a" },
    { name:"Purple", hex:"#7a5a9c" },
    { name:"Pink", hex:"#d98fa6" },
    { name:"Brown", hex:"#6b4a34" },
    { name:"Grey", hex:"#8d8a83" },
    { name:"White", hex:"#f7f5ef" },
    { name:"Teal", hex:"#3f8f8a" },
    { name:"Navy", hex:"#2c3e5c" },
    { name:"Maroon", hex:"#6e2530" },
    { name:"Beige", hex:"#d9c7a3" },
    { name:"Cream", hex:"#f2e9d4" },
    { name:"Gold", hex:"#c9a13b" },
    { name:"Silver", hex:"#b7b5ad" },
    { name:"Turquoise", hex:"#3fa6a0" },
    { name:"Lavender", hex:"#a89bc7" },
    { name:"Coral", hex:"#e08469" },
    { name:"Mint", hex:"#8ec9ab" },
    { name:"Peach", hex:"#eab998" },
    { name:"Olive", hex:"#7c6339" },
    { name:"Burgundy", hex:"#5c2331" },
    { name:"Charcoal", hex:"#3a3733" },
    { name:"Ivory", hex:"#f7f1e2" },
    { name:"Indigo", hex:"#3f4a8c" },
    { name:"Magenta", hex:"#a5387f" },
    { name:"Cyan", hex:"#4fa9c9" },
    { name:"Lime", hex:"#9cc23f" },
    { name:"Rose", hex:"#c98098" }
  ];

  /* ========================================================= */

  var els = {
    home: document.getElementById('home'),
    quiz: document.getElementById('quiz'),
    success: document.getElementById('success'),
    quizBody: document.getElementById('quiz-body'),
    dots: document.getElementById('quiz-dots'),
    passCard: document.getElementById('pass'),
    passStatus: document.getElementById('pass-status'),
    welcomeBack: document.getElementById('welcome-back'),
    card: document.getElementById('main-card'),
    modalOops: document.getElementById('modal-oops'),
    modalVerify: document.getElementById('modal-verify'),
    modalFail: document.getElementById('modal-fail'),
    reveal: document.getElementById('reveal-screen'),
    revealIntro: document.getElementById('reveal-intro'),
    revealStage: document.getElementById('reveal-stage'),
    revealResult: document.getElementById('reveal-result'),
    giftBox: document.getElementById('gift-box'),
    countdown: document.getElementById('countdown'),
    genderResult: document.getElementById('gender-result')
  };

  var sections = [els.home, els.quiz, els.success];
  var currentQ = 0;
  var lastFocused = null;

  function reducedMotion(){
    return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  }

  function setPassStatus(text){
    if(els.passStatus){ els.passStatus.textContent = text; }
  }

  function playEnter(section){
    if(reducedMotion()) return;
    section.classList.remove('enter');
    void section.offsetWidth;
    section.classList.add('enter');
  }

  function showSection(target){
    sections.forEach(function(sec){
      sec.hidden = (sec !== target);
    });
    playEnter(target);
    var focusTarget = target.querySelector('[data-focus-target]');
    if(focusTarget){
      window.requestAnimationFrame(function(){ focusTarget.focus(); });
    }
  }

  /* ---------- Modal helpers ---------- */
  function openModal(overlay){
    lastFocused = document.activeElement;
    overlay.hidden = false;
    overlay.classList.remove('closing');
    var heading = overlay.querySelector('h2');
    if(heading){ window.requestAnimationFrame(function(){ heading.focus(); }); }
    document.addEventListener('keydown', trapEscape);
  }
  function closeModal(overlay, after){
    overlay.classList.add('closing');
    var done = false;
    function finish(){
      if(done) return;
      done = true;
      overlay.hidden = true;
      overlay.classList.remove('closing');
      document.removeEventListener('keydown', trapEscape);
      if(lastFocused && typeof lastFocused.focus === 'function'){ lastFocused.focus(); }
      if(typeof after === 'function'){ after(); }
    }
    if(reducedMotion()){ finish(); return; }
    overlay.addEventListener('animationend', finish, { once:true });
    window.setTimeout(finish, 350); // safety net
  }
  var activeOverlay = null;
  function trapEscape(e){
    if(e.key === 'Escape' && activeOverlay){ closeModal(activeOverlay); activeOverlay = null; }
  }

  function show(overlayEl){ activeOverlay = overlayEl; openModal(overlayEl); }
  function hide(overlayEl, after){ closeModal(overlayEl, after); activeOverlay = null; }

  /* ---------- Home actions ---------- */
  document.getElementById('btn-ticket').addEventListener('click', function(){
    setPassStatus('⚠️ Ticket scanner offline — try Private Verification');
    show(els.modalOops);
  });

  document.getElementById('oops-close').addEventListener('click', function(){ hide(els.modalOops); });
  document.getElementById('oops-continue').addEventListener('click', function(){
    hide(els.modalOops, function(){ show(els.modalVerify); });
  });

  document.getElementById('btn-private').addEventListener('click', function(){ show(els.modalVerify); });
  document.getElementById('verify-goback').addEventListener('click', function(){ hide(els.modalVerify); });
  document.getElementById('verify-continue').addEventListener('click', function(){
    hide(els.modalVerify, function(){ startQuiz(); });
  });

  document.getElementById('fail-tryagain').addEventListener('click', function(){ hide(els.modalFail); });

  /* ---------- Quiz ---------- */
  function startQuiz(){
    currentQ = 0;
    showSection(els.quiz);
    renderQuestion();
  }

  function renderDots(){
    if(!els.dots) return;
    els.dots.innerHTML = '';
    questions.forEach(function(_, i){
      var dot = document.createElement('span');
      var cls = 'dot';
      if(i < currentQ) cls += ' filled';
      else if(i === currentQ) cls += ' active';
      dot.className = cls;
      els.dots.appendChild(dot);
    });
  }

  function renderQuestion(){
    var q = questions[currentQ];
    els.quizBody.innerHTML = '';

    var eyebrow = document.createElement('p');
    eyebrow.className = 'eyebrow';
    eyebrow.textContent = 'Private Verification \u00b7 Question ' + (currentQ + 1) + ' of ' + questions.length;

    var heading = document.createElement('h2');
    heading.className = 'quiz-question';
    heading.tabIndex = -1;
    heading.setAttribute('data-focus-target', '');
    heading.textContent = q.text;

    els.quizBody.appendChild(eyebrow);
    els.quizBody.appendChild(heading);

    if(q.type === 'color'){
      var grid = document.createElement('div');
      grid.className = 'color-grid';
      colorOptions.forEach(function(c){
        var b = document.createElement('button');
        b.type = 'button';
        b.className = 'swatch';
        var circle = document.createElement('span');
        circle.className = 'swatch-circle';
        circle.style.background = c.hex;
        circle.setAttribute('aria-hidden', 'true');
        var label = document.createElement('span');
        label.className = 'swatch-name';
        label.textContent = c.name;
        b.appendChild(circle);
        b.appendChild(label);
        b.setAttribute('aria-label', c.name);
        b.addEventListener('click', function(){ handleAnswer(c.name === q.correct); });
        grid.appendChild(b);
      });
      els.quizBody.appendChild(grid);
    } else {
      var optsWrap = document.createElement('div');
      optsWrap.className = 'options';
      q.options.forEach(function(opt, i){
        var b = document.createElement('button');
        b.type = 'button';
        b.className = 'btn btn-option';
        b.textContent = opt;
        b.addEventListener('click', function(){ handleAnswer(i === q.answer); });
        optsWrap.appendChild(b);
      });
      els.quizBody.appendChild(optsWrap);
    }

    renderDots();
    setPassStatus('🔍 Verifying\u2026 question ' + (currentQ + 1) + ' of ' + questions.length);
    playEnter(els.quiz);
    window.requestAnimationFrame(function(){ heading.focus(); });
  }

  function handleAnswer(isCorrect){
    if(isCorrect){
      currentQ++;
      if(currentQ < questions.length){
        renderQuestion();
      } else {
        showSuccess();
      }
    } else {
      var q = questions[currentQ];
      var msgs = q.wrongMsgs || ["That's not quite right — try again."];
      var failBody = els.modalFail.querySelectorAll('.body-copy')[1];
      if(failBody){
        failBody.textContent = msgs[Math.floor(Math.random() * msgs.length)];
      }
      show(els.modalFail);
    }
  }

  function showSuccess(){
    showSection(els.success);
    setPassStatus('\u2713 Access granted \u2014 Certified Legend');
    if(els.passCard){ els.passCard.classList.add('stamped'); }
    try { window.localStorage.setItem('babyShowerLegend', 'true'); } catch(e) {}
    launchConfetti();
  }

  document.getElementById('btn-success-continue').addEventListener('click', function(){
    // hide the woodland card + pass, move to the final gender-reveal screen
    els.card.hidden = true;
    els.passCard.hidden = true;
    els.reveal.hidden = false;
  });

  /* ---------- Confetti ---------- */
  function launchConfetti(){
    if(reducedMotion()) return;
    if(typeof window.confetti === 'function'){ fireConfetti(); return; }
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js';
    script.onload = fireConfetti;
    script.onerror = function(){};
    document.head.appendChild(script);
  }

  function fireConfetti(colors){
    if(typeof window.confetti !== 'function') return;
    colors = colors || ['#7c6339', '#96654c', '#e8dcc0', '#3c2c1f', '#cf9f89'];
    window.confetti({ particleCount: 120, spread: 65, origin: { y: 0.6 }, colors: colors });
    window.setTimeout(function(){
      window.confetti({ particleCount: 60, spread: 100, origin: { y: 0.4 }, colors: colors });
    }, 300);
  }

  /* ---------- Gender reveal ---------- */
  document.getElementById('btn-reveal').addEventListener('click', function(){
    els.revealIntro.hidden = true;
    els.revealStage.hidden = false;
    runCountdown();
  });

  function runCountdown(){
    var count = 3;
    els.countdown.textContent = String(count);
    tickAnim();
    var interval = window.setInterval(function(){
      count--;
      if(count > 0){
        els.countdown.textContent = String(count);
        tickAnim();
      } else {
        window.clearInterval(interval);
        els.countdown.textContent = '';
        els.giftBox.classList.remove('wobble');
        els.giftBox.classList.add('pop');
        window.setTimeout(finishReveal, reducedMotion() ? 0 : 450);
      }
    }, 900);
  }

  function tickAnim(){
    if(reducedMotion()) return;
    els.countdown.classList.remove('tick');
    void els.countdown.offsetWidth;
    els.countdown.classList.add('tick');
  }

  function finishReveal(){
    els.revealStage.hidden = true;
    els.revealResult.hidden = false;
    var isBoy = babyGender === 'boy';
    els.genderResult.textContent = isBoy ? "💙 It's a Boy!" : "🩷 It's a Girl!";
    els.genderResult.className = 'gender-result ' + (isBoy ? 'boy' : 'girl') + ' show';
    fireConfetti(isBoy ? ['#7c98ad', '#cfe0ec', '#f2e9d4', '#3c2c1f'] : ['#c98fa0', '#f3d7de', '#f2e9d4', '#3c2c1f']);
    window.setTimeout(function(){
      fireConfetti(isBoy ? ['#7c98ad', '#cfe0ec'] : ['#c98fa0', '#f3d7de']);
    }, 400);
  }

  /* ---------- Floating particles ---------- */
  (function seedParticles(){
    if(reducedMotion()) return;
    var container = document.getElementById('particles');
    var glyphs = ['🍃', '🌿', '🦋', '🍄'];
    var count = window.innerWidth < 640 ? 8 : 14;
    for(var i = 0; i < count; i++){
      var span = document.createElement('span');
      span.className = 'particle';
      span.textContent = glyphs[i % glyphs.length];
      span.style.left = (Math.random() * 100) + 'vw';
      span.style.animationDuration = (14 + Math.random() * 10) + 's';
      span.style.animationDelay = (Math.random() * -20) + 's';
      span.style.fontSize = (1 + Math.random() * 0.8) + 'rem';
      span.style.opacity = String(0.35 + Math.random() * 0.35);
      container.appendChild(span);
    }
  })();

  /* ---------- Subtle parallax on pointer move ---------- */
  (function parallax(){
    if(reducedMotion()) return;
    if(window.matchMedia && window.matchMedia('(pointer: coarse)').matches) return;
    window.addEventListener('mousemove', function(e){
      var x = (e.clientX / window.innerWidth - 0.5) * 10;
      var y = (e.clientY / window.innerHeight - 0.5) * 10;
      if(els.card && !els.card.hidden){ els.card.style.transform = 'translate(' + (x * 0.4) + 'px,' + (y * 0.4) + 'px)'; }
      if(els.passCard && !els.passCard.hidden){ els.passCard.style.transform = 'translate(' + (-x * 0.3) + 'px,' + (-y * 0.3) + 'px)'; }
    });
  })();

  /* ---------- Welcome-back check ---------- */
  try {
    if(window.localStorage.getItem('babyShowerLegend') === 'true' && els.welcomeBack){
      els.welcomeBack.hidden = false;
    }
  } catch(e) {}

})();
</script>

</body>
</html>
HTMLify

Share this file:
