منصة الكويت الذكية لمراقبة المرور والحوادث :root { –bg: #07111f; –panel: rgba(10, 20, 38, 0.84); –line: rgba(255,255,255,0.08); –text: #eef5ff; –muted: #9ab0cb; –cyan: #34d5ff; –green: #3ddc97; –amber: #ffbb45; –red: #ff6575; –blue: #5794ff; –shadow: 0 24px 60px rgba(0,0,0,0.32); –radius: 22px; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, “Segoe UI”, Tahoma, Arial, sans-serif; color: var(–text); background: radial-gradient(circle at top right, rgba(52,213,255,0.14), transparent 22%), radial-gradient(circle at bottom left, rgba(87,148,255,0.12), transparent 24%), linear-gradient(180deg, #05101d 0%, #091829 100%); min-height: 100vh; } .wrap { max-width: 1600px; margin: 0 auto; padding: 20px; } .glass { background: var(–panel); border: 1px solid var(–line); box-shadow: var(–shadow); backdrop-filter: blur(14px); } .topbar { display: grid; grid-template-columns: 1.3fr .9fr; gap: 18px; padding: 22px; border-radius: 28px; margin-bottom: 18px; position: relative; overflow: hidden; } .headline h1 { margin: 10px 0 8px; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; } .headline p { margin: 0; color: var(–muted); max-width: 900px; line-height: 1.7; font-size: 15px; } .badges,.toolbar,.lang-switch { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .badge,.btn,.tab,.mini-tag { border: 1px solid var(–line); border-radius: 999px; padding: 10px 14px; font-size: 13px; color: var(–text); background: rgba(255,255,255,0.04); cursor: pointer; transition: .2s ease; } .accent { background: rgba(52,213,255,.18); color: #c9f8ff; border-color: rgba(52,213,255,.24); } .danger { background: rgba(255,101,117,.14); color: #ffc0c6; border-color: rgba(255,101,117,.18); } .success { background: rgba(61,220,151,.14); color: #c6ffe6; border-color: rgba(61,220,151,.18); } .warn { background: rgba(255,187,69,.14); color: #ffe1a9; border-color: rgba(255,187,69,.18); } .control-box { display: flex; flex-direction: column; gap: 12px; justify-content: center; } .search-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; } .search { border-radius: 18px; border: 1px solid var(–line); background: rgba(0,0,0,.22); color: var(–text); padding: 14px 16px; font-size: 14px; outline: none; width: 100%; } .grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; } .stat { padding: 18px; border-radius: var(–radius); position: relative; overflow: hidden; } .stat-label { color: var(–muted); font-size: 13px; } .stat-value { font-size: 34px; font-weight: 800; margin: 8px 0 4px; } .stat-note { color: #9fdcff; font-size: 12px; } .main { display: grid; grid-template-columns: 1.7fr .95fr; gap: 18px; margin-bottom: 18px; } .panel { border-radius: 28px; padding: 18px; overflow: hidden; } .panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .panel-head h3 { margin: 0 0 6px; font-size: 22px; } .panel-head p { margin: 0; color: var(–muted); font-size: 13px; line-height: 1.6; } .map-box { height: 520px; border-radius: 26px; position: relative; overflow: hidden; border: 1px solid var(–line); background: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px), radial-gradient(circle at 22% 31%, rgba(255,101,117,.20), transparent 12%), radial-gradient(circle at 58% 28%, rgba(255,187,69,.18), transparent 12%), radial-gradient(circle at 46% 67%, rgba(61,220,151,.18), transparent 12%), linear-gradient(180deg, #0a1728 0%, #09111c 100%); background-size: 44px 44px, 44px 44px, auto, auto, auto, auto; } .roads::before,.roads::after { content:””; position:absolute; border-radius:999px; background: linear-gradient(90deg, rgba(180,220,255,.06), rgba(120,190,255,.22), rgba(180,220,255,.04)); } .roads::before { width: 72%; height: 10px; top: 34%; left: 10%; transform: rotate(-12deg); } .roads::after { width: 52%; height: 10px; bottom: 25%; right: 14%; transform: rotate(29deg); } .vertical-road { position: absolute; width: 10px; height: 60%; right: 43%; top: 16%; border-radius: 999px; background: linear-gradient(180deg, rgba(180,220,255,.05), rgba(120,190,255,.21), rgba(180,220,255,.05)); } .marker { position: absolute; border-radius: 20px; padding: 10px 14px; font-size: 12px; border: 1px solid var(–line); backdrop-filter: blur(8px); box-shadow: 0 10px 20px rgba(0,0,0,.24); white-space: nowrap; } .m-red { background: rgba(255,101,117,.18); color: #ffd0d5; } .m-amber { background: rgba(255,187,69,.18); color: #ffe3b2; } .m-green { background: rgba(61,220,151,.18); color: #d1ffea; } .m-blue { background: rgba(87,148,255,.18); color: #dce8ff; } .map-float { position: absolute; inset-inline-end: 18px; bottom: 18px; width: 330px; border-radius: 22px; padding: 16px; background: rgba(4,10,20,.78); border: 1px solid var(–line); } .side-stack { display: grid; gap: 18px; } .action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .action-btn { border-radius: 20px; padding: 16px 12px; background: rgba(255,255,255,.04); border: 1px solid var(–line); text-align: center; font-size: 13px; color: var(–text); cursor: pointer; } .list { display: grid; gap: 10px; } .list-item,.event-card,.cam-row,.zone-row,.mini-card { border-radius: 22px; border: 1px solid var(–line); background: rgba(255,255,255,.03); padding: 16px; } .list-item strong { display: block; margin-bottom: 6px; } .small { margin: 0; color: var(–muted); font-size: 13px; line-height: 1.6; } .tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .tab.active { background: rgba(52,213,255,.18); color: #d2f9ff; border-color: rgba(52,213,255,.24); } .tab-panel { display: none; } .tab-panel.active { display: block; } .two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; } .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .event-top,.cam-row,.zone-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 12px; border: 1px solid var(–line); } .progress { height: 11px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; margin-top: 10px; border: 1px solid rgba(255,255,255,.04); } .bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(52,213,255,.8), rgba(87,148,255,.85)); } .module-list { display: grid; gap: 10px; } .module-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(–line); background: rgba(255,255,255,.03); border-radius: 18px; padding: 14px; color: var(–text); font-size: 14px; line-height: 1.7; } .footer-note { margin-top: 16px; color: var(–muted); font-size: 12px; line-height: 1.7; } @media (max-width: 1180px) { .topbar,.main,.two-col,.three-col { grid-template-columns: 1fr; } .grid-stats { grid-template-columns: repeat(2,1fr); } .map-float { width: calc(100% – 36px); } } @media (max-width: 700px) { .grid-stats,.action-grid { grid-template-columns: 1fr; } .search-row { grid-template-columns: 1fr; } .headline h1 { font-size: 28px; } .wrap { padding: 12px; } .panel,.topbar { padding: 14px; } .map-box { height: 420px; } }
● مباشر غرفة عمليات مرورية تغطية: جميع محافظات الكويت

منصة الكويت الذكية لمراقبة المرور والحوادث

لوحة عمليات حية مخصصة لمتابعة التدفق المروري، الحوادث، الاختناقات، البلاغات الجماهيرية، الكاميرات، والاستجابة الميدانية الفورية مع تنبيه السائقين مباشرة.

تدفق المرور
74%
+6% مقارنة بآخر ساعة
الحوادث النشطة
18
5 حالات عالية الأولوية
الوحدات الميدانية
26
21 وحدة متحركة الآن
التنبيهات المرسلة
42K
خلال اليوم الحالي

الخريطة الحية

عرض لحظي لمواضع الحوادث والاختناقات والدوريات والكاميرات ومناطق التحذير الذكي.

GIS + Live Feed
حادث متوسط – السادس
ازدحام شديد – الغزالي
دورية قريبة – الفروانية
كاميرا نشطة – الفحيحيل
تنبيه السائقين

إرسال تنبيهات فورية للمستخدمين داخل نطاق الخطر حسب الموقع الجغرافي ونوع الحالة والاتجاه المروري.

إجراءات سريعة

أوامر تشغيل فورية للغرفة.

التنبيهات الحية

آخر الإشعارات المرسلة من مركز العمليات.

ملخص غرفة العمليات

متوسط الاستجابة
06:12
بلاغات موثقة
127
مستوى الخطر العام
متوسط

الوحدات الأساسية المقترحة

رصد حي من الكاميرات وGPS وبلاغات المستخدمين.
تصنيف ذكي للحوادث والاختناقات حسب الأولوية والخطورة.
واجهة ثنائية اللغة عربية/إنجليزية مع تحويل فوري.
تنبيهات فورية عبر التطبيق والرسائل ولوحات الطرق الذكية.
تتبع زمني لكل حالة من البلاغ حتى الإغلاق.
تحليلات يومية وأسبوعية لمناطق الاختناق وتكرار الحوادث.

الكاميرات

مؤشر المناطق

const i18n={ar:{dir:’rtl’,liveBadge:’● مباشر’,opsBadge:’غرفة عمليات مرورية’,coverageBadge:’تغطية: جميع محافظات الكويت’,title:’منصة الكويت الذكية لمراقبة المرور والحوادث’,subtitle:’لوحة عمليات حية مخصصة لمتابعة التدفق المروري، الحوادث، الاختناقات، البلاغات الجماهيرية، الكاميرات، والاستجابة الميدانية الفورية مع تنبيه السائقين مباشرة.’,searchPlaceholder:’ابحث عن طريق، منطقة، حادث، أو مخرج…’,filterBtn:’فلترة’,exportBtn:’تصدير’,allKuwait:’كل الكويت’,rushHour:’ذروة’,accidentsOnly:’الحوادث فقط’,camerasOnly:’الكاميرات’,statFlow:’تدفق المرور’,statFlowNote:’+6% مقارنة بآخر ساعة’,statIncidents:’الحوادث النشطة’,statIncidentsNote:’5 حالات عالية الأولوية’,statUnits:’الوحدات الميدانية’,statUnitsNote:’21 وحدة متحركة الآن’,statAlerts:’التنبيهات المرسلة’,statAlertsNote:’خلال اليوم الحالي’,mapTitle:’الخريطة الحية’,mapDesc:’عرض لحظي لمواضع الحوادث والاختناقات والدوريات والكاميرات ومناطق التحذير الذكي.’,marker1:’حادث متوسط – السادس’,marker2:’ازدحام شديد – الغزالي’,marker3:’دورية قريبة – الفروانية’,marker4:’كاميرا نشطة – الفحيحيل’,warningTitle:’تنبيه السائقين’,warningDesc:’إرسال تنبيهات فورية للمستخدمين داخل نطاق الخطر حسب الموقع الجغرافي ونوع الحالة والاتجاه المروري.’,sendAlert:’إرسال تنبيه’,openCase:’فتح حالة’,quickActions:’إجراءات سريعة’,quickActionsDesc:’أوامر تشغيل فورية للغرفة.’,dispatchPatrol:’إرسال دورية’,activateSiren:’تفعيل إنذار’,sendPublicAlert:’تنبيه الجمهور’,callEmergency:’اتصال طوارئ’,alertsTitle:’التنبيهات الحية’,alertsDesc:’آخر الإشعارات المرسلة من مركز العمليات.’,tabOverview:’نظرة عامة’,tabEvents:’الأحداث النشطة’,tabCameras:’الكاميرات والمجسات’,tabAnalytics:’التحليلات’,roomOverview:’ملخص غرفة العمليات’,avgResponse:’متوسط الاستجابة’,verifiedReports:’بلاغات موثقة’,riskLevel:’مستوى الخطر العام’,riskMedium:’متوسط’,modulesTitle:’الوحدات الأساسية المقترحة’,module1:’رصد حي من الكاميرات وGPS وبلاغات المستخدمين.’,module2:’تصنيف ذكي للحوادث والاختناقات حسب الأولوية والخطورة.’,module3:’واجهة ثنائية اللغة عربية/إنجليزية مع تحويل فوري.’,module4:’تنبيهات فورية عبر التطبيق والرسائل ولوحات الطرق الذكية.’,module5:’تتبع زمني لكل حالة من البلاغ حتى الإغلاق.’,module6:’تحليلات يومية وأسبوعية لمناطق الاختناق وتكرار الحوادث.’,camsTitle:’الكاميرات’,zonesTitle:’مؤشر المناطق’,footerNote:’هذه نسخة تشغيلية أولية لواجهة المنصة. يمكن ربطها لاحقاً بخرائط حية، كاميرات، واجهات برمجة تطبيقات، إشعارات دفع، ولوحة تحكم مركزية خاصة بوزارة الداخلية أو الإدارة العامة للمرور.’},en:{dir:’ltr’,liveBadge:’● LIVE’,opsBadge:’Traffic Operations Room’,coverageBadge:’Coverage: All Kuwait Governorates’,title:’Kuwait Smart Traffic & Accident Monitoring Platform’,subtitle:’A live operational dashboard for tracking traffic flow, incidents, congestion, public reports, cameras, and field response while alerting drivers in real time.’,searchPlaceholder:’Search road, district, incident, or exit…’,filterBtn:’Filter’,exportBtn:’Export’,allKuwait:’All Kuwait’,rushHour:’Rush Hour’,accidentsOnly:’Accidents Only’,camerasOnly:’Cameras’,statFlow:’Traffic Flow’,statFlowNote:’+6% vs last hour’,statIncidents:’Active Incidents’,statIncidentsNote:’5 high-priority cases’,statUnits:’Field Units’,statUnitsNote:’21 currently moving’,statAlerts:’Alerts Sent’,statAlertsNote:’during the current day’,mapTitle:’Live Map’,mapDesc:’Live display of incidents, congestion, patrols, cameras, and smart warning zones.’,marker1:’Moderate accident – 6th Ring’,marker2:’Heavy congestion – Ghazali’,marker3:’Patrol nearby – Farwaniya’,marker4:’Active camera – Fahaheel’,warningTitle:’Driver Warning’,warningDesc:’Instant alerts to users within the danger radius based on location, case type, and traffic direction.’,sendAlert:’Send Alert’,openCase:’Open Case’,quickActions:’Quick Actions’,quickActionsDesc:’Immediate operational commands.’,dispatchPatrol:’Dispatch Patrol’,activateSiren:’Activate Alarm’,sendPublicAlert:’Public Alert’,callEmergency:’Emergency Call’,alertsTitle:’Live Alerts’,alertsDesc:’Latest notifications issued by the operations center.’,tabOverview:’Overview’,tabEvents:’Active Events’,tabCameras:’Cameras & Sensors’,tabAnalytics:’Analytics’,roomOverview:’Operations Room Summary’,avgResponse:’Average Response’,verifiedReports:’Verified Reports’,riskLevel:’Public Risk Level’,riskMedium:’Medium’,modulesTitle:’Recommended Core Modules’,module1:’Live ingestion from cameras, GPS, and crowd reports.’,module2:’Smart prioritization of incidents and bottlenecks by urgency.’,module3:’Instant Arabic/English switching control interface.’,module4:’Instant alerts through app, SMS, and smart road signage.’,module5:’Timestamped lifecycle tracking from report to closure.’,module6:’Daily and weekly analytics for repeated congestion and incidents.’,camsTitle:’Cameras’,zonesTitle:’Zone Index’,footerNote:’This is an initial operational interface prototype. It can later be connected to live maps, cameras, APIs, push notifications, and a central command dashboard for traffic authorities.’}}; const alerts={ar:[{title:’تنبيه فوري’,text:’ازدحام مرتفع على طريق الغزالي. المسار البديل المقترح: جمال عبدالناصر.’},{title:’سلامة الطريق’,text:’حادث قرب المخرج 208، تم إرسال تنبيه للسائقين ضمن نصف قطر 5 كم.’},{title:’غرفة العمليات’,text:’3 بلاغات جديدة قيد التحقق و2 دوريات تتحرك حالياً نحو المواقع.’}],en:[{title:’Urgent Alert’,text:’Heavy congestion on Ghazali Road. Suggested alternate route: Jamal Abdulnasser.’},{title:’Road Safety’,text:’Accident near Exit 208. Drivers within a 5 km radius were alerted.’},{title:’Operations Room’,text:’3 new reports are under verification and 2 patrols are moving to the sites.’}]}; const events={ar:[{id:’EV-1042′,zone:’الدائري السادس – باتجاه الجهراء’,type:’حادث متوسط’,note:’وصول الدورية خلال 4 دقائق’,tone:’danger’,time:’09:42′},{id:’EV-1043′,zone:’طريق الملك فهد – قرب صبحان’,type:’ازدحام شديد’,note:’تحويل مروري مقترح’,tone:’warn’,time:’09:45′},{id:’EV-1044′,zone:’الدائري الأول – مدينة الكويت’,type:’مركبة متعطلة’,note:’الرافعة في الطريق’,tone:’success’,time:’09:47′}],en:[{id:’EV-1042′,zone:’6th Ring Road – Jahra Direction’,type:’Moderate Accident’,note:’Patrol ETA 4 mins’,tone:’danger’,time:’09:42′},{id:’EV-1043′,zone:’King Fahd Road – Near Subhan’,type:’Heavy Congestion’,note:’Diversion suggested’,tone:’warn’,time:’09:45′},{id:’EV-1044′,zone:’1st Ring Road – Kuwait City’,type:’Disabled Vehicle’,note:’Tow truck en route’,tone:’success’,time:’09:47′}]}; const cameras={ar:[{name:’كاميرا – الدائري الخامس’,status:’Online’},{name:’كاميرا – طريق الفحيحيل’,status:’Online’},{name:’كاميرا – طريق الجهراء’,status:’Warning’},{name:’كاميرا – الشويخ الصناعية’,status:’Offline’}],en:[{name:’Camera – 5th Ring Road’,status:’Online’},{name:’Camera – Fahaheel Road’,status:’Online’},{name:’Camera – Jahra Road’,status:’Warning’},{name:’Camera – Shuwaikh Industrial’,status:’Offline’}]}; const zones={ar:[{name:’مدينة الكويت’,flow:78},{name:’حولي’,flow:61},{name:’الفروانية’,flow:84},{name:’الجهراء’,flow:49},{name:’الأحمدي’,flow:66},{name:’مبارك الكبير’,flow:57}],en:[{name:’Kuwait City’,flow:78},{name:’Hawalli’,flow:61},{name:’Farwaniya’,flow:84},{name:’Jahra’,flow:49},{name:’Ahmadi’,flow:66},{name:’Mubarak Al-Kabeer’,flow:57}]}; const analytics={ar:[{title:’نسبة الحوادث المرتبطة بالازدحام’,value:’62%’},{title:’الإنذارات المرسلة خلال آخر ساعة’,value:’4,280′},{title:’أكثر منطقة تكراراً اليوم’,value:’الفروانية’}],en:[{title:’Incidents linked to congestion’,value:’62%’},{title:’Alerts sent in the last hour’,value:’4,280′},{title:’Most repeated hotspot today’,value:’Farwaniya’}]}; let currentLang=’ar’; function applyLanguage(lang){currentLang=lang;document.documentElement.lang=lang;document.documentElement.dir=i18n[lang].dir;document.querySelectorAll(‘[data-i18n]’).forEach(el=>{const key=el.dataset.i18n;if(i18n[lang][key])el.textContent=i18n[lang][key];});document.querySelectorAll(‘[data-i18n-placeholder]’).forEach(el=>{const key=el.dataset.i18nPlaceholder;if(i18n[lang][key])el.placeholder=i18n[lang][key];});renderAlerts();renderEvents();renderCameras();renderZones();renderAnalytics();document.getElementById(‘langAr’).classList.toggle(‘accent’,lang===’ar’);document.getElementById(‘langEn’).classList.toggle(‘accent’,lang===’en’);} function renderAlerts(){document.getElementById(‘alertsList’).innerHTML=alerts[currentLang].map(item=>`
${item.title}

${item.text}

`).join(”);} function renderEvents(){document.getElementById(‘eventsList’).innerHTML=events[currentLang].map(item=>`
${item.id}
${item.zone}
${item.type}
${item.time}
${item.note}
`).join(”);} function renderCameras(){document.getElementById(‘camerasList’).innerHTML=cameras[currentLang].map(item=>`
${item.name}

Video + sensor feed

${item.status}
`).join(”);} function renderZones(){document.getElementById(‘zonesList’).innerHTML=zones[currentLang].map(item=>`
${item.name}${item.flow}%
`).join(”);} function renderAnalytics(){document.getElementById(‘analyticsCards’).innerHTML=analytics[currentLang].map(item=>`
${item.title}
${item.value}
`).join(”);} document.querySelectorAll(‘.tab’).forEach(btn=>{btn.addEventListener(‘click’,()=>{document.querySelectorAll(‘.tab’).forEach(t=>t.classList.remove(‘active’));document.querySelectorAll(‘.tab-panel’).forEach(p=>p.classList.remove(‘active’));btn.classList.add(‘active’);document.getElementById(btn.dataset.tab).classList.add(‘active’);});}); document.getElementById(‘langAr’).addEventListener(‘click’,()=>applyLanguage(‘ar’));document.getElementById(‘langEn’).addEventListener(‘click’,()=>applyLanguage(‘en’));applyLanguage(‘ar’);