Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>اليوم الوطني السعودي 94 - أسئلة وأجوبة</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Noto Sans Arabic', sans-serif; | |
| background: linear-gradient(135deg, #004c3c 0%, #006a4e 50%, #00875a 100%); | |
| } | |
| .question-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .question-card:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .answer-reveal { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease; | |
| } | |
| .answer-reveal.active { | |
| max-height: 200px; | |
| } | |
| .flag-animation { | |
| animation: wave 3s ease-in-out infinite; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 50% { transform: rotate(5deg); } | |
| } | |
| .firework { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| animation: explode 1s ease-out forwards; | |
| } | |
| @keyframes explode { | |
| 0% { | |
| transform: scale(0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(20); | |
| opacity: 0; | |
| } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(45deg, #ffd700, #ffed4e); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .pulse-border { | |
| animation: pulse-border 2s infinite; | |
| } | |
| @keyframes pulse-border { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Vanta Background --> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <!-- Content --> | |
| <div class="relative z-10"> | |
| <!-- Header --> | |
| <header class="text-center py-16 px-4"> | |
| <div data-aos="fade-down" class="mb-8"> | |
| <h1 class="text-5xl md:text-7xl font-bold gradient-text mb-4">اليوم الوطني السعودي</h1> | |
| <p class="text-2xl text-white/90 font-medium">أسئلة وإجابات حول تاريخ المملكة</p> | |
| </div> | |
| <!-- Flag with Saudi Flag Emoji --> | |
| <div data-aos="zoom-in" class="inline-block"> | |
| <div class="w-40 h-24 bg-gradient-to-b from-[#006c35] via-white to-[#c60c30] relative flag-animation rounded-md shadow-2xl"> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center"> | |
| <span class="text-6xl">🇸🇦</span> | |
| <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-2xl font-bold text-white">اليوم الوطني</div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Questions Section --> | |
| <section class="max-w-4xl mx-auto px-4 pb-16"> | |
| <div class="grid gap-6"> | |
| <!-- Question 1 --> | |
| <div data-aos="fade-up" data-aos-delay="100" class="question-card rounded-2xl p-6"> | |
| <div class="flex items-start justify-between cursor-pointer" onclick="toggleAnswer(1)"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-2">السؤال الأول</h3> | |
| <p class="text-white/80 text-lg">ما اسم الملك الأول؟</p> | |
| </div> | |
| <i data-feather="chevron-down" id="icon-1" class="text-white transition-transform duration-300"></i> | |
| </div> | |
| <div id="answer-1" class="answer-reveal mt-4"> | |
| <div class="bg-white/10 rounded-lg p-4 border-l-4 border-yellow-400"> | |
| <p class="text-white text-lg font-semibold">الجواب: الملك عبدالعزيز آل سعود.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question 2 --> | |
| <div data-aos="fade-up" data-aos-delay="200" class="question-card rounded-2xl p-6"> | |
| <div class="flex items-start justify-between cursor-pointer" onclick="toggleAnswer(2)"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-2">السؤال الثاني</h3> | |
| <p class="text-white/80 text-lg">كم عمر المملكة العربية السعودية؟</p> | |
| </div> | |
| <i data-feather="chevron-down" id="icon-2" class="text-white transition-transform duration-300"></i> | |
| </div> | |
| <div id="answer-2" class="answer-reveal mt-4"> | |
| <div class="bg-white/10 rounded-lg p-4 border-l-4 border-yellow-400"> | |
| <p class="text-white text-lg font-semibold">الجواب: المملكة العربية السعودية مرت بأربعة فصول من التطور والتقدم منذ تأسيسها.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question 3 --> | |
| <div data-aos="fade-up" data-aos-delay="300" class="question-card rounded-2xl p-6"> | |
| <div class="flex items-start justify-between cursor-pointer" onclick="toggleAnswer(3)"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-2">السؤال الثالث</h3> | |
| <p class="text-white/80 text-lg">متى تم توحيد المملكة العربية السعودية؟</p> | |
| </div> | |
| <i data-feather="chevron-down" id="icon-3" class="text-white transition-transform duration-300"></i> | |
| </div> | |
| <div id="answer-3" class="answer-reveal mt-4"> | |
| <div class="bg-white/10 rounded-lg p-4 border-l-4 border-yellow-400"> | |
| <p class="text-white text-lg font-semibold">الجواب: تم توحيد المملكة العربية السعودية في عام 1932م.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question 4 --> | |
| <div data-aos="fade-up" data-aos-delay="400" class="question-card rounded-2xl p-6"> | |
| <div class="flex items-start justify-between cursor-pointer" onclick="toggleAnswer(4)"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-2">السؤال الرابع</h3> | |
| <p class="text-white/80 text-lg">متى اليوم الوطني السعودي؟</p> | |
| </div> | |
| <i data-feather="chevron-down" id="icon-4" class="text-white transition-transform duration-300"></i> | |
| </div> | |
| <div id="answer-4" class="answer-reveal mt-4"> | |
| <div class="bg-white/10 rounded-lg p-4 border-l-4 border-yellow-400"> | |
| <p class="text-white text-lg font-semibold">الجواب: اليوم الوطني السعودي في 23 سبتمبر من كل عام</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Celebration Button --> | |
| <div data-aos="zoom-in" data-aos-delay="500" class="text-center mt-12"> | |
| <button onclick="createFireworks()" class="bg-gradient-to-r from-yellow-400 to-yellow-600 text-green-800 font-bold py-4 px-8 rounded-full text-xl hover:scale-105 transition-transform pulse-border"> | |
| <i data-feather="star" class="inline w-6 h-6 ml-2"></i> | |
| اليوم الوطني السعودي | |
| </button> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Scripts --> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Vanta | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x006c35, | |
| color2: 0x4a90e2, | |
| size: 1.00, | |
| backgroundColor: 0x004c3c | |
| }); | |
| // Toggle answer function | |
| function toggleAnswer(questionNumber) { | |
| const answer = document.getElementById(`answer-${questionNumber}`); | |
| const icon = document.getElementById(`icon-${questionNumber}`); | |
| if (answer.classList.contains('active')) { | |
| answer.classList.remove('active'); | |
| icon.style.transform = 'rotate(0deg)'; | |
| } else { | |
| // Close all other answers | |
| for (let i = 1; i <= 4; i++) { | |
| document.getElementById(`answer-${i}`).classList.remove('active'); | |
| document.getElementById(`icon-${i}`).style.transform = 'rotate(0deg)'; | |
| } | |
| // Open clicked answer | |
| answer.classList.add('active'); | |
| icon.style.transform = 'rotate(180deg)'; | |
| } | |
| } | |
| // Create fireworks | |
| function createFireworks() { | |
| const colors = ['#ffd700', '#ffffff', '#006c35']; | |
| const container = document.body; | |
| for (let i = 0; i < 15; i++) { | |
| setTimeout(() => { | |
| const firework = document.createElement('div'); | |
| firework.className = 'firework'; | |
| firework.style.left = Math.random() * 100 + '%'; | |
| firework.style.top = Math.random() * 100 + '%'; | |
| firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| container.appendChild(firework); | |
| setTimeout(() => firework.remove(), 1000); | |
| }, i * 100); | |
| } | |
| } | |
| // Auto-reveal first answer after 2 seconds | |
| setTimeout(() => { | |
| toggleAnswer(1); | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> | |