diff options
| author | tanyaionova <isaqtm@gmail.com> | 2019-10-15 21:09:50 +0300 |
|---|---|---|
| committer | tanyaionova <isaqtm@gmail.com> | 2019-10-15 21:09:50 +0300 |
| commit | 5e71985c24a912baaf4c3b9428b04c8611344f89 (patch) | |
| tree | ff312e1cbc6081548dc86b778bd46264761b3bf5 | |
| parent | c23c27499d3f44d3bc7fa5e68a29f935f6a35f6f (diff) | |
| download | fcked-5e71985c24a912baaf4c3b9428b04c8611344f89.tar.gz | |
Add timer to DAY_MAX
| -rw-r--r-- | index.html | 51 | ||||
| -rw-r--r-- | light.css | 76 | ||||
| -rw-r--r-- | woff2/iosevka-term-extralight.woff2 | bin | 0 -> 110364 bytes | |||
| -rw-r--r-- | woff2/iosevka-term-regular.woff2 | bin | 0 -> 113308 bytes | |||
| -rw-r--r-- | woff2/iosevka-term-thin.woff2 | bin | 0 -> 109768 bytes |
5 files changed, 127 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..198edf6 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ +<html> +<head> + <title> fcked ntwrk </title> + <link rel="stylesheet" href="light.css"> + <meta name="theme-color" content="#0a1010"> + <script> + const countDownDate = new Date("2039-01-19T03:14:07Z"); + + const show_milliseconds = false; + + function show_time () { + var now = new Date(); + var distance = countDownDate - now; + var delta = new Date(distance); + + var years = Math.floor(distance / (1000 * 60 * 60 * 24 * 365.25)); + var days = Math.floor(distance % (1000 * 60 * 60 * 24 * 365.25) / (1000 * 60 * 60 * 24)); + var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) //+ days * 24; + var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + var seconds = Math.floor((distance % (1000 * 60)) / 1000); + var milliseconds = Math.floor(distance % 1000); + + text = '' + + String(years).padStart(2, '0') + '<span class="name-label">y</span>' + + String(days).padStart(2, '0') + '<span class="name-label">d</span>' + + String(hours).padStart(2, '0') + '<span class="name-label">h</span>' + + String(minutes).padStart(2, '0') + '<span class="name-label">m</span>' + + String(seconds).padStart(2, '0') + '<span class="name-label">s</span>'; + if (show_milliseconds) { + text = text + String(milliseconds).padStart(3, '0') + '<span class="name-label">msecs</span>'; + } + document.getElementById("cuntdown").innerHTML = text; + document.getElementById("cuntdown").setAttribute('data-text', document.getElementById("cuntdown").innerHTML); + }; +</script> +</head> +<body> + <div class="v2"> + <span id="label" class="main-label main-rect">Zero dawn in</span> + <br> + <span id="cuntdown" data-text="" class="time main-rect" /> + </div> +</body> +<script> + var interval = 997; + if (show_milliseconds) interval = 57; + show_time (); + setInterval(show_time, interval); + document.querySelector("meta[name=theme-color]").setAttribute('content', '#000000'); +</script> +</html> diff --git a/light.css b/light.css new file mode 100644 index 0000000..671362c --- /dev/null +++ b/light.css @@ -0,0 +1,76 @@ +body { + background-color: #0a1010; +} + +.v2 { + font-family: "Iosevka Term Web"; + font-weight: 100; + font-size: 104px; + text-align: left; + margin: 5% 5% 0; + overflow: hidden; +} + +@keyframes cover-trans { + to { + shape-inside: polygon(0 0, 100% 0, 100% 100%, 0 100%); + -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); + } +} + +.main-rect { + background-color: #132020; + color: cyan; + display: inline-block; + padding: 0 20px; + #shape-inside: polygon(0 0, 0px 0, 0px 100% 0 100%); + #shape-padding: 20px; +} + +.main-label { + animation: cover-trans 1s; + animation-delay: 0.2s; + animation-fill-mode: forwards; + animation-timing-function: linear; + -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); +} + +.time { + display: inline-block; + margin-left: 5%; + margin-top: 10px; + animation: cover-trans 1.1s; + animation-delay: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: cubic-bezier(.41,.08,.46,.57); + -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); +} + +.name-label { + font-size: 24; + font-weight: 400; + padding: 0px 8px; + color: teal; +} + +@font-face { + font-family: 'Iosevka Term Web'; + font-weight: 100; + font-style: normal; + src: url('woff2/iosevka-term-thin.woff2') format('woff2'); +} + +@font-face { + font-family: 'Iosevka Term Web'; + font-weight: 200; + font-style: normal; + src: url('woff2/iosevka-term-extralight.woff2') format('woff2'); +} + +@font-face { + font-family: 'Iosevka Term Web'; + font-weight: 400; + font-style: normal; + src: url('woff2/iosevka-term-regular.woff2') format('woff2'); +} + diff --git a/woff2/iosevka-term-extralight.woff2 b/woff2/iosevka-term-extralight.woff2 Binary files differnew file mode 100644 index 0000000..0a3c6d6 --- /dev/null +++ b/woff2/iosevka-term-extralight.woff2 diff --git a/woff2/iosevka-term-regular.woff2 b/woff2/iosevka-term-regular.woff2 Binary files differnew file mode 100644 index 0000000..2d54c1a --- /dev/null +++ b/woff2/iosevka-term-regular.woff2 diff --git a/woff2/iosevka-term-thin.woff2 b/woff2/iosevka-term-thin.woff2 Binary files differnew file mode 100644 index 0000000..a45efe3 --- /dev/null +++ b/woff2/iosevka-term-thin.woff2 |