-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (62 loc) · 2.94 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris Game</title>
<!-- Style File Link -->
<link rel="stylesheet" href="./assets/css/tailwind.css">
</head>
<body class="bg-c-body">
<section class="max-w-[320px] h-[100vh] mx-auto py-2">
<!-- Header -->
<div class="text-center mb-4">
<h1 class="text-c-title text-[2.5rem] font-semibold">Tetris Game</h1>
</div>
<!-- Root Main Area -->
<div class="w-[320px] flex gap-x-[20px]">
<!-- Root View Area -->
<div class="w-[200px] bg-c-container flex flex-wrap h-[400px]" id="root-view"></div>
<!-- Root Side Area -->
<div class="w-[100px] flex flex-col">
<!-- Play/Pause Button -->
<button class="mb-2" id="start-btn">
<img class="w-[40px] h-auto" src="./src/img/pause.png" id="btn-img" alt="Btn Icon">
</button>
<span class="text-[1.5rem] font-semibold text-c-title mb-2">Next</span>
<!-- Next Shape View -->
<div class="w-[80px] grid grid-cols-[repeat(4,1fr)] bg-c-container mb-2" id="next-shape"></div>
<!-- Player Score -->
<h3 class="text-[1.25rem] text-c-title font-semibold mb-2">Score
<span class="block border border-solid border-c-title px-2 mt-2" id="player-score">0</span>
</h3>
<!-- Lines -->
<h3 class="text-[1.25rem] text-c-title font-semibold mb-2">Lines
<span class="block border border-solid border-c-title px-2 mt-2" id="lines-cleared">0</span>
</h3>
<!-- Level -->
<h3 class="text-[1.25rem] text-c-title font-semibold mb-2">Level
<span class="block border border-solid border-c-title px-2 mt-2" id="levels-cleared">0</span>
</h3>
</div>
</div>
<!-- Control Area -->
<div class="w-[200px] mx-auto flex justify-between mt-6">
<button type="button" id="left">
<img class="w-[40px]" src="./src/img/left.png" alt="left control img">
</button>
<button type="button" id="down">
<img class="w-[40px]" src="./src/img/down.png" alt="down control img">
</button>
<button type="button" id="right">
<img class="w-[40px]" src="./src/img/right.png" alt="right control img">
</button>
<button type="button" id="rotate">
<img class="w-[40px]" src="./src/img/redo.png" alt="rotate control img">
</button>
</div>
</section>
<!-- Script File Link -->
<script src="./src/js/script.js"></script>
</body>
</html>