forked from rebillar/site-accueil-insa
prototype com ville
This commit is contained in:
Guillaume Joffre
parent
9c5d8b943d
commit
49679bdde7
1 changed files with 174 additions and 0 deletions
174
admin/prototype_com_ville.php
Normal file
174
admin/prototype_com_ville.php
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.cmv-progress {
|
||||||
|
color: white;
|
||||||
|
min-height: 200px;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5.cmv-title {
|
||||||
|
font-size: 1.1em;
|
||||||
|
padding: 1em 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-container {
|
||||||
|
display:flex;
|
||||||
|
position:relative;
|
||||||
|
width:90%;
|
||||||
|
margin:auto;
|
||||||
|
height:100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-step {
|
||||||
|
position: relative;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background-color: #ccc;
|
||||||
|
color: black;
|
||||||
|
z-index: 5;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-step.fait, .cmv-step.active {
|
||||||
|
background-color: #06a6b7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-step.active:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
background-color: white;
|
||||||
|
margin: 15%;
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: -15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-way {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-way.fait:before {
|
||||||
|
background-color: #06a6b7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-way:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 120%; height: 1px;
|
||||||
|
margin-left: -10%;
|
||||||
|
margin-top: 17px;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-fixed:before {
|
||||||
|
content: "";
|
||||||
|
width:1px; height: 7px;
|
||||||
|
background-color: white;
|
||||||
|
position: absolute;
|
||||||
|
top:42px;
|
||||||
|
left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-fixed {
|
||||||
|
color: white;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cmv-relative {
|
||||||
|
content: "52m";
|
||||||
|
position: absolute;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="cmv-progress">
|
||||||
|
|
||||||
|
<h5 id="cmv-title" class="cmv-title">Equipe 1-1</h5>
|
||||||
|
|
||||||
|
<div class="cmv-container">
|
||||||
|
|
||||||
|
<?php
|
||||||
|
|
||||||
|
/** Pour une équipe donnée */
|
||||||
|
|
||||||
|
/** $depart : Le point de départ de cette équipe */
|
||||||
|
$depart = 4;
|
||||||
|
|
||||||
|
/** $etape : À quelle étape en est cette équipe */
|
||||||
|
$etape = 5;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** $i va de 1 à 17 (inclus), 17 étant le nombre d'étapes */
|
||||||
|
for ($i = 1; $i <= 17; $i++) {
|
||||||
|
|
||||||
|
/** $node : Le numéro dans la node à l'emplacement $i
|
||||||
|
* exemple : si une équipe commence au point 7 alors la première node ($i = 1)
|
||||||
|
* va contenir $node = 7 À UTILISER POUR LES TEMPS ! */
|
||||||
|
$node = ($i + $depart - 2) % 17 + 1;
|
||||||
|
|
||||||
|
/** $current : À quel index est placé la node correspondante à l'$etape
|
||||||
|
* exemple : une équipe qui commence au point 17 en est au point 3,
|
||||||
|
* elle est donc affichée comme étant au niveau de la node d'index 4 ($i = 4)
|
||||||
|
* puisque de gauche à droite les premières nodes sont 17 - 1 - 2 - 3 */
|
||||||
|
$current = $etape - $depart + 1;
|
||||||
|
if ($current < 0) {
|
||||||
|
$current = $current + 17;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Si le point $i a été fait (fait), est en train d'être fait (actuel), ou n'a pas encore été atteint */
|
||||||
|
$state = '';
|
||||||
|
if ($i < $current) {
|
||||||
|
$state = ' fait';
|
||||||
|
} elseif ($i === $current) {
|
||||||
|
$state = ' active';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
echo '<div class="cmv-step'.$state.'">';
|
||||||
|
echo $node;
|
||||||
|
|
||||||
|
if ($i <= $current) {
|
||||||
|
// --:-- doit être remplacé par l'heure à laquelle le point $node a été atteint
|
||||||
|
echo '<div class="cmv-fixed">--:--</div>';
|
||||||
|
}
|
||||||
|
echo '</div>';
|
||||||
|
|
||||||
|
if ($i < 17) {
|
||||||
|
echo '<div class="cmv-way'.$state.'">';
|
||||||
|
if ($i < $current) {
|
||||||
|
echo '<div class="cmv-relative">--m</div>'; // --mn doit être remplacé par le deltaT entre les points $node et $node+1
|
||||||
|
}
|
||||||
|
echo '</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue