-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
108 lines (90 loc) · 4.91 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
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<title> Gomoku Sensei </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Gomoku Sensei">
<meta name="apple-mobile-web-app-title" content="Gomoku Sensei">
<meta name="theme-color" content="#CE2633">
<meta name="msapplication-navbutton-color" content="#CE2633">
<meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
<meta name="msapplication-starturl" content="/">
<meta name="description" content="Gomoku Sensei is a research project aiming to develop a novel, Monte Carlo Tree Search AI.">
<link rel="icon" type="image/png" sizes="192x192" href="./res/icons/favicon.png">
<link rel="apple-touch-icon" type="image/png" sizes="192x192" href="./res/icons/maskable/maskable_icon_x192.png">
<link rel="stylesheet" href="./src/css/pages/main.css">
<link rel="manifest" href="manifest.webmanifest">
<script> navigator.serviceWorker.register("sw.js") </script>
</head>
<body>
<!-- Ensure empty space in upper-left. -->
<whitespace></whitespace>
<header>
<h3 id="header-text"> Home </h3>
</header>
<nav>
<button id="home-button" class="menu__button red__button">
<span class="material-icons-round"> home </span>
Home
</button>
<button disabled id="game-button" class="menu__button">
<span class="material-icons-round"> gamepad </span>
Game
</button>
<button id="rules-button" class="menu__button">
<span class="material-icons-round"> gavel </span>
Rules
</button>
<button id="settings-button" class="menu__button">
<span class="material-icons-round"> settings </span>
Settings
</button>
<button id="about-button" class="menu__button">
<span class="material-icons-round"> help </span>
About
</button>
</nav>
<main>
<!-- `iframe` changes `src` dynamically. -->
<iframe id="page-frame" class="loaded" src="./src/html/home.html" title="Main page content" frameborder="0" scrolling="no"> </iframe>
</main>
<!-- While in-line style is badm without this, hidden elements flash on screen on-load. -->
<modal style="opacity: 0;">
<header>
<h3 id="model-header"> Rules </h3>
<span class="close-button material-icons-round"> close </span>
</header>
<iframe id="modal-frame" src="./src/html/rules.html" title="Modal page content" frameborder="0" scrolling="no"> </iframe>
</modal>
<modal id="pop-up" style="opacity: 0;">
<img id="modal-icon" src="./res/icons/favicon.png" alt="App logo" />
<h3 id="modal-header"> Welcome to Gomoku Sensei </h3>
<p class="description__text">
This software was developed as part of a research project for the University of Strathclyde. If you wish to participate in the corresponding study, please visit the form linked below. <br>
<br> Add this web app to your homescreen by pressing the <span class="material-icons-round"> ios_share </span> button on iOS, or the <i> install </i> button on Chromium-based browsers. For more information, visit <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installing"
target="_blank">this page</a>.
</p>
<div class="row__container">
<button onclick="window.open('https://github.com/HaresMahmood/gomoku-sensei','_blank')">
<span class="material-icons-round"> code </span>
<span> GitHub </span>
</button>
<button onclick="window.open('https://forms.gle/eawUsLhRCkBiZdvP7','_blank')">
<span class="material-icons-round"> feed </span>
<span> Participate </span>
</button>
<button class="close-button red__button">
<span class="material-icons-round"> east </span>
<span> Continue </span>
</button>
</div>
</modal>
<!-- Sits behind `modal`s to ensure user can't interract with UI when `modal` is active. -->
<div id="overlay" class="overlay__container"></div>
</body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script type="module" src="./dist/script/defaultScript.js"></script>
</html>