<!doctype html>
<html>
  <head>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>🌟 Valde 30 🌟</title>
    <style>
      html, body {
        padding : 0;
        margin : 0;
        width : 100%;
        height : 100%;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      body div {
        font-size : 2.88em;  
        color : #aa2211;
      }

      #play {
        height: 180px;
        width: 180px;
        border-radius: 100%;
        text-align: center;
        line-height: 180px;
        font-size: 100px;
        cursor: pointer;
        transition: background-color 0.4s, color 0.4s;
        box-shadow: 0 0 10px rgba(0,0,0,0.6);
        background-position: center center;
        background-repeat: no-repeat;   
      }

      #play.paused {
        background-color: #efefef;
        color: #121212;
        background-image: url('/static/images/play.svg');
        background-position: 58% 54%;
      }

      #play.playing {
        background-color: #121212;
        color: #efefef;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>🌟 Valde 30 🌟</h2>
    </div>
    <div>
      <div id="play" class="paused"></div>
    </div>
    <script src="static/js/lib/socket.io.js"></script>
    <script src="static/js/lib/Tone.js"></script>
    <script type="module" src="static/js/main.js"></script>
    <script>
      // Random colours
      let hexString = "0123456789abcdef";

      let randomColor = () => {
        let hexCode = "#";
        for( i=0; i<6; i++){
          hexCode += hexString[Math.floor(Math.random() * hexString.length)];
        }
        return hexCode;
      }

      let generateGrad = () => {
        let colorOne = randomColor();
        let colorTwo = randomColor();
        let angle = Math.floor(Math.random() * 360);
        document.body.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
      }

      generateGrad()
    </script>
  </body>
</html>
