📊 4 مشاهدة
🌐 منصة جازان التفاعلية الرقمية
Jazan AI – Digital Interactive Platform
Jazan AI – Digital Interactive Platform
🧭 الرؤية الإستراتيجية للمنصة
“جازان للذكاء الاصطناعي” ليست مجرد منصة تقنية، بل هي نظام بيئي رقمي متكامل يربط بين:
- الذكاء الاصطناعي كأداة تحليل وتنبؤ.
- التقنية كبنية تحتية رقمية.
- الطاقة كمحرك للاستدامة.
- البيئة كهدف وغاية.
إنها منصة حية تتفاعل مع المستخدم، وتتعلّم من البيانات، وتنمو مع المجتمع، وتعكس هوية منطقة جازان بكل ما تحمله من تنوع جغرافي وثقافي وطبيعي.
🎨 الهوية البصرية الجديدة (بعد إعادة التصميم)
الألوان المعتمدة (المطورة):
| اللون | الرمز اللوني | الدلالة |
|---|---|---|
| الأزرق العميق (Deep Navy) | #0B1E36 | الثقة، العمق التقني، السماء الليلية |
| التركوازي الكهربائي (Electric Teal) | #00B4D8 | الابتكار، الشبكات، الذكاء الاصطناعي |
| الأخضر الزمردي (Emerald Green) | #2D6A4F | البيئة، الاستدامة، النمو |
| الذهبي الشمسي (Solar Gold) | #FFB703 | الطاقة، الأمل، الإشراق |
| الأبيض النقي (Pure White) | #FFFFFF | الوضوح، النقاء، البساطة |
| الرمادي التقني (Tech Gray) | #6C757D | التوازن، الاحترافية |
الشعار المُطوّر:
- دمج حرفي “J” و “A” في مونوغرام عصري.
- يحتوي على شبكة عصبية (Neural Network) من النقاط والخطوط.
- تضمين نخلة وموجة وشمس كرموز طبيعية.
- كتابة اسم المنصة باللغتين العربية والإنجليزية بخطوط هندسية أنيقة.
🖥️ هيكل المنصة التفاعلية (الصفحات الرئيسية)
1. الصفحة الرئيسية (Home)
- شريط تنقل علوي بشعار المنصة وقائمة الصفحات.
- بانر رئيسي متحرك يعرض مشهدًا بصريًا يجمع بين الطبيعة والتقنية مع جملة:
“ذكاء من أجل غدٍ أكثر اخضرارًا” - ملخص تفاعلي للأقسام الرئيسية (ذكاء اصطناعي، طاقة، بيئة، تقنية).
- عدادات حية (عدد المشاريع، عدد المستخدمين، توفير الطاقة، نسبة الاستدامة).
- قسم الأخبار والأحداث محدث آنيًا.
- زر دعوة للتفاعل (ابدأ الآن، استكشف، شارك).
2. صفحة الذكاء الاصطناعي (AI Hub)
- أدوات تحليل بيانات تفاعلية (رسوم بيانية، خرائط حرارية).
- مشاريع الذكاء الاصطناعي الحالية والمستقبلية.
- معرض تطبيقات (مثل: التنبؤ بالطقس، تحليل جودة الهواء، إدارة الطاقة).
- مختبر افتراضي (Virtual Lab) لتجربة خوارزميات الذكاء الاصطناعي.
- مقالات وأبحاث علمية مبسطة.
3. صفحة الطاقة والاستدامة (Energy & Sustainability)
- لوحة تحكم للطاقة المتجددة (الطاقة الشمسية، الرياح، التحول الطاقي).
- مشاريع الطاقة الخضراء في منطقة جازان.
- محاكي بصري لأثر المشاريع البيئية.
- تقارير دورية عن كفاءة الطاقة.
- نصائح ذكية لتوفير الطاقة (مدعومة بالذكاء الاصطناعي).
4. صفحة البيئة والطبيعة (Environment & Nature)
- خريطة تفاعلية للمحميات الطبيعية والتنوع البيولوجي في جازان.
- مشاريع التشجير والاستدامة البيئية.
- مؤشرات بيئية حية (جودة الهواء، الرطوبة، الحرارة).
- مبادرات مجتمعية بيئية.
- معرض صور وفيديوهات من طبيعة جازان.
5. صفحة التقنية والابتكار (Tech & Innovation)
- معرض تقني لأحدث الابتكارات.
- هاكاثونات ومسابقات تقنية.
- منصة للشركات الناشئة التقنية.
- دورات وورش عمل مجانية.
- مكتبة تقنية مفتوحة المصدر.
6. صفحة المجتمع والتفاعل (Community)
- منتدى للنقاش حول مواضيع المنصة.
- استطلاعات الرأي والتصويت.
- قصص نجاح من المجتمع.
- التواصل مع الخبراء والمختصين.
- التطوع والمشاركة في المبادرات.
7. صفحة عن المنصة (About)
- قصة المنصة ورؤيتها.
- الفريق القائم عليها.
- الشركاء والداعمون.
- الإحصائيات والتقارير السنوية.
- جهات الاتصال ووسائل التواصل.
8. صفحة المدونة (Blog)
- مقالات أسبوعية في مجالات المنصة.
- مقابلات مع خبراء.
- تقارير تحليلية.
- فيديوهات تعليمية وتوعوية.
9. صفحة اتصل بنا (Contact)
- نموذج تواصل متطور.
- خريطة تفاعلية.
- ساعات العمل والدعم الفني.
✨ تحسينات تقنية وإبداعية في القالب:
- واجهة مستخدم غامرة (Immersive UI) تعتمد على التمرير السلس والانتقالات البصرية.
- نظام ألوان متكيف (Dark / Light Mode) حسب تفضيل المستخدم.
- رسوم متحركة ذكية (Micro-interactions) تعزز تجربة المستخدم.
- لوحة تحكم شخصية للمستخدمين المسجلين.
- نظام توصيات ذكي يعتمد على سلوك المستخدم.
- ترجمة فورية للغة العربية والإنجليزية.
- دعم كامل للأجهزة المحمولة (Responsive Design).
- تحسين محركات البحث (SEO) و سرعة التحميل.
- لوحة إحصاءات حية تعرض بيانات المنصة بشكل مرئي.
📘 التعريف الإبداعي النهائي للمنصة
“جازان للذكاء الاصطناعي” هي منصة رقمية تفاعلية تجمع بين التقنية المتقدمة، الطاقة المستدامة، والحفاظ على البيئة، في إطار هوية بصرية تعكس جمال وتنوع منطقة جازان.
تهدف المنصة إلى تمكين المجتمع، دعم الابتكار، وتعزيز الاستدامة من خلال أدوات ذكاء اصطناعي، محتوى ثري، وتجربة مستخدم استثنائية.
إنها ليس مجرد موقع، بل وجهة معرفية وفضاء تفاعلي يضع جازان في مصاف المدن الذكية المستدامة.
🧠 الشعور العام للمنصة بعد التطوير
- إحساس بالانتماء للمكان والهوية.
- شعور بالتقدم والحداثة.
- طاقة إيجابية وأمل بالمستقبل.
- ثقة في التقنية والبيانات.
- هدوء بصري وتناغم لوني.
- فضول معرفي ودعوة للاستكشاف.
🏆 التقييم النهائي للمنصة المُعاد تصميمها
| المعيار | التقييم |
|---|---|
| الهوية البصرية | 9/10 |
| تجربة المستخدم | 8.5/10 |
| المحتوى والرسالة | 9/10 |
| الابتكار والإبداع | 8/10 |
| التكامل التقني | 8.5/10 |
| الاستدامة والبيئة | 9/10 |
المجموع الكلي: 8.7 / 10
💡 التوصيات المستقبلية
- إضافة مساعد افتراضي ذكي (AI Chatbot) للمنصة.
- تطوير تطبيق موبايل متكامل.
- إنشاء أكاديمية جازان للذكاء الاصطناعي (منصة تعليمية).
- إطلاق هاكاثون سنوي عالمي.
- ربط المنصة بـ المدن الذكية و إنترنت الأشياء (IoT).
- إنشاء مركز بيانات مفتوح (Open Data Hub) للمطورين والباحثين.
إذا كنت ترغب في الحصول على أكواد HTML/CSS/JavaScript لتنفيذ هذا التصميم بشكل كامل، أو تحتاج إلى نسخة قابلة للتنفيذ على منصة معينة (مثل WordPress، React، أو Next.js)، فأنا مستعد لتقديم ذلك لك فوراً.
هل ترغب في البدء بكتابة الكود الكامل للمنصة؟
بناءً على طلبك للمزيد، سأقدم لك حزمة متكاملة وموسعة تشمل:
- الكود الكامل للمنصة (HTML, CSS, JavaScript) مع تحسينات متقدمة.
- تفاصيل إضافية عن الهوية البصرية وتطبيقاتها.
- خطة تسويقية للمنصة.
- مقترحات محتوى لكل صفحة.
- نموذج تشغيلي لإدارة المنصة.
🌟 الحزمة المتكاملة لمنصة جازان للذكاء الاصطناعي
1. 🖥️ الكود الكامل للمنصة (صفحة رئيسية نموذجية)
سأقدم لك كودًا متكاملاً وجاهزًا للتشغيل، مع تحسينات في التصميم، الأداء، والتجربة التفاعلية.
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>جازان للذكاء الاصطناعي | Jazan AI</title>
<!-- SEO Meta -->
<meta name="description" content="منصة جازان للذكاء الاصطناعي - ذكاء من أجل غدٍ أكثر اخضراراً" />
<meta name="keywords" content="جازان, ذكاء اصطناعي, طاقة, بيئة, تقنية, استدامة" />
<meta name="author" content="Jazan AI" />
<!-- Open Graph -->
<meta property="og:title" content="جازان للذكاء الاصطناعي" />
<meta property="og:description" content="ذكاء من أجل غدٍ أكثر اخضراراً" />
<meta property="og:type" content="website" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<style>
/* ============================
CSS VARIABLES / THEME
============================ */
:root {
--navy: #0B1E36;
--teal: #00B4D8;
--teal-dark: #0077B6;
--emerald: #2D6A4F;
--emerald-light: #40916C;
--gold: #FFB703;
--gold-light: #FFD166;
--white: #FFFFFF;
--gray: #6C757D;
--light-gray: #F8F9FA;
--dark: #1A1A2E;
--font-primary: 'Cairo', sans-serif;
--transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
--shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.25);
--radius: 20px;
}
/* ============================
RESET & BASE
============================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
background: var(--white);
color: var(--navy);
line-height: 1.8;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
max-width: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ============================
SCROLLBAR
============================ */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--light-gray);
}
::-webkit-scrollbar-thumb {
background: var(--teal);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--teal-dark);
}
/* ============================
BUTTONS
============================ */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
border-radius: 50px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: var(--transition);
border: none;
font-family: var(--font-primary);
}
.btn-primary {
background: linear-gradient(135deg, var(--teal), var(--teal-dark));
color: var(--white);
box-shadow: 0 8px 25px rgba(0, 180, 216, 0.4);
}
.btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 35px rgba(0, 180, 216, 0.5);
}
.btn-secondary {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.btn-secondary:hover {
background: var(--white);
color: var(--navy);
transform: translateY(-3px);
}
.btn-gold {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
color: var(--navy);
box-shadow: 0 8px 25px rgba(255, 183, 3, 0.4);
}
.btn-gold:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 35px rgba(255, 183, 3, 0.5);
}
.btn-outline-teal {
background: transparent;
color: var(--teal);
border: 2px solid var(--teal);
}
.btn-outline-teal:hover {
background: var(--teal);
color: var(--white);
transform: translateY(-3px);
}
/* ============================
HEADER / NAVBAR
============================ */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 16px 0;
transition: var(--transition);
background: transparent;
}
header.scrolled {
background: rgba(11, 30, 54, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
padding: 10px 0;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--teal), var(--emerald));
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 22px;
color: var(--white);
position: relative;
overflow: hidden;
}
.logo-icon::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.3); opacity: 1; }
}
.logo-text {
font-size: 22px;
font-weight: 800;
color: var(--white);
letter-spacing: 1px;
}
.logo-text span {
color: var(--gold);
}
.nav-links {
display: flex;
align-items: center;
gap: 30px;
}
.nav-links a {
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
font-size: 15px;
transition: var(--transition);
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--gold);
transition: var(--transition);
}
.nav-links a:hover {
color: var(--white);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-actions {
display: flex;
align-items: center;
gap: 16px;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 5px;
background: none;
border: none;
}
.nav-toggle span {
display: block;
width: 28px;
height: 3px;
background: var(--white);
border-radius: 4px;
transition: var(--transition);
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* ============================
HERO SECTION
============================ */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
background: linear-gradient(160deg, var(--navy) 0%, #0D2B4A 40%, #1A3A5C 100%);
overflow: hidden;
padding-top: 80px;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(0, 180, 216, 0.08) 0%, transparent 70%);
border-radius: 50%;
animation: floatBg 20s ease-in-out infinite;
}
.hero::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(45, 106, 79, 0.06) 0%, transparent 70%);
border-radius: 50%;
animation: floatBg 25s ease-in-out infinite reverse;
}
@keyframes floatBg {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -30px) scale(1.1); }
}
/* Floating particles / orbs */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.particle {
position: absolute;
border-radius: 50%;
background: rgba(255, 183, 3, 0.08);
animation: particleFloat 15s ease-in-out infinite;
}
.particle:nth-child(1) {
width: 300px;
height: 300px;
top: 10%;
left: 5%;
animation-delay: 0s;
}
.particle:nth-child(2) {
width: 200px;
height: 200px;
bottom: 20%;
right: 10%;
background: rgba(0, 180, 216, 0.06);
animation-delay: -5s;
}
.particle:nth-child(3) {
width: 150px;
height: 150px;
top: 50%;
left: 50%;
background: rgba(45, 106, 79, 0.05);
animation-delay: -10s;
}
@keyframes particleFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -30px) scale(1.2); }
66% { transform: translate(-20px, 20px) scale(0.9); }
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.hero-content h1 {
font-size: 52px;
font-weight: 800;
color: var(--white);
line-height: 1.2;
margin-bottom: 16px;
}
.hero-content h1 .highlight {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-content h1 .highlight-teal {
background: linear-gradient(135deg, var(--teal), #48CAE4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-content p {
font-size: 20px;
color: rgba(255, 255, 255, 0.75);
max-width: 500px;
margin-bottom: 32px;
line-height: 1.9;
}
.hero-badges {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.hero-badge {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
padding: 8px 18px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 600;
}
.hero-badge i {
color: var(--gold);
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* Hero Visual */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.hero-logo-display {
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 180, 216, 0.1) 0%, transparent 70%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: pulseRing 4s ease-in-out infinite;
}
@keyframes pulseRing {
0%, 100% { transform: scale(1); box-shadow: 0 0 60px rgba(0, 180, 216, 0.1); }
50% { transform: scale(1.03); box-shadow: 0 0 100px rgba(0, 180, 216, 0.2); }
}
.hero-logo-display .monogram {
font-size: 120px;
font-weight: 900;
background: linear-gradient(135deg, var(--teal), var(--emerald), var(--gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 80px rgba(0, 180, 216, 0.2);
position: relative;
z-index: 2;
}
.hero-logo-display .orbit-ring {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 183, 3, 0.1);
border-radius: 50%;
animation: spin 20s linear infinite;
}
.hero-logo-display .orbit-ring:nth-child(2) {
width: 80%;
height: 80%;
border-color: rgba(0, 180, 216, 0.08);
animation-duration: 15s;
animation-direction: reverse;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ============================
STATS SECTION
============================ */
.stats {
padding: 60px 0;
background: var(--light-gray);
border-top: 1px solid rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.stat-card {
text-align: center;
padding: 20px;
}
.stat-card .number {
font-size: 48px;
font-weight: 800;
background: linear-gradient(135deg, var(--teal), var(--emerald));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.stat-card .number .plus {
-webkit-text-fill-color: var(--gold);
}
.stat-card .label {
font-size: 16px;
color: var(--gray);
font-weight: 600;
margin-top: 4px;
}
/* ============================
FEATURES / SERVICES
============================ */
.features {
padding: 100px 0;
background: var(--white);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header .tag {
display: inline-block;
background: rgba(0, 180, 216, 0.1);
color: var(--teal);
padding: 6px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
margin-bottom: 12px;
letter-spacing: 1px;
}
.section-header h2 {
font-size: 40px;
font-weight: 800;
color: var(--navy);
margin-bottom: 12px;
}
.section-header h2 span {
background: linear-gradient(135deg, var(--teal), var(--emerald));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-header p {
color: var(--gray);
font-size: 18px;
max-width: 600px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.feature-card {
background: var(--white);
padding: 36px 28px;
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid rgba(0, 0, 0, 0.04);
text-align: center;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--teal), var(--emerald), var(--gold));
transform: scaleX(0);
transition: var(--transition);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.feature-card .icon {
width: 70px;
height: 70px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
margin: 0 auto 20px;
transition: var(--transition);
}
.feature-card:hover .icon {
transform: scale(1.1) rotate(-5deg);
}
.feature-card .icon.teal {
background: rgba(0, 180, 216, 0.1);
color: var(--teal);
}
.feature-card .icon.emerald {
background: rgba(45, 106, 79, 0.1);
color: var(--emerald);
}
.feature-card .icon.gold {
background: rgba(255, 183, 3, 0.1);
color: var(--gold);
}
.feature-card .icon.navy {
background: rgba(11, 30, 54, 0.08);
color: var(--navy);
}
.feature-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: var(--navy);
}
.feature-card p {
color: var(--gray);
font-size: 15px;
line-height: 1.7;
}
/* ============================
ABOUT / MISSION
============================ */
.about {
padding: 100px 0;
background: var(--navy);
color: var(--white);
position: relative;
overflow: hidden;
}
.about::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(0, 180, 216, 0.05) 0%, transparent 70%);
border-radius: 50%;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.about-content h2 {
font-size: 40px;
font-weight: 800;
margin-bottom: 16px;
}
.about-content h2 span {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
line-height: 1.9;
margin-bottom: 24px;
}
.about-values {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.about-value {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.about-value i {
color: var(--gold);
font-size: 18px;
}
.about-value span {
font-weight: 600;
font-size: 15px;
}
.about-image {
display: flex;
justify-content: center;
align-items: center;
}
.about-image .mockup {
width: 100%;
max-width: 500px;
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(0, 180, 216, 0.1), rgba(45, 106, 79, 0.1));
padding: 40px;
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
text-align: center;
}
.about-image .mockup .big-icon {
font-size: 80px;
margin-bottom: 20px;
display: block;
}
.about-image .mockup h4 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
}
.about-image .mockup p {
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
}
/* ============================
TESTIMONIALS
============================ */
.testimonials {
padding: 100px 0;
background: var(--light-gray);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.testimonial-card {
background: var(--white);
padding: 32px;
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: var(--transition);
}
.testimonial-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
}
.testimonial-card .stars {
color: var(--gold);
margin-bottom: 12px;
font-size: 18px;
}
.testimonial-card blockquote {
font-size: 16px;
line-height: 1.8;
color: var(--navy);
margin-bottom: 16px;
font-weight: 400;
}
.testimonial-card .author {
display: flex;
align-items: center;
gap: 14px;
}
.testimonial-card .author .avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--teal), var(--emerald));
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 700;
font-size: 20px;
}
.testimonial-card .author .info h5 {
font-weight: 700;
font-size: 16px;
}
.testimonial-card .author .info span {
font-size: 14px;
color: var(--gray);
}
/* ============================
CTA
============================ */
.cta {
padding: 80px 0;
background: linear-gradient(135deg, var(--navy), #0D2B4A);
text-align: center;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
top: -50%;
left: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(0, 180, 216, 0.06) 0%, transparent 70%);
border-radius: 50%;
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-content h2 {
font-size: 40px;
font-weight: 800;
color: var(--white);
margin-bottom: 12px;
}
.cta-content h2 span {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
max-width: 500px;
margin: 0 auto 32px;
}
.cta-content .btn-group {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================
FOOTER
============================ */
footer {
background: #080F1A;
padding: 60px 0 30px;
color: rgba(255, 255, 255, 0.6);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-brand h3 {
font-size: 24px;
font-weight: 800;
color: var(--white);
margin-bottom: 12px;
}
.footer-brand h3 span {
color: var(--gold);
}
.footer-brand p {
font-size: 15px;
line-height: 1.8;
max-width: 300px;
}
.footer-social {
display: flex;
gap: 12px;
margin-top: 16px;
}
.footer-social a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
color: rgba(255, 255, 255, 0.6);
}
.footer-social a:hover {
background: var(--teal);
color: var(--white);
transform: translateY(-3px);
}
.footer-col h4 {
color: var(--white);
font-weight: 700;
font-size: 18px;
margin-bottom: 16px;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 15px;
transition: var(--transition);
}
.footer-col ul li a:hover {
color: var(--white);
padding-right: 6px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 14px;
}
/* ============================
RESPONSIVE
============================ */
@media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.hero-content p {
margin: 0 auto 32px;
}
.hero-badges {
justify-content: center;
}
.hero-buttons {
justify-content: center;
}
.hero-logo-display {
width: 280px;
height: 280px;
}
.hero-logo-display .monogram {
font-size: 80px;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-grid {
grid-template-columns: 1fr;
text-align: center;
}
.about-values {
justify-items: center;
}
.testimonials-grid {
grid-template-columns: 1fr 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 320px;
height: 100vh;
background: var(--navy);
flex-direction: column;
padding: 80px 32px 32px;
transition: var(--transition);
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
gap: 20px;
align-items: flex-start;
}
.nav-links.open {
right: 0;
}
.nav-links a {
font-size: 18px;
}
.nav-toggle {
display: flex;
z-index: 1001;
}
.nav-actions .btn {
display: none;
}
.hero-content h1 {
font-size: 32px;
}
.hero-content p {
font-size: 17px;
}
.features-grid {
grid-template-columns: 1fr;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.section-header h2 {
font-size: 28px;
}
.cta-content h2 {
font-size: 28px;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.stat-card .number {
font-size: 32px;
}
.about-values {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- ============================
HEADER
============================ -->
<header id="header">
<div class="container">
<nav class="navbar">
<a href="#" class="logo">
<div class="logo-icon">JA</div>
<div class="logo-text">جازان <span>AI</span></div>
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#features">المجالات</a></li>
<li><a href="#about">عن المنصة</a></li>
<li><a href="#testimonials">آراء</a></li>
<li><a href="#cta">تواصل</a></li>
</ul>
<div class="nav-actions">
<a href="#" class="btn btn-primary" style="padding: 10px 24px; font-size: 14px;">
<i class="fas fa-rocket"></i> انضم الآن
</a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</div>
</header>
<!-- ============================
HERO
============================ -->
<section class="hero" id="hero">
<div class="particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="container">
<div class="hero-grid">
<div class="hero-content">
<div class="hero-badges">
<span class="hero-badge"><i class="fas fa-brain"></i> ذكاء اصطناعي</span>
<span class="hero-badge"><i class="fas fa-solar-panel"></i> طاقة متجددة</span>
<span class="hero-badge"><i class="fas fa-leaf"></i> بيئة مستدامة</span>
</div>
<h1>
ذكاء من أجل<br>
<span class="highlight">غدٍ أكثر</span>
<span class="highlight-teal">اخضراراً</span>
</h1>
<p>
منصة جازان للذكاء الاصطناعي تربط بين التقنية والطاقة والبيئة،
لتمكين مجتمع مستدام ومبتكر في قلب المنطقة.
</p>
<div class="hero-buttons">
<a href="#" class="btn btn-primary">
<i class="fas fa-play"></i> استكشف المنصة
</a>
<a href="#" class="btn btn-secondary">
<i class="fas fa-info-circle"></i> تعرف علينا
</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-logo-display">
<div class="orbit-ring"></div>
<div class="orbit-ring"></div>
<span class="monogram">JA</span>
</div>
</div>
</div>
</div>
</section>
<!-- ============================
STATS
============================ -->
<section class="stats">
<div class="container">
<div class="stats-grid">
<div class="stat-card">
<div class="number">50<span class="plus">+</span></div>
<div class="label">مشروع تقني</div>
</div>
<div class="stat-card">
<div class="number">12<span class="plus">+</span></div>
<div class="label">مبادرة بيئية</div>
</div>
<div class="stat-card">
<div class="number">85<span class="plus">%</span></div>
<div class="label">توفير في الطاقة</div>
</div>
<div class="stat-card">
<div class="number">10K<span class="plus">+</span></div>
<div class="label">مستفيد من المنصة</div>
</div>
</div>
</div>
</section>
<!-- ============================
FEATURES
============================ -->
<section class="features" id="features">
<div class="container">
<div class="section-header">
<span class="tag"><i class="fas fa-cubes"></i> مجالات المنصة</span>
<h2>نصنع المستقبل في <span>أربعة محاور</span></h2>
<p>نجمع بين الخبرة التقنية والرؤية البيئية لتحقيق تنمية مستدامة في جازان</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="icon teal"><i class="fas fa-microchip"></i></div>
<h3>الذكاء الاصطناعي</h3>
<p>تحليل بيانات، تعلم آلي، وتطبيقات ذكية تخدم المجتمع والبيئة</p>
</div>
<div class="feature-card">
<div class="icon emerald"><i class="fas fa-bolt"></i></div>
<h3>الطاقة المتجددة</h3>
<p>حلول طاقة شمسية ورياح ذكية لتحقيق كفاءة واستدامة</p>
</div>
<div class="feature-card">
<div class="icon gold"><i class="fas fa-tree"></i></div>
<h3>البيئة والطبيعة</h3>
<p>حماية التنوع البيولوجي واستعادة النظم البيئية بذكاء</p>
</div>
<div class="feature-card">
<div class="icon navy"><i class="fas fa-code"></i></div>
<h3>التقنية والابتكار</h3>
<p>منصة مفتوحة للمطورين والشركات الناشئة لبناء المستقبل</p>
</div>
</div>
</div>
</section>
<!-- ============================
ABOUT
============================ -->
<section class="about" id="about">
<div class="container">
<div class="about-grid">
<div class="about-content">
<span class="tag" style="background: rgba(255,183,3,0.15); color: var(--gold);">
<i class="fas fa-flag"></i> رؤيتنا
</span>
<h2>منصة <span>جازان</span> للذكاء الاصطناعي</h2>
<p>
انطلقت منصة جازان للذكاء الاصطناعي لتكون جسراً بين <strong>التقنية</strong>
و<strong>الطبيعة</strong>، مستلهمة من تنوع منطقة جازان ما بين البحر والجبال والواحات.
</p>
<p>
نؤمن بأن الذكاء الاصطناعي يمكن أن يكون أداة قوية لتحقيق <strong>الاستدامة</strong>
و<strong>الازدهار</strong>، وأن المنطقة قادرة على أن تكون نموذجاً عالمياً في
التوازن بين التقدم التقني وحماية البيئة.
</p>
<div class="about-values">
<div class="about-value">
<i class="fas fa-check-circle"></i>
<span>الابتكار المسؤول</span>
</div>
<div class="about-value">
<i class="fas fa-check-circle"></i>
<span>الاستدامة البيئية</span>
</div>
<div class="about-value">
<i class="fas fa-check-circle"></i>
<span>التمكين المجتمعي</span>
</div>
<div class="about-value">
<i class="fas fa-check-circle"></i>
<span>الشفافية والثقة</span>
</div>
</div>
</div>
<div class="about-image">
<div class="mockup">
<span class="big-icon">🌿</span>
<h4>جازان الذكية</h4>
<p>حيث تلتقي التكنولوجيا بالطبيعة في تناغم استثنائي</p>
<div style="margin-top: 20px; display: flex; gap: 10px; justify-content: center;">
<span style="background: rgba(255,183,3,0.15); color: var(--gold); padding: 4px 14px; border-radius: 50px; font-size: 13px;">
<i class="fas fa-brain"></i> AI
</span>
<span style="background: rgba(0,180,216,0.15); color: var(--teal); padding: 4px 14px; border-radius: 50px; font-size: 13px;">
<i class="fas fa-sun"></i> طاقة
</span>
<span style="background: rgba(45,106,79,0.15); color: var(--emerald); padding: 4px 14px; border-radius: 50px; font-size: 13px;">
<i class="fas fa-leaf"></i> بيئة
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================
TESTIMONIALS
============================ -->
<section class="testimonials" id="testimonials">
<div class="container">
<div class="section-header">
<span class="tag"><i class="fas fa-quote-right"></i> آراء المستفيدين</span>
<h2>ماذا يقولون عن <span>جازان AI</span></h2>
<p>قصص نجاح من مجتمع المنصة</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>
"منصة جازان للذكاء الاصطناعي غيرت نظرتي للتقنية. أصبحت أرى كيف يمكن للبيانات أن تحمي الطبيعة."
</blockquote>
<div class="author">
<div class="avatar">أ</div>
<div class="info">
<h5>أحمد الشهري</h5>
<span>باحث في الذكاء الاصطناعي</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>
"مشاريع الطاقة الشمسية التي تدعمها المنصة ساعدت مجتمعنا في توفير 40% من فواتير الكهرباء."
</blockquote>
<div class="author">
<div class="avatar">ن</div>
<div class="info">
<h5>نورة الحارثي</h5>
<span>ناشطة بيئية</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>
"كشركة ناشئة، وجدنا في منصة جازان الدعم التقني والبيئة المناسبة لنطلق ابتكاراتنا."
</blockquote>
<div class="author">
<div class="avatar">خ</div>
<div class="info">
<h5>خالد العمري</h5>
<span>مؤسس شركة تقنية</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================
CTA
============================ -->
<section class="cta" id="cta">
<div class="container">
<div class="cta-content">
<h2>كن جزءاً من <span>مستقبل جازان</span></h2>
<p>انضم إلى منصة الذكاء الاصطناعي الأسرع نمواً في المنطقة وشارك في تشكيل الغد الأخضر.</p>
<div class="btn-group">
<a href="#" class="btn btn-gold">
<i class="fas fa-user-plus"></i> سجل الآن
</a>
<a href="#" class="btn btn-secondary">
<i class="fas fa-phone"></i> تواصل معنا
</a>
</div>
</div>
</div>
</section>
<!-- ============================
FOOTER
============================ -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<h3>جازان <span>AI</span></h3>
<p>منصة رقمية تجمع بين الذكاء الاصطناعي، الطاقة المتجددة، والبيئة المستدامة لتحقيق رؤية جازان الذكية.</p>
<div class="footer-social">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="footer-col">
<h4>المجالات</h4>
<ul>
<li><a href="#">الذكاء الاصطناعي</a></li>
<li><a href="#">الطاقة المتجددة</a></li>
<li><a href="#">البيئة والطبيعة</a></li>
<li><a href="#">التقنية والابتكار</a></li>
</ul>
</div>
<div class="footer-col">
<h4>المجتمع</h4>
<ul>
<li><a href="#">المدونة</a></li>
<li><a href="#">الأحداث</a></li>
<li><a href="#">المبادرات</a></li>
<li><a href="#">التطوع</a></li>
</ul>
</div>
<div class="footer-col">
<h4>الدعم</h4>
<ul>
<li><a href="#">اتصل بنا</a></li>
<li><a href="#">الأسئلة الشائعة</a></li>
<li><a href="#">سياسة الخصوصية</a></li>
<li><a href="#">الشروط والأحكام</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 جازان للذكاء الاصطناعي. جميع الحقوق محفوظة</span>
<span>ذكاء من أجل غدٍ أكثر اخضراراً</span>
</div>
</div>
</footer>
<!-- ============================
JAVASCRIPT
============================ -->
<script>
// === NAVBAR SCROLL EFFECT ===
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// === MOBILE NAV TOGGLE ===
const navToggle = document.getElementById('navToggle');
const navLinks = document.getElementById('navLinks');
navToggle.addEventListener('click', () => {
navToggle.classList.toggle('active');
navLinks.classList.toggle('open');
});
// Close nav on link click (mobile)
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navToggle.classList.remove('active');
navLinks.classList.remove('open');
});
});
// === SMOOTH SCROLL ===
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// === COUNTER ANIMATION (Intersection Observer) ===
const statNumbers = document.querySelectorAll('.stat-card .number');
let animated = false;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !animated) {
animated = true;
statNumbers.forEach(el => {
const text = el.innerText;
const num = parseInt(text.replace(/[^0-9]/g, ''));
const suffix = text.replace(/[0-9]/g, '');
if (!isNaN(num)) {
let current = 0;
const increment = Math.ceil(num / 50);
const timer = setInterval(() => {
current += increment;
if (current >= num) {
current = num;
clearInterval(timer);
}
el.innerText = current + suffix;
}, 30);
}
});
}
});
}, { threshold: 0.3 });
const statsSection = document.querySelector('.stats');
if (statsSection) observer.observe(statsSection);
// === PARALLAX ORBS (mousemove) ===
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
const particles = document.querySelectorAll('.particle');
particles.forEach((p, i) => {
const speed = 15 + i * 10;
const moveX = (x - 0.5) * speed;
const moveY = (y - 0.5) * speed;
p.style.transform = `translate(${moveX}px, ${moveY}px)`;
});
});
</script>
</body>
</html>
2. 🎨 تفاصيل الهوية البصرية الموسعة
نظام الألوان مع رموز CSS:
| الاستخدام | اللون | رمز Hex |
|---|---|---|
| الخلفيات الرئيسية | Navy | #0B1E36 |
| الأزرار والعناوين | Teal | #00B4D8 |
| النصوص المميزة | Teal Dark | #0077B6 |
| العناصر البيئية | Emerald | #2D6A4F |
| التظليل الطبيعي | Emerald Light | #40916C |
| الإبرازات والطاقة | Gold | #FFB703 |
| التوهج | Gold Light | #FFD166 |
| الخلفيات الفاتحة | Light Gray | #F8F9FA |
| النصوص الثانوية | Gray | #6C757D |
| النصوص الأساسية | Navy | #0B1E36 |
الطباعة (Typography):
- العربية: Cairo (Google Fonts) – أوزان 300، 400، 600، 700، 800
- الإنجليزية: Cairo أو أي خط Sans-Serif هندسي
- العناوين الكبيرة: وزن 800 مع تباعد أحرف -1px
- النصوص العادية: وزن 400 مع ارتفاع سطر 1.8
الشعار (Logo) – وصف دقيق:
text
- الشكل: مونوغرام يجمع بين حرفي J و A - التفاصيل التقنية: دوائر وشبكة نقاط على الحرف الأيمن - التفاصيل الطبيعية: نخلة، موجة، شمس في الخلفية - الألوان: تدرج من Navy → Teal → Emerald → Gold - النص: "جازان AI" بخط Cairo Bold - الشعار اللفظي: "Intelligence for a Greener Tomorrow"
3. 📣 الخطة التسويقية للمنصة
المرحلة الأولى: الإطلاق (شهر واحد)
| النشاط | الوسيلة | الهدف |
|---|---|---|
| إطلاق الموقع | وسائل التواصل، البريد الإلكتروني | 5,000 زائر |
| حملة فيديو تعريفي | يوتيوب، إنستغرام | 50,000 مشاهدة |
| شراكات محلية | الجامعات، الجهات الحكومية | 10 شراكات |
| مسابقة تصميم شعار | منصة المنصة | 200 مشارك |
المرحلة الثانية: النمو (شهران)
| النشاط | الوسيلة | الهدف |
|---|---|---|
| سلسلة ندوات افتراضية | Zoom، يوتيوب | 1,000 مشارك |
| إطلاق هاكاثون | GitHub، المنصة | 50 فريق |
| حملة محتوى (مدونة، مقالات) | LinkedIn، الموقع | 20 مقالة |
| التعاون مع المؤثرين | إنستغرام، تويتر | 100,000 وصول |
المرحلة الثالثة: الاستدامة (مستمر)
| النشاط | الوسيلة | الهدف |
|---|---|---|
| تحديثات دورية للمحتوى | الموقع، البريد الإلكتروني | 80% تفاعل |
| جوائز سنوية | حفل سنوي | 10 فائزين |
| تقارير الأثر | PDF، إنفوغرافيك | 5 تقارير سنوية |
| التوسع الإقليمي | شراكات خليجية | 5 دول |
4. 📝 مقترحات محتوى لكل صفحة
الصفحة الرئيسية:
- بانر: صورة متحركة تجمع بين نخيل، بحر، وتقنية.
- عنوان: “جازان AI – ذكاء من أجل غدٍ أكثر اخضراراً”
- نصوص قصيرة: تعريف المنصة في 3 جمل.
- أرقام حية: عدد المشاريع، المستخدمين، التوفير في الطاقة.
- معرض صور: صور المشاريع والفعاليات.
صفحة الذكاء الاصطناعي:
- مقدمة: كيف نستخدم الذكاء الاصطناعي في خدمة البيئة والطاقة.
- أدوات: قائمة بأدوات التحليل المتاحة.
- مشاريع: 6-8 مشاريع مع صور ووصف.
- دراسات حالة: 3 دراسات نجاح.
صفحة الطاقة:
- إحصائيات: رسوم بيانية عن الطاقة المتجددة في جازان.
- مشاريع: الطاقة الشمسية، الرياح، الهيدروجين الأخضر.
- نصائح: دليل توفير الطاقة للمنازل والشركات.
صفحة البيئة:
- خرائط تفاعلية: محميات، غطاء نباتي، تنوع بيولوجي.
- مبادرات: التشجير، إعادة التدوير، حماية الحياة البحرية.
- تقارير بيئية: جودة الهواء، المياه، التربة.
صفحة التقنية:
- منصة للمطورين: APIs، أدوات مفتوحة المصدر.
- مسابقات: هاكاثونات، جوائز ابتكار.
- دورات: فيديوهات تعليمية، ورش عمل.
5. 🛠️ النموذج التشغيلي لإدارة المنصة
الهيكل التنظيمي:
text
المدير التنفيذي
├── مدير التقنية (CTO)
│ ├── فريق تطوير الويب
│ ├── فريق الذكاء الاصطناعي
│ └── فريق الأمن السيبراني
├── مدير المحتوى
│ ├── كتاب ومحررين
│ ├── مصممين جرافيك
│ └── منتجي فيديو
├── مدير التسويق
│ ├── مسوقين رقميين
│ ├── مسؤولي وسائل التواصل
│ └── منسقي الفعاليات
├── مدير المجتمع
│ ├── منسقي المبادرات
│ ├── مسؤولي المنتدى
│ └── فريق الدعم
└── مدير الشراكات
├── مسؤولي العلاقات الحكومية
├── منسقي الشركات
└── مسؤولي التمويل
خطة التشغيل الشهرية:
| الأسبوع | النشاط | المسؤول |
|---|---|---|
| الأول | تحديث المحتوى، تحليل البيانات | مدير المحتوى + التقنية |
| الثاني | فعالية مجتمعية (ندوة، ورشة) | مدير المجتمع |
| الثالث | حملة تسويقية (إعلانات، منشورات) | مدير التسويق |
| الرابع | اجتماع شركاء، تقرير شهري | المدير التنفيذي |
6. 📊 مؤشرات الأداء الرئيسية (KPIs)
| المؤشر | الهدف (6 أشهر) | الهدف (سنة) |
|---|---|---|
| عدد الزوار الشهري | 50,000 | 200,000 |
| عدد المستخدمين المسجلين | 5,000 | 20,000 |
| نسبة التفاعل (مشاركات/تعليقات) | 15% | 25% |
| عدد المشاريع المنفذة | 20 | 50 |
| توفير الطاقة (ميجاوات) | 500 | 2,000 |
| عدد الشراكات | 15 | 40 |
| رضا المستخدمين (استبيان) | 85% | 92% |
7. 🌍 خريطة طريق التوسع (2026-2028)
2026:
- إطلاق المنصة الرقمية.
- 10 مشاريع ذكاء اصطناعي في مجال البيئة.
- 5 مبادرات طاقة متجددة.
- شراكات مع 10 جهات محلية.
2027:
- تطبيق جوال للمنصة.
- 25 مشروعاً تقنياً.
- 15 مبادرة بيئية.
- شراكات إقليمية (دول الخليج).
2028:
- أكاديمية جازان للذكاء الاصطناعي.
- مركز بيانات مفتوح.
- 50 مشروعاً متكاملاً.
- حضور عالمي (مؤتمرات، جوائز).
8. 💎 الخلاصة النهائية
منصة جازان للذكاء الاصطناعي هي أكثر من مجرد موقع إلكتروني، إنها:
- ✅ نظام بيئي رقمي يربط بين التقنية والطبيعة.
- ✅ مجتمع حيوي من المبتكرين والباحثين والمستثمرين.
- ✅ هوية بصرية تعكس جمال وتنوع منطقة جازان.
- ✅ منصة تفاعلية تقدم أدوات، محتوى، وفرصاً حقيقية.
- ✅ نموذج استدامة يمكن تطبيقه في مناطق أخرى.
هل ترغب في الحصول على الكود الكامل للمنصة بصيغة ملفات منفصلة (HTML, CSS, JS)؟
أو تريد تفاصيل إضافية عن أي قسم معين؟
أو تحتاج إلى تصميم مخصص لصفحة معينة؟
أنا مستعد لتقديم كل ما تحتاجه لتحويل هذه الرؤية إلى واقع رقمي ملموس. 🚀
سأقدم لك الحزمة التوسعية الشاملة التي تغطي كل ما قد تحتاجه لمنصة جازان للذكاء الاصطناعي، مع تفاصيل دقيقة قابلة للتنفيذ الفوري.
📦 الحزمة التوسعية الشاملة – منصة جازان للذكاء الاصطناعي
1. 🎨 نظام التصميم المتقدم (Advanced Design System)
1.1 لوحة الألوان الموسعة مع رموز الظلال والتدرجات
css
:root {
/* الألوان الأساسية */
--color-primary: #0B1E36; /* Navy Deep */
--color-primary-light: #1A3A5C;
--color-primary-dark: #060F1F;
--color-secondary: #00B4D8; /* Electric Teal */
--color-secondary-light: #48CAE4;
--color-secondary-dark: #0077B6;
--color-accent: #2D6A4F; /* Emerald */
--color-accent-light: #40916C;
--color-accent-dark: #1B4332;
--color-gold: #FFB703; /* Solar Gold */
--color-gold-light: #FFD166;
--color-gold-dark: #E6A200;
/* التدرجات (Gradients) */
--gradient-primary: linear-gradient(135deg, #0B1E36 0%, #1A3A5C 100%);
--gradient-secondary: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
--gradient-accent: linear-gradient(135deg, #2D6A4F 0%, #40916C 100%);
--gradient-gold: linear-gradient(135deg, #FFB703 0%, #FFD166 100%);
--gradient-hero: linear-gradient(160deg, #0B1E36 0%, #0D2B4A 40%, #1A3A5C 100%);
--gradient-brand: linear-gradient(135deg, #0B1E36 0%, #00B4D8 50%, #2D6A4F 100%);
--gradient-glow: radial-gradient(circle at 30% 30%, rgba(0,180,216,0.15) 0%, transparent 70%);
/* الظلال (Shadows) */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
--shadow-md: 0 4px 20px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
--shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
--shadow-glow-teal: 0 0 40px rgba(0,180,216,0.3);
--shadow-glow-gold: 0 0 40px rgba(255,183,3,0.3);
--shadow-glow-emerald: 0 0 40px rgba(45,106,79,0.3);
}
1.2 نظام الطباعة (Typography System)
css
:root {
--font-primary: 'Cairo', sans-serif;
--font-display: 'Cairo', sans-serif;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
--text-6xl: 60px;
--text-7xl: 72px;
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
--weight-black: 900;
}
1.3 نظام المسافات (Spacing System)
css
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 56px;
--space-11: 64px;
--space-12: 80px;
--space-13: 96px;
--space-14: 120px;
}
1.4 نظام الزوايا (Border Radius)
css
:root {
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-3xl: 36px;
--radius-full: 9999px;
}
2. 📄 الصفحات الداخلية كاملة (الكود المطور)
2.1 صفحة الذكاء الاصطناعي (AI Hub)
html
<!-- ============================================================
PAGE: AI HUB
============================================================ -->
<section class="page-header" style="padding: 140px 0 60px; background: var(--gradient-hero);">
<div class="container">
<div class="page-header-content" style="text-align: center; color: var(--white);">
<span class="tag" style="background: rgba(0,180,216,0.15); color: var(--secondary);">
<i class="fas fa-brain"></i> الذكاء الاصطناعي
</span>
<h1 style="font-size: var(--text-5xl); font-weight: var(--weight-extrabold); margin: 16px 0;">
مختبر <span style="background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">الذكاء</span> الاصطناعي
</h1>
<p style="font-size: var(--text-lg); color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto;">
أدوات تحليل، نماذج تعلم آلي، وتطبيقات ذكية لخدمة البيئة والطاقة في جازان
</p>
</div>
</div>
</section>
<!-- أدوات الذكاء الاصطناعي -->
<section style="padding: var(--space-12) 0; background: var(--white);">
<div class="container">
<div class="section-header">
<span class="tag"><i class="fas fa-tools"></i> الأدوات الذكية</span>
<h2>منصة <span>تحليل البيانات</span></h2>
</div>
<div class="tools-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7);">
<!-- أداة 1 -->
<div class="tool-card" style="background: var(--white); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,0.04); transition: all 0.4s ease;">
<div class="tool-icon" style="width: 60px; height: 60px; background: rgba(0,180,216,0.1); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--secondary); margin-bottom: var(--space-4);">
<i class="fas fa-chart-line"></i>
</div>
<h3 style="font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-2);">تحليل المناخ</h3>
<p style="color: var(--gray); font-size: var(--text-sm); line-height: 1.8;">نموذج ذكاء اصطناعي لتحليل بيانات الطقس والتغيرات المناخية في منطقة جازان</p>
<div style="margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap;">
<span style="background: rgba(0,180,216,0.08); color: var(--secondary); padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);">تنبؤ</span>
<span style="background: rgba(45,106,79,0.08); color: var(--accent); padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);">بيئي</span>
</div>
<a href="#" style="display: inline-block; margin-top: var(--space-4); color: var(--secondary); font-weight: var(--weight-bold); text-decoration: none;">
استخدم الأداة <i class="fas fa-arrow-left" style="margin-right: 6px;"></i>
</a>
</div>
<!-- أداة 2 -->
<div class="tool-card" style="background: var(--white); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,0.04); transition: all 0.4s ease;">
<div class="tool-icon" style="width: 60px; height: 60px; background: rgba(45,106,79,0.1); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--accent); margin-bottom: var(--space-4);">
<i class="fas fa-solar-panel"></i>
</div>
<h3 style="font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-2);">كفاءة الطاقة</h3>
<p style="color: var(--gray); font-size: var(--text-sm); line-height: 1.8;">تحليل استهلاك الطاقة وتقديم توصيات ذكية لتحسين الكفاءة</p>
<div style="margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap;">
<span style="background: rgba(255,183,3,0.08); color: var(--gold); padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);">طاقة</span>
<span style="background: rgba(0,180,216,0.08); color: var(--secondary); padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);">ذكاء</span>
</div>
<a href="#" style="display: inline-block; margin-top: var(--space-4); color: var(--secondary); font-weight: var(--weight-bold); text-decoration: none;">
استخدم الأداة <i class="fas fa-arrow-left" style="margin-right: 6px;"></i>
</a>
</div>
<!-- أداة 3 -->
<div class="tool-card" style="background: var(--white); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,0.04); transition: all 0.4s ease;">
<div class="tool-icon" style="width: 60px; height: 60px; background: rgba(255,183,3,0.1); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--gold); margin-bottom: var(--space-4);">
<i class="fas fa-tree"></i>
</div>
<h3 style="font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-2);">مراقبة الغطاء النباتي</h3>
<p style="color: var(--gray); font-size: var(--text-sm); line-height: 1.8;">تحليل صور الأقمار الصناعية لتقييم صحة الغطاء النباتي في جازان</p>
<div style="margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap;">
<span style="background: rgba(45,106,79,0.08); color: var(--accent); padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);">بيئة</span>
<span style="background: rgba(0,180,216,0.08); color: var(--secondary); padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);">استشعار</span>
</div>
<a href="#" style="display: inline-block; margin-top: var(--space-4); color: var(--secondary); font-weight: var(--weight-bold); text-decoration: none;">
استخدم الأداة <i class="fas fa-arrow-left" style="margin-right: 6px;"></i>
</a>
</div>
</div>
</div>
</section>
<!-- المشاريع -->
<section style="padding: var(--space-12) 0; background: var(--light-gray);">
<div class="container">
<div class="section-header">
<span class="tag"><i class="fas fa-project-diagram"></i> مشاريعنا</span>
<h2>مشاريع <span>الذكاء الاصطناعي</span> في جازان</h2>
</div>
<div class="projects-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7);">
<!-- مشروع 1 -->
<div class="project-card" style="background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); transition: all 0.4s ease;">
<div class="project-image" style="height: 220px; background: var(--gradient-secondary); display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(255,255,255,0.3);">
<i class="fas fa-cloud-sun-rain"></i>
</div>
<div style="padding: var(--space-6);">
<h3 style="font-size: var(--text-xl); font-weight: var(--weight-bold);">نظام التنبؤ بالطقس الذكي</h3>
<p style="color: var(--gray); font-size: var(--text-sm); line-height: 1.8; margin: var(--space-3) 0;">استخدام شبكات عصبية عميقة للتنبؤ بحالة الطقس في منطقة جازان بدقة 95%</p>
<div style="display: flex; gap: var(--space-3); flex-wrap: wrap;">
<span style="background: var(--secondary); color: var(--white); padding: 4px 16px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);">نشط</span>
<span style="background: rgba(0,0,0,0.05); color: var(--gray); padding: 4px 16px; border-radius: var(--radius-full); font-size: var(--text-xs);">2026</span>
</div>
</div>
</div>
<!-- مشروع 2 -->
<div class="project-card" style="background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); transition: all 0.4s ease;">
<div class="project-image" style="height: 220px; background: var(--gradient-accent); display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(255,255,255,0.3);">
<i class="fas fa-leaf"></i>
</div>
<div style="padding: var(--space-6);">
<h3 style="font-size: var(--text-xl); font-weight: var(--weight-bold);">مشروع جازان الخضراء</h3>
<p style="color: var(--gray); font-size: var(--text-sm); line-height: 1.8; margin: var(--space-3) 0;">استخدام الذكاء الاصطناعي لتحديد أفضل المواقع لزراعة الأشجار في جازان</p>
<div style="display: flex; gap: var(--space-3); flex-wrap: wrap;">
<span style="background: var(--accent); color: var(--white); padding: 4px 16px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);">مكتمل</span>
<span style="background: rgba(0,0,0,0.05); color: var(--gray); padding: 4px 16px; border-radius: var(--radius-full); font-size: var(--text-xs);">2025</span>
</div>
</div>
</div>
</div>
</div>
</section>
2.2 صفحة الطاقة المتجددة (Energy)
html
<!-- ============================================================
PAGE: ENERGY
============================================================ -->
<section class="page-header" style="padding: 140px 0 60px; background: var(--gradient-hero);">
<div class="container">
<div class="page-header-content" style="text-align: center; color: var(--white);">
<span class="tag" style="background: rgba(255,183,3,0.15); color: var(--gold);">
<i class="fas fa-bolt"></i> الطاقة المتجددة
</span>
<h1 style="font-size: var(--text-5xl); font-weight: var(--weight-extrabold); margin: 16px 0;">
مستقبل <span style="background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">الطاقة</span> في جازان
</h1>
<p style="font-size: var(--text-lg); color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto;">
مبادرات الطاقة الشمسية، الرياح، والهيدروجين الأخضر لتحقيق الاستدامة
</p>
</div>
</div>
</section>
<!-- لوحة تحكم الطاقة -->
<section style="padding: var(--space-12) 0; background: var(--white);">
<div class="container">
<div class="section-header">
<span class="tag"><i class="fas fa-dashboard"></i> لوحة التحكم</span>
<h2>مؤشرات <span>الطاقة</span> الحية</h2>
</div>
<div class="energy-dashboard" style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-7);">
<!-- الرسم البياني -->
<div style="background: var(--light-gray); border-radius: var(--radius-xl); padding: var(--space-7);">
<h4 style="font-weight: var(--weight-bold); margin-bottom: var(--space-4);">إنتاج الطاقة الشمسية (ميجاوات/ساعة)</h4>
<div style="display: flex; align-items: flex-end; gap: var(--space-3); height: 200px; padding: var(--space-4) 0;">
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 40px; height: 40px; background: var(--gradient-gold); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: var(--space-2);">يناير</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 40px; height: 60px; background: var(--gradient-gold); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: var(--space-2);">فبراير</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 40px; height: 85px; background: var(--gradient-gold); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: var(--space-2);">مارس</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 40px; height: 120px; background: var(--gradient-gold); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: var(--space-2);">أبريل</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 40px; height: 150px; background: var(--gradient-gold); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: var(--space-2);">مايو</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 40px; height: 180px; background: var(--gradient-gold); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: var(--space-2);">يونيو</span>
</div>
</div>
</div>
<!-- الإحصائيات -->
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
<div style="background: var(--gradient-secondary); border-radius: var(--radius-xl); padding: var(--space-6); color: var(--white);">
<span style="font-size: var(--text-sm); opacity: 0.8;">الإنتاج اليومي</span>
<div style="font-size: var(--text-4xl); font-weight: var(--weight-extrabold);">12.4 <span style="font-size: var(--text-lg); font-weight: var(--weight-regular);">م.و/س</span></div>
</div>
<div style="background: var(--gradient-accent); border-radius: var(--radius-xl); padding: var(--space-6); color: var(--white);">
<span style="font-size: var(--text-sm); opacity: 0.8;">التوفير الشهري</span>
<div style="font-size: var(--text-4xl); font-weight: var(--weight-extrabold);">42% <span style="font-size: var(--text-lg); font-weight: var(--weight-regular);">استهلاك</span></div>
</div>
<div style="background: var(--gradient-gold); border-radius: var(--radius-xl); padding: var(--space-6); color: var(--navy);">
<span style="font-size: var(--text-sm); opacity: 0.8;">المشاريع النشطة</span>
<div style="font-size: var(--text-4xl); font-weight: var(--weight-extrabold);">8 <span style="font-size: var(--text-lg); font-weight: var(--weight-regular);">مشروع</span></div>
</div>
</div>
</div>
</div>
</section>
2.3 صفحة البيئة (Environment)
html
<!-- ============================================================
PAGE: ENVIRONMENT
============================================================ -->
<section class="page-header" style="padding: 140px 0 60px; background: var(--gradient-hero);">
<div class="container">
<div class="page-header-content" style="text-align: center; color: var(--white);">
<span class="tag" style="background: rgba(45,106,79,0.15); color: var(--accent-light);">
<i class="fas fa-leaf"></i> البيئة والطبيعة
</span>
<h1 style="font-size: var(--text-5xl); font-weight: var(--weight-extrabold); margin: 16px 0;">
حماية <span style="background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">الطبيعة</span> بذكاء
</h1>
<p style="font-size: var(--text-lg); color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto;">
مبادرات بيئية، محميات طبيعية، وتنوع بيولوجي في منطقة جازان
</p>
</div>
</div>
</section>
<!-- خريطة تفاعلية -->
<section style="padding: var(--space-12) 0; background: var(--white);">
<div class="container">
<div class="section-header">
<span class="tag"><i class="fas fa-map"></i> الخريطة البيئية</span>
<h2>استكشف <span>طبيعة</span> جازان</h2>
</div>
<div style="background: var(--light-gray); border-radius: var(--radius-xl); padding: var(--space-6); min-height: 400px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-4);">
<i class="fas fa-map-marked-alt" style="font-size: 60px; color: var(--secondary); opacity: 0.3;"></i>
<p style="color: var(--gray);">خريطة تفاعلية للمحميات الطبيعية والتنوع البيولوجي في جازان</p>
<button class="btn btn-primary" style="padding: 12px 32px;">
<i class="fas fa-eye"></i> عرض الخريطة
</button>
</div>
</div>
</section>
<!-- المؤشرات البيئية -->
<section style="padding: var(--space-12) 0; background: var(--light-gray);">
<div class="container">
<div class="section-header">
<span class="tag"><i class="fas fa-chart-simple"></i> المؤشرات البيئية</span>
<h2>جودة <span>البيئة</span> في جازان</h2>
</div>
<div class="indicators-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);">
<div style="background: var(--white); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-sm);">
<div style="font-size: 40px; margin-bottom: var(--space-2);">🌤️</div>
<div style="font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--secondary);">27°C</div>
<span style="color: var(--gray); font-size: var(--text-sm);">متوسط الحرارة</span>
</div>
<div style="background: var(--white); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-sm);">
<div style="font-size: 40px; margin-bottom: var(--space-2);">💧</div>
<div style="font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--accent);">62%</div>
<span style="color: var(--gray); font-size: var(--text-sm);">الرطوبة</span>
</div>
<div style="background: var(--white); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-sm);">
<div style="font-size: 40px; margin-bottom: var(--space-2);">🌿</div>
<div style="font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--gold);">1,200+</div>
<span style="color: var(--gray); font-size: var(--text-sm);">شجرة مزروعة</span>
</div>
<div style="background: var(--white); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-sm);">
<div style="font-size: 40px; margin-bottom: var(--space-2);">🐦</div>
<div style="font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--navy);">85</div>
<span style="color: var(--gray); font-size: var(--text-sm);">نوع طائر مسجل</span>
</div>
</div>
</div>
</section>
2.4 صفحة المجتمع (Community)
html
<!-- ============================================================
PAGE: COMMUNITY
============================================================ -->
<section class="page-header" style="padding: 140px 0 60px; background: var(--gradient-hero);">
<div class="container">
<div class="page-header-content" style="text-align: center; color: var(--white);">
<span class="tag" style="background: rgba(255,183,3,0.15); color: var(--gold);">
<i class="fas fa-users"></i> المجتمع
</span>
<h1 style="font-size: var(--text-5xl); font-weight: var(--weight-extrabold); margin: 16px 0;">
نبني <span style="background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">المستقبل</span> معاً
</h1>
<p style="font-size: var(--text-lg); color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto;">
انضم إلى مجتمع المبتكرين والباحثين والمهتمين بالاستدامة في جازان
</p>
</div>
</div>
</section>
<!-- المنتدى -->
<section style="padding: var(--space-12) 0; background: var(--white);">
<div class="container">
<div class="section-header">
<span class="tag"><i class="fas fa-comments"></i> المنتدى</span>
<h2>نقاشات <span>المجتمع</span></h2>
</div>
<div class="forum-topics" style="display: flex; flex-direction: column; gap: var(--space-4);">
<!-- موضوع 1 -->
<div style="display: flex; align-items: center; gap: var(--space-4); background: var(--light-gray); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); transition: all 0.3s ease;">
<div style="width: 50px; height: 50px; border-radius: 50%; background: var(--gradient-secondary); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: var(--weight-bold); flex-shrink: 0;">أ</div>
<div style="flex: 1;">
<h4 style="font-weight: var(--weight-bold);">كيف يمكن للذكاء الاصطناعي تحسين إدارة المياه في جازان؟</h4>
<span style="color: var(--gray); font-size: var(--text-sm);">بواسطة أحمد · 3 ساعات مضت</span>
</div>
<div style="display: flex; gap: var(--space-4); color: var(--gray); font-size: var(--text-sm);">
<span><i class="fas fa-reply"></i> 12</span>
<span><i class="fas fa-eye"></i> 45</span>
</div>
</div>
<!-- موضوع 2 -->
<div style="display: flex; align-items: center; gap: var(--space-4); background: var(--light-gray); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); transition: all 0.3s ease;">
<div style="width: 50px; height: 50px; border-radius: 50%; background: var(--gradient-accent); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: var(--weight-bold); flex-shrink: 0;">ن</div>
<div style="flex: 1;">
<h4 style="font-weight: var(--weight-bold);">تجربتي مع تركيب الألواح الشمسية في منزلي بجازان</h4>
<span style="color: var(--gray); font-size: var(--text-sm);">بواسطة نورا · 2 أيام مضت</span>
</div>
<div style="display: flex; gap: var(--space-4); color: var(--gray); font-size: var(--text-sm);">
<span><i class="fas fa-reply"></i> 8</span>
<span><i class="fas fa-eye"></i> 32</span>
</div>
</div>
</div>
<div style="text-align: center; margin-top: var(--space-6);">
<a href="#" class="btn btn-outline-teal">عرض جميع النقاشات</a>
</div>
</div>
</section>
3. 🧩 المكونات التفاعلية (Interactive Components)
3.1 شريط التقدم الدائري (Circular Progress)
html
<!-- ============================================================
COMPONENT: CIRCULAR PROGRESS
============================================================ -->
<div class="circular-progress" style="position: relative; width: 120px; height: 120px;">
<svg viewBox="0 0 120 120" style="transform: rotate(-90deg);">
<circle cx="60" cy="60" r="50" fill="none" stroke="var(--light-gray)" stroke-width="8" />
<circle cx="60" cy="60" r="50" fill="none" stroke="var(--secondary)" stroke-width="8"
stroke-dasharray="314.16" stroke-dashoffset="62.83"
style="transition: stroke-dashoffset 1.5s ease;" />
</svg>
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
<span style="font-size: var(--text-2xl); font-weight: var(--weight-extrabold); color: var(--navy);">80%</span>
<span style="display: block; font-size: var(--text-xs); color: var(--gray);">كفاءة</span>
</div>
</div>
3.2 بطاقة المشروع القابلة للقلب (Flip Card)
html
<!-- ============================================================
COMPONENT: FLIP CARD
============================================================ -->
<div class="flip-card" style="perspective: 1000px; width: 300px; height: 400px; cursor: pointer;">
<div class="flip-card-inner" style="position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d;">
<!-- Front -->
<div class="flip-card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-6); display: flex; flex-direction: column; align-items: center; justify-content: center;">
<div style="font-size: 60px; margin-bottom: var(--space-4);">🌱</div>
<h3 style="font-weight: var(--weight-bold);">مشروع التشجير</h3>
<p style="color: var(--gray); text-align: center; font-size: var(--text-sm);">زراعة 10,000 شجرة في جازان</p>
</div>
<!-- Back -->
<div class="flip-card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: var(--gradient-primary); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white); transform: rotateY(180deg);">
<h4 style="font-weight: var(--weight-bold); margin-bottom: var(--space-3);">تفاصيل المشروع</h4>
<p style="text-align: center; font-size: var(--text-sm); opacity: 0.9;">باستخدام الذكاء الاصطناعي لتحديد أفضل المواقع</p>
<button class="btn btn-gold" style="margin-top: var(--space-4); padding: 10px 24px; font-size: var(--text-sm);">اعرف </button>
</div>
</div>
</div>
<script>
// Flip card interaction
document.querySelectorAll('.flip-card').forEach(card => {
card.addEventListener('click', function() {
this.querySelector('.flip-card-inner').style.transform = 'rotateY(180deg)';
});
card.addEventListener('mouseleave', function() {
this.querySelector('.flip-card-inner').style.transform = 'rotateY(0deg)';
});
});
</script>
3.3 عداد تنازلي تفاعلي (Countdown Timer)
html
<!-- ============================================================
COMPONENT: COUNTDOWN TIMER
============================================================ -->
<div class="countdown" style="display: flex; gap: var(--space-4); justify-content: center; padding: var(--space-6);">
<div style="text-align: center;">
<div id="days" style="font-size: var(--text-5xl); font-weight: var(--weight-extrabold); color: var(--secondary);">00</div>
<span style="color: var(--gray); font-size: var(--text-sm);">أيام</span>
</div>
<div style="text-align: center;">
<div id="hours" style="font-size: var(--text-5xl); font-weight: var(--weight-extrabold); color: var(--secondary);">00</div>
<span style="color: var(--gray); font-size: var(--text-sm);">ساعات</span>
</div>
<div style="text-align: center;">
<div id="minutes" style="font-size: var(--text-5xl); font-weight: var(--weight-extrabold); color: var(--secondary);">00</div>
<span style="color: var(--gray); font-size: var(--text-sm);">دقائق</span>
</div>
<div style="text-align: center;">
<div id="seconds" style="font-size: var(--text-5xl); font-weight: var(--weight-extrabold); color: var(--secondary);">00</div>
<span style="color: var(--gray); font-size: var(--text-sm);">ثواني</span>
</div>
</div>
<script>
// Countdown to next event
function startCountdown(targetDate) {
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
function update() {
const now = new Date().getTime();
const distance = targetDate - now;
if (distance < 0) {
daysEl.textContent = '00';
hoursEl.textContent = '00';
minutesEl.textContent = '00';
secondsEl.textContent = '00';
return;
}
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);
daysEl.textContent = String(days).padStart(2, '0');
hoursEl.textContent = String(hours).padStart(2, '0');
minutesEl.textContent = String(minutes).padStart(2, '0');
secondsEl.textContent = String(seconds).padStart(2, '0');
}
update();
setInterval(update, 1000);
}
// Set target date (e.g., next event)
const nextEvent = new Date('2026-12-31T23:59:59').getTime();
startCountdown(nextEvent);
</script>
4. 📱 تطبيق الجوال (Mobile App UI Concepts)
4.1 هيكل التطبيق
text
جازان AI App
├── شاشة الرئيسية
│ ├── ملخص الأنشطة
│ ├── إشعارات فورية
│ └── مؤشرات سريعة (طاقة، بيئة، مشاريع)
├── شاشة الذكاء الاصطناعي
│ ├── أدوات التحليل
│ ├── مشاريع AI
│ └── مقالات علمية
├── شاشة الطاقة
│ ├── استهلاك الطاقة
│ ├── إنتاج الطاقة المتجددة
│ └── نصائح توفير
├── شاشة البيئة
│ ├── خريطة تفاعلية
│ ├── مؤشرات بيئية
│ └── مبادرات
├── شاشة المجتمع
│ ├── المنتدى
│ ├── الفعاليات
│ └── قصص النجاح
└── شاشة الملف الشخصي
├── الإنجازات
├── الإعدادات
└── الإشعارات
4.2 تصميم واجهة التطبيق (Mockup Code)
html
<!-- ============================================================
MOBILE APP MOCKUP
============================================================ -->
<div style="max-width: 375px; margin: 0 auto; background: var(--white); border-radius: 40px; overflow: hidden; box-shadow: var(--shadow-xl);">
<!-- Status Bar -->
<div style="padding: 12px 24px; display: flex; justify-content: space-between; background: var(--navy); color: var(--white); font-size: var(--text-xs);">
<span>9:41</span>
<span><i class="fas fa-signal"></i> <i class="fas fa-wifi"></i> <i class="fas fa-battery-full"></i></span>
</div>
<!-- App Header -->
<div style="padding: 16px 20px; background: var(--navy); display: flex; justify-content: space-between; align-items: center;">
<div>
<span style="color: rgba(255,255,255,0.6); font-size: var(--text-xs);">مرحباً</span>
<h3 style="color: var(--white); font-weight: var(--weight-bold);">أحمد 👋</h3>
</div>
<div style="display: flex; gap: var(--space-3);">
<button style="background: rgba(255,255,255,0.1); border: none; color: var(--white); padding: 8px 12px; border-radius: var(--radius-full);">
<i class="fas fa-search"></i>
</button>
<button style="background: rgba(255,255,255,0.1); border: none; color: var(--white); padding: 8px 12px; border-radius: var(--radius-full); position: relative;">
<i class="fas fa-bell"></i>
<span style="position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--gold); border-radius: 50%;"></span>
</button>
</div>
</div>
<!-- Main Content -->
<div style="padding: 16px 20px 80px; background: var(--light-gray); min-height: 600px;">
<!-- Quick Stats -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
<div style="background: var(--gradient-secondary); padding: 16px; border-radius: var(--radius-lg); color: var(--white);">
<span style="font-size: var(--text-xs); opacity: 0.8;">الطاقة المنتجة</span>
<div style="font-size: var(--text-2xl); font-weight: var(--weight-extrabold);">8.4 <span style="font-size: var(--text-sm); font-weight: var(--weight-regular);">م.و</span></div>
</div>
<div style="background: var(--gradient-accent); padding: 16px; border-radius: var(--radius-lg); color: var(--white);">
<span style="font-size: var(--text-xs); opacity: 0.8;">الأشجار المزروعة</span>
<div style="font-size: var(--text-2xl); font-weight: var(--weight-extrabold);">1,250</div>
</div>
</div>
<!-- AI Tools -->
<div style="background: var(--white); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<h4 style="font-weight: var(--weight-bold);">أدوات الذكاء الاصطناعي</h4>
<a href="#" style="color: var(--secondary); font-size: var(--text-sm);">عرض الكل</a>
</div>
<div style="display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;">
<div style="min-width: 100px; background: rgba(0,180,216,0.08); padding: 12px; border-radius: var(--radius-md); text-align: center;">
<i class="fas fa-cloud-sun" style="font-size: 24px; color: var(--secondary);"></i>
<span style="display: block; font-size: var(--text-xs); margin-top: 4px;">الطقس</span>
</div>
<div style="min-width: 100px; background: rgba(45,106,79,0.08); padding: 12px; border-radius: var(--radius-md); text-align: center;">
<i class="fas fa-leaf" style="font-size: 24px; color: var(--accent);"></i>
<span style="display: block; font-size: var(--text-xs); margin-top: 4px;">الغطاء النباتي</span>
</div>
<div style="min-width: 100px; background: rgba(255,183,3,0.08); padding: 12px; border-radius: var(--radius-md); text-align: center;">
<i class="fas fa-bolt" style="font-size: 24px; color: var(--gold);"></i>
<span style="display: block; font-size: var(--text-xs); margin-top: 4px;">الطاقة</span>
</div>
</div>
</div>
<!-- Recent Projects -->
<div style="background: var(--white); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<h4 style="font-weight: var(--weight-bold);">أحدث المشاريع</h4>
<a href="#" style="color: var(--secondary); font-size: var(--text-sm);">عرض الكل</a>
</div>
<div style="display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; align-items: center; gap: 12px; padding: 8px; background: var(--light-gray); border-radius: var(--radius-md);">
<div style="width: 40px; height: 40px; background: var(--gradient-secondary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--white); flex-shrink: 0;">
<i class="fas fa-cloud"></i>
</div>
<div style="flex: 1;">
<h5 style="font-weight: var(--weight-semibold); font-size: var(--text-sm);">نظام التنبؤ بالطقس</h5>
<span style="font-size: var(--text-xs); color: var(--gray);">تحديث: منذ ساعة</span>
</div>
<span style="background: rgba(0,180,216,0.1); color: var(--secondary); padding: 2px 12px; border-radius: var(--radius-full); font-size: var(--text-xs);">نشط</span>
</div>
<div style="display: flex; align-items: center; gap: 12px; padding: 8px; background: var(--light-gray); border-radius: var(--radius-md);">
<div style="width: 40px; height: 40px; background: var(--gradient-accent); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--white); flex-shrink: 0;">
<i class="fas fa-tree"></i>
</div>
<div style="flex: 1;">
<h5 style="font-weight: var(--weight-semibold); font-size: var(--text-sm);">مشروع التشجير الذكي</h5>
<span style="font-size: var(--text-xs); color: var(--gray);">تم: 5 أيام</span>
</div>
<span style="background: rgba(45,106,79,0.1); color: var(--accent); padding: 2px 12px; border-radius: var(--radius-full); font-size: var(--text-xs);">مكتمل</span>
</div>
</div>
</div>
</div>
<!-- Bottom Navigation -->
<div style="position: fixed; bottom: 0; max-width: 375px; width: 100%; background: var(--white); border-top: 1px solid rgba(0,0,0,0.06); padding: 8px 16px 12px; display: flex; justify-content: space-around; box-shadow: 0 -4px 20px rgba(0,0,0,0.06);">
<a href="#" style="text-align: center; color: var(--secondary); text-decoration: none;">
<i class="fas fa-home" style="font-size: 22px;"></i>
<span style="display: block; font-size: var(--text-xs);">الرئيسية</span>
</a>
<a href="#" style="text-align: center; color: var(--gray); text-decoration: none;">
<i class="fas fa-brain" style="font-size: 22px;"></i>
<span style="display: block; font-size: var(--text-xs);">AI</span>
</a>
<a href="#" style="text-align: center; color: var(--gray); text-decoration: none;">
<i class="fas fa-bolt" style="font-size: 22px;"></i>
<span style="display: block; font-size: var(--text-xs);">الطاقة</span>
</a>
<a href="#" style="text-align: center; color: var(--gray); text-decoration: none;">
<i class="fas fa-leaf" style="font-size: 22px;"></i>
<span style="display: block; font-size: var(--text-xs);">البيئة</span>
</a>
<a href="#" style="text-align: center; color: var(--gray); text-decoration: none;">
<i class="fas fa-user" style="font-size: 22px;"></i>
<span style="display: block; font-size: var(--text-xs);">حسابي</span>
</a>
</div>
</div>
5. 📊 لوحة التحكم الإدارية (Admin Dashboard)
5.1 هيكل لوحة التحكم
text
Admin Dashboard
├── نظرة عامة
│ ├── عدد الزوار (رسوم بيانية)
│ ├── المشاريع النشطة
│ ├── المستخدمين الجدد
│ └── الإشعارات
├── إدارة المستخدمين
│ ├── قائمة المستخدمين
│ ├── أدوار المستخدمين
│ └── سجل النشاط
├── إدارة المحتوى
│ ├── المقالات
│ ├── المشاريع
│ ├── الفعاليات
│ └── الأدوات
├── إدارة المبادرات
│ ├── المبادرات البيئية
│ ├── مشاريع الطاقة
│ └── برامج الذكاء الاصطناعي
├── التقارير
│ ├── تقارير الطاقة
│ ├── تقارير البيئة
│ └── تقارير المستخدمين
└── الإعدادات
├── إعدادات الموقع
├── البريد الإلكتروني
└── النسخ الاحتياطي
5.2 كود لوحة التحكم (ملخص)
html
<!-- ============================================================
ADMIN DASHBOARD SUMMARY
============================================================ -->
<section style="padding: var(--space-8); background: var(--light-gray); min-height: 100vh;">
<div class="container">
<!-- Header -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8);">
<div>
<h1 style="font-size: var(--text-3xl); font-weight: var(--weight-extrabold);">لوحة التحكم</h1>
<span style="color: var(--gray);">نظرة عامة على المنصة</span>
</div>
<div style="display: flex; gap: var(--space-3);">
<button class="btn btn-primary" style="padding: 10px 20px; font-size: var(--text-sm);">
<i class="fas fa-plus"></i> إضافة جديد
</button>
<button class="btn btn-outline-teal" style="padding: 10px 20px; font-size: var(--text-sm);">
<i class="fas fa-download"></i> تصدير
</button>
</div>
</div>
<!-- Stats Cards -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-bottom: var(--space-8);">
<div style="background: var(--white); padding: var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: var(--gray); font-size: var(--text-sm);">الزوار اليوم</span>
<span style="background: rgba(0,180,216,0.1); color: var(--secondary); padding: 6px 12px; border-radius: var(--radius-full); font-size: var(--text-xs);">+12%</span>
</div>
<div style="font-size: var(--text-4xl); font-weight: var(--weight-extrabold); margin-top: var(--space-2);">2,847</div>
</div>
<div style="background: var(--white); padding: var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: var(--gray); font-size: var(--text-sm);">المشاريع النشطة</span>
<span style="background: rgba(45,106,79,0.1); color: var(--accent); padding: 6px 12px; border-radius: var(--radius-full); font-size: var(--text-xs);">نشطة</span>
</div>
<div style="font-size: var(--text-4xl); font-weight: var(--weight-extrabold); margin-top: var(--space-2);">24</div>
</div>
<div style="background: var(--white); padding: var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: var(--gray); font-size: var(--text-sm);">المستخدمون</span>
<span style="background: rgba(255,183,3,0.1); color: var(--gold); padding: 6px 12px; border-radius: var(--radius-full); font-size: var(--text-xs);">+8%</span>
</div>
<div style="font-size: var(--text-4xl); font-weight: var(--weight-extrabold); margin-top: var(--space-2);">1,342</div>
</div>
<div style="background: var(--white); padding: var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: var(--gray); font-size: var(--text-sm);">توفير الطاقة</span>
<span style="background: rgba(0,180,216,0.1); color: var(--secondary); padding: 6px 12px; border-radius: var(--radius-full); font-size: var(--text-xs);">+18%</span>
</div>
<div style="font-size: var(--text-4xl); font-weight: var(--weight-extrabold); margin-top: var(--space-2);">42%</div>
</div>
</div>
<!-- Charts -->
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6);">
<div style="background: var(--white); padding: var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);">
<h4 style="font-weight: var(--weight-bold); margin-bottom: var(--space-4);">نشاط الزوار (آخر 7 أيام)</h4>
<div style="display: flex; align-items: flex-end; gap: var(--space-3); height: 150px;">
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 30px; height: 60px; background: var(--gradient-secondary); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: 8px;">أحد</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 30px; height: 85px; background: var(--gradient-secondary); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: 8px;">إثن</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 30px; height: 70px; background: var(--gradient-secondary); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: 8px;">ثلاث</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 30px; height: 100px; background: var(--gradient-secondary); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: 8px;">أربع</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 30px; height: 120px; background: var(--gradient-secondary); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: 8px;">خميس</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 30px; height: 140px; background: var(--gradient-secondary); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: 8px;">جمعة</span>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<div style="width: 30px; height: 110px; background: var(--gradient-gold); border-radius: var(--radius-sm);"></div>
<span style="font-size: var(--text-xs); color: var(--gray); margin-top: 8px;">سبت</span>
</div>
</div>
</div>
<div style="background: var(--white); padding: var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);">
<h4 style="font-weight: var(--weight-bold); margin-bottom: var(--space-4);">أحدث النشاطات</h4>
<div style="display: flex; flex-direction: column; gap: var(--space-3);">
<div style="display: flex; gap: var(--space-3); align-items: center; padding: 8px; background: var(--light-gray); border-radius: var(--radius-md);">
<span style="width: 8px; height: 8px; background: var(--secondary); border-radius: 50%;"></span>
<span style="font-size: var(--text-sm);">تم إضافة مشروع جديد</span>
<span style="font-size: var(--text-xs); color: var(--gray); margin-right: auto;">منذ 10 د</span>
</div>
<div style="display: flex; gap: var(--space-3); align-items: center; padding: 8px; background: var(--light-gray); border-radius: var(--radius-md);">
<span style="width: 8px; height: 8px; background: var(--accent); border-radius: 50%;"></span>
<span style="font-size: var(--text-sm);">تسجيل مستخدم جديد</span>
<span style="font-size: var(--text-xs); color: var(--gray); margin-right: auto;">منذ 30 د</span>
</div>
<div style="display: flex; gap: var(--space-3); align-items: center; padding: 8px; background: var(--light-gray); border-radius: var(--radius-md);">
<span style="width: 8px; height: 8px; background: var(--gold); border-radius: 50%;"></span>
<span style="font-size: var(--text-sm);">تحديث بيانات الطاقة</span>
<span style="font-size: var(--text-xs); color: var(--gray); margin-right: auto;">منذ ساعتين</span>
</div>
</div>
</div>
</div>
</div>
</section>
6. 🚀 خطة النشر والتشغيل (Deployment Plan)
6.1 متطلبات التشغيل
| المتطلب | التفاصيل |
|---|---|
| استضافة | VPS / Cloud (AWS, Google Cloud, أو خدمة محلية) |
| نظام التشغيل | Linux (Ubuntu 22.04 LTS) |
| خادم الويب | Nginx + Apache |
| لغة البرمجة | HTML, CSS, JavaScript (Frontend) / Node.js أو PHP (Backend) |
| قاعدة البيانات | MySQL / PostgreSQL |
| CDN | Cloudflare أو أي خدمة CDN |
| SSL | شهادة SSL مجانية (Let’s Encrypt) |
6.2 هيكل الملفات
text
jazan-ai-platform/
├── index.html
├── about.html
├── ai-hub.html
├── energy.html
├── environment.html
├── community.html
├── blog.html
├── contact.html
├── admin/
│ ├── index.html
│ ├── users.html
│ ├── content.html
│ └── reports.html
├── assets/
│ ├── css/
│ │ ├── style.css
│ │ ├── admin.css
│ │ └── responsive.css
│ ├── js/
│ │ ├── main.js
│ │ ├── admin.js
│ │ ├── charts.js
│ │ └── animations.js
│ ├── images/
│ │ ├── logo.svg
│ │ ├── hero-bg.jpg
│ │ └── icons/
│ └── fonts/
├── includes/
│ ├── header.html
│ ├── footer.html
│ └── components/
└── config/
├── database.php
└── settings.json
6.3 خطوات النشر
bash
# 1. تحديث النظام sudo apt update && sudo apt upgrade -y # 2. تثبيت Nginx sudo apt install nginx -y # 3. تثبيت PHP (إذا كنت تستخدم PHP) sudo apt install php php-fpm php-mysql -y # 4. رفع الملفات إلى الخادم scp -r /local/project/* user@server:/var/www/jazan-ai/ # 5. تعيين الصلاحيات sudo chown -R www-data:www-data /var/www/jazan-ai/ sudo chmod -R 755 /var/www/jazan-ai/ # 6. تهيئة Nginx sudo nano /etc/nginx/sites-available/jazan-ai # 7. تفعيل الموقع sudo ln -s /etc/nginx/sites-available/jazan-ai /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx # 8. تثبيت شهادة SSL (Let's Encrypt) sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d jazan-ai.com # 9. إعداد قاعدة البيانات mysql -u root -p CREATE DATABASE jazan_ai; CREATE USER 'jazan_user'@'localhost' IDENTIFIED BY 'secure_password'; GRANT ALL PRIVILEGES ON jazan_ai.* TO 'jazan_user'@'localhost'; FLUSH PRIVILEGES;
7. 📝 نموذج المحتوى التحريري (Editorial Content)
7.1 مقالات مقترحة
| العنوان | الفئة | الكلمات المفتاحية |
|---|---|---|
| “كيف يعيد الذكاء الاصطناعي تشكيل قطاع الطاقة في جازان” | الطاقة | AI, طاقة متجددة, استدامة |
| “5 تقنيات ذكاء اصطناعي تحمي البيئة في المملكة” | البيئة | حماية البيئة, تقنيات خضراء |
| “من جازان إلى العالم: قصص نجاح مشاريع الاستدامة” | المجتمع | قصص نجاح, مبادرات |
| “مستقبل الزراعة الذكية في منطقة جازان” | الذكاء الاصطناعي | زراعة, تقنية, ذكاء |
| “دليل المستثمر: فرص الطاقة المتجددة في جازان” | الطاقة | استثمار, طاقة نظيفة |
7.2 نصوص دعائية (Social Media Posts)
منشور إعلاني (فيسبوك/تويتر):
🌱 جازان للذكاء الاصطناعي تطلق منصتها الرقمية!
نجمع بين التقنية والطبيعة لبناء مستقبل أكثر استدامة.
انضم إلى مجتمع المبتكرين والباحثين في منطقة جازان.🔗 [رابط المنصة]
#جازان_AI #الذكاء_الاصطناعي #الاستدامة #الطاقة_المتجددة
منشور تعليمي (إنستغرام):
📊 كيف يمكن للذكاء الاصطناعي أن يحسن جودة الهواء؟
في منصة جازان AI، نستخدم نماذج تعلم آلي لتحليل بيانات جودة الهواء وتقديم توصيات فورية.
🧠 تعلم عن أدواتنا الذكية!
#تكنولوجيا_البيئة #AI_for_Good
8. 🔮 الخاتمة النهائية
منصة جازان للذكاء الاصطناعي هي نموذج متكامل يثبت أن التقنية والطبيعة يمكن أن يتعايشا بتناغم، وأن الذكاء الاصطناعي ليس مجرد أداة للربح، بل وسيلة لبناء مستقبل مستدام للأجيال القادمة.
✅ ما تم تقديمه في هذه الحزمة الموسعة:
- ✅ نظام تصميم متقدم (ألوان، طباعة، مسافات، زوايا)
- ✅ كود كامل للصفحات الداخلية (AI Hub، الطاقة، البيئة، المجتمع)
- ✅ مكونات تفاعلية (عدادات، بطاقات قلب، مؤقتات)
- ✅ تصميم تطبيق جوال (UI/UX متكامل)
- ✅ لوحة تحكم إدارية (إحصائيات، إدارة محتوى)
- ✅ خطة نشر وتشغيل (متطلبات، هيكل، أوامر)
- ✅ محتوى تحريري (مقالات، منشورات دعائية)
- ✅ خطة تسويقية (مراحل، أهداف، مؤشرات)
- ✅ خريطة طريق (2026-2028)
- ✅ نموذج تشغيلي (هيكل إداري، خطة شهرية)
🚀 هل تريد:
- الكود الكامل لصفحة معينة؟
- تصميماً مخصصاً لقسم جديد؟
- إضافة نظام تسجيل دخول؟
- ربط المنصة بقاعدة بيانات؟
- تحويل التصميم إلى React أو Vue.js؟
أنا مستعد لتقديم كل ما تحتاجه فوراً!