New Post right HERE: Why I came back from nowhere
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(0,0,0,1) 0%, rgba(40, 16, 59,1) 30%, rgba(255, 255, 255,1) 100%);
padding: 5px;
box-shadow: 0 0 20px 6px rgba(108, 32, 189, 0.6);
}
.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: #6c20bd; 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: white; cursor: pointer; border-radius: 50%; border:1px solid #6c20bd; 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, #F1E3F0, white) padding-box, linear-gradient(to top, white, #A2A2A2) 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(white, white) padding-box, linear-gradient(to top, white, #A2A2A2) 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 #E2E2E2; padding:9px; padding-left:10px; padding-right:12px; margin:0; box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.17) inset; -webkit-box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.17) inset; -moz-box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.17) 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: #aaa; opacity: 0.8; }
.wheelcontrols button { background: none; border: none; color: #6c20bd; 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:#C1C1C1; font-size: 20px; margin:auto; }
.playpause-track { font-size: 22px !important; padding: 3px; }
.songtitle { padding:25px; /* padding around song title */ color:#6c20bd; 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:#6c20bd; 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:#6c20bd; }
.current-time { padding-right:5px; }
.total-duration { padding-left:5px; }
#toggle-player { position: fixed; bottom: 10px; right: 10px; z-index: 10000; background-color: #680185; color: white; font-size: 1.5rem; padding: 12px; border: none; border-radius: 50%; box-shadow: 0 0 12px rgba(104, 1, 133, 0.6); 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(104, 1, 133, 0.8); }
.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: #6c20bd; 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: white; cursor: pointer; border-radius: 50%; border:1px solid #6c20bd; 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, #F1E3F0, white) padding-box, linear-gradient(to top, white, #A2A2A2) 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(white, white) padding-box, linear-gradient(to top, white, #A2A2A2) 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 #E2E2E2; padding:9px; padding-left:10px; padding-right:12px; margin:0; box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.17) inset; -webkit-box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.17) inset; -moz-box-shadow: 1px 1px 10px 0px rgba(108, 32, 189,0.17) 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: #aaa; opacity: 0.8; }
.wheelcontrols button { background: none; border: none; color: #6c20bd; 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:#C1C1C1; font-size: 20px; margin:auto; }
.playpause-track { font-size: 22px !important; padding: 3px; }
.songtitle { padding:25px; /* padding around song title */ color:#6c20bd; 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:#6c20bd; 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:#6c20bd; }
.current-time { padding-right:5px; }
.total-duration { padding-left:5px; }
#toggle-player { position: fixed; bottom: 10px; right: 10px; z-index: 10000; background-color: #680185; color: white; font-size: 1.5rem; padding: 12px; border: none; border-radius: 50%; box-shadow: 0 0 12px rgba(104, 1, 133, 0.6); 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(104, 1, 133, 0.8); }
Btw, you can look at the code of the website but please don't take directly.