krskaa/sous-podzim2024-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

chaos

Browse Source
This commit is contained in:
Adam Krška
2024-09-28 01:03:39 +02:00
parent 089dbf52f2
commit e555c00c4e
2 changed files with 80 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/templates/index.ejs
View File

@ -19,7 +19,7 @@ function hsl2rgb(h,s,l) {
} }
function getRandomHoverBg() { function getRandomHoverBg() {
let rgb = hsl2rgb(Math.random()*360,0.4,0.4) let rgb = hsl2rgb(Math.random()*360,0.8,0.4)
let hex = '#' let hex = '#'
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
let subcolorValue = rgb[i]; let subcolorValue = rgb[i];
@ -33,12 +33,12 @@ function getRandomHoverBg() {
<body data-bs-theme="dark"> <body data-bs-theme="dark">
<div class="w-100 text-center p-5"> <div class="w-100 text-center p-5">
<h1>Body stabilní jak česká vláda</h1> <h1 data-text="Body stabilní jak česká vláda">Body stabilní jak česká vláda</h1>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row p-5"> <div id="person-grid" class="row p-5">
<% people.forEach((person) => {%> <% people.forEach((person) => {%>
<div class="col-12 col-md-6 col-lg-3 col-xxl-2"> <div class="col-12 col-md-6 col-lg-3 col-xxl-2 person-button">
<a href='/gamble/<%= person.personId %>' <a href='/gamble/<%= person.personId %>'
class="btn btn-outline-secondary w-100 m-2 text-body fw-bold" class="btn btn-outline-secondary w-100 m-2 text-body fw-bold"
style="--bs-btn-hover-bg: <%= getRandomHoverBg()%>"> style="--bs-btn-hover-bg: <%= getRandomHoverBg()%>">
@ -88,8 +88,21 @@ function getRandomHoverBg() {
}, 1000); }, 1000);
setInterval(downloadData, 60000); setInterval(downloadData, 60000);
downloadData();
function randomRange(min, max) {
return min + Math.random() * (max - min);
}
setInterval(() => {
let personGrid = document.getElementById('person-grid');
for (const child of personGrid.children) {
let diffX = 40*randomRange(-1,1);
let diffY = 40*randomRange(-1,1);
child.style.transform = `translate(${diffX}px, ${diffY}px)`;
}
}, 5000);
downloadData()
</script> </script>
</body> </body>
</html> </html>

65
www/styles.css
View File

@ -1,8 +1,7 @@
body { body {
/*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/ background: linear-gradient(-249deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: linear-gradient(-37deg, #66241a, #520820, #073645, #075239);
background-size: 400% 400%; background-size: 400% 400%;
animation: gradient 20s ease infinite; animation: gradient 10s linear infinite;
height: 100vh; height: 100vh;
} }
@ -19,3 +18,63 @@ body {
background-position: 0% 50%; background-position: 0% 50%;
} }
} }
.person-button {
transition: transform 5.5s linear;
}
h1 {
position: relative;
font-family: "Poppins", sans-serif;
color: #f6d8d5;
font-size: 50px;
opacity: 0.9;
text-shadow: 0px -5px #ec2225, 0px 5px #00c2cb, -5px 0px #ec2225, 5px 0px #00c2cb;
}
h1::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
color: #e0ffff;
z-index: -1;
animation: animate 12ms ease-in-out infinite;
z-index: 1;
}
@keyframes animate {
0%,
100% {
top: -7px;
left: 0;
opacity: 1;
}
20% {
top: 0;
left: -10px;
opacity: 0.7;
}
40% {
top: 7px;
left: 0;
opacity: 0.2;
}
60% {
top: 0;
left: 10px;
opacity: 0.3;
}
80% {
top: 0;
left: 0;
opacity: 0.9;
}
}