<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AI-Driven Natural Disaster Prediction & Management System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0 1rem;
background: #f5f8fa;
color: #333;
}
header {
background: #00529B;
color: white;
padding: 1rem;
text-align: center;
}
h1, h2 {
margin-bottom: 0.5rem;
}
section {
background: white;
margin: 1rem 0;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 0 6px #ccc;
}
.alert {
padding: 1rem;
margin: 1rem 0;
border-radius: 6px;
font-weight: bold;
color: white;
display: flex;
align-items: center;
gap: 1rem;
}
.alert.low { background-color: #2e7d32; } /* green */
.alert.medium { background-color: #f9a825; } /* amber */
.alert.high { background-color: #c62828; } /* red */
button {
background: #00529B;
color: white;
border: none;
border-radius: 5px;
padding: 0.5rem 1rem;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #003f75;
}
label {
display: block;
margin: 0.5rem 0 0.25rem;
}
input, select, textarea {
width: 100%;
padding: 0.4rem;
border: 1px solid #ccc;
border-radius: 4px;
}
#map {
height: 300px;
border-radius: 6px;
margin-top: 0.5rem;
border: 1px solid #aaa;
}
.shelter-list {
margin-top: 0.5rem;
}
.shelter-item {
border: 1px solid #ccc;
padding: 0.5rem;
border-radius: 4px;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
footer {
text-align: center;
font-size: 0.8rem;
color: #777;
margin: 2rem 0;
}
</style>
</head>
<body>
<header>
<h1>AI-Driven Natural Disaster Prediction & Management System</h1>
<p>Inclusive disaster prediction, alerts, evacuation & recovery</p>
</header>
<!-- AI Prediction & Alert System -->
<section>
<h2>Disaster Prediction & Alerts</h2>
<p>Simulated AI-generated disaster prediction based on historic and real-time
data.</p>
<button id="predictBtn">Run Disaster Prediction</button>
<div id="alertArea" aria-live="polite" role="alert" style="margin-
top:1rem;"></div>
</section>
<!-- Evacuation Route Mapping -->
<section>
<h2>Evacuation Route Mapping</h2>
<p>Dynamic route updates based on simulated road conditions.</p>
<label for="userLocation">Select Your Location:</label>
<select id="userLocation">
<option value="coastalTown">Coastal Town</option>
<option value="riversideVillage">Riverside Village</option>
<option value="urbanArea">Urban Area</option>
</select>
<button id="showRouteBtn">Show Evacuation Route</button>
<div id="map" aria-label="Map showing evacuation routes"></div>
</section>
<!-- Shelter Locator & Booking -->
<section>
<h2>Shelter Locator & Booking</h2>
<p>Find and book a shelter near you.</p>
<label for="shelterSelect">Available Shelters:</label>
<select id="shelterSelect" aria-label="List of shelters">
<!-- Options populated by JS -->
</select>
<button id="bookShelterBtn">Book Shelter</button>
<div id="bookingStatus" role="status" style="margin-top:0.5rem;"></div>
</section>
<!-- Community Reporting -->
<section>
<h2>Community Damage Reporting</h2>
<p>Report broken roads, power outages, or missing persons.</p>
<form id="reportForm" aria-label="Damage report form">
<label for="reportType">Report Type:</label>
<select id="reportType" required>
<option value="">Select type</option>
<option value="road">Broken Road</option>
<option value="power">Power Outage</option>
<option value="missing">Missing Person</option>
<option value="other">Other</option>
</select>
<label for="reportDesc">Description:</label>
<textarea id="reportDesc" rows="3" placeholder="Describe the issue"
required></textarea>
<button type="submit">Submit Report</button>
</form>
<div id="reportStatus" role="status" style="margin-top:0.5rem;"></div>
</section>
<footer>
© 2024 Natural Disaster Management Project
</footer>
<script>
// Simulated disaster data and alerts
const disasterLevels = ['low', 'medium', 'high'];
const disasterMessages = {
low: 'Low risk: Stay informed and prepare for possible weather changes.',
medium: 'Medium risk: Monitor alerts closely and start preparing evacuation
kit.',
high: 'High risk: Immediate evacuation advised. Follow route and shelter
instructions!'
};
const alertColors = { low: 'low', medium: 'medium', high: 'high' };
// Voice alert - multilingual (only English demo here)
function speakAlert(message) {
if (!('speechSynthesis' in window)) return;
const utterance = new SpeechSynthesisUtterance(message);
utterance.lang = 'en-US';
window.speechSynthesis.speak(utterance);
}
// Mock AI disaster prediction function
function runPrediction() {
// Randomly select a disaster level for demo
const index = Math.floor(Math.random() * disasterLevels.length);
return disasterLevels[index];
}
// Display alert with visual and voice
function showAlert(level) {
const alertArea = document.getElementById('alertArea');
alertArea.className = 'alert ' + alertColors[level];
alertArea.textContent = disasterMessages[level];
speakAlert(disasterMessages[level]);
alertArea.setAttribute('aria-label', 'Disaster alert: ' +
disasterMessages[level]);
}
document.getElementById('predictBtn').addEventListener('click', () => {
const level = runPrediction();
showAlert(level);
});
// Shelter data simulation
const shelters = [
{ id: 's1', name: 'Community Shelter 1', capacity: 20, booked: 10, priority:
['elderly', 'children', 'disabled'] },
{ id: 's2', name: 'Town Hall Shelter', capacity: 15, booked: 15, priority:
['general'] },
{ id: 's3', name: 'School Gym Shelter', capacity: 25, booked: 5, priority:
['general', 'elderly'] }
];
function populateShelters() {
const select = document.getElementById('shelterSelect');
select.innerHTML = '';
shelters.forEach(shelter => {
const available = shelter.capacity - shelter.booked;
const option = document.createElement('option');
option.value = shelter.id;
option.textContent = \\${shelter.name} - Available spots: \${available >
0 ? available : 0}\;
if (available <= 0) option.disabled = true;
select.appendChild(option);
});
}
populateShelters();
document.getElementById('bookShelterBtn').addEventListener('click', () => {
const select = document.getElementById('shelterSelect');
const bookingStatus = document.getElementById('bookingStatus');
const shelter = shelters.find(s => s.id === select.value);
if (!shelter) {
bookingStatus.textContent = 'Please select a shelter.';
return;
}
const available = shelter.capacity - shelter.booked;
if (available > 0) {
shelter.booked++;
bookingStatus.textContent = \Successfully booked \${shelter.name}. Stay
safe!\;
populateShelters();
} else {
bookingStatus.textContent = 'Selected shelter is full. Please choose
another.';
}
});
// Community reporting form submission simulation
document.getElementById('reportForm').addEventListener('submit', e => {
e.preventDefault();
const type = document.getElementById('reportType').value;
const desc = document.getElementById('reportDesc').value.trim();
const status = document.getElementById('reportStatus');
if (!type || !desc) {
status.textContent = 'Please fill out all fields.';
return;
}
// Simulate sending report to authorities
status.textContent = 'Submitting your report...';
setTimeout(() => {
status.textContent = 'Report submitted successfully. Authorities will
review and respond soon.';
e.target.reset();
}, 1500);
});
// Google Maps integration for evacuation routes
let map;
let directionsRenderer;
let directionsService;
// Coordinates for locations and shelters (simplified)
const locations = {
coastalTown: { lat: 11.0, lng: 79.8 },
riversideVillage: { lat: 10.7, lng: 79.9 },
urbanArea: { lat: 11.4, lng: 79.7 }
};
const shelterLocations = {
'Community Shelter 1': { lat: 11.01, lng: 79.81 },
'Town Hall Shelter': { lat: 10.69, lng: 79.91 },
'School Gym Shelter': { lat: 11.41, lng: 79.69 }
};
function initMap() {
const defaultCenter = { lat: 11.0, lng: 79.8 };
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: defaultCenter
});
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
}
// Show route from user location to nearest available shelter
function showRoute() {
const userLocKey = document.getElementById('userLocation').value;
const userLoc = locations[userLocKey];
if (!userLoc) return;
const availableShelters = shelters.filter(shelter => (shelter.capacity -
shelter.booked) > 0);
if (availableShelters.length === 0) {
alert('No shelters available currently.');
return;
}
// Find nearest shelter with simple distance formula
function distance(loc1, loc2) {
return Math.sqrt(Math.pow(loc1.lat - loc2.lat, 2) + Math.pow(loc1.lng -
loc2.lng, 2));
}
let nearestShelter = availableShelters[0];
let minDist = distance(userLoc, shelterLocations[nearestShelter.name]);
for (let i = 1; i < availableShelters.length; i++) {
const dist = distance(userLoc,
shelterLocations[availableShelters[i].name]);
if (dist < minDist) {
nearestShelter = availableShelters[i];
minDist = dist;
}
}
const shelterLoc = shelterLocations[nearestShelter.name];
// Plot route with Directions API if possible, else just markers and polyline
const request = {
origin: userLoc,
destination: shelterLoc,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status === 'OK') {
directionsRenderer.setDirections(result);
} else {
// On error just center map and place markers with line
directionsRenderer.set('directions', null);
map.setCenter(userLoc);
map.setZoom(12);
// Clear previous markers
if (window.userMarker) window.userMarker.setMap(null);
if (window.shelterMarker) window.shelterMarker.setMap(null);
if (window.routePolyline) window.routePolyline.setMap(null);
window.userMarker = new google.maps.Marker({
position: userLoc,
map: map,
title: 'Your Location',
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
window.shelterMarker = new google.maps.Marker({
position: shelterLoc,
map: map,
title: 'Shelter: ' + nearestShelter.name,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
window.routePolyline = new google.maps.Polyline({
path: [userLoc, shelterLoc],
geodesic: true,
strokeColor: '#00529B',
strokeOpacity: 0.8,
strokeWeight: 6,
map: map
});
}
});
}
document.getElementById('showRouteBtn').addEventListener('click', showRoute);
</script>
<!-- Google Maps JS API include: Replace YOUR_API_KEY with actual API Key -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
