<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Quanto eu conheço meu amor 💕</title>
<style>
:root {
--bg: #fff0f5;
--card: #ffffff;
--text: #3b2030;
--muted: #8a6275;
--accent: #e0457b;
--accent-soft: #ffd6e5;
--ok: #2e9e6a;
--bad: #d64545;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #2a1620;
--card: #3a2030;
--text: #fbe6ef;
--muted: #d9a9bd;
--accent: #ff6b9a;
--accent-soft: #5a2c40;
--ok: #4fd08f;
--bad: #ff7070;
}
}
:root[data-theme="dark"] {
--bg: #2a1620;
--card: #3a2030;
--text: #fbe6ef;
--muted: #d9a9bd;
--accent: #ff6b9a;
--accent-soft: #5a2c40;
--ok: #4fd08f;
--bad: #ff7070;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
background: var(--bg);
color: var(--text);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px);
}
.wrap { max-width: 560px; margin: 0 auto; padding: 24px 0 40px; }
h1 { font-size: 1.5rem; text-align: center; margin: 0 0 4px; }
.sub { text-align: center; color: var(--muted); margin: 0 0 20px; }
.progress { height: 10px; background: var(--accent-soft); border-radius: 99px; overflow: hidden; margin-bottom: 8px; }
.progress > div { height: 100%; background: var(--accent); width: 0%; transition: width .3s; }
.count { font-size: .9rem; color: var(--muted); text-align: right; margin-bottom: 16px; }
.card {
background: var(--card);
border-radius: 18px;
padding: 24px;
box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.q { font-size: 1.15rem; font-weight: 600; margin: 0 0 18px; line-height: 1.4; }
.opts { display: grid; gap: 10px; }
.opt {
display: flex; align-items: center; gap: 12px;
text-align: left; width: 100%;
padding: 14px 16px; border-radius: 12px;
border: 2px solid var(--accent-soft);
background: transparent; color: var(--text);
font-size: 1rem; cursor: pointer;
font-family: inherit;
}
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt .letter {
flex: 0 0 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft); font-weight: 700; font-size: .9rem;
}
.opt.selected { border-color: var(--accent); background: var(--accent-soft); }
.opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 20%, transparent); }
.opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 20%, transparent); }
.opt:disabled { cursor: default; }
.feedback { margin-top: 14px; min-height: 1.4em; text-align: center; font-weight: 600; }
.btn {
display: block; margin: 20px auto 0;
background: var(--accent); color: #fff; border: 0;
padding: 12px 28px; border-radius: 99px;
font-size: 1rem; font-weight: 600; cursor: pointer;
font-family: inherit;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.hidden { display: none !important; }
/* Tela final */
#end { text-align: center; }
.big {
font-size: clamp(2.2rem, 10vw, 3.6rem);
font-weight: 800;
color: var(--accent);
margin: 8px 0 6px;
line-height: 1.1;
}
.heart { font-size: 3.5rem; animation: pulse 1.2s infinite; display: inline-block; }
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.score { font-size: 1.3rem; font-weight: 700; margin: 18px 0 6px; }
.verdict { color: var(--muted); line-height: 1.5; margin: 0 0 18px; }
.review { text-align: left; margin-top: 18px; }
.review li { margin-bottom: 8px; line-height: 1.4; }
.review ul { padding-left: 0; list-style: none; }
.tag { font-weight: 700; }
.tag.ok { color: var(--ok); }
.tag.bad { color: var(--bad); }
</style>
</head>
<body>
<div class="wrap">
<!-- TELA DO QUIZ -->
<section id="quiz">
<h1>Quanto eu conheço meu amor 💕</h1>
<p class="sub">Responda com carinho e veja o quanto você me conhece!</p>
<div class="progress"><div id="bar"></div></div>
<div class="count" id="count"></div>
<div class="card">
<p class="q" id="question"></p>
<div class="opts" id="options"></div>
<div class="feedback" id="feedback"></div>
<button class="btn" id="next" disabled>Próxima</button>
</div>
</section>
<!-- TELA FINAL -->
<section id="end" class="hidden">
<div class="card">
<span class="heart">💖</span>
<div class="big">EU TE AMO</div>
<div class="score" id="scoreText"></div>
<p class="verdict" id="verdict"></p>
<button class="btn" id="restart">Jogar de novo</button>
<div class="review" id="review"></div>
</div>
</section>
</div>
<script>
// Gabarito: respostas do(a) "dono(a)" do quiz
const QUESTIONS = [
{ q: "Qual é a comida favorita dele(a)?", opts: ["Pizza", "Sushi", "Churrasco", "Massa"], a: 3 },
{ q: "Qual é a cor preferida dele(a)?", opts: ["Azul", "Vermelho", "Verde", "Preto"], a: 3 },
{ q: "Qual é o maior sonho dele(a)?", opts: ["Viajar pelo mundo", "Ter a própria casa", "Mudar de carreira", "Ter filhos"], a: 3 },
{ q: "Qual é o filme ou série que ele(a) mais gosta?", opts: ["Comédia romântica", "Ação", "Terror", "Documentário"], a: 0 },
{ q: "Como ele(a) prefere passar um domingo?", opts: ["Em casa, descansando", "Passeando ao ar livre", "Com amigos", "Fazendo alguma atividade criativa"], a: 1 },
{ q: "Qual é o estilo de música preferido dele(a)?", opts: ["Pagode", "MPB", "Rock", "Pop"], a: 0 },
{ q: "Qual é o maior medo dele(a)?", opts: ["Altura", "Ficar sozinho(a)", "Fracassar", "Doenças"], a: 2 },
{ q: "Qual destas coisas ele(a) faz quando está estressado(a)?", opts: ["Sai para caminhar", "Fica quieto(a)", "Come algo doce", "Ouve música"], a: 1 },
{ q: "Qual é o aniversário dele(a)?", opts: ["Entre janeiro e março", "Entre abril e junho", "Entre julho e setembro", "Entre outubro e dezembro"], a: 3 },
{ q: "Qual é o presente que ele(a) mais gostaria de ganhar?", opts: ["Uma viagem", "Um objeto tecnológico", "Uma experiência especial", "Algo feito à mão"], a: 3 },
{ q: "Qual é a infância dele(a) mais marcante?", opts: ["Morou em outra cidade", "Tinha muitos irmãos", "Era filho(a) único(a)", "Praticava algum esporte"], a: 3 },
{ q: "Qual é o animal de estimação preferido dele(a)?", opts: ["Cachorro", "Gato", "Pássaro", "Nenhum, prefere outros animais"], a: 1 },
{ q: "Qual é a bebida favorita dele(a)?", opts: ["Café", "Suco natural", "Refrigerante", "Cerveja ou vinho"], a: 1 },
{ q: "Qual é a qualidade que ele(a) mais admira em você?", opts: ["Sua paciência", "Seu senso de humor", "Sua inteligência", "Seu carinho"], a: 1 },
{ q: "Qual é a frase que ele(a) mais repete no dia a dia?", opts: ["\"Bora!\"", "\"Tá tranquilo\"", "\"Nossa!\"", "\"Te amo muuuuuuuuuito maiiis\""], a: 3 }
];
const LETTERS = ["A", "B", "C", "D"];
let current = 0;
let score = 0;
let answers = [];
let locked = false;
const $ = id => document.getElementById(id);
function render() {
const item = QUESTIONS[current];
locked = false;
$("count").textContent = `Pergunta ${current + 1} de ${QUESTIONS.length}`;
$("bar").style.width = `${(current / QUESTIONS.length) * 100}%`;
$("question").textContent = item.q;
$("feedback").textContent = "";
$("next").disabled = true;
$("next").textContent = current === QUESTIONS.length - 1 ? "Ver resultado 💕" : "Próxima";
const box = $("options");
box.innerHTML = "";
item.opts.forEach((text, i) => {
const b = document.createElement("button");
b.className = "opt";
b.innerHTML = `<span class="letter">${LETTERS[i]}</span><span></span>`;
b.querySelector("span:last-child").textContent = text;
b.onclick = () => choose(i);
box.appendChild(b);
});
}
function choose(i) {
if (locked) return;
locked = true;
const item = QUESTIONS[current];
const buttons = document.querySelectorAll(".opt");
buttons.forEach(b => b.disabled = true);
buttons[i].classList.add("selected");
buttons[item.a].classList.add("right");
const correct = i === item.a;
if (!correct) buttons[i].classList.replace("selected", "wrong");
if (correct) score++;
answers.push({ q: item.q, chosen: item.opts[i], correct: item.opts[item.a], ok: correct });
$("feedback").textContent = correct ? "Acertou! 💕" : "Ops, não era essa 😅";
$("feedback").style.color = correct ? "var(--ok)" : "var(--bad)";
$("next").disabled = false;
}
$("next").onclick = () => {
if (current < QUESTIONS.length - 1) {
current++;
render();
} else {
showEnd();
}
};
function verdictFor(pct) {
if (pct === 100) return "Perfeito! Você me conhece por dentro e por fora. Eu sou muito sortudo(a) por ter você! 💘";
if (pct >= 80) return "Quase perfeito! Você me conhece muito bem, só alguns detalhezinhos escaparam. 💕";
if (pct >= 60) return "Muito bom! Você sabe das coisas importantes sobre mim. Ainda há muito para descobrir juntos. 😊";
if (pct >= 40) return "Razoável! Precisamos conversar mais e ter mais encontros para você me conhecer melhor. 🥰";
return "Hmm... acho que precisamos de mais conversas e café juntos! ☕💕";
}
function showEnd() {
$("quiz").classList.add("hidden");
$("end").classList.remove("hidden");
$("bar").style.width = "100%";
const pct = Math.round((score / QUESTIONS.length) * 100);
$("scoreText").textContent = `Você acertou ${score} de ${QUESTIONS.length} (${pct}%)`;
$("verdict").textContent = verdictFor(pct);
const list = answers.map((a, i) => {
const tag = a.ok ? `<span class="tag ok">✔</span>` : `<span class="tag bad">✘</span>`;
const detail = a.ok ? "" : ` <em>(resposta certa: ${a.correct})</em>`;
return `<li>${tag} ${i + 1}. ${a.q} → ${a.chosen}${detail}</li>`;
}).join("");
$("review").innerHTML = `<ul>${list}</ul>`;
window.scrollTo({ top: 0, behavior: "smooth" });
}
$("restart").onclick = () => {
current = 0; score = 0; answers = [];
$("end").classList.add("hidden");
$("quiz").classList.remove("hidden");
render();
};
render();
</script>
</body>
</html>