diff --git a/frontend/cart.css b/frontend/cart.css
index 8de31bfeb2957988fc64a2948973d3d30949515a..5df317ad194e89eb09be6c8ef6350e43677078d9 100644
--- a/frontend/cart.css
+++ b/frontend/cart.css
@@ -99,4 +99,17 @@ main{
transform: translateX(-50%);
margin-bottom: 5vh;
margin-top: 5vh;
+}
+
+
+.price {
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-size: 1.5vw;
+ margin-left: 1vw;
+ margin-right: 1vw;
+
+
}
\ No newline at end of file
diff --git a/frontend/cart.html b/frontend/cart.html
index 26ff29fcecfea4b9431083a74f709a9f8d658ae8..fc6d3b17421adfbfc78d3b2037556ebedfa34cb3 100644
--- a/frontend/cart.html
+++ b/frontend/cart.html
@@ -18,7 +18,7 @@
<nav>
- <a href="shop.html" id="back">BACK TO SHOP</a>
+ <a href="shop.html" id="back">SHOP</a>
<p id="fill">BAG</p>
</nav>
diff --git a/frontend/img/Dym19R.jpg b/frontend/img/Dym19R.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5aa9228cee15317cfca06d9708538f1cdeee2ed0
Binary files /dev/null and b/frontend/img/Dym19R.jpg differ
diff --git a/frontend/img/Pokemon-Legends-Arceus.jpg b/frontend/img/Pokemon-Legends-Arceus.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a709bdbd4f3bbbfeb585e105cb0e32904095c36d
Binary files /dev/null and b/frontend/img/Pokemon-Legends-Arceus.jpg differ
diff --git a/frontend/img/pokemon-wallpaper-preview.jpg b/frontend/img/pokemon-wallpaper-preview.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9a5fe3e975d53673f8bb91b8d1c0e3fae5c70022
Binary files /dev/null and b/frontend/img/pokemon-wallpaper-preview.jpg differ
diff --git a/frontend/index.css b/frontend/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..d4d37db0c2b53ef8ec0550d35fed22751340916c
--- /dev/null
+++ b/frontend/index.css
@@ -0,0 +1,107 @@
+@font-face {
+ font-family: gb;
+ src: url(font/Arvo-Regular.ttf);
+}
+
+
+@font-face {
+ font-family: title;
+ src: url(font/LMS\ Pokemon\ Master\ Solid.ttf);
+}
+
+*{
+ margin:0;
+ padding: 0;
+ list-style: none;
+ overflow-x: hidden;
+ font-family: gb;
+
+}
+
+nav{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+
+}
+
+a{
+ text-decoration: none;
+}
+
+
+.fill {
+
+ margin-right: 1vw;
+ margin-left: 1vw;
+ width: 10vw;
+ height: 2.75vw;
+ margin-top: 6.5vh;
+ text-align: center;
+ font-size: 2.25vw;
+ font-family: gb;
+ background-color: rgb(255, 255, 255);
+ mix-blend-mode: screen;
+ overflow: hidden;
+ border-radius: 5px 5px;
+ backdrop-filter: blur(8px);
+ cursor: pointer;
+ transition: 0.75s ease-in;
+ color: rgb(53, 53, 53);
+}
+
+#fill {
+ border-radius: 20px 20px;
+ font-size: 5vw;
+ width: 35vw;
+ height: 6vw;
+ margin-top: 2.5vh;
+}
+
+
+
+
+main {
+ width: 100%;
+ height: 100vh;
+ background-image:url(img/Dym19R.jpg);
+ background-position: center center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-origin: padding-box;
+ background-clip: border-box;
+ background-color: #ccc;
+
+}
+
+#desc {
+
+ position: relative;
+ top: 50%;
+ left: 50%;
+ width: 75%;
+ background-color: rgba(0, 0, 0, 0.597);
+ backdrop-filter: blur(20px);
+ border-radius: 10px;
+ transform: translate(-50%,-50%);
+ color: white;
+
+}
+
+#title{
+
+ font-size: 4vw;
+
+}
+
+#text{
+ margin-top: 2vh;
+ margin-bottom: 2vh;
+ font-size: 2vw;
+
+}
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index a0ee5a25005ab0e3adc1d24c2d501f618cb4fdc8..2cb029013291a18cf0552db9348c0a40a51cc416 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,40 +5,33 @@
<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">
- <title>Pokeshop</title>
+ <link rel="stylesheet" href="index.css">
+ <title>Homepage</title>
</head>
<body>
<nav>
- <div class="shop">
- <img src="img/player.svg" id="logo">
- </div>
-
- <p id="fill">POKESHOP</p>
- <div class="shop">
-
- <a id="sac"></a>
- </div>
-
+ <a href="shop.html" class="fill" >SHOP</a>
+ <p id="fill" class="fill">HOMEPAGE</p>
+ <a href="price.html" class="fill">PRICES</a>
</nav>
- <main onscroll="scrollEffect()">
+ <main>
-
+ <div id="desc">
+ <p id="title">Description</p>
+ <p id= "text">
+ This website is a webshop where you can buy pokemons to play with on your switch. You
+ can buy every pokemon from the official pokedex and chose their attacks and talents,
+ you can also have it in shiny if you want.
- <div class="search">
- <input type="text" name="pokemon" id="poke" onkeyup="search()" placeholder="Search a Pokemon..">
-
-
- </div>
+ </p>
- <div class="tab" >
-
</div>
+
+
</main>
diff --git a/frontend/js/bag.js b/frontend/js/bag.js
index 1461139706cb9f41448a32447f2614739a92e819..546ae8de48746bbbe8977fbc9290aa14df0503ed 100644
--- a/frontend/js/bag.js
+++ b/frontend/js/bag.js
@@ -27,6 +27,24 @@ function typeBox(src1,src2){
}
+function toDeleteArticle(poke,name){
+ let x = document.createElement("img");
+ x.className = "x";
+ x.src ="img/x.png";
+ x.style.cursor = "pointer";
+
+ x.onclick = function(){
+
+ poke.remove()
+ localStorage.removeItem(name);
+ document.getElementById("number").innerHTML = localStorage.length-1;
+
+ }
+
+ return x;
+}
+
+
function createArticle(name,number,type1,type2,attacks,talent,shiny){
let container = document.getElementById("container");
@@ -35,7 +53,19 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
pokemon.className = "pokemon";
let img = document.createElement("img");
- img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png";
+
+ let price = document.createElement("p");
+ price.className = "price";
+
+ if(shiny == 1){
+ img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png";
+ price.innerHTML = "4.00 CHF";
+ }
+ else{
+ img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png";
+ price.innerHTML = "2.00 CHF";
+ }
+
img.style.width = "8vw";
img.style.height ="8vw";
@@ -56,11 +86,7 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
talentName.className = "text";
talentName.innerHTML = talent;
- let x = document.createElement("img");
- x.className = "x";
- x.src ="img/x.png";
-
-
+ let x = toDeleteArticle(pokemon,name);
typeAndName.appendChild(pokname);
typeAndName.appendChild(typebox);
@@ -81,6 +107,7 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
}
pokemon.appendChild(talentName)
+ pokemon.appendChild(price);
container.appendChild(pokemon);
@@ -106,8 +133,9 @@ for(let i = 0; i<localStorage.length; i++){
else{
let data = getItem(i).split(',');
+ console.log(data[9]);
let attacks = [data[4],data[5],data[6],data[7]];
- createArticle(data[0],data[1],data[2],data[3],attacks,data[8],0)
+ createArticle(data[0],data[1],data[2],data[3],attacks,data[8],data[9])
}
diff --git a/frontend/js/product.js b/frontend/js/product.js
index 6c1efe52a3ab04ddd84af1046ad44c859e283391..d0c800e08930bdcac379481d15356c85e8611f0c 100644
--- a/frontend/js/product.js
+++ b/frontend/js/product.js
@@ -67,8 +67,13 @@
let attack2 = choice.children[1].children[2].innerHTML;
let attack3 = choice.children[2].children[2].innerHTML;
let attack4 = choice.children[3].children[2].innerHTML;
+ let shiny = 0;
+
+ if(document.getElementsByClassName("btn-2")[0] != undefined){
+ shiny = 1;
+ }
- newData = [pokemon,number,data[1],data[2],attack1,attack2,attack3,attack4,talent];
+ newData = [pokemon,number,data[1],data[2],attack1,attack2,attack3,attack4,talent,shiny];
localStorage.setItem(pokemon,newData);
window.location.href = "shop.html";
@@ -89,8 +94,6 @@
if(choice.childNodes.length < 1){
choice.style.display = "none";
}
-
-
let button = document.getElementsByClassName("addcart")[0];
if(button != undefined){
button.remove();
diff --git a/frontend/menu.css b/frontend/menu.css
index ce35ede3504ce03f6802083a1ddbf795ff671e28..e5191dce787983e31e4134d74950b5bf80e1138c 100644
--- a/frontend/menu.css
+++ b/frontend/menu.css
@@ -32,7 +32,6 @@ main {
html {
- font-size: 50%;
box-sizing: border-box;
scroll-behavior: smooth;
}
@@ -61,10 +60,10 @@ nav {
top: 0;
left: 50%;
width: 30vw;
- height: 12vh;
+ height: 6vw;
margin-top: 2.5vh;
text-align: center;
- font-size: 10vh;
+ font-size: 5vw;
font-family: gb;
transform: translateX(-50%);
background-color: rgb(255, 255, 255);
@@ -143,9 +142,10 @@ nav {
top: 0;
left: 10%;
width: 13vw;
- height: 4vh;
+ height: 1.75vw;
margin-top: 6.5vh;
text-align: center;
+
font-size: 1.5vw;
font-family: gb;
transform: translateX(-50%);
@@ -161,8 +161,5 @@ nav {
}
#back:hover{
-
-
color: rgb(0, 102, 255);
-
}
\ No newline at end of file
diff --git a/frontend/select.html b/frontend/select.html
index 9649ed29df6d78517cd9a9326edbe81bf6621ce3..a3580ca889006af3c12b65acbfb42d5cdeba11a3 100644
--- a/frontend/select.html
+++ b/frontend/select.html
@@ -17,7 +17,7 @@
<nav>
<div class="shop">
- <a href="shop.html" id="back">BACK TO SHOP</a>
+ <a href="shop.html" id="back">SHOP</a>
</div>
<p id="fill">POKESHOP</p>
diff --git a/frontend/shop.html b/frontend/shop.html
index e19c8eb0bd8b2383dfff27b539d7cc93ce674ddb..ba87709f8e4f420c06158c44662181f66c8971d1 100644
--- a/frontend/shop.html
+++ b/frontend/shop.html
@@ -14,7 +14,7 @@
<nav>
<div class="shop">
- <a href="shop.html" id="back">BACK TO MENU</a>
+ <a href="index.html" id="back">HOMEPAGE</a>
</div>
<p id="fill">POKESHOP</p>