-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
234 lines (213 loc) · 8.82 KB
/
index.html
File metadata and controls
234 lines (213 loc) · 8.82 KB
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
<!DOCTYPE HTML>
<!--
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/how.css?u" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
<!-- Empty favicon to prevent favicon request -->
<link rel="icon" href="/images/icon.png">
<!-- Primary Meta Tags -->
<title>HowHow 發聲器</title>
<meta name="title" content="HowHow 發聲器">
<meta name="description" content="一起來玩ㄅ，讓 How 哥說話或唱歌都可以！">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://howfun.futa.gg/">
<meta property="og:title" content="HowHow 發聲器">
<meta property="og:description" content="一起來玩ㄅ，讓 How 哥說話或唱歌都可以！">
<meta property="og:image" content="images/social-cover.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://howfun.futa.gg/">
<meta property="twitter:title" content="HowHow 發聲器">
<meta property="twitter:description" content="一起來玩ㄅ，讓 How 哥說話或唱歌都可以！">
<meta property="twitter:image" content="images/social-cover.jpg">
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt"><span class="logo"><img src="/images/icon.png" width="85px" alt=""></span>
<h1>HowHow 發聲器</h1>
<p>一起來玩ㄅ，讓 How 哥說話或唱歌都可以！</p>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#how-speak-video" class="active"><span class="icon solid fa-play-circle"></span> How
發聲器</a></li>
<li><a href="#utau"><span class="icon solid fa-music"></span> UTAU 聲庫</a></li>
<li><a href="#download"><span class="icon solid fa-microphone"></span> 發音集</a></li>
<li><a href="#about"><span class="icon solid fa-info"></span> 關於</a></li>
<li><a href="#contributor"><span class="icon solid fa-code"></span> 貢獻者</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="how-speak-video" class="main">
<div class="spotlight">
<div class="content">
<div id="how-video-contianer">
<video id="how-video"> </video>
</div>
<header class="major">
<h2>How 發聲器</h2>
</header>
<p>輸入文字後按下播放，即可讓 How 哥唸出這些字（僅限中文與拼音且不可使用標點符號）</p>
<p>如果你會拼音也可以讓 How 哥念其他語言喔，像是<a href="/?text=li1%20hou4%20wa1%20xi3%20hao4%20hao4">台語</a>或<a
href="/?text=kou1%20ni1%20ji1%20wa1%20wa3%20da1%20ji1%20wa1%20hao4%20hao4%20dei3%20su3">日語</a>
</p>
<div class="row gtr-uniform">
<div class="col-12">
<textarea name="how-text" id="how-text-video" placeholder="輸入您想讓 How 哥念的字"
rows="2"></textarea>
</div>
<div class="col-12">
<ul class="actions">
<li><input type="button" id="play-video" value="讀取中..." disabled
class="primary" />
</li>
<li><select id="play-speed">
<option value="1">速度調整</option>
<option value="0.5">0.5x</option>
<option value="1">1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
<option value="2.5">2.5x</option>
<option value="3">3x</option>
</select>
</li>
</ul>
</div>
</div>
<p><br />本服務使用了 <a href="http://zhconvert.org/" target="_blank">繁化姬</a> 的 API 服務</p>
</div>
</div>
</section>
<!-- First Section -->
<section id="utau" class="main">
<header class="major">
<h2>How 哥 UTAU 聲庫（製作中）</h2>
<p>唱出你心中所思</p>
</header>
<div id="how-utau-video-container">
<iframe src="https://www.youtube-nocookie.com/embed/M2-PMj28Wro?controls=0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
id="how-utau-video" allowfullscreen></iframe>
</div>
<footer class="major">
<ul class="actions">
<li><a href="https://github.com/EarlySpringCommitee/HowHow-UTAU/releases"
class="button primary">下載</a></li>
<li><a href="https://github.com/EarlySpringCommitee/HowHow-UTAU" class="button">GitHub</a>
</li>
</ul>
</footer>
</section>
<!-- First Section -->
<section id="download" class="main">
<header class="major">
<h2>發音集</h2>
<p>在此下載已經切割並以拼音命名完成的發音集！</p>
<p>包含 MP3 發音檔與 MP4 影片檔及處理程式。</p>
</header>
<footer class="major">
<ul class="actions">
<li>
<a href="https://github.com/EarlySpringCommitee/HowHow-parser/archive/master.zip"
target="_blank" class="button primary">下載</a>
</li>
<li>
<a href="https://github.com/EarlySpringCommitee/HowHow-parser" target="_blank"
class="button ">發音集 GitHub</a>
</li>
</ul>
</footer>
</section>
<!-- Second Section -->
<section id="about" class="main">
<header class="major">
<h2>關於</h2>
<p>我們是一群學生，因為吃飽太閒便製作了這個網站，若有任何問題或建議可至發聲器的 <a
href="https://github.com/EarlySpringCommitee/HowHow-web" target="_blank">GitHub</a>
提出 <a href="https://github.com/EarlySpringCommitee/HowHow-web/issues/new"
target="_blank">Issue</a>。</p>
</header>
</section>
<!-- Get Started -->
<section id="contributor" class="main">
<header class="major">
<h2>貢獻者</h2>
</header>
<ul>
<li><a href="https://gnehs.net/" target="_blank">勝勝</a></li>
<li><a href="https://koru.me/" target="_blank">koru</a></li>
<li><a href="https://tdccc.com.tw" target="_blank">踢低吸</a></li>
<li><a href="https://sciuridae.me" target="_blank">Sciuridae</a></li>
<li><a href="https://github.com/bill96012" target="_blank">Bill</a></li>
<li><a href="https://t510599.github.io/" target="_blank">石頭</a></li>
</ul>
<footer class="major">
<ul class="actions">
<li><a href="https://github.com/EarlySpringCommitee/HowHow-web/graphs/contributors"
target="_blank" class="primary button">到 GitHub 看看其他貢獻者</a></li>
</ul>
</footer>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section>
<h2>免責聲明</h2>
<p>本服務僅供博君一笑，影片屬 How 哥所有</p>
</section>
<section>
<h2>始春延期委員會</h2>
<dl class="alt">
<dt>發聲器</dt>
<dd><a href="https://git.io/howhowweb"
target="_blank">github.com/EarlySpringCommitee/HowHow-web</a>
</dd>
<dt>發音集</dt>
<dd><a href="https://github.com/EarlySpringCommitee/HowHow-parser"
target="_blank">github.com/EarlySpringCommitee/HowHow-parser</a></dd>
<dt>始春 GitHub</dt>
<dd><a href="https://github.com/EarlySpringCommitee"
target="_blank">github.com/EarlySpringCommitee</a></dd>
</dl>
</section>
<p class="copyright">網站設計基於 <a href="https://html5up.net">HTML5 UP</a> 提供的範本</p>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/how-utils.js"></script>
<script src="assets/js/how-speak.js?sr"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-46944346-12"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-46944346-12');
</script>
</body>
</html>