aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-04-23 21:55:22 +0200
committerlonkaars <loek@pipeframe.xyz>2023-04-23 21:55:22 +0200
commit7eecf6d9577eb81498fcf35bdd7ae375b227b69c (patch)
treedf943f7da99a8556ac5eb7b5cd874bdadf36e4d0 /public
site scaffolding + php tests
Diffstat (limited to 'public')
-rw-r--r--public/cart.php36
-rw-r--r--public/footer.css12
-rw-r--r--public/footer.php8
-rw-r--r--public/global.css18
-rw-r--r--public/head.php5
-rw-r--r--public/home.css10
-rw-r--r--public/img/cart-outline.svg1
-rw-r--r--public/img/placeholder.pngbin0 -> 231513 bytes
-rw-r--r--public/index.php22
-rw-r--r--public/mdi.css8
-rw-r--r--public/nav.css19
-rw-r--r--public/navbar.php11
-rw-r--r--public/product.php18
-rw-r--r--public/products.css20
-rw-r--r--public/products.php37
15 files changed, 225 insertions, 0 deletions
diff --git a/public/cart.php b/public/cart.php
new file mode 100644
index 0000000..b888cd8
--- /dev/null
+++ b/public/cart.php
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <?php include 'head.php' ?>
+ <title>dit is product</title>
+</head>
+<body>
+ <?php include 'navbar.php' ?>
+ <div class="main limwidth">
+ <h2>dingen in je mand</h2>
+ <div class="products">
+ <a href="/product.php?id=123" class="product">
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ </a>
+ <a href="/product.php?id=123" class="product">
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ </a>
+ <a href="/product.php?id=123" class="product">
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ </a>
+ <a href="/product.php?id=123" class="product">
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ </a>
+ </div>
+ </div>
+ <?php include 'footer.php' ?>
+</body>
+</html>
diff --git a/public/footer.css b/public/footer.css
new file mode 100644
index 0000000..0483da2
--- /dev/null
+++ b/public/footer.css
@@ -0,0 +1,12 @@
+footer {
+ margin-top: 48px;
+}
+
+footer .flex {
+ display: flex;
+ justify-content: space-between;
+}
+
+footer .flex * {
+ margin: 20px 0;
+}
diff --git a/public/footer.php b/public/footer.php
new file mode 100644
index 0000000..57831be
--- /dev/null
+++ b/public/footer.php
@@ -0,0 +1,8 @@
+<footer>
+ <div class="inner limwidth">
+ <div class="flex">
+ <span class="left">de winkel website</span>
+ <span class="right">dit is een footer hoor</span>
+ </div>
+ </div>
+</footer>
diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000..9120a5f
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,18 @@
+@import url("nav.css");
+@import url("footer.css");
+
+:root {
+ --width: 750px;
+}
+
+body, html {
+ margin: 0;
+ font-family: "Inter", "Neue Haas Grotesk", "Helvetica", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.limwidth {
+ margin: 0 auto;
+ max-width: var(--width);
+ padding: 0 12px;
+}
+
diff --git a/public/head.php b/public/head.php
new file mode 100644
index 0000000..eddf94b
--- /dev/null
+++ b/public/head.php
@@ -0,0 +1,5 @@
+<meta charset='utf-8'>
+<meta http-equiv='X-UA-Compatible' content='IE=edge'>
+<meta name='viewport' content='width=device-width, initial-scale=1'>
+<link rel='stylesheet' type='text/css' media='screen' href='global.css'>
+<link rel='stylesheet' type='text/css' media='screen' href='mdi.css'>
diff --git a/public/home.css b/public/home.css
new file mode 100644
index 0000000..1c7c67e
--- /dev/null
+++ b/public/home.css
@@ -0,0 +1,10 @@
+.s1 h1 {
+ text-align: center;
+ font-size: 3rem;
+ line-height: 1.5ex;
+ font-weight: 800;
+}
+
+.s1 {
+ margin-top: 8rem;
+}
diff --git a/public/img/cart-outline.svg b/public/img/cart-outline.svg
new file mode 100644
index 0000000..b94d36a
--- /dev/null
+++ b/public/img/cart-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cart-outline</title><path d="M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z" fill="currentColor" /></svg>
diff --git a/public/img/placeholder.png b/public/img/placeholder.png
new file mode 100644
index 0000000..3db3f5a
--- /dev/null
+++ b/public/img/placeholder.png
Binary files differ
diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..0f268cb
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <?php include 'head.php' ?>
+ <title>webshop</title>
+ <link rel='stylesheet' type='text/css' media='screen' href='home.css'>
+</head>
+<body>
+ <?php include 'navbar.php' ?>
+ <div class="main limwidth">
+ <div class="s1">
+ <h1>hier zijn de aanbiedingen</h1>
+ <ul>
+ <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga iure id repudiandae sapiente voluptatibus soluta ducimus? Molestiae pariatur optio saepe nihil fugit, commodi atque! Consequatur at omnis recusandae nostrum tenetur!</li>
+ <li>Ut, repudiandae? Iusto pariatur cupiditate, ipsam magni accusamus asperiores possimus nulla, magnam quas consectetur fugit vero quibusdam officiis quod, vitae soluta nostrum placeat itaque sit beatae quos laudantium? Temporibus, magni.</li>
+ <li>Ipsum fugiat corporis impedit iusto possimus neque alias at sunt commodi deserunt! Numquam perferendis rem ea provident velit dicta quae. Eveniet officia iure porro aliquid minus alias at commodi nam?</li>
+ </ul>
+ </div>
+ </div>
+ <?php include 'footer.php' ?>
+</body>
+</html>
diff --git a/public/mdi.css b/public/mdi.css
new file mode 100644
index 0000000..04060b7
--- /dev/null
+++ b/public/mdi.css
@@ -0,0 +1,8 @@
+.mdi {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+}
+
+.mdi.cart-outline { background-image: url("img/cart-outline.svg"); }
+
diff --git a/public/nav.css b/public/nav.css
new file mode 100644
index 0000000..f5f540c
--- /dev/null
+++ b/public/nav.css
@@ -0,0 +1,19 @@
+nav {
+ position: static;
+ border-bottom: 2px dashed currentColor;
+}
+
+nav span { vertical-align: middle; }
+nav a {
+ text-decoration: none;
+ color: currentColor;
+ margin-right: 16px;
+}
+
+nav .site-icon {
+ height: 48px;
+ display: inline-block;
+}
+
+nav .site-icon .icon { margin: 12px 2px; }
+nav .site-icon .label { font-weight: 500; }
diff --git a/public/navbar.php b/public/navbar.php
new file mode 100644
index 0000000..34d88bb
--- /dev/null
+++ b/public/navbar.php
@@ -0,0 +1,11 @@
+<nav>
+ <div class="limwidth">
+ <a href="/" class="site-icon">
+ <span class="icon mdi cart-outline"></span>
+ <span class="label">winkel</span>
+ </a>
+ <a href="/products.php"><span>producten</span></a>
+ <a href="/login.php"><span>login</span></a>
+ <a href="/cart.php"><span>mand (</span><span id="cartn">0</span><span>)</span></a>
+ </div>
+</nav>
diff --git a/public/product.php b/public/product.php
new file mode 100644
index 0000000..8733562
--- /dev/null
+++ b/public/product.php
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <?php include 'head.php' ?>
+ <title>dit is product</title>
+</head>
+<body>
+ <?php include 'navbar.php' ?>
+ <div class="main limwidth">
+ <h2>yeah product</h2>
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ <span class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla dignissimos laboriosam voluptatem facilis tempore quos, asperiores eos molestiae voluptates commodi animi enim quae deleniti? Ratione optio eligendi rem eveniet reiciendis.</span>
+ </div>
+ <?php include 'footer.php' ?>
+</body>
+</html>
diff --git a/public/products.css b/public/products.css
new file mode 100644
index 0000000..a698a15
--- /dev/null
+++ b/public/products.css
@@ -0,0 +1,20 @@
+.products {
+ --grid-columns: 3;
+ display: grid;
+ grid-template-columns: repeat(var(--grid-columns), 1fr);
+ gap: 8px;
+}
+@media (max-width: 600px) { .products { --grid-columns: 2; } }
+@media (max-width: 400px) { .products { --grid-columns: 1; } }
+
+.products .product {
+ background-color: #0001;
+ padding: 8px;
+ border-radius: 8px;
+}
+
+.product img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
diff --git a/public/products.php b/public/products.php
new file mode 100644
index 0000000..b42e4db
--- /dev/null
+++ b/public/products.php
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <?php include 'head.php' ?>
+ <title>producten</title>
+ <link rel='stylesheet' type='text/css' media='screen' href='products.css'>
+</head>
+<body>
+ <?php include 'navbar.php' ?>
+ <div class="main limwidth">
+ <h2>lijst met producten:</h2>
+ <div class="products">
+ <a href="/product.php?id=123" class="product">
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ </a>
+ <a href="/product.php?id=123" class="product">
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ </a>
+ <a href="/product.php?id=123" class="product">
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ </a>
+ <a href="/product.php?id=123" class="product">
+ <img src="img/placeholder.png" alt="">
+ <span class="price">3,45</span>
+ <span class="name">courgette</span>
+ </a>
+ </div>
+ </div>
+ <?php include 'footer.php' ?>
+</body>
+</html>