From a6b9ab0e5a04daf50de104d7a56413b86a71663b Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Thu, 10 Nov 2022 11:27:40 +0000
Subject: [PATCH] Removed fullscreen close button Fixed button colours Added
 primary/good options for some assets

---
 account.php                    |  24 +++++---
 app/sanity/check/_database.php |  16 +++--
 css/main.css                   | 108 +++++++++++++++++++++------------
 css/main.scss                  |  29 ++++++---
 css/scss/_body.scss            | 108 +++++++++++++++------------------
 css/scss/_navigation.scss      |   7 +--
 css/scss/_variables.scss       |   4 +-
 group.php                      |   2 +-
 image.php                      |  14 +++--
 upload.php                     |  21 ++++++-
 10 files changed, 195 insertions(+), 138 deletions(-)

diff --git a/account.php b/account.php
index af3d3b0..ea592e8 100644
--- a/account.php
+++ b/account.php
@@ -80,7 +80,7 @@
 				<h3>Profile Picture</h3>
 				<form id="pfpForm" method="POST" enctype="multipart/form-data">
 					<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
-					<button id="pfpSubmit" class="btn btn-good btn-icon" type="submit"><img class="svg" src="assets/icons/upload.svg"></button>
+					<button id="pfpSubmit" class="btn btn-primary btn-icon" type="submit"><img class="svg" src="assets/icons/upload.svg"></button>
 				</form>
 				<script>
 					$("#pfpForm").submit(function(event) {
@@ -193,9 +193,7 @@
 					$sql_start = microtime(true);
 				?>
 					<div class="sanity-check defaultDecoration defaultSpacing defaultFonts">
-						<h2>Website</h2>
-
-						<h3>Invite Codes</h3>
+						<h2>Invite Codes</h2>
 						<div style="display: flex; flex-direction: column; gap: 0.5rem;" id="tokenList">
 							<?php
 							$token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0");
@@ -204,7 +202,7 @@
 									?>
 										<div style="display: flex; flex-direction: row; gap: 0.5rem;">
 											<button onclick='copyCode(this)' class='btn btn-neutral btn-code'><?php echo $token['code']; ?></button>
-											<button onclick='regenerateCode("<?php echo $token["code"]; ?>", this)' class='btn btn-good btn-icon'><img src="assets/icons/arrow-clockwise.svg"></button>
+											<button onclick='regenerateCode("<?php echo $token["code"]; ?>", this)' class='btn btn-primary btn-icon'><img src="assets/icons/arrow-clockwise.svg"></button>
 											<button onclick='deleteCode(<?php echo $token["id"]; ?>)' class='btn btn-bad btn-icon'><img src="assets/icons/cross.svg"></button>
 										</div>
 									<?php
@@ -216,7 +214,7 @@
 							}						
 							?>
 						</div>
-						<button onclick='generateCode()' class='btn btn-good'>Generate code</button>
+						<button onclick='generateCode()' class='btn btn-primary'>Generate code</button>
 						<script>
 							function refreshList() {
 								$("#tokenList").load("app/account/token.php", {
@@ -305,8 +303,11 @@
 								});
 							}
 						</script>
+					</div>
 
-						<br><h3>Admin</h3>
+					<div class="sanity-check defaultDecoration defaultSpacing defaultFonts">
+						<h2>Admin</h2>
+						<p>Check gallery activity, login attemps, auto timeouts and more!</p>
 						<div class="tabs">
 							<button class="btn btn-neutral tablinks" onclick="openTab(event, 'logs')">Logs</button>
 							<button class="btn btn-neutral tablinks" onclick="openTab(event, 'bans')">Bans</button>
@@ -530,11 +531,16 @@
 								evt.currentTarget.className += " active-tab";
 							}
 						</script>
+					</div>
+
+					<div class="sanity-check warningDecoration defaultSpacing defaultFonts">
+						<h2>Sanity check</h2>
+						<p>You can check the stability of your gallery here, this is still being tested to running 
+							autofix is only reccomended for people who like to live on the edge.</p>
 
-						<br><h3>Sanity check</h3>
 						<div id='sanityCheck'></div>
 						
-						<button class='btn btn-good' onclick='sanityCheck(this)'>Run check</button>
+						<button class='btn btn-bad' onclick='sanityCheck(this)'>Run check</button>
 						<script>
 							function sanityCheck(thisButton) {
 								thisButton.innerHTML = "<img src='assets/icons/circle-notch.svg' class='svg loading'> Running...";
diff --git a/app/sanity/check/_database.php b/app/sanity/check/_database.php
index 33847ca..b250501 100644
--- a/app/sanity/check/_database.php
+++ b/app/sanity/check/_database.php
@@ -85,24 +85,28 @@ if (defined('ROOT') && $_SESSION['id'] == 1) {
         return $results;
     }
 
-    $table_list = array('images', 'users', 'groups', 'tokens', 'logs', 'bans');
+    $table_list = array('images', 'users', 'groups', 'tokens', 'logs', 'bans', 'test');
 
     foreach ($table_list as $table) {
-        $error_count = 0;
+        $error_type = array();
         $get_table = check_table($conn, $table);
 
         if ($get_table != false) {
             foreach ($table_templates[$table] as $key => $value) {
                 if (!empty(array_diff($get_table[$key], $value))) {
-                    $error_count += 1;
+                    $error_type[] = $table;
+                    foreach (array_diff($get_table[$key], $value) as $value) {
+                        $error_type[$table][] = $value;
+                    }
                 }
             }
 
-            if ($error_count > 0) {
+            if (!empty($error_type)) {
                 $results[] = array(
                     'type'=>'warning', 
-                    'message'=> 'Table '.$table.' is not setup correctly, '.$error_count.' errors found', 
-                    'fix'=>'auto'
+                    'message'=> 'Table "'.$table.'" is not setup correctly, the errors you see below may seem crypic, 
+                    and thats normal because of the shit way I made this:<br><br>'.implode(", ",$error_type[$table]),
+                    'fix'=>'manual'
                 );
             }
             
diff --git a/css/main.css b/css/main.css
index d4dec90..01578fd 100644
--- a/css/main.css
+++ b/css/main.css
@@ -27,7 +27,7 @@
   --alert: #d8a657;
   --success: #8c977d;
   --neutral: #121212;
-  --shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+  --shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
   --rad: 0.4rem;
   --border: #8c977d 0.2rem solid;
 }
@@ -42,7 +42,7 @@ nav {
   color: #e8e3e3;
   border-radius: 0.4rem;
   border: #8c977d 0.2rem solid;
-  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+  box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -122,17 +122,15 @@ nav .btn {
 @media (max-width: 550px) {
   nav {
     margin: 0;
-    padding-bottom: 1rem;
+    padding-bottom: 2rem;
     position: fixed;
     top: auto;
-    bottom: 0;
+    bottom: -1rem;
     left: 0;
     right: 0;
     border: none;
     border-top: #8c977d 0.2rem solid;
     border-radius: 0;
-    -webkit-backdrop-filter: blur(16px);
-            backdrop-filter: blur(16px);
   }
   nav .svg {
     margin: 0;
@@ -178,7 +176,7 @@ nav .btn {
   color: #e8e3e3;
   border-radius: 0.4rem;
   border: #8c977d 0.2rem solid;
-  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+  box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
 }
 
 .warningDecoration {
@@ -186,7 +184,7 @@ nav .btn {
   color: #e8e3e3;
   border-radius: 0.4rem;
   border: #b66467 0.2rem solid;
-  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+  box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
 }
 
 .defaultFonts h1,
@@ -244,7 +242,7 @@ nav .btn {
 }
 .gallery-item:hover {
   transform: scale(1.15) rotate(5deg);
-  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+  box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
   z-index: 9;
 }
 .gallery-item:active {
@@ -328,8 +326,8 @@ nav .btn {
  |-------------------------------------------------------------
 */
 .fullscreen-image {
-  width: 100vw;
-  height: 100vh;
+  width: 110vw;
+  height: 110vh;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -343,39 +341,16 @@ nav .btn {
   opacity: 0;
 }
 .fullscreen-image img {
-  max-width: 95%;
-  max-height: 95%;
+  max-width: calc(95% - 10rem);
+  max-height: calc(95% - 10rem);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   border-radius: 0.4rem;
+  box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
   z-index: 1;
 }
-.fullscreen-image button {
-  padding: 0.25rem;
-  width: 2rem;
-  height: 2rem;
-  position: absolute;
-  top: 1.25rem;
-  right: 1.25rem;
-  display: block;
-  box-sizing: border-box;
-  border: none;
-  border-radius: 3px;
-  transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
-  background-color: #121212;
-  z-index: 2;
-}
-.fullscreen-image button img {
-  width: 1.5rem;
-  display: block;
-}
-.fullscreen-image button:hover {
-  outline: #e8e3e3 0.2rem solid;
-  color: #e8e3e3;
-  cursor: pointer;
-}
 
 .image-container {
   margin: 1rem 0 2rem 0;
@@ -717,12 +692,47 @@ nav .btn {
 .upload-root > img {
   margin: 0 auto;
   max-width: 100%;
-  max-height: 15rem;
+  height: 15rem;
+  border-radius: 3px;
+  display: none;
+  flex-direction: column;
+}
+.upload-root > #imagePreviewBlock {
+  margin: 0 auto;
+  max-width: 100%;
+  height: 15rem;
+  -webkit-animation: uploadGradient 10s ease infinite;
+          animation: uploadGradient 10s ease infinite;
+  background: linear-gradient(-45rad, #000000, #EE7752, #E73C7E, #23A6D5, #23D5AB);
+  background-size: 200% 200%;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
 }
 
+@-webkit-keyframes uploadGradient {
+  0% {
+    background-position: 10% 0%;
+  }
+  50% {
+    background-position: 91% 100%;
+  }
+  100% {
+    background-position: 10% 0%;
+  }
+}
+
+@keyframes uploadGradient {
+  0% {
+    background-position: 10% 0%;
+  }
+  50% {
+    background-position: 91% 100%;
+  }
+  100% {
+    background-position: 10% 0%;
+  }
+}
 /*
  |-------------------------------------------------------------
  | ACCOUNT
@@ -1142,6 +1152,11 @@ a.btn {
   background-image: linear-gradient(to top, #7f8b6f, #8c977d);
 }
 
+.btn-primary {
+  background-color: #8c977d;
+  background-image: linear-gradient(to top, #7f8b6f, #8c977d);
+}
+
 .btn-neutral {
   background-color: #121212;
   background-image: linear-gradient(to top, #111111, #121212);
@@ -1167,6 +1182,11 @@ a.btn {
   border-radius: 3px;
 }
 
+.alert-good {
+  border-color: #8c977d;
+  background-image: linear-gradient(120deg, rgba(140, 151, 125, 0.3), rgba(21, 21, 21, 0));
+}
+
 .alert-bad {
   border-color: #b66467;
   background-image: linear-gradient(120deg, rgba(182, 100, 103, 0.3), rgba(21, 21, 21, 0));
@@ -1221,6 +1241,13 @@ a.btn {
 .badge.badge-primary.link:hover {
   color: #8c977d;
 }
+.badge.badge-good {
+  background: rgba(140, 151, 125, 0.3);
+  border: #8c977d 0.2rem solid;
+}
+.badge.badge-good.link:hover {
+  color: #8c977d;
+}
 .badge.badge-critical {
   background: rgba(182, 100, 103, 0.3);
   border: #b66467 0.2rem solid;
@@ -1306,7 +1333,8 @@ br {
 */
 a.link {
   display: inline;
-  text-decoration: underline;
+  -webkit-text-decoration: underline 0.2rem solid #8c977d;
+          text-decoration: underline 0.2rem solid #8c977d;
 }
 a.link:hover {
   color: #8c977d;
@@ -1330,7 +1358,7 @@ a.link:hover {
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
   border-radius: 3px;
-  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+  box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
   transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
 }
 #back-to-top:hover {
diff --git a/css/main.scss b/css/main.scss
index 2c58261..4dc346f 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -182,6 +182,15 @@ a.btn {
 }
 
 .btn-good {
+  background-color: $success;
+  background-image: linear-gradient(
+    to top,
+    darken($success, 5%),
+    $success
+  );
+}
+
+.btn-primary {
   background-color: $page-accent;
   background-image: linear-gradient(
     to top,
@@ -225,6 +234,12 @@ a.btn {
   }
 }
 
+.alert-good {
+  border-color: $page-accent;
+  background-image: linear-gradient(120deg, rgba($page-accent, 0.3),rgba($bg, 0)
+  );
+}
+
 .alert-bad {
   border-color: $warning;
   background-image: linear-gradient(120deg, rgba($warning, 0.3), rgba($bg, 0));
@@ -236,12 +251,8 @@ a.btn {
 }
 
 .alert-good {
-  border-color: $page-accent;
-  background-image: linear-gradient(
-    120deg,
-    rgba($page-accent, 0.3),
-    rgba($bg, 0)
-  );
+  border-color: $success;
+  background-image: linear-gradient(120deg, rgba($success, 0.3), rgba($bg, 0));
 }
 
 .alert-box {
@@ -300,6 +311,10 @@ a.btn {
     @include badge($page-accent);
   }
 
+  &.badge-good {
+    @include badge($success);
+  }
+
   &.badge-critical {
     @include badge($red);
   }
@@ -381,7 +396,7 @@ br {
 */
 a.link {
   display: inline;
-  text-decoration: underline;
+  text-decoration: underline $border-thickness solid $page-accent;
 
   &:hover {
     color: $page-accent;
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index 49b62d4..5b6c3a2 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -176,8 +176,8 @@
  |-------------------------------------------------------------
 */
 .fullscreen-image {
-  width: 100vw;
-  height: 100vh;
+  width: 110vw;
+  height: 110vh;
 
   position: fixed;
   top: 50%;
@@ -194,60 +194,22 @@
 
   display: none; // Automatically hidden, revealed on fullscreen
   opacity: 0; // expose
-
+  
   img {
-    max-width: 95%;
-    max-height: 95%;
-
+    max-width: calc(95% - 10rem);
+    max-height: calc(95% - 10rem);
+    
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
-
+    
     border-radius: $rad;
+    
+    box-shadow: $shadow;
 
     z-index: +1;
   }
-
-  button {
-    padding: 0.25rem;
-
-    width: 2rem;
-    height: 2rem;
-
-    position: absolute;
-    top: 1.25rem;
-    right: 1.25rem;
-
-    display: block;
-    box-sizing: border-box;
-
-    border: none;
-    @if calc($rad - 0.5rem) > 0 {
-      border-radius: calc($rad - 0.5rem);
-    } @else {
-      border-radius: 3px;
-    }
-
-    transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
-
-    background-color: $black;
-
-    z-index: +2;
-
-    img {
-      width: 1.5rem;
-
-      display: block;
-    }
-
-    &:hover {
-      outline: $white 0.2rem solid;
-      color: $fg;
-
-      cursor: pointer;
-    }
-  }
 }
 
 .image-container {
@@ -700,20 +662,48 @@
  | UPLOAD
  |-------------------------------------------------------------
 */
-.upload-root > img {
-  margin: 0 auto;
-
-  max-width: 100%;
-  max-height: 15rem;
-
-  @if calc($rad - 0.5rem) > 0 {
-    border-radius: calc($rad - 0.5rem);
-  } @else {
-    border-radius: 3px;
+.upload-root {
+  > img {
+    margin: 0 auto;
+  
+    max-width: 100%;
+    height: 15rem;
+  
+    @if calc($rad - 0.5rem) > 0 {
+      border-radius: calc($rad - 0.5rem);
+    } @else {
+      border-radius: 3px;
+    }
+  
+    display: none;
+    flex-direction: column;
   }
 
-  display: flex;
-  flex-direction: column;
+  > #imagePreviewBlock {
+    margin: 0 auto;
+  
+    max-width: 100%;
+    height: 15rem;
+
+    animation: uploadGradient 10s ease infinite;
+    background: linear-gradient(-45rad, #000000, #EE7752, #E73C7E, #23A6D5, #23D5AB);
+    background-size: 200% 200%;
+  
+    @if calc($rad - 0.5rem) > 0 {
+      border-radius: calc($rad - 0.5rem);
+    } @else {
+      border-radius: 3px;
+    }
+  
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@keyframes uploadGradient {
+  0%{background-position:10% 0%}
+  50%{background-position:91% 100%}
+  100%{background-position:10% 0%}
 }
 
 /*
diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss
index 19fa4e4..389809b 100644
--- a/css/scss/_navigation.scss
+++ b/css/scss/_navigation.scss
@@ -101,11 +101,11 @@ nav {
 @media (max-width: 550px) {
   nav {
     margin: 0;
-    padding-bottom: 1rem;
+    padding-bottom: 2rem;
 
     position: fixed;
     top: auto;
-    bottom: 0;
+    bottom: -1rem;
     left: 0;
     right: 0;
 
@@ -113,11 +113,8 @@ nav {
     border-top: $border;
     border-radius: 0;
 
-    backdrop-filter: blur(16px);
-
     .svg {
       margin: 0;
-
       display: block;
     }
   }
diff --git a/css/scss/_variables.scss b/css/scss/_variables.scss
index 60437c0..4bed185 100644
--- a/css/scss/_variables.scss
+++ b/css/scss/_variables.scss
@@ -14,13 +14,13 @@ $purple: #a988b0;
 $black: #121212;
 $white: #e8e3e3;
 
-$page-accent: #8c977d;
+$page-accent: $green;
 $warning: $red;
 $alert: $orange;
 $success: $green;
 $neutral: $black;
 
-$shadow: 6px 6px 2px #15151566;
+$shadow: 6px 6px 10px #15151566;
 $rad: 0.4rem;
 $border-thickness: 0.2rem;
 
diff --git a/group.php b/group.php
index cd1f140..a8f6ee3 100644
--- a/group.php
+++ b/group.php
@@ -161,7 +161,7 @@
                 }
 
                 ?>
-                    <button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy link</button>
+                    <button class='btn btn-primary' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy link</button>
                     <script>
                         function copyLink() {
                             navigator.clipboard.writeText(window.location.href);
diff --git a/image.php b/image.php
index b1c9a60..17f1093 100644
--- a/image.php
+++ b/image.php
@@ -58,10 +58,7 @@
 			unset($_SESSION['msg']);
 		}
 
-		echo "<div class='fullscreen-image'>
-			<button onclick='closeFullScreen()'><img src='assets/icons/cross.svg'></button>
-			<img>
-			</div>";
+		echo "<div class='fullscreen-image'><img></div>";
 		
 		if (is_file("usr/images/previews/".$image['imagename'])) {
 			echo "<div class='image-container'>
@@ -78,6 +75,11 @@
 
 		?>
 		<script>
+			$('.fullscreen-image').click(function(e) {
+				//if (e.target !== this) return;
+				closeFullScreen();
+			});
+
 			function fullScreen() {
 				document.querySelector(".preview-button").style.display = "none";
 				document.querySelector("html").style.overflow = "hidden";
@@ -171,7 +173,7 @@
 				</div>
 			</div>
 			<!-- Download Image -->
-			<a id='download' class='btn btn-good' href='<?php echo "usr/images/".$image['imagename']; ?>' download='<?php echo $image['imagename']; ?>'><img class='svg' src='assets/icons/download.svg'>Download image</a>
+			<a id='download' class='btn btn-primary' href='<?php echo "usr/images/".$image['imagename']; ?>' download='<?php echo $image['imagename']; ?>'><img class='svg' src='assets/icons/download.svg'>Download image</a>
 			<script>
 				$("#download").click(function() {
 					sniffleAdd("Info", "Image download started!", "var(--success)", "assets/icons/download.svg");
@@ -179,7 +181,7 @@
 			</script>
 
 			<!-- Copy link -->
-			<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>
+			<button class='btn btn-primary' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>
 			<script>
 				function copyLink() {
 					navigator.clipboard.writeText(window.location.href);
diff --git a/upload.php b/upload.php
index 15db80c..f5cd539 100644
--- a/upload.php
+++ b/upload.php
@@ -25,6 +25,7 @@
 		<h2>Upload image</h2>
 		<p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
 		<img id="imagePreview" src="">
+        <span id="imagePreviewBlock"></span>
 		<br>
 		<form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data">
 			<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
@@ -32,14 +33,19 @@
             <input id="alt" class="btn btn-neutral" placeholder="Description/Alt for image" type='text'>
             <input id="tags" class="btn btn-neutral" placeholder="Tags, seperated by spaces" type='text'>
 			<br>
-			<button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
+			<button id="submit" class="btn btn-primary" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
 		</form>
 		<script>
 			image.onchange = evt => {
 				const [file] = image.files
-				if (file) {
+				if (file && file.src !== "") {
 					imagePreview.src = URL.createObjectURL(file);
-				}
+                    imagePreview.style.display = "flex";
+                    document.getElementById("imagePreviewBlock").style.display = "none";
+				} else {
+                    imagePreview.style.display = "none";
+                    document.getElementById("imagePreviewBlock").style.display = "block";
+                }
 			}
 		</script>
 	</div>
@@ -77,6 +83,15 @@
                     processData: false,
                     success: function (response) {
                         $("#newSniff").html(response);
+
+                        document.getElementById("imagePreview").style.display = "none";
+                        document.getElementById("imagePreviewBlock").style.display = "block";
+                    },
+                    error: function (response) {
+                        $("#newSniff").html(response);
+
+                        document.getElementById("imagePreview").style.display = "none";
+                        document.getElementById("imagePreviewBlock").style.display = "block";
                     }
                 });