| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GovJam 2025 - منصة تحليل تأثير الإعلام الذكي</title> |
| |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
|
|
| <style> |
| |
| body { |
| font-family: 'Tajawal', sans-serif; |
| scroll-behavior: smooth; |
| } |
| .hero-gradient { |
| background: linear-gradient(135deg, rgba(0, 76, 36, 0.95) 0%, rgba(0, 51, 24, 0.95) 100%); |
| } |
| .section-gradient { |
| background: linear-gradient(180deg, #F7FAFC 0%, #FFFFFF 100%); |
| } |
| .pattern-bg { |
| background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23004c24" fill-opacity="0.04"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); |
| } |
| .solution-card:hover .solution-icon { |
| transform: translateY(-10px) scale(1.1); |
| } |
| .tab-button.active { |
| background-color: #006C35; |
| color: white; |
| } |
| |
| .reveal { |
| opacity: 0; |
| transform: translateY(30px); |
| transition: opacity 0.8s ease-out, transform 0.8s ease-out; |
| } |
| .reveal.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
|
|
| |
| <header class="bg-white/80 backdrop-blur-md shadow-md sticky top-0 z-50"> |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| <a href="#home" class="flex items-center space-x-2 space-x-reverse"> |
| <i class="fas fa-chart-line text-green-700 text-2xl"></i> |
| <span class="text-xl font-bold text-green-800">تحليل الإعلام الذكي</span> |
| </a> |
| <nav class="hidden md:flex items-center space-x-6 space-x-reverse"> |
| <a href="#home" class="text-green-700 font-bold border-b-2 border-green-700 pb-1">الرئيسية</a> |
| <a href="#solutions" class="text-gray-600 hover:text-green-700 transition">حلولنا</a> |
| <a href="#dashboard" class="text-gray-600 hover:text-green-700 transition">لوحة البيانات</a> |
| <a href="#videos" class="text-gray-600 hover:text-green-700 transition">مكتبة الفيديو</a> |
| <a href="#volunteer" class="text-gray-600 hover:text-green-700 transition">تطوع معنا</a> |
| <a href="#contact" class="text-gray-600 hover:text-green-700 transition">تواصل معنا</a> |
| </nav> |
| <div class="flex items-center"> |
| <button id="lang-toggle" class="bg-gray-200 text-green-800 px-4 py-2 rounded-lg font-semibold hover:bg-gray-300 transition hidden md:block">English</button> |
| |
| <a href="dashboard.html" class="bg-green-700 text-white px-5 py-2 rounded-lg font-semibold hover:bg-green-800 transition ml-4">دخول المنصة</a> |
| <button class="md:hidden text-gray-700 ml-4" id="mobile-menu-button"><i class="fas fa-bars text-2xl"></i></button> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"><a href="#home" class="block py-2 px-6 text-green-700 font-bold">الرئيسية</a><a href="#solutions" class="block py-2 px-6 text-gray-600">حلولنا</a><a href="#dashboard" class="block py-2 px-6 text-gray-600">لوحة البيانات</a><a href="#videos" class="block py-2 px-6 text-gray-600">مكتبة الفيديو</a><a href="#volunteer" class="block py-2 px-6 text-gray-600">تطوع معنا</a><a href="#contact" class="block py-2 px-6 text-gray-600">تواصل معنا</a></div> |
| </header> |
|
|
| <main> |
| |
| <section id="home" class="relative text-white py-24 md:py-32 overflow-hidden"> |
| <div class="absolute inset-0 hero-gradient"></div> |
| <img src="images/hero-background.jpg" class="absolute inset-0 w-full h-full object-cover opacity-10" alt="Riyadh Skyline"> |
| <div class="container mx-auto px-6 relative z-10 flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-3/5 text-center lg:text-right mb-12 lg:mb-0"> |
| <img src="vision-2030-logo.png" class="h-16 mb-6 mx-auto lg:mx-0" alt="Vision 2030"> |
| <h1 class="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">قياس صدى الإعلام السعودي عالميًا بقوة الذكاء الاصطناعي</h1> |
| <p class="text-xl md:text-2xl mb-8 opacity-90">تحدي وطني مبتكر تحت مظلة GovJam 2025 لتطوير حلول تقنية تقيس وتتنبأ بتأثير وكالة الأنباء السعودية (واس) والمحتوى الوطني.</p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"> |
| <a href="#register" class="bg-yellow-400 text-green-900 px-8 py-4 rounded-lg font-bold text-lg hover:bg-yellow-300 transition transform hover:scale-105">شارك في التحدي الآن</a> |
| <a href="video.html" class="border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-green-700 transition">شاهد الفيديو التعريفي <i class="fas fa-play mr-2"></i></a> |
| </div> |
| </div> |
| <div class="lg:w-2/5 flex justify-center"> |
| <div class="bg-white/10 backdrop-blur-xl rounded-2xl p-6 w-full max-w-sm shadow-2xl border border-white/20"> |
| <h3 class="font-bold text-xl text-center mb-4">بيانات حية من (واس)</h3> |
| <div class="space-y-4"> |
| <div class="bg-white/20 p-4 rounded-lg"> |
| <div class="flex justify-between items-center"> |
| <span class="opacity-80">خبر منشور هذا اليوم</span> |
| <div class="text-2xl font-bold" id="news-counter">0</div> |
| </div> |
| </div> |
| <div class="bg-white/20 p-4 rounded-lg"> |
| <div class="flex justify-between items-center"> |
| <span class="opacity-80">صورة بثت عالميًا</span> |
| <div class="text-2xl font-bold" id="images-counter">0</div> |
| </div> |
| </div> |
| <div class="bg-white/20 p-4 rounded-lg"> |
| <div class="flex justify-between items-center"> |
| <span class="opacity-80">معدل التغطية الإيجابية</span> |
| <div class="text-2xl font-bold" id="sentiment-counter">0%</div> |
| </div> |
| </div> |
| </div> |
| <img src="spa-logo-white.png" class="h-10 mx-auto mt-6 opacity-80" alt="SPA Logo"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="solutions" class="py-20 pattern-bg"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="text-4xl font-extrabold text-green-900 mb-4 reveal">حلولنا المطلوبة: الذكاء في خدمة الإعلام</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-16 reveal">ندعو المبتكرين لتطوير حلول تركز على ثلاثة محاور رئيسية لسد الفجوة بين إنتاج المحتوى وقياس تأثيره.</p> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="solution-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 reveal"> |
| <div class="solution-icon bg-green-100 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 transition-transform duration-300"> |
| <img src="solution-icon-news.png" class="h-16" alt="News Icon"> |
| </div> |
| <h3 class="text-2xl font-bold text-green-800 mb-3">متتبع الأخبار الذكي</h3> |
| <p class="text-gray-600">نظام AI يكتشف تلقائيًا الأخبار المعاد صياغتها عبر آلاف المصادر العالمية ليعطيك صورة كاملة للانتشار الحقيقي.</p> |
| </div> |
| <div class="solution-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 reveal" style="transition-delay: 0.2s;"> |
| <div class="solution-icon bg-green-100 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 transition-transform duration-300"> |
| <img src="solution-icon-sentiment.png" class="h-16" alt="Sentiment Icon"> |
| </div> |
| <h3 class="text-2xl font-bold text-green-800 mb-3">محرك تحليل المشاعر المتقدم</h3> |
| <p class="text-gray-600">يتجاوز التصنيف السطحي (إيجابي/سلبي)، ليحلل السياق واللهجة والمشاعر الدقيقة في التغطيات الإعلامية بلغات متعددة.</p> |
| </div> |
| <div class="solution-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 reveal" style="transition-delay: 0.4s;"> |
| <div class="solution-icon bg-green-100 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 transition-transform duration-300"> |
| <img src="solution-icon-images.png" class="h-16" alt="Images Icon"> |
| </div> |
| <h3 class="text-2xl font-bold text-green-800 mb-3">راصد الصور العالمي (واس)</h3> |
| <p class="text-gray-600">باستخدام رؤية الحاسوب، يتم تتبع صور وكالة الأنباء السعودية وتحديد أماكن استخدامها حول العالم بدقة.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="dashboard" class="py-20 section-gradient"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-12"> |
| <h2 class="text-4xl font-extrabold text-green-900 mb-4 reveal">لمحة عن لوحة البيانات التفاعلية</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto reveal">تصور للبيانات والرؤى التي يمكن للحلول المبتكرة أن تقدمها عبر منصة موحدة.</p> |
| </div> |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden reveal"> |
| <div class="p-6 border-b border-gray-200"> |
| <div class="flex flex-col sm:flex-row justify-between items-center"> |
| <h3 class="text-xl font-bold text-green-800 mb-4 sm:mb-0">تحليل التغطية عبر المنصات</h3> |
| <div class="flex space-x-1 space-x-reverse bg-gray-100 p-1 rounded-lg" id="tabs-container"> |
| <button class="tab-button px-4 py-2 rounded-md transition active" data-target="twitter-content"> |
| <i class="fab fa-twitter mr-2"></i> X (Twitter) |
| </button> |
| <button class="tab-button px-4 py-2 rounded-md transition" data-target="news-content"> |
| <i class="fas fa-globe mr-2"></i> وكالات الأنباء |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="p-8"> |
| <div id="twitter-content" class="tab-content grid md:grid-cols-2 gap-8 items-center"> |
| <div> |
| <h4 class="text-2xl font-bold mb-4">أبرز المواضيع المتداولة على X</h4> |
| <p class="text-gray-600 mb-6">تحليل فوري للهاشتاجات والكلمات المفتاحية الأكثر ارتباطًا بالمحتوى السعودي، مما يوفر رؤى قيمة حول اهتمامات الجمهور العالمي.</p> |
| <div class="flex items-center text-green-700 font-semibold"><i class="fas fa-check-circle mr-2"></i> رصد الحملات الإعلامية</div> |
| <div class="flex items-center text-green-700 font-semibold mt-2"><i class="fas fa-check-circle mr-2"></i> تحديد المؤثرين الرئيسيين</div> |
| </div> |
| <div><img src="images/chart-placeholder-1.png" class="rounded-lg shadow-md" alt="Twitter Chart"></div> |
| </div> |
| <div id="news-content" class="tab-content hidden grid md:grid-cols-2 gap-8 items-center"> |
| <div> |
| <h4 class="text-2xl font-bold mb-4">التغطية في وكالات الأنباء العالمية</h4> |
| <p class="text-gray-600 mb-6">خريطة تفاعلية توضح مدى انتشار أخبار (واس) في أهم وكالات الأنباء العالمية، مع تحليل لعدد مرات إعادة النشر ونبرة التغطية.</p> |
| <div class="flex items-center text-green-700 font-semibold"><i class="fas fa-check-circle mr-2"></i> قياس مدى الوصول الجغرافي</div> |
| <div class="flex items-center text-green-700 font-semibold mt-2"><i class="fas fa-check-circle mr-2"></i> تقييم سمعة المحتوى</div> |
| </div> |
| <div><img src="images/saudi-map.png" class="rounded-lg shadow-md" alt="News Map"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="videos" class="py-20 pattern-bg"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="text-4xl font-extrabold text-green-900 mb-4 reveal">مكتبة الفيديو</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12 reveal">شاهد المزيد عن التحدي، وكالة الأنباء السعودية، ورؤية المملكة 2030.</p> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden reveal"> |
| <div class="relative"> |
| <img src="images/video-preview-spa.jpg" class="w-full h-56 object-cover" alt="SPA Video Preview"> |
| <a href="#" class="absolute inset-0 flex items-center justify-center bg-black/40 text-white text-5xl play-button-overlay"><i class="fas fa-play-circle"></i></a> |
| </div> |
| <div class="p-6"> |
| <h3 class="font-bold text-xl mb-2">وكالة الأنباء السعودية: تاريخ وإنجاز</h3> |
| <p class="text-gray-600">**الوصف المطلوب:** فيديو وثائقي قصير يبرز تاريخ وكالة الأنباء السعودية ودورها المحوري كمصدر رسمي لأخبار المملكة.</p> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden reveal" style="transition-delay: 0.2s;"> |
| <div class="relative"> |
| <img src="images/video-preview-vision2030.jpg" class="w-full h-56 object-cover" alt="Vision 2030 Video Preview"> |
| <a href="#" class="absolute inset-0 flex items-center justify-center bg-black/40 text-white text-5xl play-button-overlay"><i class="fas fa-play-circle"></i></a> |
| </div> |
| <div class="p-6"> |
| <h3 class="font-bold text-xl mb-2">رؤية 2030: التحول الرقمي والإعلام</h3> |
| <p class="text-gray-600">**الوصف المطلوب:** فيديو حماسي وملهم يعرض مشاريع التحول الرقمي في المملكة وكيف يساهم الإعلام الجديد في تحقيق مستهدفات الرؤية.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 section-gradient"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-4xl font-extrabold text-green-900 mb-12 text-center reveal">آراء الخبراء</h2> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="bg-white p-8 rounded-2xl shadow-xl reveal"> |
| <div class="flex items-center mb-4"> |
| <img src="expert-1.jpg" class="w-16 h-16 rounded-full object-cover mr-4" alt="Expert 1"> |
| <div> |
| <h4 class="font-bold text-lg">م. فيصل </h4> |
| <p class="text-sm text-gray-500">خبير استراتيجيات البيانات</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"هذا التحدي ليس مجرد مسابقة، بل هو تأسيس لبنية تحتية معرفية ستمنح صناع القرار في المملكة رؤى غير مسبوقة. إنها خطوة عملاقة نحو دبلوماسية إعلامية قائمة على البيانات."</p> |
| </div> |
| <div class="bg-white p-8 rounded-2xl shadow-xl reveal" style="transition-delay: 0.2s;"> |
| <div class="flex items-center mb-4"> |
| <img src="expert-2.jpg" class="w-16 h-16 rounded-full object-cover mr-4" alt="Expert 2"> |
| <div> |
| <h4 class="font-bold text-lg">د. نوف </h4> |
| <p class="text-sm text-gray-500">باحثة في الذكاء الاصطناعي الإعلامي</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"فرصة تاريخية للشركات الناشئة السعودية للعمل على تحدي حقيقي ببيانات واقعية. الحلول التي ستنتج من GovJam 2025 لديها القدرة على أن تصبح منتجات عالمية."</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-6 text-center"> |
| <h3 class="text-2xl font-bold text-gray-500 mb-8 reveal">شركاؤنا الاستراتيجيون</h3> |
| <div class="flex justify-center items-center gap-12 md:gap-20 filter grayscale opacity-70 reveal"> |
| <img src="partner-dga.png" class="h-12" alt="DGA"> |
| <img src="spa-logo-white.png" class="h-16 brightness-0" alt="SPA"> |
| <img src="partner-monshaat.png" class="h-12" alt="Monsha'at"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="volunteer" class="py-20 pattern-bg"> |
| <div class="container mx-auto px-6"> |
| <div class="bg-white rounded-2xl shadow-lg p-10 md:p-16 grid md:grid-cols-2 gap-8 items-center reveal"> |
| <div> |
| <h2 class="text-4xl font-extrabold text-green-900 mb-4">كن جزءًا من النجاح</h2> |
| <p class="text-lg text-gray-600 mb-8">هل أنت خبير في البيانات، الإعلام، أو اللغات؟ يمكنك المساهمة كمتطوع في إثراء هذا المشروع الوطني عبر تقديم خبراتك أو المساعدة في تصنيف البيانات.</p> |
| <form class="space-y-4"> |
| <input type="email" placeholder="بريدك الإلكتروني" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600"> |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600"> |
| <option>أرغب في التطوع كـ...</option> |
| <option>خبير بيانات</option> |
| <option>مترجم</option> |
| <option>محلل إعلامي</option> |
| </select> |
| <button class="w-full bg-green-700 text-white py-3 rounded-lg font-bold hover:bg-green-800 transition">انضم كمتطوع</button> |
| </form> |
| </div> |
| <div class="hidden md:block"> |
| <img src="chart-placeholder-2.png" class="rounded-lg" alt="Data Visualization"> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="contact" class="py-20 section-gradient"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-4xl font-extrabold text-green-900 mb-12 text-center reveal">تواصل معنا وقدم ملاحظاتك</h2> |
| <div class="grid lg:grid-cols-2 gap-12"> |
| <div class="bg-white p-8 rounded-2xl shadow-xl reveal"> |
| <h3 class="text-2xl font-bold mb-6 text-green-800">أرسل ملاحظاتك أو شكواك</h3> |
| <form class="space-y-4"> |
| <div><input type="text" placeholder="الاسم الكامل" class="w-full p-3 border rounded-lg"></div> |
| <div><input type="email" placeholder="البريد الإلكتروني" class="w-full p-3 border rounded-lg"></div> |
| <div><textarea rows="5" placeholder="اكتب رسالتك هنا..." class="w-full p-3 border rounded-lg"></textarea></div> |
| <div class="flex items-center justify-between gap-4"> |
| <button type="submit" class="w-full bg-green-700 text-white py-3 rounded-lg font-bold hover:bg-green-800">إرسال الرسالة</button> |
| <button type="button" id="record-btn" class="w-full flex items-center justify-center gap-2 bg-red-600 text-white py-3 rounded-lg font-bold hover:bg-red-700"> |
| <i class="fas fa-microphone"></i> <span id="record-text">سجل شكوى صوتية</span> |
| </button> |
| </div> |
| </form> |
| </div> |
| <div class="reveal" style="transition-delay: 0.2s;"> |
| <h3 class="text-2xl font-bold mb-6 text-green-800">معلومات التواصل المباشر</h3> |
| <div class="space-y-6"> |
| <div class="flex items-start gap-4"> |
| <div class="bg-green-100 text-green-700 text-xl w-12 h-12 rounded-lg flex items-center justify-center"><i class="fas fa-envelope"></i></div> |
| <div> |
| <h4 class="font-bold">البريد الإلكتروني</h4> |
| <a href="mailto:challenge@dga.gov.sa" class="text-gray-600 hover:text-green-700">challenge@dga.gov.sa</a> |
| </div> |
| </div> |
| <div class="flex items-start gap-4"> |
| <div class="bg-green-100 text-green-700 text-xl w-12 h-12 rounded-lg flex items-center justify-center"><i class="fas fa-phone-alt"></i></div> |
| <div> |
| <h4 class="font-bold">الهاتف الموحد</h4> |
| <p class="text-gray-600">920000000</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4"> |
| <div class="bg-green-100 text-green-700 text-xl w-12 h-12 rounded-lg flex items-center justify-center"><i class="fas fa-map-marker-alt"></i></div> |
| <div> |
| <h4 class="font-bold">العنوان</h4> |
| <p class="text-gray-600">هيئة الحكومة الرقمية، الرياض، المملكة العربية السعودية</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
| |
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-6 text-center text-gray-400"> |
| <p>© 2025 منصة تحليل تأثير الإعلام الذكي | مبادرة من هيئة الحكومة الرقمية</p> |
| <p>جميع الحقوق محفوظة</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', () => { |
| document.getElementById('mobile-menu').classList.toggle('hidden'); |
| }); |
| |
| |
| function animateCounter(element, target, duration, isPercentage = false) { |
| let start = 0; |
| const stepTime = Math.abs(Math.floor(duration / target)); |
| const timer = setInterval(() => { |
| start += 1; |
| element.textContent = isPercentage ? `${start}%` : start; |
| if (start === target) { |
| clearInterval(timer); |
| } |
| }, stepTime); |
| } |
| |
| const heroObserver = new IntersectionObserver((entries) => { |
| if (entries[0].isIntersecting) { |
| animateCounter(document.getElementById('news-counter'), 142, 2000); |
| animateCounter(document.getElementById('images-counter'), 350, 2000); |
| animateCounter(document.getElementById('sentiment-counter'), 89, 2000, true); |
| heroObserver.unobserve(entries[0].target); |
| } |
| }, { threshold: 0.5 }); |
| heroObserver.observe(document.querySelector('#home')); |
| |
| |
| const tabsContainer = document.getElementById('tabs-container'); |
| if (tabsContainer) { |
| const tabButtons = tabsContainer.querySelectorAll('.tab-button'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| tabButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| tabButtons.forEach(btn => btn.classList.remove('active')); |
| button.classList.add('active'); |
| tabContents.forEach(content => { |
| content.id === button.dataset.target ? content.classList.remove('hidden') : content.classList.add('hidden'); |
| }); |
| }); |
| }); |
| } |
| |
| |
| const revealElements = document.querySelectorAll('.reveal'); |
| const revealObserver = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('visible'); |
| |
| |
| } |
| }); |
| }, { threshold: 0.1 }); |
| revealElements.forEach(el => revealObserver.observe(el)); |
| |
| |
| const recordBtn = document.getElementById('record-btn'); |
| if(recordBtn) { |
| const recordText = document.getElementById('record-text'); |
| let isRecording = false; |
| recordBtn.addEventListener('click', () => { |
| isRecording = !isRecording; |
| if (isRecording) { |
| recordBtn.classList.add('animate-pulse'); |
| recordText.textContent = 'جاري التسجيل... اضغط للإيقاف'; |
| } else { |
| recordBtn.classList.remove('animate-pulse'); |
| recordText.textContent = 'سجل شكوى صوتية'; |
| alert('تم إيقاف التسجيل (هذه وظيفة وهمية للبروتوتايب).'); |
| } |
| }); |
| } |
| |
| </script> |
|
|
| </body> |
| </html> |
