From 770658c8434d7b7c0e716b7e375c733e79dc4a88 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 8 May 2023 18:35:39 +0200 Subject: more website --- db/data.sql | 4 ++-- lib/login.php | 1 + makefile | 4 ++++ 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 ++--- 22 files changed, 113 insertions(+), 28 deletions(-) create mode 100644 makefile 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 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 = "" where id = 1; update webs.product set description = "" 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 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 @@ - +
- + - - + +
Of een nieuw account maken 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 @@ + 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();
- id."-thumb.jpg" ?>" alt=""> + id."-full.jpg"; + echo ""; + ?>

name ?>

price ?> description ?>
- +
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 {
- + - - + +
Of inloggen
-- cgit v1.2.3