-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
359 lines (356 loc) · 17.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html lang="en">
<!--
+ _ _ _____ _ _ _____ _____ _ _ ___________ _____
+ | | | || ___| | | | | _ | |_ _| | | || ___| ___ \ ___|
+ | |_| || |__ | | | | | | | | | | | |_| || |__ | |_/ / |__
+ | _ || __|| | | | | | | | | | | _ || __|| /| __|
+ | | | || |___| |____| |___\ \_/ / | | | | | || |___| |\ \| |___
+ \_| |_/\____/\_____/\_____/\___/ \_/ \_| |_/\____/\_| \_\____/
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="MAZ Coding Projects - MIT open source single HTML file websites - [ JS | CSS | HTML ]">
<meta name="author" content="MAZ01001">
<meta name="google-site-verification" content="xgp2ouF9vphtNJPm6oTOWvFEyCTiC-ARtJP_-VSc3eg">
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="./img/MAZ_logo.svg">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
<link rel="manifest" href="./img/site.webmanifest">
<link rel="mask-icon" href="./img/safari-pinned-tab.svg" color="#F90">
<link rel="shortcut icon" href="./img/favicon.ico">
<meta name="msapplication-TileColor" content="#DA532C">
<meta name="msapplication-config" content="./img/browserconfig.xml">
<meta name="theme-color" content="#FF9900">
<title>MAZ01001 Homepage</title>
<script>//! CSS:@property may not work in all browsers → https://developer.mozilla.org/en-US/docs/Web/API/CSS/registerProperty_static#browser_compatibility
CSS.registerProperty({name:'--barsplus',syntax:'<length>',initialValue:'0px',inherits:false});
CSS.registerProperty({name:'--rainbowanglecolor',syntax:'<angle>',initialValue:'120deg',inherits:false});
CSS.registerProperty({name:'--turn',syntax:'<angle>',initialValue:'0deg',inherits:false});
CSS.registerProperty({name:'--textshadowcolorglow',syntax:'<color>',initialValue:'#0A0',inherits:false});
</script>
<style>
body{
background-color: #000;
color: #0F0;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
overflow: hidden;
}
@keyframes bars{to{--barsplus: 30px;}}
div#box{
--barsplus: 0px;
display: grid;
place-content: safe center;
place-items: safe center;
background: #0008;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
perspective: 0;
height: max-content;
width: max-content;
box-sizing: border-box;
max-height: 100vh;
max-width: 100vw;
overflow: auto;
scrollbar-gutter: stable both-edges;
/* BUG `both-edges` causes the bottom scrollbar to shrink, and it's unable to scroll fully to the right (by the width of the vertical scrollbar)
normal:
| ||
| \|
| /```\#| ← right up to the vertical scrollbar (just the corner is empty)
with both-edges:
| ||
| \|
| /```\##| ← aditional space (width of the vertical scrollbar)
even with no vertical scrollbar:
| |
| |
| /```\#| ← aditional space (width of the vertical scrollbar)
(but it can scroll all the way to the left edge)
*/
padding: 1rem;
padding-top: 0;
border: 10px solid #CC0;
border-image: repeating-linear-gradient(
-45deg,
#CC0 var(--barsplus) calc(15px + var(--barsplus)),
#CC02 calc(15px + var(--barsplus)) calc(30px + var(--barsplus))
) 10;/* same as border-size */
animation: bars 3s linear infinite reverse running;
box-shadow: 4px 4px 8px 8px #CC02,
inset 4px 4px 8px 8px #CC02;
white-space: nowrap;
text-align: center;
vertical-align: middle;
}
@keyframes shadowcolor{to{--rainbowanglecolor: 360deg;}}
@keyframes rocking{
0%{--turn: 0deg;}
25%{--turn: -10deg;}
75%{--turn: 10deg;}
100%{--turn: 0deg;}
}
@keyframes turn{
from{--turn: 0deg;}
to{--turn: 360deg;}
}
@keyframes turnhalf{
0%{--turn: 0deg;}
50%{--turn: 170deg;}
100%{--turn: 0deg;}
}
@keyframes turnhalfround{
0%{--turn: 0deg;}
25%{--turn: 200deg;}
100%{--turn: -360deg;}
}
body>img{
--rainbowanglecolor: 0deg;
--turn: 0deg;
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
translate: -50% -50%;
rotate: var(--turn);
perspective: 0;
height: max(100vh,1000px);
filter:
drop-shadow(0px 0px .2rem #0A0)
drop-shadow(0px 0px .6rem #0A0);
filter:
drop-shadow(0px 0px .2rem oklch(75% 0.127 var(--rainbowanglecolor)))
drop-shadow(0px 0px .6rem oklch(75% 0.127 var(--rainbowanglecolor)));
animation:
shadowcolor 2s linear 0s 2 normal running,
shadowcolor .5s linear 4s 2 normal running,
rocking 1s linear 4s 1 normal running,
shadowcolor 2.5s linear 5s 10 normal running,
turn 10s ease-in 10s 1 normal running,
shadowcolor 1s linear 30s 2 normal running,
rocking 2s linear 30s 2 normal running,
shadowcolor 2.84s linear 32s 200 normal running,
turn 60s ease-in-out 60s 1 reverse running,
rocking 3s ease-in-out 180s 3 normal running,
shadowcolor 6s linear 600s 100 normal running,
turnhalf 600s ease-in 600s 1 normal running,
shadowcolor 3s linear 1200s 2000 normal running,
rocking 4s linear 1800s 4 normal running,
turnhalfround 3600s ease-in 3600s 1 normal running,
shadowcolor 6s linear 7200s 600 normal running,
turn 3600s ease 7200s 1 reverse running,
shadowcolor 3s linear 10800s infinite normal running;
user-select: none;
pointer-events: none;
}
@keyframes textflicker{
0% {--textshadowcolorglow: #020;}
1% {--textshadowcolorglow: #0C0;}
2.5%{--textshadowcolorglow: #040;}
4.5%{--textshadowcolorglow: #090;}
30% {--textshadowcolorglow: #060;}
50% {--textshadowcolorglow: #0A0;}
70% {--textshadowcolorglow: #080;}
95% {--textshadowcolorglow: #0C0;}
100% {--textshadowcolorglow: #0F0;}
}
div#projects{
display: flex;
flex-direction: column;
place-items: safe center;
}
div#projects>a{
--textshadowcolorglow:#0A0;
color: #0D0;
font-size: 2rem;
font-weight: bold;
text-decoration: none;
text-shadow: .2rem .3rem .2rem #000;
filter: drop-shadow(0px 0px 10px var(--textshadowcolorglow));
animation: textflicker 5s linear 0s infinite running;
perspective: 0;
}
div#projects>a.hidden:not(.show){display: none;}
div#projects>a:not(:first-child)::before{
display: block;
content: "\204C \1F666 \204D";
white-space: pre;
padding: .2rem 0;
font-size: .8rem;
text-shadow: none;
color: #0A0;
}
div#projects>a:nth-child(5n+2){
animation-delay: 4s;
animation-duration: 7s;
}
div#projects>a:nth-child(3n+4){
animation-delay: 1s;
animation-duration: 6s;
}
div#projects>a:nth-child(7n+6){animation-delay: 3s;}
div#projects>a:visited{color: #0A0;}/* can't edit more → https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector */
div#projects>a:hover,
div#projects>a:active{
color: #0F0;
filter: drop-shadow(0px 0px 10px #0F0);
}
div#social{
padding: 10px 20px;
border: .2rem outset #0A0;
background-color: #0008;
}
div#social>a{
color: #0AF;
text-decoration: none;
}
div#social>a:not(:first-child):not(hr+*)::before{
content: "\7C ";
color: #0A0;
font-weight: 800;
}
div#social>a:visited{color: #05F;}
div#social>a:hover,
div#social>a:active{
color: #0FF;
text-shadow: 0px 0px 15px #00F,
0px 0px 15px #00F,
0px 0px 15px #00F;
}
hr{border: .1rem outset #0A0;}
@keyframes textglow{to{--textshadowcolorglow: #F90;}}
h1,h2{
--textshadowcolorglow: #D60;
color: #F90;
font-family: 'Times New Roman', Times, serif;
text-shadow: .2rem .3rem .2rem #000;
filter: drop-shadow(0px 0px 15px var(--textshadowcolorglow));
animation: textglow 2s cubic-bezier(.45,.05,.55,.95) 0s infinite alternate running;
perspective: 0;
}
h1{font-size: 3rem;}
h1::before{content: "\A9C1 ";}
h1::after{content: " \A9C2";}
h1::before,
h1::after{
font-size: large;
vertical-align: text-top;
}
h2{font-size: 2.5rem;}
h2::before{content: "\FF1C ";}
h2::after{content: " \FF0F\FF1E";}
::selection{
background-color: #222;
color: #0F0;
}
::selection:window-inactive{color: #0A0;}
@supports not selector(::-webkit-scrollbar){
*{
scrollbar-width: thin;
scrollbar-color: #0A07 transparent;
}
*:hover{scrollbar-color: #0A0 transparent;}
}
::-webkit-scrollbar{
width: 1.2rem;
height: 1.2rem;
}
::-webkit-scrollbar-thumb:vertical:window-inactive{border-right-style: dashed;}
::-webkit-scrollbar-thumb:horizontal:window-inactive{border-bottom-style: dashed;}
::-webkit-scrollbar-thumb:vertical{
background: transparent;
border-right: .3rem solid #0A0;
border-radius: 0;
}
:hover::-webkit-scrollbar-thumb:vertical{
background-color: #000;
box-shadow: inset .4rem 0 .4rem 0 #0A0;
border: none;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
::-webkit-scrollbar-thumb:horizontal{
background: transparent;
border-bottom: .3rem solid #0A0;
border-radius: 0;
}
:hover::-webkit-scrollbar-thumb:horizontal{
background-color: #000;
box-shadow: inset 0 .4rem .4rem 0 #0A0;
border: none;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
::-webkit-scrollbar-thumb:hover:vertical{box-shadow: inset .4rem 0 .4rem 0 #0F0;}
::-webkit-scrollbar-thumb:hover:horizontal{box-shadow: inset 0 .4rem .4rem 0 #0F0;}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner{
display: none;
background: transparent;
}
</style>
</head>
<body>
<img src="./img/MA_logo.svg" alt="MA logo">
<div id="box">
<h1>MAZ<small>01001</small></h1>
<div id="social">
<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/@MAZ01001" title="MAZ">YouTube</a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/MAZ01001" title="MAZ01001">GitHub</a>
<a target="_blank" rel="noopener noreferrer" href="https://steamcommunity.com/id/MAZ01001" title="MAZ01001">Steam</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.twitch.tv/maz01001" title="MAZ01001">Twitch</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/@MAZ_VOD" title="YouTube/MAZ_VOD">VOD</a>
<a target="_blank" rel="noopener noreferrer" href="https://soundcloud.com/maz00101/likes" title="MAZ (Likes)">SoundCloud</a>
<a target="_blank" rel="noopener noreferrer" href="https://maz10001.newgrounds.com/" title="MAZ10001">NewGrounds</a>
<a target="_blank" rel="noopener noreferrer" href="https://coub.com/maz00101" title="MAZ">Coub</a>
<hr>
<a target="_blank" rel="noopener noreferrer" href="https://maz01001.itch.io/" title="MAZ01001">Itch</a>
<a target="_blank" rel="noopener noreferrer" href="https://scratch.mit.edu/users/MAZ01001/" title="MAZ01001">Scratch</a>
<a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/users/13282166/maz" title="MAZ">Stack Overflow</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.construct.net/en/users/198467/maz01001" title="MAZ01001">Construct</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/maz01001/" title="@maz01001">Instagram</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.deviantart.com/maz00001" title="MAZ00001">DeviantArt</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.reddit.com/user/MAZ00101" title="u/MAZ00101">Reddit</a>
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/MAZ_01001" title="@MAZ_01001">Twitter</a>
</div>
<h2>CodingProjects</h2>
<div id="projects">
<a target="_self" rel="noopener noreferrer" href="./site/hangman" title="A simple word guessing game">Hangman</a>
<a target="_self" rel="noopener noreferrer" href="./site/snake" title="Snake game with ASCII graphics">ASCII Snake</a>
<a target="_self" rel="noopener noreferrer" href="./GIF_decoder/" title="GIF decoder and web player">GIF decoder/player</a>
<a target="_self" rel="noopener noreferrer" href="./Math-Js/functionsjs_chanceAmount" title="Calculate the chance of success for consecutive repeats of events with equal chances">Chance Calculator</a>
<a target="_self" rel="noopener noreferrer" href="./site/enigma" title="The Enigma cipher machine">Enigma</a>
<a target="_self" rel="noopener noreferrer" href="./AlmondBreadErkunder/" title="Simple Mandelbrot explorer">Mandelbrot</a>
<a target="_self" rel="noopener noreferrer" href="./site/biginttype_calc" title="Calculator for arbitrary-length-integers">Big integer calculator</a>
<a target="_self" rel="noopener noreferrer" href="./site/code_error_correction" title="ECC encoding (self correcting messages)">Error correction codes</a>
<a target="_self" rel="noopener noreferrer" href="./site/satisfactory_u3_flowchart" title="Unofficial flowchart for Satisfactory U3">Satisfactory U3 flowchart</a>
<a target="_self" rel="noopener noreferrer" href="./site/canvas_ball" title="Simple screensaver with a bouncing ball">Ball screensaver</a>
<a target="_self" rel="noopener noreferrer" href="./site/dice" title="A simple random number generator">Dice</a>
<a target="_self" rel="noopener noreferrer" class="hidden" href="./site/vector_field" title="A colorful vector field [P5.js]">Vector field</a>
<a target="_self" rel="noopener noreferrer" class="hidden" href="./site/math_function_drawer" title="Polynomial visualizer [P5.js]">Math Function Drawer</a>
<a target="_self" rel="noopener noreferrer" class="hidden" href="./site/3d_card_example" title="CSS 3D-Card example">3D-Card example</a>
<a target="_self" rel="noopener noreferrer" class="hidden" href="./site/context_menu_example" title="HTML/JS Context menu example">Context menu example</a>
<a target="_self" rel="noopener noreferrer" class="hidden" href="./site/touch_example" title="JS Touch example">Touch example</a>
<a target="_self" rel="noopener noreferrer" class="hidden" href="./site/pascals_triangle" title="Prints out Pascal's Triangle">Pascals Triangle</a>
<a target="_self" rel="noopener noreferrer" class="hidden" href="./site/pi_day_2021" title="Approximating PI with 100'000 random numbers and GCD for PI day 2021 [P5.js]">PI-Day 2021</a>
</div>
</div>
<script>
document.addEventListener("keydown",ev=>{
"use strict";
if(ev.key!=="e"||ev.repeat)return;
ev.preventDefault();
document.body.querySelectorAll(".hidden").forEach(v=>v.classList.toggle("show"));
},{passive:false});
</script>
</body>
</html>