changement de design

frontend/img/pokeball2.svg

+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 100 100" height="100px" id="Layer_1" version="1.1" viewBox="0 0 100 100" width="100px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M50,5C30.67,5,15,20.67,15,40c0,0.289,0.015,0.574,0.022,0.861c0.392-1.575,13.013-2.496,27.438-2.739   c0.841-3.386,3.893-5.899,7.54-5.899c3.643,0,6.692,2.508,7.537,5.889c14.427,0.224,27.05,1.133,27.441,2.748   C84.985,40.573,85,40.288,85,40C85,20.67,69.33,5,50,5z M60.158,34.269c-2.025-3.603-5.864-5.935-10.158-5.935   c-4.301,0-8.144,2.338-10.167,5.949c-10.051,0.217-16.479,0.657-20.627,1.266C21.372,20.494,34.356,8.889,50,8.889   c15.633,0,28.61,11.59,30.789,26.629C76.639,34.908,70.205,34.473,60.158,34.269z"/><path d="M50,47.778c-3.603,0-6.625-2.453-7.509-5.778c-13.41,0.208-25.268,1.006-27.205,2.414   c0.888,7.057,3.88,13.456,8.323,18.557c5.327,6.116,10.594,12.285,15.66,18.618L50,95l10.729-13.411   c5.072-6.34,10.348-12.511,15.677-18.637c4.433-5.096,7.418-11.485,8.307-18.53c-1.94-1.377-13.797-2.187-27.206-2.412   C56.619,45.33,53.599,47.778,50,47.778z M60.028,45.949c10.777,0.243,17.05,0.796,20.23,1.274   C76.975,61.052,64.508,71.111,50,71.111c-14.517,0-26.989-10.072-30.264-23.912c3.166-0.48,9.435-1.033,20.227-1.263   c2.06,3.482,5.845,5.731,10.037,5.731C54.184,51.667,57.966,49.423,60.028,45.949z"/></g></svg>
\ No newline at end of file

frontend/js/index.js

@@ -136,9 +136,16 @@
 
             let names = document.getElementsByClassName("css-button-text");
             let types = document.getElementsByClassName("type");
+           
 
             for(let i = init; i<init+number; i++){
-                names[i].innerHTML = i + 1 + " - " + Poks.results[i].name;
+                names[i].innerHTML = Poks.results[i].name;
+
+                let before = document.createElement("p");
+                before.innerHTML = i+1;
+                before.className ="before";
+                
+                names[i].before(before);
                 
                 let stats = get(Poks.results[i].url);
 
@@ -168,6 +175,7 @@
 
         names = document.getElementsByClassName("css-button-text");
         boxs = document.getElementsByClassName("box");
+        
 
         for (let i = 0; i < names.length; i++) {
             

frontend/menu.css

@@ -40,6 +40,7 @@ html {
 body{
     display: flex;
     flex-direction: column;
+    overflow-y: hidden;
 }
 
 nav {
@@ -49,8 +50,8 @@ nav {
     width: 100vw;
     height: 17.5vh;
     background-image: url(img/pano2.jpg);
-    background-position: top;
-    background-size: 200%;
+    background-position: 0 22vh;
+    background-size: 100%;
     overflow-y: hidden;
 
 }
@@ -60,23 +61,29 @@ nav {
     top: 0;
     left: 50%;
     width: 30vw;
-    height: 11.5vh; 
+    height: 12vh; 
     margin-top: 2.5vh;
     text-align: center;
     font-size: 10vh;
-    font-family: sans-serif;
+    font-family: gb;
     transform: translateX(-50%);
-    background-color: white;
+    background-color: rgb(255, 255, 255);
     mix-blend-mode: screen;
     overflow: hidden;
+    border-radius: 20px 20px;
+    backdrop-filter: blur(8px);
+    color: rgba(255,27,0,1);
 }
 
+#fill:hover{
+    
+}
 
 
 #logo{
 
-    width: 100%;
-    height: 7.5vh;
+    
+    height: 10vh;
     position: relative;
     top: 50%;
     left: 10%;
@@ -85,6 +92,7 @@ nav {
     z-index: 1;
 
 
+
 }
 
 .shop{
@@ -96,7 +104,7 @@ nav {
 #sac {
     
     width: 100%;
-    height: 7.5vh;
+    height: 10vh;
     position: relative;
     left:80%;
     top: 50%;

frontend/select.html

@@ -22,7 +22,11 @@
         <p id="fill">POKESHOP</p>
         <div class="shop">
 
-            <div id="sac"></div>
+            <div id="sac">
+               
+                <img src="img/pokeball.png" id="logo">
+                
+            </div>
         </div>
     </nav>
 

frontend/shop.html

@@ -21,7 +21,7 @@
         <div class="shop">
 
             <div id="sac">
-                <img src="img/sac.svg" id="logo">
+                <img src="img/pokeball.png" id="logo">
             </div>
         </div>
         

frontend/style.css

 
 
-
+html{
+    overflow-y: hidden;
+}
 
 main{
     height: 85vh;
     width: 100vw;
     background-color: white;
+    
 }
 
 .search {
@@ -23,11 +26,11 @@ input {
     height: 7.5vh;
     width: 50vw;
     border-radius: 10px 10px;
-    border: solid rgba(135, 135, 135, 0.5);
+    border: none;
     font-size: large;
     padding-left: 2vh;
     outline: none;
-    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
+    box-shadow:inset 7px 7px 20px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 7px 7px 20px 0px rgba(0,0,0,.1);
     
 }
 
@@ -59,6 +62,20 @@ input:focus {
 
 }
 
+.before{
+
+    
+    font-size: small;
+    text-align: center;
+    background-color: rgba(255,27,0,1);
+    width: 25%;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    color:white;
+    border-radius: 20px 20px;
+}
+
 
 .canvas {