Music player

dabblet.css

/**
 * Music player
 */
html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    
    font-family: sans-serif;
    font-weight: bold;
    user-select: none;
}
body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#holder{
    position: fixed;
    margin: auto;
    overflow: hidden;
    height: 100%;
    width: 100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: radial-gradient(gray, black);

}
#bigMenu{
    position: fixed;
    margin: auto;
    overflow: hidden;
    height: 100%;
    width: 100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: radial-gradient(gray, black);
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease;
}

#menuItems{
    position: fixed;
    margin: auto;
    overflow: hidden;
    height: 80%;
    width: 60%;
    border-radius: 0.5rem;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: teal;
}
#menuExit{
    color: red;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    position: absolute;
    margin: auto;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    border: 1px solid white;
    top: 0;
    bottom: 0;
    right:0;
    left: 0;
    padding-top: 0.08rem;
    cursor: pointer;
}
#app{
    position: absolute;
    background-color: black;
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow: hidden;
    top:0;
    bottom:0;
    left:0;
    right:0;
    box-shadow: 0.25rem 0.25rem 1rem black ;
    visibility: visible;
    opacity: 1;
    transition: all 0.25s ease;
}
#divPicture{
    color: transparent;
    position: absolute;
    margin: auto;
    background: url(whofront.jpg) no-repeat bottom;
    background-size: contain;
    height: 79%;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}
#controls{
    position: absolute;
    width: 100%;
    height: 19%;
    bottom:0;
    opacity: 0;
}
#menu{
    color: black;
    text-shadow: 0 0.5px 0 white;
    background: linear-gradient(white, lightgray);
    border-bottom: 1px solid rgb(66,133,244);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    position: absolute;
    width: 100%;
    /*height: 40px;*/
    height: 33px;    
    overflow: hidden;
    text-align: center;
    bottom: 100px;
    font-size: 1.1rem;
    font-weight: bold;
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    cursor: pointer;
}

#player{
    position: absolute;
    width: 100%;
}
#chooser{
    position: absolute;
    display: inline-block;
    border-top: 1px solid rgb(66,133,244);    
    width: 100%;
    /*height: 40px;*/
    height: 35px;    
    overflow: hidden;
    text-align: center;
    bottom: 0;
    cursor: pointer;    
}
option{
    text-align: center;
    color: white;
    background: black;
}


#divEventInfo{
    position: absolute;
    height: 5%;
    width: 40%;
    padding-left: 29.72222%; 
    margin: auto;
    top: 1.5%;
    left:0;
    right:0;
    text-align: left;
    background: url(YourMusic.png) no-repeat center;
    background-size: contain;
    color: transparent;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 4;
}
.fullSize{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow: hidden;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: black;
    opacity: 0.2;
}
#divLargePicture{
    transition: all 1s ease;
    opacity: 0;
    visibility: hidden;
    background: url(whofront.jpg) no-repeat center;
    background-size: cover;
}
#splash2{
    transition: all 2.5s ease;
    opacity: 0;
    visibility: hidden;
    background-color: black;
    background: url(YourMusic.png) no-repeat center;
    background-size: contain;    
}
#splash1{
    transition: all 2.5s ease;
    height: 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    background-color: black;
    background: url(FlashingIpod.gif) no-repeat center;
    background-size: cover;    
}
.arrow{
    display: inline-block;
}
#leftArrow{
    transform: rotateY(180deg);
}

dabblet.html

<!doctype html>
<html id="root" lang="en">
    <head>
        <script src="client.js"></script>        
        <title>Music App</title>
        <meta charset="utf-8">
        <meta name="viewport" 
            content="width=device-width
            initial-scale=1
            maximum-scale=1
            minimum-scale=1
            user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" >  
        <script src="L.js"></script>        
        <link rel="stylesheet" href="app.css">
        <script src="prefixfree.js"></script>
        <script src="a2.js"></script>
    </head>
    <body id="body">
        <div id="holder">
            <div id="divEventInfo"></div>             
            <div id="app">
                <div id="divPicture"></div>
                <div id="controls">
                    <div id="menu">&#x022EE;&#9776;&#x022EE;</div>
                    <audio controls
                        id="player" 
                        src="https://sabbakilam.github.io/music/The Who - Eminence Front.mp3">
                    </audio>                      
                    <select id="chooser">
                    <option>&#x0266A; Choose a Song &#x02935;</option>
                        <option>1st Song</option>
                        <option>2nd Song</option>
                        <option>3rd Song</option>
                        <option>4th Song</option>
                        <option>5th Song</option>
                    </select><br>
                </div>
                <div class="fullSize" id="splash2"></div>
                <div class="fullSize" id="splash1"></div>    
            </div><!--| END of app div |-->
            
            <div class="fullSize" id="divLargePicture"></div>

        <div id="bigMenu">
  
            <div id="menuItems">
                <div id="menuExit">&#x02717;</div><!---->                
            </div>
        </div>
        </div><!--| END of holder div |-->

    <script src="app.js"></script>    
    </body>
</html>

dabblet.js

//alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}