-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinstruction.html
537 lines (514 loc) · 38.1 KB
/
instruction.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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>instruction</title>
<link rel='stylesheet' href='../src/static/css/bootstrap-5.0.2-dist/bootstrap.min.css'>
<link rel="stylesheet" href="../src/static/css/main.css">
<script src="../static/js/jquery3.5.1.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../src/static/js/bootstrap/js/bootstrap.bundle.js"></script>
<script src="../src/static/js/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/js/vue.js"></script>
</head>
<body color="#F3B977" style="margin: 0px; padding: 0px;">
<header class="row image">
<img src="../src/static/assets/Header.png">
<div class="col-lg-4">
<div class="row justify-content-center">
<div class="col-6 col-md-8 header" style="position:absolute; left: 300px; top: 42px;">
<a href="../complete/game_play.html"
style="color:aliceblue; font-weight:bold; text-decoration:none;">返回
<img src="../src/static/assets/dashicons-arrow-left-alt.svg" alt="logo"
style="width: 60px; height:60px;">
</a>
</div>
</div>
</div>
</header>
<div class="row bg_color">
<div class="col-lg">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
aria-label="Slide 6"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row justify-content-center" style="margin: 5rem 0rem 5rem 8rem;">
<div class="col-4">
<img src="../src/static/assets/Mask Group.png"
style="width: 350px; height: 743px; margin: 5rem 0rem 10rem 20rem;">
</div>
<div class="col-7" style="margin-top: 2rem; margin-left: 5rem;">
<div class="row">
<div class="col-5 title-content">
小明，避開奇怪的包裝吧！
</div>
</div>
<div class="row">
<div class="col-8 content" style="padding: 1rem; ">
<div style="padding: 10px 0px 0px 10px;">小明從小出生在一個貧困的家庭，</div>
<div style="padding: 10px 0px 0px 10px;">家裡的經濟壓力和課業壓力逼得他喘不過氣，</div>
<div style="margin-bottom: 1rem; padding: 10px 0px 0px 10px;">
此刻出現了一位學長，伸手遞了有點奇怪的糖果，</div>
<div style="margin-bottom: 1rem; padding: 10px 0px 0px 10px;">
學長說：「很累吧，試試看『這個酷東西』，</div>
<div style="margin-bottom: 1rem; padding: 10px 0px 0px 10px;">可以讓你很快樂喔。」</div>
<div style="padding: 10px 0px 0px 10px;">小明感受到了不太對勁...要聽學長的話嗎?</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center" style="margin: 5rem 0rem 5rem 8rem;">
<div class="col-6" style="margin-top: 2rem; margin-left: 5rem;">
<div class="row justify-content-center">
<div class="col-2" style="margin-left: 8%;"></div>
<div class="col-3 title-content">
遊戲劇情
</div>
<div class="col-5"></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-2"></div>
<div class="col-5 content" style="padding: 1rem; ">
<div style="padding: 10px 70px 70px 70px; text-align: center;">
放學的小明一個人走在路上，因為考試壓力大，加上最近媽媽說家裡錢不夠，沒辦法給零用錢買零食，所以邊走肚子邊咕嚕咕嚕的叫著，突然，小明遇到認識的人走向前，手裡拿了一堆糖果......
</div>
<div style="padding: 0px 0px 0px 10px; text-align: center;">但是必須要小心避開新興毒品的特殊包裝才行！
</div>
</div>
<div class="col-3"></div>
</div>
<div class="row justify-content-center align-items-center"
style="margin-top: 2rem; margin-left: 5rem; padding-bottom: 5rem;">
<div class="col-3"></div>
<div class="col-2"
style="margin: 0px; color: #3F3F3F; padding: 10px 0px 0px 0px; font-size: 22px; font-weight: bold;">
繼續往右滑，看毒品有哪些</div>
<div class="col-1" style="margin-left: 0px; padding: 0px; ">
<img src="../src/static/assets/dashicons-arrow-right.svg"
style="width: 96px; height: 96px;">
</div>
<div class="col-3"></div>
</div>
</div>
</div>
<div class="carousel-item" style="overflow:visible;">
<div class="row justify-content-center" style="margin: 5rem 0rem 5rem 8rem;">
<div class="col-12" style="margin-top: 2rem;">
<div class="row justify-content-center g-0">
<div class="col-2 title-content2" style="text-align: center; margin-right: 0rem;">
毒品分級</div>
<div class="col-5 title-contentwhite"
style="text-align: center; margin-left: 0rem;">
常見濫用藥物及分級說明，點點看照片找找看是哪一級的毒品吧!</div>
<div class="col-5"></div>
</div>
<div class="row no-gutters" style="padding-top: 10rem; padding-bottom: 15rem;">
<div class="col-2"></div>
<div class="col-2">
<a href="#" data-toggle="popover1" title="海洛因" data-content="Some content inside the popover">s
<img src="../src/static/assets/海洛.png" style="height: 113px; width: 251px;">
</a>
</div>
<div class="col-2">
<a href="#" data-toggle="popover" title="Popover Header"
data-content="Some content inside the popover">Toggle popover</a>
</div>
<div class="col-2">
<a tabindex="0" class="btn btn-lg btn-danger" role="button"
data-toggle="popover" data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?">Dismissible
popover</a>
</div>
<div class="col-2">
<button type="button" class="btn btn-lg pop" data-bs-toggle="popover"
data-bs-placement="top" title="海洛因" data-bs-content="別名">
<img src="../src/static/assets/海洛.png" style="height: 113px; width: 251px;">
</button>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center" style="margin: 6rem 0rem 0.8rem 0rem;">
<div class="col-8">
<div class="card mb-3" style="margin-top: 2rem; height: 344px;">
<div class="row g-0">
<div class="col-md-4">
<img src="../src/static/assets/Q3.png" style="height: 345px; width: 353px;"
class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<div class="row g-0">
<h5 class="card-title">笑氣</h5>
<p class="card-text">笑氣是「一氧化二氮、氧化亞氮」(N2O)
，無色有甜味，主要用於食品加工、醫療及工業半導體等，未料近年卻偷偷流入市面，被包裝成「派對助興」的催化劑，施用後會不自主想笑，有短時間的放鬆愉悅感。
</p>
</div>
<div class="row g-0 justify-content-start align-items-center">
<div class="col-3 title-content2"
style="margin: 2rem 2rem 2rem 0rem; text-align: center; font-size: 24px;">
中毒症狀
</div>
<div class="col-8 card-textSmall">
輕微會有噁心頭暈、耳鳴、疲勞及注意力難集中的症狀。嚴重則會有幻覺、失憶、大小便失禁、四肢萎縮及癱瘓
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center" style="margin: 0rem 0rem 2rem 0rem;">
<div class="col-8">
<div class="card mb-3" style="margin-top: 1rem; height: 344px;">
<div class="row g-0">
<div class="col-md-4">
<img src="../src/static/assets/Q3.png" style="height: 345px; width: 353px;"
class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<div class="row">
<h5 class="card-title">揮發性有機溶劑(VOS)</h5>
<p class="card-text">
揮發性有機溶劑(VOS)有強力膠、汽油及香蕉水，吸入後能迅速改變心境，使人精神振奮，有陶醉、朦朧的欣快感覺，產生與酒精類似的「酩酊狀態」。長期吸聞就會產生生理和心理的依賴，「就像毒品一樣」。
</p>
</div>
<div class="row g-0 justify-content-start align-items-center">
<div class="col-3 title-content2"
style="margin: 2rem 2rem 2rem 0rem; text-align: center; font-size: 24px;">
中毒症狀
</div>
<div class="col-8 card-textSmall">
損害吸食者的神經中樞系統與內臟器官。長期吸聞後會損壞大腦、免疫系統、肝臟等。除了會產生幻覺外，還會出現記憶力衰退、不協調甚至死亡
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row" style="margin: 5rem 0rem 5rem 0rem;">
<div class="col" style="margin-top: 2rem;">
<div class="row justify-content-center g-0">
<div class="col-2 title-content2" style="text-align: center; margin-right: 0rem;">
新興毒品</div>
<div class="col-5 title-contentwhite" style="text-align: left; margin-left: 0rem;">
這些毒品都用可愛的包裝，都會偽裝成好吃的糖果，玩家必須避開新興毒品偽裝的糖果包裝！</div>
<div class="col-5"></div>
</div>
<div class="card-group justify-content-center" style="margin-top: 2rem;">
<div class="row g-0 justify-content-center">
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/跳跳糖、科學麵.png" class="card-img-top"
style="width: 312px; height: 300px;">
<div class="card-body">
<div class="row g-0">
<div class="drug-title"
style="text-align: center; margin: 0rem 0rem 0rem 1rem;">跳跳糖、科學麵
</div>
<div class="row g-0" style="background-color: #fff; margin: 0rem 0rem 0rem 1rem; border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.1));">
<div class="drug-text"
style="text-align: center; font-size: 24px; margin-top: 1.2rem;">
外觀
</div>
<div class="drug-text"
style="text-align: center; margin-top: 1rem; padding-bottom: 2.7rem;">
口味及香味都和零食相似</div>
</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/poison4.png" class="card-img-top"
style="width: 312px; height: 300px;">
<div class="card-body">
<div class="row g-0">
<div class="drug-title"
style="text-align: center; margin: 0rem 0rem 0rem 1rem;">
小熊軟糖</div>
<div class="row g-0" style="background-color: #fff; margin: 0rem 0rem 0rem 1rem; border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.1));">
<div class="drug-text"
style="text-align: center; font-size: 24px; margin-top: 1.2rem;">
外觀</div>
<div class="drug-text"
style="text-align: center; margin-top: 1rem; padding-bottom: 2.7rem;">
糖果、軟糖狀</div>
</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/poison2.png" class="card-img-top"
style="width: 312px; height: 300px;">
<div class="card-body">
<div class="row g-0">
<div class="drug-title"
style="text-align: center; margin: 0rem 0rem 0rem 1rem;">
毒咖啡包</div>
<div class="row g-0" style="background-color: #fff; margin: 0rem 0rem 0rem 1rem; border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.1));">
<div class="drug-text"
style="text-align: center; font-size: 24px; margin-top: 1.2rem;">
外觀</div>
<div class="drug-text"
style="text-align: center; margin-top: 1rem; padding-bottom: 1rem;">
常見的三合一咖啡、柴包形式出現、混合多種毒品在內</div>
</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/poison5.png" class="card-img-top"
style="width: 312px; height: 300px;">
<div class="card-body">
<div class="row g-0">
<div class="drug-title"
style="text-align: center; margin: 0rem 0rem 0rem 1rem;">
金剛</div>
<div class="row g-0" style="background-color: #fff; margin: 0rem 0rem 0rem 1rem; border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.1));">
<div class="drug-text"
style="text-align: center; font-size: 24px; margin-top: 1.2rem;">
外觀</div>
<div class="drug-text"
style="text-align: center; margin-top: 1rem; padding-bottom: 2.7rem;">
粉末狀、類似梅子粉</div>
</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/poison2.png" class="card-img-top"
style="width: 312px; height: 300px;">
<div class="card-body">
<div class="row g-0">
<div class="drug-title"
style="text-align: center; margin: 0rem 0rem 0rem 1rem;">
浴鹽</div>
<div class="row g-0" style="background-color: #fff; margin: 0rem 0rem 0rem 1rem; border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.1));">
<div class="drug-text"
style="text-align: center; font-size: 24px; margin-top: 1.2rem;">
外觀</div>
<div class="drug-text"
style="text-align: center; margin-top: 1rem; padding-bottom: 2.7rem;">
外型結晶與沐浴用鹽類似</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row" style="margin: 1rem 0rem 0rem 0rem;">
<div class="col" style="margin-top: 2rem;">
<div class="row justify-content-start g-0">
<div class="col-2"></div>
<div class="col-2 title-content2" style="text-align: center; margin: 0rem; height: 68px;">
正常的糖果</div>
<div class="col-4"></div>
<div class="col-2"
style="text-align: center; margin-right: 0px; margin-bottom: 0px;">
<a class="btn start_button" href="../" role="button">開始遊戲</a>
</div>
</div>
<div class="row justify-content-start g-0" style="margin: 2rem 10rem;">
<div class="col-1"></div>
<div class="col-2 card"
style="width: 15rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety3.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="game-text"
style="text-align: center; margin: 0rem 1rem;">
正常王子麵</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 15rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety5.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="game-text"
style="text-align: center; margin: 0rem 1rem;">
正常梅子粉</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 15rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety2.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="game-text"
style="text-align: center; margin: 0rem 1rem;">
正常咖啡包</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 15rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety1.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="game-text"
style="text-align: center; margin: 0rem 1rem;">
正常跳跳糖果</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 15rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety4.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="game-text"
style="text-align: center; margin: 0rem 1rem;">
正常小熊軟糖</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin: 0rem 0rem 5rem 0rem;">
<div class="col" style="margin-top: 0rem;">
<div class="row justify-content-start g-0">
<div class="col-2"></div>
<div class="col-2 title-content2" style="text-align: center; margin: 0rem;">
要避開的新興毒品</div>
<div class="col-4"></div>
<div class="col-2"></div>
</div>
<div class="row justify-content-start g-0" style="margin: 2rem 10rem;">
<div class="col-1"></div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety3.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="have-drug-text"
style="text-align: center; margin: 0rem 1rem;">
有毒王子麵</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety5.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="have-drug-text"
style="text-align: center; margin: 0rem 1rem;">
有毒梅子粉</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety2.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="have-drug-text"
style="text-align: center; margin: 0rem 1rem;">
有毒咖啡包</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety1.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="have-drug-text"
style="text-align: center; margin: 0rem 1rem;">
有毒跳跳糖果</div>
</div>
</div>
</div>
<div class="col-2 card"
style="width: 18rem; background: transparent; border: transparent;">
<img src="../src/static/assets/new/sweety4.png" class="card-img-top"
style="width: 200px; height: 176px; margin-left: 3rem;">
<div class="card-body">
<div class="row g-0">
<div class="have-drug-text"
style="text-align: center; margin: 0rem 1rem;">
有毒小熊軟糖</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('[data-toggle="popover1"]').popover();
});
</script>
</html>