diff --git a/index.html b/index.html index c9cc13d..840114f 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,11 @@
+
+ headphones recommended +
+

Headphones recommended

+
+ + \ No newline at end of file diff --git a/main.js b/main.js index d452664..3f247a0 100644 --- a/main.js +++ b/main.js @@ -26,6 +26,16 @@ const begin = () => { for (let element of document.querySelectorAll('.credits')) { element.id = 'creditsOff'; } + setTimeout(() => { + for (let element of document.querySelectorAll('.headphonesOff')) { + element.className = 'headphonesOn'; + } + }, 500); + setTimeout(() => { + for (let element of document.querySelectorAll('.headphonesOn')) { + element.className = 'headphonesOff'; + } + }, 4500); setTimeout(() => { for (let element of document.querySelectorAll('.credits')) { element.style.display = 'none'; @@ -33,6 +43,6 @@ const begin = () => { for (let element of document.querySelectorAll('.controlButtonOff')) { element.className = 'controlButtonOn'; } - }, 1000); - playPauseAudio() + playPauseAudio() + }, 7000); }; diff --git a/public/images/headphones.svg b/public/images/headphones.svg new file mode 100644 index 0000000..7a48a34 --- /dev/null +++ b/public/images/headphones.svg @@ -0,0 +1,225 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles.css b/styles.css index 696b14e..d7db79e 100644 --- a/styles.css +++ b/styles.css @@ -30,6 +30,8 @@ main { .centre { margin: 40vh 0; + display: flex; + flex-direction: column; } .centre #begin { @@ -43,13 +45,37 @@ main { .centre #beginOff { visibility: none; opacity: 0; - transition: visibility 0.3s, opacity 0.3s linear; + transition: visibility 0.5s, opacity 0.5s linear; background: rgb(var(--card-rgb)); border: 1px solid rgb(var(--card-border-rgb)); border-radius: var(--border-radius); padding: 1rem 1.2rem; } +.headphonesOff { + visibility: visible; + opacity: 0; + transition: display 2s, opacity 2s linear; + display: inherit; + flex-direction: inherit; + align-items: center; +} + +.headphonesOn { + visibility: visible; + opacity: 1; + transition: opacity 2s linear; + display: inherit; + flex-direction: inherit; + align-items: center; +} + +#headphonesImage { + height: 100px; + width: 100px; + margin-bottom: 10px; +} + footer { position: fixed; width: 100%;