Compare commits
10
Commits
86107de595
...
3f844e4e06
| Author | SHA1 | Date | |
|---|---|---|---|
 jashton
|
3f844e4e06 | ||
|
jashton
|
5cd4571a92 | ||
|
jashton
|
b6008d462e | ||
|
jashton
|
e183f22d97 | ||
|
jashton
|
aabc87961a | ||
|
jashton
|
34ecc4e170 | ||
|
jashton
|
d1097bedb3 | ||
|
jashton
|
5e88f52c21 | ||
|
jashton
|
6570bf72eb | ||
|
jashton
|
0022fda157 |
Executable → Regular
@@ -0,0 +1,23 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success,
|
||||||
|
.error {
|
||||||
|
padding: 30px;
|
||||||
|
border: 3px solid black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
Executable → Regular
@@ -0,0 +1,49 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Dummy Title</title>
|
||||||
|
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="js/index.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Hello cruel world!</h1>
|
||||||
|
<?php
|
||||||
|
if (isset($_POST['username']) && isset($_POST['password'])) {
|
||||||
|
if ($_POST['username'] == 'beavis' && $_POST['password'] == 'pass') {
|
||||||
|
echo '
|
||||||
|
<div class="success">
|
||||||
|
<h3>Access Granted</h3>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
} else {
|
||||||
|
echo '
|
||||||
|
<div class="error">
|
||||||
|
<h3>Access Denied</h3>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
echo form();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
echo form();
|
||||||
|
}
|
||||||
|
|
||||||
|
function form()
|
||||||
|
{
|
||||||
|
return '
|
||||||
|
<form method="post">
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input id="username" name="username" required>
|
||||||
|
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input type="password" id="password" name="password" required>
|
||||||
|
|
||||||
|
<input type="submit" value="Log In">
|
||||||
|
</form>
|
||||||
|
';
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Dummy Title</title>
|
||||||
|
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="js/index.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Hello cruel world!</h1>
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$user = 'beavis';
|
||||||
|
$pass = 'pass';
|
||||||
|
|
||||||
|
if (isset($_POST['username']) && isset($_POST['password'])) {
|
||||||
|
if ($_POST['username'] == $user && $_POST['password'] == $pass)
|
||||||
|
echo '<h1>Access Granted</h1>';
|
||||||
|
else
|
||||||
|
echo '<h1>Access Denied</h1>' . login_form();
|
||||||
|
} else
|
||||||
|
echo login_form();
|
||||||
|
|
||||||
|
function login_form()
|
||||||
|
{
|
||||||
|
$form = '
|
||||||
|
<form method="post">
|
||||||
|
<label for"username">Username:</label>
|
||||||
|
<input id="username" name="username" required>
|
||||||
|
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input id="password" type="password" name="password" required>
|
||||||
|
|
||||||
|
<input type="submit">
|
||||||
|
';
|
||||||
|
|
||||||
|
return $form;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Dummy Title</title>
|
||||||
|
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="js/index.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Hello cruel world!</h1>
|
||||||
|
<?php
|
||||||
|
if (!empty($_POST)) {
|
||||||
|
foreach ($_POST as $key => $value) {
|
||||||
|
echo '<p>' . $value . '</p>';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$form = '
|
||||||
|
<form method="post">
|
||||||
|
<input name="1">
|
||||||
|
<input name="2">
|
||||||
|
<input name="3">
|
||||||
|
<input name="4">
|
||||||
|
<input name="5">
|
||||||
|
|
||||||
|
<input type="submit">
|
||||||
|
</form>
|
||||||
|
';
|
||||||
|
|
||||||
|
echo $form;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Day 21</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h2>Hello cruel world!</h2>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
let h2 = document.querySelector('h2');
|
||||||
|
h2.innerText = 'The DOM is Magical';
|
||||||
|
});
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
body {
|
||||||
|
background-color: indigo;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Day 22</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="square"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
position: absolute;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: pink;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
background-color: black;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Dummy Title</title>
|
||||||
|
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="js/index.js" defer></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php
|
||||||
|
for ($i = 0; $i < 100; $i++)
|
||||||
|
echo '<div></div>';
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
document.querySelectorAll('div').forEach((d) => {
|
||||||
|
d.style.backgroundColor = 'black';
|
||||||
|
d.addEventListener('click', populate);
|
||||||
|
})
|
||||||
|
|
||||||
|
function populate() {
|
||||||
|
if (this.style.backgroundColor === 'black') {
|
||||||
|
this.style.backgroundColor = 'red';
|
||||||
|
this.style.borderRadius = '50%';
|
||||||
|
} else {
|
||||||
|
this.style.backgroundColor = 'black';
|
||||||
|
this.style.borderRadius = '0%';
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Dummy Title</title>
|
||||||
|
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="js/index.js" defer></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button>Button</button>
|
||||||
|
<div></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
const div = document.querySelector('div');
|
||||||
|
const button = document.querySelector('button')
|
||||||
|
|
||||||
|
let times = 1;
|
||||||
|
button.addEventListener('click', (e) => {
|
||||||
|
let px = 300 * times;
|
||||||
|
times++;
|
||||||
|
div.style.top = px + 'px';
|
||||||
|
});
|
||||||
+2
-2
@@ -4,7 +4,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="birthday/css/styles.css">
|
||||||
<title>Birthday | Josh Ashton</title>
|
<title>Birthday | Josh Ashton</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
<h1>Happy Birthday!</h1>
|
<h1>Happy Birthday!</h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="pic-container">
|
<div id="pic-container">
|
||||||
<img src="img/birthday-AIgenerated.jpg" />
|
<img src="birthday/img/birthday-AIgenerated.jpg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
';
|
';
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'functions/init.php';
|
||||||
|
|
||||||
|
if (!isset($_SESSION['id']))
|
||||||
|
header('Location: catalog.php');
|
||||||
|
|
||||||
|
// UI Components
|
||||||
|
foreach (glob('components/cart/*.php') as $file)
|
||||||
|
require_once $file;
|
||||||
|
|
||||||
|
require_once 'functions/catalog.php';
|
||||||
|
require_once 'components/head.php';
|
||||||
|
|
||||||
|
if (empty($_SESSION['cart'])) {
|
||||||
|
echo '
|
||||||
|
<div class="glass center md_width padding margin-top" style="height: auto;">
|
||||||
|
<h3>Your cart is empty!</h3>
|
||||||
|
<p>Check out our innovative and reliable products <a href="catalog.php">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
} else {
|
||||||
|
if (isset($_POST['form_id'])) {
|
||||||
|
$total = calculate_total();
|
||||||
|
$items = [];
|
||||||
|
foreach ($_SESSION['cart'] as $id => $q) {
|
||||||
|
$items[fetch_product($id)['name']] = $q;
|
||||||
|
unset($_SESSION['cart'][$id]);
|
||||||
|
}
|
||||||
|
|
||||||
|
echo cart_confirmation($_POST['fname'], $_POST['lname'], $_POST['add'], $_POST['city'], $_POST['state'], $_POST['zip'], $total, $items);
|
||||||
|
} else
|
||||||
|
echo cart_layout();
|
||||||
|
}
|
||||||
|
|
||||||
|
require_once 'components/foot.php';
|
||||||
|
|||||||
@@ -0,0 +1,17 @@
|
|||||||
|
<?php
|
||||||
|
include_once 'functions/init.php';
|
||||||
|
include_once 'functions/catalog.php';
|
||||||
|
|
||||||
|
// UI Components
|
||||||
|
foreach (glob('components/products/*.php') as $file)
|
||||||
|
require_once $file;
|
||||||
|
|
||||||
|
include_once 'components/head.php';
|
||||||
|
|
||||||
|
echo '<h1 class="margin-left">Catalog</h1>';
|
||||||
|
|
||||||
|
echo '<div id="catalog" class="std_width center">';
|
||||||
|
echo catalog_grid(fetch_catalog());
|
||||||
|
echo '</div>';
|
||||||
|
|
||||||
|
include_once 'components/foot.php';
|
||||||
|
|||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<?php
|
||||||
|
echo '<div id="bg">';
|
||||||
|
|
||||||
|
for ($i = 0; $i < 50; $i++)
|
||||||
|
echo '<div id="' . $i . '" class="bubble"></div>';
|
||||||
|
|
||||||
|
echo '</div>';
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
function cart_checkout($total)
|
||||||
|
{
|
||||||
|
$checkout = '
|
||||||
|
<div class="card full_width column padding shadow" style="height: auto;">
|
||||||
|
<form method="post">
|
||||||
|
<input type="hidden" name="form_id" value="checkout">
|
||||||
|
<div class="row full_width space_between margin-top margin-bottom">
|
||||||
|
<div class="column md_width">
|
||||||
|
<label for="fname">First Name:</label>
|
||||||
|
<input id="fname" name="fname" placeholder="John" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column md_width">
|
||||||
|
<label for="lname">Last Name:</label>
|
||||||
|
<input id="lname" name="lname" placeholder="Smith" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column full_width">
|
||||||
|
<label for="add">Address:</label>
|
||||||
|
<input id="add" name="add" placeholder="123 Example St" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row space_between margin-top margin-bottom">
|
||||||
|
<div class="column md_width">
|
||||||
|
<label for="city">City:</label>
|
||||||
|
<input id="city" name="city" placeholder="Salt Lake City" required>
|
||||||
|
</div>
|
||||||
|
<div class="column sm_width">
|
||||||
|
<label for="state">State:</label>
|
||||||
|
<select id="state" name="state" required>
|
||||||
|
<option value="AL">AL</option>
|
||||||
|
<option value="AK">AK</option>
|
||||||
|
<option value="AZ">AZ</option>
|
||||||
|
<option value="AR">AR</option>
|
||||||
|
<option value="CA">CA</option>
|
||||||
|
<option value="CO">CO</option>
|
||||||
|
<option value="CT">CT</option>
|
||||||
|
<option value="DE">DE</option>
|
||||||
|
<option value="FL">FL</option>
|
||||||
|
<option value="GA">GA</option>
|
||||||
|
<option value="HI">HI</option>
|
||||||
|
<option value="ID">ID</option>
|
||||||
|
<option value="IL">IL</option>
|
||||||
|
<option value="IN">IN</option>
|
||||||
|
<option value="IA">IA</option>
|
||||||
|
<option value="KS">KS</option>
|
||||||
|
<option value="KY">KY</option>
|
||||||
|
<option value="LA">LA</option>
|
||||||
|
<option value="ME">ME</option>
|
||||||
|
<option value="MD">MD</option>
|
||||||
|
<option value="MA">MA</option>
|
||||||
|
<option value="MI">MI</option>
|
||||||
|
<option value="MN">MN</option>
|
||||||
|
<option value="MS">MS</option>
|
||||||
|
<option value="MO">MO</option>
|
||||||
|
<option value="MT">MT</option>
|
||||||
|
<option value="NE">NE</option>
|
||||||
|
<option value="NV">NV</option>
|
||||||
|
<option value="NH">NH</option>
|
||||||
|
<option value="NJ">NJ</option>
|
||||||
|
<option value="NM">NM</option>
|
||||||
|
<option value="NY">NY</option>
|
||||||
|
<option value="NC">NC</option>
|
||||||
|
<option value="ND">ND</option>
|
||||||
|
<option value="OH">OH</option>
|
||||||
|
<option value="OK">OK</option>
|
||||||
|
<option value="OR">OR</option>
|
||||||
|
<option value="PA">PA</option>
|
||||||
|
<option value="RI">RI</option>
|
||||||
|
<option value="SC">SC</option>
|
||||||
|
<option value="SD">SD</option>
|
||||||
|
<option value="TN">TN</option>
|
||||||
|
<option value="TX">TX</option>
|
||||||
|
<option value="UT">UT</option>
|
||||||
|
<option value="VT">VT</option>
|
||||||
|
<option value="VA">VA</option>
|
||||||
|
<option value="WA">WA</option>
|
||||||
|
<option value="WV">WV</option>
|
||||||
|
<option value="WI">WI</option>
|
||||||
|
<option value="WY">WY</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="column sm_width">
|
||||||
|
<label for="zip">Zip Code:</label>
|
||||||
|
<input id="zip" name="zip" placeholder="84111" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="line margin-bottom"></div>
|
||||||
|
<div class="column center">
|
||||||
|
<h3 id="total">' . format_money($total) . '</h3>
|
||||||
|
<input type="submit" value="Place Order">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $checkout;
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
function cart_confirmation($fname, $lname, $add, $city, $state, $zip, $total, $items)
|
||||||
|
{
|
||||||
|
$con = '
|
||||||
|
<div class="glass column md_width center padding" style="height: auto;">
|
||||||
|
<h4>Shipping Details:</h4>
|
||||||
|
<p>' . $fname . ' ' . $lname . '</p>
|
||||||
|
<p>' . $add . '</p>
|
||||||
|
<p>' . $city . ', ' . $state . ' ' . $zip . '</p>
|
||||||
|
<br>
|
||||||
|
<p>Your order will spontaneously appear before you, for you convenience!</p>
|
||||||
|
<small>We fold space and time itself, to ensure the best experience for our customers!</small>
|
||||||
|
<div class="line"></div>
|
||||||
|
<h4>Your Items:</h4>
|
||||||
|
<ul>
|
||||||
|
';
|
||||||
|
|
||||||
|
foreach ($items as $name => $quantity)
|
||||||
|
$con .= '<li>x' . $quantity . ' - ' . $name . '</li>';
|
||||||
|
|
||||||
|
$con .= '
|
||||||
|
</ul>
|
||||||
|
<h5>Total: $' . $total . '</h5>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $con;
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
function cart_item($item, $q)
|
||||||
|
{
|
||||||
|
$item = '
|
||||||
|
<div class="row space_between full_width margin-bottom cart_item">
|
||||||
|
<p class="full_width left_align">' . $item['name'] . '</p>
|
||||||
|
<div class="row md_width right_align">
|
||||||
|
<input type="hidden" value="' . $item['id'] . '">
|
||||||
|
<input type="number" value="' . $q . '" class="full_width item_quantity">
|
||||||
|
<div class="column center_children">
|
||||||
|
<i class="nf nf-cod-trash"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $item;
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
function cart_layout()
|
||||||
|
{
|
||||||
|
$total = 0;
|
||||||
|
|
||||||
|
$layout = '
|
||||||
|
<div class="grid_2x1 center std_width glass padding">
|
||||||
|
<div class="card list full_width padding shadow" style="height: 700px;">
|
||||||
|
';
|
||||||
|
|
||||||
|
foreach ($_SESSION['cart'] as $id => $q) {
|
||||||
|
$product = fetch_product($id);
|
||||||
|
$total += $product['price'] * $q;
|
||||||
|
$layout .= cart_item($product, $q);
|
||||||
|
}
|
||||||
|
|
||||||
|
$layout .= '
|
||||||
|
</div>
|
||||||
|
' . cart_checkout($total) . '
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $layout;
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
</body>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
$scripts = '';
|
||||||
|
switch ($_SERVER['SCRIPT_NAME']) {
|
||||||
|
case '/index.php':
|
||||||
|
$scripts .= '<script src="js/login.js"></script>';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo $scripts;
|
||||||
|
?>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
<link rel="stylesheet" href="css/colors.css">
|
||||||
|
<link rel="stylesheet" href="https://nerdfonts.com/assets/css/webfont.css">
|
||||||
|
<script src="js/index.js" defer></script>
|
||||||
|
<?php
|
||||||
|
switch ($_SERVER['SCRIPT_NAME']) {
|
||||||
|
case '/create-account.php':
|
||||||
|
echo '<script src="js/create-account.js" defer></script>';
|
||||||
|
break;
|
||||||
|
case '/product.php':
|
||||||
|
echo '<script src="js/product_page.js" defer></script>';
|
||||||
|
break;
|
||||||
|
case '/cart.php':
|
||||||
|
echo '<script src="js/cart.js" defer></script>';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php
|
||||||
|
include_once 'nav.php';
|
||||||
|
include_once 'bubbles.php';
|
||||||
|
?>
|
||||||
Executable
+37
@@ -0,0 +1,37 @@
|
|||||||
|
<?php
|
||||||
|
$nav = '
|
||||||
|
<nav class="glass">
|
||||||
|
<ul>
|
||||||
|
<div class="row space_between">
|
||||||
|
<div>
|
||||||
|
<li><a href="catalog.php">Products</a></li>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="absolute_h_center">
|
||||||
|
<a href="index.php"><h4>ACME Store</h4></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
';
|
||||||
|
|
||||||
|
if (isset($_SESSION['id'])) {
|
||||||
|
$nav .= '
|
||||||
|
<li>
|
||||||
|
<a href="cart.php" id="cart">
|
||||||
|
<i class="nf nf-md-cart"></i>
|
||||||
|
' . (!empty($_SESSION['cart']) ? '<div id="dotton"><small>' . count($_SESSION['cart']) . '</small></div>' : '') . '
|
||||||
|
</a>
|
||||||
|
</li>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$nav .= '
|
||||||
|
' . (isset($_SESSION['id']) ? '<li><a href="logout.php">Logout</a></li>' : '') . '
|
||||||
|
' . (!isset($_SESSION['id']) ? '<li><a href="index.php">Login</a></li>' : '') . '
|
||||||
|
' . (!isset($_SESSION['id']) ? '<li><a href="create-account.php">Signup</a></li>' : '') . '
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
';
|
||||||
|
|
||||||
|
echo $nav;
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
function product_card($product)
|
||||||
|
{
|
||||||
|
$card = '
|
||||||
|
<a class="card column center full_width padding shadow" href="product.php?id=' . $product['id'] . '">
|
||||||
|
<div class="img_container">
|
||||||
|
<img src="img/' . $product['image'] . '">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h5>' . $product['name'] . '</h5>
|
||||||
|
<p>' . format_money($product['price']) . '</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $card;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
function catalog_grid($products)
|
||||||
|
{
|
||||||
|
$grid = '
|
||||||
|
<div class="grid center glass padding-top padding-bottom padding-left">
|
||||||
|
';
|
||||||
|
|
||||||
|
foreach ($products as $p)
|
||||||
|
$grid .= product_card($p);
|
||||||
|
|
||||||
|
$grid .= '
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $grid;
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<?php
|
||||||
|
function product_page($product)
|
||||||
|
{
|
||||||
|
$page = '
|
||||||
|
<div class="product_page_card glass column center full_width padding margin-top">
|
||||||
|
<div class="img_container">
|
||||||
|
<img src="img/' . $product['image'] . '">
|
||||||
|
</div>
|
||||||
|
<div class="column card full_width padding margin-top shadow" style="height: auto;">
|
||||||
|
<div class="row space_between">
|
||||||
|
<h3>' . $product['name'] . '</h3>
|
||||||
|
<h3>' . format_money($product['price']) . '</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>' . $product['description'] . '</p>
|
||||||
|
<form class="row space_between" id="add_to_cart">
|
||||||
|
<input type="hidden" name="is_logged_in" value="' . (isset($_SESSION['id']) ? 'true' : 'false') . '" id="is_logged_in">
|
||||||
|
<input type="hidden" name="product_id" value="' . $product['id'] . '" id="product_id">
|
||||||
|
<div class="column margin center_children">
|
||||||
|
<label for="quantity">Quantity:</label>
|
||||||
|
<input type="number" value="1" id="quantity" name="quantity" min="1" class="md_width">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="submit" class="margin" id="add_to_cart_btn" value="Add to Cart">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal">
|
||||||
|
<div class="modal_content">
|
||||||
|
' . login_form() . '
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $page;
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<?php
|
||||||
|
function login_form()
|
||||||
|
{
|
||||||
|
$form = '
|
||||||
|
<div class="glass center center_children padding md_width">
|
||||||
|
<form method="post" id="login_form" class="card full_width padding" style="height: auto;">
|
||||||
|
<div class="column center">
|
||||||
|
<div class="column margin-bottom">
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input id="username" name="username" autofocus required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column margin-bottom">
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input id="password" type="password" name="password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="create-account.php" class="margin-bottom">Signup Instead</a>
|
||||||
|
|
||||||
|
<input type="submit" class="button submit" id="login_submit">
|
||||||
|
</div>
|
||||||
|
<div class="column center error">
|
||||||
|
<p id="invalid"></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $form;
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
<?php
|
||||||
|
function signup_form()
|
||||||
|
{
|
||||||
|
$form = '
|
||||||
|
<div class="glass center md_width padding">
|
||||||
|
<form method="post" class="card column center full_width padding" style="height: auto;">
|
||||||
|
<div class="column margin-bottom">
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input id="username" name="username" autofocus required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column margin-bottom">
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input id="password" type="password" name="password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column margin-bottom">
|
||||||
|
<label for="v_password">Verify Password:</label>
|
||||||
|
<input id="v_password" type="password" name="v_password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="index.php" class="margin-bottom">Login Instead</a>
|
||||||
|
|
||||||
|
<div class="row space_between full_width">
|
||||||
|
<input type="submit" class="button submit" value="Create">
|
||||||
|
<input type="reset" class="button">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column center error">
|
||||||
|
<p id="err_username"></p>
|
||||||
|
<p id="err_match"></p>
|
||||||
|
<p id="err_length"></p>
|
||||||
|
<p id="err_num"></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
return $form;
|
||||||
|
}
|
||||||
Executable → Regular
+4
-4
@@ -1,14 +1,14 @@
|
|||||||
{
|
{
|
||||||
"name": "violet/db-start",
|
"name": "violet/catalog",
|
||||||
"autoload": {
|
"autoload": {
|
||||||
"psr-4": {
|
"psr-4": {
|
||||||
"Violet\\DbStart\\": "src/"
|
"Violet\\Catalog\\": "src/"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"authors": [
|
"authors": [
|
||||||
{
|
{
|
||||||
"name": "Joshua Ashton",
|
"name": "Josh Ashton",
|
||||||
"email": "joshuatashton+dev@gmail.com"
|
"email": "me@joshashton.dev"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"require": {
|
"require": {
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'functions/init.php';
|
||||||
|
require_once 'functions/user.php';
|
||||||
|
|
||||||
|
if (isset($_POST['username']) && isset($_POST['password']) && isset($_POST['v_password'])) {
|
||||||
|
if (!signup($_POST['username'], $_POST['password'], $_POST['v_password']))
|
||||||
|
echo '<p>Username is taken, or password do not match.</p>';
|
||||||
|
else {
|
||||||
|
header('Location: catalog.php');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
require_once 'components/head.php';
|
||||||
|
require_once 'components/user/signup.php';
|
||||||
|
|
||||||
|
echo signup_form();
|
||||||
|
|
||||||
|
require_once 'components/foot.php';
|
||||||
|
|||||||
Executable
+436
@@ -0,0 +1,436 @@
|
|||||||
|
/********** GENERAL **********/
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@view-transition {
|
||||||
|
navigation: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
a,
|
||||||
|
label,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="number"],
|
||||||
|
select,
|
||||||
|
option {
|
||||||
|
font-family: "Comic Relief", system-ui;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 8vw;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 6vw;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 5vw;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 3vw;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.7vw;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
a,
|
||||||
|
label,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
option,
|
||||||
|
ul li,
|
||||||
|
i {
|
||||||
|
font-size: 1.3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
text-align: center;
|
||||||
|
justify-self: center;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
height: 2px;
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** NAV BAR **********/
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
display: inline-block;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a {
|
||||||
|
display: block;
|
||||||
|
padding: 15px 15px 15px 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cart {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dotton {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dotton * {
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bg {
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
animation: float-random 10s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-random {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
/* We'll set the final translation in JavaScript */
|
||||||
|
transform: translate(var(--random-x), var(--random-y));
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-curve {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
/* Introduce an intermediate point to create a curve */
|
||||||
|
transform: translate(
|
||||||
|
calc(var(--random-x) / 2 + var(--curve-x)),
|
||||||
|
calc(var(--random-y) / 2 + var(--curve-y))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translate(var(--random-x), var(--random-y));
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: translate(
|
||||||
|
calc(var(--random-x) / 2 + var(--curve-x)),
|
||||||
|
calc(var(--random-y) / 2 + var(--curve-y))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add slight variations to the animation for a more natural feel */
|
||||||
|
#bg:nth-child(odd) {
|
||||||
|
animation-delay: 1s;
|
||||||
|
animation-duration: 12s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bg:nth-child(even) {
|
||||||
|
animation-delay: 2s;
|
||||||
|
animation-duration: 9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* You can add more variations using other nth-child selectors */
|
||||||
|
#bg:nth-child(7n) {
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
animation-duration: 11s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcome {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 20%;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 25px;
|
||||||
|
/* Optional: Add a slightly transparent background to the welcome card itself for better readability */
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
border-radius: 18px;
|
||||||
|
backdrop-filter: blur(50px);
|
||||||
|
background-color: rgba(173, 202, 235, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcome p {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** LAYOUT CLASSES **********/
|
||||||
|
.absolute_h_center {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center_children {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_align {
|
||||||
|
align-items: left;
|
||||||
|
justify-content: left;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_align {
|
||||||
|
align-items: right;
|
||||||
|
justify-content: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space_between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 23% 23% 23% 23%;
|
||||||
|
column-gap: 2%;
|
||||||
|
row-gap: 25px;
|
||||||
|
height: 600px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid_2x1 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 48% 48%;
|
||||||
|
column-gap: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
display: block;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list * {
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** FORMS **********/
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
padding: 5px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
border-radius: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="reset"] {
|
||||||
|
padding-left: 25px;
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** LISTS **********/
|
||||||
|
ul li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** CARDS **********/
|
||||||
|
.card {
|
||||||
|
display: block;
|
||||||
|
width: 275px;
|
||||||
|
height: 275px;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product_page_card {
|
||||||
|
display: block;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .img_container img {
|
||||||
|
min-width: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product_page_card .img_container img {
|
||||||
|
width: auto;
|
||||||
|
min-height: 275px;
|
||||||
|
max-height: 275px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** MARGINS & PADDING **********/
|
||||||
|
.padding {
|
||||||
|
padding: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padding-top {
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padding-right {
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padding-bottom {
|
||||||
|
padding-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padding-left {
|
||||||
|
padding-left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin {
|
||||||
|
margin: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-top {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-right {
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-bottom {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-left {
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** SIZING **********/
|
||||||
|
.std_width {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full_width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md_width {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm_width {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** MODALS **********/
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
padding-top: 100px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.fade-in {
|
||||||
|
display: block;
|
||||||
|
animation: fade-in 0.7s ease-in forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.fade-out {
|
||||||
|
display: none;
|
||||||
|
animation: fade-out 0.7s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal_content {
|
||||||
|
display: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
width: 40%;
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-out {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #ebf2fa;
|
||||||
|
--bg-shade: #cedff3;
|
||||||
|
--bg-shade2: #adcaeb;
|
||||||
|
--gold: #ffd700;
|
||||||
|
--brwn: #f4a460;
|
||||||
|
--blue: #1e90ff;
|
||||||
|
--d-blue: #0066cc;
|
||||||
|
--red: #dc143c;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
a,
|
||||||
|
label,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="number"],
|
||||||
|
select,
|
||||||
|
option {
|
||||||
|
color: var(--d-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
border-radius: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav *,
|
||||||
|
nav *:visited {
|
||||||
|
color: var(--blue);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 800;
|
||||||
|
transition-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a:hover {
|
||||||
|
color: var(--blue);
|
||||||
|
background-color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
#cart > #dotton {
|
||||||
|
background-color: var(--gold) !important;
|
||||||
|
color: var(--bg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcome h1,
|
||||||
|
#welcome p {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--blue);
|
||||||
|
transition-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: var(--bg-shade);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.card {
|
||||||
|
text-decoration: none;
|
||||||
|
transition-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.card:hover {
|
||||||
|
background-color: var(--bg-shade2);
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
input:focus,
|
||||||
|
select:focus {
|
||||||
|
background-color: var(--bg-shade2);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
color: var(--blue);
|
||||||
|
background-color: var(--gold);
|
||||||
|
transition-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"]:hover {
|
||||||
|
color: var(--bg);
|
||||||
|
background-color: var(--d-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart_item:hover > p {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart_item i:hover {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
<?php
|
||||||
|
function pretty_dump($arg)
|
||||||
|
{
|
||||||
|
ob_start();
|
||||||
|
echo '<pre>';
|
||||||
|
print_r($arg);
|
||||||
|
echo '</pre>';
|
||||||
|
return ob_get_clean();
|
||||||
|
}
|
||||||
|
|
||||||
|
function format_money($in)
|
||||||
|
{
|
||||||
|
$in = '$' . $in;
|
||||||
|
$parts = explode('.', $in);
|
||||||
|
if (count($parts) == 1)
|
||||||
|
$in .= '.00';
|
||||||
|
else {
|
||||||
|
if (strlen($parts[1]) == 1) {
|
||||||
|
$in .= '0';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $in;
|
||||||
|
}
|
||||||
|
|
||||||
|
function random_string()
|
||||||
|
{
|
||||||
|
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||||
|
$rand_string = '';
|
||||||
|
for ($i = 0; $i < 512; $i++)
|
||||||
|
$rand_string = $characters[rand(0, strlen($characters) - 1)];
|
||||||
|
|
||||||
|
return $rand_string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function verify_hash($arg, $hash_salt)
|
||||||
|
{
|
||||||
|
list($salt_hex, $hash) = explode('.', $hash_salt, 2);
|
||||||
|
$salt = hex2bin($salt_hex);
|
||||||
|
$calculated_hash = hash('sha512', $salt . $arg . $_ENV['SALT']);
|
||||||
|
return hash_equals($hash, $calculated_hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hash_salt($arg = null)
|
||||||
|
{
|
||||||
|
if (!$arg)
|
||||||
|
$arg = random_string();
|
||||||
|
|
||||||
|
$salt1 = random_bytes(256);
|
||||||
|
$salt2 = $_ENV['SALT'];
|
||||||
|
|
||||||
|
return bin2hex($salt1) . '.' . hash('sha512', $salt1 . $arg . $salt2);
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
<?php
|
||||||
|
if (isset($_POST['form_id'])) {
|
||||||
|
session_start();
|
||||||
|
require_once '../vendor/autoload.php';
|
||||||
|
// Load environment variables.
|
||||||
|
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../');
|
||||||
|
$dotenv->safeLoad();
|
||||||
|
require_once 'base.php';
|
||||||
|
require_once 'db.php';
|
||||||
|
|
||||||
|
switch ($_POST['form_id']) {
|
||||||
|
case 'add_to_cart':
|
||||||
|
if (isset($_POST['product_id']) && isset($_POST['quantity']))
|
||||||
|
echo urlencode(add_to_cart($_POST['product_id'], $_POST['quantity']));
|
||||||
|
break;
|
||||||
|
case 'cart':
|
||||||
|
handle_cart();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_cart()
|
||||||
|
{
|
||||||
|
if (!isset($_POST['product_id'])) {
|
||||||
|
echo urlencode('failure');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$id = $_POST['product_id'];
|
||||||
|
|
||||||
|
if (isset($_POST['action'])) {
|
||||||
|
switch ($_POST['action']) {
|
||||||
|
case 'remove':
|
||||||
|
$_SESSION['cart'][$id] = 0;
|
||||||
|
unset($_SESSION['cart'][$id]);
|
||||||
|
echo urlencode(format_money(calculate_total()));
|
||||||
|
break;
|
||||||
|
case 'adjust':
|
||||||
|
$_SESSION['cart'][$id] = $_POST['quantity'];
|
||||||
|
echo urlencode(format_money(calculate_total()));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculate_total()
|
||||||
|
{
|
||||||
|
$total = 0;
|
||||||
|
foreach ($_SESSION['cart'] as $id => $q) {
|
||||||
|
$product = fetch_product($id);
|
||||||
|
$total += $product['price'] * $q;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $total;
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_quantity($id, $q)
|
||||||
|
{
|
||||||
|
if (isset($_SESSION['cart'][$id]))
|
||||||
|
$_SESSION['cart'][$id] = $q;
|
||||||
|
}
|
||||||
|
|
||||||
|
function add_to_cart($id, $q)
|
||||||
|
{
|
||||||
|
if (!isset($_SESSION['cart'][$id]))
|
||||||
|
$_SESSION['cart'][$id] = $q;
|
||||||
|
else
|
||||||
|
$_SESSION['cart'][$id] = $_SESSION['cart'][$id] + $q;
|
||||||
|
|
||||||
|
return count($_SESSION['cart']);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetch_catalog()
|
||||||
|
{
|
||||||
|
$conn = get_connection();
|
||||||
|
$result = $conn->query('SELECT * FROM product');
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetch_product($id)
|
||||||
|
{
|
||||||
|
$result = exec_stmt('SELECT * FROM product WHERE id = ?', 'i', $id);
|
||||||
|
return $result->fetch_assoc();
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
<?php
|
||||||
|
// Use environment variables for the database password and IP address.
|
||||||
|
$db = $_ENV['DB'];
|
||||||
|
$db_user = $_ENV['DB_UN'];
|
||||||
|
$db_pass = $_ENV['DB_PW'];
|
||||||
|
$ip_addr = $_ENV['DB_IP'];
|
||||||
|
|
||||||
|
// Make some constants
|
||||||
|
if ($_SERVER['HTTP_HOST'] == 'localhost:2440') {
|
||||||
|
define('HOST', 'localhost');
|
||||||
|
define('USER', $db_user);
|
||||||
|
define('PASS', $db_pass);
|
||||||
|
define('DB', $db);
|
||||||
|
} else {
|
||||||
|
define('HOST', $ip_addr);
|
||||||
|
define('USER', $db_user);
|
||||||
|
define('PASS', $db_pass);
|
||||||
|
define('DB', $db);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exec_stmt($stmt, $param_types, ...$args)
|
||||||
|
{
|
||||||
|
$conn = get_connection();
|
||||||
|
$stmt = $conn->prepare($stmt);
|
||||||
|
$stmt->bind_param($param_types, ...$args);
|
||||||
|
$stmt->execute();
|
||||||
|
$result = $stmt->get_result();
|
||||||
|
|
||||||
|
if ($result) {
|
||||||
|
return $result;
|
||||||
|
} else {
|
||||||
|
return mysqli_insert_id($conn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_connection()
|
||||||
|
{
|
||||||
|
$conn = new mysqli(HOST, USER, PASS, DB);
|
||||||
|
return $conn;
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
header("Content-Security-Policy: default-src 'self'; font-src 'self' https://www.nerdfonts.com/assets/fonts/Symbols-2048-em%20Nerd%20Font%20Complete.woff2; style-src 'self' 'unsafe-inline' https://nerdfonts.com/assets/css/webfont.css https://www.nerdfonts.com/assets/css/webfont.css; script-src 'self' 'unsafe-inline'; img-src 'self';");
|
||||||
|
|
||||||
|
// Initialize Composer.
|
||||||
|
require_once 'vendor/autoload.php';
|
||||||
|
require_once 'functions/base.php';
|
||||||
|
|
||||||
|
// Load environment variables.
|
||||||
|
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../');
|
||||||
|
$dotenv->safeLoad();
|
||||||
|
|
||||||
|
require_once 'functions/db.php';
|
||||||
|
|
||||||
|
if (isset($_SESSION['id']))
|
||||||
|
if (!isset($_SESSION['cart']))
|
||||||
|
$_SESSION['cart'] = [];
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
if (isset($_POST['form_id'])) {
|
||||||
|
include_once '../vendor/autoload.php';
|
||||||
|
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../');
|
||||||
|
$dotenv->safeLoad();
|
||||||
|
|
||||||
|
include_once 'base.php';
|
||||||
|
include_once 'db.php';
|
||||||
|
|
||||||
|
switch ($_POST['form_id']) {
|
||||||
|
case 'create-account':
|
||||||
|
if (isset($_POST['username'])) {
|
||||||
|
$result['exists'] = (username_exists(urldecode($_POST['username'])) ? 'True' : 'False');
|
||||||
|
echo json_encode($result);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'login':
|
||||||
|
if (isset($_POST['username']) && isset($_POST['password']))
|
||||||
|
echo json_encode(login($_POST['username'], $_POST['password']));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function username_exists($username)
|
||||||
|
{
|
||||||
|
$result = exec_stmt('SELECT username FROM user WHERE username = ?', 's', $username)->fetch_assoc();
|
||||||
|
|
||||||
|
if (isset($result['username']))
|
||||||
|
return true;
|
||||||
|
else
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function login($username, $password)
|
||||||
|
{
|
||||||
|
$user = exec_stmt('SELECT id, password FROM user WHERE username = ?', 's', $username)->fetch_assoc();
|
||||||
|
|
||||||
|
if (!isset($user['id']))
|
||||||
|
return false;
|
||||||
|
|
||||||
|
if (!password_verify($password, $user['password'])) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$_SESSION['id'] = $user['id'];
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function signup($username, $password, $verify_password)
|
||||||
|
{
|
||||||
|
if (username_exists($username))
|
||||||
|
return false;
|
||||||
|
|
||||||
|
if ($password != $verify_password)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
$user_id = exec_stmt('INSERT INTO user (username, password) VALUES (?, ?)', 'ss', $username, password_hash($password, PASSWORD_DEFAULT));
|
||||||
|
|
||||||
|
if (!isset($user_id))
|
||||||
|
return false;
|
||||||
|
|
||||||
|
$_SESSION['id'] = $user_id;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
$head = <<<EOL
|
|
||||||
<head>
|
|
||||||
<title>E-Commerce</title>
|
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
|
||||||
</head>
|
|
||||||
EOL;
|
|
||||||
|
|
||||||
echo $head;
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 581 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user