testing displaying image tags

account/account.php

@@ -21,20 +21,23 @@
     if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
       echo "<p>O hi ".$_SESSION["username"].".</p>";
 
-      // Reset password
-      echo "<a class='btn alert-low space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/account/password-reset.php'><img class='svg' src='../assets/icons/password.svg'>Reset Password</a>";
-
-      // Logout
-      echo "<a class='btn alert-low space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/account/logout.php'><img class='svg' src='../assets/icons/sign-out.svg'>Logout</a>";
-
       // Join code
       if ($_SESSION["id"] == 1) {
-        echo "<h2 class='space-top-large'>Invite Code</h2>";
+        echo "<h3 class='space-top'>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'>".$token['code']."</p>";
+            echo "<p class='text-box space-top center alert-default'>".$token['code']."</p>";
         }
       }
+
+      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>";
     } 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>";

css/master.css

@@ -227,6 +227,19 @@ body {
   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 =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */
@@ -250,6 +263,14 @@ body {
   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;
@@ -283,7 +304,6 @@ body {
 
   text-decoration: none;
 
-  background-color: var(--black);
   border: none;
   border-radius: var(--rad);
 }

image.php

@@ -68,7 +68,7 @@
     <h2>Description</h2>
     <?php
     // Image Description/Alt
-    if (isset($image_alt)) {
+    if (isset($image_alt) && !empty($image_alt)) {
       echo "<p>".$image_alt."</p>";
     } else {
       echo "<p>No description provided</p>";
@@ -108,6 +108,27 @@
     ?>
   </div>
 
+  <div class="tags-root default-window">
+    <h2>Tags</h2>
+    <div class="tags flex-left around">
+      <?php
+      function clean($string) {
+        $string = str_replace('-', '_', $string);
+        $string = preg_replace('/[^A-Za-z0-9\_ ]/', '', $string);
+        return preg_replace('/ +/', ' ', $string);
+      }
+      $tags_string = "This is a test of ta.gs and their s//ystem_of_ignoring ran!!dom characters BUT THIS DOES$$$$$$.NT WORK YET!!!!";
+      $tags_string = strtolower($tags_string);
+      $tags_string = clean($tags_string);
+      $image_tags_array = explode(" ", $tags_string);
+
+      foreach ($image_tags_array as $tag) {
+        echo "<p class='tag alert-high'>".$tag."</p>";
+      }
+      ?>
+    </div>
+  </div>
+
   <?php
   // Check if user is admin or the owner of image, if yes, display the edit and delete div
   if (isset($_SESSION['id']) && $image['author'] == $_SESSION['id'] || $_SESSION['id'] == 1) {
@@ -144,7 +165,7 @@
     echo "</form>";
 
     // Edit image button
-    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>";
+    echo "<a class='btn alert-low space-top-small' href='https://superdupersecteteuploadtest.fluffybean.gay/edit.php?id=".$image['id']."'><img class='svg' src='assets/icons/edit.svg'>Modify image content</a>";
     echo "</div>";
   }
   ?>

ui/header.php

@@ -10,7 +10,7 @@ if (is_dir("assets/icons/")) {
 
 <nav class="nav-root flex-left between">
   <div class="nav-name flex-left">
-    <h3>Fluffys Amazing Gallery!</h3>
+    <h3>OnlyLegs</h3>
   </div>
   <div class="nav-links flex-left">
     <?php