From 14f143d05a0225bdf216a6ed360a68085dde308e Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Sat, 7 Mar 2026 09:58:33 +0700
Subject: [PATCH] feat(quiz): add requirements and style previews for coffee
 personality quiz

- Define 3 personality-to-coffee pairings (Zen Minimalist, Night Owl, Social Butterfly)
- Add percentage-based result display spec
- Add 5 pop culture quiz questions with personality mappings
- Generate 4 distinct style preview HTML files for visual direction
- Document warm/cozy + Claude homepage aesthetic as chosen style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cc4e-course/quiz-project/REQUIREMENTS.md      | 55 ++++++++++++
 cc4e-course/quiz-project/style-preview-1.html | 89 +++++++++++++++++++
 cc4e-course/quiz-project/style-preview-2.html | 77 ++++++++++++++++
 cc4e-course/quiz-project/style-preview-3.html | 83 +++++++++++++++++
 cc4e-course/quiz-project/style-preview-4.html | 77 ++++++++++++++++
 5 files changed, 381 insertions(+)
 create mode 100644 cc4e-course/quiz-project/REQUIREMENTS.md
 create mode 100644 cc4e-course/quiz-project/style-preview-1.html
 create mode 100644 cc4e-course/quiz-project/style-preview-2.html
 create mode 100644 cc4e-course/quiz-project/style-preview-3.html
 create mode 100644 cc4e-course/quiz-project/style-preview-4.html

diff --git a/cc4e-course/quiz-project/REQUIREMENTS.md b/cc4e-course/quiz-project/REQUIREMENTS.md
new file mode 100644
index 0000000..9096a28
--- /dev/null
+++ b/cc4e-course/quiz-project/REQUIREMENTS.md
@@ -0,0 +1,55 @@
+# Coffee Personality Quiz - Requirements
+
+## Personality → Coffee Pairings
+
+| Personality | Coffee | Tagline |
+|---|---|---|
+| Zen Minimalist | Black Coffee, Single Origin | "Simple. Clean. Perfect." |
+| Night Owl | Red Eye (coffee + espresso shot) | "Sleep is optional." |
+| Social Butterfly | Cappuccino | "Coffee is better with company." |
+
+## Result Display
+
+**Show all percentages** - After the quiz, show the user's full breakdown across all three personalities (e.g., "50% Night Owl, 30% Zen Minimalist, 20% Social Butterfly") with all coffee recommendations shown.
+
+## Visual Style
+
+**Base:** Style 4 (Warm & Cozy) - earth tones, soft gradients, inviting feel
+**Influence:** Claude homepage aesthetic - clean, polished, refined typography, generous whitespace, modern feel
+**Result:** Warm and minimal. Earthy palette but uncluttered and elegant.
+
+## Images & Icons
+
+- No images
+- No icons - text-only answer options
+
+## Quiz Questions
+
+**Q1: Pick a Netflix genre for tonight:**
+- A dark, quiet thriller with no jump scares → Zen Minimalist
+- A binge-worthy series you'll watch until 3am → Night Owl
+- Whatever your group chat is hyped about → Social Butterfly
+
+**Q2: Your Hogwarts common room vibe:**
+- Ravenclaw - books, focus, solitude → Zen Minimalist
+- Slytherin - ambition, late nights, no rules → Night Owl
+- Hufflepuff - warm, inclusive, everyone's welcome → Social Butterfly
+
+**Q3: You're at a party. Where are you?**
+- Stepped outside for some quiet → Zen Minimalist
+- Still there at 2am helping close the place down → Night Owl
+- Center of the room, introducing people to each other → Social Butterfly
+
+**Q4: Your ideal travel style:**
+- Solo trip, minimal itinerary, just vibes → Zen Minimalist
+- Red-eye flight to maximize time at the destination → Night Owl
+- Group trip, shared Airbnb, chaotic and perfect → Social Butterfly
+
+**Q5: Pick a superpower:**
+- Total mental clarity, always focused → Zen Minimalist
+- Never need sleep → Night Owl
+- Everyone immediately likes you → Social Butterfly
+
+## Scoring Logic
+
+Each answer maps to one personality. Tally all answers at the end and calculate percentages. Display all three results ranked by score, with the top result highlighted and all three coffee recommendations shown.
diff --git a/cc4e-course/quiz-project/style-preview-1.html b/cc4e-course/quiz-project/style-preview-1.html
new file mode 100644
index 0000000..a37b993
--- /dev/null
+++ b/cc4e-course/quiz-project/style-preview-1.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Style 1 - Playful & Colorful</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700&display=swap');
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #f6d365 0%, #fda085 50%, #f093fb 100%);
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Nunito', sans-serif;
+    padding: 20px;
+  }
+  .card {
+    background: white;
+    border-radius: 32px;
+    padding: 48px 40px;
+    max-width: 560px;
+    width: 100%;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
+  }
+  .badge {
+    display: inline-block;
+    background: #f6d365;
+    color: #c05e00;
+    font-weight: 700;
+    font-size: 13px;
+    padding: 6px 16px;
+    border-radius: 999px;
+    margin-bottom: 24px;
+    letter-spacing: 0.5px;
+  }
+  h1 {
+    font-family: 'Fredoka One', cursive;
+    font-size: 32px;
+    color: #2d2d2d;
+    margin-bottom: 12px;
+    line-height: 1.2;
+  }
+  .subtitle {
+    color: #888;
+    font-size: 15px;
+    margin-bottom: 36px;
+  }
+  .option {
+    border: 3px solid #f0f0f0;
+    border-radius: 16px;
+    padding: 16px 20px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    transition: all 0.2s;
+    display: flex; align-items: center; gap: 14px;
+  }
+  .option:hover { border-color: #fda085; background: #fff8f5; transform: translateY(-2px); }
+  .option.selected { border-color: #fda085; background: #fff3ee; }
+  .option .emoji { font-size: 24px; }
+  .progress {
+    display: flex; gap: 8px; margin-bottom: 32px;
+  }
+  .dot { height: 8px; border-radius: 999px; flex: 1; background: #f0f0f0; }
+  .dot.active { background: linear-gradient(90deg, #f6d365, #fda085); }
+</style>
+</head>
+<body>
+<div class="card">
+  <div class="badge">Question 2 of 5</div>
+  <div class="progress">
+    <div class="dot active"></div>
+    <div class="dot active"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+  <h1>It's Friday night. What are you watching?</h1>
+  <p class="subtitle">Pick the one that feels most like you.</p>
+  <div class="option selected"><span class="emoji">⚔️</span> An action thriller that keeps you on edge</div>
+  <div class="option"><span class="emoji">🌿</span> A slow-burn documentary about nature</div>
+  <div class="option"><span class="emoji">🎉</span> Whatever your friends want to watch together</div>
+  <div class="option"><span class="emoji">🌙</span> A cult classic you've seen 10 times, starting at midnight</div>
+</div>
+<div style="position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);color:white;padding:8px 16px;border-radius:999px;font-size:13px;font-family:sans-serif;">Style 1 — Playful & Colorful</div>
+</body>
+</html>
diff --git a/cc4e-course/quiz-project/style-preview-2.html b/cc4e-course/quiz-project/style-preview-2.html
new file mode 100644
index 0000000..e60d85b
--- /dev/null
+++ b/cc4e-course/quiz-project/style-preview-2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Style 2 - Minimal & Clean</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    min-height: 100vh;
+    background: #fafafa;
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Inter', sans-serif;
+    padding: 20px;
+  }
+  .card {
+    background: white;
+    border-radius: 4px;
+    padding: 56px 48px;
+    max-width: 560px;
+    width: 100%;
+    border: 1px solid #e8e8e8;
+  }
+  .step {
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 2px;
+    color: #aaa;
+    text-transform: uppercase;
+    margin-bottom: 32px;
+  }
+  h1 {
+    font-size: 28px;
+    font-weight: 300;
+    color: #111;
+    margin-bottom: 48px;
+    line-height: 1.4;
+  }
+  .option {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 18px 0;
+    cursor: pointer;
+    font-size: 15px;
+    color: #444;
+    font-weight: 400;
+    display: flex; align-items: center; justify-content: space-between;
+    transition: color 0.15s;
+  }
+  .option:first-of-type { border-top: 1px solid #f0f0f0; }
+  .option:hover { color: #111; }
+  .option.selected { color: #111; font-weight: 500; }
+  .option .arrow { color: #ddd; font-size: 18px; }
+  .option.selected .arrow { color: #111; }
+  .progress-bar {
+    height: 2px;
+    background: #f0f0f0;
+    margin-bottom: 48px;
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .progress-fill { height: 100%; width: 40%; background: #111; border-radius: 2px; }
+</style>
+</head>
+<body>
+<div class="card">
+  <div class="step">2 / 5</div>
+  <div class="progress-bar"><div class="progress-fill"></div></div>
+  <h1>It's Friday night. What are you watching?</h1>
+  <div class="option selected">An action thriller that keeps you on edge <span class="arrow">→</span></div>
+  <div class="option">A slow-burn documentary about nature <span class="arrow">→</span></div>
+  <div class="option">Whatever your friends want to watch together <span class="arrow">→</span></div>
+  <div class="option">A cult classic you've seen 10 times, starting at midnight <span class="arrow">→</span></div>
+</div>
+<div style="position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:8px 16px;border-radius:999px;font-size:13px;font-family:sans-serif;">Style 2 — Minimal & Clean</div>
+</body>
+</html>
diff --git a/cc4e-course/quiz-project/style-preview-3.html b/cc4e-course/quiz-project/style-preview-3.html
new file mode 100644
index 0000000..569cb28
--- /dev/null
+++ b/cc4e-course/quiz-project/style-preview-3.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Style 3 - Bold & Dramatic</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    min-height: 100vh;
+    background: #0a0a0a;
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Space Grotesk', sans-serif;
+    padding: 20px;
+  }
+  .card {
+    background: #111;
+    border: 1px solid #222;
+    border-radius: 2px;
+    padding: 52px 44px;
+    max-width: 580px;
+    width: 100%;
+  }
+  .badge {
+    display: inline-flex; align-items: center; gap: 8px;
+    color: #ff4d00;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin-bottom: 28px;
+  }
+  .badge::before { content: ''; width: 24px; height: 2px; background: #ff4d00; }
+  h1 {
+    font-size: 34px;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 40px;
+    line-height: 1.2;
+  }
+  .option {
+    border: 1px solid #222;
+    border-radius: 2px;
+    padding: 18px 22px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    font-size: 15px;
+    color: #888;
+    font-weight: 500;
+    transition: all 0.15s;
+    display: flex; align-items: center; gap: 16px;
+  }
+  .option::before { content: ''; width: 6px; height: 6px; border: 1px solid #444; border-radius: 50%; flex-shrink: 0; }
+  .option:hover { border-color: #ff4d00; color: #fff; }
+  .option.selected { border-color: #ff4d00; color: #fff; background: rgba(255,77,0,0.06); }
+  .option.selected::before { background: #ff4d00; border-color: #ff4d00; }
+  .progress {
+    display: flex; gap: 4px; margin-bottom: 40px;
+  }
+  .seg { height: 3px; flex: 1; background: #222; }
+  .seg.active { background: #ff4d00; }
+</style>
+</head>
+<body>
+<div class="card">
+  <div class="badge">Question 2 of 5</div>
+  <div class="progress">
+    <div class="seg active"></div>
+    <div class="seg active"></div>
+    <div class="seg"></div>
+    <div class="seg"></div>
+    <div class="seg"></div>
+  </div>
+  <h1>It's Friday night. What are you watching?</h1>
+  <div class="option selected">An action thriller that keeps you on edge</div>
+  <div class="option">A slow-burn documentary about nature</div>
+  <div class="option">Whatever your friends want to watch together</div>
+  <div class="option">A cult classic you've seen 10 times, starting at midnight</div>
+</div>
+<div style="position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.1);color:white;padding:8px 16px;border-radius:999px;font-size:13px;font-family:sans-serif;">Style 3 — Bold & Dramatic</div>
+</body>
+</html>
diff --git a/cc4e-course/quiz-project/style-preview-4.html b/cc4e-course/quiz-project/style-preview-4.html
new file mode 100644
index 0000000..78e0958
--- /dev/null
+++ b/cc4e-course/quiz-project/style-preview-4.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Style 4 - Warm & Cozy</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Lato:wght@300;400;700&display=swap');
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    min-height: 100vh;
+    background: linear-gradient(160deg, #f5ebe0 0%, #e8d5b7 100%);
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Lato', sans-serif;
+    padding: 20px;
+  }
+  .card {
+    background: #fffdf8;
+    border-radius: 20px;
+    padding: 52px 44px;
+    max-width: 560px;
+    width: 100%;
+    box-shadow: 0 8px 40px rgba(120, 80, 40, 0.12);
+    border: 1px solid rgba(180, 130, 80, 0.15);
+  }
+  .tag {
+    font-size: 12px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    color: #a0785a;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+  h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: 30px;
+    font-weight: 500;
+    color: #3d2b1a;
+    margin-bottom: 36px;
+    line-height: 1.4;
+  }
+  .option {
+    border: 1.5px solid #e8d9c8;
+    border-radius: 12px;
+    padding: 16px 20px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 15px;
+    color: #6b4f38;
+    font-weight: 400;
+    transition: all 0.2s;
+    background: transparent;
+  }
+  .option:hover { border-color: #c8956a; background: rgba(200, 149, 106, 0.05); color: #3d2b1a; }
+  .option.selected { border-color: #c8956a; background: rgba(200, 149, 106, 0.1); color: #3d2b1a; font-weight: 700; }
+  .progress-wrap { margin-bottom: 36px; }
+  .progress-label { font-size: 12px; color: #a0785a; margin-bottom: 10px; }
+  .bar { height: 4px; background: #e8d9c8; border-radius: 99px; overflow: hidden; }
+  .fill { height: 100%; width: 40%; background: linear-gradient(90deg, #c8956a, #a0785a); border-radius: 99px; }
+</style>
+</head>
+<body>
+<div class="card">
+  <div class="tag">Your Coffee Personality</div>
+  <div class="progress-wrap">
+    <div class="progress-label">Question 2 of 5</div>
+    <div class="bar"><div class="fill"></div></div>
+  </div>
+  <h1>It's Friday night. What are you watching?</h1>
+  <div class="option selected">An action thriller that keeps you on edge</div>
+  <div class="option">A slow-burn documentary about nature</div>
+  <div class="option">Whatever your friends want to watch together</div>
+  <div class="option">A cult classic you've seen 10 times, starting at midnight</div>
+</div>
+<div style="position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(60,30,10,0.7);color:white;padding:8px 16px;border-radius:999px;font-size:13px;font-family:sans-serif;">Style 4 — Warm & Cozy</div>
+</body>
+</html>