|
|
<!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> |
