-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
96 lines (96 loc) · 6.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pIšQworky</title>
<link rel="stylesheet" href="styles/output.css">
<link rel="icon" type="image/x-icon" href="./assets/img/favicon.png">
<script defer src="config.js"></script>
<script defer src="script/lang.js"></script>
<script defer src="script/onLoad.js"></script>
<script defer src="script/analytics.js"></script>
<script defer src="script/index.js"></script>
</head>
<body>
<!-- menu -->
<div id="menu" class="center min-h-[100dvh] bg-blue">
<img src="assets/img/logo.svg" class="w-6/12 mt-36 mb-7">
<div class="center gap-20">
<div class="center gap-4 text-center">
<p text="menuText1">Umíš to s křížky a kolečky?</p>
<p text="menuText2">Tak se předveď. Pět v řadě vyhrává.</p>
</div>
<div class="center gap-5">
<button text="menuBackToGameButton" id="game-back-button" onclick="startGame()" class="hidden">Vrátit do hry</button>
<button text="menuNewGameButton" onclick="startGame(); clearGame()">Nová hra</button>
</div>
</div>
<img text="menuQRImageSrc" src="assets/img/cs/qr_code_light.svg" class="absolute right-0 bottom-0 m-10 size-56">
</div>
<!-- game -->
<div id="game" class="hidden min-h-[100dvh] flex-col">
<header class="flex justify-between items-center h-24 px-12 bg-blue">
<div class="flex items-center gap-10 h-full">
<img src="assets/img/logo.svg" class="h-[60%]">
<img src="assets/img/amos.svg" class="h-[60%]">
</div>
<p text="gameMenuButton" onclick="endGame()" class="text-2xl cursor-pointer">Menu</p>
</header>
<div class="flex gap-7 flex-grow w-full mt-8">
<div class="flex-grow ml-7">
<div class="board relative">
<div id="win-popup-x" class="win-popup absolute items-center justify-center hidden size-full bg-[radial-gradient(closest-side,_var(--tw-gradient-stops))] from-blue/40 to-blue/0">
<div class="relative px-5 py-8 text-center bg-white rounded-md win-back win-back-x">
<div>
<p text="gameWinCross" class="text-black font-bold">Křížek vyhrál</p>
<div class="flex flex-col items-center gap-3 w-48 pt-6 mx-20">
<button text="gameWinButton" onclick="clearGame()" class="w-full px-4 py-2 bg-blue text-white">Nová hra</button>
<button text="gameWinRecordButton" onclick="playGameRecord()" class="w-full py-0 text-blue">Přehrání hry</button>
</div>
</div>
</div>
</div>
<div id="win-popup-o" class="win-popup absolute items-center justify-center hidden size-full bg-[radial-gradient(closest-side,_var(--tw-gradient-stops))] from-red/40 to-red/0">
<div class="relative px-5 py-8 text-center bg-white rounded-md win-back win-back-o">
<div>
<p text="gameWinCircle" class="text-black font-bold">Kolečko vyhrálo</p>
<div class="flex flex-col items-center gap-3 w-48 pt-6 mx-20">
<button text="gameWinButton" onclick="clearGame()" class="w-full px-4 py-2 bg-darkRed text-white">Nová hra</button>
<button text="gameWinRecordButton" onclick="playGameRecord()" class="w-fit py-0 text-darkRed">Přehrání hry</button>
</div>
</div>
</div>
</div>
<div id="win-popup-draw" class="win-popup absolute items-center justify-center hidden size-full bg-[radial-gradient(closest-side,_var(--tw-gradient-stops))] from-darkGray/40 to-red/0">
<div class="relative px-5 py-8 text-center bg-white rounded-md win-back win-back-draw">
<div>
<p text="gameWinDraw" class="text-black font-bold">Remíza</p>
<div class="flex flex-col items-center gap-3 w-48 pt-6 mx-20">
<button text="gameWinButton" onclick="clearGame()" class="w-full px-4 py-2 bg-darkGray text-white">Nová hra</button>
<button text="gameWinRecordButton" onclick="playGameRecord()" class="w-fit py-0 text-darkGray">Přehrání hry</button>
</div>
</div>
</div>
</div>
<!-- Board will generate here -->
</div>
</div>
<div class="w-44 min-w-44 mr-7">
<h1 text="gameCTATitle" class="text-xl text-blue font-bold">Vyhráváš? Tak nám to přijď předvést na pIšQworky!</h1>
<br>
<p text="gameCTADescription" class="text-black text-base">Letos už po <span id="xo-year"></span>. organizujeme mistrovství škol Česka a Slovenska v této logické hře. Přihlásit se můžeš společně se svým týmem, nebo bojovat sám za sebe v kategorii jednotlivců.</p>
<br>
<p text="gameCTAText" class="text-black text-base font-bold">Chceš vědět víc? Koukni na náš web <span class="highlight" onclick="toggleXOIframe()">pisqworky.cz</span>, budeme se těšit.</p>
</div>
</div>
<img text="gameQRImageSrc" src="assets/img/cs/qr_code_dark.svg" class="absolute right-0 bottom-0 mr-7 mb-[2.95rem] size-44">
</div>
<div class="xoIframe hidden absolute top-0 z-10 items-center justify-center min-w-[100dvw] min-h-[100dvh] bg-black/40">
<div class="relative w-[93%]">
<img src="assets/img/x_red.svg" class="absolute z-20 -top-5 -right-5 w-14 p-3 bg-white rounded-2xl shadow-2xl cursor-pointer" onclick="toggleXOIframe()">
<iframe text="iframeSrc" src="https://pisqworky.cz" class="w-full min-h-[93dvh] rounded-2xl bg-gray" frameborder="0"></iframe>
</div>
</div>
</body>
</html>