Ajouter le countdown de lancement #10
1 changed files with 215 additions and 0 deletions
215
countdown/index.html
Normal file
215
countdown/index.html
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name=viewport content="width=device-width, initial-scale=1.0">
|
||||
<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;
|
||||
height:calc(100% - 20px);
|
||||
/*top: calc(50% - 200px + 40px);
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.decount-with-title{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
text-align:center;
|
||||
flex: 2 0;
|
||||
width:60%;
|
||||
}
|
||||
.decount-with-title * {
|
||||
text-align:center;
|
||||
}
|
||||
.decount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: xx-large;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.decount span {
|
||||
/*background-color: blue;*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.decount dateseparator {
|
||||
/*background-color:darkslategray;*/
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.decount-info {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position:relative;
|
||||
height: 100%;
|
||||
width:40%;
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
.logo{
|
||||
z-index:-1;
|
||||
position:absolute;
|
||||
}
|
||||
.decount-with-title *{
|
||||
--thecolor:black;
|
||||
text-shadow: -1px -1px 0 var(--thecolor), 1px -1px 0 var(--thecolor), -1px 1px 0 var(--thecolor), 1px 1px 0 var(--thecolor);
|
||||
}
|
||||
}
|
||||
|
||||
.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/square_notext_white_transparent.svg">
|
||||
<div class=decount-with-title>
|
||||
<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>
|
||||
<div class="credits">
|
||||
<span class="contactus">Suivez nous >
|
||||
<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