From 61ceeb4d717a8e2c93a01e687382e76d49d0e4e3 Mon Sep 17 00:00:00 2001
From: "Benjamin.sitbon" <benjamin.sitbon@etu.hesge.ch>
Date: Sun, 9 May 2021 14:31:22 +0200
Subject: [PATCH] visualisation du sac
---
frontend/cart.css | 89 +++++++++++++++++++++++++++++--------------
frontend/cart.html | 13 +++----
frontend/img/x.png | Bin 0 -> 3556 bytes
frontend/js/bag.js | 34 +++++++++++++++++
frontend/menu.css | 36 ++++++++++++++++-
frontend/select.css | 1 -
frontend/select.html | 2 +-
frontend/shop.html | 2 +-
8 files changed, 136 insertions(+), 41 deletions(-)
create mode 100644 frontend/img/x.png
diff --git a/frontend/cart.css b/frontend/cart.css
index 7a54880..8de31bf 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 65a7052..26ff29f 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
GIT binary patch
literal 3556
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
L{an^LB{Ts5V(?E^
literal 0
HcmV?d00001
diff --git a/frontend/js/bag.js b/frontend/js/bag.js
index 1b5e63e..1461139 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 6952a2c..ce35ede 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 c302587..1569465 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 3175a04..9649ed2 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 fb0ad9a..e19c8eb 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>
--
GitLab