Html - BWH [FR]

<html>

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="jquery.datetimepicker.full.min.js"></script>
    <script src="date.format.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="jquery.datetimepicker.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body" id="toastmsg">PLACEHOLDER</div>
    </div>
    <div class="container text-light">
        <!-- CREDITS TO Jack Rugile @ CodePen https://codepen.io/jackrugile/pen/JddmaX -->
        <div class="loader" style="display:none;">
            <div class="loader-inner">
                <div class="loader-line-wrap">
                    <div class="loader-line"></div>
                </div>
                <div class="loader-line-wrap">
                    <div class="loader-line"></div>
                </div>
                <div class="loader-line-wrap">
                    <div class="loader-line"></div>
                </div>
                <div class="loader-line-wrap">
                    <div class="loader-line"></div>
                </div>
                <div class="loader-line-wrap">
                    <div class="loader-line"></div>
                </div>
            </div>
        </div>
        <form id="ban" class="hideable" style="display:none;">
            <h1 class="text-center text-danger">BANNIR UN JOUEUR</h1><br>
            <div class="form-check form-check-inline">
                <input id="offbanc" type="checkbox" name="offban" class="form-check-input">
                <label for="offban" class="form-check-label">Ban Hors-ligne</label>
            </div>
            <div class="form-check form-check-inline">
                <input id="permbanc" type="checkbox" name="permban" class="form-check-input">
                <label for="permban" class="form-check-label">Ban Permanent</label>
            </div><br>
            <label for="target">Joueur</label>
            <select class="form-control" name="target" id="targetsel">
                <option value="0">None</option>
            </select>
            <input type="text" id="offtarget" class="form-control" placeholder="steam:11000011abcdefg" name="offtarget" style="display:none;"><br>
            <label for="reason">Raison</label>
            <input type="text" class="form-control" placeholder="Raison" name="reason" required><br>
            <label for="length">Expiration du bannissement</label>
            <input type="text" id="datepicker" name="length" class="form-control" placeholder="01/01/1970 00:00" required><br>
            <div class="row">
                <div class="col"><input type="button" id="bandaybtn" class="btn btn-outline-light form-control" value="1 Journée"></div>
                <div class="col"><input type="button" id="banweekbtn" class="btn btn-outline-light form-control" value="1 Semaine"></div>
                <div class="col"><input type="button" id="banmonthbtn" class="btn btn-outline-light form-control" value="1 Mois"></div>
                <div class="col"><input type="button" id="bansixmonthsbtn" class="btn btn-outline-light form-control" value="6 Mois"></div>
            </div><br><br>
            <input type="button" id="banbtn" class="btn btn-success form-control" value="Bannir le joueur">
        </form>
        <form id="warn" class="hideable" style="display:none;">
            <h1 class="text-center text-warning">AVERTIR UN JOUEUR</h1><br>
            <label for="target">Joueur</label>
            <select class="form-control" name="target" id="targetsel">
                <option value="0">None</option>
            </select><br>
            <label for="message">Message</label>
            <input type="text" class="form-control" placeholder="Message" name="message" required><br>
            <div class="form-check">
                <input id="anoncheck" type="checkbox" name="anon" class="form-check-input">
                <label for="anon" class="form-check-label">Anonyme</label>
            </div><br><br>
            <input type="button" id="warnbtn" class="btn btn-success form-control" value="Avertir le joueur">
        </form>
        <div id="warnlist" class="bg-dark hideable" style="display:none;">
            <h1 class="text-warning text-center" style="margin-top:25px;">LISTE DES AVERTISSEMENTS</h1>
            <div class="row">
                <div class="col" style="float:left;margin-left:15px;">
                    <nav>
                        <ul class="pagination"></ul>
                    </nav>
                </div>
                <div class="col col-lg-3" style="float:right;margin-right:15px;">
                    <input type="text" class="form-control" placeholder="Chercher..." id="warnsearch">
                </div>
            </div><br>
            <table class="table table-dark table-striped table-bordered text-light">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nom steam (SteamID) - Envoyé</th>
                        <th scope="col">Nom steam (SteamID) - Reçu</th>
                        <th scope="col">Message</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="banlist" class="bg-dark hideable" style="display:none;">
            <h1 class="text-danger text-center" style="margin-top:25px;">LISTE DES BANNISSEMENT</h1>
            <div class="row">
                <div class="col" style="float:left;margin-left:15px;">
                    <nav>
                        <ul class="pagination"></ul>
                    </nav>
                </div>
                <div class="col col-lg-3" style="float:right;margin-right:15px;">
                    <input type="text" class="form-control" placeholder="Chercher..." id="bansearch">
                </div>
            </div><br>
            <table class="table table-dark table-striped table-bordered text-light">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nom steam (SteamID) - Envoyé</th>
                        <th scope="col">Nom steam (SteamID) - Reçu</th>
                        <th scope="col">Raison</th>
                        <th scope="col">Durée</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <div id="assistreq" class="hideable" style="display:none;">PLACEHOLDER</div>
</body>

<script src="script.js"></script>

</html>