-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
225 lines (219 loc) · 11.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="UTF-8">
<meta name="title" content="Subtify - Find words from Youtube subtitles">
<meta name="description" content="Subtify is open-source platform that helps you to find words in subtitles or captions from YouTube videos quickly, and it's 100% free!">
<meta name="keywords" content="search youtube subtitle, search youtube caption, find words from youtube videos, find words from youtube subtitles, find words from youtube caption, youtube subtitles, youtube caption">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="Arifin Izzah">
<title>Subtify - Find words from Youtube subtitles</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.min.css">
</head>
<body>
<div id="app">
<section class="hero">
<div class="jumbotron jumbotron-fluid jumbotron-hero mb-0 pt-0">
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="">Subtify</a>
<a class="navbar-nav py-1" href="about">About</a>
</div>
</nav>
<div class="row h-100 pb-5 px-md-5 mr-0">
<div class="col-lg-6 order-lg-1 d-none d-lg-flex justify-content-center align-content-center">
<div class="card card-body bg-transparent border-0">
<div class="my-auto">
<img src="assets/svg/undraw_in_sync_xwsa-min.svg" class="img-fluid" alt="">
</div>
</div>
</div>
<div class="col-lg-6 order-lg-0 d-flex justify-content-center align-content-center">
<div class="card card-body bg-transparent border-0">
<div class="my-auto">
<h1 class="hero-title font-weight-bold">Finding Words Getting Easier</h1>
<p class="hero-subtitle my-4">
Increasing productivity can be through anything. One of them is finding
words in YouTube caption quickly. Then Subtify can be your choice
</p>
<a class="btn btn-lg hero-btn" href="#findWords" role="button">Find Words</a>
<a class="btn btn-lg hero-btn--2 ml-3" href="#learnMore" role="button">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-2">
<div class="container" id="findWords">
<h2 class="mb-4 quicksand font-weight-600">Find Words</h2>
<div class="row mb-5">
<div class="col-md-6 order-md-1 mb-5 mb-md-0">
<div class="video-section sticky-top ml-0 ml-md-1">
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive-item video-preview d-flex justify-content-center align-items-center" v-if="!videoId">
<h3 class="font-weight-normal text-center">Video preview will be showing here</h3>
</div>
<iframe class="embed-responsive-item videoId" :src="videoId" v-if="videoId" allowfullscreen></iframe>
</div>
<div v-if="url||urlValidation" class="px-3 py-3">
<div v-if="!errorCode">
<p class="font-weight-bold mb-1">Video title: <span class="font-weight-normal">{{ videoTitle }}</span></p>
<p class="font-weight-bold mb-0">From channel: <a :href="channelUrl" class="font-weight-normal">{{ videoChannel }}</a></p>
</div>
<div v-else class="d-flex justify-content-center align-items-center">
<p class="text-center">
<span class="font-weight-bold">Error {{ errorCode }}. Unable to get video title, {{ errorMessage }}.</span>
<br>
Please <a href="about/">contact</a> website administrator!
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 order-md-0 pr-md-5">
<div class="form-group mb-4 pr-0 pr-md-4">
<input type="text" v-model="url" class="form-control" v-bind:class="{false: urlValidation, 'is-invalid': urlValidation}" placeholder="Paste Youtube video link here">
<small class="form-text text-danger" v-if="urlValidation&&url">URL not valid, please insert a valid Youtube video URL</small>
<small class="form-text text-secondary" v-if="!urlValidation||!url">
<span class="font-weight-bold">Example: </span>https://www.youtube.com/watch?v=klnvttPfOUM
</small>
</div>
<div class="form-group mb-4 pr-0 pr-md-4">
<input type="text" v-model="keyWord" class="form-control" placeholder="Type your keywords here" :disabled="!url||urlValidation">
<small class="form-text text-secondary" v-if="url||urlValidation">
<span class="font-weight-bold">Example:</span> web</small>
</div>
<p class="mb-0 font-weight-bold">Note:</p>
<ul class="pl-4">
<li>Youtube video must contains captions or subtitle</li>
<li>Keywords must contains at least 3 characters</li>
</ul>
<div v-show="keyWord && !isLoading">
<div class="d-block true">
<h4 class="mt-5 mb-3">Result</h4>
<p class="mb-3">
<span class="font-weight-bold">{{ wordsFound }}</span> words found!
</p>
<div class="d-flex justify-content-between mb-4 pr-0 pr-md-4">
<p class="my-auto">Page: <span class="font-weight-bold">{{ pagination.page }}</span></p>
<div>
<button class="btn btn-icon" @click="navigation('first')" :disabled="!pagination['first']">
<i data-feather="chevrons-left"></i>
</button>
<button class="btn btn-icon" @click="navigation('prev')" :disabled="!pagination['prev']">
<i data-feather="chevron-left"></i>
</button>
<button class="btn btn-icon" @click="navigation('next')" :disabled="!pagination['next']">
<i data-feather="chevron-right"></i>
</button>
<button class="btn btn-icon" @click="navigation('last')" :disabled="!pagination['last']">
<i data-feather="chevrons-right"></i>
</button>
</div>
</div>
</div>
<ul class="pl-4">
<li v-for="(response, i) in responseList" :key="i" class="mb-3">
<span class="caption-result" v-html="response.text"></span>
[<a :href="`${url}&t=${response.start}s`" target="_blank">{{ timeStart(response.start) }}</a>]
</li>
</ul>
</div>
<div v-if="isLoading" class="d-flex align-items-center">
<h5 class="mt-5 text--mauve-dark text-center">Loading..</h5>
</div>
<div v-if="!wordsFound && !isLoading && keyWord" class="d-flex align-items-center">
<h5 class="mt-5 text--mauve-dark text-center">Words not found. Make sure you enter 3 or more characters or try different keywords</h5>
</div>
</div>
</div>
</div>
</section>
<section class="section-3">
<div class="container" id="learnMore">
<div class="row">
<div class="col-md-4 mb-5 mb-md-0 d-flex justify-content-center align-items-center">
<h1 class="text--paua kalam display-4">Subtify</h1>
</div>
<div class="col-md-8 quicksand text-center text-md-left">
<h4 class="font-weight-700">Free Youtube caption searcher</h4>
<p class="font-weight-600">
Subtify is open-source platform that helps you to find words in subtitles or captions from YouTube videos quickly, and it's 100% free!
</p>
</div>
</div>
<div class="row feature px-3">
<div class="col-lg-4 py-3 px-md-5">
<div class="media">
<img src="assets/img/icons8-easy-50.png" class="align-self-center mr-3" alt="Easy to use">
<div class="media-body">
<h5 class="mt-0">Easy to use</h5>
<p>Just simply paste the link and search the words.</p>
</div>
</div>
</div>
<div class="col-lg-4 py-3 px-md-5">
<div class="media">
<img src="assets/img/icons8-quick-mode-on-50.png" class="align-self-center mr-3" alt="Quick">
<div class="media-body">
<h5 class="mt-0">Quick</h5>
<p>Get the words what you want quickly.</p>
</div>
</div>
</div>
<div class="col-lg-4 py-3 px-md-5">
<div class="media">
<img src="assets/img/icons8-responsive-50.png" class="align-self-center mr-3" alt="Responsive">
<div class="media-body">
<h5 class="mt-0">Responsive</h5>
<p>can be used on any device without breaking the interface.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-4 bg-light">
<div class="container">
<div class="row">
<div class="col-lg-5 mb-5 mb-md-0 d-flex justify-content-center align-items-center">
<h1 class="quicksand text-md-left text-center">Support Subtify to keep this project alive!</h1>
</div>
<div class="col-lg-6 offset-lg-1 mt-5 mt-lg-0 d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-6">
<a href="https://ko-fi.com/arifinizzah" class="w-50">
<img src="assets/img/kofi-min.png" class="img-fluid px-5 px-md-3" alt="">
</a>
</div>
<div class="col-md-6 text-center mt-5 mt-md-0">
<a href="https://saweria.co/arifinizzah" class="text-dark">
<h1 class="comfortaa">saweria.co</h1>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="nav justify-content-center bg-color--blue-chalk mb-0 py-4">
<p class="quicksand font-weight-600 text-center">
Copyright © 2020 <a href="">Subtify</a>.
Made with <i data-feather="heart" class="text-danger"></i>
by <a href="https://github.com/arifinizzah">Arifin Izzah</a>
from <a href="https://github.com/infinitedevsign">Infinite Devsign</a>
</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="assets/js/pdebounce.min.js"></script>
<script src="assets/js/vue.js"></script>
<script>feather.replace()</script>
</body>
</html>