From 505c867e11ddb9cbe74bc39ec2ef92512a1f79bb Mon Sep 17 00:00:00 2001 From: anthony Date: Tue, 10 Jun 2025 20:41:47 +0200 Subject: [PATCH] modified: index.html modified: style.css --- index.html | 6 +- style.css | 816 +++++++++++++++++++++++++++++++++++------------------ 2 files changed, 551 insertions(+), 271 deletions(-) diff --git a/index.html b/index.html index c5307a9..9597626 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,8 @@ + + @@ -11,11 +13,11 @@
-

[ CiF ] Radio

+

[ CiF ] Radio

The Sound of Socialism

-
+
diff --git a/style.css b/style.css index 543332b..16b10a8 100644 --- a/style.css +++ b/style.css @@ -8,304 +8,338 @@ font-family: "Ubuntu"; src: url("./Fonts/Ubuntu.ttf") format("truetype"); } - -/*Knob CSS*/ - .knob-surround { - position: relative; - width: 250px; - height: 250px; - border-radius: 50%; - margin: 1em auto; + +/*Basic Site CSS*/ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + padding-top: 10px; + display: grid; + place-items: center; + scroll-behavior: smooth; + text-align: center; + position: absolute; + margin-top: 10px; + font-family: "Ubuntu"; + width: 100%; +} + +h2 { + font-size: 25pt; + z-index: 1; + margin-top: 5pt; +} + +.title{ + font-size: 12vh; + z-index: 1; + font-family: "Futura"; +} + +.card { + width: 80vw; + height: auto; + border-radius: 30px; + display: flex; + align-items: center; + flex-direction: column; + margin-top: 3vh; +} + + +/*Loading Animation*/ +@keyframes slideAndFade { + to { + opacity: 1; + transform: translateY(0); } - .knob { - position: absolute; - width: 100%; - height: 100%; - border-radius: 50%; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); - z-index: 10; +} + + +/*Knob*/ +.knob-surround { + position: relative; + width: 25vh; + height: 25vh; + border-radius: 50%; + margin: 1em auto; +} +.knob { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + transform: rotate(0deg); + z-index: 10; +} +.knob:before { + content: ""; + position: absolute; + bottom: 19%; + left: 19%; + width: 3%; + height: 3%; + background-color: #ff5a99; + border-radius: 50%; +} +.min, +.max { + display: block; + font-family: "Ubuntu"; + text-transform: uppercase; + font-size: 75%; + position: absolute; + opacity: 0.50; +} +.min { + bottom: 0px; + left: 0px; +} +.max { + bottom: 0px; + right: 0px; +} +.tick { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 5; + overflow: visible; +} +.tick:after { + content: ""; + width: 0.08em; + height: 0.6em; + position: absolute; + top: -20px; + left: 50%; + transition: all 1000ms ease-in-out; +} +.activetick:after { + top: -25px; + transition: all 1000ms ease-in-out; +} + +.volume-knob-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 1em; +} + +.volume-value { + margin-top: 2.5px; + font-family: "Ubuntu"; + font-size: 15px; + color: #ff5a99; + opacity: 0.50; +} + + +/*Song Info*/ +.now-playing { + text-align: center; + margin-top: 2rem; + padding: 1rem; + border-radius: 30px; +} + +.song-title { + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.artist { + font-size: 1rem; +} + +footer { + font-size: 30px; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: 5vh; + text-align: center; + color: white; + text-align: center; +} + +footer img { + height: 30px; +} + +/*Light Color Themes*/ +@media (prefers-color-scheme: light) { + .title{ + color: #ff5a99; } - .knob:before { - content: ""; - position: absolute; - bottom: 19%; - left: 19%; - width: 3%; - height: 3%; - background-color: #ff5a99; - border-radius: 50%; + + .song-title { + color: #060606; } - .min, - .max { - display: block; - font-family: "Ubuntu"; + + h2 { color: #ff5a99; - text-transform: uppercase; - font-size: 75%; - position: absolute; - opacity: 0.50; } - .min { - bottom: 0px; - left: 0px; + + .neomorphicbg{ + background: #ffa7c7; + box-shadow: -5px -5px 20px rgb(254,254,255, 0.69), + 2px 2px 20px rgb(255,90,153) } - .max { - bottom: 0px; - right: 0px; + + .neomorphic{ + background: #ffa7c7; + box-shadow: -5px -5px 20px rgb(254,254,255, 0.69), + 2px 2px 20px rgb(255,90,153) } - .tick { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 5; - overflow: visible; + + .neomorphic-i{ + background: #ffa7c7; + box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset, + 1px 1px 15px rgb(255,90,153) inset + } + + .neomorphic2{ + background: #ffa7c7; + transition: all 0.1s ease-in-out; + transform: scale(1); + cursor: pointer; + box-shadow: -5px -5px 20px rgba(254,254,255,0.5), + 2px 2px 20px rgb(255,90,153) } - .tick:after { - content: ""; - width: 0.08em; - height: 0.6em; - position: absolute; - top: -20px; - left: 50%; - transition: all 1000ms ease-in-out; + + .neomorphic2:hover{ + background: #ffa7c7; + transform: scale(0.98); + box-shadow: -5px -5px 20px rgba(254, 254, 255, 0), + 2px 2px 20px rgba(255, 90, 153, 0) } - .activetick:after { - top: -25px; - transition: all 1000ms ease-in-out; + + .neomorphic2:active{ + background: #ffa7c7; + transform: scale(0.96); + box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset, + 1px 1px 15px rgb(255,90,153) inset } - - .volume-knob-container { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 1em; + + .artist { + color: #ff5a99; + font-size: 1rem; } - - .volume-value { - margin-top: 2.5px; - font-family: "Ubuntu"; - font-size: 15px; + + .cards2 h2 { + color: #060606; + } + + .min, + .max { color: #ff5a99; - opacity: 0.50; } -/*Song Info*/ - .now-playing { - text-align: center; - margin-top: 2rem; - padding: 1rem; - border-radius: 30px; + .tick:after { + background-color: #ff5a9980; } - + .activetick:after { + background-color: #fff3f9; + box-shadow: 0 0 0.3em 0.08em #fff3f9; + } +} + + +/*Dark Color Themes*/ +@media (prefers-color-scheme: dark) { + :root{ + background-color: #060606; + } + + .title{ + color: #00d791; + } + .song-title { - font-size: 1.2rem; - font-weight: bold; - margin-bottom: 0.5rem; + color: #00d791; } - + + h2 { + color: #55052c; + } + + .min, + .max { + color: #00d791; + } + .artist { - color: #aaa; + color: #060606; font-size: 1rem; } - /*Basic Site CSS*/ - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - body { - padding-top: 10px; - display: grid; - place-items: center; - scroll-behavior: smooth; - text-align: center; - position: absolute; - margin-top: 10px; - font-family: "Ubuntu"; - width: 100%; - } - - h2 { - font-size: 25pt; - z-index: 1; - margin-top: 5pt; - } - - @keyframes slideAndFade { - to { - opacity: 1; - transform: translateY(0); - } - } - - .title{ - font-size: 120px; - z-index: 1; - } + .neomorphicbg{ + background: #55052c; + box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69), + 2px 2px 20px rgba(0, 215, 143, 0.425) + } - .card { - width: 800pt; - height: auto; - border-radius: 30px; - display: flex; - align-items: center; - flex-direction: column; - margin-top: 30pt; - } + .neomorphic{ + background: #55052c; + box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69), + 2px 2px 20px rgba(0, 215, 143, 0.425) + } - .cards1 { - width: 180pt; - height: auto; - border-radius: 40pt; - display: flex; - align-items: center; - flex-direction: column; /* Changed from column to row */ - margin-top: 30pt; - gap: 20px; /* Adds some space between image and text */ - } + .neomorphic-i{ + background: #55052c; + box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.8) inset, + 2px 2px 20px rgba(0, 215, 143, 0.5) inset + } - .cards2 { - width: 150pt; - height: auto; - border-radius: 30pt; - display: flex; - align-items: center; - flex-direction: column; - } + .neomorphic2{ + background: #55052c; + box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5), + 2px 2px 20px rgba(0, 215, 143, 0.534) + } - /*Light Color Themes*/ - @media (prefers-color-scheme: light) { - .title{ - color: #ff5a99; - } - - h2 { - color: #ff5a99; - } - - .neomorphic{ - background: #ffa7c7; - box-shadow: -5px -5px 20px rgb(254,254,255, 0.69), - 2px 2px 20px rgb(255,90,153) - } - - .neomorphic-i{ - background: #ffa7c7; - box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset, - 1px 1px 15px rgb(255,90,153) inset - } - - .neomorphic2{ - background: #ffa7c7; - transition: all 0.1s ease-in-out; - transform: scale(1); - cursor: pointer; - box-shadow: -5px -5px 20px rgba(254,254,255,0.5), - 2px 2px 20px rgb(255,90,153) - } - - .neomorphic2:hover{ - background: #ffa7c7; - transform: scale(0.98); - box-shadow: -5px -5px 20px rgba(254, 254, 255, 0), - 2px 2px 20px rgba(255, 90, 153, 0) - } - - .neomorphic2:active{ - background: #ffa7c7; - transform: scale(0.96); - box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset, - 1px 1px 15px rgb(255,90,153) inset - } - - .cards2 h2 { - color: #060606; - } - - - - .tick:after { - background-color: #ff5a9980; - } - .activetick:after { - background-color: #fff3f9; - box-shadow: 0 0 0.3em 0.08em #fff3f9; - } - } + .tick:after { + background-color: #06060680; + } - /*Dark Color Themes*/ - @media (prefers-color-scheme: dark) { - :root{ - background-color: #060606; - } - - .title{ - color: #00d791; - } - - h2 { - color: #55052c; - } - - .neomorphic{ - background: #55052c; - box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69), - 2px 2px 20px rgba(0, 215, 143, 0.425) - } - - .neomorphic-i{ - background: #55052c; - box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.69) inset, - 1px 1px 15px rgb(0, 0, 0) inset - } - - .neomorphic2{ - background: #55052c; - box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5), - 2px 2px 20px rgba(0, 215, 143, 0.534) - } - - .tick:after { - background-color: #06060680; - } - - .activetick:after { - background-color: #00d791;; - box-shadow: 0 0 0.3em 0.08em #00d791; - } - } + .activetick:after { + background-color: #00d791;; + box-shadow: 0 0 0.3em 0.08em #00d791; + } +} header img { - height: 120px; + height: 10vh; width: auto; align-content: baseline; } #cover-container { margin: 20px auto; - max-width: 400px; + max-width: 40vh; position: relative; } .image-wrapper { - width: 400px; - height: 400px; + width: 40vh; + height: 40vh; border-radius: 30px; overflow: hidden; position: relative; background-color: #e0e0e000; } #cover-image, #temp-image, #placeholder-image { - width: 400px; - height: 400px; + width: 40vh; + height: 40vh; object-fit: cover; position: absolute; top: 0; @@ -313,8 +347,8 @@ transition: opacity 0.3s ease; } #placeholder-image { - width: 350px; - height: 350px; + width: 35vh; + height: 35vh; object-fit: cover; position: absolute; top: 0; @@ -331,27 +365,271 @@ #placeholder-image { z-index: 3; opacity: 1; - margin: 25px; + margin: 2.5vh; } +.container { + text-align: center; +} +.child { + display: inline-block; + padding: 1rem 1rem; + vertical-align: middle; +} +.child2 { + z-index: -20; + display: inline-block; + padding: 1rem 1rem; + vertical-align: middle; +} +@media only screen and (orientation: portrait) { + + h2 { + display: none; + } + + .image-wrapper { + display: none; + } + .stats { + display: none; + } + .card { + width: 100vw; + height: auto; + border-radius: 30px 30px 0 0; + display: flex; + align-items: center; + flex-direction: column; + margin-bottom: 0px; + } + .now-playing { + text-align: center; + margin-top: 2rem; + padding: 1rem; + width: 80vw; + border-radius: 30px; + } + footer { + height: 0px; + } + h1 title { + display: none; + } + .child2 { + z-index: -20; + display: inline-block; + vertical-align: middle; + } + .knob-surround { + position: relative; + width: 35vh; + height: 35vh; + border-radius: 50%; + margin: 1em auto; + } + .knob { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + transform: rotate(0deg); + z-index: 10; + } + .knob:before { + content: ""; + position: absolute; + bottom: 19%; + left: 19%; + width: 3%; + height: 3%; + background-color: #ff5a99; + border-radius: 50%; + } + .min, + .max { + display: block; + font-family: "Ubuntu"; + text-transform: uppercase; + font-size: 75%; + position: absolute; + opacity: 0.50; + } + .min { + bottom: 0px; + left: 0px; + } + .max { + bottom: 0px; + right: 0px; + } + .tick { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 5; + overflow: visible; + } + .tick:after { + content: ""; + width: 0.08em; + height: 0.6em; + position: absolute; + top: -20px; + left: 50%; + transition: all 1000ms ease-in-out; + } + .activetick:after { + top: -25px; + transition: all 1000ms ease-in-out; + } + .volume-knob-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 1em; + } -.container { - text-align: center; -} -.child { - display: inline-block; - padding: 1rem 1rem; - vertical-align: middle; + .volume-value { + margin-top: 2.5px; + font-family: "Ubuntu"; + font-size: 15px; + color: #ff5a99; + opacity: 0.50; + } + .cif { + display: none; + } + .neomorphicbg{ + overflow: hidden; + } } -.child2 { -z-index: -20; - display: inline-block; - padding: 1rem 1rem; - vertical-align: middle; +@media only screen and (max-height: 450px) { + body{ + background-color: #55052c; + } + h2 { + display: none; + } + img { + display: none; + } + .title { + display: none; + } + .image-wrapper { + display: none; + } + .stats { + display: none; + } + .card { + width: 100vw; + height: 100vh; + border-radius: 0 0 0 0; + } + .now-playing { + display: none; + } + h1 title { + display: none; + } + .child2 { + z-index: -20; + display: inline-block; + vertical-align: middle; + } + + .knob-surround { + position: relative; + width: 75vh; + height: 75vh; + border-radius: 50%; + } + .knob { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + transform: rotate(0deg); + z-index: 10; + } + .knob:before { + content: ""; + position: absolute; + bottom: 19%; + left: 19%; + width: 3%; + height: 3%; + background-color: #ff5a99; + border-radius: 50%; + } + .min, + .max { + display: block; + font-family: "Ubuntu"; + text-transform: uppercase; + font-size: 75%; + position: absolute; + opacity: 0.50; + } + .min { + bottom: 0px; + left: 0px; + } + .max { + bottom: 0px; + right: 0px; + } + .tick { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 5; + overflow: visible; + } + .tick:after { + content: ""; + width: 0.08em; + height: 0.6em; + position: absolute; + top: -20px; + left: 50%; + transition: all 1000ms ease-in-out; + } + .activetick:after { + top: -25px; + transition: all 1000ms ease-in-out; + } + + .volume-knob-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 1em; + } + + .volume-value { + margin-top: 2.5px; + font-family: "Ubuntu"; + font-size: 15px; + color: #ff5a99; + opacity: 0.50; + } + .cif { + display: none; + } + .neomorphicbg{ + overflow: hidden; + } } \ No newline at end of file