
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <header name = "Access-Control-Allow-Origin" value = "*"> 
	<title>Otome Audio Player</title>
	<style>
	body {
         background: rgb(200,120,180);
         font-family: 'Lalezar', cursive;
       }

      canvas {
        box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        background: black;
        position: relative;
          margin-left: 20px;
          margin-top: 10px;
        }
        
        h2{
            padding: 0px;
            margin-right: 20px;
            font-size: 25px;
            display: contents;
        }
        
     button {
      background-color: lightpink;
      border-radius: 5px;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 15px 2px;
      cursor: pointer;
    }
        
        
        hr {
            border: 2px dotted pink;
        }
        
      
      #controls{
        box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        padding: 20px;
        float: right;
        position: static;
        max-width: 30%;
        max-height: 40%;
        font-size: 19px;
        color: pink;
        background-color: rgb(130,30,114);
        margin-right: 100px;
        margin-top: 10px;
       }
        
        label{
            font-family: 'Lato', sans-serif;
            display: inline-block;
            padding: 7px;
            font-size: 18px;
            
        }
        
        .special-effects-section{
            display: grid;
        }
        
	</style>
    <link href="https://fonts.googleapis.com/css?family=Lalezar" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="../js/otomedream.js" type="text/javascript"></script>
</head>


<body>
    <img id="heart" alt="heartimage" src="../media/heart.png" hidden>
    <canvas id="canvas" width="1100" height="800"></canvas>
      
	<div id="controls">
        
        <div style="font-size: 17px; font-family: 'Lato', sans-serif;">
            <h2>Welcome Prince/Princess. </h2><p></p>Enjoy your stay.  Click the Canvas to Add Hearts~
        </div>

                                           
        <button onclick="removeHearts()">Remove Hearts</button>
        <br>
        
        <hr> 
   
		<h2>Track Selection:</h2>
			<select id="trackSelect" >
                <option value=""></option>
                <option value="../media/muscledance.mp4">Muscle dance</option>
				<option value="../media/magesong.mp4">Mage Nanashiro Song</option>
				<option value="../media/crazyforyou.mp4">Crazy for You Song</option>
			</select>
        
        <br>
        
        <h2>Happy Message:  </h2> 
            <select id="text">
                <option value="Welcome Babe of the Bishies">Welcome</option>
                <option value="I'll Protect You!">I'll Protect You!</option>
                <option value="This is my Hasubando desu">This is My....</option>
                <option value="I believe in you!">Kimi wo shinjiteru</option>
                <option value="I'm eating a large vegetable">Ooki yasai wo tabete iru</option>
                <option value="What? You're giving me that?!">Wha- Really?</option>
                <option value="Let me take you away, Princess">Ubatte yaru</option>
                <option value="Why did I make this...">Naze konna mono tsukuttan?</option>
                <option value="You are the one I love the most">The one</option>
                <option value="Treat me gently...">Please...</option>              
                <option value="Cucumbers and Soda">My diet</option>
            </select>
            
        <hr>
        <h2>Special Effects:  </h2>
            
        <div class="special-effects-section">
            
        <span>
        <input type="checkbox" id="myCheckboxInvert">
        <label for="myCheckboxInvert">Invert Color </label>
        </span>

        <span>
        <input type="checkbox" id="myCheckboxLine">
        <label for="myCheckboxLine">Line</label>
        </span>
            
        <span> 
        <input type="checkbox" id="myCheckboxNoise">
        <label for="myCheckboxNoise">Noise</label>
        </span>
            
        <span>
        <input type="checkbox" id="bars" checked>
        <label for="bars">Audio Bars</label>
        </span>
            
        <span>
        <input type="checkbox" id="snow">
        <label for="snow">Sparkle</label>
        </span>

        <span>
        <input type="checkbox" id="curves">
        <label for="curves">Curves</label>
        </span>
    
        <span>
        <input type="checkbox" id="wave">
        <label for="wave">Wave Lines</label>
        </span>
        
        <span>
        <input type="checkbox" id="waveform">
        <label for="waveform">Waveform</label>
        </span>
            
        <span>
        <input type="checkbox" id="tintrainbow" checked>
        <label for="tintrainbow">Rainbow</label>
        </span>
            
        <span>
        <input type="checkbox" id="zoomin">
        <label for="zoomin">Scale Video:</label>
        <input id="zoominslider" min="0.9" max="1.1" step="0.1" value="1" type="range">
        </span>
            
        <span>
        <label for="slider1">Sparkle Size:</label>
        <input id="slider1" min="5" max="15" step="1.0" value="10" type="range">
        <span id="sliderResults"></span>
        </span>
        
            
        </div>
        
        <hr>
    
		<p id="status"></p>
                
        Audio Controls:  
        
		<audio controls></audio>
        <p>Video Control: 
    <video autoplay controls id="video" height="400" width="550" muted>
        <source type="video/mp4">
    </video>

	</div>
</body>
</html>
