diff --git a/frontend/cart.css b/frontend/cart.css
index 7a54880097f8d5a5477ea2caa85fd5f4ea622694..8de31bfeb2957988fc64a2948973d3d30949515a 100644
--- a/frontend/cart.css
+++ b/frontend/cart.css
@@ -1,33 +1,8 @@
-#back {
- position: absolute;
- top: 0;
- left: 10%;
- width: 13vw;
- height: 4vh;
- margin-top: 6.5vh;
- text-align: center;
- font-size: 1.5vw;
- font-family: gb;
- transform: translateX(-50%);
- background-color: rgb(255, 255, 255);
- mix-blend-mode: screen;
- overflow: hidden;
- border-radius: 5px 5px;
- backdrop-filter: blur(8px);
- color: rgba(255,27,0,1);
- cursor: pointer;
- text-decoration: none;
-}
-
-#back:hover{
-
-
- color: rgb(0, 102, 255);
-}
main{
display: flex;
+ flex-direction: column;
width: 100vw;
@@ -41,7 +16,7 @@ main{
width: 90%;
height: 100%;
- margin-top: 5vh;
+ margin-top: 2vh;
padding-left: 2.5vh;
padding-right: 2.5vh;
@@ -53,7 +28,7 @@ main{
flex-direction: row;
box-shadow:inset 2px 2px 10px 0px rgba(255,255,255,.5), 2px 2px 10px 0px rgba(0,0,0,.1), 2px 2px 10px 0px rgba(0,0,0,.1);
border-radius: 20px 20px;
- margin-top: 2.5vh;
+ margin-top: 1vh;
margin-bottom: 2.5vh;
}
@@ -65,5 +40,63 @@ main{
text-align: center;
font-size: 1.25vw;
justify-content: center;
+ margin-right: 2vw;
+}
+
+
+.text {
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-size: 1.25vw;
+ margin-left: 1vw;
+ margin-right: 1vw;
+
+
+}
+
+.name {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-size: 1.25vw;
+
+}
+
+#number {
+
+ text-align: center;
+ color: rgb(255,27,0);
+ margin-top: 1vw;
+ font-size:xx-large;
+}
+
+
+.x {
+
+ width: 3vw;
+ height: 3vw;
+
+ position: relative;
+ left: 100%;
+ transform: translateX(-100%);
+
+}
+
+#checkout {
+
+ width: 20vw;
+ height: 7.5vh;
+ border: none;
+ color: white;
+ border-radius: 20px;
+ box-shadow:inset 2px 2px 10px 0px rgba(255,255,255,.5), 2px 2px 10px 0px rgba(0,0,0,.1), 2px 2px 10px 0px rgba(0,0,0,.1);
+ background-color: rgba(255,27,0,1);
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ margin-bottom: 5vh;
+ margin-top: 5vh;
}
\ No newline at end of file
diff --git a/frontend/cart.html b/frontend/cart.html
index 65a70520fb55e55a23358ddfd98f7e06b92e5abd..26ff29fcecfea4b9431083a74f709a9f8d658ae8 100644
--- a/frontend/cart.html
+++ b/frontend/cart.html
@@ -25,16 +25,13 @@
<main>
+ <p id ="number"></p>
+
<div id="container">
- <div class = "pokemon">
- <img src="https://img.pokemondb.net/sprites/x-y/normal/kingler.png" alt="Kingler">
- <div class="typeAndName">
- <p>Kraboss</p>
- <div class="typebox"><img src="img/types/water.png" alt=""><img src="" alt=""><img src="img/types/water.png" alt=""><img src="" alt=""></div>
- </div>
- </div>
</div>
-
+
+ <button id="checkout">Check-Out</button>
+
</main>
diff --git a/frontend/img/x.png b/frontend/img/x.png
new file mode 100644
index 0000000000000000000000000000000000000000..05f2af41e1c50dcbd25f24cc21e5ecebac8ba1c1
Binary files /dev/null and b/frontend/img/x.png differ
diff --git a/frontend/js/bag.js b/frontend/js/bag.js
index 1b5e63ede20bf869c9b3dce970f9ff8a1bffcc61..1461139706cb9f41448a32447f2614739a92e819 100644
--- a/frontend/js/bag.js
+++ b/frontend/js/bag.js
@@ -36,6 +36,8 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
let img = document.createElement("img");
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png";
+ img.style.width = "8vw";
+ img.style.height ="8vw";
let typeAndName = document.createElement("div");
typeAndName.className = "typeAndName";
@@ -45,11 +47,41 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
let typebox = typeBox(type1,type2);
+
+ let title = document.createElement("p");
+ title.className = "name";
+ title.innerHTML = "Attacks:";
+
+ let talentName = document.createElement("p");
+ talentName.className = "text";
+ talentName.innerHTML = talent;
+
+ let x = document.createElement("img");
+ x.className = "x";
+ x.src ="img/x.png";
+
+
+
typeAndName.appendChild(pokname);
typeAndName.appendChild(typebox);
+ pokemon.appendChild(x);
+
pokemon.appendChild(img);
pokemon.appendChild(typeAndName);
+ pokemon.appendChild(title);
+
+ for(let i = 0; i<attacks.length; i++){
+
+ let attack = document.createElement("p");
+ attack.className = "text";
+ attack.innerHTML = attacks[i];
+ pokemon.appendChild(attack);
+
+ }
+
+ pokemon.appendChild(talentName)
+
container.appendChild(pokemon);
@@ -63,6 +95,8 @@ function getItem(index){
+document.getElementById("number").innerHTML = localStorage.length-1;
+
for(let i = 0; i<localStorage.length; i++){
diff --git a/frontend/menu.css b/frontend/menu.css
index 6952a2cf5873b069e4398cad743c97ec94686ad8..ce35ede3504ce03f6802083a1ddbf795ff671e28 100644
--- a/frontend/menu.css
+++ b/frontend/menu.css
@@ -126,11 +126,43 @@ nav {
font-size: small;
text-align: center;
- background-color: rgb(0, 102, 255);
+ background-color: rgb(255, 255, 255);
+ mix-blend-mode: screen;
+ backdrop-filter: blur(8px);
+ color: rgba(255,27,0,1);
width: 2%;
position: relative;
left:85%;
transform: translateX(-50%);
- color:white;
+ font-size: large;
border-radius: 20px 20px;
+}
+
+#back {
+ position: absolute;
+ top: 0;
+ left: 10%;
+ width: 13vw;
+ height: 4vh;
+ margin-top: 6.5vh;
+ text-align: center;
+ font-size: 1.5vw;
+ font-family: gb;
+ transform: translateX(-50%);
+ background-color: rgb(255, 255, 255);
+ mix-blend-mode: screen;
+ overflow: hidden;
+ border-radius: 5px 5px;
+ backdrop-filter: blur(8px);
+ color: rgba(255,27,0,1);
+ cursor: pointer;
+ text-decoration: none;
+ transition: 0.75s ease-in;
+}
+
+#back:hover{
+
+
+ color: rgb(0, 102, 255);
+
}
\ No newline at end of file
diff --git a/frontend/select.css b/frontend/select.css
index c3025878bf8326f832d9983dad992b5a64858e99..156946542c924846cbcdf5ab409db9663d627611 100644
--- a/frontend/select.css
+++ b/frontend/select.css
@@ -282,4 +282,3 @@ button {
-
\ No newline at end of file
diff --git a/frontend/select.html b/frontend/select.html
index 3175a048680781f346d54bbe222e6116baa923d7..9649ed29df6d78517cd9a9326edbe81bf6621ce3 100644
--- a/frontend/select.html
+++ b/frontend/select.html
@@ -17,7 +17,7 @@
<nav>
<div class="shop">
- <img src="img/player.svg" id="logo">
+ <a href="shop.html" id="back">BACK TO SHOP</a>
</div>
<p id="fill">POKESHOP</p>
diff --git a/frontend/shop.html b/frontend/shop.html
index fb0ad9a71331a0fd20b478dd361d1d7c546fa060..e19c8eb0bd8b2383dfff27b539d7cc93ce674ddb 100644
--- a/frontend/shop.html
+++ b/frontend/shop.html
@@ -14,7 +14,7 @@
<nav>
<div class="shop">
- <img src="img/player.svg" id="logo">
+ <a href="shop.html" id="back">BACK TO MENU</a>
</div>
<p id="fill">POKESHOP</p>