tileloop/index.html at master · lalaniket8/tileloop · GitHub

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
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="style.css"/>
<img src="resources/images/block.png" height="0" width="0" style="visibility: hidden"/>
<img src="resources/images/mask.png" height="0" width="0" style="visibility: hidden"/>
</head>
<body>
<body>
<span class="optionsbtnsidenav" onclick="openNav()">&#9776;</span>
<div id="mySidenav" class="sidenav">
  <span class="closebtnsidenav" onclick="closeNav()">&times;</span>
  <div>
	<div class="sidenavinputgroup">
	  <label class="sidenavlabel">BOARD SIZE : </label>
	  <input type="button" class="sidenavbutton" value="-" id="button-minus" onclick="minusClick()"/>
	  <input type="number" class="sidenavfield" id="boardsize-field" disabled />
	  <input type="button" class="sidenavbutton" value="+" id="button-plus" onclick="plusClick()"/>
	</div>
  </div>
  <div>
    <div class="sidenavinputgroup">
	  <label class="sidenavlabel">STOPWATCH : </label>
		<label class="switch">
			<input type="checkbox" id="togBtn" checked onclick="toggleStopWatch()">
			<div class="slider round"></div>
		</label>
	</div>
  </div>
  <div>
    <div class="sidenavinputgroup">
	  <label class="sidenavlabel">SOUND : </label>
		<label class="switch">
			<input type="checkbox" id="togBtn" checked onclick="toggleSound()">
			<div class="slider round"></div>
		</label>
	</div>
  </div>
  <div>
	<button onclick="location.reload()" style="font: 15px Lucida Console; margin: 15px; cursor:pointer;">REFRESH</button>
  </div>
  <div style="font:15px Lucida Console; color:lightgrey; text-align:left; padding: 14px">
  <b>INSTRUCTIONS:</b><br>
  <span style="font:13px Lucida Console; color:lightgrey;">Drag to order the tiles.</span>
  </div>
</div>

<div class="callout" id="SolvedMsg">
  <div class="callout-header">TILELOOP</div>
  <div class="callout-container">
	<div class="callout-text" id="callout-text1"></div>
	<button class="calloutbtn" id="calloutbtn1" onclick="solvedBtnClick()">Try Again</button>
  </div>
</div>

<div style="display:block; position:absolute; top:20px; right:20px">
<a href="https://github.com/lalaniket8/tileloop" target="_blank" ><img src="resources/images/GitHub_Logo.png"/></a>
 </div>

<div id="stopwatch">
<span>&#x23F2;</span>
<span id="stopwatchvalue">0.0</span>
</div>

<button id="reshuffleButton" onclick="init()" style="font: 18px Lucida Console; margin: 15px; cursor:pointer; display:block; position:absolute; top:80px; right:5px">&#8635;</button>

<div id="sound">
<span style="font-size:27px;">&#9835;</span>
</div>

<canvas id="canvas">
[CANVAS NOT SUPPORTED]
</canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="constants.js"></script>
<script src="canvas.js"></script>
<script src="sprite.js"></script>
<script src="mouse.js"></script>
<script src="touch.js"></script>
<script src="tile.js"></script>
<script src="board.js"></script>
<script src="stopwatch.js"></script>
<script src="app.js"></script>
</body>
</html>