Hugging Face's logo

Spaces:
Nra
/
LA_8
Sleeping

App Files Community
Nra commited on
Commit
96ee81c
·
verified ·
1 Parent(s): 02da85e

Create FA2_GEO_CH_09.html

Browse files
Files changed (1) hide show
  1. data/FA2_GEO_CH_09.html +619 -0
data/FA2_GEO_CH_09.html ADDED
@@ -0,0 +1,619 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>India: A Geographical and Political Synthesis</title>
7
+ <!-- Load Tailwind CSS -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- Use Inter font family -->
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f3f4f6;
15
+ }
16
+
17
+ /* Custom styles for the smooth transition */
18
+ .slide {
19
+ opacity: 0;
20
+ transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ height: 100%;
26
+ transform: scale(0.98);
27
+ }
28
+
29
+ .slide.active {
30
+ opacity: 1;
31
+ z-index: 10;
32
+ transform: scale(1);
33
+ }
34
+
35
+ /* Styling for the table content from the outline */
36
+ .slide table {
37
+ width: 100%;
38
+ border-collapse: collapse;
39
+ margin-top: 1rem;
40
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
41
+ border-radius: 0.5rem;
42
+ overflow: hidden;
43
+ }
44
+ .slide th, .slide td {
45
+ padding: 1rem;
46
+ text-align: left;
47
+ border-bottom: 1px solid #e5e7eb;
48
+ }
49
+ .slide th {
50
+ background-color: #4f46e5;
51
+ color: white;
52
+ font-weight: 600;
53
+ }
54
+ .slide tr:nth-child(even) {
55
+ background-color: #f9fafb;
56
+ }
57
+ .slide tr:hover {
58
+ background-color: #eef2ff;
59
+ }
60
+
61
+ /* Styling for key points */
62
+ .slide ul {
63
+ list-style-type: none;
64
+ padding-left: 0;
65
+ }
66
+ .slide ul li {
67
+ margin-bottom: 0.75rem;
68
+ padding-left: 1.5rem;
69
+ position: relative;
70
+ }
71
+ .slide ul li::before {
72
+ content: '•';
73
+ color: #4f46e5;
74
+ font-weight: 900;
75
+ position: absolute;
76
+ left: 0;
77
+ font-size: 1.25rem;
78
+ line-height: 1;
79
+ }
80
+
81
+ /* Custom scrollbar for content area */
82
+ .overflow-y-auto::-webkit-scrollbar {
83
+ width: 8px;
84
+ }
85
+ .overflow-y-auto::-webkit-scrollbar-thumb {
86
+ background-color: #a5b4fc; /* light indigo */
87
+ border-radius: 10px;
88
+ }
89
+ .overflow-y-auto::-webkit-scrollbar-track {
90
+ background: #eef2ff; /* very light background */
91
+ }
92
+
93
+ /* Custom SVG animation for mountains */
94
+ @keyframes drawMountain {
95
+ 0% { stroke-dashoffset: 400; }
96
+ 100% { stroke-dashoffset: 0; }
97
+ }
98
+ .mountain-path {
99
+ stroke-dasharray: 400;
100
+ animation: drawMountain 2s ease-out forwards;
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="h-screen w-screen flex flex-col">
105
+
106
+ <!-- Main Presentation Container -->
107
+ <div id="presentation-container" class="relative flex-grow shadow-2xl rounded-lg overflow-hidden bg-white">
108
+
109
+ <!-- Slide Content (Generated from Markdown Outline) -->
110
+
111
+ <!-- Slide 1: Title Slide (Full screen, centered) -->
112
+ <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">
113
+ <h1 class="text-6xl font-extrabold mb-4 animate-fadeInUp">India: A Geographical and Political Synthesis</h1>
114
+ <h2 class="text-3xl font-light mb-8 opacity-90 animate-fadeIn delay-300">Location, Administration, and Physiographic Divisions</h2>
115
+ <p class="text-xl mt-12 opacity-80 border-t border-white/30 pt-4">Presented by: [Your Name/Organization]</p>
116
+ </div>
117
+
118
+ <!-- Slide 2: Introduction and Subcontinental Identity (Scrollable Content) -->
119
+ <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="1">
120
+ <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>
121
+ <!-- Scrollable content wrapper -->
122
+ <div class="overflow-y-auto flex-grow pr-4 pb-12">
123
+ <ul class="text-xl space-y-4">
124
+ <li class="animate-slideInLeft delay-100">India's identity: Subcontinent defined by the majestic **Himalayan barrier**.</li>
125
+ <li class="animate-slideInLeft delay-200">Global Rank: **Seventh-largest** country by area.</li>
126
+ <li class="animate-slideInLeft delay-300">Hemispheres: Located in the **Northern and Eastern** hemispheres.</li>
127
+ <li class="animate-slideInLeft delay-400">Administrative Snapshot: Organized into **28 States** and **8 Union Territories**.</li>
128
+ <li class="animate-slideInLeft delay-500">Topography: Defined by **six principal physiographic divisions**.</li>
129
+ <li class="animate-slideInLeft delay-600">The fundamental distinction in drainage systems underpins diverse patterns.</li>
130
+ <!-- Cleaned up dummy content -->
131
+ <li>The strategic location connects South Asia to the wider Indian Ocean trade routes.</li>
132
+ <li>Vast cultural and geographical differences necessitate a **federal structure** of governance.</li>
133
+ <li>Climate varies from tropical in the South to alpine in the Himalayan region.</li>
134
+ <li>The monsoon system is the primary factor influencing agriculture and water resources.</li>
135
+ <li>India shares significant ecological diversity across its major regions.</li>
136
+ <li>Geological history is marked by the northward drift of the Indian Plate.</li>
137
+ <li>The country experiences a wide range of natural hazards, including earthquakes and floods.</li>
138
+ </ul>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Slide 3: Geographical Location and Extent (Scrollable Grid) -->
143
+ <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="2">
144
+ <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>
145
+ <!-- Scrollable content wrapper -->
146
+ <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8">
147
+ <div>
148
+ <ul class="text-lg space-y-3 font-medium">
149
+ <li>Position: Strategic location at the head of the Indian Ocean, facilitating trade.</li>
150
+ <li>Total Area: **3,287,263 sq. km** (approx. 3.3 million sq. km)</li>
151
+ <li>Latitudinal Extent: $8^{\circ}4'$ N to $37^{\circ}6'$ N</li>
152
+ <li>Longitudinal Extent: $68^{\circ}7'$ E to $97^{\circ}25'$ E</li>
153
+ <li>North-South Extent: **3,214 km**</li>
154
+ <li>East-West Distance: **2,933 km**</li>
155
+ <li>Coastline Length: **7,516.6 km**</li>
156
+ <li>Standard Meridian: $82^{\circ}30'$ E longitude (passing through Prayagraj).</li>
157
+ <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>
158
+ </ul>
159
+ </div>
160
+ <div class="flex items-center justify-center rounded-xl shadow-2xl bg-white p-6">
161
+ <!-- Custom SVG: Coordinates and Cardinal Points -->
162
+ <svg class="w-full h-full max-w-sm" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
163
+ <circle cx="50" cy="50" r="45" stroke="#4F46E5" stroke-width="2" opacity="0.5"/>
164
+ <!-- Central Cross/Axis -->
165
+ <line x1="5" y1="50" x2="95" y2="50" stroke="#4F46E5" stroke-width="1"/>
166
+ <line x1="50" y1="5" x2="50" y2="95" stroke="#4F46E5" stroke-width="1"/>
167
+ <!-- North Label -->
168
+ <text x="50" y="12" text-anchor="middle" fill="#1E40AF" font-weight="bold" font-size="6">37°6' N</text>
169
+ <!-- South Label -->
170
+ <text x="50" y="97" text-anchor="middle" fill="#1E40AF" font-weight="bold" font-size="6">8°4' N</text>
171
+ <!-- East Label -->
172
+ <text x="98" y="52" text-anchor="end" fill="#1E40AF" font-weight="bold" font-size="6">97°25' E</text>
173
+ <!-- West Label -->
174
+ <text x="2" y="52" text-anchor="start" fill="#1E40AF" font-weight="bold" font-size="6">68°7' E</text>
175
+
176
+ <!-- Central point for Standard Meridian -->
177
+ <circle cx="50" cy="50" r="3" fill="#EF4444"/>
178
+ <text x="50" y="45" text-anchor="middle" fill="#EF4444" font-weight="bold" font-size="6">82.5° E (IST)</text>
179
+ </svg>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Slide 4: Geopolitical Context and Neighbours (Scrollable Grid) -->
185
+ <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="3">
186
+ <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>
187
+ <!-- Scrollable content wrapper -->
188
+ <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8">
189
+ <div>
190
+ <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">The Indian Subcontinent (Wider Definition)</h3>
191
+ <ul class="text-lg">
192
+ <li>Includes Pakistan, Nepal, Bhutan, Bangladesh, and Sri Lanka.</li>
193
+ </ul>
194
+ <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">Land Neighbours (Shared Borders)</h3>
195
+ <ul class="text-lg grid grid-cols-2">
196
+ <li>Pakistan</li>
197
+ <li>Afghanistan (disputed/short)</li>
198
+ <li>China</li>
199
+ <li>Nepal</li>
200
+ <li>Bhutan</li>
201
+ <li>Myanmar</li>
202
+ <li>Bangladesh</li>
203
+ </ul>
204
+ <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">Sea Neighbours (South)</h3>
205
+ <ul class="text-lg">
206
+ <li>Sri Lanka (**Palk Strait** and Gulf of Mannar)</li>
207
+ <li>The Maldives (to the southwest)</li>
208
+ </ul>
209
+ </div>
210
+ <div class="flex items-center justify-center rounded-xl shadow-2xl bg-indigo-50 p-6">
211
+ <!-- Custom Visual: Geopolitical Icons -->
212
+ <div class="space-y-6 text-center">
213
+ <div class="flex justify-center space-x-8">
214
+ <!-- Icon for Land Borders (Mountains) -->
215
+ <div class="p-4 bg-purple-200 rounded-lg shadow-md">
216
+ <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">
217
+ <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" />
218
+ </svg>
219
+ <p class="mt-2 text-lg font-semibold text-purple-800">7 Land Neighbours</p>
220
+ </div>
221
+ </div>
222
+ <div class="flex justify-center">
223
+ <!-- Icon for Maritime Borders (Sea) -->
224
+ <div class="p-4 bg-green-200 rounded-lg shadow-md">
225
+ <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">
226
+ <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" />
227
+ </svg>
228
+ <p class="mt-2 text-lg font-semibold text-green-800">Indian Ocean Head</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Slide 5: Political and Administrative Divisions (Scrollable Grid) -->
237
+ <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="4">
238
+ <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>
239
+ <!-- Scrollable content wrapper -->
240
+ <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8">
241
+ <div>
242
+ <h3 class="text-2xl font-semibold mb-3 text-purple-600">Key Facts</h3>
243
+ <ul class="text-lg space-y-3">
244
+ <li>Capital: **New Delhi**.</li>
245
+ <li>Basis of Reorganization: Primarily based on **linguistic lines** after independence.</li>
246
+ <li>Population Characteristic: Highly diverse in language, religion, and ethnic traits.</li>
247
+ <li>Shared Capital: Punjab and Haryana share **Chandigarh** as their capital.</li>
248
+ <!-- Cleaned up dummy content -->
249
+ <li>The Governor is the constitutional head of the State.</li>
250
+ <li>The President acts as the head of the Union Territories (through an administrator/LG).</li>
251
+ </ul>
252
+ </div>
253
+ <div>
254
+ <h3 class="text-2xl font-semibold mb-3 text-purple-600">Spotlight Examples</h3>
255
+ <div class="grid grid-cols-2 gap-4">
256
+ <div>
257
+ <p class="font-bold">States:</p>
258
+ <ul class="text-lg space-y-1 ml-4 list-disc text-gray-600">
259
+ <li>Maharashtra (Mumbai)</li>
260
+ <li>West Bengal (Kolkata)</li>
261
+ <li>Tamil Nadu (Chennai)</li>
262
+ </ul>
263
+ </div>
264
+ <div>
265
+ <p class="font-bold">Union Territories (UTs):</p>
266
+ <ul class="text-lg space-y-1 ml-4 list-disc text-gray-600">
267
+ <li>Andaman & Nicobar Islands (Port Blair)</li>
268
+ <li>Jammu and Kashmir (Srinagar/Jammu)</li>
269
+ <li>The smallest UT: **Lakshadweep** (Kavaratti)</li>
270
+ </ul>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Slide 6: Physiographic Division 1: The Northern Mountains (Scrollable Grid) -->
278
+ <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="5">
279
+ <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>
280
+ <!-- Scrollable content wrapper -->
281
+ <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8">
282
+ <div>
283
+ <ul class="text-lg space-y-3 font-medium">
284
+ <li>Origin: Young mountains formed by the collision of Gondwanaland and Laurasia.</li>
285
+ <li>Extent: Stretches over **2,400 km** (Nanga Parbat to Namcha Barwa).</li>
286
+ <li>Width: Varies from **15 km to 400 km**.</li>
287
+ <li>Significance: Source of major perennial rivers, crucial climatic barrier.</li>
288
+ </ul>
289
+ <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">The Three Parallel Ranges</h3>
290
+ <ol class="list-decimal list-inside text-lg font-medium space-y-2 ml-4">
291
+ <li>**Greater Himalayas (Himadri):** Avg. height **> 6,000 m**. (Includes Mt. Everest, $8848.86\text{ m}$).</li>
292
+ <li>**Lesser Himalayas (Himachal):** Max height **5,000 m**. (Valleys like Kashmir, hill stations like Shimla).</li>
293
+ <li>**Outer Himalayas (Shiwalik):** Max height **1,500 m**. Foot-hills, known for *Duns* (longitudinal valleys).</li>
294
+ </ol>
295
+ </div>
296
+ <div class="flex items-center justify-center rounded-xl shadow-2xl bg-indigo-50 p-6">
297
+ <!-- Custom SVG: Simplified Himalayan Cross-Section Diagram -->
298
+ <svg class="w-full h-full max-w-sm" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
299
+ <!-- Base Line (Plains/Foot) -->
300
+ <line x1="5" y1="85" x2="95" y2="85" stroke="#374151" stroke-width="1.5"/>
301
+
302
+ <!-- Shiwalik (Outer, lowest) -->
303
+ <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;"/>
304
+ <text x="23" y="80" text-anchor="middle" fill="#10B981" font-weight="bold" font-size="5">Shiwalik</text>
305
+
306
+ <!-- Himachal (Lesser, middle) -->
307
+ <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;"/>
308
+ <text x="50" y="65" text-anchor="middle" fill="#F59E0B" font-weight="bold" font-size="5">Himachal</text>
309
+
310
+ <!-- Himadri (Greater, highest) -->
311
+ <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;"/>
312
+ <text x="80" y="25" text-anchor="middle" fill="#4F46E5" font-weight="bold" font-size="5">Himadri</text>
313
+
314
+ <!-- Labels for altitude -->
315
+ <text x="98" y="30" text-anchor="end" fill="#4F46E5" font-weight="bold" font-size="4">>6000m</text>
316
+ <text x="98" y="50" text-anchor="end" fill="#F59E0B" font-weight="bold" font-size="4">~5000m</text>
317
+ <text x="98" y="70" text-anchor="end" fill="#10B981" font-weight="bold" font-size="4">~1500m</text>
318
+
319
+ </svg>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Slide 7: Physiographic Division 2: The Great Northern Plains (Scrollable Content) -->
325
+ <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="6">
326
+ <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>
327
+ <!-- Scrollable content wrapper -->
328
+ <div class="overflow-y-auto flex-grow pr-4 pb-12">
329
+ <ul class="text-xl space-y-3 mb-6">
330
+ <li>Extent & Productivity: Stretches **2,400 km**; one of the world's most productive regions.</li>
331
+ <li>Formation: Formed by alluvial deposits of three river systems: **Indus, Ganga, and Brahmaputra**.</li>
332
+ <li>Impact: Fertile soil supports dense population and agricultural development.</li>
333
+ </ul>
334
+ <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">Key Divisions</h3>
335
+ <div class="grid grid-cols-3 gap-6 text-lg">
336
+ <div class="bg-indigo-50 p-4 rounded-lg shadow">
337
+ <p class="font-bold text-indigo-800">1. The Punjab Plains</p>
338
+ <p>Formed by Indus and its tributaries (Satluj, Beas, Ravi, Chenab, Jhelum).</p>
339
+ </div>
340
+ <div class="bg-indigo-50 p-4 rounded-lg shadow">
341
+ <p class="font-bold text-indigo-800">2. The Ganga Plains</p>
342
+ <p>Formed by the Ganga and its tributaries (Yamuna, Son). Avg. height **30m to 150m**.</p>
343
+ </div>
344
+ <div class="bg-indigo-50 p-4 rounded-lg shadow">
345
+ <p class="font-bold text-indigo-800">3. The Brahmaputra Valley</p>
346
+ <p>Lies in Assam. Avg. height **100m**. Forms the **Sundarbans** delta with Ganga.</p>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Slide 8: Physiographic Division 3: The Peninsular Plateau (Scrollable Content) -->
353
+ <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="7">
354
+ <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>
355
+ <!-- Scrollable content wrapper -->
356
+ <div class="overflow-y-auto flex-grow pr-4 pb-12">
357
+ <p class="text-xl mb-6">Ancient triangular landmass of hard crystalline **igneous and metamorphic rocks**. Divided by the **Narmada River**.</p>
358
+
359
+ <div class="grid grid-cols-2 gap-8">
360
+ <div>
361
+ <h3 class="text-2xl font-semibold mb-3 text-purple-600">Plateau Divisions</h3>
362
+ <ul class="text-lg space-y-2">
363
+ <li>**The Malwa Plateau:** Bounded by Aravalli, Vindhya, and Chota Nagpur.</li>
364
+ <li>**The Deccan Plateau:** Bounded by Satpura, Western Ghats, and Eastern Ghats. Western part is the **Deccan Trap** (lava sheets).</li>
365
+ </ul>
366
+ </div>
367
+ <div>
368
+ <h3 class="text-2xl font-semibold mb-3 text-purple-600">The Ghats (Flanking Ranges)</h3>
369
+ <table class="text-base">
370
+ <thead>
371
+ <tr><th>Feature</th><th>Western Ghats</th><th>Eastern Ghats</th></tr>
372
+ </thead>
373
+ <tbody>
374
+ <tr><td>Continuity</td><td>Continuous (Tapi River to Kanyakumari)</td><td>Discontinuous (Mahanadi Valley to Nilgiri Hills)</td></tr>
375
+ <tr><td>Avg. Height</td><td>**1,200 m** (Steep)</td><td>**450 m** (Gentle Slopes)</td></tr>
376
+ <tr><td>Proximity</td><td>Close to the Arabian Sea</td><td>At a distance from the Bay of Bengal</td></tr>
377
+ </tbody>
378
+ </table>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Slide 9: Physiographic Divisions 4 & 5: Coastal Plains and Desert (Scrollable Grid) -->
385
+ <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="8">
386
+ <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>
387
+ <!-- Scrollable content wrapper -->
388
+ <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8">
389
+ <div>
390
+ <h3 class="text-2xl font-semibold mb-3 text-purple-600">The Coastal Plains</h3>
391
+ <table class="text-sm">
392
+ <thead>
393
+ <tr><th>Coastal Plain</th><th>Location & Features</th></tr>
394
+ </thead>
395
+ <tbody>
396
+ <tr><td>**Western**</td><td>Narrow, uneven. No major deltas (estuaries/lagoons). Known as Konkan, Kanara, Malabar Coast.</td></tr>
397
+ <tr><td>**Eastern**</td><td>Wider, formed by Deltas (Mahanadi, Godavari, Krishna). Known as Northern Circars and Coromandel Coast.</td></tr>
398
+ </tbody>
399
+ </table>
400
+ <h3 class="text-2xl font-semibold mt-6 mb-3 text-purple-600">The Thar Desert</h3>
401
+ <ul class="text-lg space-y-2">
402
+ <li>Location: North-western Rajasthan (between Aravalli hills and Sind Desert).</li>
403
+ <li>Climate: High temperatures, very low rainfall (**less than 25 cm annually**).</li>
404
+ <li>Hydrology: Luni is the only significant river. Irrigation by the **Indira Gandhi Canal**.</li>
405
+ </ul>
406
+ </div>
407
+ <div class="flex items-center justify-center rounded-xl shadow-2xl bg-white p-6">
408
+ <!-- Custom Visual: Dual Icons for Coast and Desert -->
409
+ <div class="flex space-x-12">
410
+ <!-- Desert Icon -->
411
+ <div class="text-center p-6 bg-yellow-100 rounded-lg shadow-inner">
412
+ <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">
413
+ <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" />
414
+ </svg>
415
+ <p class="mt-2 text-lg font-bold text-yellow-800">Thar Desert</p>
416
+ <p class="text-sm text-yellow-700">Low Rainfall</p>
417
+ </div>
418
+ <!-- Coastal Plain Icon -->
419
+ <div class="text-center p-6 bg-blue-100 rounded-lg shadow-inner">
420
+ <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">
421
+ <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" />
422
+ <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" />
423
+ </svg>
424
+ <p class="mt-2 text-lg font-bold text-blue-800">Coastal Plains</p>
425
+ <p class="text-sm text-blue-700">Eastern vs. Western</p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Slide 10: Physiographic Division 6: The Island Groups (Scrollable Content) -->
433
+ <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="9">
434
+ <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>
435
+ <!-- Scrollable content wrapper -->
436
+ <div class="overflow-y-auto flex-grow pr-4 pb-12 grid grid-cols-2 gap-8">
437
+ <div>
438
+ <h3 class="text-2xl font-semibold mb-4 text-purple-600">Andaman and Nicobar Islands (Bay of Bengal)</h3>
439
+ <ul class="text-xl space-y-3">
440
+ <li>Number: About **550 islands**.</li>
441
+ <li>Origin: Primarily **Volcanic origin**.</li>
442
+ <li>Key Feature: Barren Island is India's **only active volcano**.</li>
443
+ <li>Separation: **Ten Degree Channel** separates the Andaman and Nicobar groups.</li>
444
+ </ul>
445
+ </div>
446
+ <div>
447
+ <h3 class="text-2xl font-semibold mb-4 text-purple-600">Lakshadweep Islands (Arabian Sea)</h3>
448
+ <ul class="text-xl space-y-3">
449
+ <li>Origin: **Coral origin** (formed by polyps).</li>
450
+ <li>Characteristics: Fewer in number, many uninhabited.</li>
451
+ <li>Status: Smallest union territory of India. Capital: Kavaratti.</li>
452
+ </ul>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- Slide 11: Drainage System 1: Himalayan Rivers (Scrollable Content) -->
458
+ <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="10">
459
+ <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>
460
+ <!-- Scrollable content wrapper -->
461
+ <div class="overflow-y-auto flex-grow pr-4 pb-12">
462
+ <p class="text-xl mb-6 font-medium">Source & Characteristics: Snow-fed, **perennial** rivers, ensuring year-round flow.</p>
463
+ <h3 class="text-2xl font-semibold mt-6 mb-4 text-purple-600">Three Main Systems</h3>
464
+
465
+ <div class="grid grid-cols-3 gap-6 text-lg">
466
+ <div class="bg-white p-4 rounded-lg shadow-md border-t-4 border-sky-500">
467
+ <p class="font-bold text-sky-700">1. The Indus River</p>
468
+ <p>Rises in Tibet. Flows **2,900 km** to the Arabian Sea. Tributaries: Satluj, Beas, Ravi, Chenab, Jhelum (Panchnad).</p>
469
+ </div>
470
+ <div class="bg-white p-4 rounded-lg shadow-md border-t-4 border-sky-500">
471
+ <p class="font-bold text-sky-700">2. The Ganga River</p>
472
+ <p>Rises from **Gangotri Glacier**. Flows **2,510 km**. Basin covers roughly **one-fourth** of India's area. Tributaries: Yamuna, Son, Ghaghara, Gandak.</p>
473
+ </div>
474
+ <div class="bg-white p-4 rounded-lg shadow-md border-t-4 border-sky-500">
475
+ <p class="font-bold text-sky-700">3. The Brahmaputra River</p>
476
+ <p>Rises near Mansarovar Lake (Tsang Po in Tibet). Flows **2,700 km**. Enters India in Arunachal Pradesh.</p>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <!-- Slide 12: Drainage System 2: Peninsular Rivers (Scrollable Content) -->
483
+ <div class="slide p-12 flex flex-col bg-white text-gray-800" data-slide-index="11">
484
+ <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>
485
+ <!-- Scrollable content wrapper -->
486
+ <div class="overflow-y-auto flex-grow pr-4 pb-12">
487
+ <p class="text-xl mb-6 font-medium">Source & Characteristics: **Rain-fed** and **seasonal** rivers, dependent on monsoon.</p>
488
+
489
+ <div class="grid grid-cols-2 gap-8">
490
+ <div>
491
+ <h3 class="text-2xl font-semibold mb-4 text-purple-600">West-Flowing (Arabian Sea)</h3>
492
+ <ul class="text-lg space-y-3">
493
+ <li>Short and swift, flowing through rift valleys.</li>
494
+ <li class="font-bold text-orange-600">DO NOT form deltas (they form estuaries).</li>
495
+ <li>Examples: **Narmada** (**1,312 km**) and **Tapi** (**724 km**).</li>
496
+ </ul>
497
+ </div>
498
+ <div>
499
+ <h3 class="text-2xl font-semibold mb-4 text-purple-600">East-Flowing (Bay of Bengal)</h3>
500
+ <ul class="text-lg space-y-3">
501
+ <li class="font-bold text-green-600">Form large deltas.</li>
502
+ <li>**Godavari:** Longest peninsular river (**1,465 km**), the 'Ganga of the South'.</li>
503
+ <li>**Krishna:** **1,400 km**.</li>
504
+ <li>**Kaveri:** **800 km**.</li>
505
+ </ul>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Slide 13: Comparative Analysis of River Systems (Scrollable Content) -->
512
+ <div class="slide p-12 flex flex-col bg-gray-50 text-gray-800" data-slide-index="12">
513
+ <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>
514
+ <!-- Scrollable content wrapper -->
515
+ <div class="overflow-y-auto flex-grow pr-4 pb-12">
516
+ <table class="text-base">
517
+ <thead>
518
+ <tr>
519
+ <th>Feature</th>
520
+ <th>Rivers of North India (Himalayan)</th>
521
+ <th>Rivers of South India (Peninsular)</th>
522
+ </tr>
523
+ </thead>
524
+ <tbody>
525
+ <tr><td>**Flow Duration**</td><td>Perennial (year-round)</td><td>Seasonal (rain-fed)</td></tr>
526
+ <tr><td>**Source of Water**</td><td>Snow and Glacier melt</td><td>Monsoon rainfall</td></tr>
527
+ <tr><td>**Length**</td><td>Very long (e.g., Ganga 2510 km)</td><td>Shorter (e.g., Godavari 1465 km)</td></tr>
528
+ <tr><td>**Navigability**</td><td>Generally navigable</td><td>Limited/not navigable</td></tr>
529
+ <tr><td>**Delta Formation**</td><td>Form large deltas (e.g., Sundarbans)</td><td>East-flowing form deltas, West-flowing form estuaries</td></tr>
530
+ <tr><td>**Formation**</td><td>Antecedent (older than mountains)</td><td>Consequent (flow according to slope)</td></tr>
531
+ <tr><td>**Irrigation Suitability**</td><td>More suitable (due to perennial flow)</td><td>Less suitable (seasonal flow)</td></tr>
532
+ <tr><td>**Drainage**</td><td>Bay of Bengal / Arabian Sea</td><td>Bay of Bengal / Arabian Sea</td></tr>
533
+ </tbody>
534
+ </table>
535
+ </div>
536
+ </div>
537
+
538
+ <!-- Slide 14: Conclusion and Q&A (Full screen, centered) -->
539
+ <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">
540
+ <h2 class="text-5xl font-extrabold mb-6 animate-pulse">Conclusion & Summary</h2>
541
+ <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>
542
+ <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>
543
+ <h3 class="text-4xl mt-12 font-light">Thank You. Questions?</h3>
544
+ </div>
545
+
546
+ <!-- Slide Counter and Navigation Controls -->
547
+ <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">
548
+ <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">
549
+ <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>
550
+ Previous
551
+ </button>
552
+ <span id="slide-indicator" class="text-xl font-medium">Slide 1 of 14</span>
553
+ <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">
554
+ Next
555
+ <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>
556
+ </button>
557
+ </div>
558
+
559
+ </div>
560
+
561
+ <script>
562
+ let currentSlideIndex = 0;
563
+ let slides = [];
564
+ const slideIndicator = document.getElementById('slide-indicator');
565
+
566
+ // Initialize slides and listeners on load
567
+ document.addEventListener('DOMContentLoaded', () => {
568
+ slides = document.querySelectorAll('.slide');
569
+
570
+ if (slides.length > 0) {
571
+ // Attach keyboard navigation
572
+ document.addEventListener('keydown', handleKeyPress);
573
+ // Display the first slide
574
+ showSlide(currentSlideIndex);
575
+ } else {
576
+ console.error("No slides found in the presentation.");
577
+ }
578
+ });
579
+
580
+ // Handles slide visibility and updates the counter
581
+ function showSlide(index) {
582
+ // Bounds check
583
+ if (index < 0) {
584
+ index = slides.length - 1; // Wrap to the last slide
585
+ } else if (index >= slides.length) {
586
+ index = 0; // Wrap to the first slide
587
+ }
588
+
589
+ // 1. Hide all slides and remove 'active' class
590
+ slides.forEach(slide => {
591
+ slide.classList.remove('active');
592
+ });
593
+
594
+ // 2. Show the desired slide and add 'active' class
595
+ if (slides[index]) {
596
+ slides[index].classList.add('active');
597
+ currentSlideIndex = index; // Update the global index
598
+
599
+ // 3. Update the slide counter
600
+ slideIndicator.textContent = `Slide ${currentSlideIndex + 1} of ${slides.length}`;
601
+ }
602
+ }
603
+
604
+ // Change slide function (n = 1 for next, n = -1 for previous)
605
+ function changeSlide(n) {
606
+ showSlide(currentSlideIndex + n);
607
+ }
608
+
609
+ // Keyboard navigation
610
+ function handleKeyPress(event) {
611
+ if (event.key === 'ArrowRight' || event.key === ' ') {
612
+ changeSlide(1);
613
+ } else if (event.key === 'ArrowLeft') {
614
+ changeSlide(-1);
615
+ }
616
+ }
617
+ </script>
618
+ </body>
619
+ </html>