CMS-CSE/core/views/pages/cms.parametres.php

<?php
$checkMaintenance = core::isMaintenance();
$checkDebug = core::isDebug();
?>

<header class="d-flex flex-column flex-md-row align-items-md-center p-3 bg-light ">
    <h2 class="bd-title" id="content">
        <span>IT : Paramètres</span>
    </h2>
</header>
<?php
echo core::filAriane(array(
    "current" => "IT : Paramètres",
    "arbo" => array(
        "Administration" => NULL,
        "IT : Paramètres" => "/parametres.html"
    )
));
?>


<br />
    <ul class="nav nav-tabs" id="event-fiche" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" id="general-tab" role="tab" aria-selected="true">Général</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="users-tab" role="tab" aria-selected="">Utilisateurs</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="backup-tab" role="tab" aria-selected="">Backup & restauration</a>
        </li> 
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="debug-tab" role="tab" aria-selected="">Debug & développement</a>
        </li> 
    </ul>
<br />

<div class="tab-content">
    <div id="tab-general"> 
        <?php get::page("parametres-general") ?> 
    </div>
    <div id="tab-users" style="display: none;">
        <?php get::page("parametres-users") ?>
    </div>
    <div id="tab-backup" style="display: none;">
        <?php get::page("parametres-restore") ?>
    </div>
    <div id="tab-debug" style="display: none;">
        <?php get::page("parametres-debug") ?>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("#general-tab").click(function() {
            $("#tab-general").show();
            $("#tab-users").hide();
            $("#tab-backup").hide();
            $("#tab-debug").hide();
        }); 
        $("#users-tab").click(function() {
            $("#tab-general").hide();
            $("#tab-users").show();
            $("#tab-backup").hide();
            $("#tab-debug").hide();
        });  
        $("#backup-tab").click(function() {
            $("#tab-general").hide();
            $("#tab-users").hide();
            $("#tab-backup").show();
            $("#tab-debug").hide();
        });
        $("#debug-tab").click(function() {
            $("#tab-general").hide();
            $("#tab-users").hide();
            $("#tab-backup").hide();
            $("#tab-debug").show();
        });
    })
</script>

<style>
    h4 {
        margin-top: 15px;
    }

    .element-parametres {
        margin-top: 5px;
    }

    .modal-body {
        position: relative;
        overflow-y: auto;
        max-height: 400px;
        padding: 15px;
    }

    .modal-dialog{
        width: 1005px !important;
    }

    .modal {
        --bs-modal-width: none;
    }

    .autoModal.modal .modal-body {
        max-height: 100%;
    }
</style>