163 lines
4.1 KiB
HTML
163 lines
4.1 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
|
||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-167417611-1"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
|
||
gtag('config', 'UA-167417611-1');
|
||
</script>
|
||
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||
<meta name="description" content="Site de présentation d'Adrien CHARBONNEAU - Naturaliste écologue et ornithologue passionné.">
|
||
<meta name="author" content="Adrien CHARBONNEAU">
|
||
|
||
<meta property="og:title" content="Adrien CHARBONNEAU – Naturaliste écologue" />
|
||
<meta property="og:image" content="https://adriencharbonneau.fr/images/avatar.jpg" />
|
||
<meta property="og:url" content="https://adriencharbonneau.fr" />
|
||
<meta property="og:description" content="Site de présentation d'Adrien CHARBONNEAU - Naturaliste écologue et ornithologue passionné." />
|
||
<meta property="og:nom_du_site" content="Adrien CHARBONNEAU – Naturaliste écologue"/>
|
||
|
||
<link rel="icon" type="image/png" href="images/AC_favicon.png" />
|
||
<TITLE>LANCEMENT DU SITE</TITLE>
|
||
<style>
|
||
/* general styling */
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html, body {
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
body {
|
||
align-items: center;
|
||
background-color: #ffd54f;
|
||
display: flex;
|
||
font-family: -apple-system,
|
||
BlinkMacSystemFont,
|
||
"Segoe UI",
|
||
Roboto,
|
||
Oxygen-Sans,
|
||
Ubuntu,
|
||
Cantarell,
|
||
"Helvetica Neue",
|
||
sans-serif;
|
||
}
|
||
|
||
.container {
|
||
color: #333;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
font-weight: normal;
|
||
letter-spacing: .125rem;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
li {
|
||
display: inline-block;
|
||
font-size: 1.5em;
|
||
list-style-type: none;
|
||
padding: 1em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
li span {
|
||
display: block;
|
||
font-size: 4.5rem;
|
||
}
|
||
|
||
.message {
|
||
font-size: 4rem;
|
||
display: none;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.emoji {
|
||
padding: 0 .25rem;
|
||
}
|
||
|
||
@media all and (max-width: 768px) {
|
||
h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
li {
|
||
font-size: 1.125rem;
|
||
padding: .75rem;
|
||
}
|
||
|
||
li span {
|
||
font-size: 3.375rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
<h1 id="headline">Lancement du nouveau site internet 🚀 :</h1>
|
||
<div id="countdown">
|
||
<ul>
|
||
<li><span id="days"></span>Jours</li>
|
||
<li><span id="hours"></span>Heures</li>
|
||
<li><span id="minutes"></span>Minutes</li>
|
||
<li><span id="seconds"></span>Secondes</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
document.head.appendChild(Object.assign(document.createElement("link"), {rel: "icon", href: "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>"}))
|
||
|
||
(function () {
|
||
const second = 1000,
|
||
minute = second * 60,
|
||
hour = minute * 60,
|
||
day = hour * 24;
|
||
|
||
let launch = "May 2, 2021 00:00:00",
|
||
countDown = new Date(launch).getTime(),
|
||
x = setInterval(function() {
|
||
|
||
let now = new Date().getTime(),
|
||
distance = countDown - now;
|
||
|
||
document.getElementById("days").innerText = Math.floor(distance / (day)),
|
||
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
|
||
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
|
||
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
|
||
|
||
//do something later when date is reached
|
||
if (distance < 0) {
|
||
let headline = document.getElementById("headline"),
|
||
countdown = document.getElementById("countdown"),
|
||
content = document.getElementById("content");
|
||
|
||
headline.innerText = "Le nouveau site est lancé 🚀 ! Il suffit de recharger la page...";
|
||
countdown.style.display = "none";
|
||
content.style.display = "block";
|
||
|
||
clearInterval(x);
|
||
}
|
||
//seconds
|
||
}, 0)
|
||
}());
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|