From a96c3f62559da2496b5a464a5606200e8f6ae308 Mon Sep 17 00:00:00 2001
From: KEZEL BENOIT p1907091 <p1907091@univ-lyon1.fr>
Date: Tue, 17 Dec 2019 09:04:52 +0100
Subject: [PATCH] adding x

---
 Assets/Pages/Produits/nao.html        |   1 +
 Assets/Pages/Produits/pepper.html     | 123 +++++++++++++------------
 Assets/Pages/Produits/r2d2.html       | 121 +++++++++++++-----------
 Assets/Pages/Produits/terminator.html | 128 ++++++++++++++------------
 Assets/css/css.css                    |  11 ++-
 5 files changed, 211 insertions(+), 173 deletions(-)

diff --git a/Assets/Pages/Produits/nao.html b/Assets/Pages/Produits/nao.html
index 148b4fb..985811e 100644
--- a/Assets/Pages/Produits/nao.html
+++ b/Assets/Pages/Produits/nao.html
@@ -25,6 +25,7 @@
     <div id="dark_popup">
         
         <div id="popup">
+            <a href="#"><h1>X</h1></a>
             <h1>L'article Nao a bien été ajouté à votre panier !</h1>
             <a href="../Autres/checkout.html"><h2>Voir mon panier</h2></a>
             <a href="../../../index.html"><h2>Continuer mes achats</h2></a>
diff --git a/Assets/Pages/Produits/pepper.html b/Assets/Pages/Produits/pepper.html
index 36ae981..35b043e 100644
--- a/Assets/Pages/Produits/pepper.html
+++ b/Assets/Pages/Produits/pepper.html
@@ -22,73 +22,82 @@
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
 
-    <div class="title">
-        <h1>Résumé</h1>
-    </div>
-
-    <div class="content">
-        <div id="Produit">
-            <img src="../../Images/Produits/pepper.png" alt>
-            <h1>ROBOT PEPPER</h1>
-            <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
-            <h2>15 000€</h2>
-            <h3>Pepper est un robot humanoïde, développé par la société SoftBank Robotics (anciennement Aldebaran), capable de reconnaître certaines émotions</h3>
+    <div id="dark_popup">
+        <div id="popup">
+            <a href="#"><h1>X</h1></a>
+            <h1>L'article Pepper a bien été ajouté à votre panier !</h1>
+            <a href="../Autres/checkout.html"><h2>Voir mon panier</h2></a>
+            <a href="../../../index.html"><h2>Continuer mes achats</h2></a>
         </div>
-    </div>
 
-    <div class="title">
-        <h1>Caractéristiques techniques</h1>
-    </div>
+        <div class="title">
+            <h1>Résumé</h1>
+        </div>
 
-    <div class="content" id="Carac">
-        <h2>Pepper est le premier robot humanoïde au monde capable d'identifier les visages et les principales émotions humaines. Pepper a été conçu pour interagir avec les humains de la façon la plus naturelle possible à travers le dialogue et son écran
-            tactile.</h2>
-        <h2>Du haut de ses 1m20, Pepper n’a aucun mal pour percevoir son environnement et engager le dialogue lorsqu’il aperçoit une personne. L'écran tactile sur son torse affiche du contenu pour renforcer les messages et seconder la parole.</h2>
-        <h2>Son design tout en rondeurs assure une utilisation sans danger et une très bonne acceptation des utilisateurs.</h2>
-    </div>
-
-    <div class="title">
-        <h1>Commentaires clients</h1>
-    </div>
-
-    <div class="content">
-        <div id="Client">
-            <div>
-                <img src="../../Images/Icones/avatarH.png" alt>
-                <h1>Michel Dirate</h1>
-                <h2>Livraison très longue ! Cependant, produit de qualité.</h2>
-            </div>
-            <div>
-                <img src="../../Images/Icones/avatarF.png" alt>
-                <h1>Ines Foubi</h1>
-                <h2>Bon robot, ma famille l'adore !</h2>
-            </div>
-            <div>
-                <img src="../../Images/Icones/avatarH.png" alt>
-                <h1>Robert Ritar</h1>
-                <h2>Robot très serviable.</h2>
+        <div class="content">
+            <div id="Produit">
+                <img src="../../Images/Produits/pepper.png" alt>
+                <h1>ROBOT PEPPER</h1>
+                <button onclick="window.location.href='#dark_popup'">Ajouter au panier</button>
+                <h2>15 000€</h2>
+                <h3>Pepper est un robot humanoïde, développé par la société SoftBank Robotics (anciennement Aldebaran), capable de reconnaître certaines émotions</h3>
             </div>
         </div>
-    </div>
 
-    <div class="title">
-        <h1>Laissez nous un commentaire :</h1>
-    </div>
+        <div class="title">
+            <h1>Caractéristiques techniques</h1>
+        </div>
 
-    <div class="content" id="com">
-        <form action="../Autres/commentaire.html">
-            <h2>Nom et Prénom :</h2>
-            <input type="text" required>
+        <div class="content" id="Carac">
+            <h2>Pepper est le premier robot humanoïde au monde capable d'identifier les visages et les principales émotions humaines. Pepper a été conçu pour interagir avec les humains de la façon la plus naturelle possible à travers le dialogue et son écran
+                tactile.</h2>
+            <h2>Du haut de ses 1m20, Pepper n’a aucun mal pour percevoir son environnement et engager le dialogue lorsqu’il aperçoit une personne. L'écran tactile sur son torse affiche du contenu pour renforcer les messages et seconder la parole.</h2>
+            <h2>Son design tout en rondeurs assure une utilisation sans danger et une très bonne acceptation des utilisateurs.</h2>
+        </div>
 
-            <h2>Email :</h2>
-            <input type="email" required>
+        <div class="title">
+            <h1>Commentaires clients</h1>
+        </div>
 
-            <h2>Commentaire:</h2>
-            <input type="text" placeholder="Commentaire" required>
+        <div class="content">
+            <div id="Client">
+                <div>
+                    <img src="../../Images/Icones/avatarH.png" alt>
+                    <h1>Michel Dirate</h1>
+                    <h2>Livraison très longue ! Cependant, produit de qualité.</h2>
+                </div>
+                <div>
+                    <img src="../../Images/Icones/avatarF.png" alt>
+                    <h1>Ines Foubi</h1>
+                    <h2>Bon robot, ma famille l'adore !</h2>
+                </div>
+                <div>
+                    <img src="../../Images/Icones/avatarH.png" alt>
+                    <h1>Robert Ritar</h1>
+                    <h2>Robot très serviable.</h2>
+                </div>
+            </div>
+        </div>
 
-            <h2 id="valider">Valider:</h2>
-            <input type="submit" value="Envoyer">
-        </form>
+        <div class="title">
+            <h1>Laissez nous un commentaire :</h1>
+        </div>
+
+        <div class="content" id="com">
+            <form action="../Autres/commentaire.html">
+                <h2>Nom et Prénom :</h2>
+                <input type="text" required>
+
+                <h2>Email :</h2>
+                <input type="email" required>
+
+                <h2>Commentaire:</h2>
+                <input type="text" placeholder="Commentaire" required>
+
+                <h2 id="valider">Valider:</h2>
+                <input type="submit" value="Envoyer">
+            </form>
+        </div>
     </div>
     
     <footer>
diff --git a/Assets/Pages/Produits/r2d2.html b/Assets/Pages/Produits/r2d2.html
index 1fa4983..b8af9cc 100644
--- a/Assets/Pages/Produits/r2d2.html
+++ b/Assets/Pages/Produits/r2d2.html
@@ -22,69 +22,78 @@
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
 
-    <div class="title">
-        <h1>Résumé</h1>
-    </div>
+    <div id="dark_popup">
 
-    <div class="content">
-        <div id="Produit">
-            <img src="../../Images/Produits/r2d2.png" alt>
-            <h1>ROBOT R2D2</h1>
-            <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
-            <h2>5 000€</h2>
-            <h3>R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien</h3>
+        <div id="popup">
+            <a href="#"><h1>X</h1></a>
+            <h1>L'article R2D2 a bien été ajouté à votre panier !</h1>
+            <a href="../Autres/checkout.html"><h2>Voir mon panier</h2></a>
+            <a href="../../../index.html"><h2>Continuer mes achats</h2></a>
         </div>
-    </div>
 
-    <div class="title">
-        <h1>Caractéristiques techniques</h1>
-    </div>
+        <div class="title">
+            <h1>Résumé</h1>
+        </div>
 
-    <div class="content" id="Carac">
-        <h2>R2D2 est équipé de la dernière technologie de streaming musical pour vour lire toutes vos musiques préférées</h2>
-        <h2>Son design tout droit tiré de la série vous plongera dans l'univers Star Wars à coup sur !</h2>
-        <h2>Il possède une reconnaissance vocale très optimale qui vous permettras de le piloter rien qu'a la voix !</h2>
-    </div>
-
-    <div class="title">
-        <h1>Commentaires clients</h1>
-    </div>
-
-    <div class="content">
-        <div id="Client">
-            <div>
-                <img src="../../Images/Icones/avatarH.png" alt>
-                <h1>Patrick Busson</h1>
-                <h2>Petit robot sympathique, très utile au quotidien !</h2>
-            </div>
-            <div>
-                <img src="../../Images/Icones/avatarF.png" alt>
-                <h1>Clara Soufu</h1>
-                <h2>Grande fan de Star Wars, j'adore ce petit robot personnel !</h2>
+        <div class="content">
+            <div id="Produit">
+                <img src="../../Images/Produits/r2d2.png" alt>
+                <h1>ROBOT R2D2</h1>
+                <button onclick="window.location.href='#dark_popup'">Ajouter au panier</button>
+                <h2>5 000€</h2>
+                <h3>R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien</h3>
             </div>
         </div>
+
+        <div class="title">
+            <h1>Caractéristiques techniques</h1>
+        </div>
+
+        <div class="content" id="Carac">
+            <h2>R2D2 est équipé de la dernière technologie de streaming musical pour vour lire toutes vos musiques préférées</h2>
+            <h2>Son design tout droit tiré de la série vous plongera dans l'univers Star Wars à coup sur !</h2>
+            <h2>Il possède une reconnaissance vocale très optimale qui vous permettras de le piloter rien qu'a la voix !</h2>
+        </div>
+
+        <div class="title">
+            <h1>Commentaires clients</h1>
+        </div>
+
+        <div class="content">
+            <div id="Client">
+                <div>
+                    <img src="../../Images/Icones/avatarH.png" alt>
+                    <h1>Patrick Busson</h1>
+                    <h2>Petit robot sympathique, très utile au quotidien !</h2>
+                </div>
+                <div>
+                    <img src="../../Images/Icones/avatarF.png" alt>
+                    <h1>Clara Soufu</h1>
+                    <h2>Grande fan de Star Wars, j'adore ce petit robot personnel !</h2>
+                </div>
+            </div>
+        </div>
+
+        <div class="title">
+            <h1>Laissez nous un commentaire :</h1>
+        </div>
+
+        <div class="content" id="com">
+            <form action="../Autres/commentaire.html">
+                <h2>Nom et Prénom :</h2>
+                <input type="text" required>
+
+                <h2>Email :</h2>
+                <input type="email" required>
+
+                <h2>Commentaire:</h2>
+                <input type="text" placeholder="Commentaire" required>
+
+                <h2 id="valider">Valider:</h2>
+                <input type="submit" value="Envoyer">
+            </form>
+        </div>
     </div>
-
-    <div class="title">
-        <h1>Laissez nous un commentaire :</h1>
-    </div>
-
-    <div class="content" id="com">
-        <form action="../Autres/commentaire.html">
-            <h2>Nom et Prénom :</h2>
-            <input type="text" required>
-
-            <h2>Email :</h2>
-            <input type="email" required>
-
-            <h2>Commentaire:</h2>
-            <input type="text" placeholder="Commentaire" required>
-
-            <h2 id="valider">Valider:</h2>
-            <input type="submit" value="Envoyer">
-        </form>
-    </div>
-    
     <footer>
         <div id="acces">
             <table>
diff --git a/Assets/Pages/Produits/terminator.html b/Assets/Pages/Produits/terminator.html
index e05efb0..eb49765 100644
--- a/Assets/Pages/Produits/terminator.html
+++ b/Assets/Pages/Produits/terminator.html
@@ -22,69 +22,79 @@
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
 
-    <div class="title">
-        <h1>Résumé</h1>
-    </div>
+    <div id="dark_popup">
 
-    <div class="content">
-        <div id="Produit">
-            <img src="../../Images/Produits/terminator.png" alt>
-            <h1>ROBOT TERMINATOR</h1>
-            <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
-            <h2>50 000€</h2>
-            <h3>Le robot terminator est idéal si vous envisagez de conquérir la planète !</h3>
+        <div id="popup">
+            <a href="#"><h1>X</h1></a>
+            <h1>L'article Terminator a été ajouté à votre panier !</h1>
+            <a href="../Autres/checkout.html"><h2>Voir mon armée</h2></a>
+            <a href="../../../index.html"><h2>Continuer la domination du monde</h2></a>
+        </div>
+
+        <div class="title">
+            <h1>Résumé</h1>
+        </div>
+
+        <div class="content">
+            <div id="Produit">
+                <img src="../../Images/Produits/terminator.png" alt>
+                <h1>ROBOT TERMINATOR</h1>
+                <button onclick="window.location.href='#dark_popup'">Ajouter au panier</button>
+                <h2>50 000€</h2>
+                <h3>Le robot terminator est idéal si vous envisagez de conquérir la planète !</h3>
+            </div>
+        </div>
+
+        <div class="title">
+            <h1>Caractéristiques techniques</h1>
+        </div>
+
+        <div class="content" id="Carac">
+            <h2>Terminator est équipé de nombreux lazers et est doté d'une IA des plus avancée.</h2>
+            <h2>Son design humanoide lui permet de se fondre dans la masse une fois habillé !</h2>
+            <h2>Il peut controler l'esprit des autres personnes grâce aux ondes qu'il emet.</h2>
+        </div>
+
+        <div class="title">
+            <h1>Commentaires clients</h1>
+        </div>
+
+        <div class="content">
+            <div id="Client">
+                <div>
+                    <img src="../../Images/Icones/avatarF.png" alt>
+                    <h1>Aude Fousi</h1>
+                    <h2>Robot trop effrayant et trop cher !</h2>
+                </div>
+                <div>
+                    <img src="../../Images/Icones/avatarH.png" alt>
+                    <h1>Pierre Tarte</h1>
+                    <h2>Superbe robot, je vais pouvoir mettre mon plan de coup d'état a éxécution...</h2>
+                </div>
+            </div>
+        </div>
+
+        <div class="title">
+            <h1>Laissez nous un commentaire :</h1>
+        </div>
+
+        <div class="content" id="com">
+            <form action="../Autres/commentaire.html">
+                <h2>Nom et Prénom :</h2>
+                <input type="text" required>
+
+                <h2>Email :</h2>
+                <input type="email" required>
+
+                <h2>Commentaire:</h2>
+                <input type="text" placeholder="Commentaire" required>
+
+                <h2 id="valider">Valider:</h2>
+                <input type="submit" value="Envoyer">
+            </form>
         </div>
     </div>
 
-    <div class="title">
-        <h1>Caractéristiques techniques</h1>
-    </div>
-
-    <div class="content" id="Carac">
-        <h2>Terminator est équipé de nombreux lazers et est doté d'une IA des plus avancée.</h2>
-        <h2>Son design humanoide lui permet de se fondre dans la masse une fois habillé !</h2>
-        <h2>Il peut controler l'esprit des autres personnes grâce aux ondes qu'il emet.</h2>
-    </div>
-
-    <div class="title">
-        <h1>Commentaires clients</h1>
-    </div>
-
-    <div class="content">
-        <div id="Client">
-            <div>
-                <img src="../../Images/Icones/avatarF.png" alt>
-                <h1>Aude Fousi</h1>
-                <h2>Robot trop effrayant et trop cher !</h2>
-            </div>
-            <div>
-                <img src="../../Images/Icones/avatarH.png" alt>
-                <h1>Pierre Tarte</h1>
-                <h2>Superbe robot, je vais pouvoir mettre mon plan de coup d'état a éxécution...</h2>
-            </div>
-        </div>
-    </div>
-
-    <div class="title">
-        <h1>Laissez nous un commentaire :</h1>
-    </div>
-
-    <div class="content" id="com">
-        <form action="../Autres/commentaire.html">
-            <h2>Nom et Prénom :</h2>
-            <input type="text" required>
-
-            <h2>Email :</h2>
-            <input type="email" required>
-
-            <h2>Commentaire:</h2>
-            <input type="text" placeholder="Commentaire" required>
-
-            <h2 id="valider">Valider:</h2>
-            <input type="submit" value="Envoyer">
-        </form>
-    </div>
-    
     <footer>
         <div id="acces">
             <table>
diff --git a/Assets/css/css.css b/Assets/css/css.css
index 337ec4f..6d00346 100644
--- a/Assets/css/css.css
+++ b/Assets/css/css.css
@@ -725,7 +725,7 @@ input[type=submit]:hover{
     display:none;
     position: fixed;
     background-color : #ddd;
-    top: 50%;
+    top: 30%;
     padding: 1vw;
     border-radius: 1vw;
     left: 15%;
@@ -758,4 +758,13 @@ input[type=submit]:hover{
     font-size: 2.5vw;
     transition-duration: 0.5s;
 }
+
+#popup a[href="#"]{
+    float: right;
+}
+
+#popup a[href="#"] h1{
+    
+    margin-top: 0;
+}
 /*===============================================*/