Ajouter le countdown de lancement #10
1 changed files with 193 additions and 0 deletions
193
content/countdown/index.html
Normal file
193
content/countdown/index.html
Normal 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>
|
||||||
Loading…
Reference in a new issue