<!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>
