What Is Your Vibe?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>What Is Your Vibe? 🎀</title>

<style>

* { box-sizing: border-box; }

body {

  margin: 0; min-height: 100vh; padding: 22px;

  display: flex; justify-content: center; align-items: center;

  font-family: "Trebuchet MS", sans-serif;

  background: linear-gradient(135deg, #ffe0ef, #e8ddff, #dff6ff);

  color: #493450;

}

.card {

  width: 100%; max-width: 480px; padding: 27px 22px;

  background: rgba(255,255,255,.88); border-radius: 28px;

  box-shadow: 0 12px 35px #9d77aa30; text-align: center;

}

h1 { color: #d6539c; font-size: 30px; margin: 6px 0 10px; }

.subtitle { color: #806c86; margin-bottom: 22px; }

.progress { height: 8px; background: #f3e5f5; border-radius: 20px; margin: 18px 0; overflow: hidden; }

#bar { height: 100%; width: 0%; background: linear-gradient(90deg,#ff91c8,#b59aff); transition: .3s; }

#question { font-size: 21px; margin: 22px 0; }

.answers { display: grid; gap: 11px; }

.answer, .mainbtn {

  border: 2px solid #f1d7ec; border-radius: 16px; padding: 14px;

  font-size: 16px; font-weight: bold; cursor: pointer;

  background: #fff7fc; color: #59405f; transition: .2s;

}

.answer:hover { background: #ffe5f3; transform: translateY(-2px); }

.mainbtn { background: #e879b6; color: white; border: none; margin-top: 18px; width: 100%; }

.mainbtn:hover { background: #d65b9c; }

.hidden { display: none; }

#emoji { font-size: 65px; }

#resultTitle { color: #d6539c; font-size: 27px; }

#resultText { line-height: 1.6; }

.small { font-size: 12px; color: #a08ca5; margin-top: 20px; }

</style>

</head>

<body>

<div class="card">

  <div id="quiz">

    <div style="font-size:38px">🎀 ✨ 💗</div>

    <h1>What Is Your Vibe?</h1>

    <p class="subtitle">A little quiz to reveal your energy!</p>

    <div class="progress"><div id="bar"></div></div>

    <p id="count">Question 1 of 5</p>

    <h2 id="question">Choose your perfect day!</h2>

    <div class="answers" id="answers"></div>

    <p class="small">Pick the answer that feels most like YOU 💕</p>

  </div>

  <div id="result" class="hidden">

    <div id="emoji">💗</div>

    <p>You got...</p>

    <h2 id="resultTitle"></h2>

    <p id="resultText"></p>

    <p id="resultExtra"></p>

    <button class="mainbtn" onclick="shareResult()">💌 Share my vibe</button>

    <button class="mainbtn" onclick="restart()" style="background:#b49ae8">🔄 Play again</button>

  </div>

</div>

<script>

const questions = [

 { q:"Choose your perfect day!", a:[

  ["🎧 Music, snacks, and my own world","cozy"],

  ["🎉 Laughing and causing chaos with friends","chaos"],

  ["📸 Looking cute and living my movie scene","main"],

  ["☕ Quiet time with someone I love","sweet"]

 ]},

 { q:"Your friends would describe you as...", a:[

  ["🌷 Calm and comforting","cozy"],

  ["😂 The funny, unpredictable one","chaos"],

  ["✨ Confident and unforgettable","main"],

  ["🧸 Caring and loyal","sweet"]

 ]},

 { q:"Pick a dream aesthetic!", a:[

  ["🕯️ Soft blankets and rainy days","cozy"],

  ["💥 Bright colors and crazy energy","chaos"],

  ["🖤 Stylish outfits and city lights","main"],

  ["🌸 Pastels, flowers, and cute notes","sweet"]

 ]},

 { q:"When drama happens, you...", a:[

  ["🍵 Stay out of it and relax","cozy"],

  ["👀 Watch everything unfold","chaos"],

  ["😎 Handle it like the main character","main"],

  ["💗 Check if everyone is okay","sweet"]

 ]},

 { q:"Choose your magical power!", a:[

  ["🌙 Make everyone feel peaceful","cozy"],

  ["⚡ Turn any moment into an adventure","chaos"],

  ["👑 Make every dream come true","main"],

  ["💞 Make people feel loved","sweet"]

 ]}

];

const profiles = {

 cozy: { emoji:"🧸", title:"The Cozy Soul", text:"You're peaceful, thoughtful, and have comforting energy. Your ideal world has good music, soft blankets, and people who understand you.", extra:"Your energy: soft, calm & dreamy ☁️" },

 chaos: { emoji:"⚡", title:"The Chaos Queen", text:"You're unpredictable, funny, and full of energy! Life around you is never boring, and you know how to make ordinary moments memorable.", extra:"Your energy: wild, funny & iconic 😂" },

 main: { emoji:"👑", title:"The Main Character", text:"You have big dreams and your own kind of sparkle. You love imagining what's possible and making your life feel like a movie.", extra:"Your energy: bold, confident & iconic ✨" },

 sweet: { emoji:"🌷", title:"The Sweet Soul", text:"You care deeply, notice little things, and bring warmth to the people around you. Your kindness is a strength, not a weakness.", extra:"Your energy: caring, loyal & lovely 💗" }

};

let current = 0;

let scores = { cozy:0, chaos:0, main:0, sweet:0 };

let finalProfile = "";

function showQuestion() {

 document.getElementById("count").textContent = `Question ${current+1} of ${questions.length}`;

 document.getElementById("bar").style.width = `${current/questions.length*100}%`;

 document.getElementById("question").textContent = questions[current].q;

 const area = document.getElementById("answers");

 area.innerHTML = "";

 questions[current].a.forEach(([label,type]) => {

   const button = document.createElement("button");

   button.className = "answer";

   button.textContent = label;

   button.onclick = () => {

     scores[type]++;

     current++;

     if (current < questions.length) showQuestion();

     else showResult();

   };

   area.appendChild(button);

 });

}

function showResult() {

 document.getElementById("quiz").classList.add("hidden");

 document.getElementById("result").classList.remove("hidden");

 document.getElementById("bar").style.width = "100%";

 finalProfile = Object.keys(scores).sort((a,b) => scores[b]-scores[a])[0];

 const p = profiles[finalProfile];

 document.getElementById("emoji").textContent = p.emoji;

 document.getElementById("resultTitle").textContent = p.title;

 document.getElementById("resultText").textContent = p.text;

 document.getElementById("resultExtra").textContent = p.extra;

}

async function shareResult() {

 const p = profiles[finalProfile];

 const message = `My vibe is ${p.title}! ${p.extra}\nTake the What Is Your Vibe? quiz too! 🎀`;

 try {

   if (navigator.share) {

     await navigator.share({ title:"What Is Your Vibe?", text:message, url:location.href });

   } else {

     window.prompt("Copy this to share with your friends 💗", message + "\n" + location.href);

   }

 } catch (e) {

   if (e.name !== "AbortError") window.prompt("Copy your result to share 💗", message);

 }

}

function restart() {

 current = 0;

 scores = { cozy:0, chaos:0, main:0, sweet:0 };

 document.getElementById("result").classList.add("hidden");

 document.getElementById("quiz").classList.remove("hidden");

 showQuestion();

}

showQuestion();

</script>

</body>

</html>