!!zone: title
kapp saisie
!!zone: link_css
<link href="/rex/bootstrap-5.3.3/css/bootstrap.min.css" rel="stylesheet">
<link href="/rex/datatables.2.2.1-bt5/datatables.css" rel="stylesheet">
<link href="/rex/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<style>

    #timer_tick {
        float: right;
        border: solid 2px orange;
        border-radius: 5px;
        padding: 2px;
    }

    #timer_tick:hover {
        cursor: pointer;

    }

    #zliste_ronde tbody tr {
        font-size: 18px;
        font-weight: bold;
    }

    .result_exist {
        font-size: 18px;
        font-weight: normal;
    }

    .result_missing {
        font-size: 18px;
        font-weight: bold;
        color : #3333ff;
        cursor:pointer;

    }

    .nav-link {
        font-weight: bold;
        /* background-color: #EEE  !important; */
        border: 1px #666 solid   !important;
    }

    .nav-link.active {
        font-weight: bold;
        color: red !important;
        background-color: #FC8  !important;
    }

    /* https://live.datatables.net/digeseka/1/edit */
    #liste_ronde tbody .result_missing:hover {
        background-color: #FA0;
        border : solid 2px red;
    }

    #liste_ronde tbody .result_missing:hover > .sorting_1 {
        background-color: #fA0;
    }

    #liste_ronde tbody .result_exist:hover {
        background-color: #fbfbfb;
    }

    #liste_ronde tbody .result_exist:hover > .sorting_1 {
        background-color: #fbfbfb;
    }    

    .result_button {
        color: #ffffff; /* color : #ffaa00; */
        font-weight: bold;
        font-size: 1.4rem;
        /* haut | droit | bas | gauche */
        margin: 0 1px 0 auto;
        border: thick double #ff6600;
    }

    .result_button:hover {
        background-color: #f88132 !important;
        border: thick double #0000FF;
    }

    #dlg-blanc {
        background-color: #fff;
        color: #000;
    }

    #dlg-nul {
        background-color: #aaa;
        color: #444;
    }

    #dlg-noir {
        background-color: #000;
        /* color: #ccc; */
    }

    .titre_h2 {
        text-align: center;
        border: solid;
    }

    #entete_page1 {
        background-color: #88c;
        border : solid #f00;
        position: sticky;
        top: 0;
        margin : auto;
    }

    #main_page1 {
        top: 20;
    }

    #entete_page {
        /* Provide scrollbars if needed and fix the header dimensions */
        overflow: hidden;
        position: absolute;
        width: 97%;
        /* height: 140px; */
        /* border : solid #ff6600; */
        /* margin : auto; */
        margin-inline: auto;
    }

    #main_page {
        /* Provide scrollbars if needed, position below header, and derive height from top/bottom */
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        width: 97%;
        /* top: 340px; */
        bottom: 0;
        /* border : solid #ff6600; */
        margin : auto;
        margin-bottom: 0.2em;
    }

    .footer {
        position : relative;
        /* background-color: #00a048; */
    }
</style>

!!zone: corps
<div id="entete_page">
<h2 class="titre_h2"><b id="titre_tournoi" ></b></h2>
<p>

</p>
<span id="list_tournois"></span>&nbsp;<span id="timer_tick" >00:00</span>
<div>
    <div style="float:left">
        <ul class="nav nav-tabs" id="tabs1" role="tablist">
            <li class="nav-item"><button class="nav-link active" data-val="TOUS" data-bs-toggle="tab">Tous</button></li>
            <li class="nav-item"><button class="nav-link" data-val="NO" data-bs-toggle="tab">-NO-</button></li>
            <li class="nav-item"><button class="nav-link" data-val="OK" data-bs-toggle="tab">-OK-</button></li>
        </ul>
    </div>
    <div style="clear:both"></div>
</div>

<script>
    page_refresh = "[!page_refresh|20]"
    list_labels = "[!list_labels|1-20, 21-40]"
    per_page = [!table_per_page|15]
</script>
</div> <!-- entete_page  -->

<div class="modal fade modal-xl" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Table <span id="dlg-table-number"></span></h4>
        </div>        
        <div class="modal-body">
            <div class="container-fluid">
                <div class="row">
                    <button class="btn result_button col-3" id="dlg-blanc">BLANC GAGNE<br>WHITE WIN<br>1 - 0<br><br><span id="dlg-blanc-name"></span></button>
                    <button class="btn result_button col-3" id="dlg-nul">NULLE <br> DRAW <br>X - X</button>
                    <button class="btn result_button col-3" id="dlg-noir">NOIR GAGNE<br>BLACK WIN<br>0 - 1<br><br><span id="dlg-noir-name"></span></button>
                </div>
            </div>
        </div>

        <div class="modal-footer">
          <button type="button" id="dlg_annuler" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
          <!-- <button type="button" class="btn btn-primary">Cancel</button> -->
        </div>
      </div>
    </div>
  </div>


<div id="ajaxSpinnerImage">
</div>

<div id="main_page">
    <table id="liste_ronde" class="zdisplay" style="width:100%"></table>
</div>


!!zone:js_after
<script>
    var base_url = '';
    json_uri = "[!json_uri|/mod/ronde.tbl]"
    page_uri = "[!page_uri|/mod/ronde]"
    table_uri = "/mod/ronde.tbl/"
</script>

<script src="/rex/jquery-3.7.1.js"></script>
<script src="/rex/bootstrap-5.3.3/js/bootstrap.bundle.min.js"></script>
<script src="/rex/datatables.2.2.1-bt5/datatables.js"></script>

<script src="/[!js_prefix|rc/js]/kommon.[!js_suffix|js]"></script>
<!-- <script src="/[!js_prefix|rc/js]/custom2.js"></script> -->
<script src="/[!js_prefix|rc/js]/ronde.[!js_suffix|js]"></script>
<script type="text/javascript">

    function adjustContentMargin() {
        adjustTopHeader("entete_page", 'main_page')
    }
</script>