Basic account system

2024-12-28 18:36:22 +00:00 · 2022-07-25 16:13:26 +01:00 · 2022-07-25 16:13:26 +01:00 · 87dc4d5ff0
parent 0536dfc62c
commit 87dc4d5ff0
19 changed files with 371 additions and 46 deletions
--- a/assets/icons/user-circle-plus.svg
+++ b/assets/icons/user-circle-plus.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="120" r="40" fill="none" stroke="#e8e3e3" stroke-miterlimit="10" stroke-width="16"></circle><path d="M63.8,199.4a72,72,0,0,1,128.4,0" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><line x1="176" y1="56" x2="224" y2="56" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="200" y1="32" x2="200" y2="80" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M222.8,112.9A93.3,93.3,0,0,1,224,128a96,96,0,1,1-96-96,93.3,93.3,0,0,1,15.1,1.2" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/assets/icons/user-circle.svg
+++ b/assets/icons/user-circle.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><circle cx="128" cy="120" r="40" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><path d="M63.8,199.4a72,72,0,0,1,128.4,0" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/css/account.css
+++ b/css/account.css
@ -0,0 +1,16 @@
+/*
+  -=-=-= Account =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+.account-root {
+  margin: 0 auto 2rem; padding: 0.5rem;
+
+  max-width: 621px;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}
--- a/css/edit.css
+++ b/css/edit.css
@ -2,7 +2,9 @@
  -=-=-= EDIT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */
 .edit-root {
-  margin: 0 auto 2rem; padding: 0.5rem;;
+  margin: 0 auto 2rem; padding: 0.5rem;
+
+  max-width: 621px;

  background-color: var(--bg); color: var(--fg);

@ -11,6 +13,4 @@

  border-radius: var(--rad);
  box-shadow: var(--shadow);
-
-  max-width: 621px;
 }
--- a/css/gallery.css
+++ b/css/gallery.css
@ -20,7 +20,8 @@
 .gallery-item {
  margin: 0.5rem; padding: 0;

-  max-width: 300px; height: auto;
+  max-width: 232.5px; max-height: 232.5px;
+  height: auto;

  background-color: var(--bg-2);
  border-radius: var(--rad);
@ -44,6 +45,7 @@
 .gallery-image {
  margin: 0; padding: 0;

+  /*max-width: 232.5px; max-height: 232.5px;*/
  width: 100%; height: 100%;

  top: 0; bottom: 0; left: 0; right: 0;
--- a/css/image.css
+++ b/css/image.css
@ -28,6 +28,10 @@
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);

+  /*background-color: var(--bg);
+
+  outline: 0.5rem solid var(--bg);*/
+
  border-radius: var(--rad);
 }

--- a/css/login.css
+++ b/css/login.css
@ -0,0 +1,16 @@
+/*
+  -=-=-= LONGIN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+.login-root {
+  margin: 0 auto 2rem; padding: 0.5rem;
+
+  max-width: 621px;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}
--- a/css/master.css
+++ b/css/master.css
@ -6,6 +6,10 @@
@import "edit.css";
@import "upload.css";

+@import "signup.css";
+@import "login.css";
+@import "account.css";
+
 :root {
  --bg: #151515df;
  --bg-1: #242621;
@ -137,6 +141,12 @@ a.btn {
 .space-top {
  margin-top: 1rem;
 }
+.space-bottom-large {
+  margin-bottom: 2rem;
+}
+.space-top-large {
+  margin-top: 2rem;
+}

 .svg {
  margin: 0 0.2rem 0.1rem 0;
--- a/css/nav.css
+++ b/css/nav.css
@ -33,7 +33,7 @@ nav hr {
  width: auto;
  justify-content: space-between;
 }
-@media (max-width: 569px) {
+@media (max-width: 800px) {
  .nav-name h3, .nav-name {
    display: none;
  }
--- a/css/signup.css
+++ b/css/signup.css
@ -0,0 +1,16 @@
+/*
+  -=-=-= SIGN UP =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+.signup-root {
+  margin: 0 auto 2rem; padding: 0.5rem;
+
+  max-width: 621px;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}
--- a/css/upload.css
+++ b/css/upload.css
@ -2,7 +2,9 @@
  -=-=-= UPLOAD =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */
 .upload-root {
-  margin: 0 auto 2rem; padding: 0.5rem;;
+  margin: 0 auto 2rem; padding: 0.5rem;
+
+  max-width: 621px;

  background-color: var(--bg); color: var(--fg);

@ -11,6 +13,4 @@

  border-radius: var(--rad);
  box-shadow: var(--shadow);
-
-  max-width: 621px;
 }
--- a/edit.php
+++ b/edit.php
@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>UwU</title>
+  <title>Gallery</title>
  <link rel="stylesheet" href="css/master.css">
  <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
@ -16,7 +16,7 @@
    <h2>Modify Information</h2>
    <p class="space-below">This is a dangerous place to step foot into... tread carefully.</p>
    <form class="flex-down between" method="POST" action="edit.php" enctype="multipart/form-data">
-        <input class="btn alert-default space-bottom" type="text" name="alt" placeholder="Description/Alt for image">
+        <input class="btn alert-default space-bottom-large" type="text" name="alt" placeholder="Description/Alt for image">
        <?php echo "<button class='btn alert-default' type='submit' name='id' value=".$_GET["id"]."><img class='svg' src='assets/icons/edit.svg'>Update information</button>"; ?>
    </form>

--- a/image.php
+++ b/image.php
@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>UwU</title>
+  <title>Gallery</title>
  <link rel="stylesheet" href="css/master.css">
  <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
@ -17,7 +17,7 @@

  // Update toast
  if ($_GET["update"] == "success") {
-    echo "<p class='alert alert-high space-bottom'>Information updated</p>";
+    echo "<p class='alert alert-high space-bottom-large'>Information updated</p>";
  }


@ -30,7 +30,7 @@
  // Check if ID of image in URL
  if (!isset($_GET['id'])) {
    // No ID toast
-    echo "<p class='alert alert-low space-bottom'>No ID present</p>";
+    echo "<p class='alert alert-low space-bottom-large'>No ID present</p>";

    // Replacement "no image" image and description
    $image_path = "assets/no_image.png";
@ -38,7 +38,7 @@

  } elseif (empty($image['imagename'])) {
    // ID not avalible toast
-    echo "<p class='alert alert-low'>Could not find image with ID: ".$_GET['id']."</p>";
+    echo "<p class='alert alert-low space-bottom-large'>Could not find image with ID: ".$_GET['id']."</p>";

    // Replacement "no image" image and description
    $image_path = "assets/no_image.png";
@ -105,7 +105,7 @@
        // If deleted, delete from Table
        $image_delete_request = "DELETE FROM swag_table WHERE id =".$image['id'];
        $image_delete = mysqli_query($conn,$image_delete_request);
-        
+
        if ($image_delete) {
          // Deleted image
          header("Location:index.php?del=true&id=".$image['id']);
--- a/index.php
+++ b/index.php
@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>UwU</title>
+  <title>Gallery</title>
  <link rel="stylesheet" href="css/master.css">
  <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
@ -17,10 +17,21 @@
  if ($_GET["del"] == "true") {
    echo "<p class='alert alert-high space-bottom'>Successfully deleted image: ".$_GET['id']."</p>";
  }
+
+  // Account toast
+  if ($_GET["login"] == "success") {
+    echo "<p class='alert alert-high space-bottom'>You're now logged in!</p>";
+  }
  ?>

  <div class="info-text center">
-    <h1>Welcome!</h1>
+    <?php
+    if (isset($_SESSION["username"])) {
+      echo "<h1>Welcome ".$_SESSION['username']."!</h1>";
+    } else {
+      echo "<h1>Welcome!</h1>";
+    }
+    ?>
    <p>*internal screaming*</p>
  </div>

--- a/login.php
+++ b/login.php
@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login</title>
+  <link rel="stylesheet" href="css/master.css">
+  <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
+</head>
+<body>
+  <?php
+  include("ui/header.php");
+  require_once("ui/conn.php");
+
+  // Initialize the session
+  session_start();
+
+  // Check if the user is already logged in, if yes then redirect him to welcome page
+  if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
+      $success = "You're already logged in! No need to try this again";
+  }
+
+  if (isset($_POST['login'])) {
+    // Checking if Username is empty
+    if (empty(trim($_POST["username"]))) {
+      $error = "Who are you?";
+    } else {
+      $username = trim($_POST["username"]);
+    }
+
+    // Check if Password is empty
+    if (empty(trim($_POST["password"]))) {
+      $error = "Pls enter super duper secrete password";
+    } else {
+      $password = trim($_POST["password"]);
+    }
+
+    // Check if no errors occured
+    if (empty($error)) {
+      // Prepare so SQL doesnt get spooked
+      $sql = "SELECT id, username, password FROM users WHERE username = ?";
+
+      if ($stmt = mysqli_prepare($conn, $sql)) {
+        // Bind dis shit
+        mysqli_stmt_bind_param($stmt, "s", $param_username);
+
+        // Set parameters
+        $param_username = $username;
+
+        // Attempt to execute the prepared statement
+        if (mysqli_stmt_execute($stmt)) {
+          // Store result
+          mysqli_stmt_store_result($stmt);
+
+          // Check if username exists, if yes then verify password
+          if (mysqli_stmt_num_rows($stmt) == 1) {
+            // Bind result variables
+            mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password);
+            if (mysqli_stmt_fetch($stmt)) {
+              if (password_verify($password, $hashed_password)) {
+                // Password is correct, so start a new session
+                session_start();
+
+                // Store data in session variables
+                $_SESSION["loggedin"] = true;
+                $_SESSION["id"] = $id;
+                $_SESSION["username"] = $username;
+
+                // let the user know
+                $success = "Yupee! You are now logged in";
+                header("Location:https://superdupersecteteuploadtest.fluffybean.gay/index.php?login=success");
+              } else {
+                $error = "Username or Password sus, please try again :3";
+              }
+            }
+          } else {
+            $error = "Username or Password sus, please try again :3";
+          }
+        } else {
+          $error = "Sowwy, something went wrong on our end :c";
+        }
+
+        // Close statement
+        mysqli_stmt_close($stmt);
+      }
+    }
+
+    // Close connection
+    mysqli_close($conn);
+  }
+  ?>
+
+  <div class="login-root">
+    <h2 class="space-bottom">Login</h2>
+    <p class="space-bottom">This is still being worked on, so I ask you kindly to not try anything, thankies!</p>
+    <form class="flex-down between" method="POST" action="login.php" enctype="multipart/form-data">
+      <input class="btn alert-default space-bottom" type="text" name="username" placeholder="Username">
+      <input class="btn alert-default space-bottom-large" type="password" name="password" placeholder="Password">
+      <button class="btn alert-default" type="submit" name="login"><img class="svg" src="assets/icons/user-circle.svg">Login</button>
+    </form>
+    <?php
+    if (isset($error)) {
+      echo "<p class='alert alert-low space-top'>".$error."</p>";
+    }
+    if (isset($success)) {
+      echo "<p class='alert alert-high space-top'>".$success."</p>";
+    }
+    ?>
+  </div>
+
+  <?php include("ui/footer.php"); ?>
+</body>
+</html>
--- a/signup.php
+++ b/signup.php
@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sign Up</title>
+  <link rel="stylesheet" href="css/master.css">
+  <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
+</head>
+<body>
+  <?php
+  include("ui/header.php");
+  include_once("ui/conn.php");
+
+  // Validate susness of Username
+  if (isset($_POST['signup'])) {
+    if (empty(trim($_POST["username"]))) {
+      // Username was taken
+      $error = "Enter a username reeeee";
+      //header("Location:signup.php?r=noUser");
+    } elseif (!preg_match('/^[a-zA-Z0-9_]+$/', trim($_POST["username"]))) {
+      // Username entered contains ilegal characters
+      $error = "Very sus. Username can only contain letters, numbers, and underscores";
+      //header("Location:signup.php?r=username");
+    } else {
+      // Prepare sql for sus
+      $sql = "SELECT id FROM users WHERE username = ?";
+
+      if ($stmt = mysqli_prepare($conn, $sql)) {
+        mysqli_stmt_bind_param($stmt, "s", $username_request);
+
+        $username_request = trim($_POST["username"]);
+
+        if (mysqli_stmt_execute($stmt)) {
+          // Ask sql nicely if other usernames exist and store info
+          mysqli_stmt_store_result($stmt);
+
+          if (mysqli_stmt_num_rows($stmt) == 1) {
+            // Username not entered
+            $error = "Oopsie, username taken :c";
+            //header("Location:signup.php?r=userTake");
+          } else {
+            $username = trim($_POST["username"]);
+          }
+        } else {
+          $error = "Sussy things happened on our end, please try again later";
+        }
+        // Outa here with this
+        mysqli_stmt_close($stmt);
+      }
+    }
+
+    // Validate sussness of Password
+    if (empty(trim($_POST["password"]))) {
+      // No password entered
+      $error = "Bruh, enter a password";
+      //header("Location:signup.php?r=noPassword");
+    } elseif(strlen(trim($_POST["password"])) < 6){
+      // Password not long enough 👀
+      $error = "(Password) Not long enough 👀";
+      //header("Location:signup.php?r=passwordShort");
+    } else {
+      $password = trim($_POST["password"]);
+    }
+
+    // Validate sussiness of the other Password
+    if (empty(trim($_POST["confirm_password"]))) {
+      // Did not confirm passowrd
+      $error = "You must confirm password!!!!!";
+      //header("Location:signup.php?r=noConfirm");
+    } else {
+      $confirm_password = trim($_POST["confirm_password"]);
+      if (empty($error) && $confirm_password != $password) {
+        // Password and re-entered Password does not match
+        $error = "Passwords need to be the same, smelly smelly";
+        //header("Location:signup.php?r=notSame");
+      }
+    }
+
+    // Checking for errors
+    if (empty($error)) {
+      $sql = "INSERT INTO users (username, password) VALUES (?, ?)";
+
+      if ($stmt = mysqli_prepare($conn, $sql)) {
+        // Bind variables to the prepared statement as parameters
+        mysqli_stmt_bind_param($stmt, "ss", $param_username, $param_password);
+
+        // Set parameters
+        $param_username = $username;
+        $param_password = password_hash($password, PASSWORD_DEFAULT);
+
+        // Attempt to execute the prepared statement
+        if (mysqli_stmt_execute($stmt)) {
+          $success = "Account made for ".$username."!!!!!!";
+        } else {
+          $error = "Something went fuckywucky, please try later";
+        }
+      }
+    }
+  }
+  ?>
+
+  <div class="signup-root">
+    <h2 class="space-bottom">Make account</h2>
+    <p class="space-bottom">This is still being worked on, so I ask you kindly to not try anything, thankies!</p>
+    <form class="flex-down between" method="POST" action="signup.php" enctype="multipart/form-data">
+      <input class="btn alert-default space-bottom-large" type="text" name="username" placeholder="Username">
+      <input class="btn alert-default space-bottom" type="password" name="password" placeholder="Password">
+      <input class="btn alert-default space-bottom-large" type="password" name="confirm_password" placeholder="Re-enter Password">
+      <button class="btn alert-high" type="submit" name="signup">Sign Up</button>
+      <?php
+      if (isset($error)) {
+        echo "<p class='alert alert-low space-top'>".$error."</p>";
+      }
+      if (isset($success)) {
+        echo "<p class='alert alert-high space-top'>".$success."</p>";
+      }
+      ?>
+    </form>
+    <a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/login.php'>Got an account? Login!</a>
+  </div>
+
+  <?php include("ui/footer.php"); ?>
+</body>
+</html>
--- a/ui/conn.php
+++ b/ui/conn.php
@ -1,6 +1,6 @@
 <?php
 // Attempt database connection
-$conn = mysqli_connect("localhost", "uwu", "password", "swag");
+$conn = mysqli_connect("localhost", "uwu", "fennec621", "swag");
 // If connecton failed, notify user
 if ($conn->connect_error) {
  echo "<p class='alert alert-low'>Could not connect to database</p>";
--- a/ui/header.php
+++ b/ui/header.php
@ -1,3 +1,5 @@
+<?php session_start(); ?>
+
 <nav class="nav-root flex-left between">
  <div class="nav-name flex-left">
    <h3>Fluffys Amazing Gallery!</h3>
@ -6,5 +8,13 @@
    <a class="btn alert-default" href="https://superdupersecteteuploadtest.fluffybean.gay"><img class="svg" src="assets/icons/house.svg">Home</a>
    <hr>
    <a class="btn alert-default" href="https://superdupersecteteuploadtest.fluffybean.gay/upload.php"><img class="svg" src="assets/icons/upload.svg">Upload</a>
+    <hr>
+    <?php
+    if (isset($_SESSION["username"])) {
+      echo "<a class='btn alert-default' href='https://superdupersecteteuploadtest.fluffybean.gay/account.php'><img class='svg' src='assets/icons/user-circle.svg'>".$_SESSION["username"]."</a>";
+    } else {
+      echo "<a class='btn alert-default' href='https://superdupersecteteuploadtest.fluffybean.gay/signup.php'><img class='svg' src='assets/icons/user-circle-plus.svg'>Sign Up</a>";
+    }
+    ?>
  </div>
 </nav>
--- a/upload.php
+++ b/upload.php
@ -3,38 +3,15 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>UwU</title>
+  <title>Upload</title>
  <link rel="stylesheet" href="css/master.css">
  <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
 </head>
 <body>
-  <?php include("ui/header.php"); ?>
-
-  <div class="upload-root">
-    <h2 class="space-bottom">Upload image</h2>
-    <form class="flex-down between" method="POST" action="upload.php" enctype="multipart/form-data">
-        <input class="btn alert-default space-bottom" type="file" name="image" placeholder="select image UwU">
-        <input class="btn alert-default space-bottom" type="text" name="alt" placeholder="Description/Alt for image">
-        <button class="btn alert-default" type="submit" name="upload"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
-    </form>
-
-    <?php
-    if ($_GET["r"] == "success") {
-      // Image uploaded
-      echo "<p class='alert alert-high space-top'>Your Image uploaded successfully!</p>";
-    } elseif ($_GET["r"] == "fail") {
-      // Upload failed
-      echo "<p class='alert alert-low space-top'>F, Upload failed</p>";
-    } elseif ($_GET["r"] == "nofile") {
-      // No file was present
-      echo "<p class='alert alert-default space-top'>No file lol</p>";
-    }
-    ?>
-  </div>
-
  <?php
+  include("ui/header.php");
  include_once("ui/conn.php");

  if (isset($_POST['upload'])) {
@ -76,18 +53,37 @@
        // Save image
        $image_thumbnail->writeImage("images/thumbnails/".$image_basename);

-        header("Location:upload.php?r=success");
+        $success = "Your Image uploaded successfully!";
      } else {
        // Could not move images to folder
-        header("Location:upload.php?r=fail");
+        $error = "F, Upload failed";
      }
    } else {
      // No image present
-      header("Location:upload.php?r=nofile");
+      $error = "No file lol";
    }
  }
  ?>

+  <div class="upload-root">
+    <h2 class="space-bottom">Upload image</h2>
+    <p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
+    <form class="flex-down between" method="POST" action="upload.php" enctype="multipart/form-data">
+        <input class="btn alert-default space-bottom" type="file" name="image" placeholder="select image UwU">
+        <input class="btn alert-default space-bottom-large" type="text" name="alt" placeholder="Description/Alt for image">
+        <button class="btn alert-default" type="submit" name="upload"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
+    </form>
+
+    <?php
+    if (isset($error)) {
+      echo "<p class='alert alert-low space-top'>".$error."</p>";
+    }
+    if (isset($success)) {
+      echo "<p class='alert alert-high space-top'>".$success."</p>";
+    }
+    ?>
+  </div>
+
  <?php include("ui/footer.php"); ?>
 </body>
 </html>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="120" r="40" fill="none" stroke="#e8e3e3" stroke-miterlimit="10" stroke-width="16"></circle><path d="M63.8,199.4a72,72,0,0,1,128.4,0" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><line x1="176" y1="56" x2="224" y2="56" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="200" y1="32" x2="200" y2="80" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M222.8,112.9A93.3,93.3,0,0,1,224,128a96,96,0,1,1-96-96,93.3,93.3,0,0,1,15.1,1.2" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>