diff --git a/proj/bitemychin/index.html b/proj/bitemychin/index.html new file mode 100644 index 0000000..47bb83a --- /dev/null +++ b/proj/bitemychin/index.html @@ -0,0 +1,91 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Bite my chin</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> +</head> +<body> + +<style> +* { + margin: 0px; + padding: 0px; +} + +div#app { + max-width: 400px; + margin-left: auto; + margin-right: auto; +} + +section#intro { + margin-top: 20px; + text-align: left; +} + +p { + margin-bottom: 10px; +} + +section#countdown { + width: 100%; + text-align: center; +} + +@font-face{ + font-family: LatinMono; + src: url(https://file.brz9.dev/web/fonts/Latin-Modern-Mono/lmmonolt10-bold.otf); + font-style: normal; + font-weight: 400; +} + +* { + font-family: LatinMono; + font-size: 1rem; + color: #18181b; + background-color: #faeada; +} +</style> + +<div id="app"> + + <section id="intro"> + <p>Dear Julia,</p> + <p></p> + <p>Assuming you will come for 1pm, you will be able to bite my chin in:</p> + <section id="countdown"> + <span class="hcount"></span><span> hours, </span> + <span class="mcount"></span><span> minutes and</span> + <span class="scount"></span><span> seconds.</span> + </section> + <p></p> + <p>Sincerly,</p> + <p>Charles</p> + + +</div> + + +</body> +<script> +countdown = () => { + const youpiTime = new Date('Jan 24 2022 13:00:00 GMT+0100') + var youpT = youpiTime.getTime() + let parisString = new Date().toLocaleString("en-US", { timeZone: "Europe/Paris" }); + let parisTime = new Date(parisString) + let parisT = parisTime.getTime() + let gap = youpT - parisT + secLeft = Math.floor((gap / 1000) % 60) + totalMinLeft = Math.floor(gap / 1000 / 60) + hoursLeft = Math.floor(totalMinLeft / 60) + minLeft = Math.floor(totalMinLeft % 60) + document.querySelector('.hcount').innerText = hoursLeft + document.querySelector('.mcount').innerText = minLeft + document.querySelector('.scount').innerText = secLeft +} + +setInterval(countdown, 1000) +</script> +</html> +