Fortune Cookie 2.0 — Demo

HTML

<div class="app">
  <header>
    <div class="logo"><div class="cookie">🍪</div><div>Fortune Cookie 2.0</div></div>
    <select id="tone">
      <option value="funny">Funny</option>
      <option value="wise">Wise</option>
      <option value="romantic">Romantic</option>
      <option value="surreal">Surreal</option>
      <option value="practical">Practical</option>
      <option value="meta">Hackathon</option>
    </select>
  </header>

  <main>
    <div class="card" id="card">
      <div class="meta" id="meta">Your daily micro-fortune</div>
      <div class="fortune" id="fortune">Click Generate to reveal your fortune...</div>
      <div class="controls">
        <button id="gen">Generate 🔮</button>
        <button class="btn-ghost" id="copy">Copy</button>
        <button class="btn-ghost" id="save">Download Image</button>
      </div>
    </div>
  </main>

  <footer>
    <small>Made for a hackathon • Refresh for a new seed</small>
  </footer>
</div>

CSS

:root{--bg:#f7f4ef;--card:#fff;--accent:#d97706}
  body{font-family:Inter,system-ui,Segoe UI,Helvetica,Arial; background:linear-gradient(180deg,#fff 0%,var(--bg) 100%); margin:0;display:flex;min-height:100vh;align-items:center;justify-content:center}
  .app{width:420px;max-width:95%;padding:24px}
  header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700}
  .cookie{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffd27a,#f6b04a);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,0.08)}
  .card{background:var(--card);border-radius:14px;padding:28px;text-align:center;box-shadow:0 8px 30px rgba(13,27,39,0.06)}
  .fortune{font-size:18px;line-height:1.4;margin:14px 0;color:#2b2b2b;min-height:72px}
  .meta{font-size:12px;color:#666;margin-bottom:8px}
  .controls{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
  button{padding:10px 12px;border-radius:10px;border:0;background:#111;color:#fff;cursor:pointer}
  .btn-ghost{background:transparent;border:1px solid #ddd;color:#111}
  select{padding:8px;border-radius:10px;border:1px solid #ddd;background:#fff}
  footer{margin-top:12px;text-align:center;font-size:12px;color:#777}
  .confetti{position:absolute;pointer-events:none;z-index:2}

JavaScript

const fortunes = {
  funny: [
    "Your coffee will forgive you tomorrow. Today it’s judging.",
    "You will find a sock. It will be lonely and deserving.",
    "Today’s decision: nap 1 — dignity 0."
  ],
  wise:[
    "A small habit repeated is a large mountain climbed.",
    "Listen longer — the quiet has something to teach.",
    "You are closer than you think; take one small step."
  ],
  romantic:[
    "Someone is smiling because you exist.",
    "Leave a note today; your future self will thank you.",
    "A small kindness will bloom into a bright hello."
  ],
  surreal:[
    "If the moon borrows your name, say yes.",
    "Tomorrow the pigeons will sing in three-part harmony. Join them.",
    "You will dream in teal and wake with a new impulse."
  ],
  practical:[
    "Make your bed — a tidy start invites tidy choices.",
    "Reply to that message. The conversation needs you.",
    "Put one glass of water by your bed tonight."
  ],
  meta:[
    "This app will be built and then slightly improved.",
    "The best feature will be the one you didn’t plan.",
    "Ship early — debugging is free therapy."
  ]
};

const fortuneEl = document.getElementById('fortune');
const metaEl = document.getElementById('meta');
const toneEl = document.getElementById('tone');
const genBtn = document.getElementById('gen');
const copyBtn = document.getElementById('copy');
const saveBtn = document.getElementById('save');
const card = document.getElementById('card');

function pick(t){
  const arr = fortunes[t] || fortunes['funny'];
  return arr[Math.floor(Math.random()*arr.length)];
}

function showFortune(){
  const tone = toneEl.value;
  const f = pick(tone);
  fortuneEl.textContent = f;
  metaEl.textContent = "Tone: " + tone;
  // tiny confetti animation (emoji rain)
  for(let i=0;i<12;i++){
    const e=document.createElement('div');
    e.style.position='fixed';e.style.left=(20+Math.random()*80)+'%';e.style.top='-10px';
   ...