From 33927c63ef2a02102a7d2c584a84f56a2ce21155 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Wed, 28 Sep 2022 19:38:18 +0000
Subject: [PATCH] Added grabbing average image colour function

---
 README.md           |  4 +++
 account.php         |  6 ++--
 app/app.php         | 53 +++++++++++++++++++++++++++++++--
 css/main.css        | 36 +++++++++++------------
 css/main.scss       | 19 ++++++++++--
 css/scss/_body.scss | 72 +++++++++++++++++++++++++++++++++++++--------
 group.php           | 10 +++++++
 image.php           | 16 ++++++++++
 profile.php         | 20 +++++++++++--
 9 files changed, 196 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 14bb578..0841bcf 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,10 @@ You will need to install the image-magik PHP plugin for thumbnail creation, on U
 
     apt install php-imagick
 
+#### GD2
+Also install GD2 for image colour extraction, else you may get errors:
+
+    apt install php-gd
 
 #### PHP and Nginx
 This project also requires PHP 8.1 and was made with Ubuntu 22.04 LTS and Nginx in mind, so I reccommend running this gallery on such.
diff --git a/account.php b/account.php
index 3101939..85e8da0 100644
--- a/account.php
+++ b/account.php
@@ -192,7 +192,7 @@
 											<p><?php echo $log['action']; ?></p>
 											<?php
 												$log_time = new DateTime($log['time']);
-												echo "<p>" . $log_time->format('Y-m-d H:i:s T') . " | " . $diff->time($log['time']) . "</p>";
+												echo "<p>".$log_time->format('Y-m-d H:i:s T')." (".$diff->time($log['time']).")</p>";
 											?>
 										</div>
 									<?php
@@ -225,7 +225,7 @@
 											<p><?php echo $ban['length']; ?> mins</p>
 											<?php
 												$log_time = new DateTime($ban['time']);
-												echo "<p>" . $log_time->format('Y-m-d H:i:s T') . " | " . $diff->time($ban['time']) . "</p>";
+												echo "<p>".$log_time->format('Y-m-d H:i:s T')." (".$diff->time($ban['time']).")</p>";
 											?>
 										</div>
 									<?php
@@ -258,7 +258,7 @@
 											<p><?php echo $user['username']; ?></p>
 											<?php
 												$user_time = new DateTime($user['created_at']);
-												echo "<p>" . $user_time->format('Y-m-d H:i:s T') . " | " . $diff->time($user['last_modified']) . "</p>";
+												echo "<p>".$user_time->format('Y-m-d H:i:s T')." (".$diff->time($user['last_modified']).")</p>";
 											
 												if ($user['id'] == 1) {
 													?>
diff --git a/app/app.php b/app/app.php
index 258c602..a1374c7 100644
--- a/app/app.php
+++ b/app/app.php
@@ -2,6 +2,7 @@
 namespace App;
 
 use Exception;
+use Throwable;
 
 class Make {
     /*
@@ -50,6 +51,54 @@ class Make {
 
         return trim($string);
     }
+
+    function get_image_colour($img) {
+        $img_type = pathinfo($img, PATHINFO_EXTENSION);
+
+        if ($img_type == "png") {
+            $img = imagecreatefrompng($img);
+        } elseif ($img_type == "jpg" || $img_type == "jpeg") {
+            $img = imagecreatefromjpeg($img);
+        } elseif ($img_type == "webp") {
+            $img = imagecreatefromwebp($img);
+        } else {
+            return null;
+        }
+
+        try {
+            $w = imagesx($img);
+            $h = imagesy($img);
+            $r = $g = $b = 0;
+    
+            for($y = 0; $y < $h; $y++) {
+                for($x = 0; $x < $w; $x++) {
+                    $rgb = imagecolorat($img, $x, $y);
+                    $r += $rgb >> 16;
+                    $g += $rgb >> 8 & 255;
+                    $b += $rgb & 255;
+                }
+            }
+    
+            $pxls = $w * $h;
+            $r = dechex(round($r / $pxls));
+            $g = dechex(round($g / $pxls));
+            $b = dechex(round($b / $pxls));
+    
+            if(strlen($r) < 2) {
+                $r = 0 . $r;
+            }
+            if(strlen($g) < 2) {
+                $g = 0 . $g;
+            }
+            if(strlen($b) < 2) {
+                $b = 0 . $b;
+            }
+    
+            return "#" . $r . $g . $b;
+        } catch (Throwable $e) {
+            return null;
+        }
+    }
 }
 
 class Account {
@@ -277,11 +326,11 @@ class Sanity  {
             $manifest = json_decode(file_get_contents(__DIR__."/settings/manifest.json"), true);
 
             if (!isset($manifest['user_name']) || empty($manifest['user_name']) || $manifest['user_name'] == "[your name]") {
-                $results[] = "Warning: manifest.json is missing yor name";
+                $results[] = "Warning: manifest.json is missing your name";
             }
             if ($manifest['upload']['rename_on_upload'] == true ) {
                 if (!isset($manifest['upload']['rename_to']) || empty($manifest['upload']['rename_to'])) {
-                    $results[] = "Critical: manifest.json is missing what you're renaming your files to";
+                    $results[] = "Critical: manifest.json doesnt know what to rename your files to";
                 } else {
                     $rename_to = $manifest['upload']['rename_to'];
                     $rename_rate = 0;
diff --git a/css/main.css b/css/main.css
index 61f51e1..91c8cc9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -251,7 +251,7 @@ nav .btn {
   max-width: calc(20% - 0.5rem);
   min-width: calc(20% - 0.5rem);
   background-color: #151515;
-  border-radius: -0.1rem;
+  border-radius: 3px;
   position: relative;
   overflow: hidden;
   flex: 1 0 150px;
@@ -294,7 +294,7 @@ nav .btn {
      object-fit: cover;
   -o-object-position: center;
      object-position: center;
-  border-radius: -0.1rem;
+  border-radius: 3px;
 }
 
 .nsfw-blur {
@@ -393,8 +393,8 @@ nav .btn {
 
 .image-container {
   margin: 1rem 0 2rem 0;
-  padding: 0;
-  width: 100%;
+  padding: 0.5rem;
+  width: calc(100% - 1rem);
   max-height: 50vh;
   height: auto;
   min-height: 30vh;
@@ -417,7 +417,7 @@ nav .btn {
   width: auto;
   max-height: inherit;
   height: auto;
-  border-radius: 0.4rem;
+  border-radius: 3px;
   transition: opacity 0.5s;
 }
 
@@ -431,7 +431,7 @@ nav .btn {
   display: block;
   box-sizing: border-box;
   border: none;
-  border-radius: 0.4rem;
+  border-radius: 3px;
   transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
   background-color: rgba(21, 21, 21, 0.7333333333);
   z-index: 2;
@@ -483,7 +483,7 @@ nav .btn {
   padding: 0.5rem;
   display: block;
   background-color: #8C977D;
-  border-radius: -0.1rem;
+  border-radius: 3px;
   font-family: "Secular One", sans-serif;
 }
 .tag::before {
@@ -603,7 +603,7 @@ nav .btn {
   height: auto;
   max-width: calc(20% - 0.5rem);
   min-width: calc(20% - 0.5rem);
-  border-radius: -0.1rem;
+  border-radius: 3px;
   position: relative;
   overflow: hidden;
   flex: 1 0 150px;
@@ -626,7 +626,7 @@ nav .btn {
   height: 100%;
   padding: 0;
   background-color: #121212;
-  border-radius: -0.1rem;
+  border-radius: 3px;
   border: none;
   top: 0;
   bottom: 0;
@@ -734,7 +734,7 @@ nav .btn {
   margin: 0 auto;
   max-width: 100%;
   max-height: 15rem;
-  border-radius: -0.1rem;
+  border-radius: 3px;
   display: flex;
   flex-direction: column;
 }
@@ -754,7 +754,7 @@ nav .btn {
   height: 7.813rem;
   -o-object-fit: cover;
      object-fit: cover;
-  border-radius: -0.1rem;
+  border-radius: 3px;
   background-color: #121212;
 }
 .pfp-upload form > * {
@@ -799,7 +799,7 @@ nav .btn {
   display: none;
   flex-direction: column;
   background-color: #151515;
-  border-radius: -0.1rem;
+  border-radius: 3px;
 }
 
 .log {
@@ -846,7 +846,7 @@ nav .btn {
   display: none;
   flex-direction: column;
   background-color: #151515;
-  border-radius: -0.1rem;
+  border-radius: 3px;
 }
 
 .ban {
@@ -900,7 +900,7 @@ nav .btn {
   display: none;
   flex-direction: column;
   background-color: #151515;
-  border-radius: -0.1rem;
+  border-radius: 3px;
 }
 
 .user {
@@ -1029,7 +1029,7 @@ body * {
   font-family: "Secular One", sans-serif;
   text-decoration: none;
   border: none;
-  border-radius: -0.1rem;
+  border-radius: 3px;
   transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
 }
 .btn:hover {
@@ -1045,7 +1045,7 @@ body * {
   text-decoration: none;
   background-color: #E8E3E3;
   border: none;
-  border-radius: -0.1rem;
+  border-radius: 3px;
 }
 .btn:where(input[type=file])::file-selector-button {
   margin: -0.25rem 0.5rem -0.25rem -0.25rem;
@@ -1055,7 +1055,7 @@ body * {
   text-decoration: none;
   background-color: #E8E3E3;
   border: none;
-  border-radius: -0.1rem;
+  border-radius: 3px;
 }
 
 a.btn {
@@ -1152,7 +1152,7 @@ a.link:hover {
   background-color: rgba(21, 21, 21, 0.7333333333);
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
-  border-radius: 50%;
+  border-radius: 3px;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
   transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
 }
diff --git a/css/main.scss b/css/main.scss
index 23795b7..4e31171 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -78,7 +78,11 @@ body {
     text-decoration: none;
 
     border: none;
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 
     transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
 
@@ -102,7 +106,11 @@ body {
         background-color: $white;
 
         border: none;
-        border-radius: calc($rad - 0.5rem);
+        @if calc($rad - 0.5rem) > 0 {
+            border-radius: calc($rad - 0.5rem);
+        } @else {
+            border-radius: 3px;
+        }
     }
 }
 
@@ -205,7 +213,12 @@ a.link {
     background-color: $bg-alt;
     backdrop-filter: blur(8px);
 
-    border-radius: 50%;
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
+    
     box-shadow: $shadow;
 
     transition: right 0.15s cubic-bezier(.19, 1, .22, 1);
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index e49c7f6..9ebb81c 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -72,7 +72,11 @@
     min-width: calc(20% - 0.5rem);
 
     background-color: $bg;
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 
     position: relative;
 
@@ -126,7 +130,11 @@
     object-fit: cover;
     object-position: center;
 
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 }
 
 .nsfw-blur {
@@ -253,9 +261,9 @@
 
 .image-container {
     margin: 1rem 0 2rem 0;
-    padding: 0;
+    padding: 0.5rem;
 
-    width: 100%;
+    width: calc(100% - 1rem);
     max-height: 50vh;
     height: auto;
     min-height: 30vh;
@@ -284,7 +292,11 @@
     max-height: inherit;
     height: auto;
 
-    border-radius: $rad;
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 
     transition: opacity 0.5s;
 }
@@ -302,7 +314,11 @@
     box-sizing: border-box;
 
     border: none;
-    border-radius: $rad;
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 
     transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
 
@@ -370,7 +386,11 @@
 
     background-color: $page-accent;
 
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 
     font-family: $font-body;
 
@@ -526,7 +546,11 @@
     max-width: calc(20% - 0.5rem);
     min-width: calc(20% - 0.5rem);
 
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 
     position: relative;
 
@@ -556,7 +580,11 @@
         padding: 0;
 
         background-color: $black;
+        @if calc($rad - 0.5rem) > 0 {
         border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
         border: none;
 
         top: 0;
@@ -684,7 +712,11 @@
     max-width: 100%;
     max-height: 15rem;
 
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 
     display: flex;
     flex-direction: column;
@@ -707,7 +739,11 @@
 
         object-fit: cover;
 
+        @if calc($rad - 0.5rem) > 0 {
         border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 
         background-color: $black;
     }
@@ -759,7 +795,11 @@
     display: none; flex-direction: column;
 
     background-color: $bg;
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 }
 .log {
     min-width: 850px;
@@ -811,7 +851,11 @@
     display: none; flex-direction: column;
 
     background-color: $bg;
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 }
 .ban {
     min-width: 900px;
@@ -869,7 +913,11 @@
     display: none; flex-direction: column;
 
     background-color: $bg;
-    border-radius: calc($rad - 0.5rem);
+    @if calc($rad - 0.5rem) > 0 {
+        border-radius: calc($rad - 0.5rem);
+    } @else {
+        border-radius: 3px;
+    }
 }
 .user {
     min-width: 950px;
diff --git a/group.php b/group.php
index 4ad9c8b..16d744f 100644
--- a/group.php
+++ b/group.php
@@ -152,6 +152,16 @@
                 if ($_SESSION['id'] == $group['author'] || $user_info->is_admin($conn, $_SESSION['id'])) {
                     echo "<a href='group.php?id=".$_GET['id']."&mode=edit' class='btn btn-neutral'>Edit</a>";
                 }
+                ?>
+                    <button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy link</button>
+                    <script>
+                        function copyLink() {
+                            navigator.clipboard.writeText(window.location.href);
+
+                            sniffleAdd("Info", "Link has been copied!", "var(--success)", "assets/icons/clipboard-text.svg");
+                        }
+                    </script>
+                <?php
             }
 
             echo "</div>";
diff --git a/image.php b/image.php
index 7f216c6..ce5222e 100644
--- a/image.php
+++ b/image.php
@@ -1,10 +1,12 @@
 <?php
 	require_once __DIR__."/app/required.php";
 
+	use App\Make;
 	use App\Account;
 	use App\Image;
 	use App\Diff;
 
+	$make_stuff = new Make();
 	$image_info = new Image;
 	$user_info = new Account;
 	$diff = new Diff();
@@ -89,6 +91,20 @@
 			if (isset($image['imagename'])) {
 				$image_path = "images/".$image['imagename'];
 				$image_alt = $image['alt'];
+
+				$image_colour = $make_stuff->get_image_colour($image_path);
+				if (!empty($image_colour)) {
+					$image_colour = $image_colour;
+				} else {
+					$image_colour = "var(--bg)";
+				}
+				?>
+					<style>
+						.image-container, .fullscreen-image {
+							background-color: <?php echo $image_colour; ?>55 !important;
+						}
+					</style>
+				<?php
 			} else {
 				$image_path = "assets/no_image.png";
 				$image_alt = "No image could be found, sowwy";
diff --git a/profile.php b/profile.php
index 5274c97..2cfbf66 100644
--- a/profile.php
+++ b/profile.php
@@ -1,9 +1,11 @@
 <?php
     require_once __DIR__."/app/required.php"; 
 
-    use App\Account;
-    use App\Diff;
+    use App\Make;
+	use App\Account;
+	use App\Diff;
 
+	$make_stuff = new Make();
     $user_info = new Account();
     $diff = new Diff();
 
@@ -30,6 +32,20 @@
                 if (!empty($user)) {
                     if (is_file("images/pfp/".$user['pfp_path'])) {
                         echo "<img src='images/pfp/".$user['pfp_path']."'>";
+
+                        $pfp_colour = $make_stuff->get_image_colour("images/pfp/".$user['pfp_path']);
+                        if (!empty($pfp_colour)) {
+                            $pfp_colour = $pfp_colour;
+                        } else {
+                            $pfp_colour = "var(--bg-3)";
+                        }
+                        ?>
+                            <style>
+                                .profile-root {
+                                    background-image: linear-gradient(to right, <?php echo $pfp_colour; ?>, var(--bg-3)) !important;
+                                }
+                            </style>
+                        <?php
                     } else {
                         echo "<img src='assets/no_image.png'>";
                     }