-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (100 loc) · 3.03 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
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=B612&display=swap" rel="stylesheet">
<style>
body {
font-family: 'B612', sans-serif;
}
</style>
<style>
.lds-dual-ring {
display: inline-block;
width: 64px;
height: 64px;
position: relative;
left: -calc(50%-32px);
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid #000;
border-color: #000 transparent #000 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ł
</style>
</head>
<body>
<div class="row d-flex justify-content-center" style="padding-bottom: 25px">
<button id="settings-button" class="btn btn-info">Settings</button>
</div>
<div id="finder" class="container">
<div class="row d-flex justify-content-center">
<form class="w-100">
<div class="form-group">
<label class='label-control' for="scr_area">Input scramble:</label>
<textarea id="scr_area" class="form-control"></textarea>
</div>
</form>
</div>
<div class="row d-flex justify-content-center">
<button id="generate" class="btn btn-primary">Generate!</button>
</div>
<div id="reszta" class="d-flex justify-content-center">
</div>
</div>
<div id="settings" class="container" style="display:none">
<div class="form-group text-center">
<span class="label-control">V's</span>
<br>
<input id="v1" type="checkbox" checked> Yellow
<input id="v2" type="checkbox" checked> Green
<input id="v3" type="checkbox" checked> Blue
<input id="v4" type="checkbox" checked> Red
</div>
<div class="form-group text-center">
<span class="label-control">Layers</span>
<br>
<input id="l1" type="checkbox" checked> Yellow
<input id="l2" type="checkbox" checked> Green
<input id="l3" type="checkbox" checked> Blue
<input id="l4" type="checkbox" checked> Red
<br>
</div>
<div class="form-group text-center">
<span class="label-control">Tops (yellow means l3e on yellow etc.)</span>
<br>
<input id="t1" type="checkbox" checked> Yellow
<input id="t2" type="checkbox" checked> Green
<input id="t3" type="checkbox" checked> Blue
<input id="t4" type="checkbox" checked> Red
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$('#settings-button').click(()=>{
$('#settings').slideToggle();
$('#finder').slideToggle();
})
$('#generate').click(()=>{
generate();
})
</script>
<script src="js/constants.js"></script>
<script src="js/pyra.js"></script>
</body>
</html>