diff --git a/src/2021-bg.svg b/archive/2021-bg.svg similarity index 100% rename from src/2021-bg.svg rename to archive/2021-bg.svg diff --git a/archive/index_end2022.html b/archive/index_end2022.html new file mode 100644 index 0000000000000000000000000000000000000000..a305917bc58f37835e0af7a38d85d3b7a9381e08 --- /dev/null +++ b/archive/index_end2022.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="hu"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1"> + <title>BME VIK Gólyahét</title> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;700&display=swap" rel="stylesheet"> + <style> + * { border: 0; padding: 0; margin: 0; box-sizing: border-box; } + body { width: 100%; background-color: #000; color: #FFF; font-family: 'Roboto Mono', monospace; + text-shadow: 0 4px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1); + -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + h1 { font-weight: bold; text-align: center; font-size: 6vmin; margin: 10vh 3vw 0 3vw; } + h2 { font-weight: 300; text-align: center; font-size: 18px; margin: 0 3vw 4vh 3vw; } + .background { background-image: url("/2021-bg.svg"); filter: blur(3px) opacity(0.8); -webkit-filter: blur(3px) opacity(0.8); height: 100vh; + width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; position: fixed; } + .content { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 2; } + iframe { margin: 40px auto; max-width: 100vw; } + a { display: inline-block; text-decoration: none; border-bottom: 2px solid #FFF; color: #FFF; } + </style> + <script async src="https://www.googletagmanager.com/gtag/js?id=G-YTTKMXXM14"></script> + <script> + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + + gtag('config', 'G-YTTKMXXM14'); + </script> +</head> +<body> + <div class="background"></div> + + <div class="content"> + <h1>BME VIK GÓLYAHÉT</h1> + <h2>Köszönjük, hogy velünk voltatok!</h2> + + <iframe src="https://drive.google.com/file/d/1HP-38F9jKcBBuexxuOMPQiZ9Y5FcaS7T/preview" width="100%" height="60%" allow="autoplay"></iframe> + </div> +</body> +</html> diff --git a/src/bg.jpg b/src/bg.jpg new file mode 100644 index 0000000000000000000000000000000000000000..556b3262a8fc3f54c22af2f65062ec3830b5b945 Binary files /dev/null and b/src/bg.jpg differ diff --git a/src/index.html b/src/index.html index a305917bc58f37835e0af7a38d85d3b7a9381e08..9bb5a609d6e0530e0a284cbf75d481ceab70c39c 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1"> - <title>BME VIK Gólyahét</title> + <title>BME VIK Gólyahét 2022</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;700&display=swap" rel="stylesheet"> @@ -13,13 +13,15 @@ body { width: 100%; background-color: #000; color: #FFF; font-family: 'Roboto Mono', monospace; text-shadow: 0 4px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - h1 { font-weight: bold; text-align: center; font-size: 6vmin; margin: 10vh 3vw 0 3vw; } - h2 { font-weight: 300; text-align: center; font-size: 18px; margin: 0 3vw 4vh 3vw; } - .background { background-image: url("/2021-bg.svg"); filter: blur(3px) opacity(0.8); -webkit-filter: blur(3px) opacity(0.8); height: 100vh; + h1 { font-weight: bold; text-align: center; font-size: 12vmin; margin: 10vh 3vw 0 3vw; } + h2 { font-weight: 300; text-align: center; font-size: 4vmin; margin: 10vh 3vw 4vh 3vw; } + .background { background-image: url("bg.jpg"); filter: blur(10px) opacity(0.8); -webkit-filter: blur(10px) opacity(0.8); height: 100vh; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; position: fixed; } .content { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 2; } - iframe { margin: 40px auto; max-width: 100vw; } - a { display: inline-block; text-decoration: none; border-bottom: 2px solid #FFF; color: #FFF; } + .latch { display: flex;justify-content: space-between;padding: 0 10vw; } + .digit { text-align: center; } + .digit h3 { font-size: 14vmin; font-weight: 100; } + .digit span { font-size: 6vmin; font-weight: bold; } </style> <script async src="https://www.googletagmanager.com/gtag/js?id=G-YTTKMXXM14"></script> <script> @@ -34,10 +36,47 @@ <div class="background"></div> <div class="content"> - <h1>BME VIK GÓLYAHÉT</h1> - <h2>Köszönjük, hogy velünk voltatok!</h2> + <h1>BME VIK GÓLYAHÉT 2022</h1> + <h2>a programok kezdetéig még hátra van</h2> - <iframe src="https://drive.google.com/file/d/1HP-38F9jKcBBuexxuOMPQiZ9Y5FcaS7T/preview" width="100%" height="60%" allow="autoplay"></iframe> + <div class="latch"> + <div class="digit"> + <h3 id="days">00</h3> + <span>nap</span> + </div> + <div class="digit"> + <h3 id="hours">00</h3> + <span>óra</span> + </div> + <div class="digit"> + <h3 id="mins">00</h3> + <span>perc</span> + </div> + <div class="digit"> + <h3 id="secs">00</h3> + <span>mp</span> + </div> + </div> </div> + <script> + const countDownDate = new Date("Aug 29, 2022 09:00:00").getTime(); + + function zeroFill(value) { + return value < 10 ? ("0" + value) : value; + } + + function updateTimer() { + const now = new Date().getTime(); + const distance = countDownDate - now; + + document.getElementById("days").innerText = zeroFill(Math.floor(distance / (1000 * 60 * 60 * 24))); + document.getElementById("hours").innerText = zeroFill(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))); + document.getElementById("mins").innerText = zeroFill(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))); + document.getElementById("secs").innerText = zeroFill(Math.floor((distance % (1000 * 60)) / 1000)); + } + + updateTimer(); + setInterval(updateTimer, 1000); + </script> </body> </html>