General cleanup

assets/icons/download.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="M176,128h48a8,8,0,0,1,8,8v64a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V136a8,8,0,0,1,8-8H80" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><line x1="128" y1="24" x2="128" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="80 80 128 128 176 80" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><circle cx="188" cy="168" r="12"></circle></svg>

assets/icons/edit.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="M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><line x1="216" y1="216" x2="96" y2="216" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>

assets/icons/house.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="M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.5a8.3,8.3,0,0,1,2.6-5.9l80-72.7a8,8,0,0,1,10.8,0l80,72.7a8.3,8.3,0,0,1,2.6,5.9V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>

assets/icons/trash.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="216" y1="56" x2="40" y2="56" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="104" y1="104" x2="104" y2="168" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="152" y1="104" x2="152" y2="168" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>

assets/icons/upload.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="M176,128h48a8,8,0,0,1,8,8v64a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V136a8,8,0,0,1,8-8H80" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><line x1="128" y1="128" x2="128" y2="24" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="80 72 128 24 176 72" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><circle cx="188" cy="168" r="12"></circle></svg>

css/footer.css

@@ -16,5 +16,5 @@ footer {
 }
 
 .footer-child {
-  min-width: 300px;
+  min-width: 200px;
 }

css/image.css

@@ -5,10 +5,17 @@
   margin: 0 0 2rem; padding: 0;
 
   width: calc(100vw - var(--space-medium));
-  height: 60vh;
+  height: 69vh;
 
   position: relative;
 }
+
+@media (max-width: 600px) {
+  .image-container {
+    height: 40vh;
+  }
+}
+
 .image {
   max-width: 100%;
   width: auto;

css/master.css

@@ -48,6 +48,7 @@ body {
   min-height: calc(100vh - 2rem); max-width: 1500px;
 
   display: flex;
+
   flex-direction: column;
   justify-content: space-between;
 }
@@ -87,7 +88,7 @@ form * {
 .alert {
   margin: 0 auto; padding: 1rem;
 
-  width: inherit;
+  width: calc(100% - 2rem);
 
   text-align: center;
 
@@ -114,6 +115,9 @@ form * {
 
   font-size: 16px;
   align-items: center;
+  vertical-align: middle;
+
+  text-decoration: underline;
 
   border: none;
   border-radius: var(--rad);
@@ -123,7 +127,6 @@ form * {
 }
 a.btn {
   text-align: center;
-  text-decoration: none;
 }
 
 .space-bottom {
@@ -133,6 +136,15 @@ a.btn {
   margin-top: 1rem;
 }
 
+.svg {
+  margin: 0 0.2rem 0.1rem 0;
+  width: 18px; height: 18px;
+
+  vertical-align: middle;
+
+  display: inline;
+}
+
 /*
   -=-=-= TEXT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */

css/nav.css

@@ -21,5 +21,24 @@ nav h3 {
   margin: 0;
 }
 nav hr {
-  margin: 0.5rem 0.2rem; padding: 0;
+  margin: 0.5rem 0; padding: 0;
+
+  opacity: 0;
+}
+
+.nav-name h3, .nav-name {
+  display: block;
+}
+.nav-links {
+  width: auto;
+  justify-content: space-between;
+}
+@media (max-width: 450px) {
+  .nav-name h3, .nav-name {
+    display: none;
+  }
+  .nav-links {
+    width: 100%;
+    justify-content: space-around;
+  }
 }

edit.php

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>UwU</title>
+  <link rel="stylesheet" href="css/master.css">
+  <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
+</head>
+<body>
+  <?php
+  include("ui/header.php");
+  $id = $_GET["id"];
+  ?>
+
+  <div class="edit-root">
+    <h2>Modify Information</h2>
+    <p class="space-below">Make sure that the id of the image is correct!</p>
+    <form class="flex-down between" method="POST" action="edit.php" enctype="multipart/form-data">
+        <input class="btn alert-default space-bottom" type="text" name="alt" placeholder="Description/Alt for image">
+        <?php echo "<button class='btn alert-default' type='submit' name='update' value=".$id.">Update information</button>"; ?>
+    </form>
+    <?php
+    if ($_GET["r"] == "success") {
+      // Info updated
+      echo "<p class='alert alert-high space-top'>Information updated!</p>";
+    } elseif ($_GET["r"] == "fail") {
+      // Upload failed
+      echo "<p class='alert alert-low space-top'>Something fuckywucky</p>";
+    } elseif ($_GET["r"] == "noinfo") {
+      // No info was present
+      echo "<p class='alert alert-default space-top'>No description/alt, pls give</p>";
+    } else {
+      // echo "<p class='alert alert-default'>Please enter information</p>";
+    }
+    ?>
+  </div>
+
+  <?php include("ui/conn.php");
+
+  if (isset($_POST['update'])) {
+    if (empty($_POST['alt'])) {
+      header("Location:edit.php?r=noinfo");
+
+    } else {
+      $sql = "UPDATE swag_table SET alt='".$_POST['alt']."' WHERE id=".$_POST['update'];
+
+      if (mysqli_query($conn, $sql)) {
+        //header("Location:edit.php?r=success");
+        header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$_POST['update']."&update=success");
+      } else {
+        header("Location:edit.php?r=fail");
+      }
+    }
+  }
+  ?>
+
+
+  <?php include("ui/footer.php"); ?>
+</body>
+</html>

image.php

@@ -6,6 +6,8 @@
   <title>UwU</title>
   <link rel="stylesheet" href="css/master.css">
   <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
 </head>
 <body>
   <?php
@@ -18,21 +20,26 @@
   $image_results = mysqli_query($conn, $get_image);
   $image = mysqli_fetch_assoc($image_results);
 
+  // Image has been modified successfully
   if ($_GET["update"] == "success") {
-    echo "<p class='alert alert-high space-top'>Information updated</p>";
+    echo "<p class='alert alert-high space-bottom'>Information updated</p>";
   }
 
+  // Check if ID of image in URL
   if (!isset($_GET['id'])) {
-    echo "<p class='alert alert-low'>No ID present</p>";
+    // No ID
-
+    echo "<p class='alert alert-low space-bottom'>No ID present</p>";
+    // Replacement "no image" image and description
     $image_path = "assets/no_image.png";
     $image_alt = "No image could be found, sowwy";
   } elseif (empty($image['imagename'])) {
+    // proposed ID not avalible
     echo "<p class='alert alert-low'>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 {
+    // Image avalible
     $image_path = "images/".$image['imagename'];
     $image_alt = $image['alt'];
   }
@@ -70,6 +77,9 @@
     // Image resolution
     list($width, $height) = getimagesize($image_path);
     echo "<p>Image resolution: ".$width."x".$height."</p>";
+
+    // 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>";
     ?>
   </div>
 
@@ -79,7 +89,7 @@
     <?php
     // Image hover details
     echo "<form class='detail' method='POST' enctype='multipart/form-data'>";
-    echo "<button class='btn alert-low' type='submit' name='delete' value='".$image['id']."'>Delete image</button>";
+    echo "<button class='btn alert-low' type='submit' name='delete' value='".$image['id']."'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>";
     echo "</form>";
 
     // Check if query is set
@@ -101,7 +111,7 @@
     ?>
 
     <!-- EDIT BUTTON -->
-    <?php echo "<a class='btn alert-low space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/edit.php?id=".$image['id']."'>Modify image content</a>"; ?>
+    <?php echo "<a class='btn alert-low space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/edit.php?id=".$image['id']."'><img class='svg' src='assets/icons/edit.svg'>Modify image content</a>"; ?>
   </div>
 
   <?php include("ui/footer.php"); ?>

ui/header.php

@@ -2,9 +2,9 @@
   <div class="nav-name flex-left">
     <h3>Fluffys Gallery!</h3>
   </div>
-  <div class="nav-links flex-left between">
+  <div class="nav-links flex-left">
-    <p class="btn alert-default"><a href="https://superdupersecteteuploadtest.fluffybean.gay">Home</a></p>
+    <a class="btn alert-default" href="https://superdupersecteteuploadtest.fluffybean.gay"><img class="svg" src="assets/icons/house.svg">Home</a>
     <hr>
-    <p class="btn alert-default"><a href="https://superdupersecteteuploadtest.fluffybean.gay/upload.php">Upload</a></p>
+    <a class="btn alert-default" href="https://superdupersecteteuploadtest.fluffybean.gay/upload.php"><img class="svg" src="assets/icons/upload.svg">Upload</a>
   </div>
 </nav>

upload.php

@@ -6,6 +6,8 @@
   <title>UwU</title>
   <link rel="stylesheet" href="css/master.css">
   <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
 </head>
 <body>
   <?php include("ui/header.php"); ?>