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>عرض اليوم الوطني - دبلومات غرفة الزلفي</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🇸🇦</text></svg>"> | |
| <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://unpkg.com/feather-icons"></script> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .float-animation { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); } | |
| 50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.4); } | |
| } | |
| .pulse-glow { | |
| animation: pulse-glow 2s ease-in-out infinite; | |
| } | |
| @keyframes countdown { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .countdown-animation { | |
| animation: countdown 1s ease-in-out infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%); | |
| } | |
| .text-shadow { | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .glass-effect { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .whatsapp-button { | |
| transition: all 0.3s ease; | |
| background: linear-gradient(45deg, #25D366, #128C7E); | |
| } | |
| .whatsapp-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4); | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background: #fbbf24; | |
| animation: confetti-fall 3s linear infinite; | |
| } | |
| @keyframes confetti-fall { | |
| 0% { | |
| transform: translateY(-100vh) rotate(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(100vh) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen overflow-x-hidden"> | |
| <!-- Confetti Animation --> | |
| <div id="confetti-container"></div> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center px-4"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-green-500 rounded-full filter blur-3xl animate-pulse"></div> | |
| <div class="absolute top-3/4 right-1/4 w-96 h-96 bg-white rounded-full filter blur-3xl animate-pulse delay-1000"></div> | |
| </div> | |
| <div class="text-center z-10 max-w-4xl mx-auto" data-aos="fade-up"> | |
| <!-- Saudi Flag Emoji --> | |
| <div class="text-8xl mb-6 float-animation">🇸🇦</div> | |
| <!-- Main Title --> | |
| <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 text-shadow"> | |
| عرض اليوم الوطني | |
| </h1> | |
| <!-- Subtitle --> | |
| <p class="text-xl md:text-2xl text-yellow-300 mb-8 font-semibold"> | |
| دبلومات غرفة الزلفي - خصم خاص بمناسبة اليوم الوطني | |
| </p> | |
| <!-- Offer Badge --> | |
| <div class="inline-block bg-red-600 text-white px-8 py-4 rounded-full text-2xl font-bold mb-8 pulse-glow"> | |
| <i data-feather="percent" class="inline-block w-6 h-6 ml-2"></i> | |
| خصم اليوم الوطني | |
| </div> | |
| <!-- Instructions Card --> | |
| <div class="glass-effect rounded-2xl p-8 mb-8 max-w-2xl mx-auto"> | |
| <h2 class="text-2xl font-bold text-white mb-4">للاستفادة من العرض:</h2> | |
| <div class="text-white text-lg space-y-3"> | |
| <p class="flex items-center justify-center"> | |
| <i data-feather="message-circle" class="w-5 h-5 ml-2"></i> | |
| أرسل على الواتساب: <span class="mr-1 font-bold text-yellow-300">"سجل الآن"</span> | |
| </p> | |
| <p class="text-sm text-gray-200">واذكر البيانات التالية:</p> | |
| <div class="bg-white/20 rounded-lg p-4 mt-4"> | |
| <p class="text-xl font-bold text-yellow-300"> | |
| • الاسم: ريان بن خالد | |
| </p> | |
| </div> | |
| <p class="text-lg text-green-300 font-semibold"> | |
| وبإذن الله يوصلك الخصم | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Countdown Timer --> | |
| <div class="mb-8"> | |
| <p class="text-white text-xl mb-4">العرض ينتهي خلال:</p> | |
| <div id="countdown" class="flex justify-center space-x-4 space-x-reverse text-center"> | |
| <div class="bg-white/20 rounded-lg p-4 countdown-animation"> | |
| <div id="days" class="text-3xl font-bold text-white">00</div> | |
| <div class="text-sm text-gray-300">يوم</div> | |
| </div> | |
| <div class="bg-white/20 rounded-lg p-4 countdown-animation" style="animation-delay: 0.1s;"> | |
| <div id="hours" class="text-3xl font-bold text-white">00</div> | |
| <div class="text-sm text-gray-300">ساعة</div> | |
| </div> | |
| <div class="bg-white/20 rounded-lg p-4 countdown-animation" style="animation-delay: 0.2s;"> | |
| <div id="minutes" class="text-3xl font-bold text-white">00</div> | |
| <div class="text-sm text-gray-300">دقيقة</div> | |
| </div> | |
| <div class="bg-white/20 rounded-lg p-4 countdown-animation" style="animation-delay: 0.3s;"> | |
| <div id="seconds" class="text-3xl font-bold text-white">00</div> | |
| <div class="text-sm text-gray-300">ثانية</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- WhatsApp Button --> | |
| <div class="flex flex-col items-center space-y-4"> | |
| <a href="tel:+966530893127" class="bg-green-600 inline-flex items-center text-white font-bold py-4 px-8 rounded-full text-xl shadow-lg transform transition-all duration-300 hover:scale-110"> | |
| <i data-feather="phone" class="w-6 h-6 ml-2"></i> | |
| +966 53 089 3127 | |
| </a> | |
| <a href="https://wa.me/966530893127?text=%D8%B3%D8%AC%D9%84%20%D8%A7%D9%84%D8%A2%D9%86%0A%0A%D8%A7%D9%84%D8%A7%D8%B3%D9%85%3A%20%D8%B1%D9%8A%D8%A7%D9%86%20%D8%A8%D9%86%20%D8%AE%D8%A7%D9%84%D8%AF" | |
| class="whatsapp-button inline-flex items-center text-white font-bold py-4 px-8 rounded-full text-xl shadow-lg transform transition-all duration-300 hover:scale-110"> | |
| <i data-feather="send" class="w-6 h-6 ml-2"></i> | |
| واتساب | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-16 bg-white/10"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h3 class="text-3xl font-bold text-white mb-8" data-aos="fade-up">تواصل مباشرة</h3> | |
| <div class="bg-white rounded-2xl p-8 max-w-md mx-auto" data-aos="fade-up" data-aos-delay="200"> | |
| <p class="text-gray-700 text-2xl font-bold mb-4">+966 53 089 3127</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="tel:+966530893127" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition"> | |
| <i data-feather="phone" class="w-5 h-5 inline-block ml-2"></i> | |
| اتصال مباشر | |
| </a> | |
| <button onclick="copyToClipboard()" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition"> | |
| <i data-feather="copy" class="w-5 h-5 inline-block ml-2"></i> | |
| نسخ الرقم | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 1000, | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Countdown Timer | |
| function updateCountdown() { | |
| const endDate = new Date(); | |
| endDate.setDate(endDate.getDate() + 7); // 7 days from now | |
| const now = new Date().getTime(); | |
| const distance = endDate - now; | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| document.getElementById('days').textContent = days.toString().padStart(2, '0'); | |
| document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); | |
| document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); | |
| document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // Copy to Clipboard | |
| function copyToClipboard() { | |
| const text = '+966530893127'; | |
| navigator.clipboard.writeText(text).then(() => { | |
| alert('تم نسخ الرقم بنجاح!'); | |
| }); | |
| } | |
| // Create Confetti | |
| function createConfetti() { | |
| const container = document.getElementById('confetti-container'); | |
| const colors = ['#fbbf24', '#ef4444', '#10b981', '#3b82f6', '#8b5cf6']; | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.left = Math.random() * 100 + 'vw'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.animationDelay = Math.random() * 3 + 's'; | |
| container.appendChild(confetti); | |
| setTimeout(() => confetti.remove(), 3000); | |
| } | |
| } | |
| // Create confetti every 3 seconds | |
| setInterval(createConfetti, 3000); | |
| createConfetti(); | |
| // Add floating animation to button on hover | |
| document.querySelector('.whatsapp-button').addEventListener('mouseenter', function() { | |
| this.classList.add('float-animation'); | |
| }); | |
| document.querySelector('.whatsapp-button').addEventListener('mouseleave', function() { | |
| this.classList.remove('float-animation'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |