| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>India: A Geographical and Political Synthesis</title> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f3f4f6; |
| } |
| |
| |
| .slide { |
| opacity: 0; |
| transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| transform: scale(0.98); |
| } |
| |
| .slide.active { |
| opacity: 1; |
| z-index: 10; |
| transform: scale(1); |
| } |
| |
| |
| .slide table { |
| width: 100%; |
| border-collapse: collapse; |
| margin-top: 1rem; |
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
| border-radius: 0.5rem; |
| overflow: hidden; |
| } |
| .slide th, .slide td { |
| padding: 1rem; |
| text-align: left; |
| border-bottom: 1px solid #e5e7eb; |
| } |
| .slide th { |
| background-color: #4f46e5; |
| color: white; |
| font-weight: 600; |
| } |
| .slide tr:nth-child(even) { |
| background-color: #f9fafb; |
| } |
| .slide tr:hover { |
| background-color: #eef2ff; |
| } |
| |
| |
| .slide ul { |
| list-style-type: none; |
| padding-left: 0; |
| } |
| .slide ul li { |
| margin-bottom: 0.75rem; |
| padding-left: 1.5rem; |
| position: relative; |
| } |
| .slide ul li::before { |
| content: '•'; |
| color: #4f46e5; |
| font-weight: 900; |
| position: absolute; |
| left: 0; |
| font-size: 1.25rem; |
| line-height: 1; |
| } |
| |
| |
| .overflow-y-auto::-webkit-scrollbar { |
| width: 8px; |
| } |
| .overflow-y-auto::-webkit-scrollbar-thumb { |
| background-color: #a5b4fc; |
| border-radius: 10px; |
| } |
| .overflow-y-auto::-webkit-scrollbar-track { |
| background: #eef2ff; |
| } |
| |
| |
| @keyframes drawMountain { |
| 0% { stroke-dashoffset: 400; } |
| 100% { stroke-dashoffset: 0; } |
| } |
| .mountain-path { |
| stroke-dasharray: 400; |
| animation: drawMountain 2s ease-out forwards; |
| } |
| </style> |
| </head> |
| <body class="h-screen w-screen flex flex-col"> |
|
|
| |
| <div id="presentation-container" class="relative flex-grow shadow-2xl rounded-lg overflow-hidden bg-white"> |
|
|
| |
|
|
| |
| <div class="slide p-12 flex flex-col justify-center items-center text-center bg-gradient-to-br from-indigo-600 to-purple-700 text-white" data-slide-index="0"> |
| <h1 class="text-6xl font-extrabold mb-4 animate-fadeInUp">India: A Geographical and Political Synthesis</h1> |
| <h2 class="text-3xl font-light mb-8 opacity-90 animate-fadeIn delay-300">Location, Administration, and Physiographic Divisions</h2> |
| <p class="text-xl mt-12 opacity-80 border-t border-white/30 pt-4">Presented by: [Your Name/Organization]</p> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="1"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">Introduction: The Indian Subcontinent</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12"> |
| <ul class="text-xl space-y-4"> |
| <li class="animate-slideInLeft delay-100">India's identity: Subcontinent defined by the majestic **Himalayan barrier**.</li> |
| <li class="animate-slideInLeft delay-200">Global Rank: **Seventh-largest** country by area.</li> |
| <li class="animate-slideInLeft delay-300">Hemispheres: Located in the **Northern and Eastern** hemispheres.</li> |
| <li class="animate-slideInLeft delay-400">Administrative Snapshot: Organized into **28 States** and **8 Union Territories**.</li> |
| <li class="animate-slideInLeft delay-500">Topography: Defined by **six principal physiographic divisions**.</li> |
| <li class="animate-slideInLeft delay-600">The fundamental distinction in drainage systems underpins diverse patterns.</li> |
| |
| <li>The strategic location connects South Asia to the wider Indian Ocean trade routes.</li> |
| <li>Vast cultural and geographical differences necessitate a **federal structure** of governance.</li> |
| <li>Climate varies from tropical in the South to alpine in the Himalayan region.</li> |
| <li>The monsoon system is the primary factor influencing agriculture and water resources.</li> |
| <li>India shares significant ecological diversity across its major regions.</li> |
| <li>Geological history is marked by the northward drift of the Indian Plate.</li> |
| <li>The country experiences a wide range of natural hazards, including earthquakes and floods.</li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="2"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">Geographical Location and Key Statistics</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8"> |
| <div> |
| <ul class="text-lg space-y-3 font-medium"> |
| <li>Position: Strategic location at the head of the Indian Ocean, facilitating trade.</li> |
| <li>Total Area: **3,287,263 sq. km** (approx. 3.3 million sq. km)</li> |
| <li>Latitudinal Extent: $8^{\circ}4'$ N to $37^{\circ}6'$ N</li> |
| <li>Longitudinal Extent: $68^{\circ}7'$ E to $97^{\circ}25'$ E</li> |
| <li>North-South Extent: **3,214 km**</li> |
| <li>East-West Distance: **2,933 km**</li> |
| <li>Coastline Length: **7,516.6 km**</li> |
| <li>Standard Meridian: $82^{\circ}30'$ E longitude (passing through Prayagraj).</li> |
| <li class="text-orange-600 font-bold">Time Difference: The vast east-west extent results in approx. **two hours** time difference (Gujarat vs. Arunachal Pradesh).</li> |
| </ul> |
| </div> |
| <div class="flex items-center justify-center rounded-xl shadow-2xl bg-white p-6"> |
| |
| <svg class="w-full h-full max-w-sm" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <circle cx="50" cy="50" r="45" stroke="#4F46E5" stroke-width="2" opacity="0.5"/> |
| |
| <line x1="5" y1="50" x2="95" y2="50" stroke="#4F46E5" stroke-width="1"/> |
| <line x1="50" y1="5" x2="50" y2="95" stroke="#4F46E5" stroke-width="1"/> |
| |
| <text x="50" y="12" text-anchor="middle" fill="#1E40AF" font-weight="bold" font-size="6">37°6' N</text> |
| |
| <text x="50" y="97" text-anchor="middle" fill="#1E40AF" font-weight="bold" font-size="6">8°4' N</text> |
| |
| <text x="98" y="52" text-anchor="end" fill="#1E40AF" font-weight="bold" font-size="6">97°25' E</text> |
| |
| <text x="2" y="52" text-anchor="start" fill="#1E40AF" font-weight="bold" font-size="6">68°7' E</text> |
|
|
| |
| <circle cx="50" cy="50" r="3" fill="#EF4444"/> |
| <text x="50" y="45" text-anchor="middle" fill="#EF4444" font-weight="bold" font-size="6">82.5° E (IST)</text> |
| </svg> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="3"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">Geopolitical Context and Neighbours</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">The Indian Subcontinent (Wider Definition)</h3> |
| <ul class="text-lg"> |
| <li>Includes Pakistan, Nepal, Bhutan, Bangladesh, and Sri Lanka.</li> |
| </ul> |
| <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">Land Neighbours (Shared Borders)</h3> |
| <ul class="text-lg grid grid-cols-2"> |
| <li>Pakistan</li> |
| <li>Afghanistan (disputed/short)</li> |
| <li>China</li> |
| <li>Nepal</li> |
| <li>Bhutan</li> |
| <li>Myanmar</li> |
| <li>Bangladesh</li> |
| </ul> |
| <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">Sea Neighbours (South)</h3> |
| <ul class="text-lg"> |
| <li>Sri Lanka (**Palk Strait** and Gulf of Mannar)</li> |
| <li>The Maldives (to the southwest)</li> |
| </ul> |
| </div> |
| <div class="flex items-center justify-center rounded-xl shadow-2xl bg-indigo-50 p-6"> |
| |
| <div class="space-y-6 text-center"> |
| <div class="flex justify-center space-x-8"> |
| |
| <div class="p-4 bg-purple-200 rounded-lg shadow-md"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-purple-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> |
| <path stroke-linecap="round" stroke-linejoin="round" d="M3 10.5v11.25c0 .621.504 1.125 1.125 1.125h15.75c.621 0 1.125-.504 1.125-1.125V10.5m-19.5 0a3.75 3.75 0 017.5 0V14.25m-7.5-3.75a3.75 3.75 0 017.5 0V14.25m-6-3.75V4.773c0-.365.18-.7.465-.898l2.64-1.76a1.125 1.125 0 011.08 0l2.64 1.76c.285.198.465.533.465.898v5.602M3 14.25h18" /> |
| </svg> |
| <p class="mt-2 text-lg font-semibold text-purple-800">7 Land Neighbours</p> |
| </div> |
| </div> |
| <div class="flex justify-center"> |
| |
| <div class="p-4 bg-green-200 rounded-lg shadow-md"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-green-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> |
| <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9h-1c-.477 0-.94-.044-1.385-.125M21 12c-2.485 0-4.5-2.015-4.5-4.5S18.515 3 21 3h-1M12 21a9 9 0 009-9m-9 9c-2.485 0-4.5-2.015-4.5-4.5S9.515 3 12 3m0 18c-2.485 0-4.5-2.015-4.5-4.5S9.515 3 12 3m0 18c-2.485 0-4.5-2.015-4.5-4.5S9.515 3 12 3m-9 9a9 9 0 019-9" /> |
| </svg> |
| <p class="mt-2 text-lg font-semibold text-green-800">Indian Ocean Head</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="4"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">Administrative Structure (28 States & 8 UTs)</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-2xl font-semibold mb-3 text-purple-600">Key Facts</h3> |
| <ul class="text-lg space-y-3"> |
| <li>Capital: **New Delhi**.</li> |
| <li>Basis of Reorganization: Primarily based on **linguistic lines** after independence.</li> |
| <li>Population Characteristic: Highly diverse in language, religion, and ethnic traits.</li> |
| <li>Shared Capital: Punjab and Haryana share **Chandigarh** as their capital.</li> |
| |
| <li>The Governor is the constitutional head of the State.</li> |
| <li>The President acts as the head of the Union Territories (through an administrator/LG).</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-2xl font-semibold mb-3 text-purple-600">Spotlight Examples</h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <p class="font-bold">States:</p> |
| <ul class="text-lg space-y-1 ml-4 list-disc text-gray-600"> |
| <li>Maharashtra (Mumbai)</li> |
| <li>West Bengal (Kolkata)</li> |
| <li>Tamil Nadu (Chennai)</li> |
| </ul> |
| </div> |
| <div> |
| <p class="font-bold">Union Territories (UTs):</p> |
| <ul class="text-lg space-y-1 ml-4 list-disc text-gray-600"> |
| <li>Andaman & Nicobar Islands (Port Blair)</li> |
| <li>Jammu and Kashmir (Srinagar/Jammu)</li> |
| <li>The smallest UT: **Lakshadweep** (Kavaratti)</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="5"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">The Northern Mountains (The Himalayas)</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8"> |
| <div> |
| <ul class="text-lg space-y-3 font-medium"> |
| <li>Origin: Young mountains formed by the collision of Gondwanaland and Laurasia.</li> |
| <li>Extent: Stretches over **2,400 km** (Nanga Parbat to Namcha Barwa).</li> |
| <li>Width: Varies from **15 km to 400 km**.</li> |
| <li>Significance: Source of major perennial rivers, crucial climatic barrier.</li> |
| </ul> |
| <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">The Three Parallel Ranges</h3> |
| <ol class="list-decimal list-inside text-lg font-medium space-y-2 ml-4"> |
| <li>**Greater Himalayas (Himadri):** Avg. height **> 6,000 m**. (Includes Mt. Everest, $8848.86\text{ m}$).</li> |
| <li>**Lesser Himalayas (Himachal):** Max height **5,000 m**. (Valleys like Kashmir, hill stations like Shimla).</li> |
| <li>**Outer Himalayas (Shiwalik):** Max height **1,500 m**. Foot-hills, known for *Duns* (longitudinal valleys).</li> |
| </ol> |
| </div> |
| <div class="flex items-center justify-center rounded-xl shadow-2xl bg-indigo-50 p-6"> |
| |
| <svg class="w-full h-full max-w-sm" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| |
| <line x1="5" y1="85" x2="95" y2="85" stroke="#374151" stroke-width="1.5"/> |
|
|
| |
| <path d="M5 85 Q 20 70, 30 75 Q 35 78, 40 70" stroke="#10B981" stroke-width="2" fill="none" class="mountain-path" style="animation-delay: 0.5s;"/> |
| <text x="23" y="80" text-anchor="middle" fill="#10B981" font-weight="bold" font-size="5">Shiwalik</text> |
|
|
| |
| <path d="M30 75 Q 50 45, 60 55 Q 65 60, 70 50" stroke="#F59E0B" stroke-width="2.5" fill="none" class="mountain-path" style="animation-delay: 1.0s;"/> |
| <text x="50" y="65" text-anchor="middle" fill="#F59E0B" font-weight="bold" font-size="5">Himachal</text> |
|
|
| |
| <path d="M60 55 Q 75 20, 85 40 Q 90 45, 95 30" stroke="#4F46E5" stroke-width="3" fill="none" class="mountain-path" style="animation-delay: 1.5s;"/> |
| <text x="80" y="25" text-anchor="middle" fill="#4F46E5" font-weight="bold" font-size="5">Himadri</text> |
|
|
| |
| <text x="98" y="30" text-anchor="end" fill="#4F46E5" font-weight="bold" font-size="4">>6000m</text> |
| <text x="98" y="50" text-anchor="end" fill="#F59E0B" font-weight="bold" font-size="4">~5000m</text> |
| <text x="98" y="70" text-anchor="end" fill="#10B981" font-weight="bold" font-size="4">~1500m</text> |
| |
| </svg> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="6"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">The Great Northern Plains</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12"> |
| <ul class="text-xl space-y-3 mb-6"> |
| <li>Extent & Productivity: Stretches **2,400 km**; one of the world's most productive regions.</li> |
| <li>Formation: Formed by alluvial deposits of three river systems: **Indus, Ganga, and Brahmaputra**.</li> |
| <li>Impact: Fertile soil supports dense population and agricultural development.</li> |
| </ul> |
| <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">Key Divisions</h3> |
| <div class="grid grid-cols-3 gap-6 text-lg"> |
| <div class="bg-indigo-50 p-4 rounded-lg shadow"> |
| <p class="font-bold text-indigo-800">1. The Punjab Plains</p> |
| <p>Formed by Indus and its tributaries (Satluj, Beas, Ravi, Chenab, Jhelum).</p> |
| </div> |
| <div class="bg-indigo-50 p-4 rounded-lg shadow"> |
| <p class="font-bold text-indigo-800">2. The Ganga Plains</p> |
| <p>Formed by the Ganga and its tributaries (Yamuna, Son). Avg. height **30m to 150m**.</p> |
| </div> |
| <div class="bg-indigo-50 p-4 rounded-lg shadow"> |
| <p class="font-bold text-indigo-800">3. The Brahmaputra Valley</p> |
| <p>Lies in Assam. Avg. height **100m**. Forms the **Sundarbans** delta with Ganga.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="7"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">The Peninsular Plateau and the Ghats</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12"> |
| <p class="text-xl mb-6">Ancient triangular landmass of hard crystalline **igneous and metamorphic rocks**. Divided by the **Narmada River**.</p> |
|
|
| <div class="grid grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-2xl font-semibold mb-3 text-purple-600">Plateau Divisions</h3> |
| <ul class="text-lg space-y-2"> |
| <li>**The Malwa Plateau:** Bounded by Aravalli, Vindhya, and Chota Nagpur.</li> |
| <li>**The Deccan Plateau:** Bounded by Satpura, Western Ghats, and Eastern Ghats. Western part is the **Deccan Trap** (lava sheets).</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-2xl font-semibold mb-3 text-purple-600">The Ghats (Flanking Ranges)</h3> |
| <table class="text-base"> |
| <thead> |
| <tr><th>Feature</th><th>Western Ghats</th><th>Eastern Ghats</th></tr> |
| </thead> |
| <tbody> |
| <tr><td>Continuity</td><td>Continuous (Tapi River to Kanyakumari)</td><td>Discontinuous (Mahanadi Valley to Nilgiri Hills)</td></tr> |
| <tr><td>Avg. Height</td><td>**1,200 m** (Steep)</td><td>**450 m** (Gentle Slopes)</td></tr> |
| <tr><td>Proximity</td><td>Close to the Arabian Sea</td><td>At a distance from the Bay of Bengal</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="8"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">Coastal Plains and The Thar Desert</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-2xl font-semibold mb-3 text-purple-600">The Coastal Plains</h3> |
| <table class="text-sm"> |
| <thead> |
| <tr><th>Coastal Plain</th><th>Location & Features</th></tr> |
| </thead> |
| <tbody> |
| <tr><td>**Western**</td><td>Narrow, uneven. No major deltas (estuaries/lagoons). Known as Konkan, Kanara, Malabar Coast.</td></tr> |
| <tr><td>**Eastern**</td><td>Wider, formed by Deltas (Mahanadi, Godavari, Krishna). Known as Northern Circars and Coromandel Coast.</td></tr> |
| </tbody> |
| </table> |
| <h3 class="text-2xl font-semibold mt-6 mb-3 text-purple-600">The Thar Desert</h3> |
| <ul class="text-lg space-y-2"> |
| <li>Location: North-western Rajasthan (between Aravalli hills and Sind Desert).</li> |
| <li>Climate: High temperatures, very low rainfall (**less than 25 cm annually**).</li> |
| <li>Hydrology: Luni is the only significant river. Irrigation by the **Indira Gandhi Canal**.</li> |
| </ul> |
| </div> |
| <div class="flex items-center justify-center rounded-xl shadow-2xl bg-white p-6"> |
| |
| <div class="flex space-x-12"> |
| |
| <div class="text-center p-6 bg-yellow-100 rounded-lg shadow-inner"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-yellow-600 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> |
| <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z" /> |
| </svg> |
| <p class="mt-2 text-lg font-bold text-yellow-800">Thar Desert</p> |
| <p class="text-sm text-yellow-700">Low Rainfall</p> |
| </div> |
| |
| <div class="text-center p-6 bg-blue-100 rounded-lg shadow-inner"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-blue-600 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> |
| <path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-2.185-.429l-4.225 1.75a2.002 2.002 0 01-2.185 0l-4.225-1.75c-.886-.367-1.772.396-1.772 1.34V20a2 2 0 002 2h13a2 2 0 002-2v-3.572a2 2 0 00-.572-1.428z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" d="M15 9.5a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0z" /> |
| </svg> |
| <p class="mt-2 text-lg font-bold text-blue-800">Coastal Plains</p> |
| <p class="text-sm text-blue-700">Eastern vs. Western</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="9"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">The Island Groups</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-2xl font-semibold mb-4 text-purple-600">Andaman and Nicobar Islands (Bay of Bengal)</h3> |
| <ul class="text-xl space-y-3"> |
| <li>Number: About **550 islands**.</li> |
| <li>Origin: Primarily **Volcanic origin**.</li> |
| <li>Key Feature: Barren Island is India's **only active volcano**.</li> |
| <li>Separation: **Ten Degree Channel** separates the Andaman and Nicobar groups.</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-2xl font-semibold mb-4 text-purple-600">Lakshadweep Islands (Arabian Sea)</h3> |
| <ul class="text-xl space-y-3"> |
| <li>Origin: **Coral origin** (formed by polyps).</li> |
| <li>Characteristics: Fewer in number, many uninhabited.</li> |
| <li>Status: Smallest union territory of India. Capital: Kavaratti.</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="10"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">The Himalayan River System</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12"> |
| <p class="text-xl mb-6 font-medium">Source & Characteristics: Snow-fed, **perennial** rivers, ensuring year-round flow.</p> |
| <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">Three Main Systems</h3> |
|
|
| <div class="grid grid-cols-3 gap-6 text-lg"> |
| <div class="bg-white p-4 rounded-lg shadow-md border-t-4 border-sky-500"> |
| <p class="font-bold text-sky-700">1. The Indus River</p> |
| <p>Rises in Tibet. Flows **2,900 km** to the Arabian Sea. Tributaries: Satluj, Beas, Ravi, Chenab, Jhelum (Panchnad).</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md border-t-4 border-sky-500"> |
| <p class="font-bold text-sky-700">2. The Ganga River</p> |
| <p>Rises from **Gangotri Glacier**. Flows **2,510 km**. Basin covers roughly **one-fourth** of India's area. Tributaries: Yamuna, Son, Ghaghara, Gandak.</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md border-t-4 border-sky-500"> |
| <p class="font-bold text-sky-700">3. The Brahmaputra River</p> |
| <p>Rises near Mansarovar Lake (Tsang Po in Tibet). Flows **2,700 km**. Enters India in Arunachal Pradesh.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="11"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">The Peninsular River System</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12"> |
| <p class="text-xl mb-6 font-medium">Source & Characteristics: **Rain-fed** and **seasonal** rivers, dependent on monsoon.</p> |
|
|
| <div class="grid grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-2xl font-semibold mb-4 text-purple-600">West-Flowing (Arabian Sea)</h3> |
| <ul class="text-lg space-y-3"> |
| <li>Short and swift, flowing through rift valleys.</li> |
| <li class="font-bold text-orange-600">DO NOT form deltas (they form estuaries).</li> |
| <li>Examples: **Narmada** (**1,312 km**) and **Tapi** (**724 km**).</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-2xl font-semibold mb-4 text-purple-600">East-Flowing (Bay of Bengal)</h3> |
| <ul class="text-lg space-y-3"> |
| <li class="font-bold text-green-600">Form large deltas.</li> |
| <li>**Godavari:** Longest peninsular river (**1,465 km**), the 'Ganga of the South'.</li> |
| <li>**Krishna:** **1,400 km**.</li> |
| <li>**Kaveri:** **800 km**.</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="12"> |
| <h2 class="text-4xl font-bold mb-6 text-indigo-700 border-b-4 border-indigo-200 pb-2 flex-shrink-0">Himalayan vs. Peninsular Rivers</h2> |
| |
| <div class="overflow-y-auto flex-grow pr-4 pb-12"> |
| <table class="text-base"> |
| <thead> |
| <tr> |
| <th>Feature</th> |
| <th>Rivers of North India (Himalayan)</th> |
| <th>Rivers of South India (Peninsular)</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr><td>**Flow Duration**</td><td>Perennial (year-round)</td><td>Seasonal (rain-fed)</td></tr> |
| <tr><td>**Source of Water**</td><td>Snow and Glacier melt</td><td>Monsoon rainfall</td></tr> |
| <tr><td>**Length**</td><td>Very long (e.g., Ganga 2510 km)</td><td>Shorter (e.g., Godavari 1465 km)</td></tr> |
| <tr><td>**Navigability**</td><td>Generally navigable</td><td>Limited/not navigable</td></tr> |
| <tr><td>**Delta Formation**</td><td>Form large deltas (e.g., Sundarbans)</td><td>East-flowing form deltas, West-flowing form estuaries</td></tr> |
| <tr><td>**Formation**</td><td>Antecedent (older than mountains)</td><td>Consequent (flow according to slope)</td></tr> |
| <tr><td>**Irrigation Suitability**</td><td>More suitable (due to perennial flow)</td><td>Less suitable (seasonal flow)</td></tr> |
| <tr><td>**Drainage**</td><td>Bay of Bengal / Arabian Sea</td><td>Bay of Bengal / Arabian Sea</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="slide p-12 flex flex-col justify-center items-center text-center bg-gradient-to-br from-indigo-700 to-purple-800 text-white" data-slide-index="13"> |
| <h2 class="text-5xl font-extrabold mb-6 animate-pulse">Conclusion & Summary</h2> |
| <p class="text-2xl max-w-3xl mb-12 opacity-90">India's landscape is a blend of ancient geological formations (**Plateau**) and young, powerful mountain systems (**Himalayas**). This diversity dictates its climate, population distribution, and economic activity.</p> |
| <p class="text-3xl font-semibold border-t border-white/50 pt-6">The administrative structure (28 States, 8 UTs) reflects the nation's linguistic and cultural heterogeneity.</p> |
| <h3 class="text-4xl mt-12 font-light">Thank You. Questions?</h3> |
| </div> |
|
|
| |
| <div class="absolute bottom-0 left-0 right-0 p-4 flex justify-between items-center bg-gray-900 bg-opacity-90 text-white z-20"> |
| <button onclick="changeSlide(-1)" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-full shadow-lg transition duration-200 focus:outline-none focus:ring-4 focus:ring-indigo-500/50"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg> |
| Previous |
| </button> |
| <span id="slide-indicator" class="text-xl font-medium">Slide 1 of 14</span> |
| <button onclick="changeSlide(1)" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-full shadow-lg transition duration-200 focus:outline-none focus:ring-4 focus:ring-indigo-500/50"> |
| Next |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg> |
| </button> |
| </div> |
|
|
| </div> |
|
|
| <script> |
| let currentSlideIndex = 0; |
| let slides = []; |
| const slideIndicator = document.getElementById('slide-indicator'); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| slides = document.querySelectorAll('.slide'); |
| |
| if (slides.length > 0) { |
| |
| document.addEventListener('keydown', handleKeyPress); |
| |
| showSlide(currentSlideIndex); |
| } else { |
| console.error("No slides found in the presentation."); |
| } |
| }); |
| |
| |
| function showSlide(index) { |
| |
| if (index < 0) { |
| index = slides.length - 1; |
| } else if (index >= slides.length) { |
| index = 0; |
| } |
| |
| |
| slides.forEach(slide => { |
| slide.classList.remove('active'); |
| }); |
| |
| |
| if (slides[index]) { |
| slides[index].classList.add('active'); |
| currentSlideIndex = index; |
| |
| |
| slideIndicator.textContent = `Slide ${currentSlideIndex + 1} of ${slides.length}`; |
| } |
| } |
| |
| |
| function changeSlide(n) { |
| showSlide(currentSlideIndex + n); |
| } |
| |
| |
| function handleKeyPress(event) { |
| if (event.key === 'ArrowRight' || event.key === ' ') { |
| changeSlide(1); |
| } else if (event.key === 'ArrowLeft') { |
| changeSlide(-1); |
| } |
| } |
| </script> |
| </body> |
| </html> |
|
|
