<!DOCTYPE html>
<html lang=”ro”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
<title>Chestionar de Personalitate a Culorii</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: ‘Segoe UI’, sans-serif; }
#quiz-root { padding: 24px; min-height: 500px; transition: background 0.4s ease; }
.step-header { text-align: center; margin-bottom: 24px; }
.step-counter { font-size: 13px; color: #9ca3af; margin-bottom: 8px; }
.progress-bar-bg { background: #e5e7eb; border-radius: 99px; height: 6px; overflow: hidden; margin-bottom: 20px; }
.progress-bar-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; }
.season-title { font-size: 28px; font-weight: 700; color: #1f2937; margin-bottom: 6px; }
.season-subtitle { font-size: 15px; color: #6b7280; }
.words-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; justify-content: center; }
.word-btn {
padding: 8px 16px; border-radius: 99px; border: 2px solid #d1d5db;
background: #fff; color: #374151; font-size: 14px; cursor: pointer;
font-weight: 400; transition: all 0.15s ease; font-family: ‘Segoe UI’, sans-serif;
}
.word-btn.checked { color: #fff; font-weight: 600; }
.nav { display: flex; justify-content: space-between; align-items: center; }
.nav-count { font-size: 13px; color: #9ca3af; }
.btn-back {
padding: 12px 24px; border-radius: 12px; border: 2px solid #e5e7eb;
background: #fff; font-size: 14px; cursor: pointer; font-weight: 600;
font-family: ‘Segoe UI’, sans-serif; color: #374151;
}
.btn-back:disabled { color: #d1d5db; cursor: default; }
.btn-next {
padding: 12px 28px; border-radius: 12px; border: none;
color: #fff; font-size: 14px; cursor: pointer; font-weight: 700;
font-family: ‘Segoe UI’, sans-serif;
}
/* Result */
.result-card { max-width: 480px; margin: 0 auto; background: #fff; border-radius: 24px; box-shadow: 0 8px 40px rgba(0,0,0,0.1); overflow: hidden; }
.result-header { padding: 40px 32px 32px; text-align: center; color: #fff; }
.result-emoji { font-size: 56px; margin-bottom: 8px; }
.result-title { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.result-subtitle { font-size: 15px; opacity: 0.9; font-style: italic; }
.result-body { padding: 28px 32px; }
.result-desc { color: #374151; line-height: 1.7; font-size: 15px; margin-bottom: 24px; }
.palette-label, .scores-label { font-size: 12px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.palette-row { display: flex; gap: 8px; margin-bottom: 24px; }
.palette-swatch { flex: 1; height: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.scores-label { margin-bottom: 12px; }
.score-row { margin-bottom: 10px; }
.score-meta { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.score-bar-bg { background: #f3f4f6; border-radius: 99px; height: 8px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 99px; transition: width 1s ease; }
.cta-btn {
display: block; text-align: center; padding: 16px; border-radius: 14px;
font-size: 16px; font-weight: 700; text-decoration: none; color: #fff;
margin-bottom: 12px; margin-top: 28px;
}
.retry-btn {
display: block; width: 100%; background: none; border: none;
color: #9ca3af; font-size: 13px; cursor: pointer; padding: 8px;
font-family: ‘Segoe UI’, sans-serif;
}
</style>
</head>
<body>
<div id=”quiz-root”></div>
<script>
const seasons = {
primavara: {
label: „🌸 Primăvară”, color: „#f9a8d4”, bg: „#fdf2f8”, accent: „#ec4899”,
words: [„accesibil”,”prietenos”,”strălucitor”,”clar”,”comunicativ”,”creativ”,”drăguț”,”încântător”,”efervescent”,”expresiv”,”rapid”,”orientat spre viitor”,”proaspăt”,”amabil”,”distractiv”,”fericit”,”de ajutor”,”imaginativ”,”neformal”,”inspirațional”,”ușor”,”adorabil”,”modern”,”deschis”,”optimist”,”jucăuș”,”popular”,”pozitiv”,”frumos”,”pur”,”prompt”,”simplu”,”mic”,”spontan”,”dulce”,”la modă”,”nepretențios”,”înălțător”,”tineresc”]
},
vara: {
label: „☁️ Vară”, color: „#93c5fd”, bg: „#eff6ff”, accent: „#3b82f6”,
words: [„excepțional”,”elegant”,”stilat”,”atent”,”romantic”,”subtil”,”demn de remarcat”,”rafinat”,”senin”,”cu spirit artistic”,”orientat spre afaceri”,”sofisticat”,”liniștit”,”blând”,”în stil clasic”,”ambițios”,”reconfortant”,”de susținere”,”formal”,”intuitiv”,”grijuliu”,”atemporal”,”sensibil”,”cu gust”,”grațios”,”elocvent”,”delicat”,”discret”,”echilibrat”,”de încredere”,”atent la detalii”,”relaxat”,”natural”,”distins”,”conservator”,”meticulos”,”chibzuit”,”calm”]
},
toamna: {
label: „🍂 Toamnă”, color: „#fdba74”, bg: „#fff7ed”, accent: „#ea580c”,
words: [„eficient”,”ingenios”,”puternic”,”cald”,”împlinit”,”natural”,”original”,”primitor”,”sociabil”,”imperfect”,”incluziv”,”liberal”,”rustic”,”curajos”,”practic”,”independent”,”ocrotitor”,”firesc”,”exuberant”,”generos”,”confortabil”,”pasionat”,”conectat”,”încurajator”,”revigorant”,”angajant”,”aventuros”,”etic”,”persuasiv”,”autentic”,”înrădăcinat”,”cosmopolit”,”progresist”,”captivant”,”liber”,”înțelept”,”neobișnuit”]
},
iarna: {
label: „❄️ Iarnă”, color: „#a78bfa”, bg: „#f5f3ff”, accent: „#7c3aed”,
words: [„dinamic”,”senzual”,”curajos”,”radical”,”provocator”,”expert”,”exclusivist”,”minimalist”,”extravagant”,”autoritar”,”inventiv”,”temerar”,”puternic”,”extraordinar”,”dramatic”,”proactiv”,”riguros”,”îndrăzneț”,”specialist”,”vibrant”,”lider de piață”,”calitate superioară”,”tăios”,”concentrat”,”disciplinat”,”intransigent”,”îngrijit”,”neînfricat”,”avangardist”,”opulent”,”uimitor”,”valoros”,”practic”,”vizionar”,”inovativ”,”performant”,”hotărât”]
}
};
const results = {
primavara: {
emoji: „🌸”, name: „Primăvară”, subtitle: „Strălucitoare, Jucăușă & Proaspătă”,
desc: „Personalitatea ta radiază căldură și optimism. Ești atrasă de energie luminoasă și veselă — branduri și spații care se simt primitoare, pline de viață și bucurie. Paleta ta de culori este vibrantă și înălțătoare, plină de tonuri clare și vesele.”,
palette: [„#fde68a”,”#fbcfe8″,”#bbf7d0″,”#bfdbfe”,”#fed7aa”]
},
vara: {
emoji: „☁️”, name: „Vară”, subtitle: „Elegantă, Calmă & Rafinată”,
desc: „Ai o prezență sofisticată și discretă. Prețuiești grația, echilibrul și frumusețea atemporală. Estetica ta este eleganță liniștită — tonuri armonioase și estompate care șoptesc în loc să strige.”,
palette: [„#c7d2fe”,”#ddd6fe”,”#fbcfe8″,”#bfdbfe”,”#e0e7ff”]
},
toamna: {
emoji: „🍂”, name: „Toamnă”, subtitle: „Caldă, Autentică & Înrădăcinată”,
desc: „Ești ancorată, autentică și profund umană. Prețuiești conexiunea, autenticitatea și substanța în detrimentul aparențelor. Paleta ta este bogată și naturală — teracote calde, verdeață adâncă și maro auriu.”,
palette: [„#fbbf24″,”#d97706″,”#92400e”,”#78350f”,”#a3e635″]
},
iarna: {
emoji: „❄️”, name: „Iarnă”, subtitle: „Îndrăzneață, Dinamică & Puternică”,
desc: „Captezi atenția. Ești hotărâtă, vizionară și nu îți este teamă să ieși în evidență. Paleta ta este dramatică și cu contrast puternic — negru profund, alb cristalin, tonuri de bijuterie și accente surprinzătoare.”,
palette: [„#1e1b4b”,”#4c1d95″,”#be185d”,”#164e63″,”#f1f5f9″]
}
};
const keys = [„primavara”,”vara”,”toamna”,”iarna”];
let step = 0;
let selected = { primavara: new Set(), vara: new Set(), toamna: new Set(), iarna: new Set() };
function getWinner() {
return keys.slice().sort((a,b) => selected[b].size – selected[a].size)[0];
}
function render() {
const root = document.getElementById(‘quiz-root’);
if (step === keys.length) { renderResult(root); return; }
const key = keys[step];
const s = seasons[key];
root.style.background = s.bg;
const progress = ((step + 1) / keys.length) * 100;
const checkedCount = selected[key].size;
root.innerHTML = `
<div class=”step-header”>
<div class=”step-counter”>Pas ${step + 1} din ${keys.length}</div>
<div class=”progress-bar-bg”>
<div class=”progress-bar-fill” style=”width:${progress}%; background:${s.accent};”></div>
</div>
<div class=”season-title”>${s.label}</div>
<div class=”season-subtitle”>Bifează toate cuvintele care te reprezintă</div>
</div>
<div class=”words-grid”>
${s.words.map(w => {
const checked = selected[key].has(w);
return `<button class=”word-btn${checked ? ‘ checked’ : ”}”
style=”${checked ? `background:${s.accent}; border-color:${s.accent}; box-shadow: 0 2px 12px ${s.color};` : ”}”
onclick=”toggleWord(‘${key}’,’${w.replace(/’/g,”\\'”)}’)”>
${w}
</button>`;
}).join(”)}
</div>
<div class=”nav”>
<button class=”btn-back” onclick=”goBack()” ${step === 0 ? ‘disabled’ : ”}>← Înapoi</button>
<span class=”nav-count”>${checkedCount} selectate</span>
<button class=”btn-next” style=”background:${s.accent}; box-shadow: 0 4px 14px ${s.color};” onclick=”goNext()”>
${step === keys.length – 1 ? ‘Vezi rezultatul 🎨’ : ‘Continuă →’}
</button>
</div>
`;
}
function renderResult(root) {
const winner = getWinner();
const r = results[winner];
const s = seasons[winner];
const scores = keys.map(k => ({ key: k, label: seasons[k].label, score: selected[k].size, color: seasons[k].accent }));
const max = Math.max(…scores.map(x => x.score)) || 1;
root.style.background = „linear-gradient(135deg, #fdf2f8 0%, #f5f3ff 100%)”;
root.style.display = „flex”;
root.style.alignItems = „center”;
root.style.justifyContent = „center”;
root.innerHTML = `
<div class=”result-card”>
<div class=”result-header” style=”background: linear-gradient(135deg, ${s.color}, ${s.accent});”>
<div class=”result-emoji”>${r.emoji}</div>
<div class=”result-title”>${r.name}</div>
<div class=”result-subtitle”>${r.subtitle}</div>
</div>
<div class=”result-body”>
<p class=”result-desc”>${r.desc}</p>
<div class=”palette-label”>Paleta ta de culori</div>
<div class=”palette-row”>
${r.palette.map(c => `<div class=”palette-swatch” style=”background:${c};”></div>`).join(”)}
</div>
<div class=”scores-label”>Scorurile tale</div>
${scores.map(sc => `
<div class=”score-row”>
<div class=”score-meta”>
<span style=”color:#374151;”>${sc.label}</span>
<span style=”color:${sc.color}; font-weight:700;”>${sc.score}</span>
</div>
<div class=”score-bar-bg”>
<div class=”score-bar-fill” style=”width:${(sc.score/max)*100}%; background:${sc.color};”></div>
</div>
</div>
`).join(”)}
<a href=”https://calendly.com/amamihaescu/consultanta_brandyourself” target=”_blank” class=”cta-btn”
style=”background:${s.accent}; box-shadow: 0 4px 16px ${s.color}88;”>
Programează o întâlnire ✨
</a>
<button class=”retry-btn” onclick=”restartQuiz()”>Încearcă din nou</button>
</div>
</div>
`;
}
function toggleWord(key, word) {
if (selected[key].has(word)) selected[key].delete(word);
else selected[key].add(word);
render();
}
function goNext() { step++; render(); }
function goBack() { if (step > 0) { step–; render(); } }
function restartQuiz() {
step = 0;
selected = { primavara: new Set(), vara: new Set(), toamna: new Set(), iarna: new Set() };
const root = document.getElementById(‘quiz-root’);
root.style.display = ”;
root.style.alignItems = ”;
root.style.justifyContent = ”;
render();
}
render();
</script>
</body>
</html>