<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/feed-back.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="icon" href="css/YAF2.png" />
    <title>Feedbacks</title>
</head>
<body>
    <!-- main -->
        <header>
            <div class="nom_site">
                <a href="index.html"><img src="images/YAF1.png" alt="logo" class="logo"></a>
            </div>
            <nav class="navmenu">
                <input type="checkbox" id="check">
                <label for="check" class="checkbtn">
                  <i class="fas fa-bars"></i>
                </label>
                <ul class="menu">
                    <li class="Acceuil"><a href="index.html">Accueil</a></li>
                    <li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Formations</a>
                        <div class="sub-menu">
                             <ul>
                                 <li class="hover-it"><a href="javascript:void(0)" class="description">CP 1</a>
                                     <div class="text">
                                         <div><a href="semestre1.html" class="Sem">S1</a></div>
                                         <div><a href="semestre2.html" class="Sem">S2</a></div>   
                                     </div>
                                 </li>
                                 <li class="hover-it"><a href="javascript:void(0)" class="description">Cp 2</a>
                                     <div class="text">
                                         <div><a href="semestre3.html" class="Sem">S3</a></div>
                                         <div><a href="semestre4.html" class="Sem">S4</a></div>   
                                     </div>
                                 </li>
                                 <li class="hover-it"><a href="javascript:void(0)" class="description">CI1</a>
                                     <div class="text">
                                         <div><a href="semestre5.html" class="Sem">S5</a></div>
                                         <div><a href="semestre6.html" class="Sem">S6</a></div>   
                                     </div>
                                 </li>
                             </ul>
                         </div>
 
                     </li>
                    <li class="formation"><a href="formation.html">Formations</a></li>
                    <li class="Participer"><a href="participer.html">Participer</a></li>
                    <li class="About"><a href="about.html">À propos</a></li>
                    <li class="Contact"><a href="contact.html">Contacter</a></li>
                </ul>
            </nav>

        <div class="search">
            <div class="icon"></div>
            <div class="input">
                <input type="text" placeholder="Rechercher" id="mysearch" value="" onchange="openPage()">
            </div>
        </div>
            
        </header>
        <section >

            <div class="fintro">
                <h3>Nous aimerions recevoir des feedbacks à fin d'améliorer notre site web</h3>
            </div>
            <form method="post">
                <div class="fcontent">
                    <h3>Quel est votre avis à propos de ce site ?</h3>
                    <div class="rating">
                        <input type="radio" name="star" class="emoji" id="star1" value="j'adore">
                        <label for="star1" class="label">
                            <img src="images/in-love.png">
                            <h4>J'adore</h4>
                        </label>
                        <input type="radio" name="star" class="emoji" id="star2" value="j'aime">
                        <label for="star2" class="label">
                            <img src="images/happy.png">
                            <h4>J'aime</h4>
                        </label>
                        <input type="radio" name="star" class="emoji" id="star3" value="pas mal">
                        <label for="star3" class="label">
                            <img src="images/confused.png">
                            <h4>Pas mal</h4>
                        </label>
                        <input type="radio" name="star" class="emoji" id="star4" value="j'aime pas">
                        <label for="star4" class="label">
                            <img src="images/crying.png">
                            <h4>J'aime pas</h4>
                        </label>
                        <input type="radio" name="star" class="emoji" id="star5" value="je deteste">
                        <label for="star5" class="label">
                            <img src="images/angry.png">
                            <h4>Je déteste</h4>
                        </label>
                    </div>
                </div>

                <div class="fcategory">
                    <h3>Veuillez sélectionner la catégorie de votre commentaire ci-dessous :</h3>
                    <div class="categories">
                        
                        <button type="button" class="fbox" name="fb" value="s" >Suggestion</button>
                        <button type="button" class="fbox" name="fb" value="q">Quelque chose ne va pas</button>
                        <button type="button" class="fbox" name="fb" value="c">Compliment</button>
                    </div>
                </div>
                <div class="fintro2">
                    <h3>Veuillez laisser votre commentaire ci-dessous :</h3>
                
                    <div class="text-box">
                        <textarea name="txt" placeholder="Entrez votre commentaire ..." class="textarea" ></textarea>
                    </div>
                
             
                    
                    <div>
                        <input type="submit" name="ENVOYER" class="input" value="ENVOYER" >
                    </div>
              
                </div>
            </form>

            <?php
                    if(isset($_POST['ENVOYER']))
                    {
                        if(isset($_POST['star']) OR isset($_POST['fb']) OR isset($_POST['txt']))
                        {
                            if(!empty($_POST['star']) OR !empty($_POST['fb']) OR !empty($_POST['txt']))
                             {
                                
                                echo "<b>L’équipe de [Code breakers] vous remercie pour votre feedback et se réjouit de savoir que vous avez apprécié nos service </b>";
                                 }
                            }
                    }                               
                ?>

        </section>
        <footer class="footer">
            <div id="container">
                <div class="row">
                    <div class="LVL">
                        <h4>CODE BREAKERS </h4>
                        <p>"Opportunities don't happen. You create them."<br/><br><span><strong>-- Chris Grosser</strong></span></p>
                    </div>
                    <div class ="LVL" > 
                        <h4>Navigation</h4>
                        <ul>
                            <li ><a href="index.html">Acceuil</a></li>
                            <li ><a href="participaer.html">Participer</a></li>
                            <li ><a href="about.html">À Propos</a></li>
                            <li ><a href="formation.html">Formations</a></li>
                        </ul>               
                    </div>
                    <div class="LVL">
                        <h4>CONTACTEZ NOUS</h4>
                        <ul>
                            <li><a href="contact.html">contact</a></li>
                            <li><a href="feed-back.php">feed back</a></li>
                            <li><a href="#">donate</a></li>
                            <li><a href="#">Recommander</a></li>
                        </ul>
                    </div>
                    <div class="LVL">
                        <h4>SUIVEZ-NOUS </h4>
                        <div class="social_media">
                            <a href="https://www.facebook.com/Code-Breakers-100219139052177"><i class="fab fa-facebook-f"></i></a>
                            <a href="https://www.instagram.com/code3breakers/"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <!--Scripts-->

        <script type="text/javascript">
            const icon = document.querySelector('.icon');
            const search = document.querySelector('.search');
            icon.onclick = function(){
                search.classList.toggle('active')
            }
        </script>
        <script type="text/javascript">
            window.addEventListener('scroll',function(){
                const header = document.querySelector('header');
                header.classList.toggle("sticky", window.scrollY > 0);
            });
        </script>
        <script>
            const header = document.querySelector('header')
            const section = document.querySelector('section');
            const body = document.querySelector('body');
            const toggle = document.getElementById('toggle');
            toggle.onclick = function(){
                toggle.classList.toggle('active');
                body.classList.toggle('active');
                section.classList.toggle('active');
                header.classList.toggle('active');
            }
        </script>
        <script src="listes.js"></script>
    </body>
</html>
