-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (105 loc) · 4.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tikus Kantor | State Burden Catcher</title>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="assets/rat-unicon.jpg">
</head>
<body>
<div class="screen">
<div class="start__container-wrap">
<div class="start__container">
<span class="start__container-left-pattern"></span>
<span class="start__container-right-pattern"></span>
<div class="start__container-wrap">
<h1>Tikus Kantor</h1>
<span class="start__container-span">State Burden Catcher</span>
</div>
<button class="btn" id="about" data-bs-toggle="modal" data-bs-target="#exampleModal">Disclaimer</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Disclaimer</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span class="text-black">
All characters and names in this game are disguised so that no party feels disadvantaged. This game was created to
criticize corruptors in Indonesia who like to drain people's money without leaving anything left.
</span>
</div>
</div>
</div>
</div>
<!-- Modal -->
<button class="btn" id="start">Play Game</button>
</div>
</div>
</div>
<div class="screen">
<div class="audio-badge__wrapper" id="audio_badge">
<div class="audio-badge__wrapper-content">
<div class="position-relative">
<img class="audio-badge__wrapper-content-badge" src="assets/tikusKantor.jpg" alt="Tikus Kantor">
<div class="bar-wrapper d-flex justify-content-center gap-2">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
<div class="audio-badge__wrapper-content-text">
<span>Tikus Kantor</span>
<span class="text-muted">Iwan Fals</span>
</div>
</div>
</div>
<h1>Which corruptor you want to beat the most?</h1>
<ul class="corruptor-list">
<li>
<button class="choose-corruptor-btn">
<span>Nowiantwo Setia</span>
<img src="https://png.pngtree.com/png-clipart/20210620/original/pngtree-pig-badger-brown-animal-furry-wild-png-image_6438655.jpg" alt="Set**">
</button>
</li>
<li>
<button class="choose-corruptor-btn">
<span>John G Chena</span>
<img src="https://www.pngmart.com/files/22/John-Cena-PNG-Transparent.png"
alt="Joh**">
</button>
</li>
<li>
<button class="choose-corruptor-btn">
<span>Rafaela</span>
<img src="assets/rat-transparent.png" alt="Rafael**">
</button>
</li>
<li>
<button class="choose-corruptor-btn">
<span>Gayung</span>
<img src="assets/racoon-2.png" alt="Gayu*">
</button>
</li>
</ul>
</div>
<div class="screen game_container" id="game-container">
<div class=""></div>
<h3 id="time" class="time">Time: 00:00</h3>
<h3 id="score" class="score">Score: 0</h3>
<h5 id="message" class="message">
Do you feel satisfied? <br>
Keep going until your annoyance is paid off!
</h5>
<h5 id="message_scored" class="message_scored">
Keep pressing hahahahah
</h5>
</div>
<script src="main.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>