-
Notifications
You must be signed in to change notification settings - Fork 2
/
workshop.html
152 lines (122 loc) · 9.74 KB
/
workshop.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<title>Clarity Workshop</title>
<meta charset="UTF-8">
<link rel="manifest" href="clarity.webmanifest">
<link rel="shortcut icon"
href="data:image/x-icon;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP8AAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/wAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8AAAD/AAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8AAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wBIrP8ASKz/AEis/wBIrP8ASKz/AEis/wBIrP8ASKz/AAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wAAAAAAAAAAAAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AEis/wBIrP8ASKz/AEis/wBIrP8ASKz/AEis/wBIrP8AAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AAAAAAAAAAAAAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AEis/wBIrP8Aa///AGv//wBr//8Aa///AGv//wBr//8Aa///AGv//wBIrP8ASKz/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8ASKz/AEis/wBr//8Aa///AGv//wBr//8Aa///AGv//wBr//8Aa///AEis/wBIrP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAAAAAAAAAAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wBIrP8ASKz/AGv//wBr//8Aa///AGv//wBr//8Aa///AGv//wBr//8ASKz/AEis/wAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AEis/wBIrP8Aa///AGv//wBr//8Aa///AGv//wBr//8Aa///AGv//wBIrP8ASKz/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8ASKz/AEis/wBr//8Aa///AGv//wBr//8Aa///AGv//wBr//8Aa///AEis/wBIrP8AAAD/AAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wBIrP8ASKz/AGv//wBr//8Aa///AGv//wBr//8Aa///AGv//wBr//8ASKz/AEis/wAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AEis/wBIrP8Aa///AGv//wBr//8Aa///AGv//wBr//8Aa///AGv//wBIrP8ASKz/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8ASKz/AEis/wBr//8Aa///AGv//wBr//8Aa///AGv//wBr//8Aa///AEis/wBIrP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAAAAAAAAAAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AEis/wBIrP8ASKz/AEis/wBIrP8ASKz/AEis/wBIrP8AAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AAAAAAAAAAAAAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8ASKz/AEis/wBIrP8ASKz/AEis/wBIrP8ASKz/AEis/wAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/AAAA/wAAAP9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf8AAAD/AAAA/wAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP8AAAD/AAAA/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/2FhYf9hYWH/YWFh/wAAAP8AAAD/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/8AD///AA//8AAA//AAAP/AAAA/wAAAPwAAAA8AAAAPAAAADwAAAAwAAAAMAAAADAAAAAwAAAAMAAAD/AAAA/wAAAP8AAAD/AAAAAwAAAAMAAAADAAAAA8AAAAPAAAADwAAAA8AAAAPwAAAP8AAAD/wAAD/8AAA//8AD///AA/8="
type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="loaders.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="ClarityWorkshop.js"></script>
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
color: #FFF
}
.bkg {
background-color: #1d1b31;
}
.level {
border: 2px solid #d2bdff;
background-color: #3c2d52;
}
</style>
<body class="bkg w3-content" style="max-width:1600px">
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer"
title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:15px">
<!-- Header -->
<header id="portfolio">
<div class="w3-container">
<h1><b>Clarity Workshop</b></h1>
<p>Click a level to load and play it!</p>
<div style="text-align: right; width: 100%;">New | <a href="https://henrymartin5.github.io/Clarity/top.html">Top</a> | <a href="#" onclick="mylvls();">My Levels</a></div>
</div>
</header>
<div id="container">
<center>
<svg class="pl" viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="pl-grad1" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(313,90%,55%)" />
<stop offset="100%" stop-color="hsl(223,90%,55%)" />
</linearGradient>
<linearGradient id="pl-grad2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(313,90%,55%)" />
<stop offset="100%" stop-color="hsl(223,90%,55%)" />
</linearGradient>
</defs>
<circle class="pl__ring" cx="100" cy="100" r="82" fill="none" stroke="url(#pl-grad1)" stroke-width="36"
stroke-dasharray="0 257 1 257" stroke-dashoffset="0.01" stroke-linecap="round"
transform="rotate(-90,100,100)" />
<line class="pl__ball" stroke="url(#pl-grad2)" x1="100" y1="18" x2="100.01" y2="182" stroke-width="36"
stroke-dasharray="1 165" stroke-linecap="round" />
</svg>
</center>
</div>
<!-- End page content -->
</div>
<style>
/* CSS */
.button-62 {
background: linear-gradient(to bottom right, #e33692, #5d42f5);
border: 0;
border-radius: 12px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 2.5;
outline: transparent;
padding: 0 1rem;
text-align: center;
text-decoration: none;
transition: box-shadow .2s ease-in-out;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
}
.button-62:not([disabled]):focus {
box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(177, 71, 239, 0.5), .125rem .125rem 1rem rgba(255, 90, 159, 0.5);
}
.button-62:not([disabled]):hover {
box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(200, 71, 239, 0.5), .125rem .125rem 1rem rgba(255, 90, 159, 0.5);
}
.button2:hover span:nth-child(4) {
filter: hue-rotate(300deg);
bottom: -100%;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(360deg, transparent, #3a86ff);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%, 100% {
bottom: 100%;
}
}
</style>
</body>
</html>