<div id="app" class="h-screen flex justify-center items-center">
<div class="container bg-white rounded-lg py-4 px-4 containerSoft">
<div class="flex mb-8">
<div class="w-1/3">
<button class="rounded ">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="w-8 h-8"
fill="#282b33"
>
<path
d="M492 236H20c-11.046 0-20 8.954-20 20s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20zM492 76H20C8.954 76 0 84.954 0 96s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20zM492 396H20c-11.046 0-20 8.954-20 20s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20z"
/>
</svg>
</button>
</div>
<div class="w-1/3">
<h1 class="text-center text-header text-lg uppercase">
Music Player
</h1>
</div>
<div class="w-1/3"></div>
</div>
<div class="flex justify-center mb-8">
<div class="">
<img
src="https://i.imgur.com/YtTrHrb.jpg"
alt="cover"
class="rounded-full w-64 h-64 imgSoft"
/>
</div>
</div>
<h1 class="text-center text-header text-xl font-bold">Ignite</h1>
<h2 class="text-center eq-empty text-lg mb-4">Alan Walker</h2>
<div class="px-16 mb-12">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 100"
width="100%"
height="100%"
>
<g transform="translate(10,50)">
<line
v-for="(yabs,index) in bars"
:x1="index*10"
:y1="-yabs"
:x2="index*10"
:y2="yabs"
stroke="currentColor"
stroke-linecap="round"
stroke-width="6"
:class="[index > 15 && index < 35 ? 'eq-filled' : 'eq-empty']"
/>
</g>
</svg>
</div>
<div id="buttons" class="flex justify-center items-center">
<button
class="flex justify-center items-center w-8 h-8 rounded-full soft"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512.016 512.016"
class="w-4 h-4"
fill="#282b33"
stroke="none"
>
<path
d="M507.336 100.696l-96-96C406.76.12 399.88-1.256 393.896 1.24c-5.984 2.496-9.888 8.288-9.888 14.752v48h-208c-97.216 0-176 78.784-176 176 0 8.832 7.168 16 16 16h64c8.832 0 16-7.168 16-16 0-44.192 35.808-80 80-80h208v48c0 6.464 3.904 12.32 9.888 14.784 5.984 2.496 12.864 1.12 17.44-3.456l96-96c6.24-6.24 6.24-16.384 0-22.624zM496.008 255.992h-64c-8.832 0-16 7.168-16 16 0 44.192-35.808 80-80 80h-208v-48c0-6.464-3.904-12.32-9.888-14.784s-12.832-1.088-17.44 3.488l-96 96c-6.24 6.24-6.24 16.384 0 22.624l96 96c4.576 4.576 11.456 5.952 17.44 3.456s9.888-8.32 9.888-14.784v-48h208c97.216 0 176-78.784 176-176 0-8.832-7.168-16-16-16z"
/>
</svg>
</button>
<button
class="flex justify-center items-center w-12 h-12 ml-6 rounded soft"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 45.771 45.772"
class="w-6 h-6"
fill="#131419"
stroke="none"
>
<path
d="M18.982 4.75c-1.217-.502-2.504-.222-3.433.711L1.245 19.892c-1.678 1.686-1.65 4.411.028 6.098l14.374 14.433c.929.932 2.113 1.213 3.33.71 1.215-.502 1.795-1.688 1.795-3.003V7.753c-.001-1.315-.572-2.503-1.79-3.003zM43.876 4.64c-1.216-.502-2.558-.222-3.486.711L26.058 19.783c-1.677 1.686-1.663 4.41.015 6.098L40.44 40.312c.93.932 2.217 1.213 3.435.711 1.215-.503 1.897-1.688 1.897-3.004V7.644c-.001-1.317-.679-2.502-1.896-3.004z"
/>
</svg>
</button>
<button
class="flex justify-center items-center w-20 h-20 ml-6 rounded-full soft"
@click="onPlayingChange"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 173.861 173.861"
width="100%"
height="100%"
class="icons w-8 h-8"
>
<defs>
<filter
id="inset-shadow"
x="-50%"
y="-50%"
width="200%"
height="200%"
>
<feComponentTransfer in="SourceAlpha">
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="12" />
<feOffset dx="20" dy="20" result="offsetblur" />
<feFlood flood-color="rgb(0, 0, 0)" result="color" />
<feComposite in2="offsetblur" operator="in" />
<feComposite in2="SourceAlpha" operator="in" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter>
</defs>
<g transform="translate(5,5)">
<path
d="M34.857 3.613C20.084-4.861 8.107 2.081 8.107 19.106v125.637c0 17.042 11.977 23.975 26.75 15.509L144.67 97.275c14.778-8.477 14.778-22.211 0-30.686L34.857 3.613z"
:filter="'url(#inset-shadow)'"
:fill="isPlaying ? '#c3c3c3' : '#17191e'"
/>
</g>
</svg>
</button>
<button
class="flex justify-center items-center w-12 h-12 ml-6 rounded soft"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 57 57"
class="w-6 h-6"
fill="#131419"
stroke="none"
>
<path
d="M56.575 27.683l-27-19c-.306-.216-.703-.242-1.036-.07A.9988.9988 0 0028 9.5v17.777L1.575 8.694a1.0033 1.0033 0 00-1.036-.069C.208 8.797 0 9.14 0 9.513v37.975c0 .373.208.716.539.888.146.074.304.111.461.111.202 0 .403-.062.575-.182L28 29.723V47.5c0 .373.208.716.539.888.146.075.304.112.461.112.202 0 .404-.062.575-.183l27-19c.267-.186.425-.492.425-.817s-.158-.631-.425-.817z"
/>
</svg>
</button>
<button
class="flex justify-center items-center w-8 h-8 ml-6 rounded-full soft"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 375.633 375.633"
class="w-4 h-4"
fill="#282b33"
stroke="none"
>
<path
d="M375.627 279.726l-78.877 67.608v-45.079h-13.277c-41.919 0-72.786-18.781-98.268-43.648 9.828-11.569 18.738-23.214 27.027-34.108 1.904-2.513 3.796-4.993 5.684-7.473 18.852 19.494 39.129 32.645 65.562 32.645h13.277v-37.568l78.872 67.623zM0 129.466h39.308c24.927 0 44.377 11.716 62.321 29.371 2.953-3.791 5.939-7.74 8.953-11.683 7.337-9.66 15.093-19.831 23.497-29.975-24.813-23.187-54.75-40.309-94.77-40.309H0v52.596zM296.75 28.299v44.818h-13.277c-69.375 0-108.488 51.421-143.004 96.804-31.046 40.749-57.85 75.989-101.161 75.989H0v52.59h39.308c69.386 0 108.498-51.394 143.015-96.766 31.035-40.798 57.844-76.033 101.15-76.033h13.277v37.84l78.883-67.629-78.883-67.613z"
/>
</svg>
</button>
</div>
</div>
</div>
/*
Credits :
Music Player Neumorphism Style by Sazzad Sazib
https://dribbble.com/shots/9153970-Music-Player-Neumorphism-Style
Filter combination for inset-shadow
https://codepen.io/venend/pen/KqKMOM
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
body {
font-family: "Open Sans", sans-serif;
background-color: #131419;
}
.soft {
box-shadow: -3px -3px 3px 0 rgba(255, 255, 255, 0.04),
5px 5px 5px 0 rgba(0, 0, 0, 2);
}
.containerSoft {
box-shadow: -6px -6px 16px 0 rgba(255, 255, 255, 0.1),
6px 6px 16px 0 rgba(0, 0, 0, 2);
}
.imgSoft {
box-shadow: -6px -6px 16px 0 rgba(255, 255, 255, 0.08),
8px 8px 8px 0 rgba(0, 0, 0, 0.3);
}
.container {
width: 480px;
height: 750px;
background-color: #17191e;
}
.eq-empty {
color: #282b33;
}
.eq-filled {
color: #c3c3c3;
}
.text-header {
color: #505050;
}
.soft:active {
box-shadow: -1px -1px 1px 0 rgba(255, 255, 255, 0.04),
1px 1px 1px 0 rgba(0, 0, 0, 2);
}
.soft:focus {
outline: none;
}
const app = new Vue({
el: "#app",
data: {
bars: Array(49)
.fill(0)
.map(() => 5 + Math.random() * 20),
isPlaying: false,
currentTick: 0,
counter: null
},
methods: {
update: function() {
this.bars.shift();
this.bars.push(5 + Math.random() * 20);
},
onPlayingChange: function() {
if (this.isPlaying) {
this.isPlaying = false;
clearInterval(this.counter);
} else {
this.isPlaying = true;
this.counter = setInterval(() => {
this.update();
}, 150);
}
}
},
created: function() {
this.onPlayingChange();
}
});
