Final UI change

assets/bg.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
+	<feTurbulence type="fractalNoise" baseFrequency="0.102" numOctaves="4" seed="15" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
+	<feSpecularLighting surfaceScale="15" specularConstant="1.2" specularExponent="20" lighting-color="#ff7700" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting">
+    		<feDistantLight azimuth="3" elevation="59"></feDistantLight>
+  	</feSpecularLighting>
+  
+</filter></defs><rect width="700" height="700" fill="#242621"></rect><rect width="700" height="700" fill="#ff7700" filter="url(#nnnoise-filter)"></rect></svg>

css/footer.css

@@ -0,0 +1,20 @@
+/*
+  -=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+footer {
+  margin: 0; padding: 0.5rem;
+
+  width: calc(100vh - 2rem));
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}
+
+.footer-child {
+  min-width: 300px;
+}

css/gallery.css

@@ -0,0 +1,45 @@
+/*
+  -=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+.info-text {
+  margin: 0 0 2rem;
+}
+
+.gallery-root {
+  margin: 0 0 2rem; padding: 0;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}
+
+.gallery-item {
+  margin: 0.5rem; padding: 0;
+
+  max-width: 300px; height: 200px;
+
+  background-color: var(--gray);
+  border-radius: var(--rad);
+
+  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);
+}
+
+.gallery-image {
+  margin: 0; padding: 0;
+
+  width: 100%; height: 100%;
+
+  object-fit: cover;
+
+  border-radius: var(--rad);
+}

css/image.css

@@ -0,0 +1,59 @@
+/*
+  -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+.image-container {
+  margin: 0 0 2rem; padding: 0;
+
+  width: calc(100vw - var(--space-medium));
+  height: 60vh;
+
+  position: relative;
+}
+.image {
+  max-width: 100%;
+  width: auto;
+  max-height: 100%;
+  height: auto;
+
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+
+  border-radius: var(--rad);
+}
+
+.image-description {
+  margin: 0 0 2rem; padding: 0.5rem;;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}
+
+.image-detail {
+  margin: 0 0 2rem; padding: 0.5rem;;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}
+
+.danger-zone {
+  margin: 0 0 2rem; padding: 0.5rem;;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--red);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}

css/master.css

@@ -1,33 +1,45 @@
+@import "nav.css";
+@import "footer.css";
+
+@import "gallery.css";
+@import "image.css";
+@import "upload.css";
+
 :root {
-  --red: #B66467dd;
+  --bg: #151515df;
-  --green: #8C977Ddd;
+  --bg-1: #242621;
+  --bg-2: #1D1E1C;
+
+  --fg:#E8E3E3;
+  --fg-dark: #151515;
+
+  --red: #B66467;
+  --green: #8C977D;
   --black: #151515;
-  --gray: #15151555;
-  --dark-gray: #151515cc;
   --white: #E8E3E3;
 
+  --shadow: 6px 6px 10px #15151588;
   --rad: 5px;
-
-  --space-xsmall: 0.25rem;
-  --space-small: 0.5rem;
-  --space-medium: 1rem;
-  --space-large: 2rem;
 }
 
 * {
-  font-family: "Rubik", sans-serif;
+  font-weight: 521;
-  font-weight: 621;
+  color: var(--fg);
 }
 html {
-  margin: 0;
+  margin: 0; padding: 0;
-  padding: 0;
+
+  height: 100vh; width: 100vw;
+
+  background-color: var(--bg-2);
 }
 body {
-  margin: 0;
+  margin: 0 auto; padding: 1rem;
-  padding: var(--space-small);
 
   min-height: calc(100vh - 1rem);
 
+  max-width: 1500px;
+
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -58,10 +70,9 @@ body {
 }
 
 .alert {
-  margin: var(--space-small) 0;
+  margin: 0; padding: 1rem;
-  padding: var(--space-medium);
 
-  width: calc(100% - (var(--space-large)));
+  width: inherit;
 
   display: inline-block;
 
@@ -74,11 +85,11 @@ body {
   background-color: var(--red);
 }
 .alert-default {
-  background-color: var(--gray);
+  background-color: var(--black);
 }
 
 .btn {
-  padding: var(--space-small);
+  margin: 0; padding: 0.5rem;
 
   border: none;
 
@@ -89,183 +100,44 @@ body {
   border-radius: var(--rad);
 }
 .btn:hover {
-  outline: var(--gray) 3px solid;
+  outline: var(--white) 3px solid;
 }
 
-.space-small {
+.space-bottom {
-  margin-left: var(--space-small);
+  margin-bottom: 1rem;
-
-  width: 0;
-  height: 0;
-
-  border: none;
 }
-
+.space-top {
-/*
+  margin-top: 1rem;
-  -=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-nav {
-  margin: 0;
-  padding: var(--space-small);
-
-  width: calc(100vw - (var(--space-medium) * 2));
-  height: 2.5rem;
-
-  align-items: center;
-
-  background-image: url(../assets/nav.svg);
-  background-position: top;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  border-radius: var(--rad);
-}
-/*
-  -=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-footer {
-  margin: 0;
-  padding: var(--space-small);
-
-  width: calc(100vw - (var(--space-medium) * 2));
-
-  background-image: url(../assets/footer.svg);
-  background-position: bottom;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  border-radius: var(--rad);
-}
-.footer-child {
-  min-width: 300px;
-}
-
-/*
-  -=-=-= UPLOAD =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.upload-root {
-  margin: var(--space-large) auto;
-  padding: var(--space-medium);
-
-  max-width: 621px;
-
-  background-color: var(--gray);
-  border-radius: var(--rad);
-}
-form {
-  width: 100%;
-}
-
-/*
-  -=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.info-text {
-  margin: var(--space-medium) auto;
-
-  max-width: 1500px;
-}
-
-.gallery-root {
-  margin: var(--space-medium) auto;
-  padding: 0;
-
-  max-width: 1500px;
-}
-.gallery-item {
-  margin: var(--space-xsmall); padding: 0;
-
-  max-width: 300px; height: 200px;
-
-  background-color: var(--gray);
-  border-radius: var(--rad);
-
-  flex: 1 0 170px;
-
-  transition: transform 0.15s cubic-bezier(.19,1,.22,1);
-}
-.gallery-image {
-  margin: 0; padding: 0;
-
-  width: 100%; height: 100%;
-
-  object-fit: cover;
-
-  border-radius: var(--rad);
-}
-
-.gallery-item:hover {
-  transform: scale(1.1) rotate(5deg);
-  box-shadow:0 0 5px var(--dark-gray);
-}
-
-/*
-  -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.image-container {
-  margin: var(--space-medium) auto;
-  padding: 0;
-
-  width: calc(100vw - var(--space-medium));
-  height: 60vh;
-
-  position: relative;
-}
-.image {
-  max-width: 100%;
-  width: auto;
-  max-height: 100%;
-  height: auto;
-
-  position: absolute;
-  top: 50%; left: 50%;
-  transform: translate(-50%, -50%);
-
-  border-radius: var(--rad);
-}
-
-.image-detail {
-  margin: var(--space-medium) 0;
-  padding: var(--space-medium);
-
-  background-color: var(--gray);
-
-  border-radius: var(--rad);
-}
-
-.danger-zone {
-  margin: var(--space-medium) 0;
-  padding: var(--space-medium);
-
-  background-color: var(--red);
-
-  border-radius: var(--rad);
 }
 
 /*
   -=-=-= TEXT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */
 h1 {
-  margin: 0 0 var(--space-small) 0;
+  margin: 0 0 0.5rem 0;
 
+  font-family: "Lexend Deca", sans-serif;
   font-size: 30px;
 }
 h2 {
-  margin: 0 0 var(--space-small) 0;
+  margin: 0 0 0.5rem 0;
 
+  font-family: "Lexend Deca", sans-serif;
   font-size: 27px;
 }
 h3 {
-  margin: 0 0 var(--space-small) 0;
+  margin: 0 0 0.5rem 0;
 
+  font-family: "Lexend Deca", sans-serif;
   font-size: 24px;
 }
 h4 {
-  margin: 0 0 var(--space-small) 0;
+  margin: 0 0 0.5rem 0;
 
+  font-family: "Lexend Deca", sans-serif;
   font-size: 21px;
 }
-
 p {
-  margin: 0 0 var(--space-small) 0;
+  margin: 0 0 0.5rem 0;
-
+  font-family: "Fira Code", monospace;
 }

css/nav.css

@@ -0,0 +1,18 @@
+/*
+  -=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+nav {
+  margin: 0 0 2rem; padding: 0.5rem;
+
+  width: calc(100vh - 2rem)); height: 2.5rem;
+
+  align-items: center;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}

css/sussy.css

@@ -1,119 +0,0 @@
-:root {
-  --red: #B66467;
-  --green: #8C977D;
-  --black: #151515;
-  --gray: #15151555;
-  --dark-gray: #151515cc;
-  --white: #E8E3E3;
-
-  --rad: 5px;
-}
-
-* {
-  font-family: "Rubik", sans-serif;
-  font-weight: 621;
-  font-size: 15px;
-}
-
-html {
-  margin: 0; padding: 0;
-}
-body {
-  margin: 0 auto; padding: 1rem;
-  max-width: 1000px;
-  background-color: #15151522;
-}
-h1 {
-  font-size: 40px;
-}
-
-form {
-  margin: 1rem auto; padding: 0;
-  /*max-width: 621px;*/
-  display: flex;
-  justify-content: space-between;
-}
-
-.item {
-  margin: 0.25rem 0; padding: 0;
-  height: 300px; width: calc(33.33% - 0.5rem);
-
-  display: block;
-  position: relative;
-
-  border-radius: var(--rad);
-
-  background-color: var(--gray);
-
-  overflow: hidden;
-}
-img {
-  width: 100%; height: 100%;
-  object-fit: contain;
-  position: absolute;
-  background-size: cover;
-}
-.delete_button {
-  height: 3rem; width: calc(100% - 1rem);
-  padding: 0;
-  position: absolute;
-  bottom: -3rem; left: 0.5rem;
-  border-radius: var(--rad);
-  transition: bottom 0.2s cubic-bezier(0,.76,0,1);
-}
-.identity {
-  width: calc(100% - 1rem);
-  padding: 0.7rem 0;
-  text-align: center;
-  position: absolute;
-  top: -3.6rem; left: 50%;
-  transform: translate(-50%, 0%);
-  color: #fff;
-  border-radius: var(--rad);
-  transition: top 0.2s cubic-bezier(0,.76,0,1);
-}
-
-.item:hover .delete_button {
-  bottom: 0.5rem;
-  background-color: var(--red);
-}
-.item:hover .identity {
-  top: -0.5rem;
-}
-
-.gallery {
-  margin: 0; padding: 0;
-  display: flex; flex-direction: row;
-  flex-wrap: wrap; justify-content: space-between;
-}
-
-.alert {
-  margin: 1rem 0; padding: 0.7rem;
-  text-align: center;
-  border-radius: var(--rad);
-}
-
-
-.btn {
-  padding: 0.7rem;
-  background-color: var(--gray);
-  border: none;
-  border-radius: var(--rad);
-}
-.btn:hover {
-  color: #fff;
-  background-color: var(--dark-gray);
-}
-.b-colour {
-  color: #fff;
-}
-
-.fail {
-  background-color: var(--red);
-}
-.success {
-  background-color: var(--green);
-}
-.default {
-  background-color: var(--gray);
-}

css/upload.css

@@ -0,0 +1,20 @@
+/*
+  -=-=-= UPLOAD =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+.upload-root {
+  margin: 0 auto 2rem; padding: 0.5rem;;
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+
+  max-width: 621px;
+}
+
+form {
+  width: 100%;
+}

image.php

@@ -43,12 +43,19 @@
     ?>
   </div>
 
+  <div class="image-description">
+    <h2>Description</h2>
+    <?php
+    echo "<p>".$image_alt."</p>";
+    ?>
+  </div>
+
   <div class="image-detail flex-down">
+    <h2>Details</h2>
     <?php
     echo "<p>ID: ".$image['id']."</p>";
     echo "<p>File Name: ".$image['imagename']."</p>";
     echo "<p>Upload Date: ".$image['upload']."</p>";
-    echo "<p>Description: ".$image_alt."</p>";
     ?>
   </div>
 

index.php

@@ -6,13 +6,15 @@
   <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'); ?>
 
   <?php
   if ($_GET["del"] == "true") {
-    echo "<p class='alert alert-high'>Successfully deleted image: ".$_GET['id']."</p>";
+    echo "<p class='alert alert-high space-bottom'>Successfully deleted image: ".$_GET['id']."</p>";
   }
   ?>
 

ui/header.php

@@ -3,8 +3,8 @@
     <h3>Fluffys Gallery!</h3>
   </div>
   <div class="nav-links flex-left between">
-    <p class="btn"><a href="https://superdupersecteteuploadtest.fluffybean.gay">Home</a></p>
+    <p class="btn alert-default"><a href="https://superdupersecteteuploadtest.fluffybean.gay">Home</a></p>
-    <hr class="space-small">
+    <hr>
-    <p class="btn"><a href="https://superdupersecteteuploadtest.fluffybean.gay/upload.php">Upload</a></p>
+    <p class="btn alert-default"><a href="https://superdupersecteteuploadtest.fluffybean.gay/upload.php">Upload</a></p>
   </div>
 </nav>

upload.php

@@ -13,19 +13,18 @@
   <div class="upload-root">
     <form class="flex-down between" method="POST" action="upload.php" enctype="multipart/form-data">
         <input class="btn alert-default" type="file" name="image" placeholder="select image UwU">
-        <hr class="space-small">
+        <span class="space-bottom"></span>
-        <input class="btn" type="text" name="alt" placeholder="Description/Alt for image">
+        <input class="btn alert-default" type="text" name="alt" placeholder="Description/Alt for image">
-        <hr class="space-small">
+        <span class="space-bottom"></span>
         <button class="btn alert-default" type="submit" name="upload">Upload Image</button>
-        <hr class="space-small">
     </form>
     <?php
     if ($_GET["r"] == "success") {
-      echo "<p class='alert alert-high'>Your Image uploaded successfully!</p>";
+      echo "<p class='alert alert-high space-top'>Your Image uploaded successfully!</p>";
     }elseif ($_GET["r"] == "fail") {
-      echo "<p class='alert alert-low'>F, Upload failed</p>";
+      echo "<p class='alert alert-low space-top'>F, Upload failed</p>";
     }elseif ($_GET["r"] == "nofile") {
-      echo "<p class='alert alert-default'>No file lol</p>";
+      echo "<p class='alert alert-default space-top'>No file lol</p>";
     }else{
       // echo "<p class='alert alert-default'>Select an image to upload</p>";
     }