added snow
This commit is contained in:
matthias@arch
parent
94ef45751a
commit
00b8062014
60
6/day6.css
60
6/day6.css
@ -46,15 +46,20 @@ h1, h3 {
|
||||
}
|
||||
|
||||
.snow {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
/* left: 0; */
|
||||
/* right: 0; */
|
||||
/* bottom: 0; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* width: 100%; */
|
||||
/* height: 100%; */
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.snow__flake {
|
||||
position: absolute;
|
||||
/* position: fixed; */
|
||||
top: -50px;
|
||||
left: -50px;
|
||||
right: -50px;
|
||||
@ -62,52 +67,11 @@ h1, h3 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #fff;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: snowAnimation 3s linear infinite;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(0) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(1) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(2) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(3) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(4) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(5) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(6) {
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(7) {
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(8) {
|
||||
animation-delay: 1.6s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(9) {
|
||||
animation-delay: 1.8s;
|
||||
}
|
||||
|
||||
.snow__flake:nth-child(10) {
|
||||
animation-delay: 2s;
|
||||
float: left;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes snowAnimation {
|
||||
@ -116,7 +80,7 @@ h1, h3 {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(1000px) rotate(360deg);
|
||||
transform: translateY(1200px) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
36
6/day6.html
36
6/day6.html
@ -10,6 +10,26 @@
|
||||
|
||||
<body>
|
||||
<h1>ElvCom SC-22 Stream Analyzer</h1>
|
||||
<div class="snow" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;">
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div> <div class="snow__flake"></div>
|
||||
</div>
|
||||
<p>This tool will help you find packets and messages in streams from your <em>ElvCom SC-22</em>.</p>
|
||||
|
||||
<pre>
|
||||
@ -34,26 +54,14 @@
|
||||
MMMMMMMMMMMMMN0dooooooodkKWMMMMMMMMMMMMM
|
||||
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
|
||||
</pre>
|
||||
<div class="snow">
|
||||
<div class="snow__flake">penis</div>
|
||||
<div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div>
|
||||
<div class="snow__flake"></div>
|
||||
</div>
|
||||
<hr>
|
||||
<h3>Select Stream-File: </h3><input class="clickable" onchange='readFile(this)' type='file'>
|
||||
<button class="clickable" id="start">Analize!</button>
|
||||
<hr>
|
||||
<h3>Output:</h3>
|
||||
<p id=output>Load a file and press the button to find the packet and </p>
|
||||
<p id=output>Load a file and press the button to find the packet and message begin</p>
|
||||
|
||||
<h3 class="footer"><b>YES</b>, parts of this html and javascript is stolen from <a href="https://git.quintern.xyz/TheShinyMelon/AOC_2022/src/branch/master/5">UwU</a></h3>
|
||||
<h3 class="footer"><b>YES</b>, parts of this html and javascript are stolen from <a href="https://git.quintern.xyz/TheShinyMelon/AOC_2022/src/branch/master/5">UwU</a></h3>
|
||||
</body>
|
||||
|
||||
<script src='day6.js'></script>
|
||||
|
||||
15
6/day6.js
15
6/day6.js
@ -58,3 +58,18 @@ function findPosition(line) {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function randomizeSnowflakes() {
|
||||
// Get all elements with the class "snow__flake"
|
||||
var snowflakes = document.getElementsByClassName("snow__flake");
|
||||
|
||||
// Loop through the snowflakes
|
||||
for (var i = 0; i < snowflakes.length; i++) {
|
||||
// Generate a random number between 0 and 4
|
||||
var delay = Math.random() * 4;
|
||||
|
||||
// Set the "animation-delay" property for the current snowflake
|
||||
snowflakes[i].style.setProperty("animation-delay", delay + "s");
|
||||
}
|
||||
}
|
||||
randomizeSnowflakes();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user