Skip to content

Commit

Permalink
Desktop compatibility build
Browse files Browse the repository at this point in the history
  • Loading branch information
@realpxd
realpxd authored Nov 25, 2022
1 parent 32a1358 commit 35402cc
Show file tree
Hide file tree
Showing 4 changed files with 388 additions and 350 deletions.
358 changes: 8 additions & 350 deletions Musics/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
<html>
<head>
<title>SAD MUSIC PLAYLIST</title>
<!-- Styles -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<!-- Data Aos -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css">
<!-- icons -->
Expand Down Expand Up @@ -36,201 +39,7 @@
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
</head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body{ color:white;
background-image:url('./assets/img/Bg4.jpg');
background-repeat:no-repeat;
background-size:cover;
background:#212623;
}
html{
overflow:hidden;
scroll-behavior:smooth;
}
.h1{
text-align:center;
position:absolute;
margin-left:22%;
margin-right:auto;
margin-top:-7.4%;
font-family: 'Bebas Neue', cursive;
font-size:16pt;
letter-spacing:1px;
box-shadow:inset 0 2px 8px black;
padding:1% 1% 0 1%;
backdrop-filter:brightness(80%);
z-index:3;
}
.mq1{
margin-top:40%;
position:absolute;
}
.animeImg{
height:300px;
width:200px;
left:-111%;
filter:brightness(60%);
bottom:0;
position:absolute;
z-index:;
overflow:hidden;
}
.folder{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
height:90vh;
width:70vw;
backdrop-filter:brightness(70%);
box-shadow:inset 0 0 10px black;
border-radius:10px;
margin-left:auto;
margin-right:auto;
margin-top:5vh;
overflow-x:scroll;
/* box-shadow:0 0 50px grey;*/
z-index:1;
}
.blocks{
height:18vh;
width:55vw;
box-shadow:0 0 0px grey;
border-radius:5%;
margin-left:auto;
margin-right:auto;
margin-top:5vh;
color:white;
}
.blocks:active{
animation:multiColor 1.5s linear infinite alternate-reverse;
}
@keyframes multiColor{
0%{box-shadow:0 0 10px white;}
25%{box-shadow:0 0 10px blue;}
50%{box-shadow:0 0 10px gold;}
75%{box-shadow:0 0 10px red;}
100%{box-shadow:0 0 10px orange;}
}
.blocks img{
width:100%;
height:18vh;
z-index:2;
border-radius:5px;
}
.blocks .controls progress{
width:90%;
height:2vh;
transition: 0.25s;
}
.blocks .aud{
width:100%;
}
.blocks .controls{
align-items:center;
text-align:center;
margin-top:-24.5%;
backdrop-filter:blur(2px);
box-shadow:0 -10px 20px black;
padding-bottom:3%;
z-index:1;
position:absolute;
width:55vw;
border-radius:5px;
}
.blocks .controls p{
font-size:8pt;
font-weight:1000;
text-align:left;
padding-left:5%;
text-shadow:0 0 10px red;
margin-bottom:-1%;
}
.blocks .controls .pp{
display:flex;
justify-content:space-around;
width:80px;
margin-left:auto;
margin-right:auto;
}
.blocks .controls .pp .fa-play{
background:none;
outline:none;
border:none;
color:white;
}
.blocks .controls .pp .fa-pause{
background:none;
outline:none;
border:none;
color:white;
}
.blocks .controls .pp .fa-play:hover{
text-shadow:0 0 10px black;
}
.blocks .controls .pp .fa-pause:hover{
text-shadow:0 0 10px black;
}
.blank{
padding:10%;
font-weight:900;
letter-spacing:2px;
}
.preloader{
height:100vh;
width:80vw;
text-align:center;
background:#212623;
padding:10%;
transition:ease-out 3s;
position:absolute;
z-index:1;
top:20%;
left:0;
overflow:hidden;
}
.preloader p{
letter-spacing:0.1rem;
}
.loader{
text-align:center;
height:20%;
width:20%;
margin-left:40%;
border-right:5px solid white;
border-radius:50%;
animation:loaderSpin 1.3s ease-in 0.1s infinite;
backdrop-filter:brightness(80%);
}
@keyframes loaderSpin{
from{transform:rotate(0);}
to{transform:rotate(3600deg);}
}
.slide{
width:90%;
background:white;
height:1.1vh;
margin-left:auto;
margin-right:auto;
margin:2% auto 3% auto;
border-radius:10px;
}
#range{
width:0;
background:orange;
height:1vh;
border:0.1px solid white;
border-radius:10px;
}
@media screen and (min-width:600px){
.blocks{
height:35vh;
width:40vw;
}
.blocks img{
width:100%;
height:35vh;
}
}

</style>
<body>
<div id="screen">
Expand Down Expand Up @@ -376,166 +185,15 @@
<i onclick = "pause8()" class="fa fa-pause"></i>
</div>
</div>
</div><br> <div class="blank">.......</div>
</div><br>
</div></div>
<div class="preloader">
<h2> Site under contruction and may have bugs! </h2>
<h1> Site under contruction and may have bugs! </h1>
<h1> ⚠ </h1>
<div class="loader">.</div>
<p>Processing my Playlist..</p>
<h2>Processing my Playlist..</h2>
</div>
<script>
var i = 0;
var m = document.getElementsByClassName("aud");

const music1 = document.getElementById("player1");
const music2 = document.getElementById("player2");
const music3 = document.getElementById("player3");
const music4 = document.getElementById("player4");
const music5 = document.getElementById("player5");
const music6 = document.getElementById("player6");
const music7 = document.getElementById("player7");
const music8 = document.getElementById("player8");

var player1 = document.getElementById("player1");
var player2 = document.getElementById("player2");
var player3 = document.getElementById("player3");
var player4 = document.getElementById("player4");
var player5 = document.getElementById("player5");
var player6 = document.getElementById("player6");
var player7 = document.getElementById("player7");
var player8 = document.getElementById("player8");

var hl = document.getElementsByClassName("blocks");
/*
const playBtn = $(".fa-play");
const pauseBtn = $(".fa-pause");
/* if () {
playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");
} else {
playBtn.classList.remove("fa-pause");
playBtn.classList.add("fa-play");
}
playBtn.show(); pauseBtn.hide();*/
function starts1(){
// if(i = 0, i < 6, i++){m[i].pause();};
do{i++; m[0].pause(); m[1].pause(); m[2].pause(); m[3].pause(); m[4].pause(); m[5].pause(); m[6].pause(); m[7].pause();}while(i < 10);
// else(m.pause());
music1.play();
player1.addEventListener("timeupdate", function() {
var currentTime = player1.currentTime;
var duration = player1.duration;
$('.range1').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});}
function pause1(){
music1.pause();
}

function starts2(){
do{i++; m[0].pause(); m[1].pause(); m[2].pause(); m[3].pause(); m[4].pause(); m[5].pause(); m[6].pause(); m[7].pause();}while(i < 10);
music2.play();
player2.addEventListener("timeupdate", function() {
var currentTime = player2.currentTime;
var duration = player2.duration;
$('.range2').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});}
function pause2(){
music2.pause();
}

function starts3(){
do{i++; m[0].pause(); m[1].pause(); m[2].pause(); m[3].pause(); m[4].pause(); m[5].pause(); m[6].pause(); m[7].pause();}while(i < 10);
music3.play();
player3.addEventListener("timeupdate", function() {
var currentTime = player3.currentTime;
var duration = player3.duration;
$('.range3').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});}
function pause3(){
music3.pause();
}

function starts4(){
do{i++; m[0].pause(); m[1].pause(); m[2].pause(); m[3].pause(); m[4].pause(); m[5].pause(); m[6].pause(); m[7].pause();}while(i < 10);
music4.play();
player4.addEventListener("timeupdate", function() {
var currentTime = player4.currentTime;
var duration = player4.duration;
$('.range4').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});}
function pause4(){
music4.pause();
}

function starts5(){
do{i++; m[0].pause(); m[1].pause(); m[2].pause(); m[3].pause(); m[4].pause(); m[5].pause(); m[6].pause(); m[7].pause();}while(i < 10);
music5.play();
player5.addEventListener("timeupdate", function() {
var currentTime = player5.currentTime;
var duration = player5.duration;
$('.range5').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});}
function pause5(){
music5.pause();
}

function starts6(){
do{i++; m[0].pause(); m[1].pause(); m[2].pause(); m[3].pause(); m[4].pause(); m[5].pause(); m[6].pause(); m[7].pause();}while(i < 10);
music6.play();
player6.addEventListener("timeupdate", function() {
var currentTime = player6.currentTime;
var duration = player6.duration;
$('.range6').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});}
function pause6(){
music6.pause();
}

function starts7(){
do{i++; m[0].pause(); m[1].pause(); m[2].pause(); m[3].pause(); m[4].pause(); m[5].pause(); m[6].pause(); m[7].pause();}while(i < 10);
music7.play();
player7.addEventListener("timeupdate", function() {
var currentTime = player7.currentTime;
var duration = player7.duration;
$('.range7').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});}
function pause7(){
music7.pause();
}

function starts8(){
do{i++; m[0].pause(); m[1].pause(); m[2].pause(); m[3].pause(); m[4].pause(); m[5].pause(); m[6].pause(); m[7].pause();}while(i < 10);
music8.play();
player8.addEventListener("timeupdate", function() {
var currentTime = player8.currentTime;
var duration = player8.duration;
$('.range8').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});
}
function pause8(){
music8.pause();
}

var screen = $('#screen');
screen.hide();
$(window).on("load", function() {
var preload = $('.preloader');
preload.fadeOut();
setInterval(function(){screen.show();},800);
});


/*var player = document.getElementsByClassName("aud");
if(i = 0, i < 7 ,i++){
player[1].addEventListener("timeupdate", function() {
var currentTime = player[1].currentTime;
var duration = player[1].duration;
$('.hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
})};*/


</script>
<script src="scripts.js"></script>
<!--<script>
const audioPlayer = document.querySelector(".controls");
const audio = new Audio("./assets/songs/Hope.mp3");
Expand Down
Loading

0 comments on commit 35402cc

Please sign in to comment.