la suite ifinalement

<style>
    /* Conteneur principal */
    .direction-panel {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centre verticalement */
        height: 100%;
        padding-left: 20px;
    }

    /* Ligne pour chaque état */
    .status-row {
        display: flex;
        align-items: center;
        margin: 10px 0;
        opacity: 0.4; /* Transparence quand inactif */
        transition: all 0.3s;
    }

    /* Style quand la ligne est active */
    .status-row.active {
        opacity: 1; /* Pleine visibilité */
        font-weight: bold;
    }

    /* Le design de la LED éteinte */
    .led {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #333; /* Gris sombre */
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
        border: 1px solid #555;
        margin-right: 15px;
        transition: background-color 0.3s, box-shadow 0.3s;
    }

    /* Le design de la LED Verte (Forward) allumée */
    .led-green.on {
        background-color: #2ecc71; /* Vert vif */
        box-shadow: 0 0 15px #2ecc71; /* Effet de lueur */
        border-color: #27ae60;
    }

    /* Le design de la LED Orange (Backward) allumée */
    /* J'utilise l'orange pour bien différencier du Forward */
    .led-orange.on {
        background-color: #ff9f43; 
        box-shadow: 0 0 15px #ff9f43;
        border-color: #e67e22;
    }

    .label-text {
        font-size: 16px;
        letter-spacing: 1px;
    }
</style>

<div class="direction-panel">
    
    <div class="status-row" ng-class="{active: msg.payload === true}">
        <div class="led led-green" ng-class="{on: msg.payload === true}"></div>
        <span class="label-text">FORWARD</span>
    </div>

    <div class="status-row" ng-class="{active: msg.payload === false}">
        <div class="led led-orange" ng-class="{on: msg.payload === false}"></div>
        <span class="label-text">BACKWARD</span>
    </div>

</div>
Créé il y a 1 mois.