//- Having to Write Taylor Swift too many times
- let s = 'Taylor Swift';
- let data = {'Cruel Summer': 'play', 'ME!': 'pause','I Forgot You Existed': 'play','You Need to calm down' : 'play','Lover' : 'play','I Think He Knows' : 'play', 'London Boy' : 'play'};
- let q = Object.entries(data);
- let w = q.length;
.ex
.screen-1
	header
		ion-icon(name="arrow-back-outline")
		span NOW PLAYING
		ion-icon(name="menu-outline")
	.player
		.song
			.img-container 
				img(src="https://upload.wikimedia.org/wikipedia/en/c/cd/Taylor_Swift_-_Lover.png", alt="Lover Album Cover")
			h1 ME!
			h6= s
		.slider
			span.start 0:00
			input.input(type="range" value='0')
			span.end 3:13
		.controls
			button
				ion-icon(name="play-back-sharp")
			button 
				ion-icon(name="pause-sharp")
			button
				ion-icon(name="play-forward-sharp")
.screen-2
	header
		span #{s} · Lover
	.title
		ion-icon(name="star")
		img(src="https://upload.wikimedia.org/wikipedia/en/c/cd/Taylor_Swift_-_Lover.png", alt="Lover Album Cover")
		ion-icon(name="ellipsis-horizontal")
	.songs
		- for(let e = 0;e < w; e++)
			.song
				.details
					h5= q[e][0]
					span= s
				button
					ion-icon(name=`${q[e][1]}-sharp`)
View Compiled
* { 
	font-family: 'Poppins'; 
	outline: none; 	
}
body { 
	background: hsl(328deg 58% 94%); 
	display: flex;
	height: 100vh;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 2em;
	overflow-x: hidden;
	padding: 1em;
}
.ex {
	padding-bottom: 53em;
}
@mixin screen {
	user-select: none;
	background: #f8e7f1;
	box-shadow:  20px 20px 60px #d3c4cd,
             -20px -20px 60px #ffffff,
							0 0 2vh 2vh hsl(328deg 58% 94%);
	padding: 1em;
	border-radius: 20px;
}
.screen-1 {
	margin-top: auto;
	@include screen;
	header {
		padding: 1.1em;
		display: flex;
		gap: 3.4em;
		color:hsl(337deg 8% 69%);
		ion-icon {
			padding: .5em;
			background: linear-gradient(145deg, #fff7ff, #dfd0d9);
			box-shadow:  20px 20px 60px #d3c4cd,
             -20px -20px 60px #ffffff;
			border-radius: 50%;
		}
		span {
			font-weight: bold;
			font-size: .7em;
			margin-top: 0.7em;
		}
	}
	.song {
		margin-top: 4em;
		padding: .1em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.img-container {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 1.1em;
			img {
				border-radius: 50%;
				width: 10em;
				height: 10em;
				border: 0.45em solid hsl(329deg 54% 92%);
				box-shadow:  20px 20px 60px #d3c4cd,
             -20px -20px 60px #ffffff,
							0 0 2vh 2vh hsl(328deg 58% 94%);
			}
		}
		h1 { color: hsl(337deg 4% 39%) }
		h6 { 
			color: hsl(340deg 10% 71%);
			font-weight: normal;
			margin-top: -1em;
		}
	}
	.slider {
		margin-top: 3em;
		display: flex;
		justify-content: center;
		align-items: center;
		input[type=range] {
			appearance: none;
			background: transparent;
			width: 90%;
			&::-webkit-slider-thumb {
				-webkit-appearance: none;
				width: 1.2em;
				height: 1.2em;
				background: radial-gradient(hsl(332deg 90% 81%) 30%, hsl(333deg 50% 92%) 30%);
				border-radius: 50%;
				margin-top: -5px;
				cursor: pointer;
				box-shadow: 0 0 30px #f1f1f1;
			}
			&::-moz-range-thumb, &::-ms-thumb {
				width: 1.2em;
				height: 1.2em;
				background: radial-gradient(hsl(332deg 90% 81%) 30%, hsl(333deg 50% 92%) 30%);
				border-radius: 50%;
				cursor: pointer;
				box-shadow: 0 0 30px #f1f1f1;
			}
			&:focus {
				appearance: none;
			}
			&::-ms-track {
				width: 100%;
				cursor: pointer;
				background: transparent; 
				border-color: transparent;
				color: transparent;
			}
			&::-webkit-slider-runnable-track {
				background: hsl(332deg 76% 95%);
				width: 100%;
				border-radius: 10px;
				height: .5em;
				cursor: pointer;
				box-shadow: inset 0 0 5px -2px hsl(0 0 0/.5);
			}
			&::-moz-range-track, &::-ms-track {
				background: hsl(332deg 76% 95%);
				width: 100%;
				border-radius: 10px;
				height: .5em;
				cursor: pointer;
				box-shadow: inset 0 0 5px -2px hsl(0 0 0/.5);
			}
			&::-moz-range-progress {
				background: hsl(331deg 66% 79%); 
			}
			&::-ms-fill-lower {
				background: hsl(331deg 66% 79%); 
			}
		}
		span {
			color: hsl(333deg 5% 54%);
			font-size: .7em;
			margin-top: -3em;
			z-index: 2;
		}
		.start { margin-right: -2em }
		.end { margin-left: -2.2em }
	}
	.controls {
		margin-top: 6em;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1em;
		gap: 2em;
		button {
			background: hsl(335deg 100% 96%);
			box-shadow: 0 0 30px hsl(328deg 32% 85%);
			padding: .8em;
			color: hsl(333deg 5% 54%);
			border: 1px solid hsl(335deg 100% 96%);
			border-radius: 50%;
			&:nth-child(2n) {
				box-shadow: 0 0 30px hsl(327deg 22% 81%);
				background: hsl(331deg 67% 79%);
				color: white;
				border: 1px solid hsl(331deg 67% 79%);
			}
		}
	}
}
.screen-2 {
	@include screen;
	padding: 0;
	margin-top: auto;
	header {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.65em;
		color: hsl(337deg 8% 69%);
		font-weight: bold;
		padding: 2em;
	}
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2em;
		padding: 1em;
		ion-icon {
			color: hsl(338deg 5% 54%);
			padding: .7em;
			background: hsl(334deg 94% 93%);
			border-radius: 50%;
			border: .1em solid hsl(332deg 26% 87%);
		}
		img {
			width: 7em;
			border-radius: 50%;
			border: 0.45em solid hsl(329deg 54% 92%);
			box-shadow:  20px 20px 60px #d3c4cd,
             -20px -20px 60px #ffffff,
							0 0 2vh 2vh hsl(328deg 58% 94%);
		}
	}
	.songs {
		display: flex;
		flex-direction: column;
		.song {
			margin-top: -1em;
			display: flex;
			align-items: center;
			gap: 3em;
			padding: 1em;
			.details {
				display: flex;
				flex-direction: column;
				color: hsl(337deg 10% 68%);
				span {
					font-size: 0.7em;
					margin-top: -1.7em;
					color: hsl(335deg 19% 83%);
					font-weight: bold;
				}
			}
			button {
				align-self: end;
				border: .1em solid hsl(335deg 61% 90%);
				border-radius: 50%;
				padding: {
					top: .45em;
					left: .5em;
					right: .5em;
					bottom: .45em;
				}
				box-shadow: 0 0 2em .1em #fff, inset 0 0 1em -.8em #333, inset 0 0 3em -1.9em #fff;
				ion-icon { color: hsl(334deg 11% 62%); }
			}
			&:nth-child(1n) button { 
				margin-left: 6.5em; 
				background: hsl(333deg 94% 93%);
				ion-icon { color: hsl(334deg 11% 62%); }
			}
			&:nth-child(3n) button { 
				background: hsl(333deg 94% 93%);
				margin-left: 4.5em;
				ion-icon { color: hsl(334deg 11% 62%); }
			}
			&:nth-child(2n) button { 
				margin-left: 8.5em; 
				background: hsl(331deg 67% 79%);
				ion-icon { color: white; }
			}
			&:nth-child(4n) button { 
				background: hsl(333deg 94% 93%);
				margin-left: 2.9em; 
				ion-icon { color: hsl(334deg 11% 62%); }
			}
			&:nth-child(5n) button { 
				margin-left: 8.5em; 
				background: hsl(333deg 94% 93%);
				ion-icon { color: hsl(334deg 11% 62%); }
			}
			&:nth-child(6n) button { 
				margin-left: 5.5em;
				background: hsl(333deg 94% 93%);
				ion-icon { color: hsl(334deg 11% 62%); }
			}
			&:nth-child(7n) button {
				margin-left: 7.5em; 
				background: hsl(333deg 94% 93%);
				ion-icon { color: hsl(334deg 11% 62%); }
			}
		}
	}
}

@media screen and (max-width: 730px) {
	body { flex-direction: column }
	.screen-1,.screen-2 { margin: auto }
}
View Compiled
// Span Change
let start = document.querySelector(".start"),
		input = document.querySelector(".input")

addEventListener("input", () => {
	let x = Math.abs(Math.round(input.value / 30)),
		y = Math.round((input.value / 76) * 10)
	start.innerHTML = `${x}` + ":" + `${y}`
	if (y === 0) {
		start.innerHTML = `${x}` + ":" + `${y}0`
	} else if (y === 1) {
		start.innerHTML = `${x}` + ":" + `${y}1`
	} else if (y === 2) {
		start.innerHTML = `${x}` + ":" + `${y}2`
	} else if (y === 3) {
		start.innerHTML = `${x}` + ":" + `${y}3`
	} else if (y === 4) {
		start.innerHTML = `${x}` + ":" + `${y}4`
	} else if (y === 5) {
		start.innerHTML = `${x}` + ":" + `${y}5`
	} else if (y === 6) {
		start.innerHTML = `${x}` + ":" + `11`
	} else if (y === 7) {
		start.innerHTML = `${x}` + ":" + `22`
	} else if (y === 8) {
		start.innerHTML = `${x}` + ":" + `33`
	} else if (y === 9) {
		start.innerHTML = `${x}` + ":" + `44`
	}
})
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700,800,900

External JavaScript

  1. https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js
  2. https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js