-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblam.html
843 lines (766 loc) · 43.1 KB
/
blam.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
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
<!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>
<script>
// Function to fetch data from Google Sheets
async function fetchDataFromGoogleSheets(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data.feed.entry.map(entry => {
const video = {};
Object.keys(entry).forEach(key => {
if (key.startsWith('gsx$')) {
const propertyName = key.slice(4);
video[propertyName] = entry[key].$t;
}
});
// Parse categories, tags, materials, and steps as arrays
['categories', 'tags', 'materials', 'steps'].forEach(field => {
if (video[field]) {
video[field] = video[field].split(',').map(item => item.trim());
}
});
// Parse rating as a number
video.rating = parseFloat(video.rating);
return video;
});
} catch (error) {
console.error('Error fetching data from Google Sheets:', error);
return [];
}
}
// Update the existing code to use the fetched data
let 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": "cXh5WFXwfj4",
"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": "W5WTckKAV2k",
"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": "KKEo4Wo-QLk",
"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": "Learn to create a ceramic water filter using locally available materials for clean drinking water in remote areas.",
"youtubeId": "4iUWJQrZt9c",
"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", "Health"],
"description": "Construct a bicycle-based generator to produce electricity through pedal power, great for emergency situations or off-grid living.",
"youtubeId": "dyDb2Kgzh5A",
"tags": ["pedal power", "human energy", "sustainable", "DIY generator"],
"rating": 4.5,
"date": "2024-01-05",
"transcript": "This is a dummy transcript for the Pedal-Powered Generator video...",
"materials": ["Bicycle", "DC Motor", "Belt Drive", "Voltage Regulator", "Battery", "Inverter"],
"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 Rocket Mass Heater",
"categories": ["Energy Systems", "Health"],
"description": "Learn to construct an ultra-efficient rocket mass heater for sustainable home heating using minimal fuel.",
"youtubeId": "DrD0YD6xLM4",
"tags": ["rocket mass heater", "efficient heating", "sustainable", "DIY"],
"rating": 4.8,
"date": "2024-02-20",
"transcript": "This is a dummy transcript for the Rocket 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."
}
];
}
async function initializeApp() {
const sheetsUrl = 'https://docs.google.com/spreadsheets/d/1M6Ikz2Jh9ikuk_F8oEbV1PqOTOpiHivRqX8dJ-TokBA';
videoData = await fetchDataFromGoogleSheets(sheetsUrl);
filterAndSortVideos();
}
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(/[^\w\-]+/g, '')
.replace(/\-\-+/g, '-')
.replace(/^-+/, '')
.replace(/-+$/, '');
}
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>
`;
}
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.addEventListener('DOMContentLoaded', () => {
document.getElementById('search').addEventListener('input', filterAndSortVideos);
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();
});
});
document.getElementById('close-detail').addEventListener('click', function() {
document.getElementById('video-detail').classList.add('hidden');
});
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);
}
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
setTheme(prefersDarkScheme.matches);
themeToggleBtn.addEventListener('click', toggleTheme);
prefersDarkScheme.addListener((e) => setTheme(e.matches));
// Initialize the app
initializeApp();
});
</script>
</body>
</html>
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 to fetch data from Google Sheets
async function fetchDataFromGoogleSheets(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data.feed.entry.map(entry => {
const video = {};
Object.keys(entry).forEach(key => {
if (key.startsWith('gsx$')) {
const propertyName = key.slice(4);
video[propertyName] = entry[key].$t;
}
});
// Parse categories, tags, materials, and steps as arrays
['categories', 'tags', 'materials', 'steps'].forEach(field => {
if (video[field]) {
video[field] = video[field].split(',').map(item => item.trim());
}
});
// Parse rating as a number
video.rating = parseFloat(video.rating);
return video;
});
} catch (error) {
console.error('Error fetching data from Google Sheets:', error);
return [];
}
}
// Update the existing code to use the fetched data
let videoData = [];
async function initializeApp() {
const sheetsUrl = 'YOUR_GOOGLE_SHEETS_PUBLIC_JSON_URL';
videoData = await fetchDataFromGoogleSheets(sheetsUrl);
filterAndSortVideos();
}
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>