add countdown

This commit is contained in:
hokkqi 2020-07-01 00:22:23 +02:00
parent 08a54090ae
commit c9e48b7313
4 changed files with 104 additions and 286 deletions

View file

@ -13,7 +13,6 @@ body {
.logo {
width: 80%;
height: ;
padding-top: 20px;
}
@ -54,7 +53,6 @@ div {
.buttons {
padding-left: 0;
display: inline-block;
}
::-webkit-scrollbar {
@ -70,6 +68,25 @@ div {
color: #fec019;
}
#d,
#h,
#m,
#s {
display: inline;
}
#d::after {
content: " days";
}
#h::after {
content: " hours";
}
#m::after {
content: " minutes";
}
#s::after {
content: " seconds";
}
@media (max-device-width: 667px), (max-width: 1024px) {
body {
background-color: black;
@ -149,4 +166,3 @@ div {
}
}
/*# sourceMappingURL=main.css.map */

View file

@ -1,9 +0,0 @@
{
"version": 3,
"mappings": "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",
"sources": [
"main.scss"
],
"names": [],
"file": "main.css"
}

View file

@ -1,193 +0,0 @@
body {
background-color: black;
color: white;
background-image: url("/assets/images/NSW2-BG.jpg");
background-repeat: no-repeat;
background-size: auto;
text-align: center;
padding: 0;
margin: 0;
font-family: sans-serif;
font-style: italic;
}
@mixin above {
position: relative;
top: -60px;
left: 50%;
}
.logo {
width: 60%;
height: 20%;
padding-top: 20px;
}
.subtext {
width: 70%;
height: 10%;
padding-bottom: 20px;
padding-top: 10px;
}
.webdate {
width: 50%;
height: 20%;
padding-top: 20px;
padding-bottom: 25px;
}
.note {
width: 80%;
height: 20%;
}
li {
list-style: none;
display: inline-block;
}
.button {
padding-top: 5px;
padding-bottom: 5px;
width: 50%;
height: 10%;
}
.list {
font-size: 2.5vw;
padding-left: 0;
padding-top: 20px;
}
.buttons {
padding-left: 0;
}
.allages {
width: 50px;
height: 40px;
@include above();
}
.ticket {
width: 75px;
height: 40px;
@include above();
}
.time {
width: 50px;
height: 50px;
@include above();
}
::-webkit-scrollbar {
display: none;
}
#credits {
color: white;
font-size: 1vw;
a {
color: #fec019;
}
}
@media (max-device-width: 667px), (max-width: 1024px) {
body {
background-color: black;
color: rgb(255, 255, 255);
background-image: url("/assets/images/NSW2-BG.jpg");
background-repeat: no-repeat;
background-size: auto;
padding: 0;
margin: 0;
font-family: sans-serif;
font-style: italic;
}
.logo {
width: 75%;
height: 20%;
padding-top: 5px;
}
.subtext {
width: 95%;
}
.webdate {
width: 95%;
padding-bottom: 0;
}
.note {
width: 95%;
}
li {
list-style: none;
display: inline-block;
}
.button {
width: 95%;
}
.list {
font-size: 6vw;
display: inline-grid;
padding-left: 0;
}
.buttons {
display: inline-grid;
}
::-webkit-scrollbar {
display: none;
}
.allages {
display: none;
}
.ticket {
display: none;
}
.time {
display: none;
}
#credits {
color: white;
font-size: 2.5vw;
a {
color: #fec019;
}
}
}
@media (min-width: 1921px) {
.allages {
display: none;
}
.ticket {
display: none;
}
.time {
display: none;
}
}
@media (max-width: 1024px) {
.button {
padding-top: 5px;
padding-bottom: 5px;
width: 50%;
height: 10%;
}
.buttons {
padding-left: 0;
}
}

View file

@ -1,74 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>NONSTOPWORLD</title>
<link rel="stylesheet" href="./assets/css/main.css" />
</head>
<body>
<div class="center">
<img
class="logo"
src="/assets/images/NSW2-LOGO-NEW.png"
alt="@ NonStopPup presents NONSTOPWORLD 2"
/>
<img
class="subtext"
src="/assets/images/NSW2-SUBTEXT.png"
alt="THE SECOND ANNUAL MASSIVE ONLINE FURRY CONVENTION AND THE HISTORY, ART, CULTURE, & INFLUENCE OF THE FURRY FANDOM"
/>
<img class="logo" src="/assets/images/NSW2-LOGO-NEW.png" alt="@ NonStopPup presents NONSTOPWORLD 2" />
<img class="subtext" src="/assets/images/NSW2-SUBTEXT.png"
alt="THE SECOND ANNUAL MASSIVE ONLINE FURRY CONVENTION AND THE HISTORY, ART, CULTURE, & INFLUENCE OF THE FURRY FANDOM" />
<br />
<div class="buttons">
<div id="discord">
<a href="https://discord.gg/tzxXz5D"
><img
src="/assets/images/NSW2-BUTTON-DISCORD-NEW.png"
alt=""
class="button"
/></a>
<a href="https://discord.gg/tzxXz5D"><img src="/assets/images/NSW2-BUTTON-DISCORD-NEW.png" alt=""
class="button" /></a>
</div>
<div id="vip">
<a href="https://forms.gle/7RequadVcZM344po8">
<img
src="/assets/images/NSW2-BUTTON-VIP-NEW.png"
alt=""
class="button"
/>
<img src="/assets/images/NSW2-BUTTON-VIP-NEW.png" alt="" class="button" />
</a>
</div>
<div id="dealersden">
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSfDjBqwumbZkjznuFKWVsbVTARF1jxbFsJc0jYflWhsQ8Pzmw/viewform"
>
<img
src="/assets/images/NSW2-BUTTON-DEALERS-NEW.png"
alt=""
class="button"
/>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfDjBqwumbZkjznuFKWVsbVTARF1jxbFsJc0jYflWhsQ8Pzmw/viewform">
<img src="/assets/images/NSW2-BUTTON-DEALERS-NEW.png" alt="" class="button" />
</a>
</div>
</div>
<br /> <br />
<iframe width="1000px" height="563px" src="https://www.youtube.com/embed/l-3bHL1eqps?autoplay=1&mute=1&enablejsapi=1" frameborder="0"; autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
<iframe width="1000px" height="563px"
src="https://www.youtube.com/embed/l-3bHL1eqps?autoplay=1&mute=1&enablejsapi=1" frameborder="0" ; autoplay;
encrypted-media; picture-in-picture" allowfullscreen></iframe>
<br /> <br />
<img
class="webdate"
src="/assets/images/NSFW2-DATE.png"
alt="JULY 18-19 on nonstop.world"
/>
<!-- COUNTDOWN -->
<h1 id="time">
<div id="d"></div>
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</h1>
<img class="webdate" src="/assets/images/NSFW2-DATE.png" alt="JULY 18-19 on nonstop.world" />
<br /> <br />
<img
src="/assets/images/NSW2-VIP_NOTICE-NEW.png"
<img src="/assets/images/NSW2-VIP_NOTICE-NEW.png"
alt="$5 VIP TICKETS AVAILABLE FOR SPECIAL WORLD AREA ACCESS. ALL TICKET SALES DONATED TO DIRECT RELIEF COVID-19 & NAACP LEGAL DEFENSE FUND"
class="note"
/>
class="note" />
<br /> <br /> <br />
@ -82,5 +67,24 @@
<a href="https://twitter.com/hokkqi" target="_blank">HOKKQI</a>
</p>
</div>
<script>
function calcTime() {
const release = new Date(2020, 7, 19);
let remaining = (release - Date.now()) / 1000; // time in seconds
let days = Math.floor(remaining / 60 / 60 / 24);
let hours = Math.floor((remaining % (60 * 60 * 24)) / 60 / 60);
let mins = Math.floor((remaining % (60 * 60)) / 60);
let secs = Math.floor(remaining % 60);
document.getElementById("d").innerHTML = days;
document.getElementById("h").innerHTML = ("0" + hours).slice(-2);
document.getElementById("m").innerHTML = ("0" + mins).slice(-2);
document.getElementById("s").innerHTML = ("0" + secs).slice(-2);
}
setInterval(function() {
calcTime();
}, 1000);
</script>
</body>
</html>