From e555c00c4e19c4b9da01643b5fe9fc5ba5dd89a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Kr=C5=A1ka?= Date: Sat, 28 Sep 2024 01:03:39 +0200 Subject: [PATCH] chaos --- src/templates/index.ejs | 23 +++++++++++---- www/styles.css | 65 +++++++++++++++++++++++++++++++++++++++-- 2 files changed, 80 insertions(+), 8 deletions(-) diff --git a/src/templates/index.ejs b/src/templates/index.ejs index 2fea311..7afef15 100644 --- a/src/templates/index.ejs +++ b/src/templates/index.ejs @@ -19,7 +19,7 @@ function hsl2rgb(h,s,l) { } function getRandomHoverBg() { - let rgb = hsl2rgb(Math.random()*360,0.4,0.4) + let rgb = hsl2rgb(Math.random()*360,0.8,0.4) let hex = '#' for (let i = 0; i < 3; i++) { let subcolorValue = rgb[i]; @@ -33,12 +33,12 @@ function getRandomHoverBg() {
-

Body stabilní jak česká vláda

+

Body stabilní jak česká vláda

-
+
<% people.forEach((person) => {%> -
+
@@ -88,8 +88,21 @@ function getRandomHoverBg() { }, 1000); 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() diff --git a/www/styles.css b/www/styles.css index 7cb94ff..8e4ad50 100644 --- a/www/styles.css +++ b/www/styles.css @@ -1,8 +1,7 @@ body { - /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/ - background: linear-gradient(-37deg, #66241a, #520820, #073645, #075239); + background: linear-gradient(-249deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; - animation: gradient 20s ease infinite; + animation: gradient 10s linear infinite; height: 100vh; } @@ -19,3 +18,63 @@ body { 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; + } +}