diff --git a/assets/game-boy-advance-startup-sound.mp3 b/assets/game-boy-advance-startup-sound.mp3 new file mode 100644 index 0000000..e9906aa Binary files /dev/null and b/assets/game-boy-advance-startup-sound.mp3 differ diff --git a/assets/startup_quotes.json b/assets/startup_quotes.json new file mode 100644 index 0000000..a034556 --- /dev/null +++ b/assets/startup_quotes.json @@ -0,0 +1,48 @@ +{ + "quotes": [ + { + "text": "COGITO ERGO SUM", + "author": "René Descartes" + }, + { + "text": "74LS181", + "author": "Texas Instruments" + }, + { + "text": "REAPER", + "author": "Cockos" + }, + { + "text": "NAUSICAA", + "author": "Ghibli" + }, + { + "text": "C", + "author": "Dennis Ritchie" + }, + { + "text": "PICO", + "author": "Raspberry Pi" + }, + { + "text": "MINECRAFT", + "author": "Mojang" + }, + { + "text": "GEOMETRY DASH", + "author": "RobTop" + }, + { + "text": "CELESTE", + "author": "Extremely OK Games" + }, + { + "text": "GNU/LINUX", + "author": "Linus Torvalds" + }, + { + "text": "DEBIAN", + "author": "Ian Murdock" + } + ] +} \ No newline at end of file diff --git a/files/startup_quotes.json b/files/startup_quotes.json deleted file mode 100644 index 0010159..0000000 --- a/files/startup_quotes.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "quotes": [ - { - "text": "Cogito ergo sum", - "author": "René Descartes" - }, - { - "text": "74ls181", - "author": "Texas Instruments" - }, - { - "text": "Reaper", - "author": "Cockos" - }, - { - "text": "Nausicaä", - "author": "Ghibli" - }, - { - "text": "C", - "author": "Dennis Ritchie" - }, - { - "text": "Pico", - "author": "Raspberry Pi" - } - ] -} \ No newline at end of file diff --git a/fonts/FuturaBold/FuturaBold.eot b/fonts/FuturaBold/FuturaBold.eot new file mode 100644 index 0000000..5fb5ac8 Binary files /dev/null and b/fonts/FuturaBold/FuturaBold.eot differ diff --git a/fonts/FuturaBold/FuturaBold.svg b/fonts/FuturaBold/FuturaBold.svg new file mode 100644 index 0000000..6c67d33 --- /dev/null +++ b/fonts/FuturaBold/FuturaBold.svg @@ -0,0 +1,704 @@ + + + + +Created by FontForge 20201107 at Sun Mar 8 11:50:28 2026 + By www-data +Copyright (c) 1987 Adobe Systems Incorporated. All rights reserved. Futura is a registered trademark of Fundicion Tipografica Neufville S. A. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/FuturaBold/FuturaBold.ttf b/fonts/FuturaBold/FuturaBold.ttf new file mode 100644 index 0000000..3e36591 Binary files /dev/null and b/fonts/FuturaBold/FuturaBold.ttf differ diff --git a/fonts/FuturaBold/FuturaBold.woff b/fonts/FuturaBold/FuturaBold.woff new file mode 100644 index 0000000..17bdcd4 Binary files /dev/null and b/fonts/FuturaBold/FuturaBold.woff differ diff --git a/fonts/FuturaBold/FuturaBold.woff2 b/fonts/FuturaBold/FuturaBold.woff2 new file mode 100644 index 0000000..6fcb6f4 Binary files /dev/null and b/fonts/FuturaBold/FuturaBold.woff2 differ diff --git a/fonts/FuturaBoldItalic/FuturaBoldItalic.eot b/fonts/FuturaBoldItalic/FuturaBoldItalic.eot new file mode 100644 index 0000000..19f1c7c Binary files /dev/null and b/fonts/FuturaBoldItalic/FuturaBoldItalic.eot differ diff --git a/fonts/FuturaBoldItalic/FuturaBoldItalic.svg b/fonts/FuturaBoldItalic/FuturaBoldItalic.svg new file mode 100644 index 0000000..f392515 --- /dev/null +++ b/fonts/FuturaBoldItalic/FuturaBoldItalic.svg @@ -0,0 +1,1206 @@ + + + + +Created by FontForge 20201107 at Sun Mar 8 11:50:53 2026 + By www-data +Copyright 1990-1999 as an unpublished work by Bitstream Inc. All rights reserved. Confidential. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/FuturaBoldItalic/FuturaBoldItalic.ttf b/fonts/FuturaBoldItalic/FuturaBoldItalic.ttf new file mode 100644 index 0000000..c180142 Binary files /dev/null and b/fonts/FuturaBoldItalic/FuturaBoldItalic.ttf differ diff --git a/fonts/FuturaBoldItalic/FuturaBoldItalic.woff b/fonts/FuturaBoldItalic/FuturaBoldItalic.woff new file mode 100644 index 0000000..3e725c8 Binary files /dev/null and b/fonts/FuturaBoldItalic/FuturaBoldItalic.woff differ diff --git a/fonts/FuturaBoldItalic/FuturaBoldItalic.woff2 b/fonts/FuturaBoldItalic/FuturaBoldItalic.woff2 new file mode 100644 index 0000000..6567856 Binary files /dev/null and b/fonts/FuturaBoldItalic/FuturaBoldItalic.woff2 differ diff --git a/index.html b/index.html index 0bfbd99..e636e6a 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,19 @@ - Compteur Electrique + Compteur Electrique + + + + + + - - + +

Nothin' to see for the moment,

Please go outside, sing to the ant.

diff --git a/scripts/session_startup_animation.js b/scripts/session_startup_animation.js index 044b0a8..3244046 100644 --- a/scripts/session_startup_animation.js +++ b/scripts/session_startup_animation.js @@ -1,35 +1,91 @@ -function session_startup_animation() +function waitForAnimationEnd(elem, animationName) { - let body = document.querySelector("body"); - body.style.opacity = 0; - - let quotes = null; - let xmlhttp = new XMLHttpRequest(); - - xmlhttp.open("GET", "files/startup_quotes.json", false); - xmlhttp.send(); - - if (xmlhttp.status==200) { - quotes = JSON.parse(xmlhttp.responseText)["quotes"]; - } - - console.log(quotes.length); + return new Promise(resolve => { + function handleAnimationEnd(evt) + { + if (evt.animationName === animationName) + { + elem.onanimationend = null; + resolve(); + } + } + elem.onanimationend = handleAnimationEnd; + }); } -function interrupt_starting_animation() +async function sessionStartupAnimation() { - + // Page setup + let all_default_elements = document.body.querySelectorAll("*"); + all_default_elements.forEach((elem) => elem.style.opacity = 0); + + console.log(document.body.style.height); + + let xmlhttp = new XMLHttpRequest(); + + // Not the most optimised way, but it's working + xmlhttp.open("GET", "assets/startup_quotes.json", false); + xmlhttp.send(); + if(xmlhttp.status != 200) + { + throw WebTransportError("The file 'assets/startup_quots.json' is not available"); + } + + let quotes = JSON.parse(xmlhttp.responseText)["quotes"]; + let quote = quotes[Math.floor(Math.random() * quotes.length)]; + + // First the author + let author_elem = document.createElement("h2"); + author_elem.className = "startup-animation-author"; + author_elem.innerHTML = quote.author + "®"; + + document.body.appendChild(author_elem); + + await waitForAnimationEnd(author_elem, "opacity-fade-in") + + // Then the text and sound + let text_elem = document.createElement("h1"); + text_elem.className = "startup-animation-text"; + text_elem.innerHTML = quote.text; + + let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3"); + sound.play(); + + document.body.appendChild(text_elem); + + await waitForAnimationEnd(text_elem, "text-animation"); + + // Fade out for both + text_elem.style.animation = "opacity-fade-out 1s ease-in"; + text_elem.style.opacity = 0; + author_elem.style.animation = "opacity-fade-out 1s ease-in"; + author_elem.style.opacity = 0; + + await waitForAnimationEnd(text_elem, "opacity-fade-out"); + + // Remove them and fade in for page content + document.body.removeChild(author_elem); + document.body.removeChild(text_elem); + + all_default_elements.forEach((elem) => elem.style.animation = "opacity-fade-in 0.2s"); + all_default_elements.forEach((elem) => elem.style.opacity = 1); +} + +function interruptStartingAnimation() +{ + // Bad but works in this context + window.location.reload(); } window.onkeydown = () => { - interrupt_starting_animation(); + interruptStartingAnimation(); window.onkeydown = null; } window.onload = () => { - if(!sessionStorage.getItem("hasExecutedSessionStartupAnimation")) + //if(!sessionStorage.getItem("hasExecutedSessionStartupAnimation")) { sessionStorage.setItem("hasExecutedSessionStartupAnimation", "true"); - session_startup_animation(); + sessionStartupAnimation(); } } diff --git a/styles/general.css b/styles/general.css new file mode 100644 index 0000000..8c319a1 --- /dev/null +++ b/styles/general.css @@ -0,0 +1,4 @@ +body { + background-color: #151416; + color: white; +} \ No newline at end of file diff --git a/styles/session_startup_animation.css b/styles/session_startup_animation.css new file mode 100644 index 0000000..89c0ced --- /dev/null +++ b/styles/session_startup_animation.css @@ -0,0 +1,82 @@ +@font-face { + font-family: 'FuturaBold'; + src: url('../fonts/FuturaBold/FuturaBold.eot'); + src: url('../fonts/FuturaBold/FuturaBold.eot?#iefix') format('embedded-opentype'), + url('../fonts/FuturaBold/FuturaBold.woff2') format('woff2'), + url('../fonts/FuturaBold/FuturaBold.woff') format('woff'), + url('../fonts/FuturaBold/FuturaBold.ttf') format('truetype'), + url('../fonts/FuturaBold/FuturaBold.svg#FuturaBold') format('svg'); +} + +@font-face { + font-family: 'FuturaBoldItalic'; + src: url('../fonts/FuturaBoldItalic/FuturaBoldItalic.eot'); + src: url('../fonts/FuturaBoldItalic/FuturaBoldItalic.eot?#iefix') format('embedded-opentype'), + url('../fonts/FuturaBoldItalic/FuturaBoldItalic.woff2') format('woff2'), + url('../fonts/FuturaBoldItalic/FuturaBoldItalic.woff') format('woff'), + url('../fonts/FuturaBoldItalic/FuturaBoldItalic.ttf') format('truetype'), + url('../fonts/FuturaBoldItalic/FuturaBoldItalic.svg#FuturaBT-BoldItalic') format('svg'); +} + +@keyframes opacity-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes opacity-fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes text-animation { + 0% { + filter: hue-rotate(45deg); + top: 100% + } + 45% { + top: 15%; + } + 75% { + top: 24%; + } + 90% { + top: 23% + } + 99% { + top: 25.2% + } + 100% { + filter: hue-rotate(360deg); + } +} + +.startup-animation-text { + font-family: "FuturaBoldItalic"; + font-size: 9vh; + color: blue; + position: fixed; + width: 100%; + top: 25%; + text-align: center; + animation: text-animation 2.5s ease-in-out, opacity-fade-in 1s; +} + +.startup-animation-author { + font-family: "FuturaBold"; + font-size: 5vh; + color: #ff00f8; + position: fixed; + width: 100%; + bottom: 20%; + text-align: center; + white-space: nowrap; + animation: opacity-fade-in 1s ease-in; +}