22 files changed, 113 insertions, 28 deletions

diff --git a/db/data.sql b/db/data.sql
index fb85463..d02fa61 100644
--- a/db/data.sql
+++ b/db/data.sql
@@ -12,8 +12,8 @@ insert into webs.product (`name`, `price`, `category`, `image`) values
 	("ハリネズミのハリー 第３巻", 5.99, 1, false),
 	("イジらないで、長瀞さん 第１巻", 5.49, 1, false),
 	("イジらないで、長瀞さん 第２巻", 5.49, 1, false),
-	("Kip", 9.95, 3, false),
-	("Kikker", 19.95, 3, false);
+	("Kip", 9.95, 3, true),
+	("Kikker", 19.95, 3, true);
 
 update webs.product set description = "<ul><li>lekker sappig</li><li>zonder BTW</li></ul>" where id = 1;
 update webs.product set description = "<ul><li>snel bruin</li><li>zonder BTW</li></ul>" where id = 2;
diff --git a/lib/login.php b/lib/login.php
index 1da5a02..3467994 100644
--- a/lib/login.php
+++ b/lib/login.php
@@ -7,6 +7,7 @@ function check_login() {
 }
 
 $logged_in = check_login();
+$cart_count = 0;
 
 function if_logged_in($is, $redirect, $back = false) {
 	global $logged_in;
diff --git a/makefile b/makefile
new file mode 100644
index 0000000..3b1abff
--- /dev/null
+++ b/makefile
@@ -0,0 +1,4 @@
+all: $(patsubst %-full.jpg,%-thumb.jpg, $(wildcard public/img/product/*-full.jpg))
+
+public/img/product/%-thumb.jpg: public/img/product/%-full.jpg
+	convert -scale 250 $< $@
diff --git a/public/cart.css b/public/cart.css
index 2b5df65..247a254 100644
--- a/public/cart.css
+++ b/public/cart.css
@@ -1,6 +1,6 @@
 .product {
 	padding: 8px;
-	background-color: #0001;
+	background-color: var(--bg-alt);
 	margin-bottom: 8px;
 	border-radius: 8px;
 	display: flex;
diff --git a/public/global.css b/public/global.css
index c813911..cbe8d1c 100644
--- a/public/global.css
+++ b/public/global.css
@@ -3,9 +3,15 @@
 
 :root {
 	--width: 750px;
+	--bg: #dddddd;
+	--bg-alt: #ffffff;
+	--fg: #000000;
+	--fg-alt: #111111;
 }
 
 body, html {
+	background-color: var(--bg);
+	color: var(--fg);
 	margin: 0;
 	font-family: "Inter", "Neue Haas Grotesk", "Helvetica", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -31,3 +37,29 @@ body, html {
 	font-size: 80%;
 }
 
+.button,
+.buttonstyle {
+	margin-bottom: 16px;
+	padding: 9px 12px;
+	border-radius: 8px;
+	border: none;
+	background-color: var(--bg-alt);
+}
+
+.button {
+	cursor: pointer;
+}
+
+.button.dashed,
+.buttonstyle.dashed {
+	padding: 7px 10px;
+	border: 2px dashed currentColor;
+}
+
+.button.filled,
+.buttonstyle.filled {
+	background-color: canvastext;
+	color: canvas;
+	font-weight: bold;
+	cursor: pointer;
+}
diff --git a/public/img/product/1-full.jpg b/public/img/product/1-full.jpg
new file mode 100644
index 0000000..a21b710
--- /dev/null
+++ b/public/img/product/1-full.jpg
diff --git a/public/img/product/1-thumb.jpg b/public/img/product/1-thumb.jpg
index ef1de8b..856648a 100644
--- a/public/img/product/1-thumb.jpg
+++ b/public/img/product/1-thumb.jpg
diff --git a/public/img/product/10-full.jpg b/public/img/product/10-full.jpg
new file mode 100644
index 0000000..2fac7a8
--- /dev/null
+++ b/public/img/product/10-full.jpg
diff --git a/public/img/product/10-thumb.jpg b/public/img/product/10-thumb.jpg
new file mode 100644
index 0000000..5dd3ee2
--- /dev/null
+++ b/public/img/product/10-thumb.jpg
diff --git a/public/img/product/2-full.jpg b/public/img/product/2-full.jpg
new file mode 100644
index 0000000..bbc2af9
--- /dev/null
+++ b/public/img/product/2-full.jpg
diff --git a/public/img/product/2-thumb.jpg b/public/img/product/2-thumb.jpg
index dc8de24..e9c7a90 100644
--- a/public/img/product/2-thumb.jpg
+++ b/public/img/product/2-thumb.jpg
diff --git a/public/img/product/3-full.jpg b/public/img/product/3-full.jpg
new file mode 100644
index 0000000..328db22
--- /dev/null
+++ b/public/img/product/3-full.jpg
diff --git a/public/img/product/3-thumb.jpg b/public/img/product/3-thumb.jpg
index e6a0b47..5d34c18 100644
--- a/public/img/product/3-thumb.jpg
+++ b/public/img/product/3-thumb.jpg
diff --git a/public/img/product/9-full.jpg b/public/img/product/9-full.jpg
new file mode 100644
index 0000000..11d9e52
--- /dev/null
+++ b/public/img/product/9-full.jpg
diff --git a/public/img/product/9-thumb.jpg b/public/img/product/9-thumb.jpg
new file mode 100644
index 0000000..f65c578
--- /dev/null
+++ b/public/img/product/9-thumb.jpg
diff --git a/public/login.css b/public/login.css
index c4826e2..bc7f096 100644
--- a/public/login.css
+++ b/public/login.css
@@ -8,18 +8,6 @@
 	margin-block-end: 0;
 }
 
-.modal input {
-	margin-bottom: 16px;
-	padding: 6px 8px;
-	border-radius: 8px;
-	border: 2px solid canvastext;
-	background-color: transparent;
-}
-
 .modal input[type="submit"] {
-	background-color: canvastext;
-	color: canvas;
 	font-size: 1rem;
-	font-weight: bold;
-	cursor: pointer;
 }
diff --git a/public/login.php b/public/login.php
index 22ac164..a8a1021 100644
--- a/public/login.php
+++ b/public/login.php
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <?php include "../lib/login.php" ?>
-<?php // if_logged_in(true, "/") ?>
+<?php if_logged_in(true, "/") ?>
 <?php
 do {
 	if ($_SERVER['REQUEST_METHOD'] !== 'POST') break;
@@ -26,10 +26,10 @@ do {
 		<div class="modal">
 			<form action="/login.php" method="post">
 				<label for="username">Gebruikersnaam</label>
-				<input id="username" name="username" type="text" placeholder="gebruikersnaam">
+				<input id="username" name="username" type="text" placeholder="gebruikersnaam" class="buttonstyle">
 				<label for="password">Wachtwoord</label>
-				<input id="password" name="password" type="password" placeholder="wachtwoord">
-				<input type="submit" value="Inloggen">
+				<input id="password" name="password" type="password" placeholder="wachtwoord" class="buttonstyle">
+				<input type="submit" value="Inloggen" class="button filled">
 			</form>
 			<span class="register">Of <a href="/register.php">een nieuw account maken</a></span>
 		</div>
diff --git a/public/navbar.php b/public/navbar.php
index f22a040..fca4663 100644
--- a/public/navbar.php
+++ b/public/navbar.php
@@ -1,3 +1,4 @@
+<?php require_once "../lib/login.php" ?>
 <nav>
 	<div class="limwidth">
 		<a href="/" class="site-icon nolinkstyle">
@@ -6,6 +7,14 @@
 		</a>
 		<a href="/products.php" class="nolinkstyle"><span>producten</span></a>
 		<a href="/login.php" class="nolinkstyle"><span>login</span></a>
-		<a href="/cart.php" class="nolinkstyle"><span>mand (</span><span id="cartn">0</span><span>)</span></a>
+		<a href="/cart.php" class="nolinkstyle">
+			<?php 
+				echo "<span>mand";
+				if ($logged_in) {
+					echo " (".$cart_count.")";
+				}
+				echo "</span>";
+			?>
+		</a>
 	</div>
 </nav>
diff --git a/public/product.css b/public/product.css
index 5b718c9..54fe81b 100644
--- a/public/product.css
+++ b/public/product.css
@@ -4,6 +4,54 @@
 	gap: 16px;
 }
 
-.twocolumn .left {
-	text-align: center;
+.twocolumn .left { text-align: center; }
+.twocolumn .left img {
+	max-width: 100%;
+	transition: box-shadow 300ms;
 }
+.twocolumn .left a {
+	transition: transform 300ms;
+}
+
+.twocolumn .left a:hover { transform: scale(103%); }
+.twocolumn .left a:hover img { box-shadow: 0px 7px 40px -17px #0009; }
+
+.twocolumn .left a {
+	position: relative;
+	display: inline-block;
+	line-height: 0;
+}
+
+.twocolumn .left a::after,
+.twocolumn .left img {
+	border-radius: 8px;
+}
+
+.twocolumn .left a::after {
+	content: "Open in nieuw tabblad";
+	font-size: 75%;
+}
+.twocolumn .left a::after {
+	white-space: nowrap;
+	display: block;
+	background-color: var(--bg-alt);
+	color: var(--fg);
+	padding: 8px 12px;
+	position: absolute;
+	bottom: -8px;
+	left: 50%;
+	transform: translate(-50%, 100%) translateY(-10px);
+	line-height: initial;
+	margin-top: 20px;
+	transition-property: opacity, transform;
+	transition-duration: 300ms;
+	opacity: 0;
+}
+
+.twocolumn .left a:hover:after {
+	transform: translate(-50%, 100%) translateY(0px);
+	opacity: 1;
+}
+
+.twocolumn .right h2 { margin-top: 0; }
+
diff --git a/public/product.php b/public/product.php
index 7db5b5e..51ce3db 100644
--- a/public/product.php
+++ b/public/product.php
@@ -24,14 +24,17 @@ $product = $res->fetch_object();
 	<div class="main limwidth">
 		<div class="twocolumn">
 			<div class="column left">
-				<img src="<?php echo "/img/product/".$product->id."-thumb.jpg" ?>" alt="">
+				<?php
+					$img = "/img/product/".$product->id."-full.jpg";
+					echo "<a href='$img'><img src='$img' alt=''></a>";
+				?>
 			</div>
 			<div class="column right">
 				<h2><?php echo $product->name ?></h2>
 				<span class="price"><?php echo $product->price ?></span>
 				<span class="info"><?php echo $product->description ?></span>
 				<form action="/cart.php" method="post">
-					<input type="submit" value="Toevoegen aan winkelwagen">
+					<input type="submit" value="Toevoegen aan winkelwagen" class="button filled">
 				</form>
 			</div>
 		</div>
diff --git a/public/products.css b/public/products.css
index 4d7342f..5dee942 100644
--- a/public/products.css
+++ b/public/products.css
@@ -9,7 +9,7 @@
 @media (max-width: 400px) { .products { --grid-columns: 1; } }
 
 .products .product {
-	background-color: #0001;
+	background-color: var(--bg-alt);
 	padding: 8px;
 	border-radius: 8px;
 }
diff --git a/public/register.php b/public/register.php
index 9f04b1c..f0f6596 100644
--- a/public/register.php
+++ b/public/register.php
@@ -25,10 +25,10 @@ do {
 		<div class="modal">
 			<form action="/register.php" method="post">
 				<label for="username">Gebruikersnaam</label>
-				<input id="username" name="username" type="text" placeholder="gebruikersnaam">
+				<input id="username" name="username" type="text" placeholder="gebruikersnaam" class="buttonstyle">
 				<label for="password">Wachtwoord</label>
-				<input id="password" name="password" type="password" placeholder="wachtwoord">
-				<input type="submit" value="Registreren">
+				<input id="password" name="password" type="password" placeholder="wachtwoord" class="buttonstyle">
+				<input type="submit" value="Registreren" class="button filled">
 			</form>
 			<span class="register">Of <a href="/login.php">inloggen</a></span>
 		</div>