From 49679bdde7448a16649a1b68cf6fffed5d10b3ca Mon Sep 17 00:00:00 2001
From: Guillaume Joffre <guillaume.joffre12@gmail.com>
Date: Mon, 1 Aug 2022 17:22:02 +0200
Subject: [PATCH] prototype com ville

---
 admin/prototype_com_ville.php | 174 ++++++++++++++++++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 admin/prototype_com_ville.php
diff --git a/admin/prototype_com_ville.php b/admin/prototype_com_ville.php
new file mode 100644
index 0000000..8944896
--- /dev/null
+++ b/admin/prototype_com_ville.php
@@ -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>
