-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
132 lines (116 loc) · 4 KB
/
index.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
<html>
<head>
<title>शुभा वार्ता - Good News in Sanskrit</title>
<meta name="description" content="शुभा वार्ता - Good News in Sanskrit">
<meta name="keywords" content="शुभा वार्ता">
<meta name="author" content="vaartaa.ml">
<!-- ****** faviconit.com favicons ****** -->
<link rel="shortcut icon" href="ssv.ico">
<meta property="og:title" content="शुभा वार्ता" />
<meta property="og:url" content="http://www.vaartaa.ml" />
<meta property="og:description" content="Good News in Sanskrit" />
<meta name="twitter:card" content="शुभा वार्ता - Good News in Sanskrit - www.vaartaa.ml" />
<meta property="og:image" content="https://github.com/raw/Samskrita-Bharati/vaartaa.ml/6a80cafc7f03c5ac6dfceb186370c20d4340dd46/ssv.ico" />
<meta property="og:image:width" content="310" />
<meta property="og:image:height" content="310" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-min.js"></script>
<style>
body {
background-color: #000000;
color: #FFFFFF;
}
.logo {
position: fixed;
z-index: 1000;
}
.logo img {
height: 40px;
}
.featured_video {
height: 70vh;
background-size: cover;
background-position: center;
}
.featured_video .gradient {
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0), #000);
}
.card {
transition: all 0.2s ease-in-out;
}
.card:hover {
transform: scale(1.15);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
ready();
})
function ready() {
let url = 'https://api.sheety.co/4d6c301d1b38b077bddf7cd9f39152b9/youflix/videos';
fetch(url)
.then((response) => response.json())
.then(json => {
let videos = json.videos;
// Parse out YouTube ID from the URL, as we'll use that to get the thumbnail
videos.forEach(video => {
let regex = /watch\?v=([\w\d-]*)/;
video.youtubeID = video.url.match(regex)[1];
});
let featuredVideo = videos.find(video => {
return video.isFeatured;
});
let groupedVideos = _.groupBy(json.videos, 'category');
var template = Handlebars.compile(document.getElementById("app-template").innerHTML);
// Render items into Handlebars template, and set the html of the container element
document.getElementById('app').innerHTML = template({
featured: featuredVideo,
videos: groupedVideos
});
});
}
</script>
<script id="app-template" type="text/x-handlebars-template">
<div class="container-fluid pl-5 pt-3 logo">
<img src="ssv.png">
<a href="https://www.youtube.com/playlist?list=PLofrqGxIuL6RJAXDLX2Y35js8MNJYH-GT" target="vaartaa.ml">YouTube Playlist</a>
</div>
<div class="featured_video" style="background-image:url('https://img.youtube.com/vi/{{featured.youtubeID}}/maxresdefault.jpg')">
<div class="gradient d-flex align-items-end">
<div class="container-fluid p-5 ">
<div class="row">
<div class="col-md-6">
<h3>{{featured.name}}</h3>
<p>{{featured.description}}</p>
<a class="btn btn-light" href="{{featured.url}}" target="vaartaa.ml">Play Video</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pl-5 pr-5">
{{#each this.videos as |category|}}
<h5>{{@key}}</h5>
<div class="row">
{{#each this as |video|}}
<div class="col-md-3">
<div class="card bg-dark mb-3">
<a href="{{video.url}}" target="vaartaa.ml">
<img src="https://img.youtube.com/vi/{{video.youtubeID}}/maxresdefault.jpg" class="card-img-top">
</a>
<p>{{video.desc21}} - {{video.date}}</p>
</div>
</div>
{{/each}}
</div>
{{/each}}
</div>
</script>
</head>
<body>
<div id="app">आगमिष्यति ...</div>
</body>
</html>