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>