Update index.html

index.html

@@ -51,7 +51,7 @@
             pointer-events: none;
         }
 
-        /* استایل‌های اختصاصی کلیدهای مستطیلی هم‌اندازه پس از فعال‌سازی */
+        /* کلید انتخابی کلی پس از فعال‌سازی */
         .mbti-option-input:checked + .mbti-option-card {
             color: #ffffff !important;
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
@@ -60,31 +60,44 @@
             color: #ffffff !important;
         }
 
-        /* رنگ‌بندی داینامیک کلیدها بر اساس فاکتور رنگ دریافتی از پایتون */
-        .option-1:checked + .mbti-option-card {
-            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(4, 120, 87, 0.25)) !important;
-            border-color: #10b981 !important;
-            box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important;
+        /* استایل اختصاصی گزینه‌های فعال آزمون MBTI (تم بنفش و نیلی) */
+        .test-mbti .mbti-option-input:checked + .mbti-option-card {
+            background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(124, 58, 237, 0.25)) !important;
+            border-color: #6366f1 !important;
+            box-shadow: 0 0 15px rgba(99, 102, 241, 0.3) !important;
         }
-        .option-2:checked + .mbti-option-card {
-            background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(15, 118, 110, 0.2)) !important;
+        .test-mbti .mbti-option-card span:first-child {
+            color: #818cf8 !important;
+        }
+
+        /* استایل اختصاصی گزینه‌های فعال آزمون اضطراب بک BAI (تم قرمز و صورتی تیره) */
+        .test-bai .mbti-option-input:checked + .mbti-option-card {
+            background: linear-gradient(135deg, rgba(244, 63, 94, 0.25), rgba(225, 29, 72, 0.25)) !important;
+            border-color: #f43f5e !important;
+            box-shadow: 0 0 15px rgba(244, 63, 94, 0.3) !important;
+        }
+        .test-bai .mbti-option-card span:first-child {
+            color: #fb7185 !important;
+        }
+
+        /* استایل اختصاصی گزینه‌های فعال آزمون افسردگی بک BDI (تم زمردی و سبزآبی) */
+        .test-bdi .mbti-option-input:checked + .mbti-option-card {
+            background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(13, 148, 136, 0.25)) !important;
             border-color: #14b8a6 !important;
-            box-shadow: 0 0 15px rgba(20, 184, 166, 0.15) !important;
+            box-shadow: 0 0 15px rgba(20, 184, 166, 0.3) !important;
         }
-        .option-3:checked + .mbti-option-card {
-            background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(71, 85, 105, 0.2)) !important;
-            border-color: #94a3b8 !important;
-            box-shadow: 0 0 10px rgba(148, 163, 184, 0.15) !important;
+        .test-bdi .mbti-option-card span:first-child {
+            color: #2dd4bf !important;
         }
-        .option-4:checked + .mbti-option-card {
-            background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(190, 24, 74, 0.2)) !important;
-            border-color: #f43f5e !important;
-            box-shadow: 0 0 15px rgba(244, 63, 94, 0.15) !important;
+
+        /* استایل اختصاصی گزینه‌های فعال آزمون اهمال‌کاری سولومون (تم نارنجی و کهربایی) */
+        .test-solomon .mbti-option-input:checked + .mbti-option-card {
+            background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.25)) !important;
+            border-color: #f59e0b !important;
+            box-shadow: 0 0 15px rgba(245, 158, 11, 0.3) !important;
         }
-        .option-5:checked + .mbti-option-card {
-            background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.25)) !important;
-            border-color: #ef4444 !important;
-            box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) !important;
+        .test-solomon .mbti-option-card span:first-child {
+            color: #fbbf24 !important;
         }
 
         /* قالب رندر گزارش مارک‌داون تفصیلی */
@@ -539,17 +552,17 @@
                 const qDiv = document.createElement('div');
                 qDiv.className = "ios-glass-light p-5 rounded-2xl border border-white/5 space-y-4 transition-all hover:border-white/10";
                 
-                // ایجاد کاملاً داینامیک دکمه‌های گزینه‌ها بر اساس دیتای ارسالی پایتون
-                let optionsMarkup = `<div class="grid grid-cols-2 sm:grid-cols-${q.options.length} gap-1.5 sm:gap-3 max-w-2xl mx-auto py-2">`;
+                // ردیف افقی یکپارچه، کوچک و ریسپانسیو بدون شکستگی خط
+                let optionsMarkup = `<div class="grid grid-cols-${q.options.length} gap-1 sm:gap-2 w-full max-w-3xl mx-auto py-2 test-${selectedTest}">`;
                 
                 q.options.forEach((opt) => {
                     const isChecked = answeredVal === opt.score ? 'checked' : '';
                     optionsMarkup += `
                         <label class="cursor-pointer block w-full">
-                            <input type="radio" name="q_${q.id}" value="${opt.score}" ${isChecked} onchange="saveAnswer(${q.id}, ${opt.score})" class="sr-only mbti-option-input option-${opt.color}">
-                            <div class="mbti-option-card w-full text-center py-2.5 sm:py-3.5 px-1 sm:px-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-indigo-500/5 backdrop-blur-md transition-all duration-300 flex flex-col items-center justify-center gap-1 min-h-[72px] sm:min-h-[85px]">
-                                <span class="text-[10px] sm:text-xs font-black text-indigo-400 transition">${opt.label}</span>
-                                <span class="text-[8px] sm:text-[10px] md:text-[11px] font-bold text-slate-300 leading-tight">${opt.text}</span>
+                            <input type="radio" name="q_${q.id}" value="${opt.score}" ${isChecked} onchange="saveAnswer(${q.id}, ${opt.score})" class="sr-only mbti-option-input">
+                            <div class="mbti-option-card w-full text-center py-1.5 px-0.5 sm:py-2.5 sm:px-2 rounded-xl sm:rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 backdrop-blur-md transition-all duration-300 flex flex-col items-center justify-center gap-0.5 min-h-[52px] sm:min-h-[76px]">
+                                <span class="text-[7px] sm:text-[10px] md:text-xs font-black text-indigo-400 transition leading-none">${opt.label}</span>
+                                <span class="text-[6px] sm:text-[9px] md:text-[10px] font-bold text-slate-300 leading-tight">${opt.text}</span>
                             </div>
                         </label>
                     `;