-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (66 loc) · 3.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game | Vite</title>
</head>
<body>
<div class="relative w-full h-screen bg-[#222] z-0">
<!-- Login Screen -->
<div id="login-screen" class="absolute inset-0 flex flex-col z-10" style="display: flex">
<div class="m-auto w-1/3 h-fit px-6 py-10 bg-white rounded flex flex-col">
<h1 class="mb-16 text-3xl font-semibold">Login</h1>
<form class="w-full flex flex-col" id="login-form">
<label class="mb-2 text-sm font-light" for="playerName">Player Name</label>
<input
class="mb-4 w-full h-12 px-3 bg-white rounded border border-gray-200 outline-none text-lg shadow"
id="playerName"
name="playerName"
type="text"
autocomplete="off"
/>
<label class="mb-2 text-sm font-light" for="playerClass">Select Class</label>
<select
class="mb-12 w-full h-12 px-3 bg-white rounded border border-gray-200 outline-none text-lg shadow"
id="playerClass"
name="playerClass"
>
<option value="warrior">Warrior</option>
<option value="mage">Mage</option>
<option value="rogue">Rogue</option>
<option value="priest">Priest</option>
</select>
<button
class="mb-4 w-full h-16 px-3 bg-red-900 rounded border border-gray-200 outline-none text-2xl shadow text-white font-semibold"
type="submit"
>
Login
</button>
</form>
</div>
</div>
<div id="gui" class="absolute inset-0 flex flex-col z-10 px-4" style="display: none">
<span class="w-full flex">
<button class="px-3 h-8 bg-red-800 text-white font-semibold rounded">Top Left</button>
<button class="mx-auto px-3 h-8 bg-red-800 text-white font-semibold rounded">Top Center</button>
<button class="px-3 h-8 bg-red-800 text-white font-semibold rounded">Top Right</button>
</span>
<span class="my-auto w-full flex">
<button class="px-3 h-8 bg-red-800 text-white font-semibold rounded">Middle Left</button>
<button class="mx-auto px-3 h-8 bg-red-800 text-white font-semibold rounded">Middle Center</button>
<button class="px-3 h-8 bg-red-800 text-white font-semibold rounded">Middle Right</button>
</span>
<span class="w-full flex">
<button class="px-3 h-8 bg-red-800 text-white font-semibold rounded">Bottom Left</button>
<button class="mx-auto px-3 h-8 bg-red-800 text-white font-semibold rounded">Bottom Center</button>
<button class="px-3 h-8 bg-red-800 text-white font-semibold rounded">Bottom Right</button>
</span>
</div>
<!-- Game Canvas -->
<canvas id="c"></canvas>
</div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>