ABC/class8.html at main · AFJAL23/ABC · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Class 8 Educational Platform</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f9faff;
      margin: 0;
      padding: 20px;
      text-align: center;
      color: #333;
    }
    h1, h2 {
      color: #444;
    }
    .grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }
    .card {
      background: #fff;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
      width: 250px;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .hidden {
      display: none;
    }
    .back-btn {
      margin-top: 20px;
      background: #0066cc;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .back-btn:hover {
      background: #004b99;
    }
    a {
      text-decoration: none;
      color: #0066cc;
      font-weight: bold;
    }
    a:hover {
      color: #004b99;
    }
  </style>
</head>
<body>

  <h1>Class 8 - Educational Platform</h1>

  <!-- Subject Section -->
  <div id="subject-section" class="grid">
    <div class="card" onclick="showChapters('science')">Science</div>
    <div class="card" onclick="showChapters('math')">Math</div>
    <div class="card" onclick="showChapters('sst')">Social Studies</div>
  </div>

  <!-- Chapter Section -->
  <div id="chapter-section" class="hidden">
    <h2 id="chapter-title"></h2>
    <div id="chapter-list" class="grid"></div>
    <button class="back-btn" onclick="goBackToSubjects()">Back to Subjects</button>
  </div>

  <!-- Script to Handle Navigation -->
  <script>
    const chapters = {
      science: {
        title: "Science Chapters",
        items: {
          "Crop Production and Management": "#",
          "Microorganisms: Friend and Foe": "https://youtu.be/GHxgSxg7x1I?si=du0p3NV2ah012MbO",
          "Synthetic Fibres and Plastics": "#",
          "Materials: Metals and Non-Metals": "#",
          "Coal and Petroleum": "#",
          "Combustion and Flame": "#",
          "Conservation of Plants and Animals": "#",
          "Cell – Structure and Functions": "#",
          "Reproduction in Animals": "#"
        }
      },
      math: {
        title: "Math Chapters",
        items: {
          "Rational Numbers": "#",
          "Linear Equations in One Variable": "#",
          "Understanding Quadrilaterals": "#",
          "Practical Geometry": "#",
          "Data Handling": "#",
          "Squares and Square Roots": "#",
          "Cubes and Cube Roots": "#",
          "Comparing Quantities": "#"
        }
      },
      sst: {
        title: "Social Studies Chapters",
        items: {
          "How, When and Where": "#",
          "From Trade to Territory": "#",
          "Ruling the Countryside": "#",
          "Tribals, Dikus, and the Vision of a Golden Age": "#",
          "When People Rebel": "#",
          "Colonialism and the City": "#",
          "Weavers, Iron Smelters, and Factory Owners": "#"
        }
      }
    };

    function showChapters(subject) {
      const subjectData = chapters[subject];
      document.getElementById('subject-section').classList.add('hidden');
      document.getElementById('chapter-section').classList.remove('hidden');
      document.getElementById('chapter-title').textContent = subjectData.title;
      const chapterList = document.getElementById('chapter-list');
      chapterList.innerHTML = '';

      Object.entries(subjectData.items).forEach(([chapter, link]) => {
        const chapterCard = document.createElement('div');
        chapterCard.classList.add('card');
        chapterCard.textContent = chapter;
        chapterCard.onclick = () => {
          if (link !== "#") {
            window.open(link, '_blank');
          } else {
            alert("Resource not yet available!");
          }
        };
        chapterList.appendChild(chapterCard);
      });
    }

    function goBackToSubjects() {
      document.getElementById('subject-section').classList.remove('hidden');
      document.getElementById('chapter-section').classList.add('hidden');
    }
  </script>

</body>
</html>