From 1038819ecd3af7056fba5121ff46a2ac748468f9 Mon Sep 17 00:00:00 2001 From: Bobby Date: Tue, 11 Jul 2023 22:54:23 -0400 Subject: Music working. Welcome page added --- static/@solitude/css/shared.css | 0 static/@solitude/css/welcome/audio.css | 142 +++++++++++++++++++++ static/@solitude/css/welcome/welcome.css | 98 ++++++++++++++ .../@solitude/music/welcome/cover_art/default.jpeg | Bin 0 -> 10508 bytes .../music/welcome/cover_art/dripping.webp | Bin 0 -> 8960 bytes .../music/welcome/cover_art/sleepy_rain.webp | Bin 0 -> 18214 bytes .../welcome/cover_art/wish_you_were_here.webp | Bin 0 -> 9750 bytes static/@solitude/music/welcome/dripping.mp3 | Bin 0 -> 4451265 bytes .../music/welcome/rain_and_nostalgia_v60s.mp3 | Bin 0 -> 2255307 bytes static/@solitude/music/welcome/sleepy_rain.mp3 | Bin 0 -> 2034625 bytes .../@solitude/music/welcome/wish_you_were_here.mp3 | Bin 0 -> 5014674 bytes static/@solitude/videos/solitude_welcome.mp4 | Bin 0 -> 14740048 bytes 12 files changed, 240 insertions(+) create mode 100644 static/@solitude/css/shared.css create mode 100644 static/@solitude/css/welcome/audio.css create mode 100644 static/@solitude/css/welcome/welcome.css create mode 100644 static/@solitude/music/welcome/cover_art/default.jpeg create mode 100644 static/@solitude/music/welcome/cover_art/dripping.webp create mode 100644 static/@solitude/music/welcome/cover_art/sleepy_rain.webp create mode 100644 static/@solitude/music/welcome/cover_art/wish_you_were_here.webp create mode 100644 static/@solitude/music/welcome/dripping.mp3 create mode 100644 static/@solitude/music/welcome/rain_and_nostalgia_v60s.mp3 create mode 100644 static/@solitude/music/welcome/sleepy_rain.mp3 create mode 100644 static/@solitude/music/welcome/wish_you_were_here.mp3 create mode 100644 static/@solitude/videos/solitude_welcome.mp4 (limited to 'static') diff --git a/static/@solitude/css/shared.css b/static/@solitude/css/shared.css new file mode 100644 index 00000000..e69de29b diff --git a/static/@solitude/css/welcome/audio.css b/static/@solitude/css/welcome/audio.css new file mode 100644 index 00000000..ca5b144c --- /dev/null +++ b/static/@solitude/css/welcome/audio.css @@ -0,0 +1,142 @@ +.audio-bars { + position: relative; + display: flex; + width: auto; + transform: scale3d(2, 2, 1); /* EZ SCALE */ +} +.bar { + background: #fff; + height: 20px; + width: 2px; + margin-right: 2px; +} +.bar:last-child { + margin-right: 0; +} + +@keyframes sound { + 0% { + transform: scale3d(1, 0.1, 1); + } + 100% { + transform: scale3d(1, 1, 1); + } +} +@keyframes sound2 { + 0% { + transform: scale3d(1, 0.1, 1); + } + 100% { + transform: scale3d(1, 0.5, 1); + } +} + +.bar:nth-child(1) { + animation: sound2 0ms -800ms linear infinite alternate; + animation-duration: 200ms; +} +.bar:nth-child(2) { + animation: sound 0ms -800ms linear infinite alternate; + animation-duration: 300ms; +} +.bar:nth-child(3) { + animation: sound 0ms -800ms linear infinite alternate; + animation-duration: 200ms; +} +.bar:nth-child(4) { + animation: sound 0ms -800ms linear infinite alternate; + animation-duration: 250ms; +} +.bar:nth-child(5) { + animation: sound2 0ms -800ms linear infinite alternate; + animation-duration: 150ms; +} + +#welcome-playlist-player { + background: rgba(0, 0, 0, 0.5); + border-radius: 16px 0 0 16px; + box-shadow: 0 4px 30px rgba(255, 255, 255, 0.1); + backdrop-filter: blur(5.5px); + -webkit-backdrop-filter: blur(5.5px); + border: 1px solid rgba(0, 0, 0, 0.3); + padding: 16px; + position: absolute; + bottom: 2rem; + right: 0; + display: flex; + flex-direction: row; + align-items: center; + gap: 1.5rem; + transition: all 0.5s ease; +} + +.controls { + display: flex; + justify-content: center; + align-items: center; + width: 1rem; + height: 1rem; + padding: 0.8rem; + border: 0.2rem solid var(--button-color); + border-radius: 50%; + filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.8)); +} + +.player { + display: flex; + flex-direction: row; + align-items: center; + gap: 1.5rem; +} + +.play { + height: 0; + width: 0; + margin-left: calc(2 * 0.25 * var(--button-height)); + /*margin-left: 17px;*/ + background: none; + border: none; + border-top: var(--button-height) solid transparent; + border-bottom: var(--button-height) solid transparent; + border-left: calc(var(--button-height) * 2 * 0.86) solid var(--button-color); +} + +.pause { + position: relative; + background: none; + border: none; + height: calc(var(--button-height) * 2); + width: calc(var(--button-height) * 2 * 0.86); +} +.pause:before, +.pause:after { + content: ""; + position: absolute; + top: 0; + height: 100%; + width: 33%; + background: var(--button-color); +} +.pause:before { + left: 0; +} +.pause:after { + right: 0; +} + +.hidden { + display: none; +} + +.title { + color: #7679f5; +} + +.artist { + color: #e2fdff; +} + +.track { + letter-spacing: 0.1rem; +} + diff --git a/static/@solitude/css/welcome/welcome.css b/static/@solitude/css/welcome/welcome.css new file mode 100644 index 00000000..22a1a747 --- /dev/null +++ b/static/@solitude/css/welcome/welcome.css @@ -0,0 +1,98 @@ +/* + Shifoo's Solitude by Bobby + -------------------------- + Shifoo's Solitude is a Web Dungeon located beyond the Dark Hollows of the Endless Information SuperHighway — a dark yet tranquil place where all questions end, curiosity begins, the mind awakens, and one's journey begins anew in the solitude of a serene mind! + -------------------------- + + File: welcome.css + Description: CSS for the welcome page (exclusively) + Date: Jul 11, 2023 + Last Modified: Jul 11, 2023 +*/ +@import url("https://fonts.googleapis.com/css2?family=Handlee&family=Poppins:wght@400&family=Share:wght@700&display=swap"); +@import url(audio.css); +:root { + --button-height: 0.5rem; + --button-color: #edd; + color-schema: dark; + font-family: "Handlee", cursive; +} + +* { + margin: 0; + padding: 0; + color: white; +} + +#cover-video { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; + z-index: -100; +} + +#cover-wrapper { + position: fixed; + top: 0; + left: 0; + min-width: 100%; + min-height: 100%; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.15); + z-index: -99; +} + +#welcome-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.cwrapper { + text-align: center; +} + +p { + margin: 0; + padding: 0; +} + +.small { + font-size: 0.8rem; + margin: 0.5rem 0; + color: #aaa; +} + +#welcome-button { + font-family: "Poppins", sans-serif; + font-size: 1.5rem; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + transition: all 0.2s ease-in-out; + margin-top: 10rem; +} + +.description { + font-family: "Share", sans-serif; + font-size: 1rem; + margin-top: -4rem; + letter-spacing: 0.1rem; +} + +.text-box { + font-family: "Share", cursive; +} + +.text-box > h1 { + margin: 0; + font-size: 10rem; + color: rgb(255 255 255 / 60%); + padding: .5em; +} + diff --git a/static/@solitude/music/welcome/cover_art/default.jpeg b/static/@solitude/music/welcome/cover_art/default.jpeg new file mode 100644 index 00000000..39937665 Binary files /dev/null and b/static/@solitude/music/welcome/cover_art/default.jpeg differ diff --git a/static/@solitude/music/welcome/cover_art/dripping.webp b/static/@solitude/music/welcome/cover_art/dripping.webp new file mode 100644 index 00000000..3edb2ce3 Binary files /dev/null and b/static/@solitude/music/welcome/cover_art/dripping.webp differ diff --git a/static/@solitude/music/welcome/cover_art/sleepy_rain.webp b/static/@solitude/music/welcome/cover_art/sleepy_rain.webp new file mode 100644 index 00000000..a9bd0566 Binary files /dev/null and b/static/@solitude/music/welcome/cover_art/sleepy_rain.webp differ diff --git a/static/@solitude/music/welcome/cover_art/wish_you_were_here.webp b/static/@solitude/music/welcome/cover_art/wish_you_were_here.webp new file mode 100644 index 00000000..4ed66ea7 Binary files /dev/null and b/static/@solitude/music/welcome/cover_art/wish_you_were_here.webp differ diff --git a/static/@solitude/music/welcome/dripping.mp3 b/static/@solitude/music/welcome/dripping.mp3 new file mode 100644 index 00000000..b0e2e1c5 Binary files /dev/null and b/static/@solitude/music/welcome/dripping.mp3 differ diff --git a/static/@solitude/music/welcome/rain_and_nostalgia_v60s.mp3 b/static/@solitude/music/welcome/rain_and_nostalgia_v60s.mp3 new file mode 100644 index 00000000..b5146189 Binary files /dev/null and b/static/@solitude/music/welcome/rain_and_nostalgia_v60s.mp3 differ diff --git a/static/@solitude/music/welcome/sleepy_rain.mp3 b/static/@solitude/music/welcome/sleepy_rain.mp3 new file mode 100644 index 00000000..5b5e4eb8 Binary files /dev/null and b/static/@solitude/music/welcome/sleepy_rain.mp3 differ diff --git a/static/@solitude/music/welcome/wish_you_were_here.mp3 b/static/@solitude/music/welcome/wish_you_were_here.mp3 new file mode 100644 index 00000000..9aece37c Binary files /dev/null and b/static/@solitude/music/welcome/wish_you_were_here.mp3 differ diff --git a/static/@solitude/videos/solitude_welcome.mp4 b/static/@solitude/videos/solitude_welcome.mp4 new file mode 100644 index 00000000..623c5cd9 Binary files /dev/null and b/static/@solitude/videos/solitude_welcome.mp4 differ -- cgit v1.2.3