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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
  <link rel="shortcut icon" href="../image/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.8/css/mdb.min.css" rel="stylesheet">
    <!-- owl -->
    <link rel="stylesheet" type="text/css" href="../plugins/globalOwl.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
    * {
        box-sizing: border-box;
    }

    body {
        -webkit-animation: color-change-2x 2s linear infinite alternate both;
        animation: color-change-2x 2s linear infinite alternate both;
    }

    @-webkit-keyframes color-change-2x {
        0% {
            background: #19dcea;
        }

        100% {
            background: #2c32ff;
        }
    }

    @keyframes color-change-2x {
        0% {
            background: #19dcea;
        }

        100% {
            background: #2c32ff;
        }
    }


    .cont {
        max-width: 560px;
        height: calc(100vh + 180px);
        margin: 0px auto;
        position: relative;
        transform-style: preserve-3d;
        transition: all 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }

    .front {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 2;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        transform: rotateY(180deg);
        z-index: 1;
    }

    .btn-rounded {
        border-radius: 10em;
    }

    #sign {
        transition: all 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.28)
    }

    .mock {
        width: 190px;
        position: absolute;
        bottom: -40px;
        right: -10px;
        z-index: 5;
    }
    </style>
</head>

<body>

    <!-- start navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top z-depth-0" style="z-index: 10">
        <a class="navbar-brand" href="../index.html">
            <img src="../image/logs.gif" height="42" alt="Dawini dz">
        </a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
            aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav ml-auto mt-2 mt-lg-0 text-center">
                <li class="nav-item">
                    <a class="nav-link" href="../index.html#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../index.html#overview">Application</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../store/shop.html">Boutique</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../aboutus.html">à propos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../contactus/contactus.php">Contactez-Nous</a>
                </li>
            </ul>

        </div>
    </nav>
    <!-- end navbar -->

    <div class="container-fluid text-center">

        <div class="text-center my-3 ">
            <button name="" id="sign" class="btn aqua-gradient btn-rounded" type="button">Inscription</button>
        </div>

        <div class="cont">
            <div class="front">
                <!-- Material form login -->
                <div class="card ">

                    <h5 class="card-header blue-gradient white-text text-center py-4">
                        <strong>Connexion</strong>
                    </h5>

                    <!--Card content-->
                    <div class="card-body px-lg-5 pt-0 pb-5">

                        <!-- Form -->
                        <form class="text-center" style="color: #757575;" action="#!">

                            <!-- Email -->
                            <div class="md-form">
                                <input type="email" id="emailEnt" class="form-control">
                                <label for="emailEnt">E-mail</label>
                            </div>

                            <!-- Password -->
                            <div class="md-form">
                                <input type="password" id="mdpEnt" class="form-control">
                                <label for="mdpEnt">Mot de passe</label>
                            </div>
                            <p class="error text-danger text-center"></p>
                            <div class="d-flex justify-content-around">
                                <div>
                                    <!-- Forgot password -->
                                    <a href="#" id="moub" data-target="#modalContactForm" data-toggle="modal">mot de passe oublié ?</a>
                                </div>
                            </div>

                            <!-- Sign in button -->
                            <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
                                type="submit" id="btnEnt">Connexion</button>

                            <!-- Register -->
                            <p>Pas un membre?
                                <span class="text-primary">inscrivez vous</span>
                            </p>

                            <!-- Social login -->
                            <p>ou connectez-vous avec:</p>
                            <a type="button" class="btn-floating btn-fb btn-sm">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a type="button" class="btn-floating btn-tw btn-sm">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a type="button" class="btn-floating btn-li btn-sm">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a type="button" class="btn-floating btn-git btn-sm">
                                <i class="fab fa-github"></i>
                            </a>

                        </form>
                        <!-- Form -->

                        <!-- <img src="../image/phoneMoc2.png" style="position:absolute; z-index:6;bottom:0;left:0;" alt="" srcset=""> -->

                    </div>
                    <img class="mock" src="../image/stetho copie.png" alt="" srcset="">

                </div>
                <!-- Material form login -->
            </div>

            <div class="back mb-3">
                <div class="form-container d-flex justify-content-center">
                    <div class="card">
                        <h5 class="card-header aqua-gradient white-text text-center py-4">
                            <strong>Inscription</strong>
                        </h5>
                        <div class="card-body px-lg-5 pt-0">
                            <form class="text-center" style="color: #757575;" action="#!">
                                <div class="form-row">
                                    <div class="col">
                                        <div class="md-form">
                                            <input type="text" id="FirstName" class="form-control">
                                            <label for="FirstName">Prénom</label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="md-form">
                                            <input type="text" id="LastName" class="form-control">
                                            <label for="LastName">nom de famille</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="md-form mt-0">
                                    <input type="email" id="emailIns" class="form-control">
                                    <label for="emailIns">E-mail</label>
                                </div>
                                <div class="md-form">
                                    <input type="password" id="mdpIns" class="form-control">
                                    <label for="mdpIns">Mot de passe</label>
                                </div>
                                <div class="md-form">
                                    <input type="text" id="numIns" class="form-control">
                                    <label for="numIns">Numéro de télephone</label>
                                </div>
                                <div class="md-form">
                                    <input placeholder="Date de naissance" type="date" id="dateIns"
                                        class="form-control">
                                    <label for="dateIns" class="mt-2">Date de naissance</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="defaultUnchecked" name="gender"
                                        value="Homme" checked>
                                    <label class="custom-control-label" for="defaultUnchecked">Homme</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="defaultChecked" name="gender"
                                        value="Femme">
                                    <label class="custom-control-label" for="defaultChecked">Femme</label>
                                </div>
                                <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
                                    id="btnIns" type="submit">Inscription</button>
                                <p>or sign up with:</p>
                                <a type="button" class="btn-floating btn-fb btn-sm">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a type="button" class="btn-floating btn-tw btn-sm">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a type="button" class="btn-floating btn-li btn-sm">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>
                                <a type="button" class="btn-floating btn-git btn-sm">
                                    <i class="fab fa-github"></i>
                                </a>
                                <hr>
                                <p>En cliquant sur ,
                                    <em>Inscription</em> vous acceptez nos
                                    <a href="terms.html" target="_blank">Conditions d’Utilisation</a>
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>



    </div>

    <footer class="text-light pt-4 page-footer" style="background:#000098;">

        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5 class="font-weight-bold mb-3">Le produit</h5>
                    <ul class="list-unstyled ml-3">
                        <li class="mb-2"><a href="../index.html">Comment ça marche ?</a></li>
                        <li class="mb-2"><a href="../contactus/contactus.php">Contactez nous</a></li>
                        <li class="mb-2"><a href="../terms.html">Conditions d'utilisation</a></li>
                        <li class="mb-2"><a href="../aboutus.html">Qui sommes nous </a></li>
                    </ul>

                </div>
                <div class="col-md-4">
                    <h5 class="font-weight-bold mb-3">Les services</h5>
                    <ul class="list-unstyled ml-3 text-uppercase">
                        <li class="mb-2"><a target="_blank" href="services/services.php?serv=docteur">DOCTEUR</a>
                        </li>
                        <li class="mb-2"><a target="_blank"
                                href="services/services.php?serv=psychologue">psychologue</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=mater">MATERIEL
                                MEDICAL</a></li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=dentiste">Dentiste</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=hopital">HOPITAL</a>
                        </li>
                        <li class="mb-2"><a target="_blank"
                                href="../services/services.php?serv=laboratoire">LABORATOIRE</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=centre">CENTRE
                                D'IMAGERIE</a></li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=clinique">CLINIQUE</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=aumbulance">AMBULANCE</a>
                        </li>
                        <li class="mb-2"><a target="_blank"
                                href="../services/services.php?serv=veterinaires">veterinaire</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=opticien">opticien</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=pharmacie">pharmacie</a>
                        </li>
                    </ul>

                </div>
                <div class="col-md-4">
                    <div class="footer-art">

                        <div class="footer-header d-flex">
                            <h5 class="font-weight-bold mb-3">Des articles aléatoires</h5>
                            <div class="owl-btn ml-auto">
                                <span class="prev"><i class="fas fa-chevron-left"></i></span>
                                <span class="next"><i class="fas fa-chevron-right"></i></span>
                            </div>
                        </div>
                        <div class="owl-articles">
                            <div class="owl-carousel">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 py-4">
                    <div class="flex-center">
                        <a href="https://www.facebook.com/dawinidz19/" target="_blank" class="fb-ic">
                            <i class="fab fa-facebook-f fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>
                        <a href="https://twitter.com/dawini9" target="_blank" class="tw-ic">
                            <i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>
                        <a href="https://www.instagram.com/" target="_blank" class="inta-ic">
                            <i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>
                        <a href="https://www.linkedin.com/in/dawini-dz-558031186" target="_blank" class="li-ic">
                            <i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>
                        <a href="https://www.youtube.com/" target="_blank" class="yb-ic">
                            <i class="fab fa-youtube fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>

                    </div>
                </div>
            </div>


        </div>
        <hr class="my-0">
        <div class="copyright text-center py-2">
            <i class="fa fa-copyright" aria-hidden="true"></i> Copyright 2019 - Dawini dz
        </div>
    </footer>

    <div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog cascading-modal" role="document">
            <div class="modal-content">
                <div class="modal-header primary-color white-text">
                    <h4 class="title">
                        <i class="fa fa-pencil-alt"></i> Réinitialisation du mot de passe</h4>
                    <button type="button" class="close waves-effect waves-light" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="md-form form-sm">
                        <i class="fa fa-envelope prefix"></i>
                        <input type="text" id="resetMail" class="form-control form-control-sm">
                        <label for="resetMail">Votre Email</label>
                    </div>
                    <div class="resetInfo text-center"></div>
                    <div class="text-center mt-4 mb-2">
                        <button class="btn btn-primary" id="resetmdp">Envoyer </i>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Central Modal isncription Success -->
    <div class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-notify modal-success" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <p class="heading lead text-center">Inscription</p>
                </div>
                <!--Body-->
                <div class="modal-body">
                    <div class="text-center">
                        <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
                        <p>votre compte a été créé avec succès</p>
                    </div>
                </div>
            </div>
            <!--/.Content-->
        </div>
    </div>
    <!-- Central Modal isncription Success-->

    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js">
    </script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.8/js/mdb.min.js">
    </script>
    <!-- owl -->
    <script src="../plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>

    <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
    <script src="../js/footer.js"></script>
    <script src="../js/connect.js"></script>
    <script src="signin.js"></script>



    <script>
    setTimeout(() => {
        $("#myModal").modal("show")
    }, 3000);

    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            var user = firebase.auth().currentUser;
            if (user) {
                window.location.replace("../index.html");
            } else {

            }
        }
    });

    new WOW().init();

    var front = true;
    $("#sign").on("click", function() {
        if (front == true) {
            $(".cont").css("transform", "rotateY(180deg)");
            $("#sign").text("Connexion").removeClass("aqua-gradient").addClass("blue-gradient");
            $(".front").css("z-index", "1");
            $(".back").css("z-index", "2");
            front = false;

        } else {
            $(".cont").css("transform", "rotateY(0deg)");
            $("#sign").text("Inscription").addClass("aqua-gradient").removeClass("blue-gradient");
            $(".front").css("z-index", "2");
            $(".back").css("z-index", "1");
            front = true;

        }
    })

    </script>

</body>

</html>