forked from mamadceto/H-P-G
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (89 loc) · 4.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promo Key Generator [CeTo]</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="generated-keys-page">
<div class="main-container">
<header>
<h1>Hamster Promo Key Generator [CeTo]</h1>
</header>
<section class="game-selection">
<h2>Select Your Game : </h2>
<div class="game-grid">
<div class="game-card" data-game="9">
<img src="https://cdn.hamsterkombat.io/mud_racing/image.webp" alt="Mud Racing">
<span>Mud Racing</span>
</div>
<div class="game-card" data-game="8">
<img src="https://cdn.hamsterkombat.io/mow_trim/image.webp" alt="Mow and Trim">
<span>Mow and Trim</span>
</div>
<div class="game-card" data-game="7">
<img src="https://cdn.hamsterkombat.io/polysphere/image.webp" alt="Polysphere">
<span>Polysphere</span>
</div>
<div class="game-card" data-game="6">
<img src="https://cdn.hamsterkombat.io/twerk/image.webp" alt="Twerk Race 3D">
<span>Twerk Race 3D</span>
</div>
<div class="game-card" data-game="5">
<img src="https://cdn.hamsterkombat.io/merge_away/image.webp" alt="Merge Away">
<span>Merge Away</span>
</div>
<div class="game-card" data-game="3">
<img src="https://cdn.hamsterkombat.io/my_clone_army/image.webp" alt="My Clone Army">
<span>My Clone Army</span>
</div>
<div class="game-card" data-game="2">
<img src="https://cdn.hamsterkombat.io/chain_cube/image.webp" alt="Chain Cube 2048">
<span>Chain Cube 2048</span>
</div>
<div class="game-card" data-game="4">
<img src="https://cdn.hamsterkombat.io/train_miner/image.webp" alt="Train Miner">
<span>Train Miner</span>
</div>
<div class="game-card" data-game="1">
<img src="https://cdn.hamsterkombat.io/bikeride/image.webp" alt="Bike Ride 3D">
<span>Bike Ride 3D</span>
</div>
</div>
</section>
<section class="key-generation hidden">
<h2>Generate Keys</h2>
<div id="selectedGameContainer" class="hidden">
<div id="selectedGameCard" class="game-card"></div>
</div>
<div class="key-input">
<label for="keyRange">Select Number of Keys</label>
<input type="number" id="keyRange" min="1" max="10" value="1">
</div>
<button id="startBtn">Generate Keys</button>
</section>
<section id="progressContainer" class="hidden">
<div class="progress-bar">
<div id="progressBar"></div>
</div>
<p id="progressText">0%</p>
<p id="progressLog">Starting...</p>
</section>
<section id="keyContainer" class="hidden">
<h2>Generated Keys : </h2>
<div id="keysList"></div>
<button id="copyAllBtn">Copy All Keys</button>
<p id="copyStatus" class="hidden">Keys copied to clipboard!</p>
</section>
<footer>
<p>This project is <a href="https://github.com/mamadceto/H-P-G" target="_blank">open source</a> and created by CeTo.</p>
</footer>
</div>
<div id="errorContainer" class="hidden">
<p id="errorMessage" class="error-message"></p>
</div>
<script src="script.js"></script>
</body>
</html>