From d87f0df5e42c17f4f77e37d61126f934c8c1d6a8 Mon Sep 17 00:00:00 2001
From: Kybo <benoit.kezel@gmail.com>
Date: Wed, 18 Dec 2019 21:37:22 +0100
Subject: [PATCH] added all popups

---
 Assets/Pages/Autres/checkout.html     |  94 ++++++------
 Assets/Pages/Autres/commande.html     |  58 --------
 Assets/Pages/Autres/commentaire.html  |  59 --------
 Assets/Pages/Produits/nao.html        |   4 +-
 Assets/Pages/Produits/pepper.html     |   4 +-
 Assets/Pages/Produits/r2d2.html       |   4 +-
 Assets/Pages/Produits/terminator.html |   4 +-
 Assets/css/css.css                    |  14 +-
 index.html                            | 199 ++++++++++++++------------
 9 files changed, 174 insertions(+), 266 deletions(-)
 delete mode 100644 Assets/Pages/Autres/commande.html
 delete mode 100644 Assets/Pages/Autres/commentaire.html

diff --git a/Assets/Pages/Autres/checkout.html b/Assets/Pages/Autres/checkout.html
index d4d7f38..fb93519 100644
--- a/Assets/Pages/Autres/checkout.html
+++ b/Assets/Pages/Autres/checkout.html
@@ -20,54 +20,64 @@
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
 
-    <div class="title">
-        <h1>Votre panier :</h1>
-    </div>
-    <div class="content">
-        <table id="basket">
-            <tr id="cent">
-                <th>Nom Produit</th>
-                <th>Quantité</th>
-                <th>Prix</th>
-            </tr>
-            <tr>
-                <td>R2D2</td>
-                <td><input type="text" value="2"></td>
-                <td>500 €</td>
-            </tr>
-            <tr>
-                <td>Nao</td>
-                <td><input type="text" value="1"></td>
-                <td>5 000€</td>
-            </tr>
-            <tr>
-                <td id="total" COLSPAN=3>TOTAL : 6 000€</td>
-            </tr>
-        </table>
-    </div>
-    
-    <div class="title">
-        <h1>Livraison :</h1>
-    </div>
-    <div class="content">
-    <div id="livraison">
-        <h2>Coordonnées de livraison :</h2>
-        <form action="commande.html">
-            <table>
-                <tr>
-                    <td>Nom et prénom :<input type="text" required></td><td>Ville :<input type="text" required></td>
+
+    <div id="dark_popup">
+
+        <div id="popup">
+            <a href="#"><h1>X</h1></a>
+            <h1>Merci pour votre achat ! Votre commande arrive bientot !</h1>
+            <a href="../../../index.html"><h2>Retour à l'accueil</h2></a>
+        </div>
+
+        <div class="title">
+            <h1>Votre panier :</h1>
+        </div>
+        <div class="content">
+            <table id="basket">
+                <tr id="cent">
+                    <th>Nom Produit</th>
+                    <th>Quantité</th>
+                    <th>Prix</th>
                 </tr>
                 <tr>
-                    <td>Adresse ligne 1 :<input type="text" placeholder="Rue, voie, boite postale, nom de société" required></td><td>Code postal :<input type="text" required></td>
+                    <td>R2D2</td>
+                    <td><input type="text" value="2"></td>
+                    <td>500 €</td>
                 </tr>
                 <tr>
-                    <td>Adresse ligne 2 :<input type="text" placeholder="Batiment, Etage, Lieu-Dit"></td><td>Numéro de téléphone :<input type="tel" required></td>
+                    <td>Nao</td>
+                    <td><input type="text" value="1"></td>
+                    <td>5 000€</td>
+                </tr>
+                <tr>
+                    <td id="total" COLSPAN=3>TOTAL : 6 000€</td>
                 </tr>
             </table>
-            <h2 id="valid">Valider:</h2>
-            <input type="submit" value="Payer">
-        </form>
-    </div>
+        </div>
+        
+        <div class="title">
+            <h1>Livraison :</h1>
+        </div>
+        <div class="content">
+        <div id="livraison">
+            <h2>Coordonnées de livraison :</h2>
+            <form action="#dark_popup">
+                <table>
+                    <tr>
+                        <td>Nom et prénom :<input type="text" required></td><td>Ville :<input type="text" required></td>
+                    </tr>
+                    <tr>
+                        <td>Adresse ligne 1 :<input type="text" placeholder="Rue, voie, boite postale, nom de société" required></td><td>Code postal :<input type="text" required></td>
+                    </tr>
+                    <tr>
+                        <td>Adresse ligne 2 :<input type="text" placeholder="Batiment, Etage, Lieu-Dit"></td><td>Numéro de téléphone :<input type="tel" required></td>
+                    </tr>
+                </table>
+                <h2 id="valid">Valider:</h2>
+                <input type="submit" value="Payer">
+            </form>
+        </div>
+        </div>
     </div>
 
     <footer>
diff --git a/Assets/Pages/Autres/commande.html b/Assets/Pages/Autres/commande.html
deleted file mode 100644
index 7ea2843..0000000
--- a/Assets/Pages/Autres/commande.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-    <meta charset="utf-8" />
-    <title>Kyflo</title>
-    <link rel="stylesheet" type="text/css" href="../../css.css">
-    <link rel="stylesheet" type="text/css" href="../../resp.css">
-    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-</head>
-
-<body>
-
-    <nav id="nav">
-        <div class="topnav">
-            <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
-            <a id="nous" href="nous.html">A propos</a>
-            <a id="contactN" href="contact.html">Contact</a>
-            <a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
-            <a id="loupe" href="search_result.html">GO</a>
-            <input type="text" placeholder="Rechercher sur tout le site">
-        </div>
-    </nav>
-
-    <div id="Merci">
-        <h1>Merci beaucoup d'avoir commmander sur notre site ! Votre commande arrive bientôt !</h1>
-        <img src="../../Images/Icones/smiley.png" alt>
-        <h2><a href="../../../index.html">Retourner a l'accueil</a></h2>
-    </div>
-
-    <footer>
-        <div id="acces">
-            <table>
-                <tbody>
-                    <tr>
-                        <th>Accès rapide</th>
-                        <th id="line"></th>
-                        <th>Une question ?</th>
-                    </tr>
-                    <tr>
-                        <td><a href="../../../index.html">Accueil</a></td>
-                        <td><a href="../../../index.html#slider">Nos Promotions</a></td>
-                        <td></td>
-                    </tr>
-                    <tr>
-                        <td><a href="../../../index.html#produits">Nos Produits</a></td>
-                        <td><a href="checkout.html">Votre panier</a></td>
-                        <td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </footer>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/Assets/Pages/Autres/commentaire.html b/Assets/Pages/Autres/commentaire.html
deleted file mode 100644
index c513732..0000000
--- a/Assets/Pages/Autres/commentaire.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-    <meta charset="utf-8" />
-    <title>Kyflo</title>
-    <link rel="stylesheet" type="text/css" href="../../css.css">
-    <link rel="stylesheet" type="text/css" href="../../resp.css">
-    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-</head>
-
-<body>
-
-    <nav id="nav">
-        <div class="topnav">
-            <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
-            <a id="nous" href="nous.html">A propos</a>
-            <a id="contactN" href="contact.html">Contact</a>
-            <a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
-            <a id="loupe" href="search_result.html">GO</a>
-            <input type="text" placeholder="Rechercher sur tout le site">
-        </div>
-    </nav>
-
-    <div id="content">
-        <div id="Merci">
-            <h1>Merci beaucoup pour votre réponse ! Votre retour a été pris en compte !</h1>
-            <img src="../../Images/Icones/smiley.png" alt>
-            <h2><a href="../../../index.html">Retourner a l'accueil</a></h2>
-        </div>
-    </div>
-    <footer>
-        <div id="acces">
-            <table>
-                <tbody>
-                    <tr>
-                        <th>Accès rapide</th>
-                        <th id="line"></th>
-                        <th>Une question ?</th>
-                    </tr>
-                    <tr>
-                        <td><a href="../../../index.html">Accueil</a></td>
-                        <td><a href="../../../index.html#slider">Nos Promotions</a></td>
-                        <td></td>
-                    </tr>
-                    <tr>
-                        <td><a href="../../../index.html#produits">Nos Produits</a></td>
-                        <td><a href="checkout.html">Votre panier</a></td>
-                        <td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </footer>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/Assets/Pages/Produits/nao.html b/Assets/Pages/Produits/nao.html
index 985811e..a816d35 100644
--- a/Assets/Pages/Produits/nao.html
+++ b/Assets/Pages/Produits/nao.html
@@ -17,7 +17,7 @@
         <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
         <a class="raccourci" href="../../../index.html#nous">A propos</a>
         <a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
-        <a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
+        <a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
         <a id="go" href="search_result.html">GO</a>
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
@@ -84,7 +84,7 @@
         </div>
 
         <div class="content" id="com">
-            <form action="../Autres/commentaire.html">
+            <form action="../../../index.html#dark_popup">
                 <h2>Nom et Prénom :</h2>
                 <input type="text" required>
 
diff --git a/Assets/Pages/Produits/pepper.html b/Assets/Pages/Produits/pepper.html
index 35b043e..52fc88a 100644
--- a/Assets/Pages/Produits/pepper.html
+++ b/Assets/Pages/Produits/pepper.html
@@ -17,7 +17,7 @@
         <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
         <a class="raccourci" href="../../../index.html#nous">A propos</a>
         <a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
-        <a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
+        <a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
         <a id="go" href="search_result.html">GO</a>
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
@@ -84,7 +84,7 @@
         </div>
 
         <div class="content" id="com">
-            <form action="../Autres/commentaire.html">
+            <form action="../../../index.html#dark_popup">
                 <h2>Nom et Prénom :</h2>
                 <input type="text" required>
 
diff --git a/Assets/Pages/Produits/r2d2.html b/Assets/Pages/Produits/r2d2.html
index b8af9cc..b09dbc6 100644
--- a/Assets/Pages/Produits/r2d2.html
+++ b/Assets/Pages/Produits/r2d2.html
@@ -17,7 +17,7 @@
         <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
         <a class="raccourci" href="../../../index.html#nous">A propos</a>
         <a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
-        <a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
+        <a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
         <a id="go" href="search_result.html">GO</a>
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
@@ -79,7 +79,7 @@
         </div>
 
         <div class="content" id="com">
-            <form action="../Autres/commentaire.html">
+            <form action="../../../index.html#dark_popup">
                 <h2>Nom et Prénom :</h2>
                 <input type="text" required>
 
diff --git a/Assets/Pages/Produits/terminator.html b/Assets/Pages/Produits/terminator.html
index eb49765..3a1cda1 100644
--- a/Assets/Pages/Produits/terminator.html
+++ b/Assets/Pages/Produits/terminator.html
@@ -17,7 +17,7 @@
         <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
         <a class="raccourci" href="../../../index.html#nous">A propos</a>
         <a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
-        <a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
+        <a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
         <a id="go" href="search_result.html">GO</a>
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
@@ -79,7 +79,7 @@
         </div>
 
         <div class="content" id="com">
-            <form action="../Autres/commentaire.html">
+            <form action="../../../index.html#dark_popup">
                 <h2>Nom et Prénom :</h2>
                 <input type="text" required>
 
diff --git a/Assets/css/css.css b/Assets/css/css.css
index 6d00346..4c8b906 100644
--- a/Assets/css/css.css
+++ b/Assets/css/css.css
@@ -162,7 +162,7 @@ div#bienvenue{
     animation-fill-mode: forwards;
 }
 
-body>#bienvenue>h1 {
+#bienvenue>h1 {
     font-size: 3vw;
     color: white;
     text-align: center;
@@ -173,7 +173,7 @@ body>#bienvenue>h1 {
     100% {margin-left: 0%}
 }
 
-body>#bienvenue>h2 {
+#bienvenue>h2 {
     font-size: 2vw;
     color: lightgrey;
     text-align: center;
@@ -716,8 +716,14 @@ input[type=submit]:hover{
     transition-duration: 0.5s;
 }
 
-#dark_popup:target .title, #dark_popup:target .content{
-    opacity: 0.2;
+#dark_popup:target .title, #dark_popup:target .content, #dark_popup:target #produits, #dark_popup:target #contact, #dark_popup:target #nous, #dark_popup:target #slider, #dark_popup:target #bienvenue{
+    animation: 1s fade;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fade{
+    0%{opacity: 1}
+    100%{opacity: 0.2}
 }
 
 
diff --git a/index.html b/index.html
index c489c71..9e861a7 100644
--- a/index.html
+++ b/index.html
@@ -21,112 +21,121 @@
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
 
-    <div id="bienvenue">
-        <h1>Bienvenue sur le site de KyFlo !</h1>
-        <h2>Vendeur de robot depuis 2010 !</h2>
-    </div>
+    <div id="dark_popup">
 
-    <div id="slider">
-        <figure>
-            <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
-            <a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Promotions/promo2.png" alt></a>
-            <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Promotions/promo3.png" alt></a>
-            <a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Promotions/promo4.png" alt></a>
-            <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
-        </figure>
-    </div>
-
-    <div id="produits">
-        <div class="title">
-            <h1>Tout nos produits :</h1>
+        <div id="popup">
+            <a href="#"><h1>X</h1></a>
+            <h1>Votre question / votre retour a été pris en compte !</h1>
+            <a href="Assets/Pages/Autres/checkout.html"><h2>Voir mon panier</h2></a>
+            <a href="index.html"><h2>Continuer mes achats</h2></a>
         </div>
         
-        <div class="flex-container">
-            <div>
-                <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
-                    <h2>Robot Nao</h2>
-                </a>
-            </div>
-            <div class="out">
-                <h1>Rupture de stock</h1>
-                <a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
-                    <h2>Robot soldat</h2>
-                </a>
-            </div>
-            <div>
-                <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
-                    <h2>Robot r2d2</h2>
-                </a>
-            </div>
-            <div class="out">
-                <h1>Rupture de stock</h1>
-                <a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
-                    <h2>Robot valkyrie</h2>
-                </a>
-            </div>
-            <div>
-                <a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Produits/pepper.png" alt>
-                    <h2>Robot Pepper</h2>
-                </a>
-            </div>
-            <div>
-                <a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt>
-                    <h2>Terminator</h2>
-                </a>
-            </div>
-        </div>
-    </div> 
-    <div id="contact">
-        <div class="title">
-            <h1>Nous contacter :</h1>
+        <div id="bienvenue">
+            <h1>Bienvenue sur le site de KyFlo !</h1>
+            <h2>Vendeur de robot depuis 2010 !</h2>
         </div>
 
-        <div class="content">
-            <form action="commentaire.html">
-                <h2>Nom et Prénom :</h2>
-                <input type="text" required>
-    
-                <h2>Email :</h2>
-                <input type="email" required>
-    
-                <h2>Question :</h2>
-                <input type="text" placeholder="Question, suggestion, remarque" required>
-    
-                <h2>Valider:</h2>
-                <input type="submit" value="Envoyer">
-            </form>
+        <div id="slider">
+            <figure>
+                <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
+                <a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Promotions/promo2.png" alt></a>
+                <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Promotions/promo3.png" alt></a>
+                <a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Promotions/promo4.png" alt></a>
+                <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
+            </figure>
         </div>
-    </div>
 
-    <div id="nous">
-        <div class="title">
-            <h1>Qui sommes nous ?</h1>
-        </div>
-        <div class="flex-container">
-            <div>
-                <img src="Assets/Images/Sprites/benoit.png" alt>
-            </div>
-            <div>
-                <img src="Assets/Images/Sprites/florian.png" alt>
-            </div>
-            <div id="engagements">
-                <h2>Nos engagements :</h2>
-                <ul>
-                    <li>
-                        Etre soucieux de la qualité de nos produits
-                    </li>
-                    <li>
-                        Vendre des robots à la pointe de la technologie
-                    </li>
-                    <li>
-                        Respecter l'environnement
-                    </li>
-                </ul>
+        <div id="produits">
+            <div class="title">
+                <h1>Tout nos produits :</h1>
             </div>
             
+            <div class="flex-container">
+                <div>
+                    <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
+                        <h2>Robot Nao</h2>
+                    </a>
+                </div>
+                <div class="out">
+                    <h1>Rupture de stock</h1>
+                    <a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
+                        <h2>Robot soldat</h2>
+                    </a>
+                </div>
+                <div>
+                    <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
+                        <h2>Robot r2d2</h2>
+                    </a>
+                </div>
+                <div class="out">
+                    <h1>Rupture de stock</h1>
+                    <a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
+                        <h2>Robot valkyrie</h2>
+                    </a>
+                </div>
+                <div>
+                    <a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Produits/pepper.png" alt>
+                        <h2>Robot Pepper</h2>
+                    </a>
+                </div>
+                <div>
+                    <a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt>
+                        <h2>Terminator</h2>
+                    </a>
+                </div>
+            </div>
+        </div> 
+        <div id="contact">
+            <div class="title">
+                <h1>Nous contacter :</h1>
+            </div>
+
+            <div class="content">
+                <form action="#dark_popup">
+                    <h2>Nom et Prénom :</h2>
+                    <input type="text" required>
+        
+                    <h2>Email :</h2>
+                    <input type="email" required>
+        
+                    <h2>Question :</h2>
+                    <input type="text" placeholder="Question, suggestion, remarque" required>
+        
+                    <h2>Valider:</h2>
+                    <input type="submit" value="Envoyer">
+                </form>
+            </div>
+        </div>
+
+        <div id="nous">
+            <div class="title">
+                <h1>Qui sommes nous ?</h1>
+            </div>
+            <div class="flex-container">
+                <div>
+                    <img src="Assets/Images/Sprites/benoit.png" alt>
+                </div>
+                <div>
+                    <img src="Assets/Images/Sprites/florian.png" alt>
+                </div>
+                <div id="engagements">
+                    <h2>Nos engagements :</h2>
+                    <ul>
+                        <li>
+                            Etre soucieux de la qualité de nos produits
+                        </li>
+                        <li>
+                            Vendre des robots à la pointe de la technologie
+                        </li>
+                        <li>
+                            Respecter l'environnement
+                        </li>
+                    </ul>
+                </div>
+                
+            </div>
         </div>
     </div>
-
     
     <footer>
         <div id="acces">