Dezippes le fichiers index.html qui se trouve dans "ZspinShmupBox\Media\Main Menu\Themes".
Voici l'index modifié :
Code : Tout sélectionner
<!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: 3;
}
#vid_encart {
position: absolute;
top: 10.2vh;
left: 10.2vh;
width: 34.9vh;
z-index: 1;
}
.doorG {
position: absolute;
top: 9vh;
left: 9.2vh;
width: 19vh;
z-index: 2;
}
.doorD {
position: absolute;
top: 9vh;
left: 28vh;
width: 19vh;
transform : rotate(180deg);
z-index: 2;
}
.myChartDiv {
position: absolute;
width: 30vh;
top: 63vh;
left: 6vh;
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: 4;
}
.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: 4;
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">
<img src="door.jpg" class="doorG slideOutLeft animated" style="animation-delay: 700ms;">
<img src="door.jpg" class="doorD slideOutRight animated" style="animation-delay: 700ms;">
<div class='zspin-difficulty'></div>
<div class='zspin-visibility'></div>
<div class='zspin-speed'></div>
<div class="myChartDiv"style="position: absolute; height:5vh; width:15vh"><canvas id="myChart"></canvas></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 src="Chart.min.js"></script>
<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">
function putChart() {
var diff = parseInt($('.zspin-difficulty').text());
var visi = parseInt($('.zspin-visibility').text());
var speed = parseInt($('.zspin-speed').text());
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "polarArea",
options: {
scale:{
display : false,
},
legend: {
display: false,
}
},
data: {
labels: ["Visibilité", "Rapidité", "difficulté"],
datasets: [{
label: "My First Dataset",
data: [visi, speed, diff],
borderWidth: "0",
borderColor: "rgb(0,0,0)",
backgroundColor:[
"rgb(0,0,204)",
"rgb(0,204,0)",
"rgb(255,128,0)"
]
}
]
}
});
}
setTimeout(function(){ putChart();}, 1000);
</script>
</body>
</html>
Pour l'intitulé des valeurs, c'est directment mis dans le graphisme background.png du fichier zip