added snow
This commit is contained in:
matthias@arch
parent
94ef45751a
commit
00b8062014
62
6/day6.css
62
6/day6.css
@ -46,15 +46,20 @@ h1, h3 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.snow {
|
.snow {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
|
top: -50px;
|
||||||
|
/* left: 0; */
|
||||||
|
/* right: 0; */
|
||||||
|
/* bottom: 0; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
/* width: 100%; */
|
||||||
|
/* height: 100%; */
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snow__flake {
|
.snow__flake {
|
||||||
position: absolute;
|
/* position: fixed; */
|
||||||
top: -50px;
|
top: -50px;
|
||||||
left: -50px;
|
left: -50px;
|
||||||
right: -50px;
|
right: -50px;
|
||||||
@ -62,52 +67,11 @@ h1, h3 {
|
|||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: snowAnimation 3s linear infinite;
|
animation: snowAnimation 3s linear infinite;
|
||||||
}
|
float: left;
|
||||||
|
opacity: 0;
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes snowAnimation {
|
@keyframes snowAnimation {
|
||||||
@ -116,7 +80,7 @@ h1, h3 {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(1000px) rotate(360deg);
|
transform: translateY(1200px) rotate(360deg);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
36
6/day6.html
36
6/day6.html
@ -10,6 +10,26 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>ElvCom SC-22 Stream Analyzer</h1>
|
<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>
|
<p>This tool will help you find packets and messages in streams from your <em>ElvCom SC-22</em>.</p>
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
@ -34,26 +54,14 @@
|
|||||||
MMMMMMMMMMMMMN0dooooooodkKWMMMMMMMMMMMMM
|
MMMMMMMMMMMMMN0dooooooodkKWMMMMMMMMMMMMM
|
||||||
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
|
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
|
||||||
</pre>
|
</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>
|
<hr>
|
||||||
<h3>Select Stream-File: </h3><input class="clickable" onchange='readFile(this)' type='file'>
|
<h3>Select Stream-File: </h3><input class="clickable" onchange='readFile(this)' type='file'>
|
||||||
<button class="clickable" id="start">Analize!</button>
|
<button class="clickable" id="start">Analize!</button>
|
||||||
<hr>
|
<hr>
|
||||||
<h3>Output:</h3>
|
<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>
|
</body>
|
||||||
|
|
||||||
<script src='day6.js'></script>
|
<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