-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
75 lines (72 loc) · 4.43 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
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="public/css/main.css">
<link rel="icon" type="image/x-icon" href="public/assets/favicon.ico">
<title>Pop Cat</title>
</head>
<body class="bg-pop-background bg-cover">
<!-- Content -->
<div class="container">
<div class="flex justify-center w-full fixed">
<p class="bg-white rounded-b-2xl px-10 py-5">😺 <span class="font-Poppins font-semibold text-xl">PopCat Click</span></p>
</div>
<div class="flex justify-end w-full fixed">
<p class="bg-white rounded-bl-2xl px-7 py-5">
<a href="https://www.instagram.com/safvvan_/" target="_blank"><i class="text-xl fab fa-instagram"></i></a>
<a href="https://github.com/Syafwan000" target="_blank"><i class="text-xl ml-5 fab fa-github"></i></a>
</p>
</div>
<div class="flex justify-center w-full fixed bottom-0">
<img id="popcat" onmousedown="openMouth()" onmouseup="closeMouth()" src="public/assets/close-mouth.png" alt="">
</div>
<div class="flex justify-center w-full fixed bottom-0">
<input class="bg-white px-10 py-5 rounded-t-2xl font-bold text-lg" id="counter" type="button" value="0">
</div>
<div class="flex justify-end w-full fixed bottom-0">
<h4 class="bg-white px-10 py-5 rounded-tl-2xl text-md text-center">
🎫 <span class="font-bold">PopCat Mode</span><br>
<span id="mode" class="text-green-600">Normal</span>
</h4>
</div>
</div>
<!-- Intro Modal -->
<div class="flex justify-center items-center h-screen w-full fixed bg-black bg-opacity-50 z-10" id="targetBegin">
<div class="bg-white rounded-2xl shadow-lg w-2/6">
<div class="border-b px-4 py-2 flex justify-center">
<h3 class="text-center text-xl my-5">👋 <span class="font-bold text-xl">Halo Selamat Datang di PopCat Click</span></h3>
</div>
<div class="text-center">
<p class="p-5">Halo kamu yang disana... iya kamu :3, sekarang kamu sedang memainkan game yang sangat simple, yang bernama <span class="font-medium">PopCat Click</span>, game ini cukup simple kamu hanya mengklik terus menerus pada gambar kucing dan raih skor setinggi tingginya untuk mendapat surprise rahasia. Mau tau apa rahasia surprisenya? makanya maenin dulu gamenya, nanti akan muncul surprise di setiap kamu mencapai skor tertentu.<br><br> <span class="text-red-500 font-medium">*btw ini gamenya gak ada autosave yah, jadi kalau kamu refresh webnya skornya bakal balik lagi ke angka 0*</span><br><br> <span class="font-bold">Enjoyyyy</span> 😀😉💪</p>
</div>
<div class="flex justify-center items-center w-100 border-t p-3">
<button id="begin" class="bg-green-800 focus:ring-4 focus:ring-green-200 px-3 py-2 my-3 rounded text-white">Gasslah</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 500 Click -->
<div class="hidden flex justify-center items-center h-screen w-full fixed bg-black bg-opacity-50 z-10" id="showGIF">
<div class="bg-white rounded-2xl shadow-lg w-2/6">
<div class="border-b px-4 py-2 flex justify-center">
<h3 class="text-center text-md my-5">🎉🎉 <span class="font-bold text-md">GG Gaming Adik Adik 500 Click</span> 🎉🎉</h3>
</div>
<div class="text-center">
<img class="w-full h-full" src="public/assets/windah.gif" alt="">
</div>
<div class="flex justify-center items-center w-100 border-t p-3">
<button id="closeGIF" class="bg-red-800 focus:ring-4 focus:ring-red-200 px-3 py-2 my-3 rounded text-white">Tutup</button>
</div>
</div>
</div>
</div>
</div>
<script src="public/js/main.js"></script>
<script src="public/js/modal.js"></script>
</body>
</html>