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>
|
|||
|
|
|