standalone page => simple banner

This commit is contained in:
Thomas Smith 2022-10-26 18:28:50 -04:00
parent dee17c9910
commit 8a90c23716
3 changed files with 86 additions and 32 deletions

View file

@ -10,37 +10,6 @@
</div>
</section>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 3, 2022 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<style>
@font-face {

View file

@ -168,3 +168,36 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
rdt('track', 'SignUp');
rdt('track', 'ViewContent');
</script>
<!-- Launch Countdown Timer -->
<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 3, 2022 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>

View file

@ -1,4 +1,56 @@
<section class="countdown-section">
<div class="countdown-container">
<div class="countdown-contents"><p class="text-center countdown" id="something-new">A new brew's coming in <span id="demo"></span></p></div>
</div>
</section>
<style>
@font-face {
font-family: "pp-neue-machina";
src: url("/fonts/PPNeueMachina-InktrapLight.woff") format("woff");
}
#demo, .authenticate, #something-new{
font-family: "pp-neue-machina", sans-serif;
}
#demo,
.authenticate a{
color: #00ffd0;
}
.countdown-section{
background-color: #1a1a1a;
position: relative;
z-index: 100;
}
.countdown-container{
height: 6vh;
position: relative;
width: 100%;
}
.countdown-contents{
width: 100%;
display: block;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.countdown{
margin-bottom: 0px !important;
}
/* Floating GitHub Icon */
.gf-container {
width: 80px;
height: 80px;
@ -54,7 +106,7 @@
margin-top: auto;
margin-bottom: auto;
}
</style>
<a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" class="gf-container" style="background-color:#8EC7BF;">