code2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AquaGuard Jharkhand | SWSM - SIH 2025 Winning Prototype</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body class="bg-[#0a101e] text-slate-100 min-h-screen font-sans selection:bg-blue-500/30">

<!-- GOVT TOP BAR -->
<div class="bg-[#071022] border-b border-slate-800 text-[11px] px-6 py-2 flex justify-between items-center text-slate-400">
  <div class="flex gap-4"><span><i class="fa-solid fa-building-columns mr-1"></i> Govt of Jharkhand | SWSM (JJM)</span><span class="hidden md:inline">| State Water & Sanitation Mission</span></div>
  <div class="flex gap-3"><button onclick="toggleLang()" id="langBtn" class="px-2 py-1 bg-slate-800 rounded hover:bg-slate-700 text-white">हिन्दी</button><span class="text-emerald-400"><i class="fa-solid fa-circle text-[8px] animate-pulse"></i> ISRO + GSM Live</span></div>
</div>

<header class="sticky top-0 z-30 bg-[#0a101e]/80 backdrop-blur-xl border-b border-slate-800/80 px-6 py-4 flex justify-between items-center">
  <div class="flex items-center gap-3">
    <div class="w-10 h-10 bg-gradient-to-br from-blue-600 to-cyan-500 rounded-xl flex items-center justify-center text-white shadow-lg shadow-blue-600/30"><i class="fa-solid fa-droplet"></i></div>
    <div><h1 class="font-bold tracking-wide">AquaGuard <span class="text-blue-400">Jharkhand</span></h1><p class="text-[11px] text-slate-400" id="subTitle">AI Powered Water Quality Early Warning System - Jharia Coalfield</p></div>
  </div>
  <div class="flex items-center gap-4">
    <div class="hidden md:block text-right"><div id="liveClock" class="font-mono font-bold text-sm">--</div><div class="text-[10px] text-slate-500 uppercase">IST | NODE #JH04-DHN</div></div>
    <div class="px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-bold flex items-center gap-2"><span class="w-2 h-2 bg-emerald-400 rounded-full animate-ping"></span>GSM + LoRa ONLINE</div>
  </div>
</header>

<main class="max-w-[1440px] mx-auto px-6 py-6 grid grid-cols-12 gap-6">

  <!-- LEFT: MAP + STATUS -->
  <div class="col-span-12 lg:col-span-8 space-y-6">
    <!-- MAIN STATUS -->
    <div id="statusCard" class="relative overflow-hidden rounded-[20px] border p-6 flex justify-between items-center transition-all duration-500 bg-gradient-to-br from-emerald-950/40 to-slate-900 border-emerald-800/30">
      <div class="flex gap-4 items-center z-10">
        <div id="statusIcon" class="w-16 h-16 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 flex items-center justify-center text-3xl"><i class="fa-solid fa-shield-check"></i></div>
        <div>
          <div class="text-[11px] font-bold tracking-widest text-slate-400 uppercase">AI Water Safety Verdict</div>
          <h2 id="statusTitle" class="text-2xl font-black text-emerald-400">POTABLE - SAFE FOR DRINKING</h2>
          <p id="statusDesc" class="text-sm text-slate-300 mt-1">IS 10500 Compliant | AI Risk Score: <b class="text-emerald-400">12% - Low</b></p>
        </div>
      </div>
      <div class="z-10 flex flex-col gap-2">
        <button onclick="triggerHazard()" class="px-5 py-2.5 bg-white text-black font-bold text-sm rounded-xl hover:bg-slate-200 active:scale-95 transition"><i class="fa-solid fa-bolt mr-1"></i> Demo Contamination</button>
        <button onclick="downloadReport()" class="px-5 py-2 bg-slate-800 border border-slate-700 text-white text-xs rounded-xl hover:bg-slate-700"><i class="fa-solid fa-file-pdf mr-1"></i> Download SWSM Report</button>
      </div>
      <div class="absolute right-0 top-0 w-1/2 h-full bg-gradient-to-l from-emerald-500/10 to-transparent pointer-events-none"></div>
    </div>

    <!-- METRICS -->
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
      <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-4"><div class="text-[11px] text-slate-400 flex justify-between">pH <i class="fa-solid fa-flask text-blue-400"></i></div><div id="val-ph" class="text-2xl font-bold mt-2">7.2</div><div class="w-full h-1 bg-slate-800 rounded mt-2"><div id="bar-ph" class="h-1 bg-blue-500 rounded" style="width:60%"></div></div><div class="text-[10px] text-slate-500 mt-1">6.5-8.5 safe</div></div>
      <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-4"><div class="text-[11px] text-slate-400 flex justify-between">TURBIDITY <i class="fa-solid fa-water text-cyan-400"></i></div><div id="val-turb" class="text-2xl font-bold mt-2">1.2 <span class="text-xs font-normal">NTU</span></div><div class="w-full h-1 bg-slate-800 rounded mt-2"><div id="bar-turb" class="h-1 bg-cyan-500 rounded" style="width:15%"></div></div><div class="text-[10px] text-slate-500 mt-1">&lt;5 NTU</div></div>
      <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-4"><div class="text-[11px] text-slate-400 flex justify-between">TDS <i class="fa-solid fa-cubes text-amber-400"></i></div><div id="val-tds" class="text-2xl font-bold mt-2">210</div><div class="w-full h-1 bg-slate-800 rounded mt-2"><div id="bar-tds" class="h-1 bg-amber-500 rounded" style="width:30%"></div></div><div class="text-[10px] text-slate-500 mt-1">&lt;500 ppm</div></div>
      <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-4"><div class="text-[11px] text-slate-400 flex justify-between">IRON (Fe) <i class="fa-solid fa-triangle-exclamation text-orange-400"></i></div><div id="val-fe" class="text-2xl font-bold mt-2">0.11</div><div class="w-full h-1 bg-slate-800 rounded mt-2"><div id="bar-fe" class="h-1 bg-orange-500 rounded" style="width:20%"></div></div><div class="text-[10px] text-slate-500 mt-1">&lt;0.3 mg/L</div></div>
      <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-4"><div class="text-[11px] text-slate-400 flex justify-between">AI RISK <i class="fa-solid fa-brain text-purple-400"></i></div><div id="val-risk" class="text-2xl font-bold mt-2 text-emerald-400">12%</div><div class="w-full h-1 bg-slate-800 rounded mt-2"><div id="bar-risk" class="h-1 bg-emerald-500 rounded" style="width:12%"></div></div><div class="text-[10px] text-slate-500 mt-1">AMD Prediction</div></div>
    </div>

    <!-- CHART + MAP -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-5"><h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-4"><i class="fa-solid fa-chart-line text-blue-400 mr-2"></i>24H Trend Analysis</h3><canvas id="trendChart" height="160"></canvas></div>
      <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-2 overflow-hidden"><div id="map" class="w-full h-[230px] rounded-xl"></div></div>
    </div>
  </div>

  <!-- RIGHT PANEL -->
  <div class="col-span-12 lg:col-span-4 space-y-6">
    <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-5">
      <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-4"><i class="fa-solid fa-gears text-blue-400 mr-2"></i>Auto Actuators</h3>
      <div id="actuatorList" class="space-y-2"></div>
    </div>
    <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-5">
      <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-4"><i class="fa-solid fa-satellite-dish text-emerald-400 mr-2"></i>Community Alert System</h3>
      <div id="smsLog" class="space-y-2 text-xs font-mono"></div>
      <div class="mt-4 p-3 bg-blue-950/30 border border-blue-800/30 rounded-xl text-[11px] text-blue-200"><i class="fa-solid fa-lightbulb mr-1"></i> <b>SIH Innovation:</b> Offline SMS via GSM Module + Voice alert in Hindi (Kurukh/Santhali ready)</div>
    </div>
  </div>
</main>

<!-- DANGER OVERLAY - PRO LEVEL -->
<div id="dangerOverlay" class="fixed inset-0 z-[100] bg-[#450a0a]/90 backdrop-blur-xl hidden flex-col p-0">
  <div class="bg-red-600 text-white font-black text-center py-2 tracking-[0.3em] text-sm animate-pulse">⚠️ CRITICAL WATER HAZARD - JHARIA COALFIELD - DO NOT DRINK ⚠️</div>
  <div class="flex-1 flex flex-col items-center justify-center p-8 text-center">
    <div class="w-28 h-28 rounded-full bg-red-600 flex items-center justify-center text-5xl text-white shadow-[0_0_80px_rgba(239,68,68,0.6)] animate-bounce"><i class="fa-solid fa-triangle-exclamation"></i></div>
    <h1 class="mt-6 text-5xl font-black text-white uppercase tracking-tighter">Pani Peene Yogya Nahi Hai!</h1>
    <p class="mt-2 text-red-200">Water Supply Auto-Locked | Heavy Metal Contamination Detected</p>
    <div class="mt-8 grid grid-cols-2 gap-4 w-full max-w-2xl text-left">
      <div class="p-4 bg-black/40 border border-red-500/30 rounded-2xl"><div class="text-[10px] text-red-300 uppercase">Location</div><div class="font-bold">JH04 Dhanbad - Bastacolla</div></div>
      <div class="p-4 bg-black/40 border border-red-500/30 rounded-2xl"><div class="text-[10px] text-red-300 uppercase">Time</div><div id="overlayTime" class="font-bold font-mono">--</div></div>
      <div class="col-span-2 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-2xl"><div class="text-[10px] text-yellow-300 uppercase">AI Diagnosis</div><div id="overlayFaults" class="font-bold text-yellow-200 text-lg">Acid Mine Drainage pH 3.8, Iron 4.2mg/L, Turbidity 32 NTU - Risk 94%</div></div>
    </div>
    <div class="mt-8 flex gap-3"><span class="px-4 py-2 bg-white text-black rounded-full text-xs font-bold animate-pulse"><i class="fa-solid fa-volume-high mr-2"></i>Hindi Audio Alert Playing...</span><span class="px-4 py-2 bg-slate-900 text-white rounded-full text-xs font-mono">Auto SMS Sent to Mukhiya + Jal Sahiya</span></div>
  </div>
  <div class="p-4 flex justify-between text-xs font-mono text-red-300 border-t border-red-900/50"><span><i class="fa-solid fa-lock"></i> Valve Locked | UV + Lime Dosing Active</span><span>Closing in <b id="overlayTimer" class="text-white text-base">6.0</b>s</span></div>
</div>

<script>
// CLOCK
setInterval(()=>{document.getElementById('liveClock').textContent=new Date().toLocaleString('en-IN',{hour12:false}).replace(',','')},1000);

// MAP
const map = L.map('map',{zoomControl:false,attributionControl:false}).setView([23.79,86.42],11);
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png').addTo(map);
[{n:"JH04-Dhanbad",c:[23.79,86.43],s:"safe"},{n:"JH03-Jharia",c:[23.74,86.42],s:"danger"},{n:"JH05-Baghmara",c:[23.79,86.20],s:"safe"},{n:"JH02-Sindri",c:[23.67,86.48],s:"warn"}].forEach(p=>{
  L.circleMarker(p.c,{radius:8,color:p.s==='danger'?'#ef4444':p.s==='warn'?'#f59e0b':'#10b981',fillColor:p.s==='danger'?'#ef4444':p.s==='warn'?'#f59e0b':'#10b981',fillOpacity:0.8,weight:2}).addTo(map).bindPopup(p.n)
});

// CHART
const ctx=document.getElementById('trendChart');
const chart=new Chart(ctx,{type:'line',data:{labels:['-24h','-18h','-12h','-6h','Now'],datasets:[{label:'pH',data:[7.1,7.0,6.9,7.2,7.2],borderColor:'#60a5fa',tension:0.4},{label:'Iron',data:[0.1,0.12,0.15,0.11,0.11],borderColor:'#fb923c',tension:0.4}]},options:{plugins:{legend:{labels:{color:'#94a3b8',boxWidth:10}}},scales:{x:{grid:{color:'#1e293b'},ticks:{color:'#64748b'}},y:{grid:{color:'#1e293b'},ticks:{color:'#64748b'}}}}});

// STATE
let isHazard=false;
function updateUI(d){
  document.getElementById('val-ph').textContent=d.ph;
  document.getElementById('val-turb').innerHTML=d.turb+' <span class="text-xs">NTU</span>';
  document.getElementById('val-tds').textContent=d.tds;
  document.getElementById('val-fe').textContent=d.fe;
  document.getElementById('val-risk').textContent=d.risk+'%';
  document.getElementById('val-risk').className='text-2xl font-bold mt-2 '+(d.risk>70?'text-red-400':'text-emerald-400');
  document.getElementById('bar-risk').style.width=d.risk+'%';
  document.getElementById('bar-risk').className='h-1 rounded '+(d.risk>70?'bg-red-500':'bg-emerald-500');
  chart.data.datasets[0].data=[7.1,7.0,6.9,d.ph-0.2,d.ph]; chart.data.datasets[1].data=[0.1,0.12,0.15,d.fe-0.02,d.fe]; chart.update();
}
function renderActuators(clean){
  document.getElementById('actuatorList').innerHTML=clean?`
    <div class="p-3 bg-slate-950 border border-slate-800 rounded-xl flex justify-between text-sm"><span>UV Sterilizer</span><span class="text-emerald-400 text-xs font-bold px-2 py-1 bg-emerald-500/10 rounded">ACTIVE</span></div>
    <div class="p-3 bg-slate-950 border border-slate-800 rounded-xl flex justify-between text-sm"><span>LoRa Uplink</span><span class="text-emerald-400 text-xs font-bold px-2 py-1 bg-emerald-500/10 rounded">SENDING</span></div>`:
    `<div class="p-3 bg-red-950/30 border border-red-800/50 rounded-xl flex justify-between text-sm text-red-200"><span>Lime Dosing Pump</span><span class="text-red-400 text-xs font-bold px-2 py-1 bg-red-500/20 rounded animate-pulse">ENGAGED</span></div>
     <div class="p-3 bg-red-950/30 border border-red-800/50 rounded-xl flex justify-between text-sm text-red-200"><span>Iron Filter + Auto Valve Lock</span><span class="text-red-400 text-xs font-bold px-2 py-1 bg-red-500/20 rounded">LOCKED</span></div>
     <div class="p-3 bg-amber-950/30 border border-amber-800/50 rounded-xl flex justify-between text-sm text-amber-200"><span>Community Siren</span><span class="text-amber-400 text-xs font-bold px-2 py-1 bg-amber-500/20 rounded">ON</span></div>`;
}
function renderSMS(clean){
  document.getElementById('smsLog').innerHTML=clean?`
    <div class="p-2.5 bg-slate-950 border border-slate-800 rounded-lg flex justify-between"><span>✅ Jal Sahiya - 94311xxxxx</span><span class="text-slate-500">10:31 - Safe</span></div>`:
    `<div class="p-2.5 bg-red-950/50 border border-red-800/50 rounded-lg text-red-200"><div class="font-bold">🚨 ALERT SENT TO:</div><div class="mt-1">Jal Sahiya, Mukhiya, Block Officer</div><div class="mt-1 text-[10px] text-yellow-300">"Khatra! Bastacolla ka paani dushit hai. Na piyein. Team aa rahi hai."</div></div>
     <div class="p-2 bg-black/50 rounded-lg">SMS ID: JH-SWSM-${Date.now().toString().slice(-6)} | Delivered ✓✓</div>`;
}
function triggerHazard(){
  isHazard=!isHazard;
  const time=new Date().toLocaleString('en-IN',{hour12:false});
  if(isHazard){
    const d={ph:3.8,turb:32,tds:920,fe:4.2,risk:94};
    updateUI(d);
    document.getElementById('statusCard').className="relative overflow-hidden rounded-[20px] border p-6 flex justify-between items-center bg-gradient-to-br from-red-950/60 to-black border-red-700/50";
    document.getElementById('statusTitle').textContent="CRITICAL - DO NOT DRINK"; document.getElementById('statusTitle').className="text-2xl font-black text-red-400";
    document.getElementById('statusDesc').innerHTML='Acid Mine Drainage Detected | <b class="text-red-400">AI Risk 94% - Immediate Action</b>';
    document.getElementById('statusIcon').className="w-16 h-16 rounded-2xl bg-red-500/20 border border-red-500/40 text-red-400 flex items-center justify-center text-3xl"; document.getElementById('statusIcon').innerHTML='<i class="fa-solid fa-biohazard"></i>';
    renderActuators(false); renderSMS(false);
    document.getElementById('overlayTime').textContent=time;
    document.getElementById('dangerOverlay').classList.remove('hidden'); document.getElementById('dangerOverlay').classList.add('flex');
    if('speechSynthesis' in window){let u=new SpeechSynthesisUtterance('Khatra! Pani peene yogya nahi hai. Kripya paani na piyein.');u.lang='hi-IN';speechSynthesis.speak(u);}
    let t=6.0; let iv=setInterval(()=>{t-=0.1; document.getElementById('overlayTimer').textContent=t.toFixed(1); if(t<=0){clearInterval(iv); document.getElementById('dangerOverlay').classList.add('hidden'); document.getElementById('dangerOverlay').classList.remove('flex');}},100);
  } else {
    updateUI({ph:7.2,turb:1.2,tds:210,fe:0.11,risk:12});
    document.getElementById('statusCard').className="relative overflow-hidden rounded-[20px] border p-6 flex justify-between items-center bg-gradient-to-br from-emerald-950/40 to-slate-900 border-emerald-800/30";
    document.getElementById('statusTitle').textContent="POTABLE - SAFE FOR DRINKING"; document.getElementById('statusTitle').className="text-2xl font-black text-emerald-400";
    document.getElementById('statusDesc').innerHTML='IS 10500 Compliant | AI Risk Score: <b class="text-emerald-400">12% - Low</b>';
    document.getElementById('statusIcon').className="w-16 h-16 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 flex items-center justify-center text-3xl"; document.getElementById('statusIcon').innerHTML='<i class="fa-solid fa-shield-check"></i>';
    renderActuators(true); renderSMS(true);
  }
}
function downloadReport(){alert("SWSM Report PDF Generated: JH04_Dhanbad_WaterQuality_"+new Date().toISOString().slice(0,10)+".pdf\n\nIncludes: pH, TDS, Iron, GPS, AI Risk - Ready for upload to JJM Dashboard");}
function toggleLang(){let b=document.getElementById('langBtn'); if(b.textContent.includes('हिन्दी')){b.textContent='English'; document.getElementById('subTitle').textContent='एआई संचालित जल गुणवत्ता पूर्व चेतावनी प्रणाली - झरिया कोलफील्ड'; document.getElementById('statusTitle').textContent='पीने योग्य - सुरक्षित';} else {b.textContent='हिन्दी'; document.getElementById('subTitle').textContent='AI Powered Water Quality Early Warning System - Jharia Coalfield'; document.getElementById('statusTitle').textContent='POTABLE - SAFE FOR DRINKING';}}
// INIT
renderActuators(true); renderSMS(true); updateUI({ph:7.2,turb:1.2,tds:210,fe:0.11,risk:12});
</script>
</body>
</html>