diff --git a/frontend/button.css b/frontend/button.css
new file mode 100644
index 0000000000000000000000000000000000000000..c673e6ff0eabc0e156120040f07c0f4dd56439b9
--- /dev/null
+++ b/frontend/button.css
@@ -0,0 +1,96 @@
+.css-button {
+
+
+ width: 118px;
+ position: relative;
+
+ left: 50%;
+ transform: translate(-50%,0);
+ overflow: hidden;
+ cursor: pointer;
+ color: #fff;
+
+ }
+
+ p.css-button-text {
+ width: 100%;
+ text-align: center;
+ color: #232323;
+ font-size: 1vw;
+ }
+
+ .css-button-inner-text {
+ font-size: 1vw;
+ }
+
+ .css-button-inner {
+
+
+ width: 165px;
+ position: relative;
+ left: -4px;
+ top: -1px;
+
+ background-color: rgba(255,27,0,1);
+ text-align: center;
+ -webkit-transform: skew(-42deg) translate(300px,0);
+ -moz-transform: skew(-42deg) translate(300px,0);
+ -o-transform: skew(-42deg) translate(300px,0);
+ transform: skew(-42deg) translate(300px,0);
+ -webkit-animation-name: buttonx-out;
+ -webkit-animation-duration: .7s;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ -moz-animation-name: buttonx-out;
+ -moz-animation-duration: .7s;
+ -moz-animation-iteration-count: 1;
+ -moz-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ animation-name: buttonx-out;
+ animation-duration: .7s;
+ animation-iteration-count: 1;
+ animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ }
+
+ .reset-skew {
+ -moz-transform: skew(40deg);
+ -o-transform: skew(40deg);
+ transform: skew(40deg);
+ }
+
+ .css-button:hover > .css-button-inner {
+ -webkit-animation-name: buttonx-in;
+ -webkit-animation-duration: .6s;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ -moz-animation-name: buttonx-in;
+ -moz-animation-duration: .6s;
+ -moz-animation-iteration-count: 1;
+ -moz-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ animation-name: buttonx-in;
+ animation-duration: .6s;
+ animation-iteration-count: 1;
+ animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+ -moz-transform: skew(-42deg) translate(-20px, -0px);
+ -o-transform: skew(-42deg) translate(-20px, -0px);
+ transform: skew(-42deg) translate(-20px, -0px);
+ }
+
+ @keyframes buttonx-in {
+ from {transform:skew(-42deg) translate(-300px, 0);}
+ to {transform:skew(-42deg) translate(-20px, -0px);}
+ }
+
+ @keyframes buttonx-out {
+ from {transform: skew(-42deg) translate(0, 0);}
+ to {transform: skew(-42deg) translate(300px, -0px);}
+ }
+
+ @-webkit-keyframes buttonx-in {
+ from {transform:skew(-42deg) translate(-300px, 0);}
+ to {transform:skew(-42deg) translate(-20px, -0px);}
+ }
+
+ @-webkit-keyframes buttonx-out {
+ from {transform: skew(-42deg) translate(0, 0);}
+ to {transform: skew(-42deg) translate(300px, -0px);}
+ }
\ No newline at end of file
diff --git a/frontend/img/pano.jpg b/frontend/img/pano.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dd712a646c701970674d12931296d48925ea1333
Binary files /dev/null and b/frontend/img/pano.jpg differ
diff --git a/frontend/img/pano2.jpg b/frontend/img/pano2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2636df6264b3b31c2126e9442abcaca24c810366
Binary files /dev/null and b/frontend/img/pano2.jpg differ
diff --git a/frontend/img/pano3.jpg b/frontend/img/pano3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..091a55779275cb316a20867e44a9e092875298f5
Binary files /dev/null and b/frontend/img/pano3.jpg differ
diff --git a/frontend/js/index.js b/frontend/js/index.js
index 73e539498dfe09431c52afb27f5ca7903eaf53b1..4aa73596d65fbcf5caa2bff070d86e4e43e82626 100644
--- a/frontend/js/index.js
+++ b/frontend/js/index.js
@@ -41,6 +41,34 @@
}
+
+ function createStyleButton(){
+
+ let cssButton = document.createElement("div");
+ cssButton.className = "css-button";
+
+ let cssButtonText = document.createElement("p");
+ cssButtonText.className = "css-button-text";
+
+ let cssButtonInner = document.createElement("div");
+ cssButtonInner.className = "css-button-inner";
+
+ let resetSkew = document.createElement("div");
+ resetSkew.className = "reset-skew";
+
+ let cssButtonInnerText = document.createElement("p");
+ cssButtonInnerText.className = "css-button-inner-text";
+ cssButtonInnerText.innerHTML = "Select";
+
+ cssButton.appendChild(cssButtonText);
+ cssButton.appendChild(cssButtonInner);
+ cssButtonInner.appendChild(resetSkew);
+ resetSkew.appendChild(cssButtonInnerText);
+
+ return cssButton;
+
+ }
+
function boxGenerator(init,number){
@@ -57,14 +85,9 @@
img.className = "canvas";
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + i + ".png";
- var name = document.createElement("p");
- name.className = "names";
-
- var add = document.createElement("p");
- add.className = "add";
- add.innerHTML = "Select";
+
- var button = document .createElement("button");
+ var button = createStyleButton();
button.id = i;
@@ -72,11 +95,11 @@
- let pokemon = document.getElementById(i).parentNode.children;
+ let pokemon = document.getElementById(i).children;
- let name = pokemon[2].innerHTML;
- let type = pokemon[1].children
+ let name = pokemon[0].innerHTML;
+ let type = document.getElementById(i).parentNode.children[1].children;
let data = [name,type[0].src,type[1].src,"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + i + ".png"]
@@ -93,8 +116,6 @@
box.appendChild(img);
box.appendChild(typeBox(poke))
- box.appendChild(name);
- box.appendChild(add);
box.appendChild(button);
tab[0].appendChild(box);
@@ -113,7 +134,7 @@
pokemons.then(Poks => {
- let names = document.getElementsByClassName("names");
+ let names = document.getElementsByClassName("css-button-text");
let types = document.getElementsByClassName("type");
for(let i = init; i<init+number; i++){
@@ -145,7 +166,7 @@
input = document.getElementById("poke");
filter = input.value.toUpperCase();
- names = document.getElementsByClassName("names");
+ names = document.getElementsByClassName("css-button-text");
boxs = document.getElementsByClassName("box");
for (let i = 0; i < names.length; i++) {
diff --git a/frontend/js/product.js b/frontend/js/product.js
index b1717b9aac6998896a5943485a5afcb6574f1b69..495af4ef47bf3f9c0e4883f2d9d561a6fbc5fc3e 100644
--- a/frontend/js/product.js
+++ b/frontend/js/product.js
@@ -142,11 +142,23 @@
text.className = "text";
pokemon.then(data =>{
- title.innerHTML = data.abilities[0].ability.name;
+
+ if(data.abilities.length > 1){
+ for(let i = 0; i < data.abilities.length; i++){
+ title.innerHTML = data.abilities[i].ability.name;
+
+ get(data.abilities[i].ability.url).then(ability => {
+ text.innerHTML = ability.effect_entries[1].effect;
+ });
+ }
+ }
+ else{
+ title.innerHTML = data.abilities[0].ability.name;
- get(data.abilities[0].ability.url).then(ability => {
- text.innerHTML = ability.effect_entries[1].effect;
- });
+ get(data.abilities[0].ability.url).then(ability => {
+ text.innerHTML = ability.effect_entries[1].effect;
+ });
+ }
});
talent.appendChild(title);
@@ -237,23 +249,25 @@
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png";
img.alt = pokemon;
- let button = document.createElement("p");
- button.className = "shiny";
- button.innerHTML = "Shiny";
+ let button = document.createElement("button");
+ button.className = "btn-5";
+
+ let span = document.createElement("span");
+ span.innerHTML = "Shiny";
+
+ button.appendChild(span);
button.onclick = function(){
if(img.src == "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png"){
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png";
- button.style.backgroundColor = "rgba(200, 200, 200)"
- button.style.color = "rgb(255, 83, 64)";
+ button.className = "btn-2";
}
else{
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png"
- button.style.backgroundColor = "rgb(255, 83, 64)"
- button.style.color = "white";
+ button.className = "btn-5";
}
}
diff --git a/frontend/menu.css b/frontend/menu.css
index db88eb7a8fc1506f90b9ba4f37db25e2fd26c6fa..ec278f598adcf712fe4b6a3841c6253979f78695 100644
--- a/frontend/menu.css
+++ b/frontend/menu.css
@@ -47,54 +47,61 @@ nav {
display: flex;
flex-direction: row;
width: 100vw;
- height: 15vh;
- background-color: rgb(255, 83, 64);
+ height: 17.5vh;
+ background-image: url(img/pano2.jpg);
+ background-position: top;
+ background-size: 200%;
overflow-y: hidden;
}
#fill {
- width: 80vw;
- height: 15vh;
- padding-top: 2.5vh;
-
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 30vw;
+ height: 11.5vh;
+ margin-top: 2.5vh;
text-align: center;
font-size: 10vh;
- font-family: title;
- color: rgb(11, 2, 61);
-
+ font-family: sans-serif;
+ transform: translateX(-50%);
+ background-color: white;
+ mix-blend-mode: screen;
+ overflow: hidden;
}
#logo{
- width: 7.5vh;
+ width: 100%;
height: 7.5vh;
position: relative;
top: 50%;
- left: 50%;
+ left: 10%;
+ transform: translate(-50%,0);
transform: translate(-50%,-50%);
-
+ z-index: 1;
}
.shop{
- width: 10vw;
+ width: 50vw;
}
#sac {
- width: 5vh;
- height: 5vh;
+ width: 100%;
+ height: 7.5vh;
position: relative;
- left: 50%;
+ left:80%;
top: 50%;
- transform: translate(-50%,-50%);
- background-image: url("img/sac.svg");
+ transform: translate(0,-50%);
+
}
diff --git a/frontend/select.css b/frontend/select.css
index b609513c78da33757625aef237ebade7a148c7b3..8bed0eac99e1e3c75aaa2f2bcd59d31a4a676630 100644
--- a/frontend/select.css
+++ b/frontend/select.css
@@ -76,12 +76,7 @@ button {
}
-button:hover {
- width: 16.5%;
- height: 16.5%;
-
-}
.add {
@@ -109,7 +104,9 @@ button:hover {
flex-direction: row;
width: 60vw;
margin-left: 2.5vw;
- margin-right: 2.5vw;
+ margin-right: 2.5vw;
+ padding-bottom: 3vh;
+ padding-top: 2.5vh;
}
@@ -154,27 +151,33 @@ button:hover {
width: 15vw;
display: none;
overflow-y: hidden;
- border: gray 2px groove;
+ 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);
+ border-radius: 20px 20px;
}
.abilities{
display: block;
-
margin-right: 1%;
width: 35%;
height: 30vw;
- border: solid 2px rgba(150, 150, 150, 1);
+ border-radius: 0 20px 20px 20px;
background-color: white;
+ 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);
}
.abilities::-webkit-scrollbar {
width: 3px;
+
}
+
+
.abilities::-webkit-scrollbar-thumb {
- background-color: gray;
+
+ background-color: rgba(128, 128, 128, 0.576);
+
}
.ability {
@@ -208,22 +211,7 @@ button:hover {
}
-.shiny {
- font-size: 1.5vh;
-
- position: relative;
- left: 50%;
- transform: translateX(-50%);
- width: 15%;
- background-color: rgb(255, 83, 64);
- height: 2vh;
- color: white;
- text-align: center;
- cursor: pointer;
-
- overflow-y: hidden;
-}
.type{
padding-top: 0;
@@ -257,4 +245,119 @@ button:hover {
margin-left: 4%;
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+.btn-5 {
+
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ display: inline-block;
+ 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);
+ outline: none;
+ width: 100px;
+ height: 4vh;
+ width: 30%;
+ padding: 0;
+ border: none;
+
+ background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
+ color: white;
+ font-size: 1.5vh;
+
+ }
+ .btn-5:hover {
+ color: #f0094a !important;
+ background: whitesmoke !important;
+ box-shadow:none;
+ }
+
+
+
+ .btn-5:before,
+ .btn-5:after{
+ content:'';
+ position:absolute;
+ top:0;
+ right:0;
+ height:2px;
+ width:0;
+ background: rgba(255,27,0,1);
+ box-shadow:
+ -1px -1px 5px 0px #fff,
+ 7px 7px 20px 0px #0003,
+ 4px 4px 5px 0px #0002;
+ transition:400ms ease all;
+ }
+ .btn-5:after{
+ right:inherit;
+ top:inherit;
+ left:0;
+ bottom:0;
+ }
+ .btn-5:hover:before,
+ .btn-5:hover:after{
+ width:100%;
+ transition:800ms ease all;
+ }
+
+
+
+ .btn-2 {
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: inline-block;
+ 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);
+ outline: none;
+ width: 100px;
+ height: 4vh;
+ width: 30%;
+ padding: 0;
+ border: none;
+
+ background: linear-gradient(0deg,whitesmoke 0%, whitesmoke 100%);
+ color: rgba(255,27,0,1);
+ font-size: 1.5vh;
+
+ }
+ .btn-2:hover {
+ color: whitesmoke !important;
+ background:rgba(255,27,0,1) !important;
+ box-shadow:none;
+ }
+
+
+
+ .btn-2:before,
+ .btn-2:after{
+ content:'';
+ position:absolute;
+ top:0;
+ right:0;
+ height:2px;
+ width:0;
+ background: black;
+ box-shadow:
+ -1px -1px 5px 0px #fff,
+ 7px 7px 20px 0px #0003,
+ 4px 4px 5px 0px #0002;
+ transition:400ms ease all;
+ }
+ .btn-2:after{
+ right:inherit;
+ top:inherit;
+ left:0;
+ bottom:0;
+ }
+ .btn-2:hover:before,
+ .btn-2:hover:after{
+ width:100%;
+ transition:800ms ease all;
+ }
\ No newline at end of file
diff --git a/frontend/select.html b/frontend/select.html
index cf928294d66faa8f2235c6f6daa4c53a4a97c295..27a182de610762973c0115761495ed8e1a70bf10 100644
--- a/frontend/select.html
+++ b/frontend/select.html
@@ -10,6 +10,7 @@
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="select.css">
+
</head>
<body>
@@ -38,5 +39,6 @@
<script src="js/product.js"></script>
+
</body>
</html>
\ No newline at end of file
diff --git a/frontend/shop.html b/frontend/shop.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8a86f7f63d74abe209fb3a5295521c2068e0f9f
--- /dev/null
+++ b/frontend/shop.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="menu.css">
+ <link rel="stylesheet" href="button.css">
+ <title>Pokeshop</title>
+</head>
+<body>
+
+ <nav>
+ <div class="shop">
+ <img src="img/player.svg" id="logo">
+ </div>
+
+ <p id="fill">POKESHOP</p>
+ <div class="shop">
+
+ <div id="sac">
+ <img src="img/sac.svg" id="logo">
+ </div>
+ </div>
+
+
+ </nav>
+
+ <main onscroll="scrollEffect()">
+
+
+
+ <div class="search">
+ <input type="text" name="pokemon" id="poke" onkeyup="search()" placeholder="Search a Pokemon..">
+
+
+ </div>
+
+ <div class="tab" >
+
+ </div>
+
+
+ </main>
+
+
+ <footer>
+
+ </footer>
+
+ <script src="js/index.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/style.css b/frontend/style.css
index c58ecb538edf85cd787d72957fe6e4cc9783779e..46c099ef7d21d0bc8ff300176a20db7374830c2c 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -5,7 +5,7 @@
main{
height: 85vh;
width: 100vw;
- background-color: whitesmoke;
+ background-color: white;
}
.search {
@@ -27,12 +27,13 @@ input {
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);
}
input:focus {
outline: none;
- color: rgb(255, 83, 64);
+ color: rgba(255,27,0,1);
}
@@ -54,6 +55,7 @@ input:focus {
height: 15vw;
background-color: rgb(255, 255, 255);
border-radius: 10px 10px;
+ 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);
}
@@ -70,55 +72,13 @@ input:focus {
}
-.names {
- margin-bottom: 5%;
- font-size: 1.5vh;
- text-align: center;
- color: rgb(11, 2, 61);
- border-radius: 10px 10px;
-}
-
-button {
- width: 50%;
- position: relative;
- left: 50%;
- transform: translateX(-50%);
- border: none;
- background-image: url(img/poke.svg);
- background-color: rgba(0, 0, 0, 0);
- font-size: small;
- width: 15.2%;
- height: 15.2%;
- transition: 0.1s linear;
- outline: none;
- cursor: pointer;
-
-
-}
-button:hover {
-
- width: 16.5%;
- height: 16.5%;
-
-}
-
-.add {
-
- text-align: center;
- font-size: 1.5vh;
- margin-bottom: 5px;
- color: rgb(11, 2, 61);
-
-}
-
.typebox {
display: flex;
-
justify-content: center;
width:100%;
height: 26px;
@@ -128,9 +88,9 @@ button:hover {
.type {
- width: 51px;
+ width: 55px;
height: 15px;
- padding-top: 0.5vh;
+
margin-left: 5px;
margin-right: 2px;