-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
128 lines (110 loc) · 6.6 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
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<title>Maze Generation and Solving</title>
<link rel="canonical" href="https://0-harshit-0.github.io/maze/" />
<link rel="icon" href="./assets/maze-16.png" />
<!-- Meta tags for SEO, decoration and social sharing -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Meta tags for SEO -->
<meta name="description" content="Generate maze using randomized DFS and Solve it using Path Finding algorithms" />
<meta name="robots" content="index,follow" />
<meta name="theme-color" content="#000">
<!-- facebook metas -->
<meta property="og:title" content="Maze Generation and Solving" />
<meta property="og:description" content="Generate maze using randomized DFS and Solve it using Path Finding algorithms" />
<meta property="og:image" content="./assets/maze-512.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mazzzz.netlify.app/" />
<!-- twitter metas -->
<meta property="twitter:title" content="Maze Generation and Solving" />
<meta property="twitter:description" content="Generate maze using randomized DFS and Solve it using Path Finding algorithms" />
<meta property="twitter:image" content="./assets/maze-512.png" />
<meta property="twitter:card" content="summary_large_image">
<!-- meta finish -->
<!-- pwa manifest linking -->
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="./assets/maze-512.png">
<!-- scripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/0-harshit-0/Utility-HTML5Canvas@master/src/shapes.min.js" defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/0-harshit-0/Utility-HTML5Canvas@master/src/vector.min.js" defer></script>
<script type="module" src="./scripts/script.js" defer></script>
<!-- styles -->
<link rel="stylesheet" type="text/css" href="./styles/mg.css">
<link rel="stylesheet" type="text/css" href="./styles/mstyle.css">
<!-- search console verification tags -->
<meta name="google-site-verification" content="L6Xf9vC14cACIpfsbquaQtBV0n1LC9wYZbjH5JoQMuU" />
</head>
<body>
<aside role="complementary" class="cont left-cont">
<h1 class="main-heading">Controls</h1>
<div class="left-sub-cont">
<section class="input-conts">
<label for="s">Cell Size:</label>
<input aria-label="cell size" id="s" name="cellsize" min="1" value="150" type="number" />
</section>
<section class="input-conts">
<label for="r">Maintain ratio:</label>
<input aria-label="maintain aspect ratio" id="r" type="checkbox" name="aspectratio" checked>
</section>
<section class="input-conts">
<label for="fr">Frame rate:</label>
<input aria-label="frame rate" id="fr" name="framerate" min="1" value="50" type="number" />
</section>
<section class="input-conts">
<label for="lc">Fill color:</label>
<input aria-label="fill color" id="lc" name="linecolor" value="#ffffff" type="color" />
</section>
<section class="input-conts">
<label for="c">Search color:</label>
<input aria-label="search color" id="c" name="fillcolor" value="#20a1a1" type="color" />
</section>
<button aria-label="generate" id="generate">Generate</button>
</div>
<div class="left-sub-cont">
<section class="input-conts">
<label for="algos">Search algo: </label>
<select aria-label="search algorithm" id="algos">
<option>Dijkstra</option>
</select>
</section>
<button aria-label="search" id="search">Find</button>
</div>
<div class="left-sub-cont">
<button aria-label="install" id="install" style="display: none;">Install App</button>
</div>
</aside>
<main class="cont right-cont">
<div class="right-header-cont">
<section>
<button aria-label="more-options" class="mobile" id="more-options">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sliders2" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1">
<path fill-rule="evenodd" d="M10.5 1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4H1.5a.5.5 0 0 1 0-1H10V1.5a.5.5 0 0 1 .5-.5ZM12 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-6.5 2A.5.5 0 0 1 6 6v1.5h8.5a.5.5 0 0 1 0 1H6V10a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5ZM1 8a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 1 8Zm9.5 2a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V13H1.5a.5.5 0 0 1 0-1H10v-1.5a.5.5 0 0 1 .5-.5Zm1.5 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/>
</svg>
</button>
</section>
<h1 class="main-heading">Maze</h1>
<section class="quick-options">
<!-- download icon -->
<button aria-label="download" id="download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
<!-- share icon -->
<button aria-label="share" id="share">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1">
<path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
</svg>
</button>
</section>
</div>
<div class="canvas-cont">
<canvas id="canvas"></canvas>
</div>
</main>
</body>
</html>