Hugging Face's logo

Spaces:
Baruka6
/
tom-svolt
Running

App Files Community
Baruka6 commited on
Commit
505f883
·
verified ·
1 Parent(s): 248965e

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +39 -624
  2. prompts.txt +3 -1
index.html CHANGED
@@ -1,627 +1,42 @@
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>ElectroLearn - Electrical Engineering Portal</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .circuit-bg {
11
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10,10 L90,10 L90,90 L10,90 Z" fill="none" stroke="rgba(59, 130, 246, 0.1)" stroke-width="1"/><circle cx="30" cy="30" r="5" fill="rgba(59, 130, 246, 0.1)"/><circle cx="70" cy="30" r="5" fill="rgba(59, 130, 246, 0.1)"/><circle cx="30" cy="70" r="5" fill="rgba(59, 130, 246, 0.1)"/><circle cx="70" cy="70" r="5" fill="rgba(59, 130, 246, 0.1)"/></svg>');
12
- background-size: 100px 100px;
13
- }
14
-
15
- .simulator-container {
16
- perspective: 1000px;
17
- }
18
-
19
- .simulator-card {
20
- transform-style: preserve-3d;
21
- transition: transform 0.5s;
22
- }
23
-
24
- .simulator-card:hover {
25
- transform: rotateY(10deg);
26
- }
27
-
28
- .formula-card {
29
- background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
30
- }
31
-
32
- .calculator-input {
33
- transition: all 0.3s;
34
- }
35
-
36
- .calculator-input:focus {
37
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
38
- }
39
-
40
- .tab-content {
41
- display: none;
42
- }
43
-
44
- .tab-content.active {
45
- display: block;
46
- animation: fadeIn 0.5s;
47
- }
48
-
49
- @keyframes fadeIn {
50
- from { opacity: 0; }
51
- to { opacity: 1; }
52
- }
53
-
54
- .circuit-diagram {
55
- stroke: #3b82f6;
56
- stroke-width: 2;
57
- fill: none;
58
- }
59
-
60
- .resistor {
61
- stroke: #f59e0b;
62
- }
63
-
64
- .capacitor {
65
- stroke: #10b981;
66
- }
67
-
68
- .inductor {
69
- stroke: #8b5cf6;
70
- }
71
  </style>
72
- </head>
73
- <body class="bg-gray-50 circuit-bg">
74
- <!-- Header -->
75
- <header class="bg-blue-600 text-white shadow-lg">
76
- <div class="container mx-auto px-4 py-6">
77
- <div class="flex flex-col md:flex-row justify-between items-center">
78
- <div class="flex items-center mb-4 md:mb-0">
79
- <i class="fas fa-bolt text-3xl mr-3"></i>
80
- <h1 class="text-2xl font-bold">ElectroLearn</h1>
81
- </div>
82
- <nav class="flex space-x-1 md:space-x-6">
83
- <a href="#home" class="px-3 py-2 rounded hover:bg-blue-700 transition">Home</a>
84
- <a href="#courses" class="px-3 py-2 rounded hover:bg-blue-700 transition">Courses</a>
85
- <a href="#simulators" class="px-3 py-2 rounded hover:bg-blue-700 transition">Simulators</a>
86
- <a href="#resources" class="px-3 py-2 rounded hover:bg-blue-700 transition">Resources</a>
87
- <a href="#community" class="px-3 py-2 rounded hover:bg-blue-700 transition">Community</a>
88
- </nav>
89
- </div>
90
- </div>
91
- </header>
92
-
93
- <!-- Hero Section -->
94
- <section id="home" class="py-16 bg-gradient-to-r from-blue-500 to-indigo-600 text-white">
95
- <div class="container mx-auto px-4">
96
- <div class="flex flex-col md:flex-row items-center">
97
- <div class="md:w-1/2 mb-8 md:mb-0">
98
- <h2 class="text-4xl md:text-5xl font-bold mb-4">Master Electrical Engineering</h2>
99
- <p class="text-xl mb-6">Interactive learning platform with courses, simulators, and tools designed for electrical engineering students.</p>
100
- <div class="flex space-x-4">
101
- <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Start Learning</button>
102
- <button class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">Explore Courses</button>
103
- </div>
104
- </div>
105
- <div class="md:w-1/2">
106
- <div class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm">
107
- <svg viewBox="0 0 300 200" class="w-full h-auto">
108
- <!-- Battery -->
109
- <rect x="20" y="80" width="40" height="40" rx="2" fill="#4b5563" />
110
- <rect x="60" y="90" width="10" height="20" fill="#4b5563" />
111
- <text x="40" y="70" text-anchor="middle" fill="white" font-size="12">9V</text>
112
-
113
- <!-- Resistor -->
114
- <path class="resistor" d="M100,100 L120,80 L140,120 L160,80 L180,120 L200,100" />
115
- <text x="150" y="60" text-anchor="middle" fill="white" font-size="12">R = 1kΩ</text>
116
-
117
- <!-- LED -->
118
- <path d="M220,100 L240,100" stroke="#3b82f6" stroke-width="2" />
119
- <polygon points="240,90 260,100 240,110" fill="#ef4444" stroke="#ef4444" stroke-width="2" />
120
- <text x="250" y="80" text-anchor="middle" fill="white" font-size="12">LED</text>
121
- </svg>
122
- </div>
123
- </div>
124
- </div>
125
- </div>
126
- </section>
127
-
128
- <!-- Courses Section -->
129
- <section id="courses" class="py-16 bg-white">
130
- <div class="container mx-auto px-4">
131
- <h2 class="text-3xl font-bold text-center mb-12">Featured Courses</h2>
132
-
133
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
134
- <!-- Course Card 1 -->
135
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
136
- <div class="bg-blue-500 text-white p-4">
137
- <i class="fas fa-bolt text-2xl"></i>
138
- <h3 class="text-xl font-semibold mt-2">Circuit Analysis</h3>
139
- </div>
140
- <div class="p-6">
141
- <p class="text-gray-600 mb-4">Master DC and AC circuit analysis techniques including Kirchhoff's laws, Thevenin's theorem, and more.</p>
142
- <div class="flex justify-between items-center">
143
- <div class="flex space-x-2">
144
- <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Beginner</span>
145
- <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">12 Modules</span>
146
- </div>
147
- <button class="text-blue-600 hover:text-blue-800">
148
- <i class="fas fa-arrow-right"></i>
149
- </button>
150
- </div>
151
- </div>
152
- </div>
153
-
154
- <!-- Course Card 2 -->
155
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
156
- <div class="bg-purple-500 text-white p-4">
157
- <i class="fas fa-microchip text-2xl"></i>
158
- <h3 class="text-xl font-semibold mt-2">Electronics Fundamentals</h3>
159
- </div>
160
- <div class="p-6">
161
- <p class="text-gray-600 mb-4">Learn about diodes, transistors, amplifiers, and digital logic circuits with practical examples.</p>
162
- <div class="flex justify-between items-center">
163
- <div class="flex space-x-2">
164
- <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Intermediate</span>
165
- <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">18 Modules</span>
166
- </div>
167
- <button class="text-purple-600 hover:text-purple-800">
168
- <i class="fas fa-arrow-right"></i>
169
- </button>
170
- </div>
171
- </div>
172
- </div>
173
-
174
- <!-- Course Card 3 -->
175
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
176
- <div class="bg-green-500 text-white p-4">
177
- <i class="fas fa-charging-station text-2xl"></i>
178
- <h3 class="text-xl font-semibold mt-2">Power Systems</h3>
179
- </div>
180
- <div class="p-6">
181
- <p class="text-gray-600 mb-4">Explore generation, transmission, and distribution of electric power with modern grid technologies.</p>
182
- <div class="flex justify-between items-center">
183
- <div class="flex space-x-2">
184
- <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Advanced</span>
185
- <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">15 Modules</span>
186
- </div>
187
- <button class="text-green-600 hover:text-green-800">
188
- <i class="fas fa-arrow-right"></i>
189
- </button>
190
- </div>
191
- </div>
192
- </div>
193
- </div>
194
-
195
- <div class="text-center mt-12">
196
- <button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
197
- View All Courses
198
- </button>
199
- </div>
200
- </div>
201
- </section>
202
-
203
- <!-- Interactive Simulators Section -->
204
- <section id="simulators" class="py-16 bg-gray-100">
205
- <div class="container mx-auto px-4">
206
- <h2 class="text-3xl font-bold text-center mb-12">Interactive Learning Tools</h2>
207
-
208
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
209
- <!-- Circuit Simulator -->
210
- <div class="simulator-container">
211
- <div class="simulator-card bg-white rounded-xl shadow-lg p-6 h-full">
212
- <div class="flex items-center mb-4">
213
- <i class="fas fa-project-diagram text-blue-500 text-2xl mr-3"></i>
214
- <h3 class="text-xl font-semibold">Circuit Simulator</h3>
215
- </div>
216
-
217
- <div class="mb-6">
218
- <div class="flex space-x-2 mb-4">
219
- <button class="bg-blue-100 text-blue-800 px-3 py-1 rounded text-sm">Resistor</button>
220
- <button class="bg-green-100 text-green-800 px-3 py-1 rounded text-sm">Capacitor</button>
221
- <button class="bg-purple-100 text-purple-800 px-3 py-1 rounded text-sm">Inductor</button>
222
- <button class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded text-sm">Battery</button>
223
- </div>
224
-
225
- <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 h-64 flex items-center justify-center">
226
- <svg viewBox="0 0 300 150" class="w-full h-full">
227
- <!-- Sample circuit -->
228
- <path class="circuit-diagram" d="M50,75 L100,75" />
229
- <path class="circuit-diagram resistor" d="M100,65 L120,85 L140,65 L160,85" />
230
- <path class="circuit-diagram" d="M160,75 L210,75" />
231
- <path class="circuit-diagram" d="M210,75 L210,125" />
232
- <path class="circuit-diagram capacitor" d="M210,125 L220,125 M215,120 L215,130" />
233
- <path class="circuit-diagram" d="M220,125 L220,75" />
234
- <path class="circuit-diagram" d="M220,75 L270,75" />
235
-
236
- <!-- Voltage source -->
237
- <circle cx="50" cy="75" r="15" stroke="#3b82f6" stroke-width="2" fill="none" />
238
- <text x="50" y="75" text-anchor="middle" dominant-baseline="middle" font-size="12">V</text>
239
- </svg>
240
- </div>
241
- </div>
242
-
243
- <div class="flex justify-between">
244
- <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
245
- Simulate
246
- </button>
247
- <button class="border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50 transition">
248
- Reset
249
- </button>
250
- </div>
251
- </div>
252
- </div>
253
-
254
- <!-- Ohm's Law Calculator -->
255
- <div class="simulator-container">
256
- <div class="simulator-card bg-white rounded-xl shadow-lg p-6 h-full">
257
- <div class="flex items-center mb-4">
258
- <i class="fas fa-calculator text-green-500 text-2xl mr-3"></i>
259
- <h3 class="text-xl font-semibold">Ohm's Law Calculator</h3>
260
- </div>
261
-
262
- <div class="mb-6">
263
- <div class="formula-card p-4 rounded-lg mb-4">
264
- <p class="text-center text-lg font-mono">V = I × R</p>
265
- </div>
266
-
267
- <div class="space-y-4">
268
- <div>
269
- <label class="block text-sm font-medium text-gray-700 mb-1">Voltage (V)</label>
270
- <input type="number" class="calculator-input w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
271
- </div>
272
- <div>
273
- <label class="block text-sm font-medium text-gray-700 mb-1">Current (I)</label>
274
- <input type="number" class="calculator-input w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
275
- </div>
276
- <div>
277
- <label class="block text-sm font-medium text-gray-700 mb-1">Resistance (R)</label>
278
- <input type="number" class="calculator-input w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
279
- </div>
280
- </div>
281
- </div>
282
-
283
- <button class="w-full bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">
284
- Calculate
285
- </button>
286
- </div>
287
- </div>
288
- </div>
289
- </div>
290
- </section>
291
-
292
- <!-- Resources Section -->
293
- <section id="resources" class="py-16 bg-white">
294
- <div class="container mx-auto px-4">
295
- <h2 class="text-3xl font-bold text-center mb-12">Learning Resources</h2>
296
-
297
- <div class="flex flex-col md:flex-row mb-8">
298
- <div class="md:w-1/4 mb-4 md:mb-0">
299
- <div class="flex space-x-2 overflow-x-auto md:flex-col md:space-x-0 md:space-y-2">
300
- <button class="resource-tab active px-4 py-2 bg-blue-600 text-white rounded" data-tab="formulas">Formulas</button>
301
- <button class="resource-tab px-4 py-2 bg-gray-200 rounded hover:bg-gray-300" data-tab="tables">Reference Tables</button>
302
- <button class="resource-tab px-4 py-2 bg-gray-200 rounded hover:bg-gray-300" data-tab="symbols">Circuit Symbols</button>
303
- <button class="resource-tab px-4 py-2 bg-gray-200 rounded hover:bg-gray-300" data-tab="conversions">Unit Conversions</button>
304
- </div>
305
- </div>
306
-
307
- <div class="md:w-3/4 md:pl-8">
308
- <!-- Formulas Tab -->
309
- <div id="formulas" class="tab-content active">
310
- <h3 class="text-xl font-semibold mb-4">Essential Electrical Formulas</h3>
311
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
312
- <div class="bg-gray-50 p-4 rounded-lg">
313
- <h4 class="font-medium text-blue-600 mb-2">Ohm's Law</h4>
314
- <p class="font-mono text-lg">V = I × R</p>
315
- <p class="text-sm text-gray-600 mt-1">V = Voltage (V), I = Current (A), R = Resistance (Ω)</p>
316
- </div>
317
- <div class="bg-gray-50 p-4 rounded-lg">
318
- <h4 class="font-medium text-blue-600 mb-2">Power</h4>
319
- <p class="font-mono text-lg">P = V × I = I² × R = V² / R</p>
320
- <p class="text-sm text-gray-600 mt-1">P = Power (W)</p>
321
- </div>
322
- <div class="bg-gray-50 p-4 rounded-lg">
323
- <h4 class="font-medium text-blue-600 mb-2">Capacitance</h4>
324
- <p class="font-mono text-lg">Q = C × V</p>
325
- <p class="text-sm text-gray-600 mt-1">Q = Charge (C), C = Capacitance (F)</p>
326
- </div>
327
- <div class="bg-gray-50 p-4 rounded-lg">
328
- <h4 class="font-medium text-blue-600 mb-2">Inductive Reactance</h4>
329
- <p class="font-mono text-lg">X<sub>L</sub> = 2πfL</p>
330
- <p class="text-sm text-gray-600 mt-1">X<sub>L</sub> = Reactance (Ω), f = Frequency (Hz), L = Inductance (H)</p>
331
- </div>
332
- </div>
333
- </div>
334
-
335
- <!-- Tables Tab -->
336
- <div id="tables" class="tab-content">
337
- <h3 class="text-xl font-semibold mb-4">Reference Tables</h3>
338
- <div class="overflow-x-auto">
339
- <table class="min-w-full bg-white border border-gray-200">
340
- <thead class="bg-gray-100">
341
- <tr>
342
- <th class="py-2 px-4 border-b">Material</th>
343
- <th class="py-2 px-4 border-b">Resistivity (Ω·m)</th>
344
- <th class="py-2 px-4 border-b">Temperature Coefficient</th>
345
- </tr>
346
- </thead>
347
- <tbody>
348
- <tr>
349
- <td class="py-2 px-4 border-b">Silver</td>
350
- <td class="py-2 px-4 border-b">1.59×10<sup>-8</sup></td>
351
- <td class="py-2 px-4 border-b">0.0038</td>
352
- </tr>
353
- <tr>
354
- <td class="py-2 px-4 border-b">Copper</td>
355
- <td class="py-2 px-4 border-b">1.68×10<sup>-8</sup></td>
356
- <td class="py-2 px-4 border-b">0.0039</td>
357
- </tr>
358
- <tr>
359
- <td class="py-2 px-4 border-b">Gold</td>
360
- <td class="py-2 px-4 border-b">2.44×10<sup>-8</sup></td>
361
- <td class="py-2 px-4 border-b">0.0034</td>
362
- </tr>
363
- <tr>
364
- <td class="py-2 px-4 border-b">Aluminum</td>
365
- <td class="py-2 px-4 border-b">2.82×10<sup>-8</sup></td>
366
- <td class="py-2 px-4 border-b">0.0039</td>
367
- </tr>
368
- </tbody>
369
- </table>
370
- </div>
371
- </div>
372
-
373
- <!-- Symbols Tab -->
374
- <div id="symbols" class="tab-content">
375
- <h3 class="text-xl font-semibold mb-4">Common Circuit Symbols</h3>
376
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
377
- <div class="text-center">
378
- <svg viewBox="0 0 100 60" class="w-full h-16 mx-auto">
379
- <path d="M20,30 L80,30" stroke="#3b82f6" stroke-width="3" />
380
- </svg>
381
- <p class="mt-2">Wire</p>
382
- </div>
383
- <div class="text-center">
384
- <svg viewBox="0 0 100 60" class="w-full h-16 mx-auto">
385
- <path d="M20,30 L40,30" stroke="#3b82f6" stroke-width="3" />
386
- <path d="M40,20 L60,20 M40,40 L60,40 M50,20 L50,40" stroke="#f59e0b" stroke-width="3" />
387
- <path d="M60,30 L80,30" stroke="#3b82f6" stroke-width="3" />
388
- </svg>
389
- <p class="mt-2">Resistor</p>
390
- </div>
391
- <div class="text-center">
392
- <svg viewBox="0 0 100 60" class="w-full h-16 mx-auto">
393
- <path d="M20,30 L40,30" stroke="#3b82f6" stroke-width="3" />
394
- <path d="M40,20 L60,20 M40,40 L60,40" stroke="#10b981" stroke-width="3" />
395
- <path d="M60,30 L80,30" stroke="#3b82f6" stroke-width="3" />
396
- </svg>
397
- <p class="mt-2">Capacitor</p>
398
- </div>
399
- <div class="text-center">
400
- <svg viewBox="0 0 100 60" class="w-full h-16 mx-auto">
401
- <path d="M20,30 L40,30" stroke="#3b82f6" stroke-width="3" />
402
- <path d="M40,20 Q50,30 60,20 Q70,30 80,20" stroke="#8b5cf6" stroke-width="3" fill="none" />
403
- <path d="M60,30 L80,30" stroke="#3b82f6" stroke-width="3" />
404
- </svg>
405
- <p class="mt-2">Inductor</p>
406
- </div>
407
- </div>
408
- </div>
409
-
410
- <!-- Conversions Tab -->
411
- <div id="conversions" class="tab-content">
412
- <h3 class="text-xl font-semibold mb-4">Unit Conversions</h3>
413
- <div class="space-y-4">
414
- <div class="flex items-center">
415
- <input type="number" class="calculator-input w-24 px-3 py-2 border border-gray-300 rounded-md" value="1">
416
- <select class="ml-2 px-3 py-2 border border-gray-300 rounded-md">
417
- <option>Volt (V)</option>
418
- <option>Millivolt (mV)</option>
419
- <option>Kilovolt (kV)</option>
420
- </select>
421
- <span class="mx-4">=</span>
422
- <input type="number" class="calculator-input w-24 px-3 py-2 border border-gray-300 rounded-md" value="1000">
423
- <select class="ml-2 px-3 py-2 border border-gray-300 rounded-md">
424
- <option>Millivolt (mV)</option>
425
- <option>Volt (V)</option>
426
- <option>Kilovolt (kV)</option>
427
- </select>
428
- </div>
429
- <div class="flex items-center">
430
- <input type="number" class="calculator-input w-24 px-3 py-2 border border-gray-300 rounded-md" value="1">
431
- <select class="ml-2 px-3 py-2 border border-gray-300 rounded-md">
432
- <option>Ampere (A)</option>
433
- <option>Milliampere (mA)</option>
434
- <option>Microampere (μA)</option>
435
- </select>
436
- <span class="mx-4">=</span>
437
- <input type="number" class="calculator-input w-24 px-3 py-2 border border-gray-300 rounded-md" value="1000">
438
- <select class="ml-2 px-3 py-2 border border-gray-300 rounded-md">
439
- <option>Milliampere (mA)</option>
440
- <option>Ampere (A)</option>
441
- <option>Microampere (μA)</option>
442
- </select>
443
- </div>
444
- </div>
445
- </div>
446
- </div>
447
- </div>
448
- </div>
449
- </section>
450
-
451
- <!-- Community Section -->
452
- <section id="community" class="py-16 bg-gray-100">
453
- <div class="container mx-auto px-4">
454
- <h2 class="text-3xl font-bold text-center mb-12">Join Our Community</h2>
455
-
456
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
457
- <div class="bg-white p-6 rounded-xl shadow-md">
458
- <div class="text-blue-500 text-4xl mb-4">
459
- <i class="fas fa-comments"></i>
460
- </div>
461
- <h3 class="text-xl font-semibold mb-2">Discussion Forums</h3>
462
- <p class="text-gray-600 mb-4">Ask questions, share knowledge, and collaborate with fellow students and professionals.</p>
463
- <button class="text-blue-600 font-medium hover:text-blue-800">Join Discussions →</button>
464
- </div>
465
-
466
- <div class="bg-white p-6 rounded-xl shadow-md">
467
- <div class="text-green-500 text-4xl mb-4">
468
- <i class="fas fa-chalkboard-teacher"></i>
469
- </div>
470
- <h3 class="text-xl font-semibold mb-2">Live Q&A Sessions</h3>
471
- <p class="text-gray-600 mb-4">Weekly live sessions with professors and industry experts to clarify your doubts.</p>
472
- <button class="text-green-600 font-medium hover:text-green-800">View Schedule →</button>
473
- </div>
474
-
475
- <div class="bg-white p-6 rounded-xl shadow-md">
476
- <div class="text-purple-500 text-4xl mb-4">
477
- <i class="fas fa-users"></i>
478
- </div>
479
- <h3 class="text-xl font-semibold mb-2">Study Groups</h3>
480
- <p class="text-gray-600 mb-4">Form or join study groups to prepare for exams and work on projects together.</p>
481
- <button class="text-purple-600 font-medium hover:text-purple-800">Find Groups →</button>
482
- </div>
483
- </div>
484
- </div>
485
- </section>
486
-
487
- <!-- Footer -->
488
- <footer class="bg-gray-800 text-white py-12">
489
- <div class="container mx-auto px-4">
490
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
491
- <div>
492
- <h3 class="text-xl font-bold mb-4 flex items-center">
493
- <i class="fas fa-bolt mr-2"></i> ElectroLearn
494
- </h3>
495
- <p class="text-gray-400">Your comprehensive learning platform for electrical engineering concepts and applications.</p>
496
- </div>
497
-
498
- <div>
499
- <h4 class="font-semibold mb-4">Quick Links</h4>
500
- <ul class="space-y-2">
501
- <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
502
- <li><a href="#" class="text-gray-400 hover:text-white">Courses</a></li>
503
- <li><a href="#" class="text-gray-400 hover:text-white">Simulators</a></li>
504
- <li><a href="#" class="text-gray-400 hover:text-white">Resources</a></li>
505
- </ul>
506
- </div>
507
-
508
- <div>
509
- <h4 class="font-semibold mb-4">Support</h4>
510
- <ul class="space-y-2">
511
- <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
512
- <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
513
- <li><a href="#" class="text-gray-400 hover:text-white">Feedback</a></li>
514
- <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
515
- </ul>
516
- </div>
517
-
518
- <div>
519
- <h4 class="font-semibold mb-4">Connect With Us</h4>
520
- <div class="flex space-x-4 mb-4">
521
- <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
522
- <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
523
- <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a>
524
- <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-youtube"></i></a>
525
- </div>
526
- <p class="text-gray-400">Subscribe to our newsletter for updates</p>
527
- <div class="mt-2 flex">
528
- <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-700 text-white rounded-l focus:outline-none">
529
- <button class="bg-blue-600 px-4 py-2 rounded-r hover:bg-blue-700">Subscribe</button>
530
- </div>
531
- </div>
532
- </div>
533
-
534
- <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
535
- <p>&copy; 2023 ElectroLearn. All rights reserved.</p>
536
- </div>
537
- </div>
538
- </footer>
539
-
540
- <script>
541
- // Tab switching functionality
542
- document.querySelectorAll('.resource-tab').forEach(tab => {
543
- tab.addEventListener('click', () => {
544
- // Remove active class from all tabs and content
545
- document.querySelectorAll('.resource-tab').forEach(t => t.classList.remove('active', 'bg-blue-600', 'text-white'));
546
- document.querySelectorAll('.resource-tab').forEach(t => t.classList.add('bg-gray-200', 'hover:bg-gray-300'));
547
- document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
548
-
549
- // Add active class to clicked tab and corresponding content
550
- tab.classList.add('active', 'bg-blue-600', 'text-white');
551
- tab.classList.remove('bg-gray-200', 'hover:bg-gray-300');
552
- const tabId = tab.getAttribute('data-tab');
553
- document.getElementById(tabId).classList.add('active');
554
- });
555
- });
556
-
557
- // Simple Ohm's Law calculator
558
- document.querySelectorAll('.calculator-input').forEach(input => {
559
- input.addEventListener('input', function() {
560
- const inputs = this.closest('.simulator-card').querySelectorAll('.calculator-input');
561
- const values = Array.from(inputs).map(i => parseFloat(i.value) || 0);
562
-
563
- // If two values are provided, calculate the third
564
- const filledValues = values.filter(v => v > 0);
565
- if (filledValues.length === 2) {
566
- if (this === inputs[0]) { // Voltage changed
567
- if (values[1] > 0) { // Current provided
568
- inputs[2].value = (values[0] / values[1]).toFixed(2);
569
- } else if (values[2] > 0) { // Resistance provided
570
- inputs[1].value = (values[0] / values[2]).toFixed(2);
571
- }
572
- } else if (this === inputs[1]) { // Current changed
573
- if (values[0] > 0) { // Voltage provided
574
- inputs[2].value = (values[0] / values[1]).toFixed(2);
575
- } else if (values[2] > 0) { // Resistance provided
576
- inputs[0].value = (values[1] * values[2]).toFixed(2);
577
- }
578
- } else if (this === inputs[2]) { // Resistance changed
579
- if (values[0] > 0) { // Voltage provided
580
- inputs[1].value = (values[0] / values[2]).toFixed(2);
581
- } else if (values[1] > 0) { // Current provided
582
- inputs[0].value = (values[1] * values[2]).toFixed(2);
583
- }
584
- }
585
- }
586
- });
587
- });
588
-
589
- // Unit conversion example
590
- document.querySelectorAll('#conversions select').forEach(select => {
591
- select.addEventListener('change', function() {
592
- const row = this.closest('.flex');
593
- const inputs = row.querySelectorAll('input');
594
- const selects = row.querySelectorAll('select');
595
-
596
- const value = parseFloat(inputs[0].value) || 0;
597
- const fromUnit = selects[0].value;
598
- const toUnit = selects[1].value;
599
-
600
- // Simple conversion examples
601
- let result = value;
602
- if (fromUnit.includes('Volt') && toUnit.includes('Millivolt')) {
603
- result = value * 1000;
604
- } else if (fromUnit.includes('Millivolt') && toUnit.includes('Volt')) {
605
- result = value / 1000;
606
- } else if (fromUnit.includes('Volt') && toUnit.includes('Kilovolt')) {
607
- result = value / 1000;
608
- } else if (fromUnit.includes('Kilovolt') && toUnit.includes('Volt')) {
609
- result = value * 1000;
610
- }
611
- // Similar for current units
612
- else if (fromUnit.includes('Ampere') && toUnit.includes('Milliampere')) {
613
- result = value * 1000;
614
- } else if (fromUnit.includes('Milliampere') && toUnit.includes('Ampere')) {
615
- result = value / 1000;
616
- } else if (fromUnit.includes('Ampere') && toUnit.includes('Microampere')) {
617
- result = value * 1000000;
618
- } else if (fromUnit.includes('Microampere') && toUnit.includes('Ampere')) {
619
- result = value / 1000000;
620
- }
621
-
622
- inputs[1].value = result;
623
- });
624
- });
625
- </script>
626
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Baruka6/tom-svolt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
627
- </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>My app</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <meta charset="utf-8">
 
 
7
  <style>
8
+ body {
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ overflow: hidden;
13
+ height: 100dvh;
14
+ font-family: "Arial", sans-serif;
15
+ text-align: center;
16
+ background-color: #fff;
17
+ }
18
+ .arrow {
19
+ position: absolute;
20
+ bottom: 32px;
21
+ left: 0px;
22
+ width: 100px;
23
+ transform: rotate(30deg);
24
+ }
25
+ h1 {
26
+ font-size: 50px;
27
+ }
28
+ h1 span {
29
+ color: #acacac;
30
+ font-size: 32px;
31
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  </style>
33
+ </head>
34
+ <body>
35
+ <h1>
36
+ <span>I'm ready to work,</span><br />
37
+ Ask me anything.
38
+ </h1>
39
+ <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
40
+ <script></script>
41
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Baruka6/tom-svolt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
42
+ </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
prompts.txt CHANGED
@@ -1,2 +1,4 @@
1
  can you build me a fps shooting game witha very cool graphics (3d) and make the controls friendly
2
- can you help build a website that can assist me in learning electrical enginerring student
 
 
 
1
  can you build me a fps shooting game witha very cool graphics (3d) and make the controls friendly
2
+ can you help build a website that can assist me in learning electrical enginerring student
3
+ now i need you to make the necesary things on th website like when you click on start learning it makes you create an account then ater creating an account you can eplore all corses under electrical add all coursess to it
4
+ can you update the website and collect answers for each course and make them visible on the website collect each answwerss on chatgpt or any ai and makee the simulator more realistic pls