sync

2025-05-01 14:37:08 -06:00
parent b6008d462e
commit 5cd4571a92
91 changed files with 1009 additions and 36 deletions
@@ -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';
 });
@@ -0,0 +1,13 @@
 <?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 'components/head.php';
 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>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,20 @@
 <?php
 function cart_item($item)
 {
  $item = '
    <div class="row">
      <div class="square img_container">
      </div>
      <div class="row space_between">
        <p>' . $item['description'] . '</p>
        <select>
          <input type="number">
        </select>
      </div>
    </div>
  ';
  return $item;
 }
@@ -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,21 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/colors.css">
  <?php
  switch ($_SERVER['SCRIPT_NAME']) {
    case '/create-account.php':
      echo '<script src="js/create-account.js" defer></script>';
      break;
    case '/product.php':
      if (!isset($_SESSION['id']))
        echo '<script src="js/login-modal.js" defer></script>';
      break;
  }
  ?>
 </head>
 <body>
  <?php include_once 'nav.php'; ?>
@@ -0,0 +1,25 @@
 <?php
 $nav = '
  <nav>
    <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>
          ' . (isset($_SESSION['id']) ? '<li><a href="cart.php">Cart</a></li>' : '') . '
          ' . (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" href="product.php?id=' . $product['id'] . '">
      <div class="img_container">
        <img src="img/' . $product['image'] . '">
      </div>
      <div class="row">
        <h4>' . $product['name'] . '</h4>
        <h5>' . $product['price'] . '</h5>
      </div>
    </a>
  ';
    return $card;
 }
@@ -0,0 +1,16 @@
 <?php
 function catalog_grid($products)
 {
  $grid = '
    <div class="grid center">
  ';
  foreach ($products as $p)
    $grid .= product_card($p);
  $grid .= '
    </div>
  ';
  return $grid;
 }
@@ -0,0 +1,36 @@
 <?php
 function product_page($product)
 {
  $page = '
    <div class="product_page_card column center full_width padding">
      <div class="img_container">
        <img src="img/' . $product['image'] . '">
      </div>
      <div class="column">
        <div class="row space_between">
          <h3>' . $product['name'] . '</h3>
          <h3>' . $product['price'] . '</h3>
        </div>
        <p>' . $product['description'] . '</p>
        <form class="row" id="add_to_cart">
          <input type="hidden" name="is_logged_in" value="' . (isset($_SESSION['id']) ? 'true' : 'false') . '">
          <div class="column margin">
            <label for="quantity">Quantity:</label>
            <input type="number" value="1" id="quantity" name="quantity" min="1">
          </div>
          <input type="submit" value="Add to Cart" class="margin">
        </form>
        </div>
      </div>
      <div class="modal">
        <div class="modal_content">
          ' . login_form() . '
        </div>
    </div>
  ';
  return $page;
 }
@@ -0,0 +1,27 @@
 <?php
 function login_form()
 {
  $form = '
    <div class="card center">
      <form method="post" id="login_form">
        <div class="column center">
          <div class="column">
            <label for="username">Username:</label>
            <input id="username" name="username" autofocus required>
          </div>
          <div class="column">
            <label for="password">Password:</label>
            <input id="password" type="password" name="password" required>
          </div>
          <a href="create-account.php">Signup Instead</a>
          <input type="submit" class="button submit" id="login_submit">
        </div>
      </form>
    </div>
  ';
  return $form;
 }
@@ -0,0 +1,40 @@
 <?php
 function signup_form()
 {
  $form = '
    <div class="card center">
      <form method="post" class="column center">
        <div class="column">
          <label for="username">Username:</label>
          <input id="username" name="username" autofocus required>
        </div>
        <div class="column">
          <label for="password">Password:</label>
          <input id="password" type="password" name="password" required>
        </div>
        <div class="column">
          <label for="v_password">Verify Password:</label>
          <input id="v_password" type="password" name="v_password" required>
        </div>
        <a href="index.php">Login Instead</a>
        <div class="row full_width">
          <input type="submit" class="button submit">
          <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;
 }
@@ -0,0 +1,17 @@
 {
    "name": "violet/catalog",
    "autoload": {
        "psr-4": {
            "Violet\\Catalog\\": "src/"
        }
    },
    "authors": [
        {
            "name": "Josh Ashton",
            "email": "me@joshashton.dev"
        }
    ],
    "require": {
        "vlucas/phpdotenv": "^5.6"
    }
 }
@@ -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';
@@ -0,0 +1,216 @@
 /********** GENERAL **********/
 * {
  margin: 0;
  padding: 0;
 }
 h1 {
  font-size: 6vw;
 }
 h2 {
  font-size: 4vw;
 }
 h3 {
  font-size: 3vw;
 }
 h4 {
  font-size: 2vw;
 }
 h5,
 h6,
 p,
 a,
 label {
  font-size: 1vw;
 }
 /********** NAV BAR **********/
 nav {
  margin-bottom: 25px;
 }
 nav ul {}
 nav ul li {
  display: inline-block;
  list-style: none;
 }
 nav ul li a {
  display: block;
  padding: 15px 15px 15px 15px;
  text-decoration: none;
 }
 /********** 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;
 }
 .row {
  display: flex;
  flex-direction: row;
 }
 .column {
  display: flex;
  flex-direction: column;
 }
 .space_between {
  justify-content: space-between;
 }
 .grid {
  display: grid;
  grid-template-columns: 20% 20% 20% 20%;
  column-gap: 75px;
  row-gap: 25px;
 }
 /********** CARDS **********/
 .card {
  display: block;
  width: 250px;
  height: 250px;
  border: 1px solid black;
 }
 .product_page_card {
  display: block;
  border: 1px solid black;
 }
 .card .img_container img {
  min-width: 60%;
  max-width: 60%;
  height: auto;
 }
 .product_page_card .img_container img {
  min-width: 30%;
  max-width: 30%;
  height: auto;
  border: 1px solid red;
 }
 /********** 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%;
 }
 /********** 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,28 @@
 :root {
  --bg: #EBF2FA;
  --gold: #FFD700;
  --brwn: #F4A460;
  --blue: #1E90FF;
  --red: #DC143C;
 }
 nav {
  background-color: var(--bg);
  border-bottom: 2px solid var(--gold);
 }
 nav *,
 nav *:visited {
  color: var(--blue);
  text-decoration: none;
  font-weight: 800;
  transition-duration: 500ms;
 }
 nav ul li a:hover {
  background-color: var(--gold);
 }
 body {
  background-color: var(--bg);
 }
@@ -0,0 +1,38 @@
 <?php
 function pretty_dump($arg)
 {
    ob_start();
    echo '<pre>';
    print_r($arg);
    echo '</pre>';
    return ob_get_clean();
 }
 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,14 @@
 <?php
 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,39 @@
 <?php
 // Use environment variables for the database password and IP address.
 $db = $_ENV['DATABASE'];
 $db_user = $_ENV['DATABASE_USER'];
 $db_pass = $_ENV['DATABASE_PASSWORD'];
 $ip_addr = $_ENV['IP_ADDRESS'];
 // 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,13 @@
 <?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';
@@ -0,0 +1,62 @@
 <?php
 if (isset($_POST['form_id'])) {
    require_once '../vendor/autoload.php';
    $dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../');
    $dotenv->safeLoad();
    require_once 'base.php';
    require_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;
    }
 }
 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 FROM user WHERE username = ? AND password = ?', 'ss', $username, $password)->fetch_assoc();
    if (!isset($user['id']))
        return false;
    $_SESSION['id'] = $user['id'];
    return true;
 }
 function signup($username, $password, $verify_password)
 {
    echo 'test';
    if (username_exists($username))
        return false;
    echo 'username=' . $username;
    if ($password != $verify_password)
        return false;
    $user_id = exec_stmt('INSERT INTO user (username, password) VALUES (?, ?)', 'ss', $username, $password);
    echo 'user_id=' . $user_id;
    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;
@@ -1,9 +1,20 @@
 <?php
-echo '<!doctype html>';
+include_once 'functions/init.php';
-echo '<html lang="en">';
+require_once 'functions/user.php';
 include('head.php');
-echo '<body>';
+if (isset($_POST['username']) && isset($_POST['password'])) {
-include('nav.php');
+    if (login($_POST['username'], $_POST['password']))
-echo '</body>';
+        header('Location: catalog.php');
-echo '</html>';
+    else
        echo '<p>Username and/or password are incorrect!</p>';
 }
 include_once 'components/head.php';
 include_once 'components/user/login.php';
 if (isset($_SESSION['id'])) {
    echo '<h1>Welcome to the store</h1>';
 } else
    echo login_form();
 include_once 'components/foot.php';
@@ -0,0 +1,65 @@
 const username_field = document.querySelector('#username');
 const password_field = document.querySelector('#password');
 const v_password_field = document.querySelector('#v_password');
 const submit_button = document.querySelector('input[type="submit"]');
 const err_username = document.querySelector('#err_username');
 const err_match = document.querySelector('#err_match');
 const err_length = document.querySelector('#err_length');
 const err_num = document.querySelector('#err_num');
 function handle_input() {
  const password = password_field.value;
  const v_password = v_password_field.value;
  if (password != v_password && v_password != '')
    err_match.innerText = 'Passwords do not match.';
  else
    err_match.innerText = '';
  if (password.length < 8)
    err_length.innerText = 'Password must be at least 8 characters long.';
  else
    err_length.innerText = '';
  const num_regex = /\d/;
  if (!num_regex.test(password))
    err_num.innerText = 'Password must have at least 1 digit.';
  else
    err_num.innerText = '';
  if (err_match.innerText == '' && err_length.innerText == '' && err_num.innerText == '' && err_username == '' && v_password != '')
    submit_button.disabled = false;
  else
    submit_button.disabled = true;
 }
 function handle_username() {
  const username = username_field.value;
  fetch('functions/user.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'form_id=create-account&username=' + username,
  })
    .then(response => {
      if (!response.ok) {
        console.log('Failed to check if username exists!');
      }
      return response.json(); // Parse response body as JSON
    })
    .then(data => {
      if (data['exists'] == 'True')
        err_username.innerText = 'Username is taken.';
      else
        err_username.innerText = '';
    });
 }
 username_field.addEventListener('blur', handle_username);
 password_field.addEventListener('input', handle_input);
 v_password_field.addEventListener('input', handle_input);
 submit_button.disabled = true;
@@ -0,0 +1,31 @@
 const add_to_cart = document.querySelector('input[type="submit"]');
 const modal = document.querySelector('.modal');
 const username = document.querySelector('#username');
 const password = document.querySelector('#password');
 const login_button = document.querySelector('#login_submit');
 add_to_cart.addEventListener('click', (e) => {
  e.preventDefault();
  if (modal.classList[0] === "fade-in") {
    modal.classList.remove("fade-in");
    modal.classList.add("fade-out");
  } else {
    modal.classList.remove("fade-out");
    modal.classList.add("fade-in");
  }
  modal.addEventListener('click', () => {
    if (modal.classList[0] === "fade-in") {
      modal.classList.remove("fade-in");
      modal.classList.add("fade-out");
    } else {
      modal.classList.remove("fade-out");
      modal.classList.add("fade-in");
    }
  })
 });
@@ -0,0 +1,7 @@
 <?php
 include_once 'functions/init.php';
 foreach (array_keys($_SESSION) as $key)
  unset($_SESSION[$key]);
 header('Location: .');
@@ -1,19 +0,0 @@
 <?php
 $nav = <<<EOL
    <div id="nav">
      <ul id="nav-ul">
        <li id="nav-ul-li">
          <a href="#">
            Home
          </a>
        </li>
        <li id="nav-ul-li">
          <a href="#">
            Cart
          </a>
        </li>
      </ul>
    </div>
    EOL;
 echo $nav;
@@ -0,0 +1,21 @@
 <?php
 if (!isset($_GET['id']))
  header('Location: catalog.php');
 require_once 'functions/init.php';
 require_once 'functions/catalog.php';
 // UI Components
 foreach (glob('components/products/*.php') as $file)
  require_once $file;
 require_once 'components/user/login.php';
 require_once 'components/head.php';
 echo '<div id="product_page" class="std_width center">';
 $product = fetch_product($_GET['id']);
 echo product_page($product);
 echo '</div>';
 require_once 'components/foot.php';
@@ -0,0 +1 @@
 mariadb -u root -p < setup.sql
@@ -0,0 +1,43 @@
 CREATE DATABASE IF NOT EXISTS catalog;
 USE catalog;
 CREATE TABLE IF NOT EXISTS user
  (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(1024) NOT NULL,
    login_token VARCHAR(1024) NOT NULL UNIQUE,
    salt VARCHAR(256) NOT NULL,
    INDEX (login_token)
  );
 CREATE TABLE IF NOT EXISTS product
  (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL UNIQUE,
    description VARCHAR(500) NOT NULL,
    image VARCHAR(100),
    price FLOAT NOT NULL
  );
 INSERT INTO product (name, description, image, price) VALUES
  ("Anvil", "A heavy steel block used for hammering and shaping metal.", "anvil.jpg", 75.00),
  ("Axle Grease", "A thick lubricant used to reduce friction in axles and other moving parts.", "axle_grease.jpg", 8.50),
  ("Atom Re-Arranger", "A device of questionable scientific validity that purports to rearrange atoms.", "atom_rearranger.jpg", 499.99),
  ("Bed Springs", "Coiled metal springs used in mattresses and furniture for support.", "bed_springs.jpeg", 35.75),
  ("Bird Seed", "A mixture of seeds formulated as food for pet birds.", "bird_seed.jpg", 12.20),
  ("Blasting Powder", "An explosive material used for demolition and mining. Handle with extreme caution!", "blasting_powder.JPG", 150.00),
  ("Cork", "The bark of the cork oak tree, often used for bottle stoppers and insulation.", "cork.jpg", 2.50),
  ("Disintegration Pistol", "A fictional weapon capable of breaking down matter at a molecular level.", "disintegration_pistol.png", 299.00),
  ("Earthquake Pills", "Pills that supposedly induce seismic activity. Effects not guaranteed.", "earthquake_pills.jpg", 55.00),
  ("Female Roadrunner costume", "A feathered costume designed to resemble a female roadrunner.", "roadrunner_costume_female.jpg", 62.99),
  ("Giant Rubber Band", "An oversized elastic band, useful for large-scale stretching or launching.", "giant_rubber_band.jpg", 19.95),
  ("Instant Girl", "A product that claims to instantly create a companion. Results may vary significantly.", "instant_girl.jpg", 78.30),
  ("Iron Carrot", "A carrot made of iron. Purpose unclear.", "iron_carrot.jpeg", 22.50),
  ("Jet Propelled Unicycle", "A single-wheeled vehicle powered by a jet engine. For experienced riders only.", "jet_propelled_unicycle.jpg", 599.00),
  ("Out-Board Motor", "A detachable motor mounted on the outside of a boat's transom.", "outboard_motor.jpg", 210.00),
  ("Railroad Track", "A section of steel rail used for train tracks.", "railroad_track.jpeg", 315.50),
  ("Rocket Sled", "A sled propelled by a rocket engine, designed for high-speed travel on rails.", "rocket_sled.jpg", 850.00),
  ("Super Outfit", "A costume that allegedly grants the wearer extraordinary abilities. Claims not verified.", "super_outfit.jpeg", 95.00),
  ("Time Space Gun", "A fictional device that manipulates the fabric of spacetime. Use with caution.", "time_space_gun.jpeg", 675.00),
  ("X-Ray", "An electromagnetic radiation with high energy, often used for medical imaging.", "x_ray.jpeg", 1.00);