-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
314 lines (313 loc) · 10.1 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
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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta
name="keywords"
content="Aspenne,獵巫,女巫,中世紀遊戲,畢業專題"
/>
<meta
name="description"
content="國立嘉義大學111級數位系畢業專題製作—Aspenne。Aspenne是一款以女巫視角來描述獵巫時期(Witch-hunt)的中世紀遊戲。"
/>
<title>Aspenne</title>
<link
rel="icon"
href="src/icon.ico"
type="image/x-icon"
/>
<link
rel="stylesheet"
href="./css/global.min.css"
/>
<link
rel="stylesheet"
href="./css/index.min.css"
/>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap"
rel="stylesheet"
crossorigin="anonymous"
/>
</head>
<body>
<!-- menu -->
<div
id="myNav"
class="push"
>
<div
class="closebtn"
id="close"
>
×
</div>
<div class="overlay-content">
<div class="nav-wrapper">
<a href="index.html"
><img
src="src/nav_aspenne.png"
alt="Aspenne"
loading="lazy"
/></a>
<a href="history.html"
><img
src="src/nav_daily.png"
alt="Daily"
loading="lazy"
/></a>
</div>
<a
href="witch.html"
class="witch-wrap"
><img
src="src/nav_witchhunt.png"
alt="Witch-hunt"
loading="lazy"
/></a>
</div>
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 193 90'%3E%3C/svg%3E"
data-src="src/menuv3.webp"
alt="bg"
class="fly lazy"
width="1930"
height="900"
/>
</div>
<div class="nav">
<div
id="menu"
class="menubtn"
>
<img
src="src/Menuicon.webp"
alt="Menu"
width="61"
height="21"
/>
</div>
</div>
<section class="main">
<div class="banner-bg">
<img
src="./src/index_bg_pc.webp"
alt="mbg"
class="mbg"
loading="lazy"
width="1366"
height="820"
/>
<img
src="./src/titlex1366.webp"
alt="title"
class="title"
/>
<div
id="anne"
class="mainrole"
></div>
<a
href="https://drive.google.com/file/d/1_4t4pK1NL_52Eb9yqRtXjrN36aKqsGK5/view?usp=sharing"
target="_blank"
>
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 9'%3E%3C/svg%3E"
data-src="./src/dl.png"
alt="download"
class="download lazy"
width="340"
height="90"
/></a>
<img
src="./src/intro.webp"
alt="gameintro"
class="gameintro"
width="715"
height="730"
/>
</div>
<div class="linear"></div>
</section>
<section class="info">
<div class="styleIt">
<lite-youtube
videoid="qKE6ldmfWhY"
class="yt"
></lite-youtube>
</div>
<div class="team wrapper">
<div class="person">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
data-src="src/n1.webp"
alt="鄭欣瑜"
srcset=""
class="number lazy"
width="180"
height="180"
/>
<div class="midtext">鄭欣瑜</div>
<p class="smtext">企劃/網頁</p>
</div>
<div class="person">
<div>
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
data-src="src/n2.webp"
alt="陳泓予"
class="number lazy"
width="180"
height="180"
/>
</div>
<div class="midtext">陳泓予</div>
<p class="smtext">美術/動畫</p>
</div>
<div class="person">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
data-src="src/n3.webp"
alt="許曜程"
srcset=""
class="number lazy"
width="180"
height="180"
/>
<div class="midtext">許曜程</div>
<p class="smtext">美術/動畫</p>
</div>
<div class="person">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
data-src="src/n4.webp"
alt="莊耀斌"
srcset=""
class="number lazy"
width="180"
height="180"
/>
<div class="midtext">莊耀斌</div>
<p class="smtext">遊戲程式</p>
</div>
</div>
<div class="contact">
<div class="fb">
<a
href="https://www.facebook.com/Aspenne-102833872236539"
target="_blank"
><svg
width="90"
height="90"
viewBox="0 0 90 90"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M77.3438 9.84375H12.6562C11.1006 9.84375 9.84375 11.1006 9.84375 12.6562V77.3438C9.84375 78.8994 11.1006 80.1562 12.6562 80.1562H77.3438C78.8994 80.1562 80.1562 78.8994 80.1562 77.3438V12.6562C80.1562 11.1006 78.8994 9.84375 77.3438 9.84375ZM69.2227 30.3662H63.6064C59.2031 30.3662 58.3506 32.458 58.3506 35.5342V42.3105H68.8623L67.4912 52.9189H58.3506V80.1562H47.3906V52.9277H38.2236V42.3105H47.3906V34.4883C47.3906 25.4092 52.9365 20.4609 61.04 20.4609C64.9248 20.4609 68.2559 20.751 69.2314 20.8828V30.3662H69.2227Z"
fill="currentColor"
/>
</svg>
</a>
</div>
<div class="ig">
<a
href="https://www.instagram.com/aspenne_dedm/"
target="_blank"
><svg
width="75"
height="80"
viewBox="0 0 80 80"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M57.9221 0H22.0765C9.90353 0 0 9.904 0 22.077V57.9226C0 70.096 9.90353 79.9995 22.0765 79.9995H57.9221C70.096 79.9995 79.9995 70.0955 79.9995 57.9226V22.077C80 9.904 70.096 0 57.9221 0ZM72.9021 57.9226C72.9021 66.1822 66.1822 72.9016 57.9226 72.9016H22.0765C13.8173 72.9021 7.09795 66.1822 7.09795 57.9226V22.077C7.09795 13.8178 13.8173 7.09795 22.0765 7.09795H57.9221C66.1817 7.09795 72.9016 13.8178 72.9016 22.077V57.9226H72.9021Z"
fill="currentColor"
/>
<path
d="M39.9998 19.3868C28.6331 19.3868 19.3859 28.634 19.3859 40.0007C19.3859 51.3669 28.6331 60.6136 39.9998 60.6136C51.3664 60.6136 60.6136 51.3669 60.6136 40.0007C60.6136 28.634 51.3664 19.3868 39.9998 19.3868ZM39.9998 53.5152C32.5474 53.5152 26.4839 47.4526 26.4839 40.0002C26.4839 32.5474 32.5469 26.4843 39.9998 26.4843C47.4526 26.4843 53.5157 32.5474 53.5157 40.0002C53.5157 47.4526 47.4521 53.5152 39.9998 53.5152Z"
fill="currentColor"
/>
<path
d="M61.4781 13.3683C60.1106 13.3683 58.7672 13.9219 57.8014 14.892C56.8309 15.8573 56.273 17.2012 56.273 18.5734C56.273 19.9415 56.8314 21.2849 57.8014 22.2549C58.7667 23.2202 60.1106 23.7786 61.4781 23.7786C62.8504 23.7786 64.1896 23.2202 65.1596 22.2549C66.1297 21.2849 66.6833 19.941 66.6833 18.5734C66.6833 17.2012 66.1297 15.8573 65.1596 14.892C64.1943 13.9219 62.8504 13.3683 61.4781 13.3683Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
<div class="under">
<p>© 2022 Aspenne</p>
</div>
</section>
<img
src="https://via.placeholder.com/145x140"
data-src="./src/topbtn.webp"
alt="Scroll to Top"
class="topbtn lazy"
width="145"
height="140"
/>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.5.0/dist/lazyload.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"
defer
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"
defer
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.14/lottie.min.js"
integrity="sha512-G1R66RZMhyLDEcAu92/Kv4sWNypnEiJcM6yhe0PNyiYDaMAKpMrJ6ZLR67xC/RMNGRa8Pm9TxtO8a98F6Ct+Gw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="./js/lazy.min.js"></script>
<script>
const anneani = bodymovin.loadAnimation({
container: document.getElementById("anne"),
path: "js/anne.json",
renderer: "svg",
loop: true,
autoplay: true,
});
anneani.setSpeed(0.5);
</script>
<script
src="./js/index.min.js"
defer
></script>
<script
src="./js/topbtn.min.js"
defer
></script>
<script
src="./js/menu.min.js"
defer
></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js"
defer
></script>
</body>
</html>