diff --git a/Flyout/flyout.css b/Flyout/flyout.css index 3d240c2..d1eb7f8 100644 --- a/Flyout/flyout.css +++ b/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 { diff --git a/app/image/upload_image.php b/app/image/upload_image.php index ce68bc1..c0a2551 100644 --- a/app/image/upload_image.php +++ b/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 } } diff --git a/assets/icons/warning_red.svg b/assets/icons/warning_red.svg new file mode 100644 index 0000000..a957d89 --- /dev/null +++ b/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> \ No newline at end of file diff --git a/css/main.css b/css/main.css index 50f7d00..abee157 100644 --- a/css/main.css +++ b/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 diff --git a/css/scss/_body.scss b/css/scss/_body.scss index 8b3bd3a..ee98b2e 100644 --- a/css/scss/_body.scss +++ b/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 diff --git a/index.php b/index.php index 30b407d..a12aea2 100644 --- a/index.php +++ b/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>"; }