<!DOCTYPE html>
<html>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <style>
        body{ 
            font-family: Arial, Helvetica, sans-serif; 
        } 
        input {
            border: 1px solid black;
            border-radius: 30px !important; 
        }
        .form-group{
            margin-bottom:20px;
        }
        label{
            text-align:left !important;
            float:left;
            margin-left:10px;
            font-size:18px;
        }
    </style>
        <body style="background-color:#d5d5d5;">
            <div class="container" style="background-color:#efefef; min-height:750px;">
                <div class="row">
                    <div class="col-md-12">
                        <br><br>
                         <h2 class="card-title text-center"><strong>Contrôler une identité</strong></h2>                       
                        <center>
                            <form action="" class="col-md-6">
                            <hr> 
                                <div class="form-group">
                                    <label for="text"><strong>Nom</strong></label>
                                    <input type="text"  placeholder="Nom" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="text"><strong>Prénom</strong></label>
                                    <input type="text" placeholder="Prénom" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="text"><strong>Téléphone</strong></label>
                                    <input type="number" placeholder="Téléphone" class="form-control">
                                </div>
                                <hr>
                                <button type="button" class="btn btn-primary btn-lg btn-block"  data-bs-toggle="modal" data-bs-target="#myModal">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    Contrôler
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                                <br><br><br>
                            </form>
                        </center>
                    </div>            
                </div>
            </div>

        <!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
            <h4 class="modal-title">Contrôler une identité</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Module en cours de développement...
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
            </div>

        </div>
    </div>
</div>
        </body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</html>