AJAX rewrite

2025-06-05 01:43:12 +00:00 · 2022-08-13 13:51:29 +01:00 · 2022-08-13 13:51:29 +01:00 · a4c6c18728
commit a4c6c18728
parent d003fbdf1e aad35ee2d2
68 changed files with 4011 additions and 1778 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+# Images from uploads to the website, including thumbnails
+images/
+
+# CSS map, I don't think its needed for upload... I think?
+*.map
--- a/.gitmodules
+++ b/.gitmodules
--- a/Flyout/.flyout.css.swp
+++ b/Flyout/.flyout.css.swp
--- a/Flyout/flyout.css
+++ b/Flyout/flyout.css
@ -0,0 +1,60 @@
+.flyout-dim {
+  margin: 0; padding: 0;
+
+  width: 100vw; height: 100vh;
+
+  display: none;
+
+  top: 0; bottom: 0; left: 0; right: 0;
+
+  position: fixed; z-index: 999;
+
+  background-color: var(--bg);
+  backdrop-filter: blur(8px);
+
+  opacity: 0;
+
+  transition: opacity 1s cubic-bezier(.19,1,.22,1), filter 1s cubic-bezier(.19,1,.22,1);
+}
+
+.flyout {
+  margin: 0; padding: 0.5rem;
+
+  max-width: 621px; width: calc(100% - 3.5rem);
+  max-height: 20rem; height: auto; min-height: 10rem;
+
+  position: fixed; z-index: 9999;
+  left: 50%; bottom: -15rem;
+  transform: translateX(-50%) scale(0.5);
+
+  overflow-y: auto;
+
+  background-color: var(--bg);
+  backdrop-filter: blur(8px);
+  color: white;
+
+  transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1);
+
+  border-radius: var(--rad);
+  border: 0.2rem solid var(--green);
+  /*outline: 0.5rem solid var(--bg);*/
+}
+
+.flyout-header {
+  font-size: 20px;
+  font-family: "Lexend Deca", sans-serif;
+}
+
+.flyout-actionbox {
+  display: inline;
+  box-sizing: border-box;
+}
+
+/* Worlds shittest workaround to a problem I have no clue how to fix */
+.flyout-actionbox *,
+.flyout-actionbox * * {
+  width: 100%;
+}
+.flyout-actionbox * * * {
+  width: auto;
+}
--- a/Flyout/flyout.js
+++ b/Flyout/flyout.js
@ -0,0 +1,54 @@
+$(document).ready(function() {
+  var flyoutRoot = document.getElementById("#flyoutRoot");
+  var flyoutDim = document.getElementById("#flyoutDim");
+
+  var flyoutHeader = document.getElementById("#flyoutHeader");
+  var flyoutDescription = document.getElementById("#flyoutDescription");
+  var flyoutActionbox = document.getElementById("#flyoutActionbox");
+});
+
+function flyoutShow(header, description, actionbox) {
+  // Hide overflow
+  document.querySelector("html").style.overflow = "hidden";
+  // Checking if actionbox is set
+  if (typeof actionbox === 'undefined') {
+    flyoutActionbox.style.display = "none";
+  } else if (actionbox == "") {
+    flyoutActionbox.style.display = "none";
+  } else {
+    flyoutActionbox.style.display = "block";
+  }
+
+  // Set information in flyout
+  flyoutHeader.textContent = header;
+  flyoutDescription.textContent = description;
+  $(flyoutActionbox).html(actionbox);
+
+  // Show the flyout
+  flyoutRoot.style.display = "flex";
+  // Show the dim
+  flyoutDim.style.display = "block";
+  setTimeout(function(){
+    // Show the flyout
+    flyoutRoot.style.transform = "translateX(-50%) scale(1)";
+    flyoutRoot.style.bottom = "1rem";
+    // Show the dim
+    flyoutDim.style.opacity = "1";
+  }, 1);
+};
+
+function flyoutClose() {
+  // Show overflow
+  document.querySelector("html").style.overflow = "auto";
+  // Hide the flyout
+  flyoutRoot.style.transform = "translateX(-50%) scale(0.5)";
+  flyoutRoot.style.bottom = "-20rem";
+  // Hide the dim
+  flyoutDim.style.opacity = "0";
+  setTimeout(function(){
+    // Hide the flyout
+    flyoutRoot.style.display = "none";
+    // Hide the dim
+    flyoutDim.style.display = "none";
+  }, 500);
+};
--- a/Sniffle/sniffle.css
+++ b/Sniffle/sniffle.css
@ -0,0 +1,113 @@
+/*
+  Sniffle CSS
+
+  Written simply for easy changing!
+*/
+
+
+/*
+  Base notification stacking
+
+  It allows for the notifications to stack simply
+  Due to div having no height initself there is no
+  reason in hiding it when no notifications are showing
+*/
+.sniffle {
+  margin: 0; padding: 0 1rem;
+
+  max-width: 621px; width: calc(100% - 1rem);
+
+  top: 0.5rem; left: 50%;
+  transform: translateX(-50%);
+
+  position: fixed; z-index: 999;
+}
+
+/*
+  Notification body
+
+  It contains 2 child elements,
+  am image .sniffle-img
+  and a text div .sniffle-content
+*/
+.sniffle-notification {
+  margin-bottom: 0.5rem; padding: 0.5rem;
+
+  max-width: calc(100% - 1rem); min-height: 2.5rem;
+
+  display: flex; flex-direction: row; overflow-y: hidden;
+
+  z-index: 999;
+
+  background-color: #151515;
+
+  box-shadow: var(--shadow);
+
+  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
+
+  border-radius: var(--rad);
+}
+.sniffle-notification:hover {
+  transform: scale(1.05);
+
+  cursor: pointer;
+}
+
+/*
+  Notification content Root
+
+  Overflow is hidden incase the description of the message is too long too display
+  And to prevent text from overflowing the notification
+*/
+.sniffle-content {
+  margin: 0 auto;
+
+  width: calc(100% - 3.5rem);
+  flex-direction: column; flex-wrap: wrap;
+
+  overflow-y: hidden;
+}
+
+/*
+  Notification icon/image
+*/
+.sniffle-img {
+  margin-right: 1rem;
+
+  max-width: 2.5rem; width: auto;
+  height: auto;
+
+  object-fit: contain;
+}
+/*
+  Notification header
+*/
+.sniffle-header {
+  margin: 0 0 0.25rem 0; padding: 0;
+
+  font-size: 15px;
+  font-weight: 621;
+  font-family: "Lexend Deca", sans-serif;
+
+  color: var(--fg);
+}
+/*
+  Notification description
+*/
+.sniffle-description {
+  margin: 0; padding: 0;
+  font-size: 14px;
+
+  word-wrap: break-word;
+  font-weight: 500;
+  font-family: 'Secular One', sans-serif;
+
+  color: var(--fg);
+}
+.sniffle-description::after {
+  content: '\A Click\00A0 to\00A0 dissmiss';
+
+  white-space: pre;
+
+  opacity: 0.6;
+}
--- a/Sniffle/sniffle.js
+++ b/Sniffle/sniffle.js
@ -0,0 +1,52 @@
+/*
+  Close notification
+  Used by the notifications themself, don't use in code
+*/
+function sniffleClose(a) {
+  a.closest(".sniffle-notification").style.transform="translateY(-20rem) scale(0.8)";
+  a.closest(".sniffle-notification").style.opacity="0";
+
+  setTimeout(function(){
+    a.closest(".sniffle-notification").style.display="none";
+    a.remove()
+  }, 200);
+};
+
+
+/*
+  Add notification
+
+  Header > Required
+    Takes in String input
+
+  Description > Required
+    Takes in String input
+
+  Img > Optional
+    Takes in String input
+*/
+function sniffleAdd(header, description, colour, img) {
+  // Colour is optional, so check if it was added or not
+  if (typeof colour === 'undefined') {
+    colour = '';
+  } else {
+    colour = `style="background-color:${colour};"`;
+  }
+
+  // Image is optional, so check if it was added or not
+  if (typeof img === 'undefined') {
+    img = '';
+  } else {
+    img = `<img class="sniffle-img" src="${img}">`;
+  }
+
+  var newSniffle = `<div class="sniffle-notification" onclick="sniffleClose(this)" ${colour}>\
+  ${img}\
+  <div class="sniffle-content">\
+  <p class="sniffle-header">${header}</p>\
+  <p class="sniffle-description">${description}</p>\
+  </div>\
+  </div>`;
+
+  $(".sniffle").append(newSniffle);
+};
--- a/info/about.php
+++ b/info/about.php
@ -3,36 +3,64 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
+  <title>Lynx Gallery</title>
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/normalise.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+  <!-- JQuery -->
+  <script
+    src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+    crossorigin="anonymous">
+  </script>
+
+  <!-- Sniffle script! -->
+  <script src="Sniffle/sniffle.js"></script>
+  <link rel='stylesheet' href='Sniffle/sniffle.css'>
+
+  <!-- Flyout script! -->
+  <script src="Flyout/flyout.js"></script>
+  <link rel='stylesheet' href='Flyout/flyout.css'>
 </head>
 <body>
-  <?php include("../ui/header.php"); ?>
+  <?php
+  include "ui/required.php";
+  include "ui/nav.php";
+  ?>

-  <div class="about-root default-window">
+  <div class="about-root">
    <h2 id="about">What is Fluffys Amazing Gallery?</h2>
    <p>Fluffys Amazing Gallery is a smol project I originally started to control the images on my main page, but quickly turned into something much bigger...</p>
    <p>What Do I want this to become in the future? No clue, but I do want this to be usable by others, if its a file they download a docker image they setup on your own web server.</p>
    <p>Will it become that any time soon? No, but. I am going to work on this untill it becomes what I want it to be!</p>

+    <br>
+
+    <h2 class="space-top-large" id="add-this">Can you add "A" or "B"?</h2>
+    <p>No.</p>
+
+    <br>
+
    <h2 class="space-top-large" id="guide">How do I use this!</h2>
    <p>First you must obtain the invite code. If you don't have one and are interested in trying this, feel free to DM me on Telegram!</p>
    <p>But once you're done doing that, you can start making your account <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php">at the signup page here</a>.</p>
    <p>From there you should be able to go and login <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/account/login.php">at this fancy page here</a>!</p>
    <p>Now you should see "Welcome (your username)" at the homepage. From there navigate to the navbar and click on the upload button. Choose your file, enter the description and your image is up!</p>

+    <br>
+
    <h2 class="space-top-large">Credits!</h2>
    <p>To Carty for being super cool again and helping me get started with SQL and PHP!</p>
    <p>To <a class='link' href="https://phosphoricons.com/">Phosphor</a> for providing nice SVG icons.</p>
    <p>To mrHDash...</p>
  </div>

-  <?php
-  include("../ui/top.html");
-  include("../ui/footer.php");
-  ?>
+  <?php include "ui/footer.php"; ?>
 </body>
 </html>
--- a/account/account.php
+++ b/account/account.php
@ -3,51 +3,77 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Account</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">
+  <title>Lynx Gallery</title>
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="../css/main.css">
+  <link rel="stylesheet" href="../css/normalise.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+  <!-- JQuery -->
+  <script
+    src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+    crossorigin="anonymous">
+  </script>
+
+  <!-- Sniffle script! -->
+  <script src="../Sniffle/sniffle.js"></script>
+  <link rel='stylesheet' href='../Sniffle/sniffle.css'>
+
+  <!-- Flyout script! -->
+  <script src="../Flyout/flyout.js"></script>
+  <link rel='stylesheet' href='../Flyout/flyout.css'>
 </head>
 <body>
  <?php
  include "../ui/required.php";
-  include("../ui/header.php");
+  include "../ui/nav.php";
  ?>

-  <div class="account-root default-window">
+  <div class="account-root">
    <h2>Account settings</h2>
    <?php
    if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
-      echo "<p>O hi ".$_SESSION["username"].".</p>";
-
-      // Join code
+      echo "<br>";
      if ($_SESSION["id"] == 1) {
-        echo "<h3 class='space-top'>Invite Codes</h3>";
+        echo "<h3>Invite Codes</h3>";
        $token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0");
        while ($token = mysqli_fetch_array($token_request)) {
-            echo "<p class='text-box space-top center alert-default'>".$token['code']."</p>";
+          ?>
+          <!-- Button that's displayed with the invite code -->
+          <button onclick='copyCode()' class='btn btn-neutral'><?php echo $token['code']; ?></button>
+          <!-- Copy code on click -->
+          <script>
+          function copyCode() {
+            navigator.clipboard.writeText("<?php echo $token['code']; ?>");
+            sniffleAdd("Info", "Invite code has been copied!", "var(--green)", "<?php echo $root_dir; ?>assets/icons/clipboard-text.svg");
+          }
+          </script>
+          <?php
        }
      }
-
-      echo "<h3 class='space-top'>Danger ahead</h3>";
-      // Reset password
-      echo "<p class='text-box space-top-large center alert-default'>Resetting your password regularly is a good way of keeping your account safe</p>";
-      echo "<a class='btn alert-low space-top-small' href='https://superdupersecteteuploadtest.fluffybean.gay/account/password-reset.php'><img class='svg' src='../assets/icons/password.svg'>Reset Password</a>";
-
-      // Logout
-      echo "<p class='text-box space-top-large center alert-default'>Don't leave! I'm with the science team!</p>";
-      echo "<a class='btn alert-low space-top-small' href='https://superdupersecteteuploadtest.fluffybean.gay/account/logout.php'><img class='svg' src='../assets/icons/sign-out.svg'>Logout</a>";
+      ?>
+      <br>
+      <h3 class='space-top'>Danger ahead</h3>
+      <p>Resetting your password regularly is a good way of keeping your account safe</p>
+      <a class='btn btn-bad' href='https://superdupersecteteuploadtest.fluffybean.gay/account/password-reset.php'><img class='svg' src='../assets/icons/password.svg'>Reset Password</a>
+      <br>
+      <p>Don't leave! I'm with the science team!</p>
+      <a class='btn btn-bad' href='https://superdupersecteteuploadtest.fluffybean.gay/account/logout.php'><img class='svg' src='../assets/icons/sign-out.svg'>Logout</a>
+      <?php
    } else {
-      echo "<p class='space-bottom-large'>You must be logged in to change your account settings!</p>";
-      echo "<a class='btn alert-high space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/login.php'>Login!</a>";
+      ?>
+      <p>You must be logged in to change your account settings!</p>
+      <a class='btn btn-good' href='https://superdupersecteteuploadtest.fluffybean.gay/account/login.php'>Login!</a>
+      <?php
    }
    ?>
  </div>

-  <?php
-  include("../ui/top.html");
-  include("../ui/footer.php");
-  ?>
+  <?php include "../ui/footer.php"; ?>
 </body>
 </html>
--- a/account/login.php
+++ b/account/login.php
@ -3,121 +3,73 @@
 <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">
+  <title>Lynx Gallery</title>
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="../css/main.css">
+  <link rel="stylesheet" href="../css/normalise.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+  <!-- JQuery -->
+  <script
+    src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+    crossorigin="anonymous">
+  </script>
+
+  <!-- Sniffle script! -->
+  <script src="../Sniffle/sniffle.js"></script>
+  <link rel='stylesheet' href='../Sniffle/sniffle.css'>
+
+  <!-- Flyout script! -->
+  <script src="../Flyout/flyout.js"></script>
+  <link rel='stylesheet' href='../Flyout/flyout.css'>
 </head>
 <body>
  <?php
  include "../ui/required.php";
-  include("../ui/header.php");
-
-  // Initialize the session
-  session_start();
+  include "../ui/nav.php";

  // 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="alert-banner">
-    <?php
-    if (isset($error)) {
-      echo notify($error, "low");
-    }
-    if (isset($success)) {
-      echo notify($success, "hight");
-    }
    ?>
-    <script src='../scripts/alert.js'></script>
-  </div>
-
-  <div class="login-root default-window">
-    <h2 class="space-bottom">Login</h2>
-    <p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</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-high" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button>
-    </form>
-    <a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
-  </div>
-
-  <?php
-  include("../ui/top.html");
-  include("../ui/footer.php");
+      <script>
+        sniffleAdd('Whatcha doing here?', 'You are already logged in! No need to try again', 'var(--black)', '<?php echo $root_dir; ?>assets/icons/warning.svg');
+      </script>
+    <?php
+  }
  ?>
+
+  <div class="login-root">
+    <h2>Login</h2>
+    <p>Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
+    <br>
+    <form id="loginForm" method="POST" enctype="multipart/form-data">
+      <input id="loginUsername" class="btn btn-neutral" type="text" name="username" placeholder="Username">
+      <input id="loginPassword" class="btn btn-neutral" type="password" name="password" placeholder="Password">
+      <br>
+      <button id="loginSubmit" class="btn btn-good" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button>
+    </form>
+    <a class='btn btn-neutral' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
+  </div>
+
+  <script>
+    $("#loginForm").submit(function(event) {
+      event.preventDefault();
+      var username = $("#loginUsername").val();
+      var password = $("#loginPassword").val();
+      var submit = $("#loginSubmit").val();
+      $("#sniffle").load("../app/account/login.php", {
+        username: username,
+        password: password,
+        submit: submit
+      });
+    });
+  </script>
+
+  <?php include "../ui/footer.php"; ?>
 </body>
 </html>
--- a/account/password-reset.php
+++ b/account/password-reset.php
@ -3,100 +3,69 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Account</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">
+  <title>Lynx Gallery</title>
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="../css/main.css">
+  <link rel="stylesheet" href="../css/normalise.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+  <!-- JQuery -->
+  <script
+    src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+    crossorigin="anonymous">
+  </script>
+
+  <!-- Sniffle script! -->
+  <script src="../Sniffle/sniffle.js"></script>
+  <link rel='stylesheet' href='../Sniffle/sniffle.css'>
+
+  <!-- Flyout script! -->
+  <script src="../Flyout/flyout.js"></script>
+  <link rel='stylesheet' href='../Flyout/flyout.css'>
 </head>
 <body>
  <?php
  include "../ui/required.php";
-  include("../ui/header.php");
+  include "../ui/nav.php";

-  // Initialize the session
-  session_start();
-
-  // Check if the user is logged in, otherwise redirect to login page
-  if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
-    header("location: https://superdupersecteteuploadtest.fluffybean.gay/account/login.php");
-    exit;
-  }
-
-  if (isset($_POST['reset'])) {
-
-    // Validate new password
-    if (empty(trim($_POST["new_password"]))) {
-      $error = "Enter new password!";
-    } elseif(strlen(trim($_POST["new_password"])) < 6) {
-      $error = "Password not long enough, must be 6 or more characters!";
-    } else {
-      $new_password = trim($_POST["new_password"]);
+    // Check if the user is logged in, otherwise redirect to login page
+    if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
+      header("location: https://superdupersecteteuploadtest.fluffybean.gay/account/login.php");
+      exit;
    }
-
-    // Validate confirm password
-    if (empty(trim($_POST["confirm_password"]))) {
-      $error = "Pls confirm the password";
-    } else {
-      $confirm_password = trim($_POST["confirm_password"]);
-      if(empty($error) && ($new_password != $confirm_password)) {
-        $error = "Password did not match!!!!";
-      }
-    }
-
-    // Check for errors
-    if (empty($error)) {
-      // Prepare for wack
-      $sql = "UPDATE users SET password = ? WHERE id = ?";
-
-      if ($stmt = mysqli_prepare($conn, $sql)) {
-        mysqli_stmt_bind_param($stmt, "si", $param_password, $param_id);
-
-        // Setting up Password parameters
-        $param_password = password_hash($new_password, PASSWORD_DEFAULT);
-        $param_id = $_SESSION["id"];
-
-        // Attempt to execute (sus)
-        if (mysqli_stmt_execute($stmt)) {
-          // Password updated!!!! Now goodbye
-          session_destroy();
-          header("Location: https://superdupersecteteuploadtest.fluffybean.gay/account/login.php");
-        } else {
-          $error = "Oopsie woopsie, somthing brokie :c";
-        }
-
-        // Close connection
-        mysqli_close($stmt);
-      }
-    }
-
-    // Close connection
-    mysqli_close($conn);
-  }
  ?>

-  <div class="alert-banner">
-    <?php
-    if (isset($error)) {
-      echo notify($error, "low");
-    }
-    ?>
-    <script src='../scripts/alert.js'></script>
-  </div>
-
-  <div class="password-reset-root default-window">
-    <h2 class="space-bottom">Reset Password</h2>
-    <p class="space-bottom">After reset, you will be kicked out to login again</p>
-    <form class="flex-down between" method="POST" action="password-reset.php" enctype="multipart/form-data">
-      <input class="btn alert-default space-bottom" type="password" name="new_password" placeholder="New Password">
-      <input class="btn alert-default space-bottom" type="password" name="confirm_password" placeholder="Confirm Password">
-      <button class="btn alert-low" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button>
+  <div class="password-reset-root">
+    <h2>Reset Password</h2>
+    <p>After reset, you will be kicked out to login again</p>
+    <br>
+    <form id="passwordForm" method="POST" enctype="multipart/form-data">
+      <input id="newPassword" class="btn btn-neutral" type="password" name="new_password" placeholder="New Password">
+      <input id="confirmSassword" class="btn btn-neutral" type="password" name="confirm_password" placeholder="Confirm Password">
+      <br>
+      <button id="passwordSubmit" class="btn btn-bad" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button>
    </form>
  </div>

-  <?php
-  include("../ui/top.html");
-  include("../ui/footer.php");
-  ?>
+  <script>
+    $("#passwordForm").submit(function(event) {
+      event.preventDefault();
+      var new_passowrd = $("#newPassword").val();
+      var confirm_password = $("#confirmSassword").val();
+      var submit = $("#passwordSubmit").val();
+      $("#sniffle").load("../app/account/password_reset.php", {
+        new_passowrd: new_passowrd,
+        confirm_password: confirm_password,
+        submit: submit
+      });
+    });
+  </script>
+
+  <?php include "../ui/footer.php"; ?>
 </body>
 </html>
--- a/account/signup.php
+++ b/account/signup.php
@ -3,186 +3,71 @@
 <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">
+  <title>Lynx Gallery</title>
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="../css/main.css">
+  <link rel="stylesheet" href="../css/normalise.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+  <!-- JQuery -->
+  <script
+    src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+    crossorigin="anonymous">
+  </script>
+
+  <!-- Sniffle script! -->
+  <script src="../Sniffle/sniffle.js"></script>
+  <link rel='stylesheet' href='../Sniffle/sniffle.css'>
+
+  <!-- Flyout script! -->
+  <script src="../Flyout/flyout.js"></script>
+  <link rel='stylesheet' href='../Flyout/flyout.css'>
 </head>
 <body>
  <?php
  include "../ui/required.php";
-  include("../ui/header.php");
-
-  // Validate susness of Username
-  if (isset($_POST['signup'])) {
-    if (empty(trim($_POST["username"]))) {
-      // Username was taken
-      $error = "Enter a username reeeee";
-    } elseif (!preg_match('/^[a-zA-Z0-9_]+$/', trim($_POST["username"]))) {
-      // Username entered contains illegal characters
-      $error = "Very sus. Username can only contain letters, numbers, and underscores";
-    } 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";
-          } 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";
-    } elseif(strlen(trim($_POST["password"])) < 6){
-      // Password not long enough 👀
-      $error = "(Password) Not long enough 👀";
-    } 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!!!!!";
-    } 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";
-      }
-    }
-
-    // Check for invite code
-    if (isset($_POST['token'])) {
-      // Check if invite code is empty
-      if (empty($_POST['token'])) {
-        $error = "Enter Invite Code ;3";
-      } else {
-        // Prepare sql for sus
-        $sql = "SELECT id FROM tokens WHERE code = ? AND used = 0";
-
-        if ($stmt = mysqli_prepare($conn, $sql)) {
-          mysqli_stmt_bind_param($stmt, "s", $param_code);
-
-          $param_code = $_POST['token'];
-
-          // Ask sql nicely if other usernames exist and store info
-          if (mysqli_stmt_execute($stmt)) {
-            mysqli_stmt_store_result($stmt);
-            if (mysqli_stmt_num_rows($stmt) == 1) {
-              $token = trim($_POST["token"]);
-            } else {
-              $error = "Invite code not valid";
-            }
-          } else {
-            $error = "Sussy things happened on our end and couldn't check token";
-          }
-
-          // Outa here with this
-          mysqli_stmt_close($stmt);
-        }
-      }
-    }
-
-    // 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)) {
-          // Prepare sql
-          $sql = "UPDATE tokens SET used = True WHERE code = ?";
-          $stmt = mysqli_prepare($conn, $sql);
-          mysqli_stmt_bind_param($stmt, "s", $param_token);
-          $param_token = $_POST['token'];
-
-          if (mysqli_stmt_execute($stmt)) {
-            //
-            // Hey fluffy why didn't you do this
-            // Hey fluffy, thats not how you do this
-            // Thats wrong! Do this instead!!!!!!
-            //
-            // I DON'T KNOW HOW TO DO THIS, BUT IT WORKS
-            // SO LEAVE ME ALONEEEEEEEEEE
-            // anyway....
-
-            // Generate Token
-            $token_array = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz';
-            $new_token = substr(str_shuffle($token_array), 0, 10);
-
-            // Prepare sql
-            $sql = "INSERT INTO tokens (code, used) VALUES(?, False)";
-            $stmt = mysqli_prepare($conn, $sql);
-            mysqli_stmt_bind_param($stmt, "s", $param_new_token);
-            $param_new_token = $new_token;
-            mysqli_stmt_execute($stmt);
-          }
-
-          // Yupeee! Account was made
-          $success = "Account made for ".$username."!!!!!!";
-        } else {
-          $error = "Something went fuckywucky, please try later";
-        }
-      }
-    }
-  }
+  include "../ui/nav.php";
  ?>

-  <div class="alert-banner">
-    <?php
-    if (isset($error)) {
-      echo notify($error, "low");
-    }
-    if (isset($success)) {
-      echo notify($success, "hight");
-    }
-    ?>
-    <script src='../scripts/alert.js'></script>
-  </div>
-
-  <div class="signup-root default-window">
-    <h2 class="space-bottom">Make account</h2>
-    <p class="space-bottom">And amazing things happened here...</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">
-      <input class="btn alert-default space-bottom-large" type="text" name="token" placeholder="Invite Code">
-      <button class="btn alert-high" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button>
+  <div class="signup-root">
+    <h2>Make account</h2>
+    <p>And amazing things happened here...</p>
+    <br>
+    <form id="signupForm" method="POST" action="signup.php" enctype="multipart/form-data">
+      <input id="signupUsername" class="btn btn-neutral" type="text" name="username" placeholder="Username">
+      <br>
+      <input id="signupPassword" class="btn btn-neutral" type="password" name="password" placeholder="Password">
+      <input id="signupPasswordConfirm" class="btn btn-neutral" type="password" name="confirm_password" placeholder="Re-enter Password">
+      <br>
+      <input id="signupToken" class="btn btn-neutral" type="text" name="token" placeholder="Invite Code">
+      <br>
+      <button id="signupSubmit" class="btn btn-good" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button>
    </form>
  </div>

-  <?php
-  include("../ui/top.html");
-  include("../ui/footer.php");
-  ?>
+  <script>
+    $("#signupForm").submit(function(event) {
+      event.preventDefault();
+      var username = $("#signupUsername").val();
+      var password = $("#signupPassword").val();
+      var confirm_password = $("#signupPasswordConfirm").val();
+      var token = $("#signupToken").val();
+      var submit = $("#signupSubmit").val();
+      $("#sniffle").load("../app/account/signup.php", {
+        username: username,
+        password: password,
+        confirm_password: confirm_password,
+        token: token,
+        submit: submit
+      });
+    });
+  </script>
+
+  <?php include "../ui/footer.php"; ?>
 </body>
 </html>
--- a/app/account/get_info.php
+++ b/app/account/get_info.php
@ -0,0 +1,16 @@
+<?php
+/*
+  Get full user info from database
+
+  Returns array with user info
+*/
+function get_user_info($conn, $id) {
+  // Setting SQL query
+  $sql = "SELECT * FROM users WHERE id = ".$id;
+  // Getting results
+  $query = mysqli_query($conn, $sql);
+  // Fetching associated info
+  $user_array = mysqli_fetch_assoc($query);
+
+  return($user_array);
+}
--- a/app/account/is_admin.php
+++ b/app/account/is_admin.php
@ -0,0 +1,18 @@
+<?php
+/*
+  Check if user is admin
+
+  Returns True if user is privilaged
+  Returns False if user is NOT privilaged
+*/
+function is_admin($id) {
+  if (isset($id) || !empty($id)) {
+    if ($id == 1) {
+      return True;
+    } else {
+      return False;
+    }
+  } else {
+    return False;
+  }
+}
--- a/app/account/login.php
+++ b/app/account/login.php
@ -0,0 +1,113 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Login
+ |-------------------------------------------------------------
+ | This is annoying because I want to keep the website secure
+ | but I have no clue how to keep things secure with HTML, PHP
+ | or JS. So I hope seperating the scripts and putting all this
+ | into a PHP file is a good secutiry mesure
+ |-------------------------------------------------------------
+*/
+// Include server connection
+include "../server/conn.php";
+
+if (isset($_POST['submit'])) {
+    /*
+     |-------------------------------------------------------------
+     | Set error status to 0
+     |-------------------------------------------------------------
+     | if there are more than 0 error, then they cannot submit a
+     | request
+     |-------------------------------------------------------------   
+     */
+    $error = 0;
+
+    // Checking if Username is empty
+    if (empty(trim($_POST["username"]))) {
+        ?>
+        <script>
+            sniffleAdd('Who dis?', 'You must enter a username to login!', 'var(--red)', '../assets/icons/cross.svg');
+        </script>
+        <?php
+        $error = $error + 1;
+    } else {
+        $username = trim($_POST["username"]);
+    }
+    
+    // Check if Password is empty
+    if (empty(trim($_POST["password"]))) {
+        ?>
+        <script>
+            sniffleAdd('Whats the magic word?', 'Pls enter the super duper secrete word(s) to login!', 'var(--red)', '../assets/icons/cross.svg');
+        </script>
+        <?php
+        $error = $error + 1;
+    } else {
+        $password = trim($_POST["password"]);
+    }
+
+    if ($error <= 0) {
+        // 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
+                            ?>
+                            <script>
+                                sniffleAdd('O hi <?php echo $_SESSION["username"]; ?>', 'You are now logged in! You will be redirected in a few seconds', 'var(--green)', '../assets/icons/hand-waving.svg');
+                                setTimeout(function(){window.location.href = "../index.php?login=success";}, 4000);
+                            </script>
+                            <?php
+                        } else {
+                            ?>
+                            <script>
+                                sniffleAdd('Sus', 'Username or Password WRONG, please try again :3', 'var(--red)', '../assets/icons/cross.svg');
+                            </script>
+                            <?php
+                        }
+                    }
+                } else {
+                    ?>
+                    <script>
+                        sniffleAdd('Sus', 'Username or Password WRONG, please try again :3', 'var(--red)', '../assets/icons/cross.svg');
+                    </script>
+                    <?php
+                }
+            } else {
+                ?>
+                <script>
+                    sniffleAdd('woops...', 'Sowwy, something went wrong on our end :c', 'var(--red)', '../assets/icons/cross.svg');
+                </script>
+                <?php
+            }
+            // Close statement
+            mysqli_stmt_close($stmt);
+        }
+    }
+}
--- a/app/account/login_status.php
+++ b/app/account/login_status.php
@ -0,0 +1,14 @@
+<?php
+/*
+  Check if user is loggedin
+
+  Returns True if user is
+  Returns False if user is NOT
+*/
+function loggedin() {
+  if (isset($_SESSION["loggedin"]) == true && $_SESSION["loggedin"] == true) {
+    return True;
+  } else {
+    return False;
+  }
+}
--- a/app/account/password_reset.php
+++ b/app/account/password_reset.php
@ -0,0 +1,106 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Password Reset
+ |-------------------------------------------------------------
+ | I want to make it possible to reset the password without
+ | access to the account directly with an email reset link or
+ | something. I also want to confirm the password change with
+ | the old password in the future, as people forget passwords
+ | and people can get onto accounts. For now this is a shitty
+ | little system thats inplace for those who need it. Hopefully
+ | I can make something better in the future...
+ |-------------------------------------------------------------
+*/
+// Initialize the session
+session_start();
+// Include server connection
+include "../server/conn.php";
+
+if (isset($_POST['submit'])) {
+    /*
+     |-------------------------------------------------------------
+     | Set error status to 0
+     |-------------------------------------------------------------
+     | if there are more than 0 error, then they cannot submit a
+     | request
+     |-------------------------------------------------------------   
+    */
+    $error = 0;
+
+    // Validate new password
+    if (empty(trim($_POST["new_password"]))) {
+        ?>
+        <script>
+            sniffleAdd('Meep', 'Enter a new password!', 'var(--red)', '../assets/icons/cross.svg');
+            flyoutClose();
+        </script>
+        <?php
+        $error = $error + 1;
+    } elseif(strlen(trim($_POST["new_password"])) < 6) {
+        ?>
+        <script>
+            sniffleAdd('Not long enough...', 'Password, must be 6 or more characters in length uwu', 'var(--red)', '../assets/icons/cross.svg');
+            flyoutClose();
+        </script>
+        <?php
+        $error = $error + 1;
+    } else {
+        $new_password = trim($_POST["new_password"]);
+    }
+    
+    // Validate confirm password
+    if (empty(trim($_POST["confirm_password"]))) {
+        ?>
+        <script>
+            sniffleAdd('Meep', 'You must confirm the password!!!!', 'var(--red)', '../assets/icons/cross.svg');
+            flyoutClose();
+        </script>
+        <?php
+        $error = $error + 1;
+    } else {
+        $confirm_password = trim($_POST["confirm_password"]);
+        if(empty($error) && ($new_password != $confirm_password)) {
+            ?>
+            <script>
+                sniffleAdd('AAAA', 'Passwords do not match!!!', 'var(--red)', '../assets/icons/cross.svg');
+                flyoutClose();
+            </script>
+            <?php
+            $error = $error + 1;
+        }
+    }
+
+    // Check for errors
+    if ($error <= 0) {
+        // Prepare for wack
+        $sql = "UPDATE users SET password = ? WHERE id = ?";
+    
+        if ($stmt = mysqli_prepare($conn, $sql)) {
+            mysqli_stmt_bind_param($stmt, "si", $param_password, $param_id);
+    
+            // Setting up Password parameters
+            $param_password = password_hash($new_password, PASSWORD_DEFAULT);
+            $param_id = $_SESSION["id"];
+    
+            // Attempt to execute (sus)
+            if (mysqli_stmt_execute($stmt)) {
+                // Password updated!!!! Now goodbye
+                session_destroy();
+                ?>
+                <script>
+                    sniffleAdd('Password updated', 'Now goodbye.... you will be redirected in a moment', 'var(--green)', '../assets/icons/check.svg');
+                    setTimeout(function(){window.location.href = "../account/login.php";}, 4000);
+                </script>
+                <?php
+            } else {
+                ?>
+                <script>
+                    sniffleAdd('Bruh', 'Something happened on our end, sowwy', 'var(--red)', '../assets/icons/cross.svg');
+                    flyoutClose();
+                </script>
+                <?php
+            }
+        }
+    }
+}
--- a/app/account/signup.php
+++ b/app/account/signup.php
@ -0,0 +1,225 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Signup
+ |-------------------------------------------------------------
+ | The dreaded signup. Funfact, the one thing I hate more than
+ | late-stage capitalism and this world is JavaScript. Please
+ | save me...
+ |-------------------------------------------------------------
+*/
+// Include server connection
+include "../server/conn.php";
+
+if (isset($_POST['submit'])) {
+    /*
+     |-------------------------------------------------------------
+     | Set error status to 0
+     |-------------------------------------------------------------
+     | if there are more than 0 error, then they cannot submit a
+     | request
+     |-------------------------------------------------------------   
+    */
+    $error = 0;
+
+    if (empty(trim($_POST["username"]))) {
+        // Username not entered
+        ?>
+        <script>
+            sniffleAdd('Hmmm', 'You must enter a username!', 'var(--red)', '../assets/icons/cross.svg');
+        </script>
+        <?php
+        $error = $error + 1;
+    } elseif (!preg_match('/^[a-zA-Z0-9_]+$/', trim($_POST["username"]))) {
+        // Username entered contains illegal characters
+        ?>
+        <script>
+            sniffleAdd('Sussy Wussy', 'Very sus. Username can only contain letters, numbers, and underscores', 'var(--red)', '../assets/icons/cross.svg');
+        </script>
+        <?php
+        $error = $error + 1;
+    } 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 taken
+                    ?>
+                    <script>
+                        sniffleAdd('A clone?', 'Sorry, but username was already taken by someone else', 'var(--red)', '../assets/icons/cross.svg');
+                    </script>
+                    <?php
+                    $error = $error + 1;
+                } else {
+                    $username = trim($_POST["username"]);
+                }
+            } else {
+                ?>
+                <script>
+                    sniffleAdd('Reee', 'We had a problem on our end, sowwy', 'var(--red)', '../assets/icons/cross.svg');
+                </script>
+                <?php
+                $error = $error + 1;
+            }
+            // Outa here with this
+            mysqli_stmt_close($stmt);
+        }
+    }
+
+    // Validate sussness of Password
+    if (empty(trim($_POST["password"]))) {
+        // No password entered
+        ?>
+        <script>
+            sniffleAdd('What', 'You must enter a password, dont want just anyone seeing your stuff uwu', 'var(--red)', '../assets/icons/cross.svg');
+        </script>
+        <?php
+        $error = $error + 1;
+    } elseif(strlen(trim($_POST["password"])) < 6){
+        // Password not long enough 👀
+        ?>
+        <script>
+            sniffleAdd('👀', 'Nice (Password) but its not long enough 👀', 'var(--red)', '../assets/icons/cross.svg');
+        </script>
+        <?php
+        $error = $error + 1;
+    } else {
+        $password = trim($_POST["password"]);
+    }
+    
+    // Validate sussiness of the other Password
+    if (empty(trim($_POST["confirm_password"]))) {
+        // Did not confirm passowrd
+        ?>
+        <script>
+            sniffleAdd('Eh?', 'Confirm the password pls, its very important you remember what it issss', 'var(--red)', '../assets/icons/cross.svg');
+        </script>
+        <?php
+        $error = $error + 1;
+    } else {
+        $confirm_password = trim($_POST["confirm_password"]);
+        if (empty($error) && $confirm_password != $password) {
+            // Password and re-entered Password does not match
+            ?>
+            <script>
+                sniffleAdd('Try again', 'Passwords need to be the same, smelly smelly', 'var(--red)', '../assets/icons/cross.svg');
+            </script>
+            <?php
+            $error = $error + 1;
+        }
+    }
+
+    // Check for invite code
+    if (isset($_POST['token'])) {
+        // Check if invite code is empty
+        if (empty($_POST['token'])) {
+            ?>
+            <script>
+                sniffleAdd('smelly', 'Enter Invite Code ;3', 'var(--red)', '../assets/icons/cross.svg');
+            </script>
+            <?php
+            $error = $error + 1;
+        } else {
+            // Prepare sql for sus
+            $sql = "SELECT id FROM tokens WHERE code = ? AND used = 0";
+    
+            if ($stmt = mysqli_prepare($conn, $sql)) {
+                mysqli_stmt_bind_param($stmt, "s", $param_code);
+        
+                $param_code = $_POST['token'];
+        
+                // Ask sql nicely if other usernames exist and store info
+                if (mysqli_stmt_execute($stmt)) {
+                    mysqli_stmt_store_result($stmt);
+                    if (mysqli_stmt_num_rows($stmt) == 1) {
+                        $token = trim($_POST["token"]);
+                    } else {
+                        ?>
+                        <script>
+                            sniffleAdd('Argh', 'Your invite code/token did not check out, woopsie!', 'var(--red)', '../assets/icons/cross.svg');
+                        </script>
+                        <?php
+                        $error = $error + 1;
+                    }
+                } else {
+                    ?>
+                    <script>
+                        sniffleAdd('Woops', 'The server or website died inside and could not process your information, sowwy!', 'var(--red)', '../assets/icons/cross.svg');
+                    </script>
+                    <?php
+                    $error = $error + 1;
+                }
+                // Outa here with this
+                mysqli_stmt_close($stmt);
+            }
+        }
+    }
+
+    // Checking for errors
+    if ($error <= 0) {
+        $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)) {
+                // Prepare sql
+                $sql = "UPDATE tokens SET used = True WHERE code = ?";
+                $stmt = mysqli_prepare($conn, $sql);
+                mysqli_stmt_bind_param($stmt, "s", $param_token);
+                $param_token = $_POST['token'];
+        
+                if (mysqli_stmt_execute($stmt)) {
+                    //
+                    // Hey fluffy why didn't you do this
+                    // Hey fluffy, thats not how you do this
+                    // Thats wrong! Do this instead!!!!!!
+                    //
+                    // I DON'T KNOW HOW TO DO THIS, BUT IT WORKS
+                    // SO LEAVE ME ALONEEEEEEEEEE
+                    // anyway....
+        
+                    // Generate Token
+                    $token_array = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz';
+                    $new_token = substr(str_shuffle($token_array), 0, 15);
+        
+                    // Prepare sql
+                    $sql = "INSERT INTO tokens (code, used) VALUES(?, False)";
+                    $stmt = mysqli_prepare($conn, $sql);
+                    mysqli_stmt_bind_param($stmt, "s", $param_new_token);
+                    $param_new_token = $new_token;
+                    mysqli_stmt_execute($stmt);
+                }
+        
+                // Yupeee! Account was made
+                ?>
+                <script>
+                    sniffleAdd('Success!', 'You account made for <?php echo $username; ?>!!!!! You will be redirected in a moment to login', 'var(--green)', '../assets/icons/hand-waving.svg');
+                    setTimeout(function(){window.location.href = "../account/login.php";}, 4000);
+                </script>
+                <?php
+            } else {
+                ?>
+                <script>
+                    sniffleAdd('Bruh', 'Something went fuckywucky, please try later', 'var(--red)', '../assets/icons/cross.svg');
+                </script>
+                <?php
+            }
+        }
+    }
+}
--- a/app/format/string_to_tags.php
+++ b/app/format/string_to_tags.php
@ -0,0 +1,18 @@
+<?php
+/*
+  Clean up long text input and turn into an array for tags
+
+  Returns clean string of words with equal white space between it
+*/
+function tag_clean($string) {
+  // Replace hyphens
+  $string = str_replace('-', '_', $string);
+  // Regex
+  $string = preg_replace('/[^A-Za-z0-9\_ ]/', '', $string);
+  // Change to lowercase
+  $string = strtolower($string);
+  // Removing extra spaces
+  $string = preg_replace('/ +/', ' ', $string);
+
+  return $string;
+}
--- a/app/image/delete_image.php
+++ b/app/image/delete_image.php
@ -0,0 +1,73 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Delete image
+ |-------------------------------------------------------------
+ | This is the scarries code I written. I hate writing anything
+ | like this, please help
+ |-------------------------------------------------------------
+*/
+session_start();
+// Include server connection
+include "../server/conn.php";
+// Include required checks
+include "get_image_info.php";
+include "image_privilage.php";
+
+
+if (isset($_POST['submit'])) {
+  // Get all image info
+  $image_array = get_image_info($conn, $_POST['id']);
+
+  // If user owns image or has the ID of 1
+  if (image_privilage($image_array['author']) || $_SESSION['id'] == 1) {
+    // Delete from table
+    $sql = "DELETE FROM swag_table WHERE id = ?";
+    if ($stmt = mysqli_prepare($conn, $sql)) {
+      mysqli_stmt_bind_param($stmt, "i", $param_id);
+
+      // Setting parameters
+      $param_id = $_POST['id'];
+
+      // Attempt to execute the prepared statement
+      if (mysqli_stmt_execute($stmt)) {
+        // See if image is in the directory
+        if (is_file("../../images/".$image_array['imagename'])) {
+          unlink("../../images/".$image_array['imagename']);
+        }
+        // Delete thumbnail if exitsts
+        if (is_file("../../images/thumbnails/".$image_array['imagename'])) {
+          unlink("../../images/thumbnails/".$image_array['imagename']);
+        }
+        // TP user to the homepage with a success message
+        ?>
+        <script>
+          window.location.replace("index.php?del=true&id=<?php echo $_POST['id']; ?>");
+        </script>
+        <?php
+      } else {
+        ?>
+        <script>
+          sniffleAdd('Oopsie', 'The image failed to delete off of the servers, contact Fluffy about his terrible programming', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+          flyoutClose();
+        </script>
+        <?php
+      }
+    } else {
+      ?>
+      <script>
+        sniffleAdd('Error :c', 'An error occured on the servers', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+        flyoutClose();
+      </script>
+      <?php
+    }
+  } else {
+    ?>
+    <script>
+      sniffleAdd('Denied', 'It seems that you do not have the right permitions to edit this image.', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+      flyoutClose();
+    </script>
+    <?php
+  }
+}
+// nice uwu
--- a/app/image/edit_author.php
+++ b/app/image/edit_author.php
@ -0,0 +1,52 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Edit Author
+ |-------------------------------------------------------------
+ | If this has security problems I'm so fucked
+ |-------------------------------------------------------------
+*/
+session_start();
+// Include server connection
+include "../server/conn.php";
+
+if (isset($_POST['submit'])) {
+  // If user has the ID of 1
+  if ($_SESSION['id'] == 1) {
+    // getting ready forSQL asky asky
+    $sql = "UPDATE swag_table SET author=? WHERE id=?";
+
+    // Checking if databse is doing ok
+    if ($stmt = mysqli_prepare($conn, $sql)) {
+      mysqli_stmt_bind_param($stmt, "si", $param_author, $param_id);
+
+      // Setting parameters
+      $param_author = $_POST['input'];
+      $param_id = $_POST["id"];
+
+      // Attempt to execute the prepared statement
+      if (mysqli_stmt_execute($stmt)) {
+        ?>
+        <script>
+          sniffleAdd('Success!!!', 'The Author has been updated successfully! You may need to refresh the page to see the new information.', 'var(--green)', '<?php echo $root_dir; ?>assets/icons/check.svg');
+          flyoutClose();
+        </script>
+        <?php
+      } else {
+        ?>
+        <script>
+          sniffleAdd('Oopsie....', 'An error occured on the servers', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+          flyoutClose();
+        </script>
+        <?php
+      }
+    }
+  } else {
+    ?>
+    <script>
+      sniffleAdd('Denied', 'Sussy wussy.', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+      flyoutClose();
+    </script>
+    <?php
+  }
+}
--- a/app/image/edit_description.php
+++ b/app/image/edit_description.php
@ -0,0 +1,71 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Edit Description
+ |-------------------------------------------------------------
+ | This script took probably over 24hours to write, mostly
+ | because of my stupidity. But it (mostly) works now which is
+ | good. Reason for all the includes and session_start is due
+ | to the need of checking if the person owns the image. If this
+ | check is not done, someone could come by and just edit the
+ | Jquery code on the front-end and change the image ID. Which
+ | isnt too great :p
+ |-------------------------------------------------------------
+*/
+session_start();
+// Include server connection
+include "../server/conn.php";
+// Include required checks
+include "get_image_info.php";
+include "image_privilage.php";
+
+
+if (isset($_POST['submit'])) {
+  // Get all image info
+  $image_array = get_image_info($conn, $_POST['id']);
+  // If user owns image or has the ID of 1
+  if (image_privilage($image_array['author']) || $_SESSION['id'] == 1) {
+    // getting ready forSQL asky asky
+    $sql = "UPDATE swag_table SET alt=? WHERE id=?";
+
+    // Checking if databse is doing ok
+    if ($stmt = mysqli_prepare($conn, $sql)) {
+      mysqli_stmt_bind_param($stmt, "si", $param_alt, $param_id);
+
+      // Setting parameters
+      $param_alt = $_POST['input'];
+      $param_id = $_POST['id'];
+
+      // Attempt to execute the prepared statement
+      if (mysqli_stmt_execute($stmt)) {
+        ?>
+        <script>
+          sniffleAdd('Success!!!', 'Description has been updated successfully! You may need to refresh the page to see the new information.', 'var(--green)', '<?php echo $root_dir; ?>assets/icons/check.svg');
+          flyoutClose();
+        </script>
+        <?php
+      } else {
+        ?>
+        <script>
+          sniffleAdd('Error :c', 'An error occured on the servers', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+          flyoutClose();
+        </script>
+        <?php
+      }
+    } else {
+      ?>
+      <script>
+        sniffleAdd('Error :c', 'An error occured on the servers', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+        flyoutClose();
+      </script>
+      <?php
+    }
+  } else {
+    ?>
+    <script>
+      sniffleAdd('Denied', 'It seems that you do not have the right permitions to edit this image.', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+      flyoutClose();
+    </script>
+    <?php
+  }
+}
--- a/app/image/edit_tags.php
+++ b/app/image/edit_tags.php
@ -0,0 +1,76 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Edit Description
+ |-------------------------------------------------------------
+ | This script took probably over 24hours to write, mostly
+ | because of my stupidity. But it (mostly) works now which is
+ | good. Reason for all the includes and session_start is due
+ | to the need of checking if the person owns the image. If this
+ | check is not done, someone could come by and just edit the
+ | Jquery code on the front-end and change the image ID. Which
+ | isnt too great :p
+ |-------------------------------------------------------------
+*/
+session_start();
+// Include server connection
+include "../server/conn.php";
+// Include required checks
+include "get_image_info.php";
+include "image_privilage.php";
+// Tag cleaning
+include "../format/string_to_tags.php";
+
+
+if (isset($_POST['submit'])) {
+  // Get all image info
+  $image_array = get_image_info($conn, $_POST['id']);
+  // If user owns image or has the ID of 1
+  if (image_privilage($image_array['author']) || $_SESSION['id'] == 1) {
+    // Clean input
+    $tags_string = tag_clean(trim($_POST['input']));
+
+    // getting ready forSQL asky asky
+    $sql = "UPDATE swag_table SET tags=? WHERE id=?";
+
+    // Checking if databse is doing ok
+    if ($stmt = mysqli_prepare($conn, $sql)) {
+      mysqli_stmt_bind_param($stmt, "si", $param_tags, $param_id);
+
+      // Setting parameters
+      $param_tags = $tags_string;
+      $param_id = $_POST['id'];
+
+      // Attempt to execute the prepared statement
+      if (mysqli_stmt_execute($stmt)) {
+        ?>
+        <script>
+          sniffleAdd('Success!!!', 'Tags have been modified successfully! You may need to refresh the page to see the new information.', 'var(--green)', '<?php echo $root_dir; ?>assets/icons/check.svg');
+          flyoutClose();
+        </script>
+        <?php
+      } else {
+        ?>
+        <script>
+          sniffleAdd('Error :c', 'An error occured on the servers', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+          flyoutClose();
+        </script>
+        <?php
+      }
+    } else {
+      ?>
+      <script>
+        sniffleAdd('Error :c', 'An error occured on the servers', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+        flyoutClose();
+      </script>
+      <?php
+    }
+  } else {
+    ?>
+    <script>
+      sniffleAdd('Denied', 'It seems that you do not have the right permitions to modify tags here.', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+      flyoutClose();
+    </script>
+    <?php
+  }
+}
--- a/app/image/get_image_info.php
+++ b/app/image/get_image_info.php
@ -0,0 +1,16 @@
+<?php
+/*
+  Get full image info from database
+
+  Returns array with image info
+*/
+function get_image_info($conn, $id) {
+  // Setting SQL query
+  $sql = "SELECT * FROM swag_table WHERE id = ".$id;
+  // Getting results
+  $query = mysqli_query($conn, $sql);
+  // Fetching associated info
+  $image_array = mysqli_fetch_assoc($query);
+
+  return($image_array);
+}
--- a/app/image/image_privilage.php
+++ b/app/image/image_privilage.php
@ -0,0 +1,19 @@
+<?php
+/*
+  Check if user is image owner
+
+  Returns True if user is privilaged
+  Returns False if user is NOT privilaged
+*/
+function image_privilage($id) {
+  $session_id = $_SESSION['id'];
+  if (isset($session_id) || !empty($session_id)) {
+    if ($session_id == $id) {
+      return True;
+    } else {
+      return False;
+    }
+  } else {
+    return False;
+  }
+}
--- a/app/image/upload_image.php
+++ b/app/image/upload_image.php
@ -0,0 +1,90 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Uploading Images
+ |-------------------------------------------------------------
+ | gwa gwa
+ |-------------------------------------------------------------
+*/
+session_start();
+// Include server connection
+include "../server/conn.php";
+
+if (isset($_POST['submit'])) {
+  if (isset($_SESSION['id'])) {
+    // Root paths
+    $dir = "../../images/";
+    $thumb_dir = $dir."thumbnails/";
+
+    // File paths
+    $image_basename = basename($_FILES['image']['name']);
+    $image_path = $dir.$image_basename;
+    $file_type = pathinfo($image_path,PATHINFO_EXTENSION);
+
+    // Allowed file types
+    $allowed_types = array('jpg', 'jpeg', 'png', 'webp');
+    if (in_array($file_type, $allowed_types)) {
+      // Move file to server
+      if (move_uploaded_file($_FILES['image']['tmp_name'], $image_path)) {
+        // Attempt making a thumbnail
+        try {
+          $image_thumbnail = new Imagick($image_path);
+          $image_thumbnail->resizeImage(300,null,null,1,null);
+          $image_thumbnail->writeImage($thumb_dir.$image_basename);
+        } catch (Exception $e) {
+          echo "
+          <script>
+            sniffleAdd('Gwha!', 'We hit a small roadbump during making of the thumbail. We will continue anyway!', 'var(--black)', '".$root_dir."assets/icons/bug.svg');
+          </script>
+          ";
+        }
+
+        // Prepare sql for destruction and filtering the sus
+        $sql = "INSERT INTO swag_table (imagename, alt, author) VALUES (?, ?, ?)";
+
+        if ($stmt = mysqli_prepare($conn, $sql)) {
+          // Bind the smelly smelly
+          mysqli_stmt_bind_param($stmt, "sss", $param_image_name, $param_alt_text, $param_user_id);
+
+          // Setting up parameters
+          $param_image_name = $_FILES['image']['name'];
+          $param_alt_text = $_POST['alt'];
+          $param_user_id = $_SESSION['id'];
+
+          // Attempt to execute the prepared statement
+          if (mysqli_stmt_execute($stmt)) {
+            echo "
+            <script>
+              sniffleAdd(':3', 'Your Image uploaded successfully!', 'var(--green)', '".$root_dir."assets/icons/check.svg');
+            </script>
+            ";
+          } else {
+            echo "
+            <script>
+              sniffleAdd(':c', 'Something went fuckywucky, please try later', 'var(--red)', '".$root_dir."assets/icons/cross.svg');
+            </script>
+            ";
+          }
+        }
+      } else {
+        echo "
+        <script>
+          sniffleAdd('Hmmff', 'Something happened when moving the file to the server. This may just been a 1-off so try again', 'var(--red)', '".$root_dir."assets/icons/bug.svg');
+        </script>
+        ";
+      }
+    } else {
+      echo "
+      <script>
+        sniffleAdd('Woopsie', 'The file type you are trying to upload is not supported. Supported files include: JPEG, JPG, PNG and WEBP', 'var(--red)', '".$root_dir."assets/icons/cross.svg');
+      </script>
+      ";
+    }
+  } else {
+    echo "
+    <script>
+      sniffleAdd('Denied!!!', 'As you are not loggedin, your upload has been stopped, L', 'var(--red)', '".$root_dir."assets/icons/cross.svg');
+    </script>
+    ";
+  }
+}
--- a/app/server/conn.php
+++ b/app/server/conn.php
@ -0,0 +1,17 @@
+<?php
+/*
+  Connect to database
+
+  In the future I want this section to be configurable, but that'll require some work to be done.
+  For now it's hard-coded, shouldn't be an issue as most people wont be changing this often anyway
+*/
+// Setting up connection variables
+$conn_ip = "localhost";
+$conn_username = "uwu";
+$conn_password = "fennec621";
+$conn_database = "swag";
+
+$conn = mysqli_connect($conn_ip, $conn_username, $conn_password , $conn_database);
+if ($conn->connect_error) {
+  echo "<script>sniffleAdd('Error','Could not make a connection to the server, please try again later','var(--red)','".$root_dir."../../assets/icons/warning.svg')</script>";
+}
--- a/app/server/secrete.php
+++ b/app/server/secrete.php
--- a/assets/icons/bug.svg
+++ b/assets/icons/bug.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="156" cy="92" r="12"></circle><circle cx="100" cy="92" r="12"></circle><line x1="128" y1="128" x2="128" y2="224" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="244" y1="128" x2="12" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M208,144a80,80,0,0,1-160,0V112a80,80,0,0,1,160,0Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><line x1="231.9" y1="188" x2="203.2" y2="171.4" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="231.9" y1="68" x2="203.2" y2="84.6" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="24.1" y1="68" x2="52.8" y2="84.6" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="24.1" y1="188" x2="52.8" y2="171.4" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
--- a/assets/icons/check.svg
+++ b/assets/icons/check.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><polyline points="216 72 104 184 48 128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
--- a/assets/icons/circle-wavy-check.svg
+++ b/assets/icons/circle-wavy-check.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><path d="M54.5,201.5c-9.2-9.2-3.1-28.5-7.8-39.8S24,140.5,24,128s17.8-22,22.7-33.7-1.4-30.6,7.8-39.8S83,51.4,94.3,46.7,115.5,24,128,24s22,17.8,33.7,22.7,30.6-1.4,39.8,7.8,3.1,28.5,7.8,39.8S232,115.5,232,128s-17.8,22-22.7,33.7,1.4,30.6-7.8,39.8-28.5,3.1-39.8,7.8S140.5,232,128,232s-22-17.8-33.7-22.7S63.7,210.7,54.5,201.5Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><polyline points="172 104 113.3 160 84 132" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
--- a/assets/icons/circle-wavy-question.svg
+++ b/assets/icons/circle-wavy-question.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><path d="M54.5,201.5c-9.2-9.2-3.1-28.5-7.8-39.8S24,140.5,24,128s17.8-22,22.7-33.7-1.4-30.6,7.8-39.8S83,51.4,94.3,46.7,115.5,24,128,24s22,17.8,33.7,22.7,30.6-1.4,39.8,7.8,3.1,28.5,7.8,39.8S232,115.5,232,128s-17.8,22-22.7,33.7,1.4,30.6-7.8,39.8-28.5,3.1-39.8,7.8S140.5,232,128,232s-22-17.8-33.7-22.7S63.7,210.7,54.5,201.5Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="128" cy="180" r="12"></circle><path d="M128,144v-8a28,28,0,1,0-28-28" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/assets/icons/circle-wavy.svg
+++ b/assets/icons/circle-wavy.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#cccccc" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M54.5,201.5c-9.2-9.2-3.1-28.5-7.8-39.8S24,140.5,24,128s17.8-22,22.7-33.7-1.4-30.6,7.8-39.8S83,51.4,94.3,46.7,115.5,24,128,24s22,17.8,33.7,22.7,30.6-1.4,39.8,7.8,3.1,28.5,7.8,39.8S232,115.5,232,128s-17.8,22-22.7,33.7,1.4,30.6-7.8,39.8-28.5,3.1-39.8,7.8S140.5,232,128,232s-22-17.8-33.7-22.7S63.7,210.7,54.5,201.5Z" fill="none" stroke="#cccccc" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
+<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><path d="M54.5,201.5c-9.2-9.2-3.1-28.5-7.8-39.8S24,140.5,24,128s17.8-22,22.7-33.7-1.4-30.6,7.8-39.8S83,51.4,94.3,46.7,115.5,24,128,24s22,17.8,33.7,22.7,30.6-1.4,39.8,7.8,3.1,28.5,7.8,39.8S232,115.5,232,128s-17.8,22-22.7,33.7,1.4,30.6-7.8,39.8-28.5,3.1-39.8,7.8S140.5,232,128,232s-22-17.8-33.7-22.7S63.7,210.7,54.5,201.5Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/assets/icons/clipboard-text.svg
+++ b/assets/icons/clipboard-text.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><line x1="96" y1="152" x2="160" y2="152" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="96" y1="120" x2="160" y2="120" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M160,40h40a8,8,0,0,1,8,8V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H96" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M88,72V64a40,40,0,0,1,80,0v8Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/assets/icons/cookie.svg
+++ b/assets/icons/cookie.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><path d="M224,127.4a95.6,95.6,0,0,1-28.2,68.5c-36.9,36.9-97.3,37.3-134.7.9A96,96,0,0,1,128.6,32a8.1,8.1,0,0,1,7.8,9.8,32,32,0,0,0,30.8,39,8,8,0,0,1,8,8,32,32,0,0,0,39,30.8A8.1,8.1,0,0,1,224,127.4Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="156" cy="172" r="12"></circle><circle cx="92" cy="164" r="12"></circle><circle cx="84" cy="108" r="12"></circle><circle cx="136" cy="124" r="12"></circle></svg>
--- a/assets/icons/cross.svg
+++ b/assets/icons/cross.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><line x1="200" y1="56" x2="56" y2="200" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="200" y1="200" x2="56" y2="56" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
--- a/assets/icons/export.svg
+++ b/assets/icons/export.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><polyline points="86 58 128 16 170 58" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><line x1="128" y1="128" x2="128" y2="16" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M176,96h24a8,8,0,0,1,8,8V208a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V104a8,8,0,0,1,8-8H80" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/assets/icons/file-search.svg
+++ b/assets/icons/file-search.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><path d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><polyline points="152 32 152 88 208 88" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><line x1="143.8" y1="167.8" x2="159.8" y2="183.8" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><circle cx="124" cy="148" r="28" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle></svg>
--- a/assets/icons/gear.svg
+++ b/assets/icons/gear.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="48" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><path d="M183.7,65.1q3.8,3.5,7.2,7.2l27.3,3.9a103.2,103.2,0,0,1,10.2,24.6l-16.6,22.1s.3,6.8,0,10.2l16.6,22.1a102.2,102.2,0,0,1-10.2,24.6l-27.3,3.9s-4.7,4.9-7.2,7.2l-3.9,27.3a103.2,103.2,0,0,1-24.6,10.2l-22.1-16.6a57.9,57.9,0,0,1-10.2,0l-22.1,16.6a102.2,102.2,0,0,1-24.6-10.2l-3.9-27.3q-3.7-3.5-7.2-7.2l-27.3-3.9a103.2,103.2,0,0,1-10.2-24.6l16.6-22.1s-.3-6.8,0-10.2L27.6,100.8A102.2,102.2,0,0,1,37.8,76.2l27.3-3.9q3.5-3.7,7.2-7.2l3.9-27.3a103.2,103.2,0,0,1,24.6-10.2l22.1,16.6a57.9,57.9,0,0,1,10.2,0l22.1-16.6a102.2,102.2,0,0,1,24.6,10.2Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/assets/icons/hand-waving.svg
+++ b/assets/icons/hand-waving.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><path d="M94,61.4a20,20,0,0,1,34.6-20l30,51.9" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M67.4,95.2l-16-27.7A20,20,0,0,1,86,47.5l34,58.9" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M154,165.3a39.9,39.9,0,0,1,14.6-54.6l-10-17.4a20,20,0,0,1,34.7-20l20,34.7A80,80,0,0,1,74.7,188l-42-72.8a20,20,0,0,1,34.7-20l22,38.1" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M81.1,240A110.3,110.3,0,0,1,48,204" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M176,31a51.7,51.7,0,0,1,45,26" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/assets/icons/heart-break.svg
+++ b/assets/icons/heart-break.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><path d="M126.3,68.2A52,52,0,0,0,28,92c0,68,100,124,100,124S228,160,228,92a52,52,0,0,0-88.8-36.8l-32,32,32,32-16,16" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
--- a/assets/icons/tag.svg
+++ b/assets/icons/tag.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><path d="M122.7,25.9,42,42,25.9,122.7a8,8,0,0,0,2.2,7.2L132.5,234.3a7.9,7.9,0,0,0,11.3,0l90.5-90.5a7.9,7.9,0,0,0,0-11.3L129.9,28.1A8,8,0,0,0,122.7,25.9Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="84" cy="84" r="12"></circle></svg>
--- a/assets/icons/warning.svg
+++ b/assets/icons/warning.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><line x1="128" y1="104" x2="128" y2="144" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M114.2,40l-88,152A16,16,0,0,0,40,216H216a16,16,0,0,0,13.8-24l-88-152A15.9,15.9,0,0,0,114.2,40Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="128" cy="180" r="12"></circle></svg>
--- a/css/.master.css.swp
+++ b/css/.master.css.swp
--- a/css/footer.css
+++ b/css/footer.css
@ -1,21 +0,0 @@
-/*
-  -=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-footer {
-  margin: 0; padding: 0.5rem;
-
-  width: calc(100vh - 2rem));
-
-  background-color: var(--bg); color: var(--fg);
-  backdrop-filter: blur(8px);
-
-  border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
-
-  border-radius: var(--rad);
-  box-shadow: var(--shadow);
-}
-
-.footer-child {
-  min-width: 200px;
-}
--- a/css/main.css
+++ b/css/main.css
@ -0,0 +1,809 @@
+/*
+ |-------------------------------------------------------------
+ | Sass stylesheet
+ |-------------------------------------------------------------
+ | This is all written by me! Fluffy! This is intended to be
+ | compiled before use, I want to make this autocompile for
+ | ease of use, but you may suffer along with me for now :3
+ |-------------------------------------------------------------
+*/
+:root {
+  --bg: #151515bb;
+  --bg-1: #242621;
+  --bg-2: #1D1E1C;
+  --bg-3: #151515;
+  --fg: #E8E3E3;
+  --fg-dark: #151515;
+  --red: #B66467;
+  --orange: #FF7700;
+  --green: #8C977D;
+  --black: #151515;
+  --white: #E8E3E3;
+}
+
+/*
+ |-------------------------------------------------------------
+ | NAVIGATION BAR
+ |-------------------------------------------------------------
+*/
+nav {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0 auto 1rem;
+  width: calc(100% - 1.4rem);
+  height: 2.5rem;
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 99;
+  top: 1rem;
+  align-items: center;
+  vertical-align: middle;
+}
+nav > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+nav p {
+  margin: 0;
+  vertical-align: middle;
+}
+nav hr {
+  margin: 0.5rem 0.2rem;
+  padding: 0;
+  opacity: 0;
+}
+nav .btn {
+  width: auto;
+}
+
+.nav-name {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin: 0;
+  font-family: "Lexend Deca", sans-serif;
+  font-size: 22px;
+  display: block;
+}
+
+.nav-links {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin: 0;
+  font-family: "Secular One", sans-serif;
+  width: auto;
+}
+
+@media (max-width: 800px) {
+  .nav-name {
+    display: none;
+  }
+  .nav-links {
+    width: 100%;
+  }
+}
+@media (max-width: 550px) {
+  nav {
+    margin: 0;
+    width: calc(100% - 1rem);
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(21, 21, 21, 0.7333333333);
+    -webkit-backdrop-filter: blur(8px);
+            backdrop-filter: blur(8px);
+    border: none;
+    border-top: 3px solid #8C977D;
+    border-radius: 0;
+    -webkit-backdrop-filter: blur(16px);
+            backdrop-filter: blur(16px);
+  }
+  nav .svg {
+    margin: 0;
+    display: block;
+  }
+  .nav-hide {
+    display: none;
+  }
+  .info-text {
+    text-align: left !important;
+  }
+  footer {
+    margin-bottom: 4rem !important;
+  }
+  #back-to-top {
+    bottom: 5rem !important;
+  }
+}
+/*
+ |-------------------------------------------------------------
+ | INDEX
+ |-------------------------------------------------------------
+*/
+.info-text {
+  margin: 1rem 0 1rem 0.5rem;
+  padding: 0;
+  text-align: center;
+}
+.info-text h1,
+.info-text h2,
+.info-text h3,
+.info-text h4,
+.info-text h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.info-text p,
+.info-text a,
+.info-text button,
+.info-text input {
+  font-family: "Secular One", sans-serif;
+}
+.info-text h1 {
+  font-family: "Lexend Deca", sans-serif;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+.info-text p {
+  font-family: "Secular One", sans-serif;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.gallery-root {
+  margin-bottom: 1rem;
+  padding: 0.25rem;
+  background-color: #151515;
+  color: #E8E3E3;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  border: 0.2rem solid #8C977D;
+  border-radius: 0rem;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+
+.gallery-item {
+  margin: 0.25rem;
+  padding: 0;
+  height: auto;
+  max-width: calc(33.33% - 0.5rem);
+  background-color: #151515;
+  border-radius: -0.5rem;
+  position: relative;
+  flex: 1 0 150px;
+  transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
+}
+.gallery-item:hover {
+  transform: scale(1.1) rotate(5deg);
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+  z-index: 9;
+}
+.gallery-item:after {
+  content: "";
+  display: block;
+  padding-bottom: 100%;
+}
+
+.gallery-image {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  border-radius: -0.5rem;
+}
+
+/*
+ |-------------------------------------------------------------
+ | IMAGE
+ |-------------------------------------------------------------
+*/
+.image-container {
+  margin: 1rem 0 2rem 0;
+  padding: 0;
+  width: 100%;
+  max-height: 69vh;
+  height: auto;
+  display: flex;
+  background-color: rgba(21, 21, 21, 0.7333333333);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border-radius: 0rem;
+  transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+@media (max-width: 600px) {
+  .image-container {
+    max-height: 42vh;
+  }
+}
+.image {
+  margin: 0 auto;
+  max-width: 100%;
+  width: auto;
+  max-height: inherit;
+  height: auto;
+  border-radius: 0rem;
+}
+
+.image-description {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.image-description > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.image-description h1,
+.image-description h2,
+.image-description h3,
+.image-description h4,
+.image-description h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.image-description p,
+.image-description a,
+.image-description button,
+.image-description input {
+  font-family: "Secular One", sans-serif;
+}
+
+.image-detail {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.image-detail > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.image-detail h1,
+.image-detail h2,
+.image-detail h3,
+.image-detail h4,
+.image-detail h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.image-detail p,
+.image-detail a,
+.image-detail button,
+.image-detail input {
+  font-family: "Secular One", sans-serif;
+}
+
+.tags-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.tags-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.tags-root h1,
+.tags-root h2,
+.tags-root h3,
+.tags-root h4,
+.tags-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.tags-root p,
+.tags-root a,
+.tags-root button,
+.tags-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+.tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: auto;
+  margin-bottom: 0;
+}
+
+.tag {
+  margin: 0 0.5rem 0.5rem 0;
+  padding: 0.5rem;
+  display: block;
+  background-color: #8C977D;
+  border-radius: 0rem;
+  font-family: "Secular One", sans-serif;
+}
+
+.danger-zone {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #B66467;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.danger-zone > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.danger-zone h1,
+.danger-zone h2,
+.danger-zone h3,
+.danger-zone h4,
+.danger-zone h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.danger-zone p,
+.danger-zone a,
+.danger-zone button,
+.danger-zone input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | ABOUT
+ |-------------------------------------------------------------
+*/
+.about-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.about-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.about-root h1,
+.about-root h2,
+.about-root h3,
+.about-root h4,
+.about-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.about-root p,
+.about-root a,
+.about-root button,
+.about-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | UPLOAD
+ |-------------------------------------------------------------
+*/
+.upload-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.upload-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.upload-root h1,
+.upload-root h2,
+.upload-root h3,
+.upload-root h4,
+.upload-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.upload-root p,
+.upload-root a,
+.upload-root button,
+.upload-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | ACCOUNT
+ |-------------------------------------------------------------
+*/
+.account-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.account-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.account-root h1,
+.account-root h2,
+.account-root h3,
+.account-root h4,
+.account-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.account-root p,
+.account-root a,
+.account-root button,
+.account-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | SIGNUP
+ |-------------------------------------------------------------
+*/
+.signup-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.signup-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.signup-root h1,
+.signup-root h2,
+.signup-root h3,
+.signup-root h4,
+.signup-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.signup-root p,
+.signup-root a,
+.signup-root button,
+.signup-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | LOGIN
+ |-------------------------------------------------------------
+*/
+.login-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.login-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.login-root h1,
+.login-root h2,
+.login-root h3,
+.login-root h4,
+.login-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.login-root p,
+.login-root a,
+.login-root button,
+.login-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | PASSWORD RESET
+ |-------------------------------------------------------------
+*/
+.password-reset-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #B66467;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.password-reset-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.password-reset-root h1,
+.password-reset-root h2,
+.password-reset-root h3,
+.password-reset-root h4,
+.password-reset-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.password-reset-root p,
+.password-reset-root a,
+.password-reset-root button,
+.password-reset-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | SEARCH
+ |-------------------------------------------------------------
+*/
+.search-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.search-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.search-root h1,
+.search-root h2,
+.search-root h3,
+.search-root h4,
+.search-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.search-root p,
+.search-root a,
+.search-root button,
+.search-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | FOOTER
+ |-------------------------------------------------------------
+*/
+footer {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin: 0 auto;
+  bottom: 0;
+  width: calc(100% - 1.4rem);
+}
+footer > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+footer a {
+  margin: 0.5rem;
+  text-decoration: none;
+  font-family: "Secular One", sans-serif;
+}
+footer a:hover {
+  color: #FF7700;
+}
+
+/*
+ |-------------------------------------------------------------
+ | BODY COMPONENTS
+ |-------------------------------------------------------------
+*/
+html {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  max-width: 100vw;
+  position: relative;
+  background-color: #151515;
+  background-image: url("../assets/bg.svg");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  scroll-behavior: smooth;
+  overflow: auto;
+}
+
+body {
+  margin: 0 auto;
+  padding: 1rem;
+  max-width: 1000px;
+  min-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+body * {
+  color: #E8E3E3;
+}
+
+/*
+ |-------------------------------------------------------------
+ | BUTTONS
+ |-------------------------------------------------------------
+*/
+.btn {
+  padding: 0.5rem;
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: "Secular One", sans-serif;
+  text-decoration: none;
+  border: none;
+  border-radius: calc(0rem - (0.5rem + 3px));
+  transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
+}
+.btn:hover {
+  outline: #E8E3E3 0.2rem solid;
+  color: #E8E3E3;
+}
+.btn:where(input[type=file])::-webkit-file-upload-button {
+  margin: -0.25rem 0.5rem -0.25rem -0.25rem;
+  padding: 0.5rem;
+  display: inline-block;
+  font-size: 16px;
+  text-decoration: none;
+  background-color: #E8E3E3;
+  border: none;
+  border-radius: 0rem;
+}
+.btn:where(input[type=file])::file-selector-button {
+  margin: -0.25rem 0.5rem -0.25rem -0.25rem;
+  padding: 0.5rem;
+  display: inline-block;
+  font-size: 16px;
+  text-decoration: none;
+  background-color: #E8E3E3;
+  border: none;
+  border-radius: 0rem;
+}
+
+a.btn {
+  text-align: center;
+}
+
+.btn-good {
+  background-color: #8C977D;
+}
+
+.btn-bad {
+  background-color: #B66467;
+}
+
+.btn-neutral {
+  background-color: #151515;
+}
+
+/*
+ |-------------------------------------------------------------
+ | FORM SIZING
+ |-------------------------------------------------------------
+*/
+form {
+  width: 100%;
+  box-sizing: content-box;
+}
+form > * {
+  margin-bottom: 0.5rem;
+}
+
+/*
+ |-------------------------------------------------------------
+ | SVG
+ |-------------------------------------------------------------
+*/
+.svg {
+  margin: 0 0.2rem 0.1rem 0;
+  width: 19px;
+  height: 18px;
+  vertical-align: middle;
+  display: inline;
+}
+
+/*
+ |-------------------------------------------------------------
+ | BR / BREAK
+ |-------------------------------------------------------------
+*/
+br {
+  margin: 0;
+  line-height: 0.25rem;
+}
+
+/*
+ |-------------------------------------------------------------
+ | BACK TO TOP
+ |-------------------------------------------------------------
+*/
+#back-to-top {
+  margin: 0;
+  padding: 0.5rem;
+  position: fixed;
+  z-index: 99;
+  right: -2.5rem;
+  bottom: 1rem;
+  -o-object-position: center;
+     object-position: center;
+  background-color: rgba(21, 21, 21, 0.7333333333);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border-radius: 50%;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+  transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
+}
+#back-to-top:hover {
+  outline: 0.2rem solid #8C977D;
+}
+#back-to-top * {
+  margin: 0;
+  padding: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: block;
+  -o-object-position: center;
+     object-position: center;
+}/*# sourceMappingURL=main.css.map */
--- a/css/main.scss
+++ b/css/main.scss
@ -0,0 +1,202 @@
+/*
+ |-------------------------------------------------------------
+ | Sass stylesheet
+ |-------------------------------------------------------------
+ | This is all written by me! Fluffy! This is intended to be
+ | compiled before use, I want to make this autocompile for
+ | ease of use, but you may suffer along with me for now :3
+ |-------------------------------------------------------------
+*/
+@import "scss/mixin";
+@import "scss/variables";
+
+@import "scss/navigation";
+@import "scss/body";
+@import "scss/footer";
+
+/*
+ |-------------------------------------------------------------
+ | BODY COMPONENTS
+ |-------------------------------------------------------------
+*/
+html {
+    margin: 0;
+    padding: 0;
+
+    min-height: 100vh;
+    max-width: 100vw;
+
+    position: relative;
+
+    background-color: $bg;
+    background-image: url("../assets/bg.svg");
+
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    scroll-behavior: smooth;
+
+    overflow: auto;
+}
+
+body {
+    margin: 0 auto;
+    padding: 1rem;
+
+    max-width: 1000px;
+
+    min-height: calc(100vh - 2rem);
+
+    @include flexDown(space-between);
+
+    position: relative;
+
+    * {
+        color: $fg;
+    }
+}
+
+/*
+ |-------------------------------------------------------------
+ | BUTTONS
+ |-------------------------------------------------------------
+*/
+.btn {
+    padding: 0.5rem;
+
+    width: 100%;
+
+    display: block;
+    box-sizing: border-box;
+
+    font-size: 16px;
+    font-weight: 500;
+    font-family: $font-body;
+
+    text-decoration: none;
+
+    border: none;
+    border-radius: calc($rad - (0.5rem + 3px));
+
+    transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
+
+    &:hover {
+        outline: $white 0.2rem solid;
+        color: $fg;
+    }
+
+    &:where(input[type="file"])::file-selector-button {
+        margin: -0.25rem 0.5rem -0.25rem -0.25rem;
+        padding: 0.5rem;
+
+        display: inline-block;
+
+        font-size: 16px;
+
+        text-decoration: none;
+
+        background-color: $white;
+
+        border: none;
+        border-radius: $rad;
+    }
+}
+
+a.btn {
+    text-align: center;
+}
+
+.btn-good {
+    background-color: $green;
+}
+
+.btn-bad {
+    background-color: $red;
+}
+
+.btn-neutral {
+    background-color: $black;
+}
+
+/*
+ |-------------------------------------------------------------
+ | FORM SIZING
+ |-------------------------------------------------------------
+*/
+form {
+    width: 100%;
+    box-sizing: content-box;
+
+    >* {
+        margin-bottom: 0.5rem;
+    }
+}
+
+/*
+ |-------------------------------------------------------------
+ | SVG
+ |-------------------------------------------------------------
+*/
+.svg {
+    margin: 0 0.2rem 0.1rem 0;
+
+    width: 19px;
+    height: 18px;
+
+    vertical-align: middle;
+
+    display: inline;
+}
+
+/*
+ |-------------------------------------------------------------
+ | BR / BREAK
+ |-------------------------------------------------------------
+*/
+br {
+    margin: 0;
+
+    line-height: 0.25rem;
+}
+
+/*
+ |-------------------------------------------------------------
+ | BACK TO TOP
+ |-------------------------------------------------------------
+*/
+#back-to-top {
+    margin: 0;
+    padding: 0.5rem;
+
+    position: fixed;
+    z-index: 99;
+    right: -2.5rem;
+    bottom: 1rem;
+
+    object-position: center;
+
+    background-color: $bg-alt;
+    backdrop-filter: blur(8px);
+
+    border-radius: 50%;
+    box-shadow: $shadow;
+
+    transition: right 0.15s cubic-bezier(.19, 1, .22, 1);
+
+    &:hover {
+        outline: 0.2rem solid $green;
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        width: 1.5rem;
+        height: 1.5rem;
+
+        display: block;
+
+        object-position: center;
+    }
+}
--- a/css/master.css
+++ b/css/master.css
@ -1,494 +0,0 @@
-@import "nav.css";
-@import "footer.css";
-
-:root {
-  --bg: #15151588;
-  --bg-1: #242621;
-  --bg-2: #1D1E1C;
-  --bg-3: #151515;
-
-  --fg:#E8E3E3;
-  --fg-dark: #151515;
-
-  --red: #B66467;
-  --orange: #FF7700;
-  --green: #8C977D;
-  --black: #151515;
-  --white: #E8E3E3;
-
-  --shadow: 6px 6px 10px #15151588;
-  --rad: 5px;
-
-  --square: 33.33%;
-}
-
-* {
-  font-weight: 521;
-  color: var(--fg);
-  font-family: "Fira Code", monospace;
-}
-html {
-  margin: 0; padding: 0;
-
-  min-height: 100vh; max-width: 100vw;
-
-  position: relative;
-
-  background-color: var(--bg-3);
-  background-image: url("../assets/bg.svg");
-
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-
-  scroll-behavior: smooth;
-
-  overflow: auto;
-}
-body {
-  margin: 0 auto; padding: 1rem;
-
-  min-height: calc(100vh - 2rem); max-width: 1000px;
-
-  display: flex;
-
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-/*
-  -=-=-= BACK TO TOP BUTTON =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-#back-to-top {
-  margin: 0; padding: 0.5rem;
-
-  position: fixed; z-index: 9999999999;
-  right: -2.5rem; bottom: 1rem;
-
-  object-position: center;
-
-  background-color: var(--bg);
-  backdrop-filter: blur(8px);
-
-  border-radius: 50%;
-  box-shadow: var(--shadow);
-
-  transition: right 0.15s cubic-bezier(.19,1,.22,1);
-}
-#back-to-top:hover {
-  outline: 0.2rem solid var(--green);
-}
-
-#back-to-top * {
-  margin: 0; padding: 0;
-  width: 1.5rem; height: 1.5rem;
-
-  display: block;
-
-  object-position: center;
-}
-
-/*
-  -=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.default-window {
-  margin: 0 0 2rem; padding: 0.5rem;
-
-  width: auto;
-
-  background-color: var(--bg);
-  backdrop-filter: blur(8px);
-
-  outline: 0.5rem solid var(--bg);
-
-  border-radius: var(--rad);
-  box-shadow: var(--shadow);
-}
-
-.password-reset-root {
-  border: 0.2rem solid var(--red);
-}
-.edit-root {
-  border: 0.2rem solid var(--red);
-}
-
-.upload-root {
-  border: 0.2rem solid var(--green);
-}
-.signup-root {
-  border: 0.2rem solid var(--green);
-}
-.account-root {
-  border: 0.2rem solid var(--green);
-}
-.login-root {
-  border: 0.2rem solid var(--green);
-}
-.about-root {
-  border: 0.2rem solid var(--green);
-}
-
-/*
-  -=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.info-text {
-  margin: 0 0 2rem;
-}
-
-.gallery-root {
-  margin: 0 0 2rem; padding: 0.25rem;
-
-  background-color: var(--bg); color: var(--fg);
-  backdrop-filter: blur(8px);
-
-  border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
-
-  border-radius: var(--rad);
-  box-shadow: var(--shadow);
-}
-
-.gallery-item {
-  margin: 0.25rem; padding: 0;
-
-  height: auto; max-width: calc(33.33% - 0.5rem); /*max-width: 350px;*/
-
-  background-color: var(--bg-2);
-  border-radius: var(--rad);
-
-  position: relative;
-
-  flex: 1 0 150px;
-
-  transition: transform 0.15s cubic-bezier(.19,1,.22,1);
-}
-.gallery-item:hover {
-  transform: scale(1.1) rotate(5deg);
-  box-shadow: var(--shadow);
-
-  z-index: 999;
-}
-.gallery-item:after {
-  content: "";
-  display: block;
-  padding-bottom: 100%;
-}
-
-.gallery-image {
-  margin: 0; padding: 0;
-
-  width: 100%; height: 100%;
-
-  top: 0; bottom: 0; left: 0; right: 0;
-
-  position: absolute;
-
-  object-fit: cover;
-  object-position: center;
-
-  border-radius: var(--rad);
-}
-
-/*
-  -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.image-container {
-  padding: 0.5rem;
-  width: calc(100vw - var(--space-medium));
-  max-height: 69vh; height: auto;
-
-  position: relative;
-  display: flex;
-
-  background-color: var(--bg);
-  backdrop-filter: blur(8px);
-  outline: 0.5rem solid var(--bg);
-
-  border-radius: var(--rad);
-
-  transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
-}
-
-@media (max-width: 600px) {
-  .image-container {
-    max-height: 35vh;
-  }
-}
-
-.image {
-  margin: 0 auto;
-
-  max-width: 100%; width: auto;
-  max-height: inherit; height: auto;
-
-  border-radius: var(--rad);
-}
-
-.image-description {
-  border: 0.2rem solid var(--green);
-
-  word-wrap: break-word;
-}
-.image-detail {
-  border: 0.2rem solid var(--green);
-}
-.danger-zone {
-  border: 0.2rem solid var(--red);
-}
-
-.tags-root {
-  border: 0.2rem solid var(--green);
-}
-.tag {
-  margin: 0.25rem; padding: 0.5rem;
-
-  display: block;
-
-  border-radius: var(--rad);
-}
-.tag::before {
-  content: '#';
-}
-/*
-  -=-=-= UNIVERSAL =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.flex-left {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.flex-down {
-  display: flex;
-  flex-direction: column;
-}
-
-.between {
-  justify-content: space-between;
-}
-.around {
-  justify-content: space-around;
-}
-.center {
-  text-align: center;
-}
-
-.space-bottom-small {
-  margin-bottom: 0.5rem;
-  margin-top: 0;
-}
-.space-top-small {
-  margin-top: 0.5rem;
-  margin-bottom: 0;
-}
-.space-bottom {
-  margin-bottom: 1rem;
-  margin-top: 0;
-}
-.space-top {
-  margin-top: 1rem;
-  margin-bottom: 0;
-}
-.space-bottom-large {
-  margin-bottom: 2rem;
-}
-.space-top-large {
-  margin-top: 2rem;
-}
-
-.svg {
-  margin: 0 0.2rem 0.1rem 0;
-  width: 19px; height: 18px;
-
-  vertical-align: middle;
-
-  display: inline;
-}
-
-.text-box {
-  padding: 0.5rem;
-
-  display: block;
-
-  font-size: 16px;
-
-  text-decoration: none;
-
-  border: none;
-  border-radius: var(--rad);
-}
-
-/*
-  -=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.alert-banner {
-  margin: 0; padding: 0;
-
-  max-width: 621px; width: calc(100% - 2rem);
-  height: auto;
-
-  top: 1rem; left: 50%;
-  transform: translateX(-50%);
-
-  position: fixed; z-index: 9999999;
-}
-
-.alert {
-  padding: 0.69rem;
-
-  width: auto;
-
-  text-align: center;
-
-  display: block;
-
-  border-radius: var(--rad);
-
-  outline: 0.5rem solid var(--bg);
-
-  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
-}
-.alert:hover {
-  transform: scale(1.05);
-  cursor: pointer;
-}
-
-.alert-high {
-  background-color: var(--green);
-}
-.alert-low {
-  background-color: var(--red);
-}
-.alert-default {
-  background-color: var(--black);
-}
-
-/*
-  -=-=-= FORM =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-form {
-  width: 100%;
-  box-sizing: border-box;
-}
-form * {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/*
-  -=-=-= BUTTONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.btn {
-  padding: 0.5rem;
-
-  display: block;
-
-  font-size: 16px;
-
-  text-decoration: none;
-
-  border: none;
-  border-radius: var(--rad);
-
-  transition: outline 0.1s cubic-bezier(.19,1,.22,1);
-}
-.btn:hover {
-  outline: var(--white) 3px solid;
-  color: var(--fg);
-}
-a.btn {
-  margin-bottom: 0;
-  text-align: center;
-}
-
-.btn:where(input[type="file"])::file-selector-button {
-  margin: -0.5rem 0.5rem -0.5rem -0.5rem;
-  padding: 0.5rem;
-
-  display: inline-block;
-
-  font-size: 16px;
-
-  text-decoration: none;
-
-  background-color: var(--white);
-
-  border: none;
-  border-radius: var(--rad);
-}
-
-/*
-  -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.flyout {
-  margin: 0; padding: 0.5rem 0.5rem 1.5rem;
-
-  max-width: 621px; width: calc(100% - 2.5rem + 3px);
-  max-height: 20rem; height: auto; min-height: 10rem;
-
-  bottom: -20rem; left: 50%;
-
-  transform: translateX(-50%) scale(0.8);
-
-  position: fixed; z-index: 99999;
-
-  overflow-y: auto;
-
-  border: 0.2rem solid var(--green);
-  border-bottom: none;
-  border-radius: inherit inherit none none;
-
-  word-wrap: break-word;
-
-  transition: bottom 0.5s cubic-bezier(.19,1,.22,1), transform 0.5s cubic-bezier(.19,1,.22,1);
-}
-
-.flyout-dim {
-  margin: 0; padding: 0;
-
-  width: 100vw; height: 100vh;
-
-  left: 0; top: 0;
-
-  position: fixed; z-index: 99998;
-
-  opacity: 1;
-
-  display: none;
-
-  background: #15151588;
-  backdrop-filter: blur(5px);
-
-  transition: opacity 2s cubic-bezier(.19,1,.22,1);
-}
-
-/*
-  -=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-h1, h2, h3, h4 {
-  margin: 0 0 0.5rem 0;
-  font-family: "Lexend Deca", sans-serif;
-}
-h1 {
-  font-size: 30px;
-}
-h2 {
-  font-size: 27px;
-}
-h3 {
-  font-size: 24px;
-}
-h4 {
-  font-size: 21px;
-}
-
-p, a {
-  margin: 0 0 0.5rem 0;
-  font-family: "Fira Code", monospace;
-}
-a {
-  text-decoration: none;
-}
-a:hover {
-  color: var(--orange);
-}
--- a/css/nav.css
+++ b/css/nav.css
@ -1,56 +0,0 @@
-/*
-  -=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-nav {
-  margin: 0 0 2rem; padding: 0.5rem;
-
-  width: calc(100vh - 2rem)); height: 2.5rem;
-
-  align-items: center;
-  vertical-align: middle;
-
-  background-color: var(--bg); color: var(--fg);
-  backdrop-filter: blur(8px);
-
-  border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
-
-  border-radius: var(--rad);
-  box-shadow: var(--shadow);
-}
-
-nav h3 {
-  margin: 0;
-  vertical-align: middle;
-}
-nav hr {
-  margin: 0.5rem 0.2rem; padding: 0;
-
-  opacity: 0;
-}
-
-.nav-name h3, .nav-name {
-  display: block;
-}
-.nav-links {
-  width: auto;
-  justify-content: space-between;
-}
-@media (max-width: 800px) {
-  .nav-name h3, .nav-name hr, .nav-name {
-    display: none;
-  }
-  .nav-links {
-    width: 100%;
-    justify-content: space-around;
-  }
-}
-
-@media (max-width: 550px) {
-  .nav-hide {
-    display: none;
-  }
-  .nav-links a .svg {
-    margin: 0;
-  }
-}
--- a/css/normalize.css
+++ b/css/normalize.css
@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@ -0,0 +1,247 @@
+/*
+ |-------------------------------------------------------------
+ | INDEX
+ |-------------------------------------------------------------
+*/
+.info-text {
+    @include defaultFont();
+
+    margin: 1rem 0 1rem 0.5rem;
+    padding: 0;
+
+    text-align: center;
+
+    h1 {
+        font-family: $font-header;
+
+        margin-top: 0;
+        margin-bottom: 1rem;
+    }
+
+    p {
+        font-family: $font-body;
+
+        margin-top: 0;
+        margin-bottom: 1rem;
+    }
+}
+
+.gallery-root {
+    margin-bottom: 1rem;
+    padding: 0.25rem;
+
+    background-color: $bg;
+    color: $fg;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    border: 0.2rem solid $green;
+
+    border-radius: $rad;
+    box-shadow: $shadow;
+}
+
+.gallery-item {
+    margin: 0.25rem;
+    padding: 0;
+
+    height: auto;
+    max-width: calc(33.33% - 0.5rem);
+
+    background-color: $bg;
+    border-radius: calc($rad - 0.5rem);
+
+    position: relative;
+
+    flex: 1 0 150px;
+
+    transition: transform 0.15s cubic-bezier(.19, 1, .22, 1);
+
+    &:hover {
+        transform: scale(1.1) rotate(5deg);
+        box-shadow: $shadow;
+
+        z-index: 9;
+    }
+
+    &:after {
+        content: "";
+        display: block;
+        padding-bottom: 100%;
+    }
+}
+
+.gallery-image {
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+    height: 100%;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    position: absolute;
+
+    object-fit: cover;
+    object-position: center;
+
+    border-radius: calc($rad - 0.5rem);
+}
+
+/*
+ |-------------------------------------------------------------
+ | IMAGE
+ |-------------------------------------------------------------
+*/
+.image-container {
+    margin: 1rem 0 2rem 0;
+    padding: 0;
+
+    width: 100%;
+    max-height: 69vh;
+    height: auto;
+
+    display: flex;
+
+    background-color: $bg-alt;
+    backdrop-filter: blur(8px);
+
+    border-radius: $rad;
+
+    transition: max-height 0.15s cubic-bezier(.19, 1, .22, 1);
+}
+
+@media (max-width: 600px) {
+    .image-container {
+        max-height: 42vh;
+    }
+}
+
+.image {
+    margin: 0 auto;
+
+    max-width: 100%;
+    width: auto;
+    max-height: inherit;
+    height: auto;
+
+    border-radius: $rad;
+}
+
+// DESCRIPTION
+.image-description {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+
+// DETAILS
+.image-detail {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+// TAGS
+.tags-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+.tags {
+    @include flexLeft(auto);
+    margin-bottom: 0;
+}
+
+.tag {
+    margin: 0 0.5rem 0.5rem 0;
+    padding: 0.5rem;
+
+    display: block;
+
+    background-color: $page-accent;
+
+    border-radius: $rad;
+
+    font-family: $font-body;
+}
+
+// DANGER ZONE
+.danger-zone {
+    @include defaultDecoration($red);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | ABOUT
+ |-------------------------------------------------------------
+*/
+.about-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | UPLOAD
+ |-------------------------------------------------------------
+*/
+.upload-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | ACCOUNT
+ |-------------------------------------------------------------
+*/
+.account-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | SIGNUP
+ |-------------------------------------------------------------
+*/
+.signup-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | LOGIN
+ |-------------------------------------------------------------
+*/
+.login-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | PASSWORD RESET
+ |-------------------------------------------------------------
+*/
+.password-reset-root {
+    @include defaultDecoration($red);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | SEARCH
+ |-------------------------------------------------------------
+*/
+.search-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
--- a/css/scss/_footer.scss
+++ b/css/scss/_footer.scss
@ -0,0 +1,27 @@
+/*
+ |-------------------------------------------------------------
+ | FOOTER
+ |-------------------------------------------------------------
+*/
+footer {
+    @include defaultDecoration($page-accent);
+    @include flexLeft(space-around);
+
+    margin: 0 auto;
+
+    bottom: 0;
+
+    width: calc(100% - 1.4rem);
+
+    a {
+        margin: 0.5rem;
+
+        text-decoration: none;
+
+        font-family: $font-body;
+
+        &:hover {
+            color: $orange;
+        }
+    }
+}
--- a/css/scss/_mixin.scss
+++ b/css/scss/_mixin.scss
@ -0,0 +1,55 @@
+@mixin defaultDecoration($border) {
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+
+    width: calc(100% - 1.4rem);
+
+    background-color: $bg;
+    color: $fg;
+
+    border-radius: $rad;
+    border: 0.2rem solid $border;
+
+    box-shadow: $shadow;
+
+    >* {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+    }
+}
+
+@mixin defaultFont() {
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        font-family: $font-header;
+    }
+
+    p,
+    a,
+    button,
+    input {
+        font-family: $font-body;
+    }
+}
+
+@mixin flexDown($justify) {
+    display: flex;
+
+    flex-direction: column;
+
+    justify-content: $justify;
+}
+
+@mixin flexLeft($justify) {
+    display: flex;
+
+    flex-direction: row;
+
+    flex-wrap: wrap;
+
+    justify-content: $justify;
+}
--- a/css/scss/_navigation.scss
+++ b/css/scss/_navigation.scss
@ -0,0 +1,113 @@
+/*
+ |-------------------------------------------------------------
+ | NAVIGATION BAR
+ |-------------------------------------------------------------
+*/
+nav {
+    @include defaultDecoration($page-accent);
+    @include flexLeft(space-between);
+
+    margin: 0 auto 1rem;
+
+    width: calc(100% - 1.4rem);
+    height: 2.5rem;
+
+    position: sticky;
+    z-index: 99;
+    top: 1rem;
+
+    align-items: center;
+    vertical-align: middle;
+
+    p {
+        margin: 0;
+        vertical-align: middle;
+    }
+
+    hr {
+        margin: 0.5rem 0.2rem;
+        padding: 0;
+        opacity: 0;
+    }
+
+    .btn {
+        width: auto;
+    }
+}
+
+.nav-name {
+    @include flexLeft(space-around);
+
+    margin: 0;
+
+    font-family: $font-header;
+
+    font-size: 22px;
+
+    display: block;
+}
+
+.nav-links {
+    @include flexLeft(space-around);
+
+    margin: 0;
+
+    font-family: $font-body;
+
+    width: auto;
+}
+
+@media (max-width: 800px) {
+    .nav-name {
+        display: none;
+    }
+
+    .nav-links {
+        width: 100%;
+    }
+}
+
+@media (max-width: 550px) {
+    nav {
+        margin: 0;
+
+        width: calc(100% - 1rem);
+
+        position: fixed;
+        top: auto;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        background-color: $bg-alt;
+        backdrop-filter: blur(8px);
+
+        border: none;
+        border-top: 3px solid $green;
+        border-radius: 0;
+
+        backdrop-filter: blur(16px);
+
+        .svg {
+            margin: 0;
+
+            display: block;
+        }
+    }
+
+    .nav-hide {
+        display: none;
+    }
+
+    .info-text {
+        text-align: left !important;
+    }
+
+    footer {
+        margin-bottom: 4rem !important;
+    }
+
+    #back-to-top {
+        bottom: 5rem !important;
+    }
+}
--- a/css/scss/_variables.scss
+++ b/css/scss/_variables.scss
@ -0,0 +1,41 @@
+$bg: #151515;
+$bg-alt: #151515bb;
+
+$fg: #E8E3E3;
+$fg-alt: #151515;
+
+$red: #B66467;
+$orange: #FF7700;
+$green: #8C977D;
+$black: #151515;
+$white: #E8E3E3;
+
+$page-accent: #8C977D;
+
+$shadow: 6px 6px 2px #15151588;
+$rad: 0rem;
+
+$weight-bold: 621;
+$weight-normal: 400;
+
+$font-header: 'Lexend Deca',
+sans-serif;
+$font-body: 'Secular One',
+sans-serif;
+
+// Fallback for items that do not yet support the new sass stylesheet system
+:root {
+  --bg: #151515bb;
+  --bg-1: #242621;
+  --bg-2: #1D1E1C;
+  --bg-3: #151515;
+
+  --fg: #E8E3E3;
+  --fg-dark: #151515;
+
+  --red: #B66467;
+  --orange: #FF7700;
+  --green: #8C977D;
+  --black: #151515;
+  --white: #E8E3E3;
+}
--- a/image.php
+++ b/image.php
@ -3,300 +3,181 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
-  <!-- Rich preview -->
-  <meta property="og:type" content="object">
-  <meta property="og:title" content="Only Legs">
-  <meta property="og:site_name" content="Only Legs">
-  <meta property="og:url" content="https://superdupersecteteuploadtest.fluffybean.gay">
-  <meta property="og:description" content="Only Legs, a gallery made and hosted by Fluffy">
+  <title>Lynx Gallery</title>
+
+  <!-- Stylesheets -->
+	<link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/normalise.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+  <!-- JQuery -->
+  <script
+    src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+    crossorigin="anonymous">
+  </script>
+
+  <!-- Sniffle script! -->
+  <script src="Sniffle/sniffle.js"></script>
+  <link rel='stylesheet' href='Sniffle/sniffle.css'>
+
+  <!-- Flyout script! -->
+  <script src="Flyout/flyout.js"></script>
+  <link rel='stylesheet' href='Flyout/flyout.css'>
 </head>
 <body>
  <?php
+  /*
+   |-------------------------------------------------------------
+   | Import Required
+   |-------------------------------------------------------------
+   | These are common scripts used across all pages of the
+   | website. At some point I want the whole website to be only
+   | one index page. But that's going to require many many many
+   | many rewrites and hours of learning....
+   |-------------------------------------------------------------
+  */
  include "ui/required.php";
-  include("ui/header.php");
-  ?>
+  include "ui/nav.php";

-  <div class="alert-banner">
-    <?php
-    /*
-      If theres a success in updating the image,
-      it'll let the user know
-    */
-    if ($_GET["update"] == "success") {
-      echo notify("Information updated", "high");
-    } elseif ($_GET["update"] == "error") {
-      echo notify("Something went fuckywucky, please try later", "default");
-    }
-    if ($_GET["del"] == "fail") {
-      echo notify("Failed to delete image", "low");
-    }
-    ?>
-    <script src='scripts/alert.js'></script>
-  </div>

-  <?php
-  // If ID present pull all image data
-  if (isset($_GET['id'])) {
+  /*
+   |-------------------------------------------------------------
+   | Get image ID
+   |-------------------------------------------------------------
+   | Image ID should be written in the URL of the page as ?id=69
+   | If ID cannot be obtained, give error.      ID going here ^^
+   |-------------------------------------------------------------
+  */
+  if (isset($_GET['id']) && is_numeric($_GET['id'])) {
+    // Get all image info
    $image = get_image_info($conn, $_GET['id']);

    // Check if image is avalible
    if (isset($image['imagename'])) {
-      // Display image
+      $image_present = True;
+    } else {
+      ?>
+      <script>
+        sniffleAdd('Woops', 'Something happened, either image with the ID <?php echo $_GET['id']; ?> was deleted or never existed, either way it could not be found!', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+      </script>
+      <?php
+      $image_present = False;
+    }
+  } else {
+    ?>
+    <script>
+      sniffleAdd('Where is da image?', 'The link you followed seems to be broken, or there was some other error, who knows!', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
+    </script>
+    <?php
+    $image_present = False;
+  }
+
+  /*
+   |-------------------------------------------------------------
+   | Image verification
+   |-------------------------------------------------------------
+   | Doublechecking if all information on images exists, if yes
+   | display it, otherwise don't display at all or replace with
+   | blank or filler info
+   |-------------------------------------------------------------
+  */
+  if ($image_present) {
+    /*
+     |-------------------------------------------------------------
+     | Check user details
+     |-------------------------------------------------------------
+    */
+    if (isset($image['author'])) {
+      // Get all information on the user
+      $user = get_user_info($conn, $image['author']);
+
+      if (isset($user['username'])) {
+        $image_author = $user['username'];
+      } else {
+        $image_author = "Deleted User";
+      }
+    } else {
+      $image_author = "No author";
+    }
+
+    /*
+     |-------------------------------------------------------------
+     | Check if image path is good
+     |-------------------------------------------------------------
+    */
+    if (isset($image['imagename'])) {
      $image_path = "images/".$image['imagename'];
      $image_alt = $image['alt'];
    } else {
-      // ID not avalible toast
-      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";
      $image_alt = "No image could be found, sowwy";
    }
-  } else {
-    // No ID toast
-    echo "<p class='alert alert-low space-bottom-large'>No ID present</p>";

-    // Replacement "no image" image and description
+    /*
+     |-------------------------------------------------------------
+     | If description not set or empty, replace with filler
+     |-------------------------------------------------------------
+    */
+    if (!isset($image_alt) || empty($image_alt)) {
+      $image_alt = "No description avalible";
+    }
+  } else {
+    /*
+     |-------------------------------------------------------------
+     | Image was not present
+     |-------------------------------------------------------------
+    */
    $image_path = "assets/no_image.png";
    $image_alt = "No image could be found, sowwy";
  }

-
-  // Get all user details
-  if (isset($image['author'])) {
-    $user = get_user_info($conn, $image['author']);
-  }
-
-  // Check user privilge
+  /*
+   |-------------------------------------------------------------
+   | Check user privilge
+   |-------------------------------------------------------------
+  */
  if (image_privilage($image['author']) || is_admin($_SESSION['id'])) {
    $privilaged = True;
  } else {
    $privilaged = False;
  }
-
-
-  /*
-    Delete flyout
-
-    This goes with the confirm script below, to use flyout, you must include the js script and php function
-  */
-  if (isset($_POST['delete_flyout']) && $privilaged) {
-    $header = "Are you sure?";
-    $content = "Deleting this image is pernament, there is no going back after this!!!!!";
-    $action = "<form method='POST' enctype='multipart/form-data'>
-    <button class='btn alert-low' type='submit' name='delete_confirm' value='".$image['id']."'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>
-    </form>";
-
-    flyout($header, $content, $action);
-  }
-  /*
-    Confirm deleting user
-
-    user must be privilaged to do this action this the privilaged == true
-  */
-  if (isset($_POST['delete_confirm']) && $privilaged) {
-    // Unset all the variables, needed by flyout
-    unset($header, $content, $action);
-
-    // 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) {
-      // See if image is in the directory
-      if (is_file("images/".$image['imagename'])) {
-        unlink("images/".$image['imagename']);
-      }
-      // Delete thumbnail if exitsts
-      if (is_file("images/thumbnails/".$image['imagename'])) {
-        unlink("images/thumbnails/".$image['imagename']);
-      }
-      header("Location:index.php?del=true&id=".$image['id']);
-    } else {
-      header("Location: image.php?id=".$image['id']."&del=fail>");
-    }
-  }
-
-  /*
-    Description edit
-  */
-  if (isset($_POST['description_flyout']) && $privilaged) {
-    $header = "Enter new Description/Alt";
-    $content = "Whatcha gonna put in there 👀";
-    $action = "<form class='flex-down between' method='POST' enctype='multipart/form-data'>
-      <input class='btn alert-default space-bottom' type='text' name='update_alt' placeholder='Description/Alt for image'>
-      <button class='btn alert-low' type='submit' name='description_confirm' value='".$image["id"]."'><img class='svg' src='assets/icons/edit.svg'>Update information</button>
-    </form>";
-
-    flyout($header, $content, $action);
-  }
-  /*
-    Description confirm
-  */
-  if (isset($_POST['description_confirm']) && $privilaged) {
-    // Unset all the variables, needed by flyout
-    unset($header, $content, $action);
-
-    // getting ready forSQL asky asky
-    $sql = "UPDATE swag_table SET alt=? WHERE id=?";
-
-    // Checking if databse is doing ok
-    if ($stmt = mysqli_prepare($conn, $sql)) {
-      mysqli_stmt_bind_param($stmt, "si", $param_alt, $param_id);
-
-      // Setting parameters
-      $param_alt = $_POST['update_alt'];
-      $param_id = $image["id"];
-
-      // Attempt to execute the prepared statement
-      if (mysqli_stmt_execute($stmt)) {
-        header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=success");
-      } else {
-        header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=error");
-      }
-    }
-  }
-
-  /*
-    Adding tags
-  */
-  if (isset($_POST['tags_flyout']) && $privilaged) {
-    $header = "Tags";
-    $content = "Add image tags here! This is still being tested so your tags may be removed later on. Tags ONLY accept, letters, numbers and underscores. Hyphens will be stitched to underscores and spaces will seperate the different tags from eachother.";
-    $action = "<form class='flex-down between' method='POST' enctype='multipart/form-data'>
-      <input class='btn alert-default space-bottom' type='text' name='add_tags' placeholder='Tags are seperated by spaces'>
-      <button class='btn alert-low' type='submit' name='tags_confirm' value='".$image["id"]."'><img class='svg' src='assets/icons/edit.svg'>Add tags</button>
-    </form>";
-
-    flyout($header, $content, $action);
-  }
-  /*
-    Tags Confirm
-  */
-  if (isset($_POST['tags_confirm']) && $privilaged) {
-    // Unset all the variables, needed by flyout
-    unset($header, $content, $action);
-
-    // Clean tags before adding
-    function clean($string) {
-      // Change to lowercase
-      $string = strtolower($string);
-      // Replace hyphens
-      $string = str_replace('-', '_', $string);
-      // Regex
-      $string = preg_replace('/[^A-Za-z0-9\_ ]/', '', $string);
-      // Return string
-      return preg_replace('/ +/', ' ', $string);
-    }
-
-    // Clean input
-    $tags_string = tag_clean(trim($_POST['add_tags']));
-
-    // getting ready forSQL asky asky
-    $sql = "UPDATE swag_table SET tags=? WHERE id=?";
-
-    // Checking if databse is doing ok
-    if ($stmt = mysqli_prepare($conn, $sql)) {
-      mysqli_stmt_bind_param($stmt, "si", $param_tags, $param_id);
-
-      // Setting parameters
-      $param_tags = $tags_string;
-      $param_id = $image["id"];
-
-      // Attempt to execute the prepared statement
-      if (mysqli_stmt_execute($stmt)) {
-        header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=success");
-      } else {
-        header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=error");
-      }
-    }
-  }
-
-  /*
-    Description athor
-  */
-  if (isset($_POST['author_flyout']) && is_admin($_SESSION['id'])) {
-    $header = "Who owns the image?????";
-    $content = "Enter ID of image owner";
-    $action = "<form class='flex-down between' method='POST' enctype='multipart/form-data'>
-      <input class='btn alert-default space-bottom' type='text' name='update_author' placeholder='New user ID'>
-      <button class='btn alert-low' type='submit' name='author_confirm' value='".$image["id"]."'><img class='svg' src='assets/icons/edit.svg'>Update information</button>
-    </form>";
-
-    flyout($header, $content, $action);
-  }
-  /*
-    Author confirm
-  */
-  if (isset($_POST['author_confirm']) && is_admin($_SESSION['id'])) {
-    // Unset all the variables, needed by flyout
-    unset($header, $content, $action);
-
-    // getting ready forSQL asky asky
-    $sql = "UPDATE swag_table SET author=? WHERE id=?";
-
-    // Checking if databse is doing ok
-    if ($stmt = mysqli_prepare($conn, $sql)) {
-      mysqli_stmt_bind_param($stmt, "si", $param_author, $param_id);
-
-      // Setting parameters
-      $param_author = $_POST['update_author'];
-      $param_id = $image["id"];
-
-      // Attempt to execute the prepared statement
-      if (mysqli_stmt_execute($stmt)) {
-        header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=success");
-      } else {
-        header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=error");
-      }
-    }
-  }
  ?>

-  <div class="image-container space-bottom-large">
-    <?php
-    // Displaying image
-    echo "<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>";
-    ?>
+  <div class="image-container">
+    <img class='image' id='<?php echo $image['id']; ?>' src='<?php echo $image_path; ?>' alt='<?php echo $image_alt; ?>'>
  </div>

+  <?php
+  /*
+   |-------------------------------------------------------------
+   | Start of displaying all info on image
+   |-------------------------------------------------------------
+  */
+  if ($image_present) {
+  ?>
+
  <div class="image-description default-window">
    <h2>Description</h2>
-    <?php
-    // Image Description/Alt
-    if (isset($image_alt) && !empty($image_alt)) {
-      echo "<p>".$image_alt."</p>";
-    } else {
-      echo "<p>No description provided</p>";
-    }
-    ?>
+    <p><?php echo $image_alt; ?></p>
  </div>

+
  <div class="image-detail flex-down default-window">
    <h2>Details</h2>
    <?php
-    // Image ID
-    if (isset($image['author'])) {
-      if (isset($user['username'])) {
-        echo "<p>Author: ".$user['username']."</p>";
-      } else {
-        echo "<p>Author: Deleted User</p>";
-      }
-    } else {
-      echo "<p>Author: No author</p>";
-    }
+    // User
+    echo "<p>Author: ".$image_author."</p>";

    // Image ID
    echo "<p>ID: ".$image['id']."</p>";

    // File name
    if (strlen($image['imagename']) > 30) {
-      echo "<p>File Name: ".trim(substr($image['imagename'], 0, 30))."...</p>";
+      echo "<p>File Name: ".substr($image['imagename'], 0, 30)."...</p>";
    } else {
      echo "<p>File Name: ".$image['imagename']."</p>";
    }
@ -309,22 +190,36 @@
    echo "<p>Image resolution: ".$width."x".$height."</p>";

    // Image Upload date
-    echo "<p>Last updated: ".$image['upload']." (+0)</p>";
+    echo "<p>Last updated: +0 ".$image['upload']."</p>";
+
+    echo "<br>";

    // Image download
-    echo "<a class='btn alert-high space-top' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
+    echo "<a class='btn btn-good' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
+
+    // Copy image
+    ?>
+    <script>
+      function copyLink() {
+        navigator.clipboard.writeText(window.location.href);
+
+        sniffleAdd("Info", "Link has been copied!", "var(--green)", "assets/icons/clipboard-text.svg");
+      }
+    </script>
+    <?php
+    echo "<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>";
    ?>
  </div>

  <div class="tags-root default-window">
    <h2>Tags</h2>
-    <div class="tags flex-left">
+    <div class="tags">
      <?php
      // Get image tags
      if (isset($image['tags']) && !empty($image['tags'])) {
        $image_tags_array = explode(" ", $image['tags']);
        foreach ($image_tags_array as $tag) {
-          echo "<p class='tag alert-high'>".$tag."</p>";
+          echo "<p class='tag btn-good'><img class='svg' src='assets/icons/tag.svg'>".$tag."</p>";
        }
      } else {
        echo "<p>No tags present</p>";
@ -335,48 +230,161 @@

  <?php
  /*
-    Check if user is privilaged,
-    If yes, grant them access to the Danger zone, or "the place that can fuck things up"
-
-    Checking is done prior to here
+   |-------------------------------------------------------------
+   | Check if user is privilaged,
+   |-------------------------------------------------------------
+   | If yes, grant them access to the Danger zone, or "the place
+   | that can fuck things up"
+   |-------------------------------------------------------------
  */
  if ($privilaged) {
-    // Danger zone
-    echo "<div class='danger-zone flex-down default-window'>
-    <h2>Danger zone</h2>";
+  ?>
+    <!-- Danger zone -->
+    <div class='danger-zone flex-down default-window'>
+    <h2>Danger zone</h2>

-    // Delete
-    echo "<form method='POST'>
-      <button class='btn alert-low flyout-display' type='submit' name='delete_flyout'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>
-    </form>";
+    <!--
+     |-------------------------------------------------------------
+     | Delete
+     |-------------------------------------------------------------
+     | sus
+     | I cannot describe the anxiety this gives me. pls help
+     |-------------------------------------------------------------
+    -->
+    <button id='deleteButton' class='btn btn-bad'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>
+    <script>
+      $('#deleteButton').click(function() {
+        var header = "Are you sure?";
+        var description = "Deleting this image is pernament, there is no going back after this!!!!!";
+        var actionBox = "<form id='deleteConfirm' method='POST'>\
+        <button id='deleteSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>\
+        </form>";
+        flyoutShow(header, description, actionBox);

-    // Edit description
-    echo "<form method='POST'>
-      <button class='btn alert-low space-top-small flyout-display' type='submit' name='description_flyout'><img class='svg' src='assets/icons/edit.svg'>Edit description</button>
-    </form>";
+        $("#deleteConfirm").submit(function(event) {
+          event.preventDefault();
+          var deleteSubmit = $("#deleteSubmit").val();
+          $("#sniffle").load("app/image/delete_image.php", {
+            id: <?php echo $_GET['id']; ?>,
+            submit: deleteSubmit
+          });
+        });
+      });
+    </script>

-    // Edit tags
-    echo "<form method='POST'>
-      <button class='btn alert-low space-top-small flyout-display' type='submit' name='tags_flyout'><img class='svg' src='assets/icons/edit.svg'>Add image tags</button>
-    </form>";
+    <!--
+     |-------------------------------------------------------------
+     | Edit Description
+     |-------------------------------------------------------------
+     | Most people reading through the code will probably say how
+     | shit it is. YOU HAVE NO FUCKING CLUE HOW LONG THIS TOOK ME
+     | TO FIGURE OUT. i hate js.
+     |-------------------------------------------------------------
+    -->
+    <button id='descriptionButton' class='btn btn-bad'><img class='svg' src='assets/icons/edit.svg'>Edit description</button>
+    <script>
+      $('#descriptionButton').click(function() {
+        var header = "Enter new Description/Alt";
+        var description = "Whatcha gonna put in there 👀";
+        var actionBox = "<form id='descriptionConfirm' action='app/image/edit_description.php' method='POST'>\
+        <input id='descriptionInput' class='btn btn-neutral space-bottom' type='text' placeholder='Description/Alt for image'>\
+        <button id='descriptionSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Update information</button>\
+        </form>";
+        flyoutShow(header, description, actionBox);

-    // Edit authro
+        $("#descriptionConfirm").submit(function(event) {
+          event.preventDefault();
+          var descriptionInput = $("#descriptionInput").val();
+          var descriptionSubmit = $("#descriptionSubmit").val();
+          $("#sniffle").load("app/image/edit_description.php", {
+            id: <?php echo $_GET['id']; ?>,
+            input: descriptionInput,
+            submit: descriptionSubmit
+          });
+        });
+      });
+    </script>
+
+    <!--
+     |-------------------------------------------------------------
+     | Edit Tags
+     |-------------------------------------------------------------
+     | Literally no amount of work will get tags/lists to play well
+     | with SQL so I gave up and made my own shitty system. It
+     | works but once I re-add the search function this will make
+     | anyone cry. I am so sorry.
+     |-------------------------------------------------------------
+    -->
+    <button id='tagsButton' class='btn btn-bad'><img class='svg' src='assets/icons/tag.svg'>Add image tags</button>
+    <script>
+      $('#tagsButton').click(function() {
+        var header = "Tags";
+        var description = "Add image tags here! This is still being tested so your tags may be removed later on. Tags ONLY accept, letters, numbers and underscores. Hyphens will be stitched to underscores and spaces will seperate the different tags from eachother";
+        var actionBox = "<form id='tagsConfirm' action='app/image/edit_tags.php' method='POST'>\
+        <input id='tagsInput' class='btn btn-neutral space-bottom' type='text' placeholder='Tags are seperated by spaces'>\
+        <button id='tagsSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Edit tags</button>\
+        </form>";
+        flyoutShow(header, description, actionBox);
+
+        $("#tagsConfirm").submit(function(event) {
+          event.preventDefault();
+          var tagsInput = $("#tagsInput").val();
+          var tagsSubmit = $("#tagsSubmit").val();
+          $("#sniffle").load("app/image/edit_tags.php", {
+            id: <?php echo $_GET['id']; ?>,
+            input: tagsInput,
+            submit: tagsSubmit
+          });
+        });
+      });
+    </script>
+
+    <!--
+     |-------------------------------------------------------------
+     | Edit Author
+     |-------------------------------------------------------------
+     | You must be a super cool person to see this section ;3
+     |-------------------------------------------------------------
+    -->
+  <?php
    if (is_admin($_SESSION['id'])) {
-      echo "<form method='POST'>
-        <button class='btn alert-low space-top-small flyout-display' type='submit' name='author_flyout'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>
-      </form>";
-    }
+  ?>
+      <button id='authorButton' class='btn btn-bad'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>
+      <script>
+        $('#authorButton').click(function() {
+          var header = "Who owns the image?????";
+          var description = "Enter ID of image owner";
+          var actionBox = "<form id='authorConfirm' action='app/image/edit_author.php' method='POST'>\
+          <input id='authorInput' class='btn btn-neutral space-bottom' type='text' placeholder='le author'>\
+          <button id='authorSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>\
+          </form>";
+          flyoutShow(header, description, actionBox);

+          $("#authorConfirm").submit(function(event) {
+            event.preventDefault();
+            var authorInput = $("#authorInput").val();
+            var authorSubmit = $("#authorSubmit").val();
+            $("#sniffle").load("app/image/edit_author.php", {
+              id: <?php echo $_GET['id']; ?>,
+              input: authorInput,
+              submit: authorSubmit
+            });
+          });
+        });
+      </script>
+  <?php
+    }
    echo "</div>";
  }
+
+  /*
+   |-------------------------------------------------------------
+   | End of displaying all user info
+   |-------------------------------------------------------------
+  */
+  }
  ?>

-  <?php
-  // Must be included with flyout.php
-  echo "<script src='scripts/flyout.js'></script>";
-
-  include("ui/top.html");
-  include("ui/footer.php");
-  ?>
+  <?php include "ui/footer.php"; ?>
 </body>
-</html>
+</html>
--- a/index.php
+++ b/index.php
@ -1,131 +1,124 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Lynx Gallery</title>
+
+	<!-- Stylesheets -->
+	<link rel="stylesheet" href="css/main.css">
+	<link rel="stylesheet" href="css/normalise.css">
+
+
+	<!-- Google Fonts -->
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+	<!-- JQuery -->
+	<script
+		src="https://code.jquery.com/jquery-3.6.0.min.js"
+		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+		crossorigin="anonymous">
+	</script>
+
+	<!-- Sniffle script! -->
+	<script src="Sniffle/sniffle.js"></script>
+	<link rel='stylesheet' href='Sniffle/sniffle.css'>
+
+	<!-- Flyout script! -->
+	<script src="Flyout/flyout.js"></script>
+	<link rel='stylesheet' href='Flyout/flyout.css'>
+
+	<?php include "ui/required.php"; ?>
 </head>
 <body>
-  <?php
-  include "ui/required.php";
-  include "ui/header.php";
-  ?>
+<?php
+include "ui/nav.php";
+?>

-  <div class="alert-banner">
-    <?php
-    /*
-      If theres a success in updating the image,
-      it'll let the user know
-    */
-    // Deletion toast
-    if ($_GET["del"] == "true") {
-      echo notify("Successfully deleted image: ".$_GET['id'], "high");
-    }
-    // Account toast
-    if ($_GET["login"] == "success") {
-      echo notify("O hi ".$_SESSION['username'], "high");
-    }
-    ?>
-    <script src='scripts/alert.js'></script>
-  </div>

-  <?php
-  // Show search
-  if ($_GET["srch"] == "show") {
-    $header = "Search for a tags!";
-    $content = "Here you can search for funnies! Like raccoons!!!!!!!!!";
-    $action = "<form class='flex-down between' method='POST' enctype='multipart/form-data'>
-      <input class='btn alert-default space-bottom' type='text' name='search' placeholder='👀'>
-      <button class='btn alert-high' type='submit' name='search_confirm' value=''><img class='svg' src='assets/icons/binoculars.svg'>Search</button>
-    </form>";
+<script>
+	//sniffleAdd("Warning", "The website is currently being worked on, some functionality has been restored, but tread carefully as errors may occur", "var(--red)", "<?php echo $root_dir ?>assets/icons/warning.svg");

-    flyout($header, $content, $action);
-  }
-  /*
-    Search Confirm
-  */
-  if (isset($_POST['search_confirm'])) {
-    // Unset all the variables, needed by flyout
-    unset($header, $content, $action);
+	if (params.del == "true") {
+		sniffleAdd("Image Deleted", "Successfully deleted image: <?php echo $_GET['id']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/trash.svg");
+	}
+	if (params.login == "success") {
+		sniffleAdd("Logged in", "O hi <?php echo $_SESSION['username']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/hand-waving.svg");
+	}
+</script>

-    // Clean input
-    $tags_string = tag_clean(trim($_POST['search']));
+<div class="info-text">
+	<?php
+		// Set time for message
+		$time = date("H");
+		$timezone = date("e");
+		if ($time < "12") {
+			$time_welc = "Good morning";
+		} else if ($time >= "12" && $time < "17") {
+			$time_welc = "Good afternoon";
+		} else if ($time >= "17" && $time < "19") {
+			$time_welc = "Good evening";
+		} else if ($time >= "19") {
+			$time_welc = "Good night";
+		}

-    header("Location:https://superdupersecteteuploadtest.fluffybean.gay?q=".$tags_string);
-  }
-  if (isset($_GET["q"])) {
-    echo "<p class='alert alert-default space-bottom'>Search results for: ".$_GET['q']."</p>";
-  }
-  ?>
+		// Welcome depending on if user is logged in or not
+		if (isset($_SESSION["username"])) {
+			echo "<h1>".$time_welc." ".$_SESSION['username']."!</h1>";
+		} else {
+			echo "<h1>".$time_welc."!</h1>";
+		}

-  <div class="info-text center">
-    <?php
-    // Welcome depending on if user is logged in or not
-    if (isset($_SESSION["username"])) {
-      echo "<h1>Welcome ".$_SESSION['username']."!</h1>";
-    } else {
-      echo "<h1>Welcome!</h1>";
-    }
+		// Random welcome message
+		$welcome_message = array("*internal screaming*",
+		"Sussy Wussy",
+		"What is this world?",
+		"Don't forget to drink water!",
+		"Bruh",
+		"This is so poorly programmed",
+		"Sorry",
+		"Fluffy made this!",
+		"maybe",
+		"I'm gay",
+		"I wish we were better strangers.",
+		"<span style='color:#ffff00;'>Just like Minecraft!</span>",
+		"If I were you, I'd run now",
+		"This is the part where I kill you",
+		"SILICA GEL \"DO NOT EAT\".",
+		"This was supposed to be a simple project",
+		"AAAAAAAAAAAAAAAAAAAA",
+		"Let me out",
+		"nice",
+		"Thank you that you're here",
+		"The weather is dry",
+		"Need me a man 👀");
+		echo "<p>".$welcome_message[array_rand($welcome_message, 1)]."</p>";
+	?>
+</div>

-    // Random welcome message
-    $welcome_message = array("*internal screaming*", "Sussy Wussy", "What is this world?", "Don't forget to drink water!", "Bruh", "This is so poorly programmed", "Sorry", "Fluffy made this!", "maybe", "I'm gay");
-    echo "<p>".$welcome_message[array_rand($welcome_message, 1)]."</p>";
-    ?>
-  </div>
+<div class="gallery-root flex-left">
+	<?php
+	// Reading images from table
+	$image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC");

-  <div class="gallery-root flex-left">
-    <?php
-    // Reading images from table
-    $image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC");
+	while ($image = mysqli_fetch_array($image_request)) {
+		// Getting thumbnail
+		if (file_exists("images/thumbnails/".$image['imagename'])) {
+			$image_path = "images/thumbnails/".$image['imagename'];
+		} else {
+			$image_path = "images/".$image['imagename'];
+		}

-    while ($image = mysqli_fetch_array($image_request)) {
-      // If search is set
-      if (isset($_GET['q']) && !empty($_GET['q'])) {
-        // Make search into an array
-        $search_array = explode(" ", $_GET['q']);
+		// Image loading
+		echo "<div class='gallery-item'>";
+		echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+		echo "</div>";
+	}
+	?>
+</div>

-        // Get images tags for comparing
-        $image_tag_array = explode(" ", $image['tags']);

-        // Compare arrays
-        $compare_results = array_intersect($image_tag_array, $search_array);
-        if (count($compare_results) > 0) {
-          // Getting thumbnail
-          if (file_exists("images/thumbnails/".$image['imagename'])) {
-            $image_path = "images/thumbnails/".$image['imagename'];
-          } else {
-            $image_path = "images/".$image['imagename'];
-          }
-
-          // Image loading
-          echo "<div class='gallery-item'>";
-          echo "<a href='https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
-          echo "</div>";
-        }
-      } else {
-        // Getting thumbnail
-        if (file_exists("images/thumbnails/".$image['imagename'])) {
-          $image_path = "images/thumbnails/".$image['imagename'];
-        } else {
-          $image_path = "images/".$image['imagename'];
-        }
-
-        // Image loading
-        echo "<div class='gallery-item'>";
-        echo "<a href='https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
-        echo "</div>";
-      }
-    }
-    ?>
-  </div>
-
-  <?php
-  include("ui/top.html");
-  include("ui/footer.php");
-  ?>
+<?php include "ui/footer.php"; ?>
 </body>
 </html>
--- a/scripts/alert.js
+++ b/scripts/alert.js
@ -1,10 +0,0 @@
-let alertClose = document.querySelectorAll(".alert");
-
-function closeAlert(gone) {
-  gone.closest(".alert").style.transform="translateY(-10rem) scale(0.8)";
-  gone.closest(".alert").style.opacity="0";
-
-  setTimeout(function(){
-    gone.closest(".alert").style.display="none";
-  }, 200);
-};
--- a/scripts/flyout.js
+++ b/scripts/flyout.js
@ -1,24 +0,0 @@
-console.log(" . . /|/| . . . . . . . \n .. /0 0 \\ . . . . . .. \n (III% . \\________, . . \n .. .\\_, .%###%/ \\'\\,.. \n . . . .||#####| |'\\ \\. \n .. . . ||. . .|/. .\\V. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . cc/ . .cc/ . . .");
-
-$(document).ready(function() {
-  let show = document.querySelectorAll(".flyout-display");
-  let hide = document.querySelector(".flyout-close");
-
-  show.forEach(function(){
-    document.querySelector(".flyout").style.transform= "translateX(-50%) scale(1)";
-    document.querySelector(".flyout").style.bottom= "-1rem";
-    document.querySelector(".flyout-dim").style.display= "block";
-  });
-
-
-  hide.addEventListener("click", function(){
-    document.querySelector(".flyout").style.transform= "translateX(-50%) scale(0.8)";
-    document.querySelector(".flyout").style.bottom= "-20rem";
-
-    document.querySelector(".flyout-dim").style.opacity= "0";
-
-    setTimeout(function(){
-      document.querySelector(".flyout-dim").style.display= "none";
-    }, 600);
-  });
-});
--- a/scripts/top.js
+++ b/scripts/top.js
@ -1,13 +0,0 @@
-$(document).ready(function() {
-  button = document.getElementById("back-to-top");
-
-  window.onscroll = function() {scrollFunction()};
-
-  function scrollFunction() {
-    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
-      button.style.right = "1rem";
-    } else {
-      button.style.right = "-2.5rem";
-    }
-  }
-});
--- a/search.php
+++ b/search.php
@ -0,0 +1,71 @@
+<?php
+/*if (isset($_GET['q']) && !empty($_GET['q'])) {
+  // Make search into an array
+  $search_array = explode(" ", $_GET['q']);
+
+  // Get images tags for comparing
+  $image_tag_array = explode(" ", $image['tags']);
+
+  // Compare arrays
+  $compare_results = array_intersect($image_tag_array, $search_array);
+  if (count($compare_results) > 0) {
+    // Getting thumbnail
+    if (file_exists("images/thumbnails/".$image['imagename'])) {
+      $image_path = "images/thumbnails/".$image['imagename'];
+    } else {
+      $image_path = "images/".$image['imagename'];
+    }
+
+    // Image loading
+    echo "<div class='gallery-item'>";
+    echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+    echo "</div>";
+  }
+}*/
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lynx Gallery</title>
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/normalise.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+  <!-- JQuery -->
+  <script
+    src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+    crossorigin="anonymous">
+  </script>
+
+  <!-- Sniffle script! -->
+  <script src="Sniffle/sniffle.js"></script>
+  <link rel='stylesheet' href='Sniffle/sniffle.css'>
+
+  <!-- Flyout script! -->
+  <script src="Flyout/flyout.js"></script>
+  <link rel='stylesheet' href='Flyout/flyout.css'>
+</head>
+<body>
+  <?php
+  include "ui/required.php";
+  include "ui/nav.php";
+  ?>
+
+  <div class="search-root">
+    <h2>Where did the search go!</h2>
+    <p>Due to how it was implemented originally, it was hard to handle and work with. So I removed it.</p>
+    <p>It'll be coming back, but since it's going to be a lot of work it'll have to be much later.</p>
+  </div>
+
+  <?php include "ui/footer.php"; ?>
+</body>
+</html>
--- a/ui/footer.php
+++ b/ui/footer.php
@ -1,43 +1,22 @@
-<?php
-if (is_dir("assets/icons/")) {
-  $dir = "assets/icons/";
-} else {
-  $dir = "../assets/icons/";
-}
-?>
-
-<footer class="footer-root flex-left around">
-  <div class="footer-child center flex-down">
-    <h3>Contact me</h3>
-    <a class='link' href="https://t.me/Fluffy_Bean">
-      <img class='svg' src='<?php echo $dir; ?>telegram-logo.svg'>
-      Telegram</a>
-    <a class='link' href="https://twitter.com/fluffybeanUwU">
-      <img class='svg' src='<?php echo $dir; ?>twitter-logo.svg'>
-      Twitter</a>
-    <a class='link' href="https://github.com/Fluffy-Bean">
-      <img class='svg' src='<?php echo $dir; ?>github-logo.svg'>
-      GitHub</a>
-  </div>
-  <div class="footer-child center flex-down">
-    <h3>Information</h3>
-    <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/info/about.php">
-      <img class='svg' src='<?php echo $dir; ?>scroll.svg'>
-      About</a>
-    <a href="https://github.com/Fluffy-Bean/image-gallery">
-      <img class='svg' src='<?php echo $dir; ?>github-logo.svg'>
-      Project Code</a>
-    <a href="https://github.com/Fluffy-Bean/image-gallery/blob/main/LICENSE.md">
-      <img class='svg' src='<?php echo $dir; ?>link.svg'>
-      Legal</a>
-  </div>
-  <div class="footer-child center flex-down">
-    <h3>Other Work</h3>
-    <a class='link' href="https://testing.fluffybean.gay">
-      <img class='svg' src='<?php echo $dir; ?>link.svg'>
-      Testing Page</a>
-    <a class='link' href="https://gay.fluffybean.gay">
-      <img class='svg' src='<?php echo $dir; ?>link.svg'>
-      My website!</a>
-  </div>
+<footer class="flex-left around">
+  <a class='link' href="https://t.me/Fluffy_Bean">
+    <img class='svg' src='<?php echo $root_dir; ?>assets/icons/telegram-logo.svg'>
+    Telegram
+  </a>
+  <a class='link' href="https://twitter.com/fluffybeanUwU">
+    <img class='svg' src='<?php echo $root_dir; ?>assets/icons/twitter-logo.svg'>
+    Twitter
+  </a>
+  <a class='link' href="https://github.com/Fluffy-Bean">
+    <img class='svg' src='<?php echo $root_dir; ?>assets/icons/github-logo.svg'>
+    Github
+  </a>
+  <a class='link' href="<?php echo $root_dir; ?>about.php">
+    <img class='svg' src='<?php echo $root_dir; ?>assets/icons/scroll.svg'>
+    About
+  </a>
+  <a class='link' href="https://gay.fluffybean.gay">
+    <img class='svg' src='<?php echo $root_dir; ?>assets/icons/link.svg'>
+    My website!
+  </a>
 </footer>
--- a/ui/functions.php
+++ b/ui/functions.php
@ -1,191 +1 @@
 <?php
-/*
-  Get full image info from database
-
-  Returns array with image info
-*/
-function get_image_info($conn, $id) {
-  // Setting SQL query
-  $sql = "SELECT * FROM swag_table WHERE id = ".$id;
-  // Getting results
-  $query = mysqli_query($conn, $sql);
-  // Fetching associated info
-  $image_array = mysqli_fetch_assoc($query);
-
-  return($image_array);
-}
-
-
-/*
-  Get full user info from database
-
-  Returns array with user info
-*/
-function get_user_info($conn, $id) {
-  // Setting SQL query
-  $sql = "SELECT * FROM users WHERE id = ".$id;
-  // Getting results
-  $query = mysqli_query($conn, $sql);
-  // Fetching associated info
-  $user_array = mysqli_fetch_assoc($query);
-
-  return($user_array);
-}
-
-
-/*
-  Clean up long text input and turn into an array for tags
-
-  Returns clean string of words with equal white space between it
-*/
-function tag_clean($string) {
-  // Replace hyphens
-  $string = str_replace('-', '_', $string);
-  // Regex
-  $string = preg_replace('/[^A-Za-z0-9\_ ]/', '', $string);
-  // Change to lowercase
-  $string = strtolower($string);
-  // Removing extra spaces
-  $string = preg_replace('/ +/', ' ', $string);
-
-  return $string;
-}
-
-
-/*
-  Check if user is loggedin
-
-  Returns True if user is
-  Returns False if user is NOT
-*/
-function loggedin() {
-  if (isset($_SESSION["loggedin"]) == true && $_SESSION["loggedin"] == true) {
-    return True;
-  } else {
-    return False;
-  }
-}
-
-
-/*
-  Check if user is image owner
-
-  Returns True if user is privilaged
-  Returns False if user is NOT privilaged
-*/
-function image_privilage($id) {
-  $session_id = $_SESSION['id'];
-  if (isset($session_id) || !empty($session_id)) {
-    if ($session_id == $id) {
-      return True;
-    } else {
-      return False;
-    }
-  } else {
-    return False;
-  }
-}
-
-
-/*
-  Check if user is admin
-
-  Returns True if user is privilaged
-  Returns False if user is NOT privilaged
-*/
-function is_admin($id) {
-  if (isset($id) || !empty($id)) {
-    if ($id == 1) {
-      return True;
-    } else {
-      return False;
-    }
-  } else {
-    return False;
-  }
-}
-
-
-/*
-  Takes in max 3 min 2 inputs:
-
-  Header is displayed ontop of the flyout
-    Takes in text input
-
-  Description is displayed in the center of the flyout
-    Takes in text input
-
-  Action is displayed above the cancel button
-    Takes in any HTML input
-
-  Returns nothing but must include:
-  <script src='scripts/flyout.js'></script>
-  At the bottom of the HTML document
-*/
-function flyout($header, $content, $action) {
-  // Used for background dimming
-  echo "<div class='flyout-dim'></div>";
-  // Div Start
-  echo "<div class='flyout flex-down default-window between'>";
-
-  // Header for the flyout, must be included
-  if (isset($header) && !empty($header)) {
-    echo "<h2 class='space-bottom'>".$header."</h2>";
-  } else {
-    echo "<h2 class='space-bottom'>Header</h2>";
-  }
-
-  // Flyout content, must be included!!!!
-  if (isset($content) && !empty($content)) {
-    echo "<p class='space-bottom'>".$content."</p>";
-  } else {
-    echo "<h2 class='space-bottom'>Description</h2>";
-  }
-
-  // Flyout button, not required so must need more information when added
-  if (isset($action) && !empty($action)) {
-    echo $action;
-  }
-
-  // Exit button + Div End
-  echo "<button class='btn alert-default space-top flyout-close'>Close</button>
-  </div>";
-
-  // Must be included with flyout.php
-  echo "<script src='scripts/flyout.js'></script>";
-}
-
-
-/*
-  Notification of an action done, takes in min 3 inputs:
-
-  Text is the text that shows up on the notification
-    Takes in string input
-
-  Level is the level of the notification
-    high is a good response or the colour green
-    low is a bad response or the colour red
-    default is a neutral response or the colour black/gray
-
-  returns notification html including classes
-
-  ===== Programmers note ==============================
-   I made this so I didn't have to remake the html
-   portion of the notification, it was annoying.
-   This also allows for expanding the system later on!
-  =====================================================
-*/
-function notify($text, $level) {
-  if ($level == "high") {
-    $text_string = "<p class='alert alert-high space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
-  } elseif ($level == "low") {
-    $text_string = "<p class='alert alert-low space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
-  } elseif ($level == "default") {
-    $text_string = "<p class='alert alert-default space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
-  } else {
-    $text_string = "<p class='alert alert-default space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
-  }
-
-  return $text_string;
-}
-?>
--- a/ui/header.php
+++ b/ui/header.php
@ -1,30 +0,0 @@
-<?php
-// Check which directory icons are in
-if (is_dir("assets/icons/")) {
-  $dir = "assets/icons/";
-} else {
-  $dir = "../assets/icons/";
-}
-?>
-
-<nav class="nav-root flex-left between">
-  <div class="nav-name flex-left">
-    <h3>OnlyLegs</h3>
-  </div>
-  <div class="nav-links flex-left">
-    <?php
-    echo "<a class='btn alert-default' href='https://superdupersecteteuploadtest.fluffybean.gay'><img class='svg' src='".$dir."house.svg'><span class='nav-hide'>Home</span></a>";
-    echo "<hr>";
-    echo "<a class='btn alert-default flyout-display' href='https://superdupersecteteuploadtest.fluffybean.gay?srch=show'><img class='svg' src='".$dir."binoculars.svg'><span class='nav-hide'>Search</span></a>";
-    echo "<hr>";
-
-    if (loggedin()) {
-      echo "<a class='btn alert-default' href='https://superdupersecteteuploadtest.fluffybean.gay/upload.php'><img class='svg' src='".$dir."upload.svg'><span class='nav-hide'>Upload</span></a>";
-      echo "<hr>";
-      echo "<a class='btn alert-default' href='https://superdupersecteteuploadtest.fluffybean.gay/account/account.php'><img class='svg' src='".$dir."user-circle.svg'><span class='nav-hide'>".substr($_SESSION["username"], 0, 15)."</span></a>";
-    } else {
-      echo "<a class='btn alert-high' href='https://superdupersecteteuploadtest.fluffybean.gay/account/login.php'><img class='svg' src='".$dir."user-circle-plus.svg'><span class='nav-hide'>Login</span></a>";
-    }
-    ?>
-  </div>
-</nav>
--- a/ui/nav.php
+++ b/ui/nav.php
@ -0,0 +1,20 @@
+<nav class="nav-root flex-left">
+  <div class="nav-name flex-left">
+    <p>Lynx Gallery</p>
+  </div>
+  <div class="nav-links flex-left">
+    <a class='btn' href='<?php echo $root_dir; ?>index.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
+    <hr>
+    <a class='btn' href='<?php echo $root_dir; ?>search.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/binoculars.svg'><span class='nav-hide'>Search</span></a>
+    <hr>
+    <?php
+    if (loggedin()) {
+      echo "<a class='btn' href='".$root_dir."upload.php'><img class='svg' src='".$root_dir."assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>";
+      echo "<hr>";
+      echo "<a class='btn' href='".$root_dir."/account/account.php'><img class='svg' src='".$root_dir."assets/icons/user-circle.svg'><span class='nav-hide'>".substr($_SESSION["username"], 0, 15)."</span></a>";
+    } else {
+      echo "<a class='btn' href='".$root_dir."/account/login.php'><img class='svg' src='".$root_dir."assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>";
+    }
+    ?>
+  </div>
+</nav>
--- a/ui/required.php
+++ b/ui/required.php
@ -1,20 +1,95 @@
 <?php
-// Include required files and commands by every page on header
+/*
+  Start session
+
+  This is important as most pages use the PHP session and will complain if its not possible to access.
+*/
 session_start();

-if (is_dir("ui/")) {
-  include_once("ui/functions.php");
+
+/*
+  Check which directory user is in
+
+  I don't know if theres a better way of doing this? If there is please let me know
+*/
+if (is_file("index.php")) {
+  $root_dir = "";
 } else {
-  include_once("../ui/functions.php");
+  $root_dir = "../";
 }

-$conn = mysqli_connect("localhost", "uwu", "fennec621", "swag");
-if ($conn->connect_error) {
-  echo "<p class='alert alert-low'>Could not connect to database</p>";
-}
+
+/*
+  Connect to the server
+*/
+include $root_dir."app/server/conn.php";
+
+/*
+  Add functions
+*/
+include $root_dir."app/account/get_info.php";
+include $root_dir."app/account/is_admin.php";
+include $root_dir."app/account/login_status.php";
+
+include $root_dir."app/format/string_to_tags.php";
+
+include $root_dir."app/image/get_image_info.php";
+include $root_dir."app/image/image_privilage.php";
+
+include $root_dir."app/server/secrete.php";
 ?>
-<script
-  src="https://code.jquery.com/jquery-3.6.0.min.js"
-  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
-  crossorigin="anonymous">
+<script>
+  /*
+    This is a little secrete for the ones who care, nothing important
+  */
+  console.log(" . . /|/| . . . . . . . \n .. /0 0 \\ . . . . . .. \n (III% . \\________, . . \n .. .\\_, .%###%/ \\'\\,.. \n . . . .||#####| |'\\ \\. \n .. . . ||. . .|/. .\\V. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . cc/ . .cc/ . . .");
+
+  /*
+    Gets Querys from the URL the user is at
+    Used by Sniffle to display notificaions
+  */
+  const params = new Proxy(new URLSearchParams(window.location.search), {
+    get: (searchParams, prop) => searchParams.get(prop),
+  });
+</script>
+
+<!--
+  Used by Sniffle to add Notifications
+  Div can be displayed all time as it has no width or height initself
+-->
+<div id='sniffle' class='sniffle'></div>
+
+<!--
+  Div for information flyouts
+  Controlled by Flyout.js
+-->
+<div id='flyoutDim' class='flyout-dim'></div>
+<div id='flyoutRoot' class='flyout flex-down'>
+  <p id='flyoutHeader' class='flyout-header space-bottom'>Header</p>
+  <p id='flyoutDescription' class='flyout-description space-bottom'>Description</p>
+  <div id='flyoutActionbox' class='flyout-actionbox space-bottom-small'></div>
+  <button onclick='flyoutClose()' class='btn alert-default'>Close</button>
+</div>
+
+<!--
+  Back to top button
+  Used to quickly get back up to the top of the page,
+  At some point will be removed as the UI metures and
+  everything can always be accessed
+-->
+<a id="back-to-top" href="#">
+  <img src="<?php echo $root_dir; ?>assets/icons/caret-up.svg">
+</a>
+<script>
+  button = document.getElementById("back-to-top");
+
+  window.onscroll = function() {scrollFunction()};
+
+  function scrollFunction() {
+    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
+      button.style.right = "1rem";
+    } else {
+      button.style.right = "-2.5rem";
+    }
+  }
 </script>
--- a/ui/top.html
+++ b/ui/top.html
@ -1,4 +0,0 @@
-<a id="back-to-top" href="#">
-  <img src="assets/icons/caret-up.svg">
-</a>
-<script src="scripts/top.js"></script>
--- a/upload.php
+++ b/upload.php
@ -3,98 +3,102 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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">
+  <title>Lynx Gallery</title>
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/normalise.css">
+
+  <!-- Google Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
+
+  <!-- JQuery -->
+  <script
+    src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+    crossorigin="anonymous">
+  </script>
+
+  <!-- Sniffle script! -->
+  <script src="Sniffle/sniffle.js"></script>
+  <link rel='stylesheet' href='Sniffle/sniffle.css'>
+
+  <!-- Flyout script! -->
+  <script src="Flyout/flyout.js"></script>
+  <link rel='stylesheet' href='Flyout/flyout.css'>
+
+  <!-- Upload Script -->
+  <script>
+    $(document).ready(function() {
+      $("#uploadSubmit").submit(function(event) {
+        event.preventDefault();
+        // Check if image avalible
+        var file = $("#image").val();
+        if (file != "") {
+          // Make form
+          var formData = new FormData();
+
+          // Get image
+          var image_data = $("#image").prop("files")[0];
+          formData.append("image", image_data);
+          // Get ALT
+          var alt = $("#alt").val();
+          formData.append("alt", alt);
+          // Get ALT
+          var submit = $("#submit").val();
+          formData.append("submit", submit);
+
+          // Upload the information
+          $.ajax({
+            url: 'app/image/upload_image.php',
+            type: 'post',
+            data: formData,
+            contentType: false,
+            processData: false,
+            success: function(response){
+              $("#sniffle").html(response);
+            }
+          });
+
+          // Empty values
+          $("#image").val("");
+          $("#alt").val("");
+          $("#submit").val("");
+        } else {
+          sniffleAdd('Gwha!', 'Pls provide image', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/file-search.svg');
+        }
+      });
+    });
+  </script>
 </head>
 <body>
  <?php
  include "ui/required.php";
-  include("ui/header.php");
+  include "ui/nav.php";

  // Check if user is logged in
-  if (loggedin()) {
-    // User is logged in
-  } else {
-    $error = "You must be logged in to upload images";
-    header("Location: index.php");
-  }
-
-  // Setting up varibles
-  $dir = "images/";
-  $thumb_dir = $dir."thumbnails/";
-  $image_basename = basename($_FILES["image"]["name"]);
-  $image_path = $dir.$image_basename;
-  $file_type = pathinfo($image_path,PATHINFO_EXTENSION);
-
-  // Continue if no errors
-  if (isset($_POST['upload']) && !empty($_FILES["image"]["name"])) {
-    if (empty($error)) {
-      $allowed_types = array('jpg', 'jpeg', 'png', 'webp');
-      if (in_array($file_type, $allowed_types)) {
-        // Upload to server
-        if (move_uploaded_file($_FILES['image']['tmp_name'], $image_path)) {
-          // Make thumbnail
-          $image_thumbnail = new Imagick($image_path);
-          $image_thumbnail->resizeImage(300,null,null,1,null);
-          $image_thumbnail->writeImage($thumb_dir.$image_basename);
-
-          // Prepare sql for destruction and filtering the sus
-          $sql = "INSERT INTO swag_table (imagename, alt, author) VALUES (?, ?, ?)";
-
-          if ($stmt = mysqli_prepare($conn, $sql)) {
-            // Bind the smelly smelly
-            mysqli_stmt_bind_param($stmt, "sss", $param_image_name, $param_alt_text, $param_user_id);
-
-            // Setting up parameters
-            $param_image_name = $_FILES["image"]["name"];
-            $param_alt_text = $_POST['alt'];
-            $param_user_id = $_SESSION["id"];
-
-            // Attempt to execute the prepared statement
-            if (mysqli_stmt_execute($stmt)) {
-              $success = "Your Image uploaded successfully!";
-            } else {
-              $error = "Something went fuckywucky, please try later";
-            }
-          }
-        } else {
-          $error = "F, Upload failed";
-        }
-      } else {
-        $error = "File uploaded not supported, file types that are allowed include: JPG, JPEG, PNG and WEBP";
-      }
-    }
+  if (!loggedin()) {
+    echo "
+    <script>
+      sniffleAdd('Who are you!', 'You must be loggedin to upload things, sowwy!', 'var(--red)', '".$root_dir."assets/icons/cross.svg');
+    </script>
+    ";
  }
  ?>

-  <div class="alert-banner">
-    <?php
-    if (isset($error)) {
-      echo notify($error, "low");
-    }
-    if (isset($success)) {
-      echo notify($success, "high");
-    }
-    ?>
-    <script src='scripts/alert.js'></script>
-  </div>
-
-  <div class="upload-root default-window">
-    <h2 class="space-bottom">Upload image</h2>
+  <div class="upload-root">
+    <h2>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-high" type="submit" name="upload"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
+    <br>
+    <form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data">
+        <input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
+        <input id="alt" class="btn btn-neutral" type="text" placeholder="Description/Alt for image">
+        <br>
+        <button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
    </form>
  </div>

-  <?php
-  include("ui/top.html");
-  include("ui/footer.php");
-  ?>
+  <?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="156" cy="92" r="12"></circle><circle cx="100" cy="92" r="12"></circle><line x1="128" y1="128" x2="128" y2="224" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="244" y1="128" x2="12" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M208,144a80,80,0,0,1-160,0V112a80,80,0,0,1,160,0Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><line x1="231.9" y1="188" x2="203.2" y2="171.4" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="231.9" y1="68" x2="203.2" y2="84.6" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="24.1" y1="68" x2="52.8" y2="84.6" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="24.1" y1="188" x2="52.8" y2="171.4" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></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><polyline points="216 72 104 184 48 128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>`