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

modified: index.html

Browse Source 
modified:   style.css
anthony 3 weeks ago
parent a410689034
commit 505c867e11
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>
<meta charset="UTF-8">
<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="stylesheet" href="./style.css">
<script src="./script.js"></script>
@ -11,11 +13,11 @@
<body>
<div class="container">
<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>
</header>
<div class="card neomorphic">
<div class="card neomorphicbg">
<div class="player">
<div class="child">

804
style.css
Unescape Escape View File

@ -10,302 +10,336 @@
}
/*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
}
.tick:after {
content: "";
width: 0.08em;
height: 0.6em;
position: absolute;
top: -20px;
left: 50%;
transition: all 1000ms ease-in-out;
.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)
}
.activetick:after {
top: -25px;
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)
}
.volume-knob-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1em;
.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-value {
margin-top: 2.5px;
font-family: "Ubuntu";
font-size: 15px;
.artist {
color: #ff5a99;
opacity: 0.50;
font-size: 1rem;
}
/*Song Info*/
.now-playing {
text-align: center;
margin-top: 2rem;
padding: 1rem;
border-radius: 30px;
.cards2 h2 {
color: #060606;
}
.song-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0.5rem;
.min,
.max {
color: #ff5a99;
}
.artist {
color: #aaa;
font-size: 1rem;
.tick:after {
background-color: #ff5a9980;
}
.activetick:after {
background-color: #fff3f9;
box-shadow: 0 0 0.3em 0.08em #fff3f9;
}
}
/*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%;
}
/*Dark Color Themes*/
@media (prefers-color-scheme: dark) {
:root{
background-color: #060606;
}
h2 {
font-size: 25pt;
z-index: 1;
margin-top: 5pt;
}
.title{
color: #00d791;
}
@keyframes slideAndFade {
to {
opacity: 1;
transform: translateY(0);
}
}
.song-title {
color: #00d791;
}
.title{
font-size: 120px;
z-index: 1;
}
h2 {
color: #55052c;
}
.card {
width: 800pt;
height: auto;
border-radius: 30px;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 30pt;
}
.min,
.max {
color: #00d791;
}
.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 */
}
.artist {
color: #060606;
font-size: 1rem;
}
.cards2 {
width: 150pt;
height: auto;
border-radius: 30pt;
display: flex;
align-items: center;
flex-direction: column;
}
.neomorphicbg{
background: #55052c;
box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
2px 2px 20px rgba(0, 215, 143, 0.425)
}
/*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;
}
}
.neomorphic{
background: #55052c;
box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
2px 2px 20px rgba(0, 215, 143, 0.425)
}
/*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;
}
}
.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
}
.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 {
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;
}
.container {
text-align: center;
}
.child {
display: inline-block;
padding: 1rem 1rem;
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;
}
.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;
}
}
Write Preview
Loading…
Cancel
Save