-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path265252739.html
80 lines (76 loc) · 5.89 KB
/
265252739.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
<!-- spot-diff-practice -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spot the Differences Game</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/spot-diff.css">
<script src="https://kit.fontawesome.com/fe678f59d4.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- the overlays that will be displayed when the user succesfully finishes a round -->
<div id="overlay">
<div id="overlay-card">
<h2>Great job! You have succesfully completed this round!</h2>
<i class="fa-solid fa-circle-check fa-5x" style="color: #505168;"></i>
<br><br>
<a href="289922856.html">Click here to continue</a>
</div>
</div>
<div class="wrapper" id="practice">
<header>
<div class="time">
<label id="minutes">00</label>
<label id="colon">:</label>
<label id="seconds">00</label>
</div>
<a href="289922856.html" id="skip">Skip Practice Round</a>
</header>
<br>
<h1>Spot the Differences: Practice</h1>
<div class="container" id="wrap">
<div id="diff">Differences Spotted:  <div id="counter">0</div></div>
<!-- phone-oriented image -->
<img src="images/fox-phone.png" class="phone" alt="spot the differences image" usemap="#phone">
<map name="phone">
<!-- Image Map Generated by http://www.image-map.net/ -->
<area id="one" coords="633,84,706,80,748,107,755,162,713,219,633,225,591,158" shape="poly">
<area id="two" coords="1651,475,1762,432,1826,461,1833,531,1773,584,1686,602,1610,547" shape="poly">
<area id="three" coords="1031,812,1130,779,1165,899,1050,947" shape="poly">
<area id="four" coords="373,756,428,758,465,795,467,855,430,907,366,910,335,862,342,802" shape="poly">
<area id="five" coords="320,748,218,758,154,802,108,873,115,931,179,965,239,991,312,990" shape="poly">
<area id="six" coords="1455,991,1388,1042,1342,1100,1313,1189,1299,1291,1308,1365,1331,1420,1356,1464,1395,1505,1306,1542,1269,1487,1243,1425,1221,1360,1220,1266,1227,1182,1241,1093,1290,1016,1343,963,1389,938" shape="poly">
<area id="seven" coords="1508,1169,1552,1155,1589,1158,1610,1181,1622,1225,1612,1289,1575,1324,1511,1306,1488,1236" shape="poly">
<area id="eight" coords="1665,1242,1684,1183,1751,1185,1782,1219,1783,1284,1753,1365,1679,1397,1619,1367,1635,1302" shape="poly">
<area id="nine" coords="396,1365,478,1380,568,1374,658,1367,729,1344,789,1314,849,1281,902,1258,946,1220,1027,1245,997,1291,928,1334,856,1369,787,1397,681,1425,591,1447,486,1457,403,1440,345,1404" shape="poly">
<area id="ten" coords="626,1242,686,1219,741,1230,780,1251,773,1299,727,1329,668,1349,603,1347,589,1286" shape="poly">
</map>
<!-- desktop-oriented image -->
<img src="images/fox.png" class="desktop" alt="spot the differences image" usemap="#desktop">
<!-- Image Map Generated by http://www.image-map.net/ -->
<map name="desktop">
<area id="first" coords="1492,1180,1552,1166,1588,1188,1609,1212,1598,1262,1581,1304,1542,1329,1499,1322,1471,1258" shape="poly">
<area id="second" coords="1648,1284,1662,1203,1729,1192,1764,1238,1764,1288,1743,1337,1690,1383,1623,1411,1591,1341" shape="poly">
<area id="third" coords="1425,987,1344,1044,1298,1111,1280,1171,1277,1263,1277,1326,1291,1386,1309,1425,1333,1468,1365,1503,1372,1524,1273,1556,1249,1507,1220,1432,1199,1365,1196,1288,1199,1210,1213,1132,1238,1055,1302,980,1362,938,1408,956" shape="poly">
<area id="fourth" coords="355,1375,425,1389,517,1389,605,1376,683,1351,768,1318,832,1286,881,1251,931,1230,1012,1255,938,1315,846,1368,736,1410,641,1442,538,1459,443,1463,369,1456,291,1414" shape="poly">
<area id="fifth" coords="598,1244,662,1226,715,1241,743,1293,690,1336,641,1354,595,1361,545,1336,559,1276" shape="poly">
<area id="sixth" coords="309,771,355,750,411,778,425,838,400,891,340,905,287,887,280,820" shape="poly">
<area id="seventh" coords="273,742,178,752,107,816,54,872,72,936,121,964,178,985,231,989,259,975" shape="poly">
<area id="eighth" coords="588,71,648,64,701,92,708,159,655,191,591,187,556,127" shape="poly">
<area id="ninth" coords="1623,485,1708,432,1796,436,1824,481,1793,538,1733,570,1641,580,1605,527" shape="poly">
<area id="tenth" coords="1015,829,1100,797,1128,885,1029,924" shape="poly">
</map>
</div>
</div>
<!-- image attribution -->
<footer>Image by Freepik</footer>
<!-- including the image map resizer library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js" integrity="sha512-sXgF3JImNbesKnmCuR5AE5WPQo6Z8xJMYRvDknGyc0eTWL62pqgEG4Auk9d0VnstzyhRNzPak8AyemFJq7a6/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/spot-diff-practice.js" type="module"></script>
</body>
</html>