Allow me to introduce myself. Hi I'm James and I like to play with themes. I actually didn't think I could ever touch opon a topic like coding ever again but I found a few interesting Videos concerning "the slow death of the internet" and I think it has a bit of truth. I like to listen to EDM and Lofi music cause it gives me the kick. And I like cats (you probably didn't notice that). I'm currently working on this website to make it more interactive and funny and generally more interesting to look at, so once I have coded every part of this website things just can get better.
My design of the cool music player: (original from scripted rescources)
.player {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
width: fit-content;
border-radius: 100px;
background: linear-gradient(0deg, rgba(50, 215, 94, 1) 0%, rgba(22, 97, 42, 1) 30%, rgba(0, 0, 0, 1) 100%);
padding: 5px;
box-shadow: 0 0 20px 6px #16612a;
}
.player {
position: fixed;
bottom: 60px;
right: 10px;
z-index: 9999;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.player.hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.95);
}
.seek_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 6px;
background: #16612a;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 8px;
}
.seek_slider::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 8px;
height: 8px;
background: #16612a;
cursor: pointer;
border-radius: 50%;
border:1px solid #16612a;
padding-top:3px;
position:relative;
bottom:3px;
}
button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Myriad Pro";font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit].vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{opacity:0.5}}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{opacity:1}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}}
@media (not(hover)){
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}
@font-face {
font-family: "Myriad Pro";
src: url("https://dl.dropbox.com/scl/fi/z8hqw29h8a9i3a3cbbxkt/MYRIADPRO-REGULAR.OTF?rlkey=begwqxljs2gzyw26h00oeovzi&st=px0mbeax&dl=0") format("woff");
}
.window, .title-bar {
font-family: "Myriad Pro";
-webkit-font-smoothing: none;
font-size: 11px;
}
.window {
padding:10px;
width:290px;
bottom: 20px;
right: 20px;
}
.window-body {
display:block;
margin:auto;
border-radius:0em;
}
input[type=range] {
-webkit-appearance: none;
appearance:none;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: pointer;
}
/* settings for firefox browsers */
input[type=range]::-moz-range-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: pointer;
}
.flex {display: flex;}
#musicplayer {
display:block;
float:right;
background: linear-gradient(0deg, black, black) padding-box, linear-gradient(to top, #32d75e, #061c0c) border-box;
border-radius: 60em;
border: 2px solid transparent;
margin-left:8px;
padding-left:10px;
box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.27) inset;
}
.wheel {
display: block;
justify-content: center;
margin:auto;
background: linear-gradient(black, black) padding-box, linear-gradient(to top, #32d75e, #061c0c) border-box;
border-radius: 50em;
border: 2px solid transparent;
padding-top:0px;
box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.27) inset;
}
.innerwheel {
border-radius: 50em;
border: 2px solid #32d75e;
padding:9px;
padding-left:10px;
padding-right:12px;
margin:0;
box-shadow: 1px 1px 10px 0px rgba(50, 215, 94, 1) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(50, 215, 94, 1) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(50, 215, 94, 1) inset;
}
th{
width:20px;
margin:0;
}
.fas fa-minus{
margins:0;
padding-bottom:5px;
}
.wheelcontrols {
font-size:14px !important; /* size of controls */
text-align:center;
padding-top:2px;
color: #16612a;
opacity: 0.8;
}
.wheelcontrols button {
background: none;
border: none;
color: #16612a;
opacity: 0.7;
font-size: 14px;
padding: 2px;
cursor: pointer;
}
.wheelcontrols button:hover {
opacity: 1;
}
.controls button:hover {
opacity: 1;
}
.playpause-track button{
display:block;
color: #16612a;
font-size: 20px;
margin:auto;
}
.playpause-track {
font-size: 22px !important;
padding: 3px;
}
.songtitle {
padding:25px; /* padding around song title */
color:#16612a;
opacity: 0.8;
padding-bottom:0;
margin-left:15px;
margin-right:20px;
font-size: 16px;
display:block;
font-family:Myriad Pro;
}
.controls button{
display:block;
margin-left:15px;
font-size:14px !important; /* size of controls */
text-align:center;
color:#16612a;
opacity:0.6;
}
button {
min-width:20px;
background:none;
text-align:center;
}
button:active {
opacity: 0.7;
}
.seeking {
display:flex;
justify-content: space-evenly;
padding:10px; /* padding around seeking bar */
padding-left:0;
padding-bottom:0px;
color:#16612a;
}
.current-time {
padding-right:5px;
}
.total-duration {
padding-left:5px;
}
#toggle-player {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 10000;
background-color: #16612a;
color: #16612a;
font-size: 1.5rem;
padding: 12px;
border: none;
border-radius: 50%;
box-shadow: 0 0 12px rgba(22, 97, 42, 1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#toggle-player:hover {
transform: scale(1.1);
box-shadow: 0 0 18px rgba(22, 97, 42, 1);
}
