From 9407a4931d015e0b943fd20a53f2349aaefa8dc5 Mon Sep 17 00:00:00 2001
From: Kybo <benoit.kezel@gmail.com>
Date: Mon, 16 Dec 2019 22:04:27 +0100
Subject: [PATCH] adding popup

---
 Assets/Pages/Produits/nao.html | 136 ++++++++++++++++++---------------
 Assets/css/css.css             |  53 +++++++++++++
 2 files changed, 126 insertions(+), 63 deletions(-)

diff --git a/Assets/Pages/Produits/nao.html b/Assets/Pages/Produits/nao.html
index a4c1715..148b4fb 100644
--- a/Assets/Pages/Produits/nao.html
+++ b/Assets/Pages/Produits/nao.html
@@ -22,73 +22,83 @@
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
 
-    <div class="title">
-        <h1>Résumé</h1>
-    </div>
+    <div id="dark_popup">
+        
+        <div id="popup">
+            <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>
+        </div>
 
-    <div class="content">
-        <div id="Produit">
-            <img src="../../Images/Produits/nao.png" alt>
-            <h1>ROBOT NAO</h1>
-            <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
-            <h2>5 000€</h2>
-            <h3>Nao est un robot humanoide qui vous assiste dans vos tâches quotidiennes</h3>
+        <div class="title">
+            <h1>Résumé</h1>
+        </div>
+
+        <div class="content">
+            <div id="Produit">
+                <img src="../../Images/Produits/nao.png" alt>
+                <h1>ROBOT NAO</h1>
+                <button onclick="window.location.href='#dark_popup'">Ajouter au panier</button>
+                <h2>5 000€</h2>
+                <h3>Nao est un robot humanoide qui vous assiste dans vos tâches quotidiennes</h3>
+            </div>
+        </div>
+
+
+        <div class="title">
+            <h1>Caractéristiques techniques</h1>
+        </div>
+
+        <div class="content" id="Carac">
+            <h2>La plateforme robotique NAO existe en différents modèles qui comportent de 14 à 25 degrés de liberté. Elle est équipée d'une centrale inertielle avec un accéléromètre 3 axes et 2 gyromètres, de 2 sonars utilisant des capteurs à ultrason (émetteurs
+                et récepteurs), de 8 capteurs de pressions résistifs sous les pieds et de 2 bumpers. NAO dispose de 90 minutes d'autonomie.</h2>
+            <h2>Le robot dispose également d'un système multimédia évolué incluant quatre microphones (pour la reconnaissance vocale et la localisation de la source sonore), deux haut-parleurs (pour la synthèse vocale), et deux caméras HD (1280 × 960 pixels)
+                (pour la localisation ou la reconnaissance de visage ou d'objet). Ces deux caméras couleurs, positionnées verticalement, lui permettent de voir une personne de 1,8 m de la tête au pied à 1,5 m. Malheureusement, pour le moment, ces deux
+                caméras ne sont pas activables en même temps.</h2>
+            <h2>La plateforme robotique NAO est livrée avec une suite logicielle qui comporte un outil de programmation graphique (Choregraphe), un simulateur physique (NaoSim) et un kit de développement (SDK) qui permet de développer en Python (scripts des
+                modules Chroregraphe) et C++ (modules embarqués). Des ponts en C#, Java et Matlab existent également. NAO est compatible avec Microsoft Robotics Studio, Cyberbotics Webots et Gostai Studio (Urbi).</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>Isabelle Dunand</h1>
+                    <h2>Superbe robot, il est tout à fait fonctionnel !</h2>
+                </div>
+                <div>
+                    <img src="../../Images/Icones/avatarH.png" alt>
+                    <h1>Richard Mauron</h1>
+                    <h2>Excellent ! Très bonne qualité, j'ai adoré le programmer !</h3>
+                </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>La plateforme robotique NAO existe en différents modèles qui comportent de 14 à 25 degrés de liberté. Elle est équipée d'une centrale inertielle avec un accéléromètre 3 axes et 2 gyromètres, de 2 sonars utilisant des capteurs à ultrason (émetteurs
-            et récepteurs), de 8 capteurs de pressions résistifs sous les pieds et de 2 bumpers. NAO dispose de 90 minutes d'autonomie.</h2>
-        <h2>Le robot dispose également d'un système multimédia évolué incluant quatre microphones (pour la reconnaissance vocale et la localisation de la source sonore), deux haut-parleurs (pour la synthèse vocale), et deux caméras HD (1280 × 960 pixels)
-            (pour la localisation ou la reconnaissance de visage ou d'objet). Ces deux caméras couleurs, positionnées verticalement, lui permettent de voir une personne de 1,8 m de la tête au pied à 1,5 m. Malheureusement, pour le moment, ces deux
-            caméras ne sont pas activables en même temps.</h2>
-        <h2>La plateforme robotique NAO est livrée avec une suite logicielle qui comporte un outil de programmation graphique (Choregraphe), un simulateur physique (NaoSim) et un kit de développement (SDK) qui permet de développer en Python (scripts des
-            modules Chroregraphe) et C++ (modules embarqués). Des ponts en C#, Java et Matlab existent également. NAO est compatible avec Microsoft Robotics Studio, Cyberbotics Webots et Gostai Studio (Urbi).</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>Isabelle Dunand</h1>
-                <h2>Superbe robot, il est tout à fait fonctionnel !</h2>
-            </div>
-            <div>
-                <img src="../../Images/Icones/avatarH.png" alt>
-                <h1>Richard Mauron</h1>
-                <h2>Excellent ! Très bonne qualité, j'ai adoré le programmer !</h3>
-            </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 bd79dd8..337ec4f 100644
--- a/Assets/css/css.css
+++ b/Assets/css/css.css
@@ -22,6 +22,7 @@ img {
 .content {
     background-color: #ddd;
     padding: 2vw;
+    opacity: 1;
     animation: 1s slider;
 }
 
@@ -245,12 +246,14 @@ div#slider figure {
     padding: 6vw;
     margin: 0;
     color: white;
+ 
     text-align: center;
 }
 
 .title{
     background-color: rgba(255, 255, 255, 0.4);
     animation: 1s right;
+    opacity: 1;
 }
 /*================================================*/
 
@@ -705,4 +708,54 @@ input[type=submit]:hover{
 
 
 
+
+#dark_popup:target #popup{
+    display:block;
+    animation: 1s popup;
+    animation-fill-mode: forwards;
+    transition-duration: 0.5s;
+}
+
+#dark_popup:target .title, #dark_popup:target .content{
+    opacity: 0.2;
+}
+
+
+#popup{
+    display:none;
+    position: fixed;
+    background-color : #ddd;
+    top: 50%;
+    padding: 1vw;
+    border-radius: 1vw;
+    left: 15%;
+    width: 70%;
+    opacity: 1;
+    z-index: 1;
+}
+
+
+@keyframes popup{
+    0%{margin-top:-100%}
+    100%{margin-top:0%}
+}
+
+#popup h1{
+    color: black;
+    font-size: 2.5vw;
+}
+
+#popup h2{
+    color: rgb(61, 61, 61);
+    padding-top: 1vw;
+    font-size: 2vw;
+    cursor: pointer;
+    text-align: center;
+    border-top: 0.1vw solid rgb(59, 59, 59);
+}
+
+#popup h2:hover{
+    font-size: 2.5vw;
+    transition-duration: 0.5s;
+}
 /*===============================================*/