<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مسابقة المجتمع اليمني - الصف الأول الثانوي</title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Amiri:wght@700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
:root {
--primary: #8b1e22;
--primary-dark: #641115;
--gold: #d4af37;
--gold-dark: #aa820a;
--accent: #1e3a8a;
--bg: #f8fafc;
--card-bg: #ffffff;
--text: #1e293b;
--success: #16a34a;
--error: #dc2626;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', sans-serif; }
body {
background: radial-gradient(circle at top, #fdfbf7 0%, #e2e8f0 100%);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
}
.quiz-container {
background: var(--card-bg);
border-radius: 24px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.05);
border: 3px solid var(--gold);
width: 100%;
max-width: 680px;
padding: 30px;
position: relative;
overflow: hidden;
}
.header-tag {
background: var(--primary);
color: #fff;
display: inline-block;
padding: 6px 18px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 12px;
box-shadow: 0 4px 10px rgba(139, 30, 34, 0.25);
}
h1 { color: var(--primary); font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; }
.subtitle { color: #64748b; font-size: 0.95rem; margin-bottom: 20px; }
/* Input Screen */
.input-box { margin: 20px 0; text-align: right; }
.input-box label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--primary-dark); }
.input-box input {
width: 100%;
padding: 14px 18px;
border: 2px solid #cbd5e1;
border-radius: 12px;
font-size: 1.05rem;
font-family: inherit;
outline: none;
transition: all 0.2s;
}
.input-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(139, 30, 34, 0.15); }
/* Buttons */
.btn-main {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: #fff;
border: none;
padding: 14px 28px;
border-radius: 14px;
font-size: 1.15rem;
font-weight: 700;
cursor: pointer;
width: 100%;
box-shadow: 0 8px 18px rgba(139, 30, 34, 0.3);
transition: 0.2s transform, 0.2s box-shadow;
}
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(139, 30, 34, 0.4); }
/* Question Styles */
.progress-bar-container {
background: #e2e8f0;
height: 10px;
border-radius: 20px;
margin: 15px 0 20px;
overflow: hidden;
}
.progress-fill {
background: linear-gradient(90deg, var(--gold), var(--primary));
height: 100%;
width: 0%;
transition: width 0.3s ease;
}
.q-meta {
display: flex;
justify-content: space-between;
color: #64748b;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 10px;
}
.q-text {
font-size: 1.25rem;
font-weight: 800;
color: #1e293b;
line-height: 1.6;
margin-bottom: 24px;
background: #f8fafc;
padding: 16px;
border-radius: 16px;
border-right: 5px solid var(--primary);
}
.options-grid { display: grid; gap: 12px; }
.option-btn {
background: #fff;
border: 2px solid #e2e8f0;
padding: 14px 18px;
border-radius: 14px;
font-size: 1.05rem;
font-weight: 700;
text-align: right;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.2s;
}
.option-btn:hover { border-color: var(--gold); background: #fffdf5; transform: translateX(-4px); }
.option-btn .opt-badge {
background: #f1f5f9;
color: #475569;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 0.95rem;
}
.option-btn.correct { background: #dcfce7 !important; border-color: var(--success) !important; color: #14532d; }
.option-btn.wrong { background: #fee2e2 !important; border-color: var(--error) !important; color: #7f1d1d; }
/* True/False Buttons */
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tf-btn {
padding: 20px;
border-radius: 16px;
border: 2px solid #e2e8f0;
font-size: 1.25rem;
font-weight: 800;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: #fff;
transition: 0.2s;
}
.tf-btn:hover { transform: translateY(-3px); }
.tf-btn.correct { background: #dcfce7 !important; border-color: var(--success) !important; }
.tf-btn.wrong { background: #fee2e2 !important; border-color: var(--error) !important; }
/* Certificate Styles */
.certificate-wrapper {
display: none;
background: #fff;
border: 10px double var(--gold);
border-radius: 16px;
padding: 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
position: relative;
}
.cert-title { font-family: 'Amiri', serif; font-size: 2.2rem; color: var(--primary); margin-bottom: 8px; }
.cert-student { font-size: 1.7rem; font-weight: 900; color: #0f172a; border-bottom: 2px dashed var(--gold); display: inline-block; padding: 0 30px 6px; margin: 15px 0; }
.cert-body { font-size: 1.1rem; line-height: 1.9; color: #334155; margin-bottom: 25px; }
.cert-score-badge {
background: #fef3c7;
border: 2px solid var(--gold);
color: #78350f;
display: inline-block;
padding: 10px 24px;
border-radius: 50px;
font-size: 1.3rem;
font-weight: 900;
margin-bottom: 20px;
}
.cert-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; padding: 0 20px; }
.cert-sign { font-weight: 700; color: #475569; }
.cert-seal {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px dashed var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 800;
color: var(--gold-dark);
transform: rotate(-15deg);
}
.btn-print {
background: #0f172a;
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
}
@media print {
body * { visibility: hidden; }
.certificate-wrapper, .certificate-wrapper * { visibility: visible; }
.certificate-wrapper { position: absolute; left: 0; top: 0; width: 100%; border: 8px double #aa820a; box-shadow: none; }
.btn-print { display: none; }
}
</style>
</head>
<body>
<div class="quiz-container" id="quizContainer">
<!-- Screen 1: Start -->
<div id="startScreen" style="text-align: center;">
<span class="header-tag">المملكة النباتية والمجتمع</span>
<h1>مسابقة مادة المجتمع اليمني</h1>
<p class="subtitle">الصف الأول الثانوي • اختبر معلوماتك وتفوق</p>
<div class="input-box">
<label for="studentName">اسم الطالبة الثلاثي:</label>
<input type="text" id="studentName" placeholder="مثال: فاطمة أحمد علي" autocomplete="off">
</div>
<button class="btn-main" onclick="startQuiz()">ابدأ المسابقة الآن ✨</button>
</div>
<!-- Screen 2: Game Board -->
<div id="gameScreen" style="display: none;">
<div class="q-meta">
<span id="questionCategory">القسم الأول: اختيارات</span>
<span id="questionCounter">السؤال 1 من 14</span>
</div>
<div class="progress-bar-container">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="q-text" id="questionText">نص السؤال يظهر هنا...</div>
<div id="optionsContainer"></div>
</div>
<!-- Screen 3: Certificate -->
<div class="certificate-wrapper" id="certScreen">
<div