Layout published by dai

published 1696817124
updated 1786230005

Add to Favorites

View Layouts

View Profile

Report Layout

w98 cd player

Tags: embed, youtube, music, cd player, windows 98, retro

Description:

have you ever gone "i need more useless stuff on my profile!"?

well, i also went "which useless thing do i waste my time on?" so here's a windows 98 inspired overcomplicated cd player!!! icould have just taken a screenshot and plastered it across a div but i had to Do it entirely

preview

CD Player

Disc View Options Help

[00] 00:00

▶

❚❚

◼

❚◄◄

◄◄

►►

►►❚

❚ ►

Artist:

Title:

Total Play: 00:00 m:s

Track: 00:00 m:s

THE!!!!!!!:

includes yt embed. if you already have one delete it

it's not really functional... i mean you can click the buttons for brain tickling but that's it ! it doesn't control the music playing i wish i could do that

check the customization in the code to change your artist name and song title ! also your cover art : 3

oh it's of course defaulted to deftones btw

credits

credits for the styling goes to 98.css by jdan ^_^

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by dai (https://layouts.spacehey.com/layout?id=82538) -->

<!--------- CD Player Code Start --------->
<!--------- MUSIC PLAYER ITSELF, CHANGE EMBED URL TO VIDEO URL OF YOUR SONG --------->
<iframe width="0" height="0" src="https://www.youtube.com/embed/KvknOXGPzCQ//?&;amp;;autoplay=1&;loop=1&" title="music" frameborder="0" allow="autoplay;" loading="lazy"></iframe>
<style>
/* customization. change your artist, title and album cover respectively */
:root {
--artist:"Deftones";
--title:"Be Quiet And Drive (Far Away)";
--albumcover: url(https://m.media-amazon.com/images/I/81BbQMTakEL._UF1000,1000_QL80_.jpg);
}

/* the code itself */
.status-bar,.title-bar,.title-bar-controls{display:flex}.window,p#butt{background:silver;margin:auto}p#text,p#text2{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;margin-block:3px}p#butt,p#text,p#text2{box-sizing:border-box}p#label,p#text,p#text2{margin-block:3px}.status-bar,.title-bar-text,.toptoptop,p#butt,p#label,p#text2{user-select:none}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:400;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff) format("woff");src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff2) format("woff2")}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:700;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff) format("woff");src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff2) format("woff2")}.window{text-shadow:none;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;padding:3px}.window img{filter:none!important}.window *{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px;text-shadow:inherit}.title-bar{align-items:center;background:linear-gradient(90deg,navy,#1084d0);justify-content:space-between}.title-bar-text{color:#fff;font-weight:700;letter-spacing:0;margin-right:24px;line-height:15px}.title-bar-controls p#butt{display:block;min-height:14px;min-width:16px;padding:0}.title-bar-controls p#butt:active{padding:0}.title-bar-controls p#butt:focus{outline:0}.title-bar-controls p#butt.minimize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-position:bottom 3px left 4px;background-repeat:no-repeat}.title-bar-controls p#butt.maximize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls p#butt.close{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-position:top 3px left 4px;background-repeat:no-repeat;margin-left:2px}.status-bar{gap:1px;margin:0 1px}p#butt{white-space:nowrap;}.buttontos,p#butt,p#label,p#text,p#text2{display:inline-block}.status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey;flex-grow:1;margin:0;padding:2px 3px}.window-body{margin:8px}p#butt{border:none;border-radius:0;min-height:23px;min-width:75px;padding:6px 12px 0;text-shadow:0 0 #222;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;color:#000}p#butt:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}p#butt:focus{outline:#000 dotted 1px;outline-offset:-4px}p#butt::-moz-focus-inner{border:0}.toptoptop{text-align:left;margin-top:-3px!important;margin-bottom:5px!important;margin-inline:0px!important;}.toptoptop span{border:1px solid silver;padding:2px 4px}.toptoptop span:hover{border-top:1px solid #fff;border-left:1px solid #fff;border-bottom:1px solid gray;border-right:1px solid gray}.toptoptop span:focus{border:1px inset #fff}.window{color:#000!important;font-family:"Pixelated MS Sans Serif"!important}p#text:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")}p#text{background-color:#fff;padding:4px;width:85%;text-align:left;font-size:12px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat}p#text.artist:after{content:var(--artist)}p#text.title:after{content:var(--title)}p#text2:before{content:"";display:block;position:absolute;top:1px;left:1px;background:var(--albumcover);width:98%;height:96%;opacity:.5;background-size:cover;background-position:center;z-index:-1}p#text2{position:relative;padding:13px 4px;width:54%;font-size:20px;text-align:center;color:olive;background:#000;z-index:999}#butt,p#label{font-size:12px}p#label{width:fit-content;margin-right:5px}.ahhh{text-align:right}.title-bar{padding:2px}.title-bar-text img{vertical-align:bottom;margin-inline:2px}.buttontos{width:45%;height:54px;vertical-align:top;text-align:center}#butt{color:#000;text-shadow:1px 1px #fff;line-height:10px}#butt:not(:first-child){text-indent:-5px;font-weight:700}#butt:nth-child(3) span{display:block;transform:translate(2px,-2px) scale(1.2)}#butt:not(:first-child,:nth-child(2),:nth-child(3)){text-indent:-8px;font-weight:700;letter-spacing:-4px;font-size:10px}#butt:nth-child(8){text-indent:-8px;font-weight:700;letter-spacing:-1.5px;white-space:nowrap;text-shadow:none;transform:translateY(1px)}#butt:nth-child(8) span{display:block;transform:rotate(-90deg) translate(2px,0) scaleY(1.4);color:#000}.title,.artist{height:23px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:20px!important;vertical-align: bottom;}</style><div class="window" style="width:320px"><div class="title-bar"><div class="title-bar-text"><img src="https://i.ibb.co/CpV6yWxG/Untitled70-20260806110652.png"/>CD Player</div><div class="title-bar-controls"><p id="butt" class="minimize"></p><p id="butt" class="maximize"></p><p id="butt" class="close"></p></div></div><div class="window-body"><p class="toptoptop"><span><u>D</u>isc</span> <span><u>V</u>iew</span> <span><u>O</u>ptions</span> <span><u>H</u>elp</span></p><p id="text2">[00] 00:00</p><div class="buttontos"><p id="butt">▶ </p><p id="butt" style="min-width:20px;max-width:20px;margin-inline:0px">❚❚ </p><p id="butt" style="min-width:20px;max-width:20px"><span>◼</span> </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px">❚◄◄ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">◄◄ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">►► </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">►►❚ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px"><span>❚ ►</span></p></div><div class="ahhh"><p id="label"><u>A</u>rtist:</p><p id="text" class="artist"></p><p id="label">Title:</p><p id="text" class="title"></p></div></div><div class="status-bar"><p class="status-bar-field">Total Play: 00:00 m:s</p><p class="status-bar-field">Track: 00:00 m:s</p></div></div>
<!--------- CD Player Code End --------->

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 3573 comments ( View all | Add Comment )

𝔛𝔵𝔥𝔞𝔭𝔶𝔲𝔱𝔱𝔢𝔯𝔣𝔩𝔶𝔵𝔛	1790534099 usinggg. Report Comment
snowgrave	1790370450 omg this is so cool i'm using this tysmmm Report Comment
☄︎ BulletsOfRevenge 𖤐	1789967150 usingg ^V^ Report Comment
SaltyAngel	1789934845 using xx Report Comment
mist	1789898715 usingg :3 Report Comment
karasek	1789848982 using!!! Report Comment
TheBernana	1789779475 using Report Comment
Darling_Dxll	1789763160 Using <3 Report Comment
Kaur	1789737139 Using! 👾 Report Comment
malvavisco	1789677500 using Report Comment
LOBBER	1789526853 using!! :p Report Comment
m4y0Xd	1789390511 usingg Report Comment
cinnamon !	1789348035 usingggg! Report Comment
Zo_08	1789296781 Usingg Report Comment
VYXNO	1789222177 using Report Comment
leroy	1789199293 using !! Report Comment
kiki	1789169740 using,, Report Comment
SaimonMintGuy11	1789068712 Using!1!1!1 Report Comment
_CHR0N1C_B0¥_K1$$3R_	1788832463 Using!! Report Comment
muun	1788803836 using!! Report Comment