-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
52 lines (49 loc) · 3.53 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
<!-- Created by Frey -->
<!--
TURN ON THE LIGHT
CREATED BY: Frey0xD
Nov 29, 2021
-->
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<title>Turn On the Light By Frey</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="JS/main.js"></script>
<link rel="stylesheet" href="Css/Styles.css">
</head>
<body>
<div id="game">
<svg id="paths" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="460px" viewBox="0 0 360 460" E="xMidYMid meet">
<path fill="#000000" d="M21 41l7 0 0 -14c0,-1 1,-2 2,-2 1,0 2,1 2,2l0 14 8 0 0 -14c0,-1 1,-2 2,-2 1,0 2,1 2,2l0 14 7 0c1,0 2,0 2,2l0 3c0,2 -1,3 -2,3l-1 0 0 6c0,5 -4,9 -8,9l0 3c0,1 -1,2 -2,2l-8 0c-1,0 -2,-1 -2,-2l0 -3c-4,0 -8,-4 -8,-9l0 -6 -1 0c-1,0 -2,-1 -2,-3l0 -3c0,-2 1,-2 2,-2z"/>
<line fill="none" stroke="#000000" stroke-width="4" x1="36" y1="68" x2="36" y2= "172" />
<path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" d="M324 172l0 -16c0,-10 -9,-18 -18,-17 -3,1 -7,3 -9,2 -4,-2 -5,-9 -2,-9 2,0 16,6 14,2 0,-2 -21,-8 -19,-11 3,-3 24,8 23,3 -1,-4 -24,-7 -23,-12 1,-4 26,9 27,4 0,-4 -22,-9 -25,-11 -6,-5 -3,-13 -4,-17 -1,-3 -4,-8 -5,-10 -1,-1 -5,-4 -7,-12 -2,-9 -4,-18 4,-28 8,-10 24,-14 34,-11 10,2 25,14 23,33 -1,9 -7,15 -12,20 -12,10 -6,23 -12,24 -2,1 -4,1 -7,1 -6,-2 -3,-18 -4,-25 -1,-6 -5,-7 -8,-11 -2,-3 1,-5 5,-2 2,3 2,-1 4,-4 3,-4 6,-1 6,1 0,3 1,7 4,1 2,-4 7,-1 5,4 -3,6 -5,6 -10,9"/>
<path id="mainpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 216c0,20 16,36 36,36l216 0c20,0 36,-16 36,-36l0 -216"/>
<circle id="maincircle" fill="#fffd56" cx="0" cy="0" r="7">
<animateMotion dur="1.5s" calcmode="linear" repeatCount="indefinite">
<mpath xlink:href="#mainpath"/>
</circle>
</svg>
<div style="position:absolute;top:15px;left:0;width:320px;text-align:center;">TURN ON</div>
<div style="position:absolute;top:40px;left:0;width:320px;text-align:center;">THE LIGHT BY FREY</div>
<div id="level" style="position:absolute;top:70px;left:0;width:320px;text-align:center;font-size:21px;display:none;">Level: <span>0</span></div>
<div id="moves" style="position:absolute;top:95px;left:0;width:320px;text-align:center;font-size:21px;display:none;">Moves: <span>0</span></div>
<svg id="complete" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="460px" viewBox="0 0 360 460" E="xMidYMid meet">
</svg>
<div id="lighton"></div>
<div id="info" style="position:absolute;top:90px;left:50px;width:220px;height:auto;font-size:18px;text-align:center;">
Click on cable<br>
segments to rotate<br>
clockwise until all<br>
the segments are in<br>
the correct position.
</div>
<div id="div_levels" style="position:absolute;top:248px;left:52px;width:260px;height:165px;font-size:18px;text-align:center;"></div>
<div class="btn" id="b_menu" style="left:85px;">MENU</div>
<div class="btn" id="b_next" style="left:150px;">NEXT LEVEL</div>
</div>
</body>
</html>