Skip to content
Snippets Groups Projects
Verified Commit afbf9f97 authored by Tóth Miklós Tibor's avatar Tóth Miklós Tibor :shrug:
Browse files

morse challenge

parents
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
boop.mp3 0 → 100644
+ 0
− 0
View file @ afbf9f97
File added
index.html 0 → 100644
+ 328
− 0
View file @ afbf9f97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: black;
}
[class^="tree"] {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #004511 transparent;
border-radius: 100%;
-webkit-transform:rotate(360deg);
z-index: 2;
}
.tree1 {
margin-left: 100px;
border-width: 0 100px 50px 100px;
}
.tree2 {
top: -10px;
margin-left: 50px;
border-width: 0 150px 80px 150px;
}
.tree3 {
top: -30px;
border-width: 0 200px 100px 200px;
}
.trunk {
position: relative;
width: 30px;
height: 50px;
margin-left: 180px;
top: -35px;
background-color: #53350a;
z-index: 1;
}
.star-container {
position: relative;
height: 100px;
width: 100px;
margin-left: 175px;
top: 35px;
z-index: 3;
}
.star {
margin: 50px 0;
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 25px 17px 25px;
border-color: transparent transparent #ffd105 transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star:before {
position: absolute;
height: 0;
width: 0;
top: 0px;
left: -25px;
content: '';
border-style: solid;
border-width: 0 25px 17px 25px;
border-color: transparent transparent #ffd105 transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
.star:after {
position: absolute;
height: 0;
width: 0;
top: -12px;
left: -16px;
content: '';
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #ffd105 transparent;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.ornament {
position: relative;
background-color: #fff3a6;
width: 32px;
height: 32px;
border-radius: 100%;
z-index: 1;
}
.ornament:before {
position: absolute;
content: '';
width: 20px;
height: 20px;
top: 12px;
left: -5px;
border-style: solid;
border-color: red transparent transparent transparent;
border-radius: 100%;
}
.ornament:after {
position: absolute;
content: '';
width: 20px;
height: 20px;
top: -5px;
left: 11px;
border-style: solid;
border-color: transparent transparent red transparent;
border-radius: 100%;
}
[class^="ornament-container"] {
position: absolute;
z-index: 3;
}
.ornament-container1 {
top: 145px;
left: 130px;
}
.ornament-container2 {
top: 200px;
left: 270px;
}
.ornament-container3 {
top: 300px;
left: 130px;
}
[class^="light"] {
position: absolute;
width: 5px;
height: 5px;
border-radius: 100%;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
animation:light 5s;
-moz-animation:light 5s infinite; /* Firefox */
-webkit-animation:light 5s infinite; /* Safari and Chrome */
z-index: 3;
}
@-moz-keyframes light /* Firefox */
{
0% {background:transparent;}
50% {background:#ffd105;}
100% {background:transparent;}
}
@-webkit-keyframes light /* Safari and Chrome */
{
0% {background:transparent;}
50% {background:#ffd105;}
100% {background:transparent;}
}
.light1 {
top: 150px;
left: 180px;
}
.light2 {
top: 130px;
left: 210px;
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.light3 {
top: 200px;
left: 130px;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.light4 {
top: 210px;
left: 220px;
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.light5 {
top: 260px;
left: 180px;
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.light6 {
top: 280px;
left: 110px;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.light7 {
top: 270px;
left: 270px;
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.light8 {
top: 285px;
left: 355px;
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.light9 {
top: 300px;
left: 200px;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.light10 {
top: 180px;
left: 240px;
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.mor {
top: 190px;
left: 250px;
position: absolute;
width: 5px;
height: 5px;
border-radius: 100%;
z-index: 3;
background: #ffd105;
}
</style>
<title>Christmas</title>
</head>
<body>
<html>
<body>
<div class="star-container">
<div class="star"></div>
</div>
<div class="tree1"></div>
<div class="tree2"></div>
<div class="tree3"></div>
<div class="trunk"></div>
<div class="ornament-container1">
<div class="ornament"></div>
</div>
<div class="ornament-container2">
<div class="ornament"></div>
</div>
<div class="ornament-container3">
<div class="ornament"></div>
</div>
<div class="light1"></div>
<div class="light2"></div>
<div class="light3"></div>
<div class="light4"></div>
<div class="light5"></div>
<div class="light6"></div>
<div class="light7"></div>
<div class="light8"></div>
<div class="light9"></div>
<div class="light10"></div>
<div class="mor" id="mor"></div>
<script>
let m = "-..-. -. . -..- - .-.-.- .... - -- .-.. ";
let prog = 0;
let led = document.getElementById("mor");
function flash(a) {
if (m[prog] !== ' ')
led.style.background = "#ffd105ff";
prog++;
if (prog>=m.length){
prog = 0;
}
setTimeout(next, a);
}
function next() {
led.style.background = "#00000000";
let int = 500;
if (m[prog] === '.'){
int = 250;
} else if (m[prog] === '-'){
int = 500;
}
setTimeout(function () {
flash(int)
}, int)
}
next();
</script>
</body>
</html>
</body>
</html>
\ No newline at end of file
next.html 0 → 100644
+ 45
− 0
View file @ afbf9f97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Look at me</title>
</head>
<body>
<p>Is there more to see?</p>
<script>
let m = "LS4uLiAtLS0gLS0tIC4tLS4gLi0uLS4tIC0tIC4tLS4gLi4uLS0gICA=";
m = atob(m);
let prog = 0;
let led = document.getElementById("mor");
function flash(a) {
if (m[prog] === ' ')
document.title = "​";
else if (m[prog] === '.')
document.title = "beep";
else if (m[prog] === '-')
document.title = "boop";
prog++;
if (prog>=m.length){
prog = 0;
}
setTimeout(next, a);
}
function next() {
document.title = "​";
let int = 500;
if (m[prog] === '.'){
int = 250;
} else if (m[prog] === '-'){
int = 500;
}
setTimeout(function () {
flash(int)
}, 100)
}
setTimeout(next, 1000);
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Hosted with :heart: by KSZK