diff --git a/frontend/img/pano.jpg b/frontend/img/pano.jpg
deleted file mode 100644
index dd712a646c701970674d12931296d48925ea1333..0000000000000000000000000000000000000000
Binary files a/frontend/img/pano.jpg and /dev/null differ
diff --git a/frontend/img/pano3.jpg b/frontend/img/pano3.jpg
deleted file mode 100644
index 091a55779275cb316a20867e44a9e092875298f5..0000000000000000000000000000000000000000
Binary files a/frontend/img/pano3.jpg and /dev/null differ
diff --git a/frontend/img/pokeball.png b/frontend/img/pokeball.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b15cbb102e756607572aec81debb064fb7b21a3
Binary files /dev/null and b/frontend/img/pokeball.png differ
diff --git a/frontend/img/pokeball2.svg b/frontend/img/pokeball2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..460714f364d8a8598bb47e3ebbc9e578d618cf62
--- /dev/null
+++ b/frontend/img/pokeball2.svg
@@ -0,0 +1 @@
+<?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
diff --git a/frontend/js/index.js b/frontend/js/index.js
index 4aa73596d65fbcf5caa2bff070d86e4e43e82626..d599169d4500ffe9af34026e992ad50f78c12efd 100644
--- a/frontend/js/index.js
+++ b/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++) {
diff --git a/frontend/menu.css b/frontend/menu.css
index ec278f598adcf712fe4b6a3841c6253979f78695..bd34cd70b317c78c665475bfa40dfc44d0500bae 100644
--- a/frontend/menu.css
+++ b/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%;
diff --git a/frontend/select.html b/frontend/select.html
index 27a182de610762973c0115761495ed8e1a70bf10..3b7573fd2eb43f502f60e74a035256d9bfbfc8b3 100644
--- a/frontend/select.html
+++ b/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>
diff --git a/frontend/shop.html b/frontend/shop.html
index c8a86f7f63d74abe209fb3a5295521c2068e0f9f..10abb61b97097618439ee4470f6b70cca41b87bd 100644
--- a/frontend/shop.html
+++ b/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>
diff --git a/frontend/style.css b/frontend/style.css
index 46c099ef7d21d0bc8ff300176a20db7374830c2c..f7c45dbbe3aeae497d4fab21b130a9696622c08a 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -1,11 +1,14 @@
-
+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 {