محاكي الكوارث والحرائق

#firepro-simulator-dashboard{
direction:rtl;
font-family:Arial,sans-serif;
max-width:1180px;
margin:30px auto;
padding:22px;
border-radius:24px;
color:#fff;
background:linear-gradient(135deg,#05070d,#111827,#260707);
border:1px solid #b91c1c;
box-shadow:0 0 35px rgba(220,38,38,.35);
}
#firepro-simulator-dashboard h2{
text-align:center;
color:#ff3333;
margin:5px 0;
}
#firepro-simulator-dashboard .sub{
text-align:center;
color:#cbd5e1;
margin-bottom:22px;
}
.fp-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:15px;
}
.fp-card{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
padding:16px;
}
.fp-card h3{
margin-top:0;
color:#ff4b4b;
}
.fp-card select,.fp-card input{
width:100%;
padding:10px;
border:0;
border-radius:10px;
font-size:15px;
box-sizing:border-box;
margin-bottom:10px;
}
.fp-risk{
font-size:58px;
text-align:center;
font-weight:bold;
}
.fp-bar{
height:23px;
background:#334155;
border-radius:50px;
overflow:hidden;
}
.fp-fill{
height:100%;
width:0%;
background:#22c55e;
transition:.7s;
}
.fp-btn{
width:100%;
padding:14px;
margin-top:18px;
border:0;
border-radius:14px;
background:linear-gradient(90deg,#991b1b,#ef4444,#f97316);
color:white;
font-size:18px;
font-weight:bold;
cursor:pointer;
}
.fp-decision{
text-align:center;
font-size:23px;
font-weight:bold;
margin-top:12px;
}
.fp-map{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
}
.fp-zone{
min-height:70px;
border-radius:12px;
background:#1e293b;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border:1px solid #475569;
font-size:13px;
}
.low{background:#14532d!important}
.mid{background:#854d0e!important}
.high{background:#7f1d1d!important}
.critical{background:#991b1b!important;box-shadow:0 0 18px red}
.fp-list{
line-height:2;
}
.fp-report{
margin-top:18px;
padding:16px;
border-radius:16px;
background:#020617;
border:1px solid rgba(255,255,255,.15);
line-height:1.9;
}
.fp-footer{
text-align:center;
color:#94a3b8;
font-size:13px;
margin-top:18px;
}

FirePro Simulator Dashboard

تشغيل المحاكاة الآن

function runFireProSimulator(){

var scenario = document.getElementById(“scenario”).value;
var site = Number(document.getElementById(“site”).value);
var people = Number(document.getElementById(“people”).value);
var delay = Number(document.getElementById(“delay”).value);
var alarm = Number(document.getElementById(“alarm”).value);
var suppression = Number(document.getElementById(“suppression”).value);
var fuel = Number(document.getElementById(“fuel”).value);

var scenarioRisk = 0;
var scenarioName = “”;
var timeline = “”;
var decision = “”;
var impact = “”;
var actions = “”;

if(scenario === “explosion”){
scenarioRisk = 95;
scenarioName = “انفجار”;
timeline =
“00:00 — تراكم غاز/ضغط/حرارة
” +
“00:05 — انفجار وموجة ضغط
” +
“00:15 — اشتعال مواد مجاورة
” +
“03:00 — خطر Flashover
” +
“05:00 — انتشار سريع للحريق”;
decision =
“• منع الدخول فورًا.
” +
“• تنفيذ دفاع خارجي كامل.
” +
“• عزل المنطقة.
” +
“• تجهيز إنقاذ خارجي وإسعاف.”;
impact =
“• خطر عالي جدًا على الأرواح.
” +
“• احتمال انهيار جزئي.
” +
“• انتشار سريع للهب والدخان.”;
actions =
“• عزل مصادر الطاقة والغاز.
” +
“• إنشاء منطقة أمان.
” +
“• منع اقتراب غير المختصين.
” +
“• طلب دعم إضافي.”;
}

if(scenario === “evacuation”){
scenarioRisk = 70;
scenarioName = “تأخير إخلاء”;
timeline =
“00:00 — بداية الحريق
” +
“02:00 — انتشار الدخان
” +
“04:00 — انخفاض الرؤية
” +
“06:00 — ازدحام في المخارج
” +
“10:00 — خطر اختناق وإصابات”;
decision =
“• تفعيل إنذار فوري.
” +
“• إخلاء كامل ومنظم.
” +
“• فتح جميع المخارج.
” +
“• توجيه الأشخاص لنقاط التجمع.”;
impact =
“• زيادة خطر الاختناق.
” +
“• ارتفاع احتمالية التدافع.
” +
“• صعوبة وصول فرق الإنقاذ.”;
actions =
“• تدريب إخلاء دوري.
” +
“• إزالة العوائق من المخارج.
” +
“• تحسين الإرشادات والإنارة.
” +
“• ربط الإنذار بالتنبيه الصوتي.”;
}

if(scenario === “system”){
scenarioRisk = 85;
scenarioName = “فشل نظام الإطفاء”;
timeline =
“00:00 — بداية الاشتعال
” +
“02:00 — النظام لا يستجيب
” +
“04:00 — نمو سريع للحريق
” +
“07:00 — انتقال لمناطق مجاورة
” +
“15:00 — احتمال انهيار جزئي”;
decision =
“• استخدام البدائل اليدوية.
” +
“• تنفيذ احتواء خارجي.
” +
“• عزل المنطقة.
” +
“• فحص المضخة ومصدر المياه.”;
impact =
“• فقدان السيطرة المبكرة.
” +
“• زيادة الخسائر المادية.
” +
“• خطر أعلى على فرق التدخل.”;
actions =
“• اختبار المضخة دوريًا.
” +
“• توفير مضخة احتياطية.
” +
“• مراقبة ضغط المياه.
” +
“• صيانة الرشاشات والصمامات.”;
}

if(scenario === “hazmat”){
scenarioRisk = 90;
scenarioName = “تسرب مواد خطرة”;
timeline =
“00:00 — تسرب مادة خطرة
” +
“01:00 — انتشار الأبخرة
” +
“03:00 — خطر اشتعال أو تفاعل
” +
“05:00 — تلوث منطقة أوسع
” +
“10:00 — خطر على الأرواح والبيئة”;
decision =
“• عزل المنطقة فورًا.
” +
“• منع مصادر الاشتعال.
” +
“• استخدام معدات حماية مناسبة.
” +
“• استدعاء فريق مواد خطرة.”;
impact =
“• خطر تسمم أو اختناق.
” +
“• احتمالية انفجار أو اشتعال.
” +
“• تلوث بيئي محتمل.”;
actions =
“• تخزين المواد حسب التوافق.
” +
“• توفير SDS واضحة.
” +
“• تدريب فريق الاستجابة.
” +
“• توفير أدوات احتواء التسرب.”;
}

var peopleRisk = Math.min(people / 2, 50);
var delayRisk = Math.min(delay * 5, 40);

var risk = Math.round(
(scenarioRisk * 0.35) +
(site * 0.15) +
(peopleRisk * 0.15) +
(delayRisk * 0.15) +
(alarm * 0.10) +
(suppression * 0.10) +
(fuel * 0.10)
);

if(risk > 100){ risk = 100; }

var color = “#22c55e”;
var level = “منخفض”;
var zoneClass = “low”;

if(risk <= 30){
color = "#22c55e";
level = "منخفض";
zoneClass = "low";
}else if(risk <= 55){
color = "#facc15";
level = "متوسط";
zoneClass = "mid";
}else if(risk <= 75){
color = "#f97316";
level = "مرتفع";
zoneClass = "high";
}else{
color = "#dc2626";
level = "حرج";
zoneClass = "critical";
}

document.getElementById("riskScore").innerHTML = risk + "%";
document.getElementById("riskScore").style.color = color;
document.getElementById("riskFill").style.width = risk + "%";
document.getElementById("riskFill").style.background = color;
document.getElementById("decision").innerHTML = "مستوى الخطر: " + level;
document.getElementById("decision").style.color = color;

document.getElementById("timeline").innerHTML = timeline;
document.getElementById("aiDecision").innerHTML = decision;
document.getElementById("impact").innerHTML = impact;
document.getElementById("actions").innerHTML = actions;

document.getElementById("response").innerHTML =
"• غرفة العمليات: قناة مفتوحة
” +
“• قائد الحادث: تحديث فوري
” +
“• فرق الإطفاء: تنفيذ القرار
” +
“• فرق الإنقاذ: جاهزية عالية
” +
“• السلامة: تأمين المخارج ونقاط التجمع”;

for(var i=1;i<=6;i++){
var zone = document.getElementById("z"+i);
zone.className = "fp-zone";
if(i <= Math.ceil(risk / 17)){
zone.classList.add(zoneClass);
}
}

document.getElementById("report").innerHTML =
"تقرير FirePro Simulator
” +
“السيناريو: ” + scenarioName + “
” +
“مستوى الخطر: ” + risk + “% – ” + level + “

” +
“تطور السيناريو:
” + timeline + “

” +
“قرار FirePro AI:
” + decision + “
” +
“التأثير المتوقع:
” + impact + “
” +
“ملاحظة: هذا نموذج توعوي تفاعلي ولا يغني عن خطط الطوارئ الرسمية أو قرارات الجهات المختصة.”;
}

runFireProSimulator();