Spaces:

Nra
/

LA_8

Sleeping

App Files Files Community

LA_8 / data /FA2_GEO_CH_05.html

Nra

Create FA2_GEO_CH_05.html

24eb35e verified 6 months ago

raw

history blame contribute delete

23 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Disaster Management Presentation</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
	<style>
	body {
	font-family: 'Inter', sans-serif;
	margin: 0;
	overflow: hidden; /* Prevent body scroll */
	}

	.slide {
	/* Position all slides on top of each other */
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	display: flex; /* Keep display flex for content centering */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	text-align: left;
	background-color: #f8fafc; /* Slate 50 */
	color: #1e293b; /* Slate 800 */

	/* Add the transition for opacity */
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	pointer-events: none; /* Disable interaction when hidden */
	}

	/* Active class for the current visible slide */
	.slide.active {
	opacity: 1;
	pointer-events: auto; /* Enable interaction when visible */
	}

	/* Fixed the slide content to allow scrolling on smaller screens */
	.slide-content {
	max-width: 1000px;
	width: 90%;
	background: white;
	padding: 2.5rem;
	border-radius: 1.5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	min-height: 80%;
	overflow-y: auto;
	/* Ensure content is always visible */
	}

	.slide h2 {
	font-size: 2.5rem;
	font-weight: 800;
	color: #0f172a; /* Slate 900 */
	margin-bottom: 1rem;
	}
	.slide h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #334155; /* Slate 700 */
	margin-top: 1rem;
	}
	.nav-button {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	border-radius: 9999px;
	transition: all 0.2s ease;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	z-index: 100; /* Ensure buttons are above slides */
	}
	#prevButton {
	right: 10rem;
	background-color: #94a3b8; /* Slate 400 */
	color: white;
	}
	#nextButton {
	background-color: #ef4444; /* Red 500 */
	color: white;
	}
	#prevButton:hover:not(:disabled), #nextButton:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	}
	#prevButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	}
	.table-style {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
	}
	.table-style th, .table-style td {
	border: 1px solid #e2e8f0;
	padding: 0.75rem;
	text-align: left;
	}
	.table-style th {
	background-color: #f1f5f9; /* Slate 100 */
	font-weight: 700;
	color: #1e293b;
	}

	/* Mobile Adjustments */
	@media (max-width: 768px) {
	.slide-content {
	padding: 1.5rem;
	}
	.slide h2 {
	font-size: 1.8rem;
	text-align: center;
	}
	.slide h3 {
	font-size: 1.2rem;
	}
	.nav-button {
	bottom: 1rem;
	padding: 0.5rem 1rem;
	}
	#prevButton {
	right: 7rem;
	}
	}
	</style>
	</head>
	<body>

	<!-- Slide Container -->
	<div id="presentation-container">

	<!-- Slide 1: Title Slide -->
	<div class="slide" id="slide-1">
	<div class="slide-content text-center flex flex-col justify-center items-center">
	<h1 class="text-6xl font-extrabold text-red-600 mb-4">Disaster Management</h1>
	<h2 class="text-4xl text-gray-700 mb-8">Understanding Natural and Man-Made Crises</h2>
	<p class="text-2xl mt-8">Nature, Classification, and Impact</p>
	<p class="text-xl mt-4 text-gray-500">Presenter: [Your Name/Team Name]</p>
	</div>
	</div>

	<!-- Slide 2: Defining and Core Impact -->
	<div class="slide" id="slide-2">
	<div class="slide-content">
	<h2>What is a Disaster?</h2>
	<h3 class="text-red-500">1.1. Core Definition:</h3>
	<ul class="list-disc ml-8 text-lg space-y-2">
	<li>An unexpected event causing significant physical damage or destruction.</li>
	<li>Impacts life, property, and the environment.</li>
	<li>Can be sudden (earthquakes) or slow (droughts).</li>
	<li>Causes a drastic change in the affected environment.</li>
	</ul>
	<h3 class="mt-6 text-red-500">1.2. Long-Term Consequences:</h3>
	<ul class="list-disc ml-8 text-lg space-y-2">
	<li>Societal, Economic, and Environmental devastation.</li>
	<li><strong class="text-red-600">Context:</strong> Underdeveloped countries suffer more severe consequences due to inadequate management systems.</li>
	</ul>
	</div>
	</div>

	<!-- Slide 3: Primary Classification: Natural vs. Man-Made -->
	<div class="slide" id="slide-3">
	<div class="slide-content">
	<h2>Categorizing Disasters</h2>
	<h3 class="text-red-500 mb-4">Focus: Comparison Table (Natural vs. Man-made)</h3>
	<table class="table-style">
	<thead>
	<tr>
	<th>Feature</th>
	<th>Natural Disasters</th>
	<th>Man-made Disasters</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><strong>Caused by</strong></td>
	<td>Natural factors</td>
	<td>Human error, carelessness, or intent</td>
	</tr>
	<tr>
	<td><strong>Scale of Loss</strong></td>
	<td>Large scale/huge devastation</td>
	<td>Less/localized, but can be high magnitude</td>
	</tr>
	<tr>
	<td><strong>Signals</strong></td>
	<td>Occurs suddenly (rarely signals)</td>
	<td>Sometimes provides signals</td>
	</tr>
	</tbody>
	</table>
	<h3 class="mt-6 text-red-500">1.3. Hybrid Disasters (The Third Category):</h3>
	<p class="text-lg mt-2">Result from a combination of human action and natural forces.</p>
	<p class="text-lg italic text-gray-600">Example: Deforestation (human error) leading to landslides during heavy rainfall (natural event).</p>
	</div>
	</div>

	<!-- Slide 4: Classification and Common Effects -->
	<div class="slide" id="slide-4">
	<div class="slide-content">
	<h2>Broad Types and Universal Impacts</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<h3 class="text-red-500">2.1. Classification List:</h3>
	<div class="flex">
	<ul class="list-disc ml-6 mr-4 text-base">
	<li class="font-bold">Natural:</li>
	<li>Earthquakes, Volcanic activity, Tsunamis</li>
	<li>Landslides, Avalanches, Floods, Droughts</li>
	<li>Wildfires, Cyclones/Storms, Biological disasters.</li>
	</ul>
	<ul class="list-disc ml-6 text-base">
	<li class="font-bold">Man-made:</li>
	<li>Wars, Terrorism, Cyber attacks, Transport accidents</li>
	<li>Industrial accidents, Pollution/Water contamination</li>
	<li>Fires, Nuclear accidents, WMD.</li>
	</ul>
	</div>
	</div>
	<div>
	<h3 class="text-red-500">2.2. Common Effects (High-Impact):</h3>
	<ul class="list-disc ml-6 text-base space-y-2">
	<li>Loss of life and injury (humans and animals).</li>
	<li>Massive damage to property and critical infrastructure (dams, bridges, power grids).</li>
	<li>Environmental degradation.</li>
	<li>Loss of livelihood and work.</li>
	<li>Psychological damage and trauma.</li>
	<li>Outbreak of disease/epidemics.</li>
	</ul>
	</div>
	</div>
	</div>
	</div>

	<!-- Slide 5: Natural Disasters Focus: Earthquakes -->
	<div class="slide" id="slide-5">
	<div class="slide-content">
	<h2>Earthquakes: Crustal Movement and Measurement</h2>
	<h3 class="text-red-500">3.1. Definition and Cause:</h3>
	<p class="text-lg">Sudden, violent movement of the Earth's crust caused by tectonic plates colliding as they float on the semi-liquid mantle. </p>
	<h3 class="mt-4 text-red-500">Key Terminology:</h3>
	<ul class="list-disc ml-8 text-lg">
	<li><strong>Seismology:</strong> The study of earthquakes.</li>
	<li><strong>Seismographs:</strong> Instruments used to record shocks.</li>
	<li><strong>Richter Scale:</strong> Measures the intensity of the earthquake.</li>
	<li><strong>Epicentre:</strong> Point on the surface where effects are felt most strongly.</li>
	</ul>
	<p class="mt-4 text-lg"><strong>Effects:</strong> Infrastructure damage, secondary disasters (landslides, tsunamis). Poorly constructed structures are most vulnerable.</p>
	<p class="mt-2 italic text-gray-600">Example: Mexico 7.1 magnitude quake (2017) – over 200 deaths, extensive building damage.</p>
	</div>
	</div>

	<!-- Slide 6: Natural Disasters Focus: Floods -->
	<div class="slide" id="slide-6">
	<div class="slide-content">
	<h2>Floods: Causes, Consequences, and Case Studies</h2>
	<h3 class="text-red-500">3.2. Definition & Causes:</h3>
	<p class="text-lg">A sudden influx of water submerging land, endangering life and property.</p>
	<ul class="list-disc ml-8 text-lg">
	<li><strong>Riverine Floods:</strong> Overflowing rivers during monsoon/rainy seasons (most common).</li>
	<li><strong>Flash Floods:</strong> Sudden, heavy downpours; dam breach; or river course change.</li>
	</ul>
	<h3 class="mt-4 text-red-500">Effects and Examples:</h3>
	<p class="text-lg">Forced displacement, topsoil erosion, crop failure, property loss, death.</p>
	<ul class="list-disc ml-8 text-base mt-2">
	<li><strong>Mumbai (2017):</strong> Massive disruption, transport shut down, 14 deaths.</li>
	<li><strong>Kerala (2018):</strong> Severe monsoon rains; 5M+ affected, $\sim$440 deaths.</li>
	<li><strong>Assam (2020):</strong> Brahmaputra River levels rose; 5.5M+ affected, submerged Kaziranga National Park.</li>
	</ul>
	</div>
	</div>

	<!-- Slide 7: Natural Disasters Focus: Cyclones & Droughts -->
	<div class="slide" id="slide-7">
	<div class="slide-content">
	<h2>The Extremes of Weather: Cyclones and Droughts</h2>
	<h3 class="text-red-500">3.3. Cyclones (Storms):</h3>
	<ul class="list-disc ml-8 text-lg space-y-1">
	<li><strong>Definition:</strong> Low-pressure areas over warm temperate/tropical ocean waters.</li>
	<li><strong>Characteristics:</strong> Heavy rain and powerful winds (up to 300 km/h).</li>
	<li><strong>Associated Threat:</strong> Storm tides (surges during high tide) cause enormous damage to coastal regions.</li>
	</ul>
	<h3 class="mt-6 text-red-500">3.4. Droughts (Water Scarcity):</h3>
	<ul class="list-disc ml-8 text-lg space-y-1">
	<li><strong>Definition:</strong> Insufficient rainfall over a long period.</li>
	<li><strong>Causes:</strong> Lack of rain, deforestation, misuse of groundwater, unscientific agriculture.</li>
	<li><strong>Effects:</strong> Water table fall, crop failure, scarcity of food/fodder, migration, and homelessness.</li>
	</ul>
	<p class="mt-2 italic text-gray-600">Example: European Drought (2022) – Po, Rhine, and Danube rivers at very low levels.</p>
	</div>
	</div>

	<!-- Slide 8: Man-Made Disasters Focus: Fire and Nuclear -->
	<div class="slide" id="slide-8">
	<div class="slide-content">
	<h2>Man-Made Calamities: Accidents and Weapons</h2>
	<h3 class="text-red-500">4.1. Fires:</h3>
	<ul class="list-disc ml-8 text-lg space-y-1">
	<li><strong>Common Causes:</strong> Faulty electrical wiring, gas leaks, carelessness (matches/cigarettes).</li>
	<li><strong>Vulnerability:</strong> High risk in crowded places with poor exit points.</li>
	<li>Example: Uphaar cinema hall tragedy, New Delhi (1997).</li>
	</ul>
	<h3 class="mt-6 text-red-500">4.2. Nuclear Disasters:</h3>
	<ul class="list-disc ml-8 text-lg space-y-1">
	<li><strong>Definition:</strong> Caused by the use or accidental release of nuclear materials.</li>
	<li><strong>The Silent Killer:</strong> Radioactivity causes serious, long-term illnesses (e.g., cancer).</li>
	</ul>
	<p class="mt-2 text-lg"><strong>Examples:</strong></p>
	<ul class="list-disc ml-12 text-base">
	<li>Intentional: Hiroshima & Nagasaki bombings (WWII).</li>
	<li>Accidental: Chernobyl (1986) – Plant accident, radiation spread, $\sim$12,000 deaths.</li>
	</ul>
	</div>
	</div>

	<!-- Slide 9: Man-Made Disasters Focus: Chemical and Biological -->
	<div class="slide" id="slide-9">
	<div class="slide-content">
	<h2>Chemical and Biological Disasters</h2>
	<h3 class="text-red-500">4.3. Definition and Effects:</h3>
	<ul class="list-disc ml-8 text-lg space-y-1">
	<li><strong>Definition:</strong> Accidental release of toxic chemicals or gases from industrial establishments.</li>
	<li><strong>Effects:</strong> Harm to humans (immediate and long-term), devastation. Effects can extend to several future generations.</li>
	</ul>
	<h3 class="mt-6 text-red-500">Historical Case Study: The Bhopal Gas Tragedy (1984)</h3>
	<ul class="list-disc ml-8 text-lg space-y-1">
	<li><strong>Cause:</strong> Accidental leakage of highly toxic Methyl Isocyanate (MIC) gas.</li>
	<li><strong>Source:</strong> Union Carbide factory in Madhya Pradesh.</li>
	<li><strong>Impact:</strong> $\sim$2,500 people killed.</li>
	</ul>
	<h3 class="mt-6 text-red-600 font-bold">4.4. The Critical Takeaway:</h3>
	<p class="text-lg italic">Need for strict safety protocols and industry oversight.</p>
	</div>
	</div>

	<!-- Slide 10: Case Study: India's Disaster Vulnerability Profile -->
	<div class="slide" id="slide-10">
	<div class="slide-content">
	<h2>India: A Highly Disaster-Prone Nation</h2>
	<h3 class="text-red-500 mb-4">5.1. Statistical Overview (High-Risk Profile):</h3>
	<table class="table-style">
	<thead>
	<tr>
	<th>Hazard</th>
	<th>Percentage of Land Area Vulnerable</th>
	</tr>
	</thead>
	<tbody>
	<tr><td><strong>Earthquakes</strong></td><td>$\sim$65%</td></tr>
	<tr><td><strong>Floods</strong></td><td>12%</td></tr>
	<tr><td><strong>Cyclones</strong></td><td>8%</td></tr>
	<tr><td><strong>Drought</strong></td><td>70%</td></tr>
	</tbody>
	</table>
	<p class="mt-6 text-lg font-semibold text-gray-700">Context: Floods and droughts often occur almost every year, leading to epidemics and widespread human suffering.</p>
	</div>
	</div>

	<!-- Slide 11: India's Geographic Vulnerabilities in Detail -->
	<div class="slide" id="slide-11">
	<div class="slide-content">
	<h2>Regional Risks Across India</h2>
	<h3 class="text-red-500">5.2. Geographic Analysis:</h3>
	<ul class="list-disc ml-8 text-lg space-y-3">
	<li><strong>Earthquakes:</strong> <strong class="text-red-600">Zone V (Very High Risk)</strong> is the entire Himalayan belt.</li>
	<li><strong>Floods:</strong> Caused by the south-west monsoon, affecting flood plains of the Brahmaputra, Ganga, Yamuna, etc.</li>
	<li><strong>Cyclones:</strong> Vulnerable coastline (7,516.6 km) from Bay of Bengal and Arabian Sea. Most vulnerable states: West Bengal, Odisha, Andhra Pradesh, Tamil Nadu.</li>
	<li><strong>Droughts:</strong> $\sim$30% of land area is drought-prone. Worst affected: Rajasthan, Gujarat, Maharashtra, Karnataka, and Odisha.</li>
	</ul>
	</div>
	</div>

	<!-- Slide 12: Conclusion: Mitigation and Preparedness -->
	<div class="slide" id="slide-12">
	<div class="slide-content">
	<h2>Mitigating Disasters: Awareness and Action</h2>
	<h3 class="text-red-600 font-bold text-xl">Critical Takeaway:</h3>
	<p class="text-lg">Disasters, whether natural or man-made, have devastating potential with lasting effects.</p>
	<h3 class="mt-6 text-red-600 font-bold text-xl">The Solution:</h3>
	<p class="text-lg">The paramount importance of <strong class="text-red-800">awareness and training</strong> in preventive measures.</p>
	<h3 class="mt-6 text-red-500">Three Pillars of Mitigation:</h3>
	<ul class="list-decimal ml-8 text-lg space-y-2">
	<li><strong>Preparation:</strong> Developing robust infrastructure and early warning systems.</li>
	<li><strong>Prevention:</strong> Addressing human factors (e.g., proper construction, avoiding deforestation).</li>
	<li><strong>Response:</strong> Training citizens and institutions for effective post-disaster action.</li>
	</ul>
	<p class="mt-6 text-xl font-bold text-red-700 text-center">Proactive disaster management is essential for long-term societal resilience.</p>
	</div>
	</div>

	<!-- Slide 13: Q&A / References -->
	<div class="slide" id="slide-13">
	<div class="slide-content text-center flex flex-col justify-center items-center">
	<h2 class="text-4xl text-green-700 mb-8">Questions & Further Discussion</h2>
	<div class="w-full max-w-sm mx-auto text-left">
	<h3 class="text-2xl mt-4">References:</h3>
	<p class="text-lg italic text-gray-600">[Document Source]</p>
	<h3 class="text-2xl mt-8">Contact:</h3>
	<p class="text-lg">[Your Email/Information]</p>
	</div>
	</div>
	</div>

	</div>

	<!-- Navigation Buttons -->
	<button class="nav-button" id="prevButton" disabled>Previous</button>
	<button class="nav-button" id="nextButton">Next</button>

	<script>
	let currentSlideIndex = 0;
	const slides = document.querySelectorAll('.slide');
	const totalSlides = slides.length;
	const prevButton = document.getElementById('prevButton');
	const nextButton = document.getElementById('nextButton');

	function updateSlideDisplay() {
	slides.forEach((slide, index) => {
	// Use the 'active' class to control visibility and trigger the CSS opacity transition
	if (index === currentSlideIndex) {
	slide.classList.add('active');
	} else {
	slide.classList.remove('active');
	}
	});
	prevButton.disabled = currentSlideIndex === 0;
	nextButton.disabled = currentSlideIndex === totalSlides - 1;
	}

	prevButton.addEventListener('click', () => {
	if (currentSlideIndex > 0) {
	currentSlideIndex--;
	updateSlideDisplay();
	}
	});

	nextButton.addEventListener('click', () => {
	if (currentSlideIndex < totalSlides - 1) {
	currentSlideIndex++;
	updateSlideDisplay();
	}
	});

	// Initialize the presentation on load
	// Set the first slide as active
	updateSlideDisplay();
	</script>
	</body>
	</html>