تست رنگ لوشر body { font-family: 'Vazir', Tahoma, sans-serif; text-align: center; direction: rtl; margin: 0; padding: 20px; background-color: #f9f9f9; } .palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center; margin-top: 20px; } @media (max-width: 600px) { .palette { grid-template-columns: repeat(2, 1fr); } .color-box { width: 80px; height: 80px; margin: 5px; } } .color-box { width: 120px; height: 120px; margin: 10px; cursor: pointer; border-radius: 10px; position: relative; transition: opacity 0.3s; } .color-box.selected { opacity: 0.5; } .color-box .tooltip { visibility: hidden; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; } .color-box:hover .tooltip { visibility: visible; } .color-box .check { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: white; } #progress { width: 80%; height: 20px; background-color: #f3f3f3; margin: 20px auto; border-radius: 10px; overflow: hidden; } #progress div { height: 100%; background-color: #4caf50; width: 0%; transition: width 0.3s; } #result { margin-top: 20px; text-align: right; max-width: 800px; margin-left: auto; margin-right: auto; } #result table { width: 100%; border-collapse: collapse; margin-top: 10px; } #result th, #result td { border: 1px solid #ddd; padding: 8px; text-align: right; } #result th { background-color: #f2f2f2; } .color-analysis { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; } .color-item { width: 48%; margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; text-align: right; } .color-item h4 { margin: 0 0 10px; color: #333; } .color-item ul { list-style-type: disc; padding-right: 20px; margin: 0; } .color-item li { margin-bottom: 5px; } .color-item.آبی { background-color: #f0f7ff; } .color-item.سبز { background-color: #f0fff0; } .color-item.قرمز { background-color: #fff0f0; } .color-item.زرد { background-color: #fffff0; } .color-item.بنفش { background-color: #f7f0ff; } .color-item.قهوهای { background-color: #f9f5f0; } .color-item.خاکستری { background-color: #f5f5f5; } .color-item.سیاه { background-color: #f0f0f0; } .personality-conclusion { margin-top: 20px; } .conclusion-item { margin-bottom: 20px; padding: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-align: right; } .conclusion-item h3 { margin: 0 0 10px; color: #2c3e50; } .conclusion-item p { margin: 0; line-height: 1.6; } #toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; visibility: hidden; z-index: 1000; } #pause { margin: 20px auto; font-size: 18px; } #print { margin-top: 20px; padding: 10px 20px; background-color: #4caf50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } #print:hover { background-color: #45a049; } روی رنگها کلیک کنید تا شخصیت خود را کشف کنید! این انتخاب برای مرحله دوم استفاده خواهد شد. لطفاً 7 ثانیه صبر کنید... دانلود گزارش PDF const delaySec = 7; let colors = [ { hex: '#0000A0', name: 'آبی' }, { hex: '#008000', name: 'سبز' }, { hex: '#FF0000', name: 'قرمز' }, { hex: '#FFFF00', name: 'زرد' }, { hex: '#800080', name: 'بنفش' }, { hex: '#A52A2A', name: 'قهوهای' }, { hex: '#808080', name: 'خاکستری' }, { hex: '#000000', name: 'سیاه' } ]; const symbols = ['+', '+', '×', '×', '=', '=', '−', '−']; const descBase = { 'آبی': ['آرامش، صلح و اعتماد', 'تمایل به محیطهای آرام و بدون تنش', 'جستجوی روابط صمیمی و عمیق'], 'سبز': ['رشد، تعادل و ثبات', 'افراد منطقی و واقعگرا', 'نیاز به کنترل و امنیت'], 'قرمز': ['انرژی، هیجان و قدرت', 'افراد رقابتی و جاهطلب', 'تمایل به موفقیتهای بزرگ در موقعیتهای چالشبرانگیز'], 'زرد': ['شادی، خلاقیت و خوشبینی', 'تمایل به تجربیات جدید', 'جستجوی هیجان و نوآوری'], 'بنفش': ['خلاقیت، تخیل و معنویت', 'جستجوی تجربیات جدید و متفاوت', 'غوطهوری در دنیای ذهنی و خیالی'], 'قهوهای': ['ثبات و امنیت جسمی', 'تمایل به محیطهای پایدار', 'نیاز به امنیت مالی و قابل پیشبینی'], 'خاکستری': ['خنثی و محافظهکار', 'دوری از موقعیتهای احساسی', 'اجتناب از مخاطره روانی'], 'سیاه': ['پایان، قدرت و رهایی', 'تمایل به اتمام فصول خاص زندگی', 'جستجوی سکوت یا پایان'] }; const comboFull = { '+0-7': { percent: '0.6 %', desc: 'آبی ↔ سیاه: جستجوی آرامش پس از فشار', stars: '★★★' }, '+1-6': { percent: '0.7 %', desc: 'سبز ↔ قهوهای: تعادل با ثبات جسمانی', stars: '★★' }, '+2-5': { percent: '1.2 %', desc: 'قرمز ↔ بنفش: نیاز به قدرت همراه تخیل', stars: '★' }, '+3-4': { percent: '1.5 %', desc: 'زرد ↔ زرد: نشاط دوگانه', stars: '★' } }; let order1 = [], order2 = [], phase = 1; function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.style.visibility = 'visible'; setTimeout(() => t.style.visibility = 'hidden', 1500); } function updateProgress() { const d = order1.length + (phase > 1 ? order2.length : 0); document.querySelector('#progress>div').style.width = (d / 16 * 100) + '%'; } function renderPalette(order, onDone) { const cont = document.getElementById('stage'); cont.innerHTML = ''; let displayColors = colors.filter(c => !order.includes(c)); if (order === order1 || order === order2) { displayColors = shuffle([...displayColors]); } document.getElementById('phase1-message').style.display = order === order1 ? 'block' : 'none'; displayColors.forEach(col => { const b = document.createElement('div'); b.className = 'color-box'; b.style.background = col.hex; b.innerHTML = `${col.name} (${col.hex})`; b.onclick = () => { order.push(col); b.classList.add('selected'); b.innerHTML += '✔'; showToast(`انتخاب: ${col.name} — ${descBase[col.name][0]}`); updateProgress(); setTimeout(() => { colors.filter(c => !order.includes(c)).length ? renderPalette(order, onDone) : onDone(); }, 300); }; cont.appendChild(b); }); } function startPhase2() { phase = 2; document.getElementById('pause').style.display = 'block'; let t = delaySec; document.getElementById('waitTime').textContent = t; const iv = setInterval(() => { t--; document.getElementById('waitTime').textContent = t; if (t c.name).join(' → '); res.innerHTML = `نتایج مرحله دوم${names2}`; res.innerHTML += `تحلیل رنگ اول و آخر (±) ترکیب%توضیحستاره`; const idxLast = colors.findIndex(c => c.name === order2[7].name); const key = `+0-${idxLast}`; const cd = comboFull[key] || { percent: '—', desc: 'بدون داده', stars: '—' }; res.innerHTML += `${key}${cd.percent}${cd.desc}${cd.stars}`; res.innerHTML += `تحلیل برای هر رنگ`; order2.forEach((c, i) => { res.innerHTML += ` ${c.name} (${symbols[i]}) ${descBase[c.name].map(desc => `${desc}`).join('')} `; }); res.innerHTML += ``; res.innerHTML += `نتیجهگیری شخصیت`; const topColors = order2.slice(0, 2).map(c => c.name); const middleColors = order2.slice(2, 4).map(c => c.name); const lastColor = order2[7].name; res.innerHTML += ` 1. ویژگیهای اصلی شخصیت انتخاب ${topColors[0]} و ${topColors[1]} بهعنوان رنگهای اول و دوم نشاندهنده اولویتهای اصلی شما در زندگی است. شما به ${descBase[topColors[0]][0]} و ${descBase[topColors[1]][0]} اهمیت زیادی میدهید. این نشان میدهد که شما فردی هستید که ${descBase[topColors[0]][1]} و ${descBase[topColors[1]][1]} را در رفتار و تصمیمگیریهای خود دنبال میکنید. بهعنوان مثال، ${topColors[0] === topColors[1] ? `تکرار ${topColors[0]} نشاندهنده تمرکز قوی بر ${descBase[topColors[0]][2]}` : `ترکیب ${topColors[0]} و ${topColors[1]} تعادلی بین ${descBase[topColors[0]][2]} و ${descBase[topColors[1]][2]} ایجاد میکند`}. 2. تمایلات میانی رنگهای میانی شما (${middleColors[0]} و ${middleColors[1]}) نشاندهنده ویژگیهای ثانویهای هستند که در زندگی روزمره شما نقش دارند. این رنگها بیانگر ${descBase[middleColors[0]][0]} و ${descBase[middleColors[1]][0]} هستند. شما احتمالاً در موقعیتهای خاص به ${descBase[middleColors[0]][1]} اهمیت میدهید و در عین حال ${descBase[middleColors[1]][2]} را در نظر دارید. 3. اجتناب یا نیاز کمتر انتخاب ${lastColor} در انتهای لیست نشان میدهد که در حال حاضر تمایل کمتری به ${descBase[lastColor][0]} دارید یا ممکن است از ${descBase[lastColor][2]} دوری کنید. این میتواند به این معنا باشد که شما در این مرحله از زندگی خود نیازی به ${descBase[lastColor][1]} احساس نمیکنید یا بهدنبال فاصله گرفتن از آن هستید. 4. تعادل کلی شخصیت ترکیب انتخابهای شما تعادلی بین ${descBase[topColors[0]][0].split('،')[0]}، ${descBase[topColors[1]][0].split('،')[0]} و دوری از ${descBase[lastColor][0].split('،')[0]} را نشان میدهد. شما فردی هستید که بهدنبال ${topColors[0] === 'آبی' || topColors[1] === 'آبی' ? 'آرامش و صلح در روابط و محیط زندگی' : topColors[0] === 'سبز' || topColors[1] === 'سبز' ? 'ثبات و کنترل در تصمیمگیریها' : topColors[0] === 'قرمز' || topColors[1] === 'قرمز' ? 'انرژی و موفقیت در چالشها' : 'خلاقیت و نوآوری'} هستید. این تعادل شما را به فردی تبدیل میکند که میتواند در موقعیتهای مختلف با ${descBase[topColors[0]][2]} و ${descBase[topColors[1]][2]} به خوبی عمل کند، در حالی که از ${descBase[lastColor][1]} دوری میکند. `; res.innerHTML += ``; const cnt = { قرمز: 0, آبی: 0, زرد: 0, سفید: 0 }; order2.forEach(c => { if (['قرمز', 'آبی', 'زرد'].includes(c.name)) cnt[c.name]++; else if (c.name === 'خاکستری') cnt['سفید']++; }); const total = 8; const data = Object.entries(cnt).map(([k, v]) => ({ color: k, value: v })); res.innerHTML += `تحلیل هارتمن`; const svg = d3.select('#pie').append('svg').attr('width', 300).attr('height', 300) .append('g').attr('transform', 'translate(150,150)'); const pie = d3.pie().value(d => d.value); const arc = d3.arc().innerRadius(0).outerRadius(150); const arcs = svg.selectAll('arc').data(pie(data)).enter().append('g'); arcs.append('path').attr('fill', (d, i) => ['red', 'blue', 'yellow', 'gray'][i]) .attr('d', arc); arcs.append('text') .attr('transform', d => `translate(${arc.centroid(d)})`) .attr('dy', '.35em') .attr('text-anchor', 'middle') .text(d => d.data.color); document.getElementById('print').style.display = 'block'; } renderPalette(order1, startPhase2);
