Ajouter 'content/countdown/index.html'

This commit is contained in:
Gzod01 2023-06-19 12:24:54 +02:00
parent 2ee7f2732a
commit 535da1b4fc

View file

@ -0,0 +1,193 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
font-family: Roboto;
}
body {
--color1: rgb(2 94 115);
--color2: #f2a71a;
border-top: 20px solid var(--color2);
background-color: var(--color1);
height: calc(100vh - 40px);
width: 100%;
margin: 0;
}
.decount-center {
position: relative;
padding-top: 120px;
/*top: calc(50% - 200px + 40px);
left: 50%;
transform: translate(-50%, -50%);*/
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.decount {
display: flex;
align-items: center;
justify-content: space-around;
font-size: xx-large;
width: 70%;
color: white;
}
.decount span {
/*background-color: blue;*/
display: inline-block;
padding: 20px;
}
.decount dateseparator {
/*background-color:darkslategray;*/
padding: 10px;
display: inline-block;
text-align: center;
}
.decount-info {
align-self: center;
text-align: center;
color: white;
}
.logo {
height: 200px;
}
.credits {
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
top: 90%;
width: 100%;
padding: 20px 0px;
color: white;
}
.madeby {
position: fixed;
bottom: 0%;
right: 0%;
font-size: 50%;
text-decoration: none;
color: white;
}
.madeby * {
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div class="decount-center">
<img class="logo" height=20
src="https://forge.lefuturiste.fr/etoiledebethleem/website/raw/branch/master/assets/images/all_logos/logo_texte_rectangle_blanc_transparent.svg">
<p class="decount-info">Ouverture du site dans...</p>
<div class=decount>
<!-- day et week sont dans .lessprecision, hour dans les deux, min, sec dans .moreprecision-->
<span id=day></span>
<dateseparator id="daysep">-</dateseparator>
<span id=hour></span>
<dateseparator>:</dateseparator>
<span id=min></span>
<dateseparator id="secsep">:</dateseparator>
<span id=sec></span>
</div>
</div>
<div class="credits">
<span class="contactus">En attendant retrouvez nous sur
<span name=tabulation style="display:inline-block; width:20px"></span>
<a class=facebookbutton href="https://www.facebook.com/letoiledebethleem">
<svg xmlns="http://www.w3.org/2000/svg" style="fill:white; height:1.5em;" viewBox="0 0 512 512">
<path
d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
</svg>
</a>
</span>
</div>
<span class="madeby"><a href="//gzod01.fr">GZod01</a></span>
<script>
Date.prototype.getWeek = function () {
var date = new Date(this.getTime());
date.setHours(0, 0, 0, 0);
// Thursday in current week decides the year.
date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
// January 4 is always in week 1.
var week1 = new Date(date.getFullYear(), 0, 4);
// Adjust to Thursday in week 1 and count number of weeks from date to week1.
return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000
- 3 + (week1.getDay() + 6) % 7) / 7);
}
let daydiv = document.querySelector('#day');
let hourdiv = document.querySelector('#hour');
let mindiv = document.querySelector('#min');
let secdiv = document.querySelector('#sec');
var eventdate = "2023/07/14 00:00:00"
var date = new Date();
function filldatezero(variable) {
return String(variable).padStart(2, '0');
}
function setTime() {
let curtimestamp = Date.now();
let totimestamp = Date.parse(eventdate); //a remplacer par la date de l'évènement
let thetimestamp = totimestamp - curtimestamp
if (thetimestamp == 0 | thetimestamp < 0) {
location = "/"
}
date.setTime(thetimestamp);
let year = date.getFullYear() - 1970;
let month = date.getMonth();
//let week = date.getWeek();
let day = date.getDate();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
if (day - 1 == 0) {
document.querySelector('#day').style.display = "none"
document.querySelector('#daysep').style.display = "none"
}
else{
secdiv.style.display="none";
document.querySelector('#secsep').style.display="none"
}
day = filldatezero(day)
hour = filldatezero(hour)
min = filldatezero(min)
sec = filldatezero(sec)
daydiv.innerHTML = day + "j"
hourdiv.innerHTML = hour + "h"
mindiv.innerHTML = min + "min"
secdiv.innerHTML = sec + "secondes"
//console.log(`Il reste ${year} ans, ${year} mois, ${day} Jours, ${hour} Heures, ${min} Minutes, ${sec} Secondes avant l'ouverture du site`)
setTimeout(setTime, 1000);
}
window.onload = setTime
</script>
</body>
</html>