Better styles
[xogo.git] / index.html
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8"/>
6 <title>xogo</title>
7 <meta name="viewport"
8 content="width=device-width, initial-scale=1"/>
9 <link id="_common_css"
10 rel="stylesheet" href="/common.css"/>
11 </head>
12
13 <body>
14 <main>
15 <div id="gameInfos"></div>
16 <div id="boardContainer"></div>
17 <div id="gameStopped">
18 <h1>Game over</h1>
19 <div class="btn-wrap">
20 <button id="rematchBtn"
21 onClick="sendRematch()">
22 Rematch
23 </button>
24 <button class="cancel-something"
25 onClick="cancelRematch()">
26 Close
27 </button>
28 </div>
29 </div>
30 <div id="pendingRematch">
31 <div class="loader hour-glass"></div>
32 <div class="btn-wrap">
33 <button class="cancel-something"
34 onClick="cancelRematch()">
35 Cancel
36 </button>
37 </div>
38 </div>
39 <div id="newGame">
40 <button id="seekGame"
41 class="block-btn"
42 onClick="seekGame()">
43 Play!
44 </button>
45 <div id="ng-select">
46 <div class="select">
47 <select id="selectVariant"></select>
48 <span class="focus"></span>
49 </div>
50 <div class="btn-wrap">
51 <button id="playCustom"
52 onClick="showNewGameForm()">
53 Customize
54 </button>
55 </div>
56 </div>
57 <div id="ng-name" class="form-field">
58 <div class="form-field__control">
59 <label for="myName" class="form-field__label">Name</label>
60 <input id="myName"
61 type="text"
62 required
63 class="form-field__input"
64 onChange="setName()"/>
65 </div>
66 </div>
67 <div id="footer">
68 <p>
69 <a class="left-link" href="https://discord.gg/QC7Aa5WMYp">
70 <img src="/assets/discord.svg"/>
71 Discord
72 </a>
73 <a class="right-link" href="https://github.com/yagu0/xogo">
74 GitHub
75 <img src="/assets/github.svg"/>
76 </a>
77 </p>
78 </div>
79 </div>
80 <div id="pendingSeek">
81 <div class="loader hour-glass"></div>
82 <div class="btn-wrap">
83 <button class="cancel-something"
84 onClick="cancelSeek()">
85 Cancel
86 </button>
87 </div>
88 </div>
89 <div id="newGameForm">
90 <fieldset>
91 <div class="select">
92 <select id="selectColor">
93 <option value="">Any color</option>
94 <option value="w">Player 1</option>
95 <option value="b">Player 2</option>
96 </select>
97 <span class="focus"></span>
98 </div>
99 </fieldset>
100 <fieldset id="gameOptions"></fieldset>
101 <div class="btn-wrap">
102 <button onClick="getGameLink()">Get link</button>
103 <button onClick="backToNormalSeek()">Cancel</button>
104 </div>
105 <div id="gameLink"></div>
106 </div>
107 </main>
108
109 <script src="/parameters.js"></script>
110 <script src="/variants.js"></script>
111 <script src="/app.js"></script>
112 </body>
113 </html>