Spaces:

Nra
/

LA_8

Sleeping

App Files Files Community

Nra commited on Oct 17, 2025

Commit

24eb35e

verified ·

1 Parent(s): 100b71c

Create FA2_GEO_CH_05.html

Browse files

Files changed (1) hide show

data/FA2_GEO_CH_05.html +460 -0

data/FA2_GEO_CH_05.html ADDED Viewed

	@@ -0,0 +1,460 @@

+<!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>