General cleanup... again

Flyout/flyout.css

@@ -49,6 +49,9 @@
   margin: 0 0 0.5rem 0;
   max-height: 8rem;
   overflow-y: auto;
+
+  font-family: 'Secular One',
+  sans-serif;
 }
 
 .flyout-actionbox {

app/image/upload_image.php

@@ -32,11 +32,11 @@ if (isset($_POST['submit'])) {
           $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>
-          ";
+          <?php
         }
 
         // Prepare sql for destruction and filtering the sus
@@ -53,38 +53,38 @@ if (isset($_POST['submit'])) {
 
           // 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>
-            ";
+            <?php
           } else {
-            echo "
+            ?>
             <script>
               sniffleAdd(':c', 'Something went fuckywucky, please try later', 'var(--red)', '".$root_dir."assets/icons/cross.svg');
             </script>
-            ";
+            <?php
           }
         }
       } 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>
-        ";
+        <?php
       }
     } 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>
-      ";
+      <?php
     }
   } 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>
-    ";
+    <?php
   }
 }

assets/icons/warning_red.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#b66467" 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="#b66467" 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="#b66467" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="128" cy="180" r="12"></circle></svg>

css/main.css

@@ -221,6 +221,38 @@ nav .btn {
   filter: blur(10px);
 }
 
+.nsfw-warning {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  font-family: "Secular One", sans-serif;
+}
+.nsfw-warning span {
+  color: #B66467;
+  text-align: center;
+  text-shadow: 0 0 2px #151515;
+}
+.nsfw-warning img {
+  margin: 0.25rem;
+  width: 2rem;
+  height: 2rem;
+}
+
+@media (max-width: 500px) {
+  .nsfw-warning span {
+    display: none;
+  }
+}
 /*
  |-------------------------------------------------------------
  | IMAGE

css/scss/_body.scss

@@ -98,6 +98,46 @@
 .nsfw-blur {
     filter: blur(10px);
 }
+.nsfw-warning {
+    width: 100%;
+    height: 100%;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    
+    position: absolute;
+    z-index: 5;
+
+    display: flex; flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    text-decoration: none;
+    font-family: $font-body;
+
+    span {
+        color: $red;
+
+        text-align: center;
+        text-shadow: 0 0 2px $black;
+    }
+    img {
+        margin: 0.25rem;
+
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+@media (max-width: 500px) {
+    .nsfw-warning {
+        span {
+            display: none;
+        }
+    }
+}
 /*
  |-------------------------------------------------------------
  | IMAGE

index.php

@@ -109,12 +109,15 @@ include "ui/nav.php";
 		// Check for NSFW tag
 		if (str_contains($image['tags'], "nsfw")) {
 			$image_nsfw = "nsfw-blur";
+			$nsfw_warning = "<a href='image.php?id=".$image['id']."' class='nsfw-warning'><img class='svg' src='assets/icons/warning_red.svg'><span>This image contains NSFW material</span></a>";
 		} else {
 			$image_nsfw = "";
+			$nsfw_warning = "";
 		}
 
 		// Image loading
 		echo "<div class='gallery-item'>";
+		echo $nsfw_warning;
 		echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image ".$image_nsfw."' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
 		echo "</div>";
 	}