aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-05-08 18:35:39 +0200
committerlonkaars <loek@pipeframe.xyz>2023-05-08 18:35:39 +0200
commit770658c8434d7b7c0e716b7e375c733e79dc4a88 (patch)
tree5c1b48cfd9fd5748f0cb7d95051b396e15867fb5 /public
parentf3b582307cc3caf5ee0c7514d461e47fb5893bc7 (diff)
more website
Diffstat (limited to 'public')
-rw-r--r--public/cart.css2
-rw-r--r--public/global.css32
-rw-r--r--public/img/product/1-full.jpgbin0 -> 455025 bytes
-rw-r--r--public/img/product/1-thumb.jpgbin20762 -> 14457 bytes
-rw-r--r--public/img/product/10-full.jpgbin0 -> 1110551 bytes
-rw-r--r--public/img/product/10-thumb.jpgbin0 -> 22843 bytes
-rw-r--r--public/img/product/2-full.jpgbin0 -> 360776 bytes
-rw-r--r--public/img/product/2-thumb.jpgbin16579 -> 9461 bytes
-rw-r--r--public/img/product/3-full.jpgbin0 -> 582213 bytes
-rw-r--r--public/img/product/3-thumb.jpgbin22837 -> 12583 bytes
-rw-r--r--public/img/product/9-full.jpgbin0 -> 644150 bytes
-rw-r--r--public/img/product/9-thumb.jpgbin0 -> 16786 bytes
-rw-r--r--public/login.css12
-rw-r--r--public/login.php8
-rw-r--r--public/navbar.php11
-rw-r--r--public/product.css52
-rw-r--r--public/product.php7
-rw-r--r--public/products.css2
-rw-r--r--public/register.php6
19 files changed, 106 insertions, 26 deletions
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files 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>