-
Notifications
You must be signed in to change notification settings - Fork 0
/
index0.html
637 lines (594 loc) · 28.4 KB
/
index0.html
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ApproVideo Aug 2024</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<style>
:root {
--bg-light: #f0f4f8;
--text-light: #2d3748;
--card-bg-light: #ffffff;
--card-text-light: #4a5568;
--bg-dark: #1a202c;
--text-dark: #e2e8f0;
--card-bg-dark: #2d3748;
--card-text-dark: #e2e8f0;
}
body {
transition: background-color 0.3s, color 0.3s;
}
body.light {
background-color: var(--bg-light);
color: var(--text-light);
}
body.dark {
background-color: var(--bg-dark);
color: var(--text-dark);
}
.header {
background: linear-gradient(45deg, #4CAF50, #2196F3);
padding: 20px;
text-align: center;
color: white;
font-size: 2.5rem;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.subheader {
font-size: 1.2rem;
margin-top: 10px;
}
.video-card {
background-color: var(--card-bg-light);
color: var(--card-text-light);
transition: background-color 0.3s, color 0.3s;
}
body.dark .video-card {
background-color: var(--card-bg-dark);
color: var(--card-text-dark);
}
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
body.dark .theme-toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.panel-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.info-panel {
background-color: #f0f4f8;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.info-panel h3 {
color: #2c5282;
margin-bottom: 0.5rem;
}
.info-panel p {
color: #4a5568;
font-size: 0.9rem;
line-height: 1.4;
}
body.dark .info-panel {
background-color: #2d3748;
}
body.dark .info-panel h3 {
color: #90cdf4;
}
body.dark .info-panel p {
color: #e2e8f0;
}
</style>
</head>
<body>
<button id="theme-toggle" class="theme-toggle text-2xl">
<i class="fas fa-sun" id="theme-toggle-light-icon"></i>
<i class="fas fa-moon hidden" id="theme-toggle-dark-icon"></i>
</button>
<div class="header">
ApproVideo
<div class="subheader">Appropriate Technology Videos for the DIY Sector</div>
</div>
<div class="p-4 sm:ml-64 mt-4">
<div class="mb-4 flex justify-center space-x-4">
<a href="#" class="category-link flex items-center p-2 text-base font-normal rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700" data-category="Drinking Water">
<i class="fas fa-tint w-6 h-6 text-blue-500"></i>
<span class="ml-3">Drinking Water</span>
</a>
<a href="#" class="category-link flex items-center p-2 text-base font-normal rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700" data-category="Waste Management">
<i class="fas fa-recycle w-6 h-6 text-green-500"></i>
<span class="ml-3">Waste Management</span>
</a>
<a href="#" class="category-link flex items-center p-2 text-base font-normal rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700" data-category="Energy Systems">
<i class="fas fa-solar-panel w-6 h-6 text-yellow-500"></i>
<span class="ml-3">Energy Systems</span>
</a>
<a href="#" class="category-link flex items-center p-2 text-base font-normal rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700" data-category="Health">
<i class="fas fa-heartbeat w-6 h-6 text-red-500"></i>
<span class="ml-3">Health</span>
</a>
</div>
<div class="mb-4">
<input type="text" id="search" placeholder="Search videos..." class="w-full p-2 border rounded dark:bg-gray-700 dark:text-white">
</div>
<div id="categories" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
</div>
<div id="video-detail" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div id="video-content"></div>
<div class="text-center mt-4">
<button id="close-detail" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">
Close
</button>
</div>
</div>
<div class="panel-container">
${video.panels.map(panel => `
<div class="info-panel">
<h3>${panel.title}</h3>
<p>${panel.content}</p>
</div>
`).join('')}
</div>
</div>
<script>
const videoData = [
{
"id": "1",
"title": "DIY Gravity-Based Water Filter",
"categories": ["Drinking Water", "Health"],
"description": "A simple gravity water filter using easily sourced materials like sand, gravel, and activated charcoal.",
"youtubeId": "v6O6jFs5DrQ",
"tags": ["water", "filter", "DIY", "purification"],
"rating": 4.5,
"date": "2023-05-15",
"transcript": "This is a dummy transcript for the DIY Gravity-Based Water Filter video...",
"materials": ["Sand", "Gravel", "Activated Charcoal", "Large Plastic Containers", "PVC Pipe"],
"steps": [
"Prepare the containers",
"Layer the filtering materials",
"Set up the water flow system",
"Test the filter",
"Maintain and clean regularly"
]
},
{
"id": "2",
"title": "Rainwater Harvesting System for Home",
"categories": ["Drinking Water", "Waste Management"],
"description": "Learn how to set up a rainwater harvesting system for your home to collect and store rainwater for various uses.",
"youtubeId": "1OXB_4-aEzJ-qxya",
"tags": ["rainwater", "harvesting", "sustainable", "water conservation"],
"rating": 4.7,
"date": "2023-08-22",
"transcript": "This is a dummy transcript for the Rainwater Harvesting System video...",
"materials": ["Gutters", "Downspouts", "Storage Tank", "Filtration System", "Pump"],
"steps": [
"Install gutters and downspouts",
"Set up the storage tank",
"Install the filtration system",
"Connect the pump for distribution",
"Maintain and clean the system regularly"
]
},
{
"id": "3",
"title": "DIY Solar Panel for Beginners",
"categories": ["Energy Systems"],
"description": "Learn how to build a small solar panel from scratch, perfect for powering small devices.",
"youtubeId": "nzSgDrflA8s",
"tags": ["solar", "energy", "DIY", "renewable"],
"rating": 4.2,
"date": "2023-06-20",
"transcript": "This is a dummy transcript for the DIY Solar Panel video...",
"materials": ["Solar Cells", "Tabbing Wire", "Flux Pen", "Soldering Iron", "Glass Sheet", "EVA Film", "Junction Box"],
"steps": [
"Arrange and connect solar cells",
"Solder tabbing wire to cells",
"Prepare the glass sheet and EVA film",
"Laminate the solar cells",
"Attach the junction box",
"Test the solar panel"
]
},
{
"id": "4",
"title": "Build a Micro Wind Turbine",
"categories": ["Energy Systems"],
"description": "A step-by-step guide on constructing a small wind turbine for generating electricity at home or for off-grid scenarios.",
"youtubeId": "5zWV6Hic40M",
"tags": ["wind", "turbine", "renewable energy", "DIY"],
"rating": 4.3,
"date": "2023-09-05",
"transcript": "This is a dummy transcript for the Micro Wind Turbine video...",
"materials": ["PVC Pipes", "DC Motor", "Wooden Blades", "Mounting Bracket", "Charge Controller", "Battery"],
"steps": [
"Construct the turbine body using PVC pipes",
"Create and attach the wooden blades",
"Mount the DC motor",
"Set up the mounting bracket",
"Install the charge controller and battery",
"Test and adjust the wind turbine"
]
},
{
"id": "5",
"title": "Compost Bin from Recycled Materials",
"categories": ["Waste Management", "Health"],
"description": "A tutorial for building a compost bin from pallets and other recycled materials, perfect for waste management in gardens.",
"youtubeId": "LRjHZpoPQDY",
"tags": ["compost", "recycling", "garden", "waste reduction"],
"rating": 4.7,
"date": "2023-07-10",
"transcript": "This is a dummy transcript for the Compost Bin from Recycled Materials video...",
"materials": ["Wooden Pallets", "Screws", "Hinges", "Wire Mesh", "Paint or Wood Sealant"],
"steps": [
"Disassemble and clean the pallets",
"Construct the bin frame",
"Attach the wire mesh for aeration",
"Install a hinged lid",
"Apply paint or sealant for weather protection"
]
},
{
"id": "6",
"title": "DIY Biogas Digester for Kitchen Waste",
"categories": ["Waste Management", "Energy Systems"],
"description": "Create your own biogas digester to convert kitchen waste into usable cooking gas and nutrient-rich fertilizer.",
"youtubeId": "JP4ob9RVklo",
"tags": ["biogas", "waste to energy", "sustainable", "DIY"],
"rating": 4.6,
"date": "2023-10-18",
"transcript": "This is a dummy transcript for the DIY Biogas Digester video...",
"materials": ["Large Plastic Drum", "PVC Pipes", "Valves", "Gas Storage Bag", "Slurry Collection Container"],
"steps": [
"Prepare the main digester drum",
"Install inlet and outlet pipes",
"Set up the gas collection system",
"Create a slurry outlet",
"Test for leaks and start the digestion process"
]
},
{
"id": "7",
"title": "Homemade Ceramic Water Filter",
"categories": ["Drinking Water", "Health"],
"description": "
If you find my videos useful, perhaps you might consider chipping in for some gas money? Im too unwell to work now but I really want to keep bringing you these useful videos https://www.buymeacoffee.com/tinyhous...
5 minute DIY water filter. 3 gallon-12 litre capacity. $10 us total cost . Activated Nano Colliodal Silver Bacteria protection.
Details here- https://ephraimhealth.co.nz/pages/wha...
Where does rain come from? https://gpm.nasa.gov/education/water-...
FDA method of testing ceramic and plastic food containers https://www.fda.gov/media/95170/download Nano Silver Dressings wins award • Nano-silver wound dressings earn Mann...
water treatment,water filter,how to clean water, water filter,ceramic,water,berkey,filtration,diy, build,building,water,making,purifiers,purifiers water,clean water,guide,build water,water filter,making water, 5 core water ,wilderness water ,core water, primary water primitive skills.",
"youtubeId": "hieHLOGfRRU",
"tags": ["ceramic filter", "water purification", "appropriate technology", "DIY"],
"rating": 4.4,
"date": "2023-11-30",
"transcript": "This is a dummy transcript for the Homemade Ceramic Water Filter video...",
"materials": ["Clay", "Sawdust", "Bucket", "Colloidal Silver", "Kiln or Open Fire"],
"steps": [
"Mix clay and sawdust",
"Shape the filter",
"Fire the filter in a kiln or open fire",
"Apply colloidal silver",
"Assemble the filtration system"
]
},
{
"id": "8",
"title": "Build a Pedal-Powered Generator",
"categories": ["Energy Systems", "Wind power"],
"description": "Build-a-VAWT vertical-axis wind turbine Community project 2design and build compatible parts, expanding possibilities!",
"youtubeId": "6DscH6Z4es4",
"tags": ["energy", "sustainable", "DIY wind generator"],
"rating": 4.5,
"date": "2024-01-05",
"transcript": "stackable...",
"materials": ["wind", "modular", "DIY", "energy"],
"steps": [
"Mount the bicycle on a stable frame",
"Attach the DC motor to the frame",
"Connect the motor to the bicycle wheel with a belt",
"Install the voltage regulator and battery",
"Add an inverter for AC output",
"Test and calibrate the system"
]
},
{
"id": "9",
"title": "Car Alternator Windmill for Off-Grid Power",
"categories": ["Energy Systems"],
"description": "Learn how to repurpose a car alternator to create a robust windmill for generating off-grid electricity.",
"youtubeId": "X8hE8XYOQN4",
"tags": ["windmill", "alternator", "off-grid", "DIY power"],
"rating": 4.6,
"date": "2024-02-10",
"transcript": "This is a dummy transcript for the Car Alternator Windmill video...",
"materials": ["Car Alternator", "PVC Pipes", "Wooden Blades", "Tail Vane", "Charge Controller", "Deep Cycle Battery"],
"steps": [
"Modify the alternator for low RPM operation",
"Construct the windmill frame using PVC pipes",
"Create and attach wooden blades",
"Install the tail vane for directional control",
"Set up the electrical system with charge controller and battery",
"Mount and test the windmill"
]
},
{
"id": "10",
"title": "Build a Solar Water Heater",
"categories": ["Energy Systems", "Drinking Water"],
"description": "Step-by-step guide to constructing an efficient solar water heater for your home, reducing energy costs.",
"youtubeId": "l0qkcViT4is",
"tags": ["solar", "water heater", "energy efficiency", "DIY"],
"rating": 4.7,
"date": "2024-01-25",
"transcript": "This is a dummy transcript for the Solar Water Heater video...",
"materials": ["Copper Pipes", "Glass Panel", "Insulation", "Storage Tank", "Pump", "Thermostatic Valve"],
"steps": [
"Build the collector box",
"Install the copper pipe grid",
"Add insulation and the glass panel",
"Set up the storage tank and pump",
"Connect the system to your home's water supply",
"Test and optimize the system"
]
},
{
"id": "11",
"title": "Constructing a Reed Bed Water Treatment System",
"categories": ["Drinking Water", "Waste Management"],
"description": "Detailed tutorial on building a natural reed bed system for greywater treatment and recycling.",
"youtubeId": "kUJr9NQY1Pk",
"tags": ["reed bed", "water treatment", "greywater", "natural filtration"],
"rating": 4.5,
"date": "2023-12-05",
"transcript": "This is a dummy transcript for the Reed Bed Water Treatment System video...",
"materials": ["Pond Liner", "Gravel", "Sand", "Reed Plants", "Pipes", "Distribution System"],
"steps": [
"Excavate the reed bed area",
"Install the pond liner",
"Layer gravel and sand",
"Plant the reeds",
"Set up the water distribution system",
"Connect to your greywater source"
]
},
{
"id": "12",
"title": "DIY Plastic Bottle Vertical Garden",
"categories": ["Waste Management", "Health"],
"description": "Create a space-efficient vertical garden using recycled plastic bottles, perfect for urban environments.",
"youtubeId": "VfvTApGKDzw",
"tags": ["vertical garden", "recycling", "urban gardening", "waste reduction"],
"rating": 4.4,
"date": "2024-03-01",
"transcript": "This is a dummy transcript for the DIY Plastic Bottle Vertical Garden video...",
"materials": ["Plastic Bottles", "Sturdy Rope or Wire", "Potting Soil", "Seeds or Seedlings", "Drill", "Scissors"],
"steps": [
"Clean and prepare the plastic bottles",
"Cut openings in the bottles for plants",
"Drill drainage holes",
"String the bottles together vertically",
"Fill with soil and plant your chosen vegetation",
"Hang and maintain your vertical garden"
]
},
{
"id": "13",
"title": "Building a Downdraft Mass Heater Bench ",
"categories": ["Energy Systems", "Health"],
"description": "Learn to construct an ultra-efficient rocket mass heater for sustainable home heating using minimal fuel.",
"youtubeId": "XZc_mg3V0jw",
"tags": ["mass heater", "efficient heating", "sustainable", "DIY"],
"rating": 4.8,
"date": "2024-02-20",
"transcript": "This is aBuilding a Downdraft Mass Heater Bench for the Venturi Mass Heater video...",
"materials": ["Fire Bricks", "Metal Barrel", "Stove Pipe", "Cob Mixture", "Sand", "Perlite"],
"steps": [
"Build the fire feed and combustion chamber",
"Construct the heat riser",
"Set up the metal barrel as heat exchanger",
"Create the horizontal exhaust system",
"Build the thermal mass bench",
"Test and fine-tune the system"
]
},
{
"id": "14",
"title": "Hot Composting: Nature's Autoclave",
"categories": ["Waste Management", "Health", "Gardening"],
"description": "Learn how to create and maintain a hot compost pile that acts as a natural autoclave, sterilizing contents while producing rich, organic matter.",
"youtubeId": "m69c_LkRi20",
"tags": ["hot composting", "waste management", "soil health", "organic gardening", "Waste Management", "Health"],
"rating": 4.8,
"date": "2024-03-15",
"transcript": "This is a dummy transcript for the Hot Composting video...",
"materials": ["Green materials (grass clippings, food scraps)", "Brown materials (leaves, straw, paper)", "Compost thermometer", "Pitchfork or compost aerator", "Water source"],
"steps": [
"Choose a shaded location for your compost pile",
"Layer green and brown materials in a 1:2 ratio",
"Ensure the pile is at least 3 feet x 3 feet x 3 feet",
"Monitor temperature, aiming for 135-160°F (57-71°C) in the center",
"Turn the pile when temperature peaks or every 3-5 days",
"Maintain moisture (should feel like a wrung-out sponge)",
"Continue process for 3-4 weeks until temperature stops rising"
],
"panels": [
{
"title": "Temperature Control",
"content": "Maintain a core temperature of 135-160°F (57-71°C) for at least 3 days to effectively kill pathogens and weed seeds. Use a compost thermometer to monitor daily. If temperature exceeds 160°F, turn the pile to prevent beneficial microbe die-off."
},
{
"title": "Moisture Management",
"content": "Keep the pile as moist as a wrung-out sponge. Too dry? Add water when turning. Too wet? Add dry brown materials and turn. Proper moisture is crucial for microbial activity and heat generation."
},
{
"title": "Pile Location",
"content": "Choose a shaded area to prevent the pile from drying out too quickly. Ensure good drainage to prevent waterlogging. A location with protection from strong winds will help maintain consistent temperatures."
},
{
"title": "Aeration",
"content": "Turn the pile every 3-5 days or when the core temperature peaks and begins to drop. This introduces oxygen, which is essential for the aerobic bacteria that generate heat. Use a pitchfork or compost aerator for efficient turning."
}
]
}
];
function renderStars(rating) {
const fullStars = Math.floor(rating);
const halfStar = rating % 1 >= 0.5 ? 1 : 0;
const emptyStars = 5 - fullStars - halfStar;
return '★'.repeat(fullStars) + (halfStar ? '½' : '') + '☆'.repeat(emptyStars);
}
function slugify(text) {
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
function renderVideo(video) {
const mainCategory = video.categories[0];
const mainTag = video.tags[0];
const detailUrl = `/${slugify(mainCategory)}/${slugify(mainTag)}/${slugify(video.title)}`;
return `
<div class="video-card rounded-lg shadow-md p-4 mb-4">
<h3 class="text-xl font-semibold mb-2">${video.title}</h3>
<div class="aspect-w-16 aspect-h-9 mb-2">
<img src="https://img.youtube.com/vi/${video.youtubeId}/0.jpg" alt="${video.title}" class="w-full h-64 object-cover">
</div>
<p class="mb-2">${video.description}</p>
<div class="flex flex-wrap mb-2">
${video.tags.map(tag => `<span class="tag text-sm font-medium mr-2 px-2.5 py-0.5 rounded cursor-pointer bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">${tag}</span>`).join('')}
</div>
<div class="text-yellow-400">${renderStars(video.rating)}</div>
<div class="text-sm opacity-75">Date: ${video.date}</div>
<a href="${detailUrl}" class="mt-2 inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 video-detail-link" data-id="${video.id}">View Details</a>
</div>
`;
}
function renderVideoDetails(video) {
return `
<h1 class="text-3xl font-bold mb-4">${video.title}</h1>
<div class="aspect-w-16 aspect-h-9 mb-4">
<iframe src="https://www.youtube.com/embed/${video.youtubeId}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="w-full h-96"></iframe>
</div>
<p class="mb-4">${video.description}</p>
<div class="mb-4">
${video.tags.map(tag => `<span class="tag text-sm font-medium mr-2 px-2.5 py-0.5 rounded cursor-pointer bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">${tag}</span>`).join('')}
</div>
<div class="text-yellow-400 mb-2">${renderStars(video.rating)}</div>
<p class="text-sm opacity-75 mb-4">Date: ${video.date}</p>
<h2 class="text-2xl font-bold mb-2">Materials Needed:</h2>
<ul class="list-disc list-inside mb-4">
${video.materials.map(material => `<li>${material}</li>`).join('')}
</ul>
<h2 class="text-2xl font-bold mb-2">Steps:</h2>
<ol class="list-decimal list-inside mb-4">
${video.steps.map(step => `<li>${step}</li>`).join('')}
</ol>
<h2 class="text-2xl font-bold mb-2">Transcript:</h2>
<p class="mb-4">${video.transcript}</p>
`;
if (video.panels) {
detailsContainer.innerHTML += `
<h2 class="text-2xl font-bold mb-2">Additional Information:</h2>
<div class="panel-container">
${video.panels.map(panel => `
<div class="info-panel">
<h3>${panel.title}</h3>
<p>${panel.content}</p>
</div>
`).join('')}
</div>
`;
}
}
function renderCategories(videos) {
const categoriesContainer = document.getElementById('categories');
categoriesContainer.innerHTML = videos.map(renderVideo).join('');
// Add event listeners to detail links
document.querySelectorAll('.video-detail-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const videoId = this.getAttribute('data-id');
const video = videoData.find(v => v.id === videoId);
if (video) {
document.getElementById('video-content').innerHTML = renderVideoDetails(video);
document.getElementById('video-detail').classList.remove('hidden');
}
});
});
}
function filterAndSortVideos() {
const searchTerm = document.getElementById('search').value.toLowerCase();
const urlParams = new URLSearchParams(window.location.search);
const category = urlParams.get('category');
let filteredVideos = videoData.filter(video =>
(category ? video.categories.includes(category) : true) &&
(video.title.toLowerCase().includes(searchTerm) ||
video.description.toLowerCase().includes(searchTerm) ||
video.tags.some(tag => tag.toLowerCase().includes(searchTerm)))
);
filteredVideos.sort((a, b) => b.rating - a.rating);
renderCategories(filteredVideos);
}
document.getElementById('search').addEventListener('input', filterAndSortVideos);
// Category filtering
document.querySelectorAll('.category-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const category = this.getAttribute('data-category');
history.pushState(null, '', `?category=${category}`);
filterAndSortVideos();
});
});
// Close detail view
document.getElementById('close-detail').addEventListener('click', function() {
document.getElementById('video-detail').classList.add('hidden');
});
// Theme toggle functionality
const themeToggleBtn = document.getElementById('theme-toggle');
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
function setTheme(isDark) {
document.body.classList.toggle('dark', isDark);
document.body.classList.toggle('light', !isDark);
themeToggleDarkIcon.classList.toggle('hidden', !isDark);
themeToggleLightIcon.classList.toggle('hidden', isDark);
}
function toggleTheme() {
const isDark = document.body.classList.contains('light');
setTheme(isDark);
}
// Detect user preference
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
setTheme(prefersDarkScheme.matches);
themeToggleBtn.addEventListener('click', toggleTheme);
prefersDarkScheme.addListener((e) => setTheme(e.matches));
// Initial render
filterAndSortVideos();
</script>
</body>
</html>
// Initial render
filterAndSortVideos();
</script>
</body>
</html>