diff --git a/README.md b/README.md index 7dc71a8..fa5600a 100644 --- a/README.md +++ b/README.md @@ -1 +1,53 @@ -# mini-player +# Music Player + +This is a simple music player created with HTML, CSS, and JavaScript and some use of JSON(i guess!) . + +## Features + +- Plays audio files in MP3 and WAV formats +- Provides basic controls such as play, pause, next, previous, and volume adjustment +- Displays the current song title and artist +- Shows the album artwork for the current song +- Allows users to add songs to the playlist + +## Getting Started + +1. Clone the repository to your local machine. +2. Open `index.html` in your web browser. +3. Use the "Add Song" button to add songs to the playlist. +4. Use the controls at the bottom of the player to play, pause, and adjust the volume of the audio. + +## Project Structure + +``` +music.player/ +├── css/ +│ ├── style.css +├── img/ +│ ├── img1.jpg +│ ├── img2.jpg +│ ├── img3.jpg +│ ├── img4.jpg +├── js/ +│ ├── script.js +├── songs/ +│ ├── song1.mp3 +│ ├── song2.mp3 +│ ├── song3.mp3 +├── index.html +├── README.md +``` + +The project contains four main folders: + +- `css`: Contains the CSS file for styling the music player. +- `img`: Contains the album artwork images used in the player. +- `js`: Contains the JavaScript file for controlling the player and handling user interactions. +- `songs`: Contains the audio files that can be played in the player. + +## Technologies Used + +- HTML +- CSS +- JavaScript + diff --git a/css/dark-mode.css b/css/dark-mode.css new file mode 100644 index 0000000..0f4e5f2 --- /dev/null +++ b/css/dark-mode.css @@ -0,0 +1,656 @@ +@media screen and (max-width: 768px) { + /* Styles for screens smaller than 768px */ +} + +@media screen and (min-width: 768px) and (max-width: 1024px) { + /* Styles for screens between 768px and 1024px */ +} + +@media screen and (min-width: 1024px) { + /* Styles for screens larger than 1024px */ +} +html { + touch-action: manipulation; +} + +body { + touch-action: manipulation; + -ms-content-zooming: none; + -ms-touch-action: manipulation; + zoom: reset; + max-height: 100vh; + max-width: 100vw; + overflow: hidden; +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + body { + -ms-content-zooming: none; + + } +} + +body { + background: url("https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/nzxt-gif.gif") center/200% no-repeat; + /* Set other background properties */ + background-color: #000; + background-attachment: fixed; + position: relative; + font-family: "Bitter", serif; + overflow: hidden; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + +} + /* Set the secondary background image */ + .backup-bg { + background-image: url("https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/bg2.png"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-color: #000; + background-attachment: fixed; +} +body:before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 75%; + height: 75%; + z-index: -1; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} + +.glow-effect { + display: inline-block; + padding: 10px; + background-color:#eef3f7 ; + transition: box-shadow 0.3s ease-in-out; +} + +.glow-effect:hover { + box-shadow: 0 0 10px 5px rgba(128, 70, 228, 0.8); +} + + +* { + box-sizing: border-box; +} + + +.icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +.small-input { + width: 250px; + height: 20px; + text-align: center; +} +.separator { + border-bottom: 3px grey; + width: 100%; + margin: 20px 0; + border-radius: 5px; +} +.sint { + padding: 10px; + border: 2px solid rgb(255, 255, 255); + border-radius: 5px; + font-size: 16px; + color : white; + text-align: center; + background-color: black; +} + +.dark .sint { + color: white; + border-color:white; + background-color: black; +} +button { + background-color:grey; + color: #fff; + border: none; + border-radius: 5px; + padding: 10px; + font-size: 16px; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +button:hover { + background-color: #3e66f5; +} + +.sint:focus { + outline: none; + border-color: #6fbfff; + box-shadow: 0 0 8px #6fbfff; +} + +.wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + min-height: 106vh; + background-size: cover; +} +@media screen and (max-width: 700px), (max-height: 500px) { + .wrapper { + flex-wrap: wrap; + flex-direction: column; + } +} +.progress__current { + background-color: #eef3f7; + animation: glowing 9s linear infinite; +} + +@keyframes glowing { + 0% { + box-shadow: 0 0 10px 3px rgb(0, 255, 0); + } + 50% { + box-shadow: 0 0 10px 3px rgb(0, 255, 0); + } + 100% { + box-shadow: 0 0 10px 3px rgb(0, 255, 0); + } +} + +.player { + background: black; + width: 410px; + min-height: 480px; + box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32); + border-radius: 15px; + padding: 30px; +} + +@media screen and (max-width: 576px), (max-height: 500px) { + .player { + width: 95%; + padding: 20px; + margin-top: 75px; + min-height: initial; + padding-bottom: 30px; + max-width: 400px; + } +} +.player__top { + display: flex; + align-items: flex-start; + position: relative; + z-index: 4; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player__top { + flex-wrap: wrap; + } +} +.player-cover { + width: 300px; + height: 300px; + margin-left: -70px; + flex-shrink: 0; + position: relative; + z-index: 2; + border-radius: 15px; + z-index: 1; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-cover { + margin-top: -70px; + margin-bottom: 25px; + width: 290px; + height: 230px; + margin-left: auto; + margin-right: auto; + } +} +.player-cover__item { + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 100%; + height: 100%; + border-radius: 15px; + position: absolute; + left: 0; + top: 0; +} +.player-cover__item:before { + content: ""; + background: inherit; + width: 100%; + height: 100%; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + display: block; + z-index: 1; + position: absolute; + top: 30px; + transform: scale(0.9); + filter: blur(10px); + opacity: 0.9; + border-radius: 15px; +} +.player-cover__item:after { + content: ""; + background: inherit; + width: 100%; + height: 100%; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + display: block; + z-index: 2; + position: absolute; + border-radius: 15px; +} +.player-cover__img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 15px; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + user-select: none; + pointer-events: none; +} +.player-controls { + flex: 1; + padding-left: 20px; + display: flex; + flex-direction: column; + align-items: center; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-controls { + flex-direction: row; + padding-left: 0; + width: 100%; + flex: unset; + } +} +.player-controls__item { + display: inline-flex; + font-size: 30px; + padding: 5px; + margin-bottom: 10px; + color: #acb8cc; + cursor: pointer; + width: 50px; + height: 50px; + align-items: center; + justify-content: center; + position: relative; + transition: all 0.3s ease-in-out; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-controls__item { + font-size: 26px; + padding: 5px; + margin-right: 10px; + color: #acb8cc; + cursor: pointer; + width: 40px; + height: 40px; + margin-bottom: 0; + } +} +.player-controls__item::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background: #fff; + transform: scale(0.5); + opacity: 0; + box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2); + transition: all 0.3s ease-in-out; + transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88); +} +@media screen and (min-width: 500px) { + .player-controls__item:hover { + color: #4b1dbe; + } + .player-controls__item:hover::before { + opacity: 1; + transform: scale(1.3); + } +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-controls__item:active { + color: #532ab9; + } + .player-controls__item:active::before { + opacity: 1; + transform: scale(1.3); + } +} +.player-controls__item .icon { + position: relative; + z-index: 2; +} +.player-controls__item.-xl { + margin-bottom: 0; + font-size: 95px; + filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45)); + color: #fff; + width: auto; + height: auto; + display: inline-flex; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-controls__item.-xl { + margin-left: auto; + font-size: 75px; + margin-right: 0; + } +} +.player-controls__item.-xl:before { + display: none; +} +.player-controls__item.-favorite.active { + color: red; +} + +[v-cloak] { + display: none; +} + +[v-cloak] > * { + display: none; +} + +.progress { + width: 100%; + margin-top: -15px; + user-select: none; +} +.progress__top { + display: flex; + align-items: flex-end; + justify-content: space-between; +} +.progress__duration { + color: #71829e; + font-weight: 700; + font-size: 20px; + opacity: 0.5; +} +.progress__time { + margin-top: 2px; + color: #71829e; + font-weight: 700; + font-size: 16px; + opacity: 0.7; +} + +.progress__bar { + height: 6px; + width: 100%; + cursor: pointer; + background-color: #d0d8e6; + display: inline-block; + border-radius: 10px; +} + +.progress__current { + height: inherit; + width: 0%; + background-color: lightgray; + border-radius: 10px; +} + +.txt{ + font-weight: 400; + font-size: 20px; + opacity: 0.7; + line-height: 1.3em; + min-height: 52px; +} +.album-info { + color: #71829e; + flex: 1; + padding-right: 60px; + user-select: none; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .album-info { + padding-right: 30px; + } +} +.album-info__name { + font-size: 20px; + font-weight: bold; + margin-bottom: 12px; + line-height: 1.3em; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .album-info__name { + font-size: 20px; + margin-bottom: 9px; + } +} +.album-info__track { + font-weight: 400; + font-size: 22px; + opacity: 0.7; + line-height: 1.3em; + min-height: 52px; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .album-info__track { + font-size: 18px; + min-height: 50px; + } +} + +.github-btn { + position: absolute; + right: 40px; + bottom: 50px; + text-decoration: none; + padding: 15px 25px; + border-radius: 4px; + box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65); + background: #24292e; + color: #fff; + font-weight: bold; + letter-spacing: 1px; + font-size: 16px; + transition: all 0.3s ease-in-out; +} +@media screen and (min-width: 500px) { + .github-btn:hover { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } +} +@media screen and (max-width: 700px) { + .github-btn { + position: relative; + bottom: auto; + right: auto; + margin-top: 20px; + } + .github-btn:active { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } +} + +.scale-out-enter-active { + transition: all 0.35s ease-in-out; +} + +.scale-out-leave-active { + transition: all 0.35s ease-in-out; +} + +.scale-out-enter { + transform: scale(0.55); + pointer-events: none; + opacity: 0; +} + +.scale-out-leave-to { + transform: scale(1.2); + pointer-events: none; + opacity: 0; +} + +.scale-in-enter-active { + transition: all 0.35s ease-in-out; +} + +.scale-in-leave-active { + transition: all 0.35s ease-in-out; +} + +.scale-in-enter { + transform: scale(1.2); + pointer-events: none; + opacity: 0; +} + +.scale-in-leave-to { + transform: scale(0.55); + pointer-events: none; + opacity: 0; +} + +/*# sourceMappingURL=main.css.map */ +.container { + height: 25em; + width: 25em; + position: absolute; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} +input[type="checkbox"] { + appearance: none; + height: 9.37em; + width: 18.75em; + background-color: #3a3256; + position: absolute; + transform: translateX(-50%); + left: 50%; + top: 6.25em; + border-radius: 4.68em; +} +input[type="checkbox"]:before { + position: absolute; + content: ""; + height: 8.12em; + width: 8.12em; + background-color: #7d7890; + border-radius: 50%; + top: 0.62em; + left: 0.62em; + transition: 0.3s; +} +label[for="light"] { + height: 6.25em; + width: 0.62em; + background-color: #31353d; + position: absolute; + top: 11em; + left: 8em; + z-index: -1; + transition: 0.3s; +} +label[for="light"]:after { + position: absolute; + content: ""; + height: 0; + width: 0.75em; + border-bottom: 1.56em solid #392692; + border-left: 0.62em solid transparent; + border-right: 0.62em solid transparent; + top: 5.93em; + left: -0.68em; +} +input[type="checkbox"], +label[for="light"] { + cursor: pointer; +} +input[type="checkbox"]:checked:before { + background-color: #f5f5f5; + left: 10em; + box-shadow: 0 0 8.75em 1.87em rgba(196, 241, 255, 0.8); +} +input[type="checkbox"]:checked + label { + top: 12em; +} +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + margin-right: 10px; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +#status { + font-size: 24px; +} diff --git a/css/dark-mode.css.map b/css/dark-mode.css.map new file mode 100644 index 0000000..ccaeee8 --- /dev/null +++ b/css/dark-mode.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;IACA;;;;AAIJ;EACE;EACA;EACA;EAGA;EACA;EACA;;AACA;EATF;IAUI;IACA;IACA;IACA;IACA;IACA;;;AAEF;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EAZF;IAaI;IACA;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEA;IACE;IACA;;;AAKN;EACE;IACE;;EAEA;IACE;IACA;;;AAKN;EACE;EACA;;AAGF;EACE;EACA;EAGA;EACA;EACA;EACA;EACA;;AACA;EAVF;IAWI;IACA;IACA;;;AAEF;EACE;;AAKF;EACE;;;AAMV;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;IACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;IACA;;;AAIJ;EAtBF;IAuBI;IACA;IACA;IACA;;EAEA;IACE;IACA;;;;AAON;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAMF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/css/dark-mode.css.scss b/css/dark-mode.css.scss new file mode 100644 index 0000000..884f42b --- /dev/null +++ b/css/dark-mode.css.scss @@ -0,0 +1,391 @@ +body { + // background: #e1e7ec; + background: #dfe7ef; + font-family: "Bitter", serif; +} + +* { + box-sizing: border-box; +} + +.icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} + +.wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + // background: url(../img/bg.png) no-repeat center; + background-size: cover; + @media screen and (max-width: 700px), (max-height: 500px) { + flex-wrap: wrap; + flex-direction: column; + } +} + +.player { + background: #eef3f7; + width: 410px; + min-height: 480px; + // box-shadow: 0px 55px 75px -10px rgba(76, 70, 124, 0.5); + // box-shadow: 0px 55px 105px 10px rgba(76, 70, 124, 0.35); + box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32); + border-radius: 15px; + padding: 30px; + @media screen and (max-width: 576px), (max-height: 500px) { + width: 95%; + padding: 20px; + margin-top: 75px; + min-height: initial; + padding-bottom: 30px; + max-width: 400px; + } + &__top { + display: flex; + align-items: flex-start; + position: relative; + z-index: 4; + @media screen and (max-width: 576px), (max-height: 500px) { + flex-wrap: wrap; + } + } + + &-cover { + width: 300px; + height: 300px; + margin-left: -70px; + flex-shrink: 0; + position: relative; + z-index: 2; + border-radius: 15px; + // transform: perspective(512px) translate3d(0, 0, 0); + // transition: all .4s cubic-bezier(.125, .625, .125, .875); + z-index: 1; + + @media screen and (max-width: 576px), (max-height: 500px) { + margin-top: -70px; + margin-bottom: 25px; + width: 290px; + height: 230px; + margin-left: auto; + margin-right: auto; + } + + &__item { + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 100%; + height: 100%; + border-radius: 15px; + position: absolute; + left: 0; + top: 0; + + &:before { + content: ""; + background: inherit; + width: 100%; + height: 100%; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + display: block; + z-index: 1; + position: absolute; + top: 30px; + transform: scale(0.9); + filter: blur(10px); + opacity: 0.9; + border-radius: 15px; + } + + &:after { + content: ""; + background: inherit; + width: 100%; + height: 100%; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + display: block; + z-index: 2; + position: absolute; + border-radius: 15px; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 15px; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + user-select: none; + pointer-events: none; + } + } + + &-controls { + flex: 1; + padding-left: 20px; + display: flex; + flex-direction: column; + align-items: center; + + @media screen and (max-width: 576px), (max-height: 500px) { + flex-direction: row; + padding-left: 0; + width: 100%; + flex: unset; + } + + &__item { + display: inline-flex; + font-size: 30px; + padding: 5px; + margin-bottom: 10px; + color: #acb8cc; + cursor: pointer; + width: 50px; + height: 50px; + align-items: center; + justify-content: center; + position: relative; + transition: all 0.3s ease-in-out; + + @media screen and (max-width: 576px), (max-height: 500px) { + font-size: 26px; + padding: 5px; + margin-right: 10px; + color: #acb8cc; + cursor: pointer; + width: 40px; + height: 40px; + margin-bottom: 0; + } + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background: #fff; + transform: scale(0.5); + opacity: 0; + box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2); + transition: all 0.3s ease-in-out; + transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88); + } + + @media screen and (min-width: 500px) { + &:hover { + color: #532ab9; + + &::before { + opacity: 1; + transform: scale(1.3); + } + } + } + + @media screen and (max-width: 576px), (max-height: 500px) { + &:active { + color: #532ab9; + + &::before { + opacity: 1; + transform: scale(1.3); + } + } + } + + .icon { + position: relative; + z-index: 2; + } + + &.-xl { + margin-bottom: 0; + font-size: 95px; + // filter: drop-shadow(0 2px 8px rgba(172, 184, 204, 0.3)); + // filter: drop-shadow(0 9px 6px rgba(172, 184, 204, 0.35)); + filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45)); + color: #fff; + width: auto; + height: auto; + display: inline-flex; + @media screen and (max-width: 576px), (max-height: 500px) { + margin-left: auto; + font-size: 75px; + margin-right: 0; + } + &:before { + display: none; + } + } + + &.-favorite { + &.active { + color: red; + } + } + } + } +} +[v-cloak] { + display: none; +} +[v-cloak] > * { + display: none; +} +.progress { + width: 100%; + margin-top: -15px; + user-select: none; + &__top { + display: flex; + align-items: flex-end; + justify-content: space-between; + } + + &__duration { + color: #71829e; + font-weight: 700; + font-size: 20px; + opacity: 0.5; + } + &__time { + margin-top: 2px; + color: #71829e; + font-weight: 700; + font-size: 16px; + opacity: 0.7; + } +} +.progress__bar { + height: 6px; + width: 100%; + cursor: pointer; + background-color: #d0d8e6; + display: inline-block; + border-radius: 10px; +} +.progress__current { + height: inherit; + width: 0%; + background-color: #a3b3ce; + border-radius: 10px; +} + +.album-info { + color: #71829e; + flex: 1; + padding-right: 60px; + user-select: none; + + @media screen and (max-width: 576px), (max-height: 500px) { + padding-right: 30px; + } + + &__name { + font-size: 20px; + font-weight: bold; + margin-bottom: 12px; + line-height: 1.3em; + @media screen and (max-width: 576px), (max-height: 500px) { + font-size: 18px; + margin-bottom: 9px; + } + } + &__track { + font-weight: 400; + font-size: 20px; + opacity: 0.7; + line-height: 1.3em; + min-height: 52px; + @media screen and (max-width: 576px), (max-height: 500px) { + font-size: 18px; + min-height: 50px; + } + } +} + +.github-btn { + position: absolute; + right: 40px; + bottom: 50px; + text-decoration: none; + padding: 15px 25px; + border-radius: 4px; + box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65); + background: #24292e; + color: #fff; + font-weight: bold; + letter-spacing: 1px; + font-size: 16px; + transition: all .3s ease-in-out; + + @media screen and (min-width: 500px) { + &:hover { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } + } + + @media screen and (max-width: 700px) { + position: relative; + bottom: auto; + right: auto; + margin-top: 20px; + + &:active { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } + } +} + +//scale out + +.scale-out-enter-active { + transition: all .35s ease-in-out; +} +.scale-out-leave-active { + transition: all .35s ease-in-out; +} +.scale-out-enter { + transform: scale(.55); + pointer-events: none; + opacity: 0; +} +.scale-out-leave-to { + transform: scale(1.2); + pointer-events: none; + opacity: 0; +} + + +//scale in + +.scale-in-enter-active { + transition: all .35s ease-in-out; +} +.scale-in-leave-active { + transition: all .35s ease-in-out; +} +.scale-in-enter { + transform: scale(1.2); + pointer-events: none; + opacity: 0; +} +.scale-in-leave-to { + transform: scale(.55); + pointer-events: none; + opacity: 0; +} diff --git a/css/light-mode.css b/css/light-mode.css new file mode 100644 index 0000000..f8bbd5d --- /dev/null +++ b/css/light-mode.css @@ -0,0 +1,673 @@ +@media screen and (max-width: 768px) { + /* Styles for screens smaller than 768px */ +} + +@media screen and (min-width: 768px) and (max-width: 1024px) { + /* Styles for screens between 768px and 1024px */ +} + +@media screen and (min-width: 1024px) { + /* Styles for screens larger than 1024px */ +} +html { + touch-action: manipulation; +} + +body { + touch-action: manipulation; + -ms-content-zooming: none; + -ms-touch-action: manipulation; + zoom: reset; + max-height: 100vh; + max-width: 100vw; + overflow: hidden; +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + body { + -ms-content-zooming: none; + + } +} + +body { + background: url("https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/nzxt-gif.gif") center/200% no-repeat; + /* Set other background properties */ + background-color: #000; + background-attachment: fixed; + position: relative; + font-family: "Bitter", serif; + overflow: hidden; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + +} + /* Set the secondary background image */ + .backup-bg { + background-image: url("https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/bg2.png"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-color: #000; + background-attachment: fixed; +} +body:before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 75%; + height: 75%; + z-index: -1; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} + +.glow-effect { + display: inline-block; + padding: 10px; + background-color:#eef3f7 ; + transition: box-shadow 0.3s ease-in-out; +} + +.glow-effect:hover { + box-shadow: 0 0 10px 5px rgba(128, 70, 228, 0.8); +} + + +* { + box-sizing: border-box; +} + + +.icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +.small-input { + width: 250px; + height: 20px; + text-align: center; +} +.separator { + border-bottom: 3px grey; + width: 100%; + margin: 20px 0; + border-radius: 5px; +} +.sint { + padding: 10px; + border: 2px solid black; + border-radius: 5px; + font-size: 16px; + text-align: center; + background-color:#eef3f7 +} +button { + background-color:#eef3f7; + color: #fff; + border: none; + border-radius: 5px; + padding: 10px; + font-size: 16px; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +button:hover { + background-color: #5674e1; +} + +.sint:focus { + outline: none; + border-color: #6fbfff; + box-shadow: 0 0 8px #6fbfff; +} +.dark .sint { + color: white; + border-color:white; + background-color: black; +} +.wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + min-height: 106vh; + background-size: cover; +} +@media screen and (max-width: 700px), (max-height: 500px) { + .wrapper { + flex-wrap: wrap; + flex-direction: column; + } +} +.progress__current { + background-color: #eef3f7; + animation: glowing 9s linear infinite; +} + +@keyframes glowing { + 0% { + box-shadow: 0 0 10px 2px rgb(0, 255, 0); + } + 50% { + box-shadow: 0 0 10px 2px rgb(0, 255, 0); + } + 100% { + box-shadow: 0 0 10px 2px rgb(0, 255, 0); + } +} + +.player { + background: whitesmoke; + width: 410px; + min-height: 480px; + box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32); + border-radius: 15px; + padding: 30px; +} +.dark .player { + background: black; + width: 410px; + min-height: 480px; + box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32); + border-radius: 15px; + padding: 30px; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player { + width: 95%; + padding: 20px; + margin-top: 75px; + min-height: initial; + padding-bottom: 30px; + max-width: 400px; + } +} +.player__top { + display: flex; + align-items: flex-start; + position: relative; + z-index: 4; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player__top { + flex-wrap: wrap; + } +} +.player-cover { + width: 300px; + height: 300px; + margin-left: -70px; + flex-shrink: 0; + position: relative; + z-index: 2; + border-radius: 15px; + z-index: 1; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-cover { + margin-top: -70px; + margin-bottom: 25px; + width: 290px; + height: 230px; + margin-left: auto; + margin-right: auto; + } +} +.player-cover__item { + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 100%; + height: 100%; + border-radius: 15px; + position: absolute; + left: 0; + top: 0; +} +.player-cover__item:before { + content: ""; + background: inherit; + width: 100%; + height: 100%; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + display: block; + z-index: 1; + position: absolute; + top: 30px; + transform: scale(0.9); + filter: blur(10px); + opacity: 0.9; + border-radius: 15px; +} +.player-cover__item:after { + content: ""; + background: inherit; + width: 100%; + height: 100%; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + display: block; + z-index: 2; + position: absolute; + border-radius: 15px; +} +.player-cover__img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 15px; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + user-select: none; + pointer-events: none; +} +.player-controls { + flex: 1; + padding-left: 20px; + display: flex; + flex-direction: column; + align-items: center; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-controls { + flex-direction: row; + padding-left: 0; + width: 100%; + flex: unset; + } +} +.player-controls__item { + display: inline-flex; + font-size: 30px; + padding: 5px; + margin-bottom: 10px; + color: #acb8cc; + cursor: pointer; + width: 50px; + height: 50px; + align-items: center; + justify-content: center; + position: relative; + transition: all 0.3s ease-in-out; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-controls__item { + font-size: 26px; + padding: 5px; + margin-right: 10px; + color: #acb8cc; + cursor: pointer; + width: 40px; + height: 40px; + margin-bottom: 0; + } +} +.player-controls__item::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background: #fff; + transform: scale(0.5); + opacity: 0; + box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2); + transition: all 0.3s ease-in-out; + transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88); +} +@media screen and (min-width: 500px) { + .player-controls__item:hover { + color: #4b1dbe; + } + .player-controls__item:hover::before { + opacity: 1; + transform: scale(1.3); + } +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-controls__item:active { + color: #532ab9; + } + .player-controls__item:active::before { + opacity: 1; + transform: scale(1.3); + } +} +.player-controls__item .icon { + position: relative; + z-index: 2; +} +.player-controls__item.-xl { + margin-bottom: 0; + font-size: 95px; + filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45)); + color: #fff; + width: auto; + height: auto; + display: inline-flex; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .player-controls__item.-xl { + margin-left: auto; + font-size: 75px; + margin-right: 0; + } +} +.player-controls__item.-xl:before { + display: none; +} +.player-controls__item.-favorite.active { + color: red; +} + +[v-cloak] { + display: none; +} + +[v-cloak] > * { + display: none; +} + +.progress { + width: 100%; + margin-top: -15px; + user-select: none; +} +.progress__top { + display: flex; + align-items: flex-end; + justify-content: space-between; +} +.progress__duration { + color: #71829e; + font-weight: 700; + font-size: 20px; + opacity: 0.5; +} +.progress__time { + margin-top: 2px; + color: #71829e; + font-weight: 700; + font-size: 16px; + opacity: 0.7; +} + +.progress__bar { + height: 6px; + width: 100%; + cursor: pointer; + background-color: #d0d8e6; + display: inline-block; + border-radius: 10px; +} + +.progress__current { + height: inherit; + width: 0%; + background-color: lightgray; + border-radius: 10px; +} + +.txt{ + font-weight: 400; + font-size: 20px; + opacity: 0.7; + line-height: 1.3em; + min-height: 52px; +} +.album-info { + color: #71829e; + flex: 1; + padding-right: 60px; + user-select: none; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .album-info { + padding-right: 30px; + } +} +.album-info__name { + font-size: 20px; + font-weight: bold; + margin-bottom: 12px; + line-height: 1.3em; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .album-info__name { + font-size: 20px; + margin-bottom: 9px; + } +} +.album-info__track { + font-weight: 400; + font-size: 22px; + opacity: 0.7; + line-height: 1.3em; + min-height: 52px; +} +@media screen and (max-width: 576px), (max-height: 500px) { + .album-info__track { + font-size: 18px; + min-height: 50px; + } +} + +.github-btn { + position: absolute; + right: 40px; + bottom: 50px; + text-decoration: none; + padding: 15px 25px; + border-radius: 4px; + box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65); + background: #24292e; + color: #fff; + font-weight: bold; + letter-spacing: 1px; + font-size: 16px; + transition: all 0.3s ease-in-out; +} +@media screen and (min-width: 500px) { + .github-btn:hover { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } +} +@media screen and (max-width: 700px) { + .github-btn { + position: relative; + bottom: auto; + right: auto; + margin-top: 20px; + } + .github-btn:active { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } +} + +.scale-out-enter-active { + transition: all 0.35s ease-in-out; +} + +.scale-out-leave-active { + transition: all 0.35s ease-in-out; +} + +.scale-out-enter { + transform: scale(0.55); + pointer-events: none; + opacity: 0; +} + +.scale-out-leave-to { + transform: scale(1.2); + pointer-events: none; + opacity: 0; +} + +.scale-in-enter-active { + transition: all 0.35s ease-in-out; +} + +.scale-in-leave-active { + transition: all 0.35s ease-in-out; +} + +.scale-in-enter { + transform: scale(1.2); + pointer-events: none; + opacity: 0; +} + +.scale-in-leave-to { + transform: scale(0.55); + pointer-events: none; + opacity: 0; +} + +/*# sourceMappingURL=main.css.map */ +.container { + height: 25em; + width: 25em; + position: absolute; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} +input[type="checkbox"] { + appearance: none; + height: 9.37em; + width: 18.75em; + background-color: #3a3256; + position: absolute; + transform: translateX(-50%); + left: 50%; + top: 6.25em; + border-radius: 4.68em; +} +input[type="checkbox"]:before { + position: absolute; + content: ""; + height: 8.12em; + width: 8.12em; + background-color: #7d7890; + border-radius: 50%; + top: 0.62em; + left: 0.62em; + transition: 0.3s; +} +label[for="light"] { + height: 6.25em; + width: 0.62em; + background-color: #31353d; + position: absolute; + top: 11em; + left: 8em; + z-index: -1; + transition: 0.3s; +} +label[for="light"]:after { + position: absolute; + content: ""; + height: 0; + width: 0.75em; + border-bottom: 1.56em solid #392692; + border-left: 0.62em solid transparent; + border-right: 0.62em solid transparent; + top: 5.93em; + left: -0.68em; +} +input[type="checkbox"], +label[for="light"] { + cursor: pointer; +} +input[type="checkbox"]:checked:before { + background-color: #f5f5f5; + left: 10em; + box-shadow: 0 0 8.75em 1.87em rgba(196, 241, 255, 0.8); +} +input[type="checkbox"]:checked + label { + top: 12em; +} +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + margin-right: 10px; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +#status { + font-size: 24px; +} +body { + transition: background-color 0.3s ease; +} + +.light-mode { + background-color: #ffffff; + color: #000000; +} + +.dark-mode { + background-color: #333333; + color: #ffffff; +} \ No newline at end of file diff --git a/css/light-mode.css.map b/css/light-mode.css.map new file mode 100644 index 0000000..ccaeee8 --- /dev/null +++ b/css/light-mode.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;IACA;;;;AAIJ;EACE;EACA;EACA;EAGA;EACA;EACA;;AACA;EATF;IAUI;IACA;IACA;IACA;IACA;IACA;;;AAEF;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EAZF;IAaI;IACA;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEA;IACE;IACA;;;AAKN;EACE;IACE;;EAEA;IACE;IACA;;;AAKN;EACE;EACA;;AAGF;EACE;EACA;EAGA;EACA;EACA;EACA;EACA;;AACA;EAVF;IAWI;IACA;IACA;;;AAEF;EACE;;AAKF;EACE;;;AAMV;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;IACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;IACA;;;AAIJ;EAtBF;IAuBI;IACA;IACA;IACA;;EAEA;IACE;IACA;;;;AAON;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAMF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/css/light-mode.css.scss b/css/light-mode.css.scss new file mode 100644 index 0000000..884f42b --- /dev/null +++ b/css/light-mode.css.scss @@ -0,0 +1,391 @@ +body { + // background: #e1e7ec; + background: #dfe7ef; + font-family: "Bitter", serif; +} + +* { + box-sizing: border-box; +} + +.icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} + +.wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + // background: url(../img/bg.png) no-repeat center; + background-size: cover; + @media screen and (max-width: 700px), (max-height: 500px) { + flex-wrap: wrap; + flex-direction: column; + } +} + +.player { + background: #eef3f7; + width: 410px; + min-height: 480px; + // box-shadow: 0px 55px 75px -10px rgba(76, 70, 124, 0.5); + // box-shadow: 0px 55px 105px 10px rgba(76, 70, 124, 0.35); + box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32); + border-radius: 15px; + padding: 30px; + @media screen and (max-width: 576px), (max-height: 500px) { + width: 95%; + padding: 20px; + margin-top: 75px; + min-height: initial; + padding-bottom: 30px; + max-width: 400px; + } + &__top { + display: flex; + align-items: flex-start; + position: relative; + z-index: 4; + @media screen and (max-width: 576px), (max-height: 500px) { + flex-wrap: wrap; + } + } + + &-cover { + width: 300px; + height: 300px; + margin-left: -70px; + flex-shrink: 0; + position: relative; + z-index: 2; + border-radius: 15px; + // transform: perspective(512px) translate3d(0, 0, 0); + // transition: all .4s cubic-bezier(.125, .625, .125, .875); + z-index: 1; + + @media screen and (max-width: 576px), (max-height: 500px) { + margin-top: -70px; + margin-bottom: 25px; + width: 290px; + height: 230px; + margin-left: auto; + margin-right: auto; + } + + &__item { + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 100%; + height: 100%; + border-radius: 15px; + position: absolute; + left: 0; + top: 0; + + &:before { + content: ""; + background: inherit; + width: 100%; + height: 100%; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + display: block; + z-index: 1; + position: absolute; + top: 30px; + transform: scale(0.9); + filter: blur(10px); + opacity: 0.9; + border-radius: 15px; + } + + &:after { + content: ""; + background: inherit; + width: 100%; + height: 100%; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + display: block; + z-index: 2; + position: absolute; + border-radius: 15px; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 15px; + box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5); + user-select: none; + pointer-events: none; + } + } + + &-controls { + flex: 1; + padding-left: 20px; + display: flex; + flex-direction: column; + align-items: center; + + @media screen and (max-width: 576px), (max-height: 500px) { + flex-direction: row; + padding-left: 0; + width: 100%; + flex: unset; + } + + &__item { + display: inline-flex; + font-size: 30px; + padding: 5px; + margin-bottom: 10px; + color: #acb8cc; + cursor: pointer; + width: 50px; + height: 50px; + align-items: center; + justify-content: center; + position: relative; + transition: all 0.3s ease-in-out; + + @media screen and (max-width: 576px), (max-height: 500px) { + font-size: 26px; + padding: 5px; + margin-right: 10px; + color: #acb8cc; + cursor: pointer; + width: 40px; + height: 40px; + margin-bottom: 0; + } + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background: #fff; + transform: scale(0.5); + opacity: 0; + box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2); + transition: all 0.3s ease-in-out; + transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88); + } + + @media screen and (min-width: 500px) { + &:hover { + color: #532ab9; + + &::before { + opacity: 1; + transform: scale(1.3); + } + } + } + + @media screen and (max-width: 576px), (max-height: 500px) { + &:active { + color: #532ab9; + + &::before { + opacity: 1; + transform: scale(1.3); + } + } + } + + .icon { + position: relative; + z-index: 2; + } + + &.-xl { + margin-bottom: 0; + font-size: 95px; + // filter: drop-shadow(0 2px 8px rgba(172, 184, 204, 0.3)); + // filter: drop-shadow(0 9px 6px rgba(172, 184, 204, 0.35)); + filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45)); + color: #fff; + width: auto; + height: auto; + display: inline-flex; + @media screen and (max-width: 576px), (max-height: 500px) { + margin-left: auto; + font-size: 75px; + margin-right: 0; + } + &:before { + display: none; + } + } + + &.-favorite { + &.active { + color: red; + } + } + } + } +} +[v-cloak] { + display: none; +} +[v-cloak] > * { + display: none; +} +.progress { + width: 100%; + margin-top: -15px; + user-select: none; + &__top { + display: flex; + align-items: flex-end; + justify-content: space-between; + } + + &__duration { + color: #71829e; + font-weight: 700; + font-size: 20px; + opacity: 0.5; + } + &__time { + margin-top: 2px; + color: #71829e; + font-weight: 700; + font-size: 16px; + opacity: 0.7; + } +} +.progress__bar { + height: 6px; + width: 100%; + cursor: pointer; + background-color: #d0d8e6; + display: inline-block; + border-radius: 10px; +} +.progress__current { + height: inherit; + width: 0%; + background-color: #a3b3ce; + border-radius: 10px; +} + +.album-info { + color: #71829e; + flex: 1; + padding-right: 60px; + user-select: none; + + @media screen and (max-width: 576px), (max-height: 500px) { + padding-right: 30px; + } + + &__name { + font-size: 20px; + font-weight: bold; + margin-bottom: 12px; + line-height: 1.3em; + @media screen and (max-width: 576px), (max-height: 500px) { + font-size: 18px; + margin-bottom: 9px; + } + } + &__track { + font-weight: 400; + font-size: 20px; + opacity: 0.7; + line-height: 1.3em; + min-height: 52px; + @media screen and (max-width: 576px), (max-height: 500px) { + font-size: 18px; + min-height: 50px; + } + } +} + +.github-btn { + position: absolute; + right: 40px; + bottom: 50px; + text-decoration: none; + padding: 15px 25px; + border-radius: 4px; + box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65); + background: #24292e; + color: #fff; + font-weight: bold; + letter-spacing: 1px; + font-size: 16px; + transition: all .3s ease-in-out; + + @media screen and (min-width: 500px) { + &:hover { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } + } + + @media screen and (max-width: 700px) { + position: relative; + bottom: auto; + right: auto; + margin-top: 20px; + + &:active { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } + } +} + +//scale out + +.scale-out-enter-active { + transition: all .35s ease-in-out; +} +.scale-out-leave-active { + transition: all .35s ease-in-out; +} +.scale-out-enter { + transform: scale(.55); + pointer-events: none; + opacity: 0; +} +.scale-out-leave-to { + transform: scale(1.2); + pointer-events: none; + opacity: 0; +} + + +//scale in + +.scale-in-enter-active { + transition: all .35s ease-in-out; +} +.scale-in-leave-active { + transition: all .35s ease-in-out; +} +.scale-in-enter { + transform: scale(1.2); + pointer-events: none; + opacity: 0; +} +.scale-in-leave-to { + transform: scale(.55); + pointer-events: none; + opacity: 0; +} diff --git a/css/main.css b/css/main.css index 4b85bb7..6324779 100644 --- a/css/main.css +++ b/css/main.css @@ -1,12 +1,87 @@ +@media screen and (max-width: 768px) { + /* Styles for screens smaller than 768px */ +} + +@media screen and (min-width: 768px) and (max-width: 1024px) { + /* Styles for screens between 768px and 1024px */ +} + +@media screen and (min-width: 1024px) { + /* Styles for screens larger than 1024px */ +} +html { + touch-action: manipulation; +} + body { - background: #dfe7ef; + touch-action: manipulation; + -ms-content-zooming: none; + -ms-touch-action: manipulation; + zoom: reset; + max-height: 100vh; + max-width: 100vw; + overflow: hidden; +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + body { + -ms-content-zooming: none; + -ms-touch-action: manipulation; + } +} + +body { + background: url("https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/nzxt-gif.gif") center/200% no-repeat; + /* Set other background properties */ + background-color: #000; + background-attachment: fixed; + position: relative; font-family: "Bitter", serif; + overflow: hidden; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + +} + /* Set the secondary background image */ + .backup-bg { + background-image: url("https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/bg2.png"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-color: #000; + background-attachment: fixed; +} +body:before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 75%; + height: 75%; + z-index: -1; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; } +.glow-effect { + display: inline-block; + padding: 10px; + background-color:#eef3f7 ; + transition: box-shadow 0.3s ease-in-out; +} + +.glow-effect:hover { + box-shadow: 0 0 10px 5px rgba(128, 70, 228, 0.8); +} + + * { box-sizing: border-box; } + .icon { display: inline-block; width: 1em; @@ -15,13 +90,52 @@ body { stroke: currentColor; fill: currentColor; } +.small-input { + width: 250px; + height: 20px; + text-align: center; +} +.separator { + border-bottom: 3px grey; + width: 100%; + margin: 20px 0; + border-radius: 5px; +} +.sint { + padding: 10px; + border: 2px solid black; + border-radius: 5px; + font-size: 16px; + text-align: center; + background-color:#eef3f7 +} +button { + background-color:#eef3f7; + color: #fff; + border: none; + border-radius: 5px; + padding: 10px; + font-size: 16px; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +button:hover { + background-color: #5674e1; +} + +.sint:focus { + outline: none; + border-color: #6fbfff; + box-shadow: 0 0 8px #6fbfff; +} .wrapper { width: 100%; display: flex; align-items: center; justify-content: center; - min-height: 100vh; + min-height: 106vh; background-size: cover; } @media screen and (max-width: 700px), (max-height: 500px) { @@ -30,9 +144,25 @@ body { flex-direction: column; } } +.progress__current { + background-color: #eef3f7; + animation: glowing 9s linear infinite; +} + +@keyframes glowing { + 0% { + box-shadow: 0 0 10px 2px rgb(0, 255, 0); + } + 50% { + box-shadow: 0 0 10px 2px rgb(0, 255, 0); + } + 100% { + box-shadow: 0 0 10px 2px rgb(0, 255, 0); + } +} .player { - background: #eef3f7; + background: whitesmoke; width: 410px; min-height: 480px; box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32); @@ -182,7 +312,7 @@ body { } @media screen and (min-width: 500px) { .player-controls__item:hover { - color: #532ab9; + color: #4b1dbe; } .player-controls__item:hover::before { opacity: 1; @@ -269,10 +399,17 @@ body { .progress__current { height: inherit; width: 0%; - background-color: #a3b3ce; + background-color: lightgray; border-radius: 10px; } +.txt{ + font-weight: 400; + font-size: 20px; + opacity: 0.7; + line-height: 1.3em; + min-height: 52px; +} .album-info { color: #71829e; flex: 1; @@ -292,13 +429,13 @@ body { } @media screen and (max-width: 576px), (max-height: 500px) { .album-info__name { - font-size: 18px; + font-size: 20px; margin-bottom: 9px; } } .album-info__track { font-weight: 400; - font-size: 20px; + font-size: 22px; opacity: 0.7; line-height: 1.3em; min-height: 52px; @@ -326,7 +463,7 @@ body { transition: all 0.3s ease-in-out; } @media screen and (min-width: 500px) { - .github-btn:hover { + .github-btn:hover { transform: scale(1.1); box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); } @@ -385,3 +522,127 @@ body { } /*# sourceMappingURL=main.css.map */ +.container { + height: 25em; + width: 25em; + position: absolute; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} +input[type="checkbox"] { + appearance: none; + height: 9.37em; + width: 18.75em; + background-color: #3a3256; + position: absolute; + transform: translateX(-50%); + left: 50%; + top: 6.25em; + border-radius: 4.68em; +} +input[type="checkbox"]:before { + position: absolute; + content: ""; + height: 8.12em; + width: 8.12em; + background-color: #7d7890; + border-radius: 50%; + top: 0.62em; + left: 0.62em; + transition: 0.3s; +} +label[for="light"] { + height: 6.25em; + width: 0.62em; + background-color: #31353d; + position: absolute; + top: 11em; + left: 8em; + z-index: -1; + transition: 0.3s; +} +label[for="light"]:after { + position: absolute; + content: ""; + height: 0; + width: 0.75em; + border-bottom: 1.56em solid #392692; + border-left: 0.62em solid transparent; + border-right: 0.62em solid transparent; + top: 5.93em; + left: -0.68em; +} +input[type="checkbox"], +label[for="light"] { + cursor: pointer; +} +input[type="checkbox"]:checked:before { + background-color: #f5f5f5; + left: 10em; + box-shadow: 0 0 8.75em 1.87em rgba(196, 241, 255, 0.8); +} +input[type="checkbox"]:checked + label { + top: 12em; +} +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + margin-right: 10px; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +#status { + font-size: 24px; +} diff --git a/img/4.jpg b/img/4.jpg index b074b4d..f0ccaf3 100755 Binary files a/img/4.jpg and b/img/4.jpg differ diff --git a/img/bg2.png b/img/bg2.png new file mode 100644 index 0000000..76a5aa1 Binary files /dev/null and b/img/bg2.png differ diff --git a/img/bg3.png b/img/bg3.png new file mode 100644 index 0000000..f664a4f Binary files /dev/null and b/img/bg3.png differ diff --git a/img/bg5.gif b/img/bg5.gif new file mode 100644 index 0000000..b9606b0 Binary files /dev/null and b/img/bg5.gif differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..de906b8 Binary files /dev/null and b/img/favicon.ico differ diff --git a/img/nzxt-gif.gif b/img/nzxt-gif.gif new file mode 100644 index 0000000..6acdebd Binary files /dev/null and b/img/nzxt-gif.gif differ diff --git a/index.html b/index.html index 97a13f4..7335b8b 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + - - Mini Player + + + Music Player + + + + + + - + +
+
+
@@ -56,8 +67,9 @@
+
{{ currentTrack.artist }}
-
{{ currentTrack.name }}
+
{{ currentTrack.name }}
{{ duration }}
@@ -66,12 +78,67 @@
{{ currentTime }}
-
+ + +
🔗 + + + + + + + + + + +
+ +

+ + + + + + + +
- - See on GitHub - + + + + + + + + +
+ + +
+ + + + - + + diff --git a/mp3/10.mp3 b/mp3/10.mp3 new file mode 100644 index 0000000..ca7391e Binary files /dev/null and b/mp3/10.mp3 differ diff --git a/mp3/11.mp3 b/mp3/11.mp3 new file mode 100644 index 0000000..60624ac Binary files /dev/null and b/mp3/11.mp3 differ diff --git a/mp3/12.mp3 b/mp3/12.mp3 new file mode 100644 index 0000000..4c4b4c6 Binary files /dev/null and b/mp3/12.mp3 differ diff --git a/mp3/13.mp3 b/mp3/13.mp3 new file mode 100644 index 0000000..8512767 Binary files /dev/null and b/mp3/13.mp3 differ diff --git a/mp3/14.mp3 b/mp3/14.mp3 new file mode 100644 index 0000000..4618708 Binary files /dev/null and b/mp3/14.mp3 differ diff --git a/mp3/15.mp3 b/mp3/15.mp3 new file mode 100644 index 0000000..b4aae6d Binary files /dev/null and b/mp3/15.mp3 differ diff --git a/mp3/16.mp3 b/mp3/16.mp3 new file mode 100644 index 0000000..d32419a Binary files /dev/null and b/mp3/16.mp3 differ diff --git a/mp3/17.mp3 b/mp3/17.mp3 new file mode 100644 index 0000000..951ab31 Binary files /dev/null and b/mp3/17.mp3 differ diff --git a/mp3/18.mp3 b/mp3/18.mp3 new file mode 100644 index 0000000..ca07b55 Binary files /dev/null and b/mp3/18.mp3 differ diff --git a/mp3/2.mp3 b/mp3/2.mp3 index 2871dce..ca4d226 100644 Binary files a/mp3/2.mp3 and b/mp3/2.mp3 differ diff --git a/mp3/20.mp3 b/mp3/20.mp3 new file mode 100644 index 0000000..f7fc8a6 Binary files /dev/null and b/mp3/20.mp3 differ diff --git a/mp3/21.mp3 b/mp3/21.mp3 new file mode 100644 index 0000000..4ba9548 Binary files /dev/null and b/mp3/21.mp3 differ diff --git a/mp3/22.mp3 b/mp3/22.mp3 new file mode 100644 index 0000000..24388b6 Binary files /dev/null and b/mp3/22.mp3 differ diff --git a/mp3/23.mp3 b/mp3/23.mp3 new file mode 100644 index 0000000..f1dd15c Binary files /dev/null and b/mp3/23.mp3 differ diff --git a/mp3/24.mp3 b/mp3/24.mp3 new file mode 100644 index 0000000..d84e8b9 Binary files /dev/null and b/mp3/24.mp3 differ diff --git a/mp3/25.mp3 b/mp3/25.mp3 new file mode 100644 index 0000000..9fd8d65 Binary files /dev/null and b/mp3/25.mp3 differ diff --git a/mp3/26.mp3 b/mp3/26.mp3 new file mode 100644 index 0000000..8016083 Binary files /dev/null and b/mp3/26.mp3 differ diff --git a/mp3/27.mp3 b/mp3/27.mp3 new file mode 100644 index 0000000..71aba4a Binary files /dev/null and b/mp3/27.mp3 differ diff --git a/mp3/28.mp3 b/mp3/28.mp3 new file mode 100644 index 0000000..c3e664f Binary files /dev/null and b/mp3/28.mp3 differ diff --git a/mp3/29.mp3 b/mp3/29.mp3 new file mode 100644 index 0000000..cdfba1a Binary files /dev/null and b/mp3/29.mp3 differ diff --git a/mp3/3.mp3 b/mp3/3.mp3 index 0695ce9..70f59c3 100644 Binary files a/mp3/3.mp3 and b/mp3/3.mp3 differ diff --git a/mp3/30.mp3 b/mp3/30.mp3 new file mode 100644 index 0000000..15b7afd Binary files /dev/null and b/mp3/30.mp3 differ diff --git a/mp3/31.mp3 b/mp3/31.mp3 new file mode 100644 index 0000000..2d624d2 Binary files /dev/null and b/mp3/31.mp3 differ diff --git a/mp3/32.mp3 b/mp3/32.mp3 new file mode 100644 index 0000000..c492686 Binary files /dev/null and b/mp3/32.mp3 differ diff --git a/mp3/4.mp3 b/mp3/4.mp3 index e39a48d..7157c82 100644 Binary files a/mp3/4.mp3 and b/mp3/4.mp3 differ diff --git a/mp3/5.mp3 b/mp3/5.mp3 index 1e093a7..44774f7 100644 Binary files a/mp3/5.mp3 and b/mp3/5.mp3 differ diff --git a/mp3/6.mp3 b/mp3/6.mp3 index 35f93d8..b818ade 100644 Binary files a/mp3/6.mp3 and b/mp3/6.mp3 differ diff --git a/mp3/7.mp3 b/mp3/7.mp3 index 54b9a10..cc07bfc 100644 Binary files a/mp3/7.mp3 and b/mp3/7.mp3 differ diff --git a/mp3/8.mp3 b/mp3/8.mp3 index fda1bb7..19b8fa5 100644 Binary files a/mp3/8.mp3 and b/mp3/8.mp3 differ diff --git a/mp3/9.mp3 b/mp3/9.mp3 index 620d7fd..3bae058 100644 Binary files a/mp3/9.mp3 and b/mp3/9.mp3 differ diff --git a/mp3/Notification.mp3 b/mp3/Notification.mp3 new file mode 100644 index 0000000..6b4b277 Binary files /dev/null and b/mp3/Notification.mp3 differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..3ce09f7 --- /dev/null +++ b/script.js @@ -0,0 +1,401 @@ +new Vue({ + el: "#app", + data() { + return { + audio: null, + circleLeft: null, + barWidth: null, + duration: null, + currentTime: null, + isTimerPlaying: false, + tracks: [ + + { + artist: "In The Meantime", + name: "Spacehog", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/9.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/20.mp3", + url: "https://youtu.be/PCsGRCf8T9Y", + favorited: false + }, + { + artist: "Life is a Highway", + name: "Rascal Flatts", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/11.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/28.mp3", + url: "https://youtu.be/5tXh_MfrMe0", + favorited: false + }, + { + artist: "On Our way", + name: "The Royal Concept", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/7.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/29.mp3", + url: "https://youtu.be/nWyhUoxAbYI", + favorited: false + }, + { + artist: "Play Hard", + name: "David Guetta , Ne-Yo , Akon", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/19.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/30.mp3", + url: "https://youtu.be/5dbEhBKGOtY", + favorited: false + }, + { + artist: "I Took A Pill In Ibiza (Seeb Remix)", + name: "Mike Ponser", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/14.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/31.mp3", + url: "https://youtu.be/foE1mO2yM04", + favorited: false + }, + { + artist: "OnlyFans", + name: "PRAYER , Yung Trench", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/9.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/24.mp3", + url: "https://youtu.be/rvkJjKll-zE", + favorited: false + }, + { + artist: "Harleys In Hawai", + name: "katy Perry", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/8.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/32.mp3", + url: "https://youtu.be/sQEgklEwhSo", + favorited: false + }, + { + artist: "Con La Birsa", + name: "Foudeqush , Ludwig Göransson", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/18.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/22.mp3", + url: "https://youtu.be/FSXcA0FPpbM", + favorited: false + }, + { + artist: "Payphone", + name: "Maroon 5 , Wiz Khalifa", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/1.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/7.mp3", + url: "https://youtu.be/KRaWnd3LJfs", + favorited: false + }, + + { + artist: "Circo Loco", + name: "Drake", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/2.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/12.mp3", + url: "https://youtu.be/jxILuhLm6hs", + favorited: false + }, + + + { + artist: "Burn Out", + name: "Martin Garrix", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/3.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/2.mp3", + url: "https://youtu.be/DylzGXE_ibU", + favorited: false + }, + + { + artist: "Scared To Be Lonely", + name: "Martin Garrix , Dua Lipa", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/4.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/5.mp3", + url: "https://youtu.be/e2vBLd5Egnk", + favorited: false + }, + { + artist: "Rain Over Me", + name: "Pitbull , Marc Anthony", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/5.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/6.mp3", + url: "https://youtu.be/SmM0653YvXU", + favorited: false + }, + + { + artist: " Unforgettable", + name: "French Montana", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/6.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/15.mp3", + url: "https://youtu.be/CTFtOOh47oo", + favorited: false + }, + { + artist: "Rich Flex", + name: "Drake, 21 Savage ", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/7.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/13.mp3", + url: "https://youtu.be/gOvNACDVXzI", + favorited: false + }, + { + artist: "Mekanın Sahibi", + name: "Norm Ender", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/8.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/1.mp3", + url: "https://www.youtube.com/watch?v=z3wAjJXbYzA", + favorited: false + }, + { + artist: "Toosie Slide", + name: "Drake", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/19.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/14.mp3", + url: "https://youtu.be/xWggTb45brM", + favorited: false + }, + { + artist: "Under The Influence", + name: "Chris Brown", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/10.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/16.mp3", + url: "https://youtu.be/LPnDCTqW7zw", + favorited: false + }, + { + artist: "Echo", + name: "Maroon 5 ", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/11.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/21.mp3", + url: "https://youtu.be/cOwlU2W3WiM", + favorited: false + }, + { + artist: "Nothing Breaks like a Heart", + name: "Mark Ronson, Miley Cyrus", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/8.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/23.mp3", + url: "https://youtu.be/A9hcJgtnm6Q", + favorited: false + }, + { + artist: "Goosebump", + name: "Travis Scott , Kendrick Lamar", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/12.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/18.mp3", + url: "https://youtu.be/Dst9gZkq1a8", + favorited: false + }, + { + artist: "Animals", + name: "Maroon 5", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/13.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/17.mp3", + url: "https://youtu.be/qpgTC9MDx1o", + favorited: false + }, + { + artist: "Party Monster", + name: "Weeknd", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/14.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/8.mp3", + url: "https://youtu.be/diW6jXhLE0E", + favorited: false + }, + { + artist: "Gimme More", + name: "Britney Spears", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/11.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/26.mp3", + url: "https://youtu.be/elueA2rofoo", + favorited: false + }, + { + artist: "To Ü", + name: "Shrillex & Diplo", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/15.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/9.mp3", + url: "https://youtu.be/9NwZdxiLvGo", + favorited: false + }, + + { + artist: "Right Night Feeling", + name: "Atthar", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/16.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/10.mp3", + url: "https://youtu.be/P8uqtTOXoYE", + favorited: false + }, + { + artist: "One Last Time", + name: "Daft Punk", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/10.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/25.mp3", + url: "https://youtu.be/FGBhQbmPwH8", + favorited: false + }, + { + artist: "Plane Jane", + name: "A$AP Ferg , Nicki Minaj", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/19.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/27.mp3", + url: "https://youtu.be/XDMGmtpvBjs", + favorited: false + }, + { + artist: "Blow your Mind", + name: "Dua Lipa", + cover: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/img/17.jpg", + source: "https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/11.mp3", + url: "https://youtu.be/1nydxbGhgv8", + favorited: false + }, + + + ], + currentTrack: null, + currentTrackIndex: 0, + transitionName: null + }; + }, + methods: { + play() { + if (this.audio.paused) { + this.audio.play(); + this.isTimerPlaying = true; + } else { + this.audio.pause(); + this.isTimerPlaying = false; + } + }, + generateTime() { + let width = (100 / this.audio.duration) * this.audio.currentTime; + this.barWidth = width + "%"; + this.circleLeft = width + "%"; + let durmin = Math.floor(this.audio.duration / 60); + let dursec = Math.floor(this.audio.duration - durmin * 60); + let curmin = Math.floor(this.audio.currentTime / 60); + let cursec = Math.floor(this.audio.currentTime - curmin * 60); + if (durmin < 10) { + durmin = "0" + durmin; + } + if (dursec < 10) { + dursec = "0" + dursec; + } + if (curmin < 10) { + curmin = "0" + curmin; + } + if (cursec < 10) { + cursec = "0" + cursec; + } + this.duration = durmin + ":" + dursec; + this.currentTime = curmin + ":" + cursec; + }, + updateBar(x) { + let progress = this.$refs.progress; + let maxduration = this.audio.duration; + let position = x - progress.offsetLeft; + let percentage = (100 * position) / progress.offsetWidth; + if (percentage > 100) { + percentage = 100; + } + if (percentage < 0) { + percentage = 0; + } + this.barWidth = percentage + "%"; + this.circleLeft = percentage + "%"; + this.audio.currentTime = (maxduration * percentage) / 100; + this.audio.play(); + }, + clickProgress(e) { + this.isTimerPlaying = true; + this.audio.pause(); + this.updateBar(e.pageX); + }, + prevTrack() { + this.transitionName = "scale-in"; + this.isShowCover = false; + if (this.currentTrackIndex > 0) { + this.currentTrackIndex--; + } else { + this.currentTrackIndex = this.tracks.length - 1; + } + this.currentTrack = this.tracks[this.currentTrackIndex]; + this.resetPlayer(); + }, + nextTrack() { + this.transitionName = "scale-out"; + this.isShowCover = false; + if (this.currentTrackIndex < this.tracks.length - 1) { + this.currentTrackIndex++; + } else { + this.currentTrackIndex = 0; + } + this.currentTrack = this.tracks[this.currentTrackIndex]; + this.resetPlayer(); + }, + resetPlayer() { + this.barWidth = 0; + this.circleLeft = 0; + this.audio.currentTime = 0; + this.audio.src = this.currentTrack.source; + setTimeout(() => { + if(this.isTimerPlaying) { + this.audio.play(); + } else { + this.audio.pause(); + } + }, 300); + }, + favorite() { + this.tracks[this.currentTrackIndex].favorited = !this.tracks[ + this.currentTrackIndex + ].favorited; + } + }, + created() { + let vm = this; + this.currentTrack = this.tracks[0]; + this.audio = new Audio(); + this.audio.src = this.currentTrack.source; + this.audio.ontimeupdate = function() { + vm.generateTime(); + }; + this.audio.onloadedmetadata = function() { + vm.generateTime(); + }; + this.audio.onended = function() { + vm.nextTrack(); + this.isTimerPlaying = true; + }; + + // this is optional (for preload covers) + for (let index = 0; index < this.tracks.length; index++) { + const element = this.tracks[index]; + let link = document.createElement('link'); + link.rel = "prefetch"; + link.href = element.cover; + link.as = "image" + document.head.appendChild(link) + } + } +}); + +async function setSleepTime() { + var audio = new Audio("https://raw.githubusercontent.com/R1SH4BH81/music.player/master/mp3/Notification.mp3"); + audio.volume = 0.5; + var playPromise = audio.play(); + if (playPromise !== undefined) { + await playPromise; + } + var sleepTimeSelect = document.getElementById("sleep-time"); + var selectedValue = sleepTimeSelect.value; + // Use selectedValue to set the sleep timer + + // Stop the song after the selected sleep time + setTimeout(function() { + location.reload(); + console.log("Song stopped after " + selectedValue + " mins"); + }, selectedValue * 60 * 1000); // Convert selectedValue from minutes to milliseconds + + alert("A Sleep timer has been set for " + selectedValue + " minutes"); +} + diff --git a/scripts/script.js b/scripts/script.js deleted file mode 100644 index 9649424..0000000 --- a/scripts/script.js +++ /dev/null @@ -1,211 +0,0 @@ -new Vue({ - el: "#app", - data() { - return { - audio: null, - circleLeft: null, - barWidth: null, - duration: null, - currentTime: null, - isTimerPlaying: false, - tracks: [ - { - name: "Mekanın Sahibi", - artist: "Norm Ender", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/1.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/1.mp3", - url: "https://www.youtube.com/watch?v=z3wAjJXbYzA", - favorited: false - }, - { - name: "Everybody Knows", - artist: "Leonard Cohen", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/2.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/2.mp3", - url: "https://www.youtube.com/watch?v=Lin-a2lTelg", - favorited: true - }, - { - name: "Extreme Ways", - artist: "Moby", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/3.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/3.mp3", - url: "https://www.youtube.com/watch?v=ICjyAe9S54c", - favorited: false - }, - { - name: "Butterflies", - artist: "Sia", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/4.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/4.mp3", - url: "https://www.youtube.com/watch?v=kYgGwWYOd9Y", - favorited: false - }, - { - name: "The Final Victory", - artist: "Haggard", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/5.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/5.mp3", - url: "https://www.youtube.com/watch?v=0WlpALnQdN8", - favorited: true - }, - { - name: "Genius ft. Sia, Diplo, Labrinth", - artist: "LSD", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/6.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/6.mp3", - url: "https://www.youtube.com/watch?v=HhoATZ1Imtw", - favorited: false - }, - { - name: "The Comeback Kid", - artist: "Lindi Ortega", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/7.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/7.mp3", - url: "https://www.youtube.com/watch?v=me6aoX0wCV8", - favorited: true - }, - { - name: "Overdose", - artist: "Grandson", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/8.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/8.mp3", - url: "https://www.youtube.com/watch?v=00-Rl3Jlx-o", - favorited: false - }, - { - name: "Rag'n'Bone Man", - artist: "Human", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/9.jpg", - source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/9.mp3", - url: "https://www.youtube.com/watch?v=L3wKzyIN1yk", - favorited: false - } - ], - currentTrack: null, - currentTrackIndex: 0, - transitionName: null - }; - }, - methods: { - play() { - if (this.audio.paused) { - this.audio.play(); - this.isTimerPlaying = true; - } else { - this.audio.pause(); - this.isTimerPlaying = false; - } - }, - generateTime() { - let width = (100 / this.audio.duration) * this.audio.currentTime; - this.barWidth = width + "%"; - this.circleLeft = width + "%"; - let durmin = Math.floor(this.audio.duration / 60); - let dursec = Math.floor(this.audio.duration - durmin * 60); - let curmin = Math.floor(this.audio.currentTime / 60); - let cursec = Math.floor(this.audio.currentTime - curmin * 60); - if (durmin < 10) { - durmin = "0" + durmin; - } - if (dursec < 10) { - dursec = "0" + dursec; - } - if (curmin < 10) { - curmin = "0" + curmin; - } - if (cursec < 10) { - cursec = "0" + cursec; - } - this.duration = durmin + ":" + dursec; - this.currentTime = curmin + ":" + cursec; - }, - updateBar(x) { - let progress = this.$refs.progress; - let maxduration = this.audio.duration; - let position = x - progress.offsetLeft; - let percentage = (100 * position) / progress.offsetWidth; - if (percentage > 100) { - percentage = 100; - } - if (percentage < 0) { - percentage = 0; - } - this.barWidth = percentage + "%"; - this.circleLeft = percentage + "%"; - this.audio.currentTime = (maxduration * percentage) / 100; - this.audio.play(); - }, - clickProgress(e) { - this.isTimerPlaying = true; - this.audio.pause(); - this.updateBar(e.pageX); - }, - prevTrack() { - this.transitionName = "scale-in"; - this.isShowCover = false; - if (this.currentTrackIndex > 0) { - this.currentTrackIndex--; - } else { - this.currentTrackIndex = this.tracks.length - 1; - } - this.currentTrack = this.tracks[this.currentTrackIndex]; - this.resetPlayer(); - }, - nextTrack() { - this.transitionName = "scale-out"; - this.isShowCover = false; - if (this.currentTrackIndex < this.tracks.length - 1) { - this.currentTrackIndex++; - } else { - this.currentTrackIndex = 0; - } - this.currentTrack = this.tracks[this.currentTrackIndex]; - this.resetPlayer(); - }, - resetPlayer() { - this.barWidth = 0; - this.circleLeft = 0; - this.audio.currentTime = 0; - this.audio.src = this.currentTrack.source; - setTimeout(() => { - if(this.isTimerPlaying) { - this.audio.play(); - } else { - this.audio.pause(); - } - }, 300); - }, - favorite() { - this.tracks[this.currentTrackIndex].favorited = !this.tracks[ - this.currentTrackIndex - ].favorited; - } - }, - created() { - let vm = this; - this.currentTrack = this.tracks[0]; - this.audio = new Audio(); - this.audio.src = this.currentTrack.source; - this.audio.ontimeupdate = function() { - vm.generateTime(); - }; - this.audio.onloadedmetadata = function() { - vm.generateTime(); - }; - this.audio.onended = function() { - vm.nextTrack(); - this.isTimerPlaying = true; - }; - - // this is optional (for preload covers) - for (let index = 0; index < this.tracks.length; index++) { - const element = this.tracks[index]; - let link = document.createElement('link'); - link.rel = "prefetch"; - link.href = element.cover; - link.as = "image" - document.head.appendChild(link) - } - } -});