Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Theme default pour Zspin</title>
  <meta name="coder avec le cul" content="un code aproximatif">
  <link rel="stylesheet" href="animate.css">
  <style type="text/css">


 html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      overflow: hidden;

    }


#bg_biloon {
      position: absolute;
      top: 0%;
      left: 0%;
      width: auto;
      height: 100%;
      z-index: 2;
}

  #vid_encart {
      position: absolute;
      top: 10.2vh;
      left: 10.2vh;
      width: 34.9vh;
      z-index: 1;
}
.myChartDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
}
.logo {
      position: absolute;
      transform-origin: center;
      top: 82vh;
      left: 35vh;
      max-width: 8hv;
      max-height: 8vh;
      z-index: 5;
    }


.year {
       position: absolute;
       top: 82.3vh;
       left: 26.6vh;
       z-index: 3;
       font-family: "alienleague";
       color: #F8F8FF;
       font-size: 1.7vh;
       background: transparent;
       text-align: center;
       text-transform: uppercase;
}
.player {
       position: absolute;
       top: 84.6vh;
       left: 24.4vh;
       z-index: 3;
       font-family: "alienleague";
       color: #FF0000;
       font-size: 1.5vh;
       background: transparent;
       text-align: center;
       text-transform: uppercase;
}
.leveltitre {
       position: absolute;
       top: 86.5vh;
       left: 24.7vh;
       z-index: 3;
       font-family: "alienleague";
       color: #87CEFA;
       font-size: 3vh;
       background: transparent;
       text-align: center;
       text-transform: uppercase;
}
.level {
       position: absolute;
       top: 90vh;
       left: 24vh;
       max-width: 8vh;
       z-index: 3;
}
.wheel {

      position: absolute;
      top: 64vh;
      left: 22vh;
      max-width: 26vh;
      max-height: 11vh;
      width: auto;
      z-index: 4;
}
.bouton-g {

      position: absolute;
      top: 11.7vh;
      left: 3vh;
      height: 2.5vh;
      width: auto;
      z-index: 4;
}
.bouton-d {

      position: absolute;
      top: 11.9vh;
      left: 50.34vh;
      height: 2.5vh;
      width: auto;
      z-index: 4;
}
/**HYDRIS DEBUT******/
.info_jeux_description {
      position: absolute;
      top: 81vh;
      left: 7.2vh;
      width: 15vh;
      height: 7vh;
      font-family: "alienleague";
      color: #F8F8FF;
      padding: 0px 0px 0px 0px;
      line-height: 1vh;
      font-size: 1vh;
      background: transparent;
      text-align: left;
      z-index: 3;

    }

    .info_jeux_description .scrollauto {
        overflow: hidden;
      height: 8vh;
      font-family: "arial";
      line-height: 0.8vh;
      font-size: 0.7vh;
      margin: 1;
      padding: 0;
    }
    /**HYDRIS FIN******/

.info_nom1 {
      position: absolute;
      top: 76.8vh;
      left: 20vh;
      width: 30vh;
      height: 25vh;
      font-family: "alienleague";
      color: #F8F8FF;
      padding: 0px 0px 0px 0px;
      line-height: 1.3 vh;
      font-size: 1.3vh;
      background: transparent;
      text-align: center;
      z-index: 3;
      overflow: hidden;
    }

.zspin_d {
      text-transform: uppercase;
    }

</style>


</head>

<body>

  <video id="vid_encart" src="Video.mp4" loop="loop" autoplay="autoplay"></video>
  <img src="background.png" id="bg_biloon">
  <img src="Artwork1.png" class="wheel">
  <img zspin-src="Other/Systems/%systems%.png" class="logo">
  <img zspin-src="Other/Level/%level%.png" class="level">
  <img src="BoutonG.png" class="bouton-g pulse animated infinite">
  <img src="BoutonD.png" class="bouton-d pulse animated infinite">

<div class="myChartDiv"><canvas id="myChart" width="600" height="400"></canvas></div>
<div class="speed zspin-speed"></div>
<div class="year zspin-year zspin_d"></div>
<div class="player zspin-players zspin_d"></div>
<div class="leveltitre">LEVEL</div>
<div class="info_nom1"><div class="zspin-description zspin_d"></div></div>
<div class="info_jeux_description">SYNOPSIS</br>
<p class="scrollauto zspin-synopsis">


<script>
function autoscroll(){
  $(".scrollauto").animate({scrollTop: $(".scrollauto")[0].scrollHeight},30000, function() {
    // Animation complete.
        $(this).animate({scrollTop: $(".scrollauto")[0].scrollHeight-$(".scrollauto")[0].scrollHeight},1000
        , function() {
          autoscroll();
        });

  });
}
setTimeout(function(){ autoscroll();}, 1000);
</script>


<script type="text/javascript">
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx,{
"type":"doughnut",
  "data":{"labels":["Visibilité","Graphisme","Rapidité","Bande-son"],
 "datasets":[{"label":"My First Dataset",
 "data":[17,50,25,50],
 "backgroundColor":["rgb(233,76,59)",
 "rgb(54,152,221)","rgb(242,195,19)","rgb(24,189,155)"

    ]}
  ]}
});
</script>
</body>

</html>