reserver_des.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <!-- Fonts -->
    <script src="https://kit.fontawesome.com/e807f8aa79.js" crossorigin="anonymous"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/datepicker.css">

    <title>LIKDOM</title>
</head>

<body>

    <div class="loader">
        <img src="./images/spinner.svg" alt="">
    </div>

    <section class="bg-section to-custum">
        <nav class="navbar navbar-dark navbar-expand-lg">
            <div class="container justify-content-start justify-content-md-between">
                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand p-0 d-none d-md-inline-block" href="./index.html"><img src="./images/Logo@2x.png"
                        class="img-logo" alt="logo" /></a>
                <!-- <form class="d-md-none flex-grow-1" method="GET" action="{{ route('reserv.code') }}">
                    <div class="input-group mx-auto">
                        <button class="btn" type="button" id="button-search">
                            <i class="fa fa-search"></i>
                        </button>
                        <input type="search" class="form-control form-search" placeholder="Entrer votre code"
                            aria-describedby="button-search" />
                    </div>
                </form> -->

                <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar"
                    aria-labelledby="offcanvasNavbarLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">LIKDOM</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <!-- mobile menu -->
                        <ul class="navbar-nav d-lg-none justify-content-evenly flex-grow-1 pe-3">
                            <li class="nav-item">
                                <a href="#" class="nav-link">Accueil</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Services</a>
                            </li>
                            <li class="nav-item">
                                <a href="./reserver.html" class="nav-link">Réserver</a>
                            </li>
                            <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
                            <li class="nav-item">
                                <a href="#" class="nav-link link-danger">Professionnel</a>
                            </li>
                        </ul>
                        <!-- descktop menu -->
                        <div
                            class="navbar-desktop d-none d-lg-flex justify-content-evenly align-items-center flex-grow-1">
                            <a class="btn link-reserv" href="./services.html">Réserver</a>
                            <form class="d-flex m-0" method="GET" action="{{ route('reserv.code') }}">
                                <div class="input-group">
                                    <input type="search" class="form-control form-search"
                                        placeholder="Entrer votre code" aria-describedby="button-search" />
                                    <button class="btn" type="button" id="button-search">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </form>
                            <div>
                                <a class="btn btn-light link-signup" href="./compte.html">Créer
                                    un
                                    compte</a>
                                <a class="btn btn-outline-light link-signin" href="./login.html">Se
                                    connecter</a>
                            </div>
                            <a class="btn link-prof" href="./professionnel.html">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="26" viewBox="0 0 14 26">
                                    <path id="icons8_manager"
                                        d="M20,11.667a4.4,4.4,0,0,1-4.455-4.333,4.456,4.456,0,0,1,8.909,0A4.4,4.4,0,0,1,20,11.667ZM24.623,12.9H21.907a.6.6,0,0,1-.064.277l-.955,1.857a.615.615,0,0,1-.14.173l1.148,5.3a.608.608,0,0,1-.125.514L20.5,22.578a.649.649,0,0,1-.995,0L18.23,21.03a.6.6,0,0,1-.125-.514l1.148-5.3a.615.615,0,0,1-.14-.173l-.955-1.857a.6.6,0,0,1-.064-.277H15.377A2.348,2.348,0,0,0,13,15.217V22.19a7,7,0,0,0,14,0V15.217A2.348,2.348,0,0,0,24.623,12.9Z"
                                        transform="translate(-13 -3)" fill="#3d5b8e" />
                                </svg>
                                <span>Likdom Pro</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row px-4rem align-items-start">
                <div class="col-12 col-lg-6 height-91 d-flex flex-column justify-content-between">
                    <!-- Progress bar -->
                    <div class="progressbar">
                        <div class="progress" id="progress"></div>
                        <div class="progress-step progress-step-active" data-title="step1"></div>
                        <div class="progress-step" data-title="step2"></div>
                        <div class="progress-step" data-title="step3"></div>
                    </div>
                    <!-- form steps -->
                    <form class="form-step-wrapper d-flex flex-column justify-content-center flex-grow-1" action="">

                        <div class="form-step desinfec-form mx-auto form-step-active">
                            <h4 class="text-center text-lg-start">Désinfection</h4>
                            <div class="mycard custom-width d-flex ">
                                <span>Superficie à traiter par m²</span>
                                <span>Prix: 35dh/m²</span>
                            </div>
                            <div class="mylabel-card">
                                <div class="d-flex align-items-center justify-content-between">
                                    <span class="span-lg pe-2">Superficie à trainer</span>
                                    <div class="custom-input-number">
                                        <button type="button" class="btn-svg cin-decrement">
                                            <svg id="Minus" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                viewBox="0 0 20 20">
                                                <circle class="svg-circle" data-name="Ellipse 11" cx="10" cy="10" r="10"
                                                    fill="#fff" />
                                                <line class="svg-line" data-name="Ligne 30" x2="10"
                                                    transform="translate(5 10)" fill="none" stroke="#3d5b8e"
                                                    stroke-linecap="round" stroke-width="2" />
                                            </svg>
                                        </button>
                                        <input type="number" class="cin-input basket-quantity" step="1" value="2"
                                            min="0" max="100">
                                        <button type="button" class="btn-svg cin-increment">
                                            <svg id="Plus" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                viewBox="0 0 20 20">
                                                <circle class="svg-circle" data-name="Ellipse 11" cx="10" cy="10" r="10"
                                                    fill="#fff" />
                                                <line class="svg-line" data-name="Ligne 30" x2="10"
                                                    transform="translate(5 10)" fill="none" stroke="#3d5b8e"
                                                    stroke-linecap="round" stroke-width="2" />
                                                <line class="svg-line" data-name="Ligne 31" x2="10"
                                                    transform="translate(10 5) rotate(90)" fill="none" stroke="#3d5b8e"
                                                    stroke-linecap="round" stroke-width="2" />
                                            </svg>
                                        </button>
                                    </div>
                                    <span class="span-lg ps-2">m²</span>
                                </div>
                                <div class="d-flex align-items-center justify-content-between mt-3">
                                    <span class="span-lg">Prix total</span>
                                    <span class="mylabel-sm-card">270 DH</span>
                                </div>
                            </div>

                            <img src="./images/platforme.png" class="plat-img" alt="">

                        </div>
                        <div class="form-step passage-form mx-auto">
                            <h4 class="mt-0">Choisir la date du passage </h4>
                            <div id="datepicker" class="calendar"></div>
                            <h4>Choisir l'heure du passage</h4>
                            <div class="select-time d-flex align-items-center mx-auto">
                                <img src="./images/svg/icon-clock.svg" class="me-3" alt="">
                                <select class="form-select flex-grow-1" aria-label="time-select">
                                    <option selected value="1">08:30</option>
                                    <option value="2">09:00</option>
                                    <option value="2">09:30</option>
                                    <option value="2">10:00</option>
                                    <option value="2">10:30</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-step user-form mx-auto">
                            <!-- <h4>Veuillez saisir vos informations</h4> -->
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control" id="floatingNom" placeholder="Nom et prénom">
                                <label for="floatingNom">Nom et prénom</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="email" class="form-control" id="floatingEmail" placeholder="E-mail">
                                <label for="floatingEmail">E-mail</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="tel" class="form-control" id="floatingTel" placeholder="N° téléphone">
                                <label for="floatingTel">N° téléphone </label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control" id="floatingAdresse" placeholder="Adresse">
                                <label for="floatingAdresse">Adresse</label>
                            </div>

                            <select class="form-select mb-3" aria-label="ville select" id="floatingVille">
                                <option selected value="1">Mohammedia</option>
                                <option value="2">Casablanca</option>
                            </select>

                            <div class="form-floating mb-3">
                                <input type="text" class="form-control " id="floatingComptAdresse"
                                    placeholder="Complément d'adresse">
                                <label for="floatingComptAdresse">Complément d'adresse (optionnel)</label>
                            </div>
                            <div class="div-login d-flex align-items-center justify-content-evenly">
                                <a href="./login.html" class="d-none d-lg-inline">Se connecter</a>
                                <span>se connecter avec </span>
                                <div>
                                    <a href="" class="me-3"><img src="./images/svg/social-icons/icon-facebook.svg"
                                            alt=""></a>
                                    <a href=""><img src="./images/svg/social-icons/icon-google.svg" alt=""></a>
                                </div>
                            </div>
                            <!-- <div class="d-flex d-lg-none div-login align-items-center justify-content-between">
                                <a href="./login.html" class="">Se connecter</a>
                                <i class="fas fa-chevron-right"></i>
                            </div> -->
                        </div>

                    </form>
                    <div class="d-flex justify-content-between align-items-center mx-auto btn-wrapper flex-lg-grow-1">
                        <a href="#" class="btn-prev text-decoration-none">
                            <i class="fa fa-chevron-left me-1"></i> Retour</a>
                        <button class="btn-next">Suivant</button>
                    </div>
                </div>
                <div class="d-none col-lg-6 height-91 d-lg-flex justify-content-end">
                    <div class="d-flex flex-column justify-content-center w-40">
                        <img src="./images/svg/likdom-femme.svg" class="img-assistant" alt="">
                    </div>
                    <div class="d-flex flex-column justify-content-center div-img-wrapper w-60">

                        <!-- img steps -->
                        <div class="d-flex flex-column justify-content-center">
                            <div class="img-step mx-auto img-step-active">
                                <img src="./images/svg/desinfection.svg" class="img-form mt-13vh" alt="">
                            </div>
                            <div class="img-step mx-auto">
                                <img src="./images/svg/calendar.svg" class="img-form mt-13vh" alt="">
                            </div>
                            <div class="img-step">
                                <img src="./images/svg/form-step1.svg" class="img-form mt-13vh" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script src="./js/loader.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <!-- datepicker -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js"
        integrity="sha512-RCgrAvvoLpP7KVgTkTctrUdv7C6t7Un3p1iaoPr1++3pybCyCsCZZN7QEHMZTcJTmcJ7jzexTO+eFpHk4OCFAg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./jquery-ui/jquery-ui.min.js"></script>
    <script src="./js/datepicker.js"></script>
    <!--  -->
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <script src="./js/reserver_des.js"></script>


</body>

</html>