CiF
/
Radio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: index.html

Browse Source 
modified:   style.css
main
anthony 3 weeks ago
parent e8439e86ac
commit 93b52e79f6
2 changed files with 551 additions and 271 deletions
Show Stats Download Patch File Download Diff File

6
index.html
Unescape Escape View File

@ -3,6 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffa7c7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#00d791" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/x-icon" href="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Radio/CiF-Radio.svg"> <link rel="icon" type="image/x-icon" href="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Radio/CiF-Radio.svg">
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
<script src="./script.js"></script> <script src="./script.js"></script>
@ -11,11 +13,11 @@
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1 class="slidefadein title"><span class="no-break">[ CiF ] <img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Radio/CiF-Radio.svg"> Radio</span></h1> <h1 class="slidefadein title"><span class="no-break"><span class="cif">[ CiF ] </span><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Radio/CiF-Radio.svg"> Radio</span></h1>
<h2 class="slidefadein"><span class="no-break">The Sound of Socialism</span></h2> <h2 class="slidefadein"><span class="no-break">The Sound of Socialism</span></h2>
</header> </header>
<div class="card neomorphic"> <div class="card neomorphicbg">
<div class="player"> <div class="player">
<div class="child"> <div class="child">

816
style.css
Unescape Escape View File

@ -8,304 +8,338 @@
font-family: "Ubuntu"; font-family: "Ubuntu";
src: url("./Fonts/Ubuntu.ttf") format("truetype"); src: url("./Fonts/Ubuntu.ttf") format("truetype");
} }
/*Knob CSS*/
.knob-surround { /*Basic Site CSS*/
position: relative; * {
width: 250px; margin: 0;
height: 250px; padding: 0;
border-radius: 50%; box-sizing: border-box;
margin: 1em auto; }
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%; /*Knob*/
border-radius: 50%; .knob-surround {
-webkit-transform: rotate(0deg); position: relative;
-moz-transform: rotate(0deg); width: 25vh;
-o-transform: rotate(0deg); height: 25vh;
-ms-transform: rotate(0deg); border-radius: 50%;
transform: rotate(0deg); margin: 1em auto;
z-index: 10; }
.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: ""; .song-title {
position: absolute; color: #060606;
bottom: 19%;
left: 19%;
width: 3%;
height: 3%;
background-color: #ff5a99;
border-radius: 50%;
} }
.min,
.max { h2 {
display: block;
font-family: "Ubuntu";
color: #ff5a99; color: #ff5a99;
text-transform: uppercase;
font-size: 75%;
position: absolute;
opacity: 0.50;
} }
.min {
bottom: 0px; .neomorphicbg{
left: 0px; background: #ffa7c7;
box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
2px 2px 20px rgb(255,90,153)
} }
.max {
bottom: 0px; .neomorphic{
right: 0px; background: #ffa7c7;
box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
2px 2px 20px rgb(255,90,153)
} }
.tick {
position: absolute; .neomorphic-i{
width: 100%; background: #ffa7c7;
height: 100%; box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
top: 0; 1px 1px 15px rgb(255,90,153) inset
left: 0; }
z-index: 5;
overflow: visible; .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: ""; .neomorphic2:hover{
width: 0.08em; background: #ffa7c7;
height: 0.6em; transform: scale(0.98);
position: absolute; box-shadow: -5px -5px 20px rgba(254, 254, 255, 0),
top: -20px; 2px 2px 20px rgba(255, 90, 153, 0)
left: 50%;
transition: all 1000ms ease-in-out;
} }
.activetick:after {
top: -25px; .neomorphic2:active{
transition: all 1000ms ease-in-out; 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 { .artist {
display: flex; color: #ff5a99;
flex-direction: column; font-size: 1rem;
align-items: center;
margin-top: 1em;
} }
.volume-value { .cards2 h2 {
margin-top: 2.5px; color: #060606;
font-family: "Ubuntu"; }
font-size: 15px;
.min,
.max {
color: #ff5a99; color: #ff5a99;
opacity: 0.50;
} }
/*Song Info*/ .tick:after {
.now-playing { background-color: #ff5a9980;
text-align: center;
margin-top: 2rem;
padding: 1rem;
border-radius: 30px;
} }
.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 { .song-title {
font-size: 1.2rem; color: #00d791;
font-weight: bold;
margin-bottom: 0.5rem;
} }
h2 {
color: #55052c;
}
.min,
.max {
color: #00d791;
}
.artist { .artist {
color: #aaa; color: #060606;
font-size: 1rem; font-size: 1rem;
} }
/*Basic Site CSS*/ .neomorphicbg{
* { background: #55052c;
margin: 0; box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
padding: 0; 2px 2px 20px rgba(0, 215, 143, 0.425)
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;
}
.card { .neomorphic{
width: 800pt; background: #55052c;
height: auto; box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
border-radius: 30px; 2px 2px 20px rgba(0, 215, 143, 0.425)
display: flex; }
align-items: center;
flex-direction: column;
margin-top: 30pt;
}
.cards1 { .neomorphic-i{
width: 180pt; background: #55052c;
height: auto; box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.8) inset,
border-radius: 40pt; 2px 2px 20px rgba(0, 215, 143, 0.5) inset
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 */
}
.cards2 { .neomorphic2{
width: 150pt; background: #55052c;
height: auto; box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5),
border-radius: 30pt; 2px 2px 20px rgba(0, 215, 143, 0.534)
display: flex; }
align-items: center;
flex-direction: column;
}
/*Light Color Themes*/ .tick:after {
@media (prefers-color-scheme: light) { background-color: #06060680;
.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;
}
}
/*Dark Color Themes*/ .activetick:after {
@media (prefers-color-scheme: dark) { background-color: #00d791;;
:root{ box-shadow: 0 0 0.3em 0.08em #00d791;
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;
}
}
header img { header img {
height: 120px; height: 10vh;
width: auto; width: auto;
align-content: baseline; align-content: baseline;
} }
#cover-container { #cover-container {
margin: 20px auto; margin: 20px auto;
max-width: 400px; max-width: 40vh;
position: relative; position: relative;
} }
.image-wrapper { .image-wrapper {
width: 400px; width: 40vh;
height: 400px; height: 40vh;
border-radius: 30px; border-radius: 30px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-color: #e0e0e000; background-color: #e0e0e000;
} }
#cover-image, #temp-image, #placeholder-image { #cover-image, #temp-image, #placeholder-image {
width: 400px; width: 40vh;
height: 400px; height: 40vh;
object-fit: cover; object-fit: cover;
position: absolute; position: absolute;
top: 0; top: 0;
@ -313,8 +347,8 @@
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
#placeholder-image { #placeholder-image {
width: 350px; width: 35vh;
height: 350px; height: 35vh;
object-fit: cover; object-fit: cover;
position: absolute; position: absolute;
top: 0; top: 0;
@ -331,27 +365,271 @@
#placeholder-image { #placeholder-image {
z-index: 3; z-index: 3;
opacity: 1; 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 { .volume-value {
text-align: center; margin-top: 2.5px;
} font-family: "Ubuntu";
.child { font-size: 15px;
display: inline-block; color: #ff5a99;
padding: 1rem 1rem; opacity: 0.50;
vertical-align: middle; }
.cif {
display: none;
}
.neomorphicbg{
overflow: hidden;
}
} }
.child2 { @media only screen and (max-height: 450px) {
z-index: -20; body{
display: inline-block; background-color: #55052c;
padding: 1rem 1rem; }
vertical-align: middle; 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;
}
} }
Write Preview
Loading…
Cancel
Save