memory.html (1889B) download
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Memory</title>
5 <link rel="stylesheet" href="css/main.css" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 </head>
8 <body>
9 <div class ="container">
10 <div class ="header">
11 <div class ="menu_btn" onclick="menu()">
12 <div class="line"></div>
13 <div class="line"></div>
14 <div class="line"></div>
15 </div>
16 <div class="title">Memory</div>
17 <div class="restart_button">
18 <img class="restart" src="img/restart.png" alt="restart button">
19 </div>
20 </div>
21 <div class="menu" id="menu">
22 <div id="theme">
23 <select id="picture-select" onchange="onSelect()">
24 <option value="dog">Doggos</option>
25 <option value="cat">Kitties</option>
26 </select>
27 <label for="theme">Select a theme</label>
28 </div>
29 <div id="card_color">
30 <input type="color" id="closed_card" name="closed_card" value="#df9a06" onchange="colorChange()">
31 <label for="closed_card">Closed card</label><br>
32 <input type="color" id="found_card" name="found_card" value="#df9a06" onchange="colorChange()">
33 <label for="found_card">Found card</label>
34 </div>
35 </div>
36 <div class="game_state">
37 <span id='login'></span>
38 <div id="game_time">Time: 0sec</div>
39
40 <div id="found_pairs">Pairs: <span id='pairs'>0</span></div>
41 <div id="progress_bar"></div>
42 </div>
43
44 <div aria-label="game board" class ="game_board" id="game_board">
45
46 </div>
47 <div class ="footer">
48 <div class="high_scores">
49 <h2> Top 5 </h2>
50 <ul id="top_5" aria-label="Top 5">
51 </ul>
52 </div>
53 <div id="average_time"><h2>Average playtime: 420s</h2></div>
54 </div>
55 </div>
56 <script type="text/javascript" src="backend.js"></script>
57 <script type="text/javascript" src="memory.js"></script>
58 ></script>
59 </b