From 1b8e92d144bb7a54a297f4f4f2f598d9ff230dc3 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Thu, 22 Sep 2022 12:43:22 +0000
Subject: [PATCH] Working on adding profiles

---
 app/app.php         |  40 +++++++++++----
 css/main.css        | 120 ++++++++++++++++++++++++++------------------
 css/scss/_body.scss |  90 ++++++++++++++++++++++++++-------
 image.php           |  12 ++---
 index.php           |  17 +++----
 profile.php         | 112 +++++++++++++++++++++++++++++++++++++++++
 6 files changed, 297 insertions(+), 94 deletions(-)
 create mode 100644 profile.php

diff --git a/app/app.php b/app/app.php
index 2f4f752..d6ce918 100644
--- a/app/app.php
+++ b/app/app.php
@@ -61,12 +61,20 @@ class Account {
         Returns array with user info
     */
     function get_user_info($conn, $id) {
-        // Setting SQL query
-        $sql = "SELECT id, username FROM users WHERE id = ".$id;
-        // Getting results
-        $query = mysqli_query($conn, $sql);
-        // Fetching associated info
-        $user_array = mysqli_fetch_assoc($query);
+        $sql = "SELECT id, username, created_at FROM users WHERE id = ?";
+
+        if ($stmt = mysqli_prepare($conn, $sql)) {
+            // Bind variables to the prepared statement as parameters
+            mysqli_stmt_bind_param($stmt, "i", $param_user_id);
+            
+            $param_user_id = $id;
+            
+            $stmt->execute();
+            $query = $stmt->get_result();
+            
+            // Fetching associated info
+            $user_array = mysqli_fetch_assoc($query);
+        }
     
         return($user_array);
     }
@@ -79,11 +87,21 @@ class Account {
     function is_admin($conn, $id) {
         if (isset($id) || !empty($id)) {
             // Setting SQL query
-            $sql = "SELECT admin FROM users WHERE id = ".$id;
-            // Getting results
-            $query = mysqli_query($conn, $sql);
-            // Fetching associated info
-            $user_array = mysqli_fetch_assoc($query);
+            $sql = "SELECT admin FROM users WHERE id = ?";
+
+            if ($stmt = mysqli_prepare($conn, $sql)) {
+                // Bind variables to the prepared statement as parameters
+                mysqli_stmt_bind_param($stmt, "i", $param_user_id);
+                
+                $param_user_id = $id;
+                
+                $stmt->execute();
+                $query = $stmt->get_result();
+                
+                // Fetching associated info
+                $user_array = mysqli_fetch_assoc($query);
+            }
+            
 
             if ($user_array['admin'] || $id == 1) {
                 return True;
diff --git a/css/main.css b/css/main.css
index 1f997fc..219d826 100644
--- a/css/main.css
+++ b/css/main.css
@@ -315,8 +315,8 @@ nav .btn {
  |-------------------------------------------------------------
 */
 .fullscreen-image {
-  width: 100vw;
-  height: 100vh;
+  width: 101vw;
+  height: 101vh;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -325,7 +325,7 @@ nav .btn {
   -webkit-backdrop-filter: blur(15px);
           backdrop-filter: blur(15px);
   z-index: 999;
-  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
   display: none;
   opacity: 0;
 }
@@ -588,10 +588,10 @@ nav .btn {
 
 /*
  |-------------------------------------------------------------
- | ABOUT
+ | profile
  |-------------------------------------------------------------
 */
-.about-root {
+.profile-root {
   margin-bottom: 1rem;
   padding: 0.5rem 0.5rem 0 0.5rem;
   width: calc(100% - 1.4rem);
@@ -600,27 +600,82 @@ nav .btn {
   border-radius: 0.3rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+  margin: 3rem auto 1rem auto;
+  min-height: 7rem;
+  position: relative;
+  text-align: center;
 }
-.about-root > * {
+.profile-root > * {
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
-.about-root h1,
-.about-root h2,
-.about-root h3,
-.about-root h4,
-.about-root h5 {
+.profile-root h1,
+.profile-root h2,
+.profile-root h3,
+.profile-root h4,
+.profile-root h5 {
   font-family: "Lexend Deca", sans-serif;
   text-rendering: optimizeLegibility;
 }
-.about-root p,
-.about-root a,
-.about-root button,
-.about-root input {
+.profile-root p,
+.profile-root a,
+.profile-root button,
+.profile-root input {
   font-family: "Secular One", sans-serif;
   text-rendering: optimizeLegibility;
 }
+.profile-root img {
+  width: 9rem;
+  height: 9rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+  position: absolute;
+  left: 6rem;
+  top: -3rem;
+  transform: translateX(-50%);
+  border-radius: 0.3rem;
+  border: #8C977D 0.2rem solid;
+  background-color: #151515;
+}
+.profile-root h2, .profile-root > p {
+  margin: 0 0 0.5rem 0;
+  padding-left: 11rem;
+}
 
+.profile-info {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  padding-left: 11rem;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+.profile-info > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+@media (max-width: 669px) {
+  .profile-root img {
+    position: absolute;
+    left: 50%;
+    top: -3rem;
+    transform: translateX(-50%);
+  }
+  .profile-root h2 {
+    margin: 7rem 0 0.5rem 0;
+    padding: 0;
+  }
+  .profile-root > p {
+    padding: 0;
+  }
+  .profile-info {
+    padding: 0;
+  }
+  .profile-info > * {
+    padding: 0;
+  }
+}
 /*
  |-------------------------------------------------------------
  | UPLOAD
@@ -991,41 +1046,6 @@ nav .btn {
   text-rendering: optimizeLegibility;
 }
 
-/*
- |-------------------------------------------------------------
- | ERROR PAGE
- |-------------------------------------------------------------
-*/
-.error-root {
-  margin-bottom: 1rem;
-  padding: 0.5rem 0.5rem 0 0.5rem;
-  width: calc(100% - 1.4rem);
-  background-color: #151515;
-  color: #E8E3E3;
-  border-radius: 0.3rem;
-  border: 0.2rem solid #8C977D;
-  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.error-root > * {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-.error-root h1,
-.error-root h2,
-.error-root h3,
-.error-root h4,
-.error-root h5 {
-  font-family: "Lexend Deca", sans-serif;
-  text-rendering: optimizeLegibility;
-}
-.error-root p,
-.error-root a,
-.error-root button,
-.error-root input {
-  font-family: "Secular One", sans-serif;
-  text-rendering: optimizeLegibility;
-}
-
 /*
  |-------------------------------------------------------------
  | FOOTER
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index 65eb53d..0197549 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -183,7 +183,7 @@
  |-------------------------------------------------------------
 */
 .fullscreen-image {
-    width: 100vw; height: 100vh;
+    width: 101vw; height: 101vh;
 
     position: fixed;
     top: 50%;
@@ -195,10 +195,10 @@
 
     z-index: 999;
 
-    transition: opacity 0.5s cubic-bezier(.19, 1, .22, 1);
+    transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
 
-    display: none;  // Hidden so to not disturb the user
-    opacity: 0;     //
+    display: none;  // Automatically hidden, revealed on fullscreen
+    opacity: 0;     // expose
 
     img {
         max-width: 95%; max-height: 95%;
@@ -206,7 +206,7 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translateX(-050%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
 
         border-radius: $rad;
 
@@ -408,12 +408,78 @@
 
 /*
  |-------------------------------------------------------------
- | ABOUT
+ | profile
  |-------------------------------------------------------------
 */
-.about-root {
+.profile-root {
     @include defaultDecoration($page-accent);
     @include defaultFont();
+
+    margin: 3rem auto 1rem auto;
+    
+    min-height: 7rem;
+
+    position: relative;
+
+    text-align: center;
+
+    img {
+        width: 9rem;
+        height: 9rem;
+        object-fit: cover;
+
+        position: absolute;
+        left: 6rem;
+        top: -3rem;
+        transform: translateX(-50%);
+
+        border-radius: $rad;
+        border: $page-accent 0.2rem solid;
+
+        background-color: $bg;
+    }
+    h2, & > p {
+        margin: 0 0 0.5rem 0;
+        padding-left: 11rem;
+    }
+}
+.profile-info {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    padding-left: 11rem;
+
+    display: flex; flex-direction: column;
+
+    text-align: center;
+    & > * {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+    }
+}
+
+@media (max-width: 669px) {
+    .profile-root {
+        img {
+            position: absolute;
+            left: 50%;
+            top: -3rem;
+            transform: translateX(-50%);
+        }
+        h2 {
+            margin: 7rem 0 0.5rem 0;
+            padding: 0;
+        }
+        & > p {
+            padding: 0;
+        }
+    }
+    .profile-info {
+        padding: 0;
+    
+        & > * {
+            padding: 0;
+        }
+    }
 }
 
 /*
@@ -645,14 +711,4 @@
 .password-reset-root {
     @include defaultDecoration($red);
     @include defaultFont();
-}
-
-/*
- |-------------------------------------------------------------
- | ERROR PAGE
- |-------------------------------------------------------------
-*/
-.error-root {
-    @include defaultDecoration($page-accent);
-    @include defaultFont();
 }
\ No newline at end of file
diff --git a/image.php b/image.php
index d862b1e..d49c821 100644
--- a/image.php
+++ b/image.php
@@ -44,9 +44,9 @@
 			}
 		} else {
 			?>
-			<script>
-				sniffleAdd('Where is da image?', 'The link you followed seems to be broken, or there was some other error, who knows!', 'var(--red)', 'assets/icons/cross.svg');
-			</script>
+				<script>
+					sniffleAdd('Where is da image?', 'The link you followed seems to be broken, or there was some other error, who knows!', 'var(--red)', 'assets/icons/cross.svg');
+				</script>
 			<?php
 			$image_present = False;
 		}
@@ -149,7 +149,7 @@
 				document.querySelector(".fullscreen-image > img").src = "<?php echo $image_path;?>";
 				setTimeout(function(){
 					document.querySelector(".fullscreen-image").style.opacity = 1;
-				}, 500);
+				}, 1);
 			}
 
 			function closeFullScreen() {
@@ -185,9 +185,9 @@
 					<?php
 						// User
 						if ($user_info->is_admin($conn, $image['author'])) {
-							echo "<p>Author: ".$image_author."<img class='svg' style='margin: 0 0 0.1rem 0.2rem;' src='assets/icons/crown-simple.svg'></p>";
+							echo "<p>Author: <a href='profile.php?user=".$image['author']."' class='link'>".$image_author."</a><img class='svg' style='margin: 0 0 0.1rem 0.2rem;' src='assets/icons/crown-simple.svg'></p>";
 						} else {
-							echo "<p>Author: ".$image_author."</p>";
+							echo "<p>Author: <a href='profile.php?user=".$image['author']."' class='link'>".$image_author."</a></p>";
 						}
 
 						// Image ID
diff --git a/index.php b/index.php
index 8ec6b51..d647bc3 100644
--- a/index.php
+++ b/index.php
@@ -63,18 +63,15 @@
 
 			// 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>NSFW</span></a>";
+                echo "<div class='gallery-item'>";
+                echo "<a href='image.php?id=".$image['id']."' class='nsfw-warning'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>";
+                echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+                echo "</div>";
 			} else {
-				$image_nsfw = "";
-				$nsfw_warning = "";
+				echo "<div class='gallery-item'>";
+                echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+                echo "</div>";
 			}
-
-			// 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>";
 		}
 	?>
 </div>
diff --git a/profile.php b/profile.php
new file mode 100644
index 0000000..5e5def9
--- /dev/null
+++ b/profile.php
@@ -0,0 +1,112 @@
+<?php require_once __DIR__."/app/required.php"; ?>
+
+<!DOCTYPE html>
+<html>
+
+<head>
+	<?php require_once __DIR__."/assets/ui/header.php"; ?>
+</head>
+
+<body>
+	<?php
+		require_once __DIR__."/assets/ui/nav.php";
+
+        use App\Account;
+		use App\Diff;
+
+		$user_info = new Account();
+		$diff = new Diff();
+
+        if (!isset($_GET['user']) || empty($_GET['user'])) {
+            ?>
+				<script>
+					sniffleAdd("Success", "Error", "var(--green)", "assets/icons/trash.svg");
+				</script>
+			<?php
+        } elseif (isset($_GET['user'])) {
+            $user = $user_info->get_user_info($conn, $_GET['user']);
+
+            $join_date = new DateTime($user['created_at']);;
+	?>
+
+        <div class="profile-root">
+            <?php
+                if (!empty($user)) {
+                    ?>
+                        <img src='assets/no_image.png'>
+                        <h2><?php echo $user['username']; ?></h2>
+                        <?php if ($user_info->is_admin($conn, $user['id'])) echo "<p style='color: var(--accent);'>Admin</p>"; ?>
+                        <div class="profile-info">
+                            <p id="joinDate">Member since: <?php echo $join_date->format('d/m/Y T'); ?></p>
+                            <p id="postCount"></p>
+                        </div>
+                        
+                    <?php
+                } else {
+                    echo "<img src='assets/no_image.png'>
+                    <h2>Failed to load user info</h2>";
+                }
+            ?>
+        </div>
+
+        <div id="gallery" class="gallery-root">
+            <?php
+
+                // Reading images from table
+                $sql = "SELECT * FROM images WHERE author = ? ORDER BY id DESC";
+
+                if ($stmt = mysqli_prepare($conn, $sql)) {
+                    // Bind variables to the prepared statement as parameters
+                    mysqli_stmt_bind_param($stmt, "i", $param_user_id);
+                    
+                    $param_user_id = $_GET['user'];
+                    
+                    $stmt->execute();
+                    $query = $stmt->get_result();
+                    
+                    while ($image = mysqli_fetch_array($query)) {
+                        // Getting thumbnail
+                        if (file_exists("images/thumbnails/".$image['imagename'])) {
+                            $image_path = "images/thumbnails/".$image['imagename'];
+                        } else {
+                            $image_path = "images/".$image['imagename'];
+                        }
+    
+                        // Check for NSFW tag
+                        if (str_contains($image['tags'], "nsfw")) {
+                            echo "<div class='gallery-item'>";
+                            echo "<a href='image.php?id=".$image['id']."' class='nsfw-warning'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>";
+                            echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+                            echo "</div>";
+                        } else {
+                            echo "<div class='gallery-item'>";
+                            echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+                            echo "</div>";
+                        }			
+                    }
+                }
+            ?>
+        </div>
+
+        <script>
+            var postCount = $("#gallery").children().length;
+            $("#postCount").html("Posts: "+postCount);
+
+            var updateDate = new Date('<?php echo $join_date->format('m/d/Y T'); ?>');
+            var format = {year: 'numeric',
+                            month: 'short',
+                            day: 'numeric'
+                            };
+                            
+            updateDate = updateDate.toLocaleDateString('en-GB', format);
+
+            $("#joinDate").html("Member since: "+updateDate);
+        </script>
+
+    <?php
+        }
+
+        require_once __DIR__."/assets/ui/footer.php";
+    ?>
+</body>
+</html>