Spaces:

Rayan545454
/

rr444

Running

App Files Files Community

Rayan545454 commited on Sep 13, 2025

Commit

6c9efad

verified ·

1 Parent(s): 502928b

إلغاء عيد الوطني أضف اليوم الوطني فقط - Initial Deployment

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +271 -18
prompts.txt +15 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Rr444
-emoji: 📉
-colorFrom: pink
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: rr444
+emoji: 🐳
+colorFrom: green
 colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,272 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,15 @@

+سوال و وجاوب ريبورت عن اليوم الوطني السعودي
+السؤال الأول: ما اسم الملك الأول؟
+الجواب: الملك عبدالعزيز آل سعود.
+السؤال الثاني: كم عمر المملكة العربية السعودية؟
+الجواب: المملكة العربية السعودية مرت بأربعة فصول من التطور والتقدم منذ تأسيسها.
+السؤال الثالث: متى تم توحيد المملكة العربية السعودية؟
+الجواب: تم توحيد المملكة العربية السعودية في عام 1932م.
+السؤال الرابع: متى اليوم الوطني السعودي؟
+الجواب: اليوم الوطني السعودي في 23 سبتمبر من كل عام، ويحتفل هذا العام بالذكرى الـ94
+العلم السعودي 🇸🇦
+إلغاء عيد الوطني أضف اليوم الوطني فقط