Hugging Face's logo

Spaces:
AashishAIHub
/
DeepLearning
Running

App Files Community
AashishAIHub commited on
Commit
3f16cd5
·
verified ·
1 Parent(s): 653e8aa

Upload Deep Learning Complete Curriculum.html

Browse files
Files changed (1) hide show
  1. Deep Learning Complete Curriculum.html +769 -0
Deep Learning Complete Curriculum.html ADDED
@@ -0,0 +1,769 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Complete Deep Learning & Computer Vision Curriculum</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ :root {
15
+ --bg: #0f1419;
16
+ --surface: #1a1f2e;
17
+ --text: #e4e6eb;
18
+ --text-dim: #b0b7c3;
19
+ --cyan: #00d4ff;
20
+ --orange: #ff6b35;
21
+ --green: #00ff88;
22
+ --yellow: #ffa500;
23
+ }
24
+
25
+ body {
26
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
27
+ background: var(--bg);
28
+ color: var(--text);
29
+ line-height: 1.6;
30
+ overflow-x: hidden;
31
+ }
32
+
33
+ .container {
34
+ max-width: 1400px;
35
+ margin: 0 auto;
36
+ padding: 20px;
37
+ }
38
+
39
+ header {
40
+ text-align: center;
41
+ margin-bottom: 40px;
42
+ padding: 30px 0;
43
+ border-bottom: 2px solid var(--cyan);
44
+ }
45
+
46
+ h1 {
47
+ font-size: 2.5em;
48
+ background: linear-gradient(135deg, var(--cyan), var(--orange));
49
+ -webkit-background-clip: text;
50
+ -webkit-text-fill-color: transparent;
51
+ margin-bottom: 10px;
52
+ }
53
+
54
+ .subtitle {
55
+ color: var(--text-dim);
56
+ font-size: 1.1em;
57
+ }
58
+
59
+ .dashboard { display: none; }
60
+ .dashboard.active { display: block; }
61
+
62
+ .grid {
63
+ display: grid;
64
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
65
+ gap: 25px;
66
+ margin: 40px 0;
67
+ }
68
+
69
+ .card {
70
+ background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 107, 53, 0.1));
71
+ border: 2px solid var(--cyan);
72
+ border-radius: 12px;
73
+ padding: 30px;
74
+ cursor: pointer;
75
+ transition: all 0.3s ease;
76
+ text-align: center;
77
+ }
78
+
79
+ .card:hover {
80
+ transform: translateY(-5px);
81
+ box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
82
+ border-color: var(--orange);
83
+ }
84
+
85
+ .card-icon {
86
+ font-size: 3em;
87
+ margin-bottom: 15px;
88
+ }
89
+
90
+ .card h3 {
91
+ color: var(--cyan);
92
+ font-size: 1.5em;
93
+ margin-bottom: 10px;
94
+ }
95
+
96
+ .card p {
97
+ color: var(--text-dim);
98
+ font-size: 0.95em;
99
+ }
100
+
101
+ .category-label {
102
+ display: inline-block;
103
+ margin-top: 10px;
104
+ padding: 5px 12px;
105
+ background: rgba(0, 212, 255, 0.2);
106
+ border-radius: 20px;
107
+ font-size: 0.85em;
108
+ color: var(--green);
109
+ }
110
+
111
+ .module { display: none; }
112
+ .module.active { display: block; animation: fadeIn 0.3s ease; }
113
+
114
+ @keyframes fadeIn {
115
+ from { opacity: 0; }
116
+ to { opacity: 1; }
117
+ }
118
+
119
+ .btn-back {
120
+ padding: 10px 20px;
121
+ background: var(--orange);
122
+ color: var(--bg);
123
+ border: none;
124
+ border-radius: 6px;
125
+ cursor: pointer;
126
+ font-weight: 600;
127
+ margin-bottom: 25px;
128
+ transition: all 0.3s ease;
129
+ }
130
+
131
+ .btn-back:hover { background: var(--cyan); }
132
+
133
+ .tabs {
134
+ display: flex;
135
+ gap: 10px;
136
+ margin-bottom: 30px;
137
+ flex-wrap: wrap;
138
+ justify-content: center;
139
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
140
+ padding-bottom: 15px;
141
+ overflow-x: auto;
142
+ }
143
+
144
+ .tab-btn {
145
+ padding: 10px 20px;
146
+ background: var(--surface);
147
+ color: var(--text);
148
+ border: 2px solid transparent;
149
+ border-radius: 6px;
150
+ cursor: pointer;
151
+ font-size: 0.95em;
152
+ transition: all 0.3s ease;
153
+ font-weight: 500;
154
+ white-space: nowrap;
155
+ }
156
+
157
+ .tab-btn:hover {
158
+ background: rgba(0, 212, 255, 0.1);
159
+ border-color: var(--cyan);
160
+ }
161
+
162
+ .tab-btn.active {
163
+ background: var(--cyan);
164
+ color: var(--bg);
165
+ border-color: var(--cyan);
166
+ }
167
+
168
+ .tab { display: none; }
169
+ .tab.active { display: block; animation: fadeIn 0.3s ease; }
170
+
171
+ .section {
172
+ background: var(--surface);
173
+ border: 1px solid rgba(0, 212, 255, 0.2);
174
+ border-radius: 10px;
175
+ padding: 30px;
176
+ margin-bottom: 25px;
177
+ transition: all 0.3s ease;
178
+ }
179
+
180
+ .section:hover {
181
+ border-color: var(--cyan);
182
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
183
+ }
184
+
185
+ h2 {
186
+ color: var(--cyan);
187
+ font-size: 1.8em;
188
+ margin-bottom: 15px;
189
+ }
190
+
191
+ h3 {
192
+ color: var(--orange);
193
+ font-size: 1.3em;
194
+ margin-top: 20px;
195
+ margin-bottom: 12px;
196
+ }
197
+
198
+ h4 {
199
+ color: var(--green);
200
+ font-size: 1.1em;
201
+ margin-top: 15px;
202
+ margin-bottom: 10px;
203
+ }
204
+
205
+ p { margin-bottom: 15px; line-height: 1.8; }
206
+
207
+ ul { margin-left: 20px; margin-bottom: 15px; }
208
+ ul li { margin-bottom: 8px; }
209
+
210
+ .info-box {
211
+ background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 107, 53, 0.1));
212
+ border: 1px solid var(--cyan);
213
+ border-radius: 8px;
214
+ padding: 20px;
215
+ margin: 20px 0;
216
+ }
217
+
218
+ .box-title {
219
+ color: var(--orange);
220
+ font-weight: 700;
221
+ margin-bottom: 10px;
222
+ font-size: 1.1em;
223
+ }
224
+
225
+ .box-content {
226
+ color: var(--text-dim);
227
+ line-height: 1.7;
228
+ }
229
+
230
+ .formula {
231
+ background: rgba(0, 212, 255, 0.1);
232
+ border: 1px solid var(--cyan);
233
+ border-radius: 8px;
234
+ padding: 20px;
235
+ margin: 20px 0;
236
+ font-family: 'Courier New', monospace;
237
+ overflow-x: auto;
238
+ line-height: 1.8;
239
+ color: var(--cyan);
240
+ }
241
+
242
+ .callout {
243
+ border-left: 4px solid;
244
+ padding: 15px;
245
+ margin: 20px 0;
246
+ border-radius: 6px;
247
+ }
248
+
249
+ .callout.tip {
250
+ border-left-color: var(--green);
251
+ background: rgba(0, 255, 136, 0.05);
252
+ }
253
+
254
+ .callout.warning {
255
+ border-left-color: var(--yellow);
256
+ background: rgba(255, 165, 0, 0.05);
257
+ }
258
+
259
+ .callout.insight {
260
+ border-left-color: var(--cyan);
261
+ background: rgba(0, 212, 255, 0.05);
262
+ }
263
+
264
+ .callout-title {
265
+ font-weight: 700;
266
+ margin-bottom: 8px;
267
+ }
268
+
269
+ .list-item {
270
+ display: flex;
271
+ gap: 12px;
272
+ margin: 12px 0;
273
+ padding: 12px;
274
+ background: rgba(0, 212, 255, 0.05);
275
+ border-left: 3px solid var(--cyan);
276
+ border-radius: 4px;
277
+ }
278
+
279
+ .list-num {
280
+ color: var(--orange);
281
+ font-weight: 700;
282
+ min-width: 30px;
283
+ }
284
+
285
+ table {
286
+ width: 100%;
287
+ border-collapse: collapse;
288
+ margin: 20px 0;
289
+ }
290
+
291
+ th, td {
292
+ padding: 12px;
293
+ text-align: left;
294
+ border: 1px solid rgba(0, 212, 255, 0.2);
295
+ }
296
+
297
+ th {
298
+ background: rgba(0, 212, 255, 0.1);
299
+ color: var(--cyan);
300
+ font-weight: 700;
301
+ }
302
+
303
+ @media (max-width: 768px) {
304
+ h1 { font-size: 1.8em; }
305
+ .tabs { flex-direction: column; }
306
+ .tab-btn { width: 100%; }
307
+ .grid { grid-template-columns: 1fr; }
308
+ }
309
+ </style>
310
+ </head>
311
+ <body>
312
+ <div class="container">
313
+ <!-- MAIN DASHBOARD -->
314
+ <div id="dashboard" class="dashboard active">
315
+ <header>
316
+ <h1>🧠 Complete Deep Learning & Computer Vision</h1>
317
+ <p class="subtitle">Comprehensive Curriculum | Foundations to Advanced Applications</p>
318
+ </header>
319
+
320
+ <div style="text-align: center; margin-bottom: 40px;">
321
+ <p style="color: var(--text-dim); font-size: 1.1em;">
322
+ Master all aspects of deep learning and computer vision. 25+ modules covering neural networks, CNNs, object detection, GANs, and more.
323
+ </p>
324
+ </div>
325
+
326
+ <div class="grid" id="modulesGrid"></div>
327
+ </div>
328
+
329
+ <!-- MODULES CONTAINER -->
330
+ <div id="modulesContainer"></div>
331
+ </div>
332
+
333
+ <script>
334
+ const modules = [
335
+ // Module 1: Deep Learning Foundations
336
+ {
337
+ id: "nn-basics",
338
+ title: "Introduction to Neural Networks",
339
+ icon: "🧬",
340
+ category: "Foundations",
341
+ color: "#0088ff",
342
+ description: "Biological vs. Artificial neurons and network architecture"
343
+ },
344
+ {
345
+ id: "perceptron",
346
+ title: "The Perceptron",
347
+ icon: "⚙️",
348
+ category: "Foundations",
349
+ color: "#0088ff",
350
+ description: "Single layer networks and their limitations"
351
+ },
352
+ {
353
+ id: "mlp",
354
+ title: "Multi-Layer Perceptron (MLP)",
355
+ icon: "🏗️",
356
+ category: "Foundations",
357
+ color: "#0088ff",
358
+ description: "Hidden layers and deep architectures"
359
+ },
360
+ {
361
+ id: "activation",
362
+ title: "Activation Functions",
363
+ icon: "⚡",
364
+ category: "Foundations",
365
+ color: "#0088ff",
366
+ description: "Sigmoid, ReLU, Tanh, Leaky ReLU, ELU, Softmax"
367
+ },
368
+ {
369
+ id: "weight-init",
370
+ title: "Weight Initialization",
371
+ icon: "🎯",
372
+ category: "Foundations",
373
+ color: "#0088ff",
374
+ description: "Xavier, He, Random initialization strategies"
375
+ },
376
+ {
377
+ id: "loss",
378
+ title: "Loss Functions",
379
+ icon: "📉",
380
+ category: "Foundations",
381
+ color: "#0088ff",
382
+ description: "MSE, Binary Cross-Entropy, Categorical Cross-Entropy"
383
+ },
384
+ {
385
+ id: "optimizers",
386
+ title: "Optimizers",
387
+ icon: "🎯",
388
+ category: "Training",
389
+ color: "#00ff00",
390
+ description: "SGD, Momentum, Adam, Adagrad, RMSprop"
391
+ },
392
+ {
393
+ id: "backprop",
394
+ title: "Forward & Backpropagation",
395
+ icon: "⬅️",
396
+ category: "Training",
397
+ color: "#00ff00",
398
+ description: "Chain rule and gradient computation"
399
+ },
400
+ {
401
+ id: "regularization",
402
+ title: "Regularization",
403
+ icon: "🛡️",
404
+ category: "Training",
405
+ color: "#00ff00",
406
+ description: "L1/L2, Dropout, Early Stopping, Batch Norm"
407
+ },
408
+ {
409
+ id: "batch-norm",
410
+ title: "Batch Normalization",
411
+ icon: "⚙️",
412
+ category: "Training",
413
+ color: "#00ff00",
414
+ description: "Stabilizing and speeding up training"
415
+ },
416
+ // Module 2: Computer Vision Fundamentals
417
+ {
418
+ id: "cv-intro",
419
+ title: "CV Fundamentals",
420
+ icon: "👁️",
421
+ category: "Computer Vision",
422
+ color: "#ff6b35",
423
+ description: "Why ANNs fail with images, parameter explosion"
424
+ },
425
+ {
426
+ id: "conv-layer",
427
+ title: "Convolutional Layers",
428
+ icon: "🖼️",
429
+ category: "Computer Vision",
430
+ color: "#ff6b35",
431
+ description: "Kernels, filters, feature maps, stride, padding"
432
+ },
433
+ {
434
+ id: "pooling",
435
+ title: "Pooling Layers",
436
+ icon: "📦",
437
+ category: "Computer Vision",
438
+ color: "#ff6b35",
439
+ description: "Max pooling, average pooling, spatial reduction"
440
+ },
441
+ {
442
+ id: "cnn-basics",
443
+ title: "CNN Architecture",
444
+ icon: "🏗️",
445
+ category: "Computer Vision",
446
+ color: "#ff6b35",
447
+ description: "Combining conv, pooling, and fully connected layers"
448
+ },
449
+ {
450
+ id: "viz-filters",
451
+ title: "Visualizing CNNs",
452
+ icon: "🔍",
453
+ category: "Computer Vision",
454
+ color: "#ff6b35",
455
+ description: "What filters learn: edges → shapes → objects"
456
+ },
457
+ // Module 3: Advanced CNN Architectures
458
+ {
459
+ id: "lenet",
460
+ title: "LeNet-5",
461
+ icon: "🔢",
462
+ category: "CNN Architectures",
463
+ color: "#ff00ff",
464
+ description: "Classic digit recognizer (MNIST)"
465
+ },
466
+ {
467
+ id: "alexnet",
468
+ title: "AlexNet",
469
+ icon: "🌟",
470
+ category: "CNN Architectures",
471
+ color: "#ff00ff",
472
+ description: "The breakthrough in deep computer vision (2012)"
473
+ },
474
+ {
475
+ id: "vgg",
476
+ title: "VGGNet",
477
+ icon: "📊",
478
+ category: "CNN Architectures",
479
+ color: "#ff00ff",
480
+ description: "VGG-16/19: Deep networks with small filters"
481
+ },
482
+ {
483
+ id: "resnet",
484
+ title: "ResNet",
485
+ icon: "🌉",
486
+ category: "CNN Architectures",
487
+ color: "#ff00ff",
488
+ description: "Skip connections, solving vanishing gradients"
489
+ },
490
+ {
491
+ id: "inception",
492
+ title: "InceptionNet (GoogLeNet)",
493
+ icon: "🎯",
494
+ category: "CNN Architectures",
495
+ color: "#ff00ff",
496
+ description: "1x1 convolutions, multi-scale feature extraction"
497
+ },
498
+ {
499
+ id: "mobilenet",
500
+ title: "MobileNet",
501
+ icon: "📱",
502
+ category: "CNN Architectures",
503
+ color: "#ff00ff",
504
+ description: "Depth-wise separable convolutions for efficiency"
505
+ },
506
+ {
507
+ id: "transfer-learning",
508
+ title: "Transfer Learning",
509
+ icon: "🔄",
510
+ category: "CNN Architectures",
511
+ color: "#ff00ff",
512
+ description: "Fine-tuning and leveraging pre-trained models"
513
+ },
514
+ // Module 4: Object Detection & Segmentation
515
+ {
516
+ id: "localization",
517
+ title: "Object Localization",
518
+ icon: "📍",
519
+ category: "Detection",
520
+ color: "#00ff00",
521
+ description: "Bounding boxes and classification together"
522
+ },
523
+ {
524
+ id: "rcnn",
525
+ title: "R-CNN Family",
526
+ icon: "🎯",
527
+ category: "Detection",
528
+ color: "#00ff00",
529
+ description: "R-CNN, Fast R-CNN, Faster R-CNN"
530
+ },
531
+ {
532
+ id: "yolo",
533
+ title: "YOLO",
534
+ icon: "⚡",
535
+ category: "Detection",
536
+ color: "#00ff00",
537
+ description: "Real-time object detection (v3, v5, v8)"
538
+ },
539
+ {
540
+ id: "ssd",
541
+ title: "SSD",
542
+ icon: "🚀",
543
+ category: "Detection",
544
+ color: "#00ff00",
545
+ description: "Single Shot MultiBox Detector"
546
+ },
547
+ {
548
+ id: "semantic-seg",
549
+ title: "Semantic Segmentation",
550
+ icon: "🖌️",
551
+ category: "Segmentation",
552
+ color: "#00ff00",
553
+ description: "Pixel-level classification (U-Net)"
554
+ },
555
+ {
556
+ id: "instance-seg",
557
+ title: "Instance Segmentation",
558
+ icon: "👥",
559
+ category: "Segmentation",
560
+ color: "#00ff00",
561
+ description: "Mask R-CNN and separate object instances"
562
+ },
563
+ {
564
+ id: "face-recog",
565
+ title: "Face Recognition",
566
+ icon: "👤",
567
+ category: "Segmentation",
568
+ color: "#00ff00",
569
+ description: "Siamese networks and triplet loss"
570
+ },
571
+ // Module 5: Generative Models
572
+ {
573
+ id: "autoencoders",
574
+ title: "Autoencoders",
575
+ icon: "🔀",
576
+ category: "Generative",
577
+ color: "#ffaa00",
578
+ description: "Encoder-decoder, latent space, denoising"
579
+ },
580
+ {
581
+ id: "gans",
582
+ title: "GANs (Generative Adversarial Networks)",
583
+ icon: "🎮",
584
+ category: "Generative",
585
+ color: "#ffaa00",
586
+ description: "Generator vs. Discriminator, DCGAN"
587
+ },
588
+ {
589
+ id: "diffusion",
590
+ title: "Diffusion Models",
591
+ icon: "🌊",
592
+ category: "Generative",
593
+ color: "#ffaa00",
594
+ description: "Foundation of Stable Diffusion and DALL-E"
595
+ },
596
+ // Additional Advanced Topics
597
+ {
598
+ id: "rnn",
599
+ title: "RNNs & LSTMs",
600
+ icon: "🔄",
601
+ category: "Sequence",
602
+ color: "#ff6b35",
603
+ description: "Recurrent networks for sequential data"
604
+ },
605
+ {
606
+ id: "transformers",
607
+ title: "Transformers",
608
+ icon: "🔗",
609
+ category: "Sequence",
610
+ color: "#ff6b35",
611
+ description: "Attention mechanisms and modern architectures"
612
+ },
613
+ {
614
+ id: "bert",
615
+ title: "BERT & NLP Transformers",
616
+ icon: "📚",
617
+ category: "NLP",
618
+ color: "#ff6b35",
619
+ description: "Bidirectional transformers for language"
620
+ },
621
+ {
622
+ id: "gpt",
623
+ title: "GPT & Language Models",
624
+ icon: "💬",
625
+ category: "NLP",
626
+ color: "#ff6b35",
627
+ description: "Autoregressive models and text generation"
628
+ },
629
+ {
630
+ id: "vit",
631
+ title: "Vision Transformers (ViT)",
632
+ icon: "🎨",
633
+ category: "Vision",
634
+ color: "#ff6b35",
635
+ description: "Transformers applied to image data"
636
+ }
637
+ ];
638
+
639
+ function createModuleHTML(module) {
640
+ return `
641
+ <div class="module" id="${module.id}-module">
642
+ <button class="btn-back" onclick="switchTo('dashboard')">← Back to Dashboard</button>
643
+ <header>
644
+ <h1>${module.icon} ${module.title}</h1>
645
+ <p class="subtitle">${module.description}</p>
646
+ </header>
647
+
648
+ <div class="tabs">
649
+ <button class="tab-btn active" onclick="switchTab(event, '${module.id}-overview')">Overview</button>
650
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-concepts')">Key Concepts</button>
651
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-math')">Math</button>
652
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-applications')">Applications</button>
653
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-summary')">Summary</button>
654
+ </div>
655
+
656
+ <div id="${module.id}-overview" class="tab active">
657
+ <div class="section">
658
+ <h2>📖 Overview</h2>
659
+ <p>Complete coverage of ${module.title.toLowerCase()}. Learn the fundamentals, mathematics, real-world applications, and implementation details.</p>
660
+ <div class="info-box">
661
+ <div class="box-title">Learning Objectives</div>
662
+ <div class="box-content">
663
+ ✓ Understand core concepts and theory<br>
664
+ ✓ Master mathematical foundations<br>
665
+ ✓ Learn practical applications<br>
666
+ ✓ Implement and experiment
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </div>
671
+
672
+ <div id="${module.id}-concepts" class="tab">
673
+ <div class="section">
674
+ <h2>🎯 Key Concepts</h2>
675
+ <p>Fundamental concepts and building blocks for ${module.title.toLowerCase()}.</p>
676
+ <div class="callout insight">
677
+ <div class="callout-title">💡 Main Ideas</div>
678
+ This section covers the core ideas you need to understand before diving into mathematics.
679
+ </div>
680
+ </div>
681
+ </div>
682
+
683
+ <div id="${module.id}-math" class="tab">
684
+ <div class="section">
685
+ <h2>📐 Mathematical Foundation</h2>
686
+ <p>Rigorous mathematical treatment of ${module.title.toLowerCase()}.</p>
687
+ <div class="formula">
688
+ Mathematical formulas and derivations go here
689
+ </div>
690
+ </div>
691
+ </div>
692
+
693
+ <div id="${module.id}-applications" class="tab">
694
+ <div class="section">
695
+ <h2>🌍 Real-World Applications</h2>
696
+ <p>How ${module.title.toLowerCase()} is used in practice across different industries.</p>
697
+ <div class="info-box">
698
+ <div class="box-title">Use Cases</div>
699
+ <div class="box-content">
700
+ Common applications and practical examples
701
+ </div>
702
+ </div>
703
+ </div>
704
+ </div>
705
+
706
+ <div id="${module.id}-summary" class="tab">
707
+ <div class="section">
708
+ <h2>✅ Summary</h2>
709
+ <div class="info-box">
710
+ <div class="box-title">Key Takeaways</div>
711
+ <div class="box-content">
712
+ ✓ Essential concepts covered<br>
713
+ ✓ Mathematical foundations understood<br>
714
+ ✓ Real-world applications identified<br>
715
+ ✓ Ready for implementation
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ `;
722
+ }
723
+
724
+ function initDashboard() {
725
+ const grid = document.getElementById("modulesGrid");
726
+ const container = document.getElementById("modulesContainer");
727
+
728
+ modules.forEach(module => {
729
+ const card = document.createElement("div");
730
+ card.className = "card";
731
+ card.style.borderColor = module.color;
732
+ card.onclick = () => switchTo(module.id + "-module");
733
+ card.innerHTML = `
734
+ <div class="card-icon">${module.icon}</div>
735
+ <h3>${module.title}</h3>
736
+ <p>${module.description}</p>
737
+ <span class="category-label">${module.category}</span>
738
+ `;
739
+ grid.appendChild(card);
740
+
741
+ const moduleHTML = createModuleHTML(module);
742
+ container.innerHTML += moduleHTML;
743
+ });
744
+ }
745
+
746
+ function switchTo(target) {
747
+ document.querySelectorAll('.dashboard, .module').forEach(el => {
748
+ el.classList.remove('active');
749
+ });
750
+ const elem = document.getElementById(target);
751
+ if (elem) elem.classList.add('active');
752
+ }
753
+
754
+ function switchTab(e, tabId) {
755
+ const module = e.target.closest('.module');
756
+ if (!module) return;
757
+
758
+ module.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
759
+ module.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
760
+
761
+ const tab = document.getElementById(tabId);
762
+ if (tab) tab.classList.add('active');
763
+ e.target.classList.add('active');
764
+ }
765
+
766
+ initDashboard();
767
+ </script>
768
+ </body>
769
+ </html>