From 770658c8434d7b7c0e716b7e375c733e79dc4a88 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Mon, 8 May 2023 18:35:39 +0200
Subject: more website

---
 public/cart.css                 |   2 +-
 public/global.css               |  32 +++++++++++++++++++++++++
 public/img/product/1-full.jpg   | Bin 0 -> 455025 bytes
 public/img/product/1-thumb.jpg  | Bin 20762 -> 14457 bytes
 public/img/product/10-full.jpg  | Bin 0 -> 1110551 bytes
 public/img/product/10-thumb.jpg | Bin 0 -> 22843 bytes
 public/img/product/2-full.jpg   | Bin 0 -> 360776 bytes
 public/img/product/2-thumb.jpg  | Bin 16579 -> 9461 bytes
 public/img/product/3-full.jpg   | Bin 0 -> 582213 bytes
 public/img/product/3-thumb.jpg  | Bin 22837 -> 12583 bytes
 public/img/product/9-full.jpg   | Bin 0 -> 644150 bytes
 public/img/product/9-thumb.jpg  | Bin 0 -> 16786 bytes
 public/login.css                |  12 ----------
 public/login.php                |   8 +++----
 public/navbar.php               |  11 ++++++++-
 public/product.css              |  52 ++++++++++++++++++++++++++++++++++++++--
 public/product.php              |   7 ++++--
 public/products.css             |   2 +-
 public/register.php             |   6 ++---
 19 files changed, 106 insertions(+), 26 deletions(-)
 create mode 100644 public/img/product/1-full.jpg
 create mode 100644 public/img/product/10-full.jpg
 create mode 100644 public/img/product/10-thumb.jpg
 create mode 100644 public/img/product/2-full.jpg
 create mode 100644 public/img/product/3-full.jpg
 create mode 100644 public/img/product/9-full.jpg
 create mode 100644 public/img/product/9-thumb.jpg

(limited to 'public')

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
Binary files /dev/null and b/public/img/product/1-full.jpg differ
diff --git a/public/img/product/1-thumb.jpg b/public/img/product/1-thumb.jpg
index ef1de8b..856648a 100644
Binary files a/public/img/product/1-thumb.jpg and b/public/img/product/1-thumb.jpg differ
diff --git a/public/img/product/10-full.jpg b/public/img/product/10-full.jpg
new file mode 100644
index 0000000..2fac7a8
Binary files /dev/null and b/public/img/product/10-full.jpg differ
diff --git a/public/img/product/10-thumb.jpg b/public/img/product/10-thumb.jpg
new file mode 100644
index 0000000..5dd3ee2
Binary files /dev/null and b/public/img/product/10-thumb.jpg differ
diff --git a/public/img/product/2-full.jpg b/public/img/product/2-full.jpg
new file mode 100644
index 0000000..bbc2af9
Binary files /dev/null and b/public/img/product/2-full.jpg differ
diff --git a/public/img/product/2-thumb.jpg b/public/img/product/2-thumb.jpg
index dc8de24..e9c7a90 100644
Binary files a/public/img/product/2-thumb.jpg and b/public/img/product/2-thumb.jpg differ
diff --git a/public/img/product/3-full.jpg b/public/img/product/3-full.jpg
new file mode 100644
index 0000000..328db22
Binary files /dev/null and b/public/img/product/3-full.jpg differ
diff --git a/public/img/product/3-thumb.jpg b/public/img/product/3-thumb.jpg
index e6a0b47..5d34c18 100644
Binary files a/public/img/product/3-thumb.jpg and b/public/img/product/3-thumb.jpg differ
diff --git a/public/img/product/9-full.jpg b/public/img/product/9-full.jpg
new file mode 100644
index 0000000..11d9e52
Binary files /dev/null and b/public/img/product/9-full.jpg differ
diff --git a/public/img/product/9-thumb.jpg b/public/img/product/9-thumb.jpg
new file mode 100644
index 0000000..f65c578
Binary files /dev/null and b/public/img/product/9-thumb.jpg differ
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>
-- 
cgit v1.2.3