From 3bb438a1b73adefc4b850be5fa2d98c87d1b36b4 Mon Sep 17 00:00:00 2001
From: Guillaume Joffre <guillaume.joffre12@gmail.com>
Date: Mon, 11 Apr 2022 19:11:25 +0200
Subject: [PATCH] marges + new svg

---
 assets/css/menu.css       |   6 +-
 assets/css/page/index.css |   1 +
 assets/css/queries.css    |   2 +-
 structure/menu.php        | 155 +++++++++++++++++++++++++++++++++++++-
 4 files changed, 160 insertions(+), 4 deletions(-)

diff --git a/assets/css/menu.css b/assets/css/menu.css
index c2f474a..1fa74d7 100644
--- a/assets/css/menu.css
+++ b/assets/css/menu.css
@@ -1,7 +1,9 @@
 .menuimg {
 	position: fixed;
 	bottom: 0;
-	left: 0;
-	width: 100%;
+	right: 0;
+	width: 100vw;
+	height: auto;
+	min-width: 100vmax;
 	z-index: 2;
 }
\ No newline at end of file
diff --git a/assets/css/page/index.css b/assets/css/page/index.css
index e7a9e8b..2f8c838 100644
--- a/assets/css/page/index.css
+++ b/assets/css/page/index.css
@@ -6,4 +6,5 @@
 	margin-right: auto;
 	padding: 50px;
 	font-size: 23px;
+	margin-top: 40px;
 }
\ No newline at end of file
diff --git a/assets/css/queries.css b/assets/css/queries.css
index 4103326..929b698 100644
--- a/assets/css/queries.css
+++ b/assets/css/queries.css
@@ -5,7 +5,7 @@
         font-size: 3vw;
     }
 
-    section {
+    section, #msg_acc {
         width: 95%;
     }
 
diff --git a/structure/menu.php b/structure/menu.php
index a7ff5ac..3425223 100644
--- a/structure/menu.php
+++ b/structure/menu.php
@@ -4,5 +4,158 @@ if(!isset($relativepath)) {
 }
 ?>
 
+<svg class="menuimg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="512" height="96" x="0px" y="0px"
+     viewBox="0 416 512 96" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:#AA572E;}
+    .st1{fill:#C06538;}
+    .st2{fill:#2B0A00;}
+    .st3{fill:#914522;}
+    .st4{fill:#9B4D25;}
+    .st5{fill:#A04E26;}
+    .st6{fill:#491A05;}
+    .st7{fill:#3F1403;}
+    .st8{fill:#BA6135;}
+    .st9{fill:#00A15D;}
+    .st10{fill:#00A25D;}
+    .st11{fill:url(#grad1);}
+    .st12{fill:url(#grad2);}
+    .st13{fill:#FFFFFF;}
+    .st14{opacity:0.66;fill:#FFFFFF;}
+    .st15{opacity:0.3;}
+    .st16{fill:#392313;}
+    .st17{fill:#492715;}
+
+    use {
+        transition: transform 0.1s;
+    }
+
+    use:hover {
+        transform: translateY(-1.5px);
+    }
+
+    #Tuyau {
+        transition: opacity 0.2s;
+    }
+
+    #Tuyau:hover {
+        opacity: 0.2;
+    }
+</style>
+
+    <symbol id="Brick" viewBox="0 0 47 20">
+        <rect x="1" y="1" class="st0" width="45" height="18"/>
+        <rect x="1.5" y="0" class="st1" width="44" height="1.5"/>
+        <rect x="1.5" y="18.5" class="st2" width="44" height="1.5"/>
+        <rect x="45.5" y="1.5" class="st3" width="1.5" height="17"/>
+        <rect y="1.5" class="st4" width="1.5" height="17"/>
+        <polygon class="st5" points="47,1.5 45.5,1.5 45.5,0"/>
+        <polygon class="st6" points="45.5,20 47,18.5 45.5,18.5"/>
+        <polygon class="st7" points="0,18.5 1.5,18.5 1.5,20"/>
+        <polygon class="st8" points="0,1.5 1.5,1.5 1.5,0"/>
+    </symbol>
+
+    <g id="Tuyau">
+        <!-- Ouverture : Fond -->
+        <rect  x="431" y="429.5" class="st9" width="44" height="14"/>
+
+        <!-- Cylindre : Fond-->
+        <rect id="Fond_-_Tuyau" x="436" y="443.5" class="st10" width="34" height="50"/>
+
+        <linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="431" y1="436.5" x2="469" y2="436.5">
+            <stop  offset="0" style="stop-color:#03A663"/>
+            <stop  offset="0.2204" style="stop-color:#03A160"/>
+            <stop  offset="0.4959" style="stop-color:#029157"/>
+            <stop  offset="0.7995" style="stop-color:#017848"/>
+            <stop  offset="1" style="stop-color:#00633C"/>
+        </linearGradient>
+
+        <!-- Ouverture : Dégradé -->
+        <rect x="431" y="429.5" class="st11" width="38" height="14"/>
+
+        <linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="436" y1="468.5" x2="464" y2="468.5">
+            <stop  offset="0" style="stop-color:#03A663"/>
+            <stop  offset="0.2204" style="stop-color:#03A160"/>
+            <stop  offset="0.4959" style="stop-color:#029157"/>
+            <stop  offset="0.7995" style="stop-color:#017848"/>
+            <stop  offset="1" style="stop-color:#00633C"/>
+        </linearGradient>
+
+        <!-- Tuyau : Dégradé -->
+        <rect x="436" y="443.5" class="st12" width="28" height="50"/>
+
+        <!-- Ouverture : Reflet Fort -->
+        <rect x="439.93" y="429.5" class="st13" width="5.5" height="14"/>
+
+        <!-- Ouverture : Reflet Faible -->
+        <rect x="438.43" y="429.5" class="st14" width="1.5" height="14"/>
+
+        <!-- Cylindre : Reflet Fort -->
+        <rect x="443.43" y="445.39" class="st13" width="5.5" height="48.11"/>
+
+        <!-- Cylindre : Reflet Faible -->
+        <rect x="441.93" y="445.39" class="st14" width="1.5" height="48.11"/>
+
+        <!-- Ouverture : Ombre projetée -->
+        <rect  x="436" y="443.5" class="st15" width="34" height="1.35"/>
+    </g>
+
+    <!-- Tuyau : Ombre -->
+    <rect id="Ombre_-_Tuyau" x="436" y="472.27" class="st15" width="34" height="1.35"/>
+
+    <!-- Fond -->
+    <rect id="Fond_-_Briques" x="0" y="474" class="st16" width="512" height="38"/>
+
+    <!-- Fond : Surface -->
+    <rect id="Surface_-_Briques" x="0" y="473.62" class="st17" width="512" height="0.75"/>
+
+
+    <!-- Top layer (LtR) -->
+    <use xlink:href="#Brick" width="47" height="20" x="0" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="48.85" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="97.7" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="146.55" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="195.4" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="244.25" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="293.1" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="341.95" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="390.8" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="439.65" y="471.65"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="488.5" y="471.65"/>
+
+    <!-- Bottom Layer (LtR) -->
+    <use xlink:href="#Brick" width="47" height="20" x="-23.5" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="25.35" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="74.2" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="123.05" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="171.9" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="220.75" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="269.6" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="318.45" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="367.3" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="416.15" y="493.5"/>
+
+    <use xlink:href="#Brick" width="47" height="20" x="465" y="493.5"/>
+
+</svg>
 
-<img src="<?php echo $relativepath.'assets/img/menu/menu.svg'; ?>" class="menuimg">
\ No newline at end of file