mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-01-14 02:25:12 +00:00
Working on adding profiles
This commit is contained in:
parent
94563eb6f4
commit
1b8e92d144
40
app/app.php
40
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;
|
||||
|
|
|
|||
120
css/main.css
120
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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
12
image.php
12
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
|
||||
|
|
|
|||
17
index.php
17
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>
|
||||
|
|
|
|||
112
profile.php
Normal file
112
profile.php
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue