Make account
And amazing things happened here...
@@ -374,7 +466,7 @@
var confirm_password = $("#signupPasswordConfirm").val();
var token = $("#signupToken").val();
var submit = $("#signupSubmit").val();
- $("#sniffle").load("app/account/account.php", {
+ $("#newSniff").load("app/account/account.php", {
username: username,
password: password,
confirm_password: confirm_password,
@@ -398,7 +490,7 @@
}
?>
-
+
\ No newline at end of file
diff --git a/app/account/account.php b/app/account/account.php
index 12534f9..85195a4 100644
--- a/app/account/account.php
+++ b/app/account/account.php
@@ -4,7 +4,9 @@ include dirname(__DIR__)."/server/conn.php";
include dirname(__DIR__)."/app.php";
use App\Account;
+use App\Make;
+$make_stuff = new Make();
$user_info = new Account();
$user_ip = $user_info->get_ip();
@@ -32,7 +34,7 @@ if (isset($_POST['submit_login'])) {
if ($ban_perm) {
?>
-
-
+
+ thumbnail($image_path, $image_path, 300) != "success") {
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+ > 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;
+ }
}
}
@@ -61,12 +121,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, pfp_path 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 +147,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;
@@ -117,14 +195,20 @@ class Image {
Returns array with image info
*/
function get_image_info($conn, $id) {
- // Setting SQL query
- $sql = "SELECT * FROM images WHERE id = ".$id;
- // Getting results
- $query = mysqli_query($conn, $sql);
- // Fetching associated info
- $image_array = mysqli_fetch_assoc($query);
+ $sql = "SELECT * FROM images WHERE id = ?";
+
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ // Bind variables to the prepared statement as parameters
+ mysqli_stmt_bind_param($stmt, "i", $id);
+
+ $stmt->execute();
+ $query = $stmt->get_result();
+
+ // Fetching associated info
+ $group_array = mysqli_fetch_assoc($query);
+ }
- return($image_array);
+ return($group_array);
}
/*
Check if user is image owner
@@ -146,6 +230,61 @@ class Image {
}
}
+class Group {
+ function get_group_info($conn, $id) {
+ // Setting SQL query
+ $sql = "SELECT * FROM groups WHERE id = ?";
+
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ // Bind variables to the prepared statement as parameters
+ mysqli_stmt_bind_param($stmt, "i", $id);
+
+ $stmt->execute();
+ $query = $stmt->get_result();
+
+ // Fetching associated info
+ $group_array = mysqli_fetch_assoc($query);
+ }
+
+ return($group_array);
+ }
+
+ function get_group_members($conn, $id){
+ $user_array = array();
+
+ $sql = "SELECT * FROM groups WHERE id = ?";
+
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ // Bind variables to the prepared statement as parameters
+ mysqli_stmt_bind_param($stmt, "i", $id);
+
+ $stmt->execute();
+ $query = $stmt->get_result();
+
+ // Fetching associated info
+ $group_array = mysqli_fetch_assoc($query);
+ }
+
+ try {
+ $image_list = explode(" ", $group_array['image_list']);
+ $user_array = array();
+ foreach ($image_list as $image) {
+ $image_request = mysqli_query($conn, "SELECT author FROM images WHERE id = ".$image);
+
+ while ($author = mysqli_fetch_column($image_request)) {
+ if (!in_array($author, $user_array)) {
+ $user_array[] = $author;
+ }
+ }
+ }
+ } catch (Exception) {
+
+ }
+
+ return($user_array);
+ }
+}
+
class Diff {
function time($past_time, $full_date = false) {
$now = new \DateTime;
@@ -175,4 +314,93 @@ class Diff {
if (!$full_date) $string = array_slice($string, 0, 1);
return $string ? implode(', ', $string) . ' ago' : 'just now';
}
+}
+
+class Sanity {
+ function check_json() {
+ $results = array();
+
+ if (!is_file(__DIR__."/settings/manifest.json")) {
+ $results[] = "Critical: manifest.json is missing";
+ } else {
+ $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 your name";
+ }
+ if ($manifest['upload']['rename_on_upload'] == true ) {
+ if (!isset($manifest['upload']['rename_to']) || empty($manifest['upload']['rename_to'])) {
+ $results[] = "Critical: manifest.json doesnt know what to rename your files to";
+ } else {
+ $rename_to = $manifest['upload']['rename_to'];
+ $rename_rate = 0;
+
+ if (str_contains($rename_to, '{{autoinc}}')) $rename_rate = 5;
+ if (str_contains($rename_to, '{{time}}')) $rename_rate = 5;
+
+ if (str_contains($rename_to, '{{date}}')) $rename_rate += 2;
+ if (str_contains($rename_to, '{{filename}}')) $rename_rate += 2;
+
+ if (str_contains($rename_to, '{{username}}') || str_contains($rename_to, '{{userid}}')) $rename_rate += 1;
+
+ if ($rename_rate == 0 || $rename_rate < 2) {
+ $results[] = "Critical: You will encounter errors when uploading images due to filenames, update your manifest.json";
+ } elseif ($rename_rate < 5 && $rename_rate > 2) {
+ $results[] = "Warning: You may encounter errors when uploading images due to filenames, concider update your manifest.json";
+ }
+ }
+ }
+
+ if ($manifest['is_testing']) {
+ $results[] = "Warning: You are currently in testing mode, errors will be displayed to the user";
+ }
+ }
+
+ return $results;
+ }
+
+ function check_files() {
+ $results = array();
+
+ if (!is_dir("images")) {
+ $results[] = "Critical: You need to setup an images folder, follow the guide on the GitHub repo";
+ }
+ if (!is_dir("images/pfp")) {
+ $results[] = "Critical: You need to setup an pfp folder, follow the guide on the GitHub repo";
+ }
+ if (!is_dir("images/previews")) {
+ $results[] = "Critical: You need to setup an previews folder, follow the guide on the GitHub repo";
+ }
+ if (!is_dir("images/thumbnails")) {
+ $results[] = "Critical: You need to setup an thumbnails folder, follow the guide on the GitHub repo";
+ }
+
+ return $results;
+ }
+
+ function check_version() {
+ $results = array();
+
+ if (PHP_VERSION_ID < 50102) {
+ $results[] = "Critical: Your current version of PHP is ".PHP_VERSION.". The reccomended version is 8.1.2";
+ }
+
+ return $results;
+ }
+
+ function get_results() {
+ $results = array();
+
+ foreach ($this->check_json() as $result) {
+ $results[] = $result;
+ }
+ foreach ($this->check_files() as $result) {
+ $results[] = $result;
+ }
+ foreach ($this->check_version() as $result) {
+ $results[] = $result;
+ }
+
+ return $results;
+ }
}
\ No newline at end of file
diff --git a/app/image/group.php b/app/image/group.php
new file mode 100644
index 0000000..4d213ff
--- /dev/null
+++ b/app/image/group.php
@@ -0,0 +1,199 @@
+get_ip();
+
+/*
+ |-------------------------------------------------------------
+ | Image Groups
+ |-------------------------------------------------------------
+ | The Long-awaited feature
+ |-------------------------------------------------------------
+*/
+if (isset($_POST['group_submit'])) {
+ $query = $group_info->get_group_info($conn, $_POST['group_id']);
+
+ if ($_SESSION['id'] == $query['author'] || $user_info->is_admin($conn, $_SESSION['id'])) {
+ $sql = "UPDATE groups SET image_list = ? WHERE id = ?";
+
+ // Checking if databse is doing ok
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ mysqli_stmt_bind_param($stmt, "si", $param_images, $param_id);
+
+ // Setting parameters
+ $param_images = implode(" ", $_POST['group_images']);
+ $param_id = $_POST['group_id'];
+
+ // Attempt to execute the prepared statement
+ if (mysqli_stmt_execute($stmt)) {
+ ?>
+
+
+
+
+
+ get_group_info($conn, $_POST['group_id']);
+
+ if ($_SESSION['id'] == $query['author'] || $user_info->is_admin($conn, $_SESSION['id'])) {
+ // getting ready forSQL asky asky
+ $sql = "UPDATE groups SET group_name = ? WHERE id = ?";
+
+ // Checking if databse is doing ok
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ mysqli_stmt_bind_param($stmt, "si", $param_title, $param_id);
+
+ // Setting parameters
+ $param_title = $_POST['group_title'];
+ $param_id = $_POST['group_id'];
+
+ // Attempt to execute the prepared statement
+ if (mysqli_stmt_execute($stmt)) {
+ ?>
+
+
+
+
+
+
+
+ is_loggedin()) {
+ $group_name = "New Group";
+ $sql = "INSERT INTO groups (group_name, author, image_list) VALUES('$group_name', '".$_SESSION['id']."', '')";
+
+ mysqli_query($conn, $sql);
+
+ $group_id = mysqli_insert_id($conn);
+
+ ?>
+
+
+
+ get_group_info($conn, $_POST['group_id']);
+
+ if ($_SESSION['id'] == $query['author'] || $user_info->is_admin($conn, $_SESSION['id'])) {
+ $sql = "DELETE FROM groups WHERE id = ?";
+
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ // Bind variables to the prepared statement as parameters
+ mysqli_stmt_bind_param($stmt, "i", $_POST['group_id']);
+
+ if ($stmt->execute()) {
+ ?>
+
+
+
+
+
+
+
+ get_ip();
|-------------------------------------------------------------
*/
if (isset($_POST['submit_delete'])) {
- // Get all image info
- $image_array = $image_info->get_image_info($conn, $_POST['id']);
+ // Get all image info
+ $image_array = $image_info->get_image_info($conn, $_POST['id']);
- // If user owns image or has the ID of 1
- if ($image_info->image_privilage($image_array['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
- // Delete from table
- $sql = "DELETE FROM images WHERE id = ?";
- if ($stmt = mysqli_prepare($conn, $sql)) {
- mysqli_stmt_bind_param($stmt, "i", $param_id);
+ // If user owns image or has the ID of 1
+ if ($image_info->image_privilage($image_array['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
+ // Delete from table
+ $sql = "DELETE FROM images WHERE id = ?";
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ mysqli_stmt_bind_param($stmt, "i", $_POST['id']);
- // Setting parameters
- $param_id = $_POST['id'];
-
- // Attempt to execute the prepared statement
- if (mysqli_stmt_execute($stmt)) {
- // See if image is in the directory
- if (is_file(dirname(__DIR__)."/images/".$image_array['imagename'])) {
- unlink(dirname(__DIR__)."/images/".$image_array['imagename']);
- }
- // Delete thumbnail if exitsts
- if (is_file(dirname(__DIR__)."/images/thumbnails/".$image_array['imagename'])) {
- unlink(dirname(__DIR__)."/images/thumbnails/".$image_array['imagename']);
- }
- // Delete preview if exitsts
- if (is_file(dirname(__DIR__)."/images/previews/".$image_array['imagename'])) {
- unlink(dirname(__DIR__)."/images/previews/".$image_array['imagename']);
- }
- // TP user to the homepage with a success message
- mysqli_query($conn,"INSERT INTO logs (ipaddress, action) VALUES('$user_ip','Deleted image ".$_POST['id']."')");
- ?>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ get_image_info($conn, $_POST['id']);
- // If user owns image or has the ID of 1
- if ($image_info->image_privilage($image_array['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
- // getting ready forSQL asky asky
- $sql = "UPDATE images SET alt=? WHERE id=?";
+ // Get all image info
+ $image_array = $image_info->get_image_info($conn, $_POST['id']);
+ // If user owns image or has the ID of 1
+ if ($image_info->image_privilage($image_array['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
+ // getting ready forSQL asky asky
+ $sql = "UPDATE images SET alt=? WHERE id=?";
- // Checking if databse is doing ok
- if ($stmt = mysqli_prepare($conn, $sql)) {
- mysqli_stmt_bind_param($stmt, "si", $param_alt, $param_id);
+ // Checking if databse is doing ok
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ mysqli_stmt_bind_param($stmt, "si", $param_alt, $param_id);
- // Setting parameters
- $param_alt = $_POST['input'];
- $param_id = $_POST['id'];
+ // Setting parameters
+ $param_alt = $_POST['input'];
+ $param_id = $_POST['id'];
- // Attempt to execute the prepared statement
- if (mysqli_stmt_execute($stmt)) {
- ?>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ get_image_info($conn, $_POST['id']);
- // If user owns image or has the ID of 1
- if ($image_info->image_privilage($image_array['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
- // Clean input
- $tags_string = $make_stuff->tags(trim($_POST['input']));
+ // Get all image info
+ $image_array = $image_info->get_image_info($conn, $_POST['id']);
+ // If user owns image or has the ID of 1
+ if ($image_info->image_privilage($image_array['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
+ // Clean input
+ $tags_string = $make_stuff->tags(trim($_POST['input']));
- // getting ready forSQL asky asky
- $sql = "UPDATE images SET tags=? WHERE id=?";
+ // getting ready forSQL asky asky
+ $sql = "UPDATE images SET tags=? WHERE id=?";
- // Checking if databse is doing ok
- if ($stmt = mysqli_prepare($conn, $sql)) {
- mysqli_stmt_bind_param($stmt, "si", $param_tags, $param_id);
+ // Checking if databse is doing ok
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ mysqli_stmt_bind_param($stmt, "si", $param_tags, $param_id);
- // Setting parameters
- $param_tags = $tags_string;
- $param_id = $_POST['id'];
+ // Setting parameters
+ $param_tags = $tags_string;
+ $param_id = $_POST['id'];
- // Attempt to execute the prepared statement
- if (mysqli_stmt_execute($stmt)) {
- ?>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ is_admin($conn, $_SESSION['id'])) {
- // getting ready forSQL asky asky
- $sql = "UPDATE images SET author=? WHERE id=?";
+ // If user has the ID of 1
+ if ($user_info->is_admin($conn, $_SESSION['id'])) {
+ // getting ready forSQL asky asky
+ $sql = "UPDATE images SET author=? WHERE id=?";
- // Checking if databse is doing ok
- if ($stmt = mysqli_prepare($conn, $sql)) {
- mysqli_stmt_bind_param($stmt, "si", $param_author, $param_id);
+ // Checking if databse is doing ok
+ if ($stmt = mysqli_prepare($conn, $sql)) {
+ mysqli_stmt_bind_param($stmt, "si", $param_author, $param_id);
- // Setting parameters
- $param_author = $_POST['input'];
- $param_id = $_POST["id"];
+ // Setting parameters
+ $param_author = $_POST['input'];
+ $param_id = $_POST["id"];
- // Attempt to execute the prepared statement
- if (mysqli_stmt_execute($stmt)) {
- ?>
-
-
-
-
-
-
+
+
+
+
+
+ tags(trim($_POST['tags']));
+ $tags = $make_stuff->tags(trim($_POST['tags']));
- // Allowed file types
- $allowed_types = array('jpg', 'jpeg', 'png', 'webp');
- if (in_array($file_type, $allowed_types)) {
- // Move file to server
+ // Check filetype
+ $allowed_types = array('jpg', 'jpeg', 'png', 'webp');
+ if (!in_array($file_type, $allowed_types)) {
+ ?>
+
+ Uploaders username
+ {{userid}} -> Uploaders ID
+
+ {{time}} -> microtime of upload
+ {{date}} -> date of upload
+
+ {{filename}} -> takes original filename
+ {{autoinc}} -> checks if file with name already exists
+ if so it adds a number on the end of it
+
+ "foo" -> Text is accepted between templates
+ */
+
+ $name_template = $upload_conf['rename_to'];
+
+ $name_template = str_replace('{{username}}', $_SESSION["username"], $name_template);
+ $name_template = str_replace('{{userid}}', $_SESSION["id"], $name_template);
+
+ $name_template = str_replace('{{time}}', round(microtime(true)), $name_template);
+ $name_template = str_replace('{{date}}', date("Y-m-d"), $name_template);
+
+ $name_template = str_replace('{{filename}}', pathinfo($dir.$_FILES['image']['name'],PATHINFO_FILENAME), $name_template);
+
+ if (str_contains($name_template, "{{autoinc}}")) {
+ $autoinc = 0;
+ $autoinc_tmp_name = str_replace('{{autoinc}}', $autoinc, $name_template).".".$file_type;
+
+ while (is_file($dir.$autoinc_tmp_name)) {
+ $autoinc += 1;
+ $autoinc_tmp_name = str_replace('{{autoinc}}', $autoinc, $name_template).".".$file_type;
+ }
+
+ $name_template = str_replace('{{autoinc}}', $autoinc, $name_template);
+ }
+
+ $image_newname = $name_template.".".$file_type;
+ $image_path = $dir.$image_newname;
+
+ // Check for conflicting names, as the config could be setup wrong
+ if (is_file($image_path)) {
+ ?>
+
+
+
+ thumbnail($image_path, $thumb_dir.$image_newname, 300) != "success") {
?>
thumbnail($image_path, $preview_dir.$image_newname, 900) != "success") {
?>
-
-
- console.log(". . /|/| . . . . . . .\n\
-.. /0 0 \\ . . . . . ..\n\
-(III% . \\________, . .\n\
-.. .\\_, .%###%/ \\'\\,..\n\
-. . . .||#####| |'\\ \\.\n\
-.. . . ||. . .|/. .\\V.\n\
-. . . .|| . . || . . .\n\
-.. . . ||. . .||. . ..\n\
-. . . .|| . . || . . .\n\
-.. . . ||. . .||. . ..\n\
-. . . .|| . . || . . .\n\
-.. . . ||. . .||. . ..\n\
-. . . .|| . . || . . .\n\
-.. . . ||. . .||. . ..\n\
-. . . .|| . . || . . .\n\
-.. . . ||. . .||. . ..\n\
-. . . .|| . . || . . .\n\
-.. . . ||. . .||. . ..\n\
-. . . .|| . . || . . .\n\
-.. . . ||. . .||. . ..\n\
-. . . .|| . . || . . .\n\
-.. . . ||. . .||. . ..\n\
-. . . cc/ . .cc/ . . .");
-
\ No newline at end of file
diff --git a/app/settings/manifest.json b/app/settings/manifest.json
index dca09b2..20232b9 100644
--- a/app/settings/manifest.json
+++ b/app/settings/manifest.json
@@ -1,7 +1,6 @@
{
"website_name": "Only Legs",
"website_description": "A simple PHP gallery with multiple users in mind",
- "tos": "When making an account and interacting with the login/signup page, you agree to have your IP logged for banning purposes.",
"welcome_msg": [
"*internal screaming*",
"Don't forget to drink water!",
@@ -22,12 +21,15 @@
"The weather is dry",
"Need me a man 👀",
"Gods die too.",
- "Eat hotchip and lie",
- "The world will not be destroyed by those who do evil, but by those who watch them and do nothing."
+ "Eat hotchip and lie"
],
"license":"GPL 3.0",
- "version": "22.09.20",
- "user_name": "Michal",
- "is_testing": "true",
- "upload_max": "20"
+ "version": "22.09.29",
+ "user_name": "[your name]",
+ "is_testing": true,
+ "upload": {
+ "max_filesize": "32",
+ "rename_on_upload": true,
+ "rename_to": "IMG_{{username}}_{{time}}"
+ }
}
\ No newline at end of file
diff --git a/app/settings/settings.php b/app/settings/settings.php
index 84cf2fa..30bedff 100644
--- a/app/settings/settings.php
+++ b/app/settings/settings.php
@@ -8,13 +8,6 @@
| the default background and accent colour
|-------------------------------------------------------------
*/
-$user_import = file_get_contents(__DIR__."/manifest.json");
-$user_settings = json_decode($user_import, true);
-
-foreach ($user_settings->data as $website) {
- foreach ($website->debug as $debug) {
-
- }
-}
-
-$debug = $user_settings["website"]["debug"];
+$user_import = file_get_contents(__DIR__."/manifest.json");
+$user_settings = json_decode($user_import, true);
+$upload_conf = $user_settings["upload"];
\ No newline at end of file
diff --git a/assets/icons/package.svg b/assets/icons/package.svg
new file mode 100644
index 0000000..f2ebf0d
--- /dev/null
+++ b/assets/icons/package.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/icons/plus.svg b/assets/icons/plus.svg
new file mode 100644
index 0000000..aa4b3b2
--- /dev/null
+++ b/assets/icons/plus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/ui/footer.php b/assets/ui/footer.php
new file mode 100644
index 0000000..adc72da
--- /dev/null
+++ b/assets/ui/footer.php
@@ -0,0 +1,7 @@
+
diff --git a/assets/ui/header.php b/assets/ui/header.php
new file mode 100644
index 0000000..ac1bd84
--- /dev/null
+++ b/assets/ui/header.php
@@ -0,0 +1,47 @@
+
+
+
+get_image_info($conn, $_GET['id']);
+ }
+?>
+
+
<?php echo $user_settings['website_name']; ?>
+
+
+
+
+
+
+
"/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/ui/nav.php b/assets/ui/nav.php
new file mode 100644
index 0000000..1a0b108
--- /dev/null
+++ b/assets/ui/nav.php
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Description
+
+
+
Close
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index aec0d1d..187c962 100644
--- a/css/main.css
+++ b/css/main.css
@@ -15,13 +15,21 @@
--fg: #E8E3E3;
--fg-dark: #151515;
--red: #B66467;
- --orange: #FF7700;
+ --orange: #D8A657;
+ --yellow: #D9BC8C;
--green: #8C977D;
- --black: #151515;
+ --blue: #8DA3B9;
+ --purple: #A988B0;
+ --black: #121212;
--white: #E8E3E3;
--accent: #8C977D;
+ --warning: #B66467;
+ --alert: #D8A657;
+ --success: #8C977D;
+ --neutral: #121212;
--shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
- --rad: 0.25rem;
+ --rad: 0.4rem;
+ --border: #8C977D 0.2rem solid;
}
/*
@@ -30,13 +38,10 @@
|-------------------------------------------------------------
*/
nav {
- margin-bottom: 1rem;
- padding: 0.5rem 0.5rem 0 0.5rem;
- width: calc(100% - 1.4rem);
background-color: #151515;
color: #E8E3E3;
- border-radius: 0.25rem;
- border: 0.2rem solid #8C977D;
+ border-radius: 0.4rem;
+ border: #8C977D 0.2rem solid;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
display: flex;
flex-direction: row;
@@ -45,7 +50,7 @@ nav {
margin: 0 auto 1rem;
padding: 0.5rem;
width: calc(100% - 1.4rem);
- height: 2.5rem;
+ height: auto;
position: -webkit-sticky;
position: sticky;
z-index: 99;
@@ -53,10 +58,6 @@ nav {
align-items: center;
vertical-align: middle;
}
-nav > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
nav p {
margin: 0;
vertical-align: middle;
@@ -90,6 +91,9 @@ nav .btn {
font-family: "Secular One", sans-serif;
width: auto;
}
+.nav-links a.btn {
+ padding: 0.2rem 0.5rem;
+}
.nav-mobile {
display: none;
@@ -107,6 +111,7 @@ nav .btn {
nav {
margin: 0;
width: calc(100% - 1rem);
+ height: 2.5rem;
position: fixed;
top: auto;
bottom: 0;
@@ -116,7 +121,7 @@ nav .btn {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: none;
- border-top: 3px solid #8C977D;
+ border-top: #8C977D 0.2rem solid;
border-radius: 0;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
@@ -125,6 +130,9 @@ nav .btn {
margin: 0;
display: block;
}
+ .nav-links a.btn {
+ padding: 0.5rem;
+ }
.nav-hide {
display: none;
}
@@ -141,6 +149,53 @@ nav .btn {
display: block;
}
}
+/*
+ |-------------------------------------------------------------
+ | DEFAULTS
+ |-------------------------------------------------------------
+*/
+.defaultSpacing {
+ margin-bottom: 1rem;
+ padding: 0.5rem 0.5rem 0 0.5rem;
+ width: calc(100% - 1.4rem);
+}
+.defaultSpacing > * {
+ margin-top: 0;
+ margin-bottom: 0.5rem;
+}
+
+.defaultDecoration {
+ background-color: #151515;
+ color: #E8E3E3;
+ border-radius: 0.4rem;
+ border: #8C977D 0.2rem solid;
+ box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+}
+
+.warningDecoration {
+ background-color: #151515;
+ color: #E8E3E3;
+ border-radius: 0.4rem;
+ border: #B66467 0.2rem solid;
+ box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+}
+
+.defaultFonts h1,
+.defaultFonts h2,
+.defaultFonts h3,
+.defaultFonts h4,
+.defaultFonts h5 {
+ font-family: "Lexend Deca", sans-serif;
+ text-rendering: optimizeLegibility;
+}
+.defaultFonts p,
+.defaultFonts a,
+.defaultFonts button,
+.defaultFonts input {
+ font-family: "Secular One", sans-serif;
+ text-rendering: optimizeLegibility;
+}
+
/*
|-------------------------------------------------------------
| INDEX
@@ -151,26 +206,11 @@ nav .btn {
padding: 0;
text-align: center;
}
-.info-text h1,
-.info-text h2,
-.info-text h3,
-.info-text h4,
-.info-text h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.info-text p,
-.info-text a,
-.info-text button,
-.info-text input {
- font-family: "Secular One", sans-serif;
-}
.info-text h1 {
- font-family: "Lexend Deca", sans-serif;
margin-top: 0;
margin-bottom: 1rem;
}
.info-text p {
- font-family: "Secular One", sans-serif;
margin-top: 0;
margin-bottom: 1rem;
}
@@ -186,12 +226,14 @@ nav .btn {
.gallery-order h4,
.gallery-order h5 {
font-family: "Lexend Deca", sans-serif;
+ text-rendering: optimizeLegibility;
}
.gallery-order p,
.gallery-order a,
.gallery-order button,
.gallery-order input {
font-family: "Secular One", sans-serif;
+ text-rendering: optimizeLegibility;
}
.gallery-order > * {
margin-right: 0.5rem;
@@ -203,23 +245,20 @@ nav .btn {
.gallery-root {
margin-bottom: 1rem;
padding: 0.25rem;
- background-color: #151515;
- color: #E8E3E3;
display: flex;
flex-direction: row;
flex-wrap: wrap;
- border: 0.2rem solid #8C977D;
- border-radius: 0.25rem;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+ justify-content: none;
}
.gallery-item {
margin: 0.25rem;
padding: 0;
height: auto;
- max-width: calc(33.33% - 0.5rem);
+ max-width: calc(20% - 0.5rem);
+ min-width: calc(20% - 0.5rem);
background-color: #151515;
- border-radius: -0.25rem;
+ border-radius: 3px;
position: relative;
overflow: hidden;
flex: 1 0 150px;
@@ -230,12 +269,27 @@ nav .btn {
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
z-index: 9;
}
+.gallery-item:active {
+ transform: scale(0.8) !important;
+}
.gallery-item:after {
content: "";
display: block;
padding-bottom: 100%;
}
+@media (max-width: 800px) {
+ .gallery-item {
+ max-width: calc(25% - 0.5rem);
+ min-width: calc(25% - 0.5rem);
+ }
+}
+@media (max-width: 550px) {
+ .gallery-item {
+ max-width: calc(33.33% - 0.5rem);
+ min-width: calc(33.33% - 0.5rem);
+ }
+}
.gallery-image {
margin: 0;
padding: 0;
@@ -250,7 +304,7 @@ nav .btn {
object-fit: cover;
-o-object-position: center;
object-position: center;
- border-radius: -0.25rem;
+ border-radius: 3px;
}
.nsfw-blur {
@@ -258,6 +312,10 @@ nav .btn {
}
.nsfw-warning {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
width: 100%;
height: 100%;
top: 0;
@@ -266,10 +324,6 @@ nav .btn {
right: 0;
position: absolute;
z-index: 5;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
text-decoration: none;
font-family: "Secular One", sans-serif;
background-color: rgba(21, 21, 21, 0.7333333333);
@@ -297,10 +351,60 @@ nav .btn {
| IMAGE
|-------------------------------------------------------------
*/
+.fullscreen-image {
+ width: 101vw;
+ height: 101vh;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ background-color: rgba(21, 21, 21, 0.7333333333);
+ -webkit-backdrop-filter: blur(15px);
+ backdrop-filter: blur(15px);
+ z-index: 999;
+ transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ display: none;
+ opacity: 0;
+}
+.fullscreen-image img {
+ max-width: 95%;
+ max-height: 95%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ border-radius: 0.4rem;
+ 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: 0.4rem;
+ 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;
- padding: 0;
- width: 100%;
+ padding: 0.5rem;
+ width: calc(100% - 1rem);
max-height: 50vh;
height: auto;
min-height: 30vh;
@@ -308,7 +412,7 @@ nav .btn {
background-color: rgba(21, 21, 21, 0.7333333333);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
- border-radius: 0.25rem;
+ border-radius: 0.4rem;
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
}
@@ -323,28 +427,24 @@ nav .btn {
width: auto;
max-height: inherit;
height: auto;
- border-radius: 0.25rem;
+ border-radius: 3px;
transition: opacity 0.5s;
}
.preview-button {
- width: 1.5rem;
- padding: 0;
+ padding: 0.25rem;
+ width: 2rem;
+ height: 2rem;
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
display: block;
box-sizing: border-box;
- font-size: 14px;
- font-weight: 500;
- font-family: "Secular One", sans-serif;
- text-decoration: none;
border: none;
- border-radius: calc(0.25rem - (0.5rem + 3px));
+ border-radius: 3px;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
- background-color: #151515;
- opacity: 0.8;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+ background-color: rgba(21, 21, 21, 0.7333333333);
+ z-index: 2;
}
.preview-button img {
width: 1.5rem;
@@ -353,63 +453,9 @@ nav .btn {
.preview-button:hover {
outline: #E8E3E3 0.2rem solid;
color: #E8E3E3;
+ cursor: pointer;
}
-.image-description {
- margin-bottom: 1rem;
- padding: 0.5rem 0.5rem 0 0.5rem;
- width: calc(100% - 1.4rem);
- background-color: #151515;
- color: #E8E3E3;
- border-radius: 0.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.image-description > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.image-description h1,
-.image-description h2,
-.image-description h3,
-.image-description h4,
-.image-description h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.image-description p,
-.image-description a,
-.image-description button,
-.image-description input {
- font-family: "Secular One", sans-serif;
-}
-
-.image-detail {
- margin-bottom: 1rem;
- padding: 0.5rem 0.5rem 0 0.5rem;
- width: calc(100% - 1.4rem);
- background-color: #151515;
- color: #E8E3E3;
- border-radius: 0.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.image-detail > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.image-detail h1,
-.image-detail h2,
-.image-detail h3,
-.image-detail h4,
-.image-detail h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.image-detail p,
-.image-detail a,
-.image-detail button,
-.image-detail input {
- font-family: "Secular One", sans-serif;
-}
.image-detail > div {
width: 100%;
display: flex;
@@ -434,34 +480,6 @@ nav .btn {
width: auto;
}
}
-.tags-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.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.tags-root > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.tags-root h1,
-.tags-root h2,
-.tags-root h3,
-.tags-root h4,
-.tags-root h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.tags-root p,
-.tags-root a,
-.tags-root button,
-.tags-root input {
- font-family: "Secular One", sans-serif;
-}
-
.tags {
display: flex;
flex-direction: row;
@@ -475,105 +493,261 @@ nav .btn {
padding: 0.5rem;
display: block;
background-color: #8C977D;
- border-radius: calc(0.25rem - (0.5rem + 3px));
+ border-radius: 3px;
font-family: "Secular One", sans-serif;
}
.tag::before {
content: "# ";
}
-.danger-zone {
- margin-bottom: 1rem;
- padding: 0.5rem 0.5rem 0 0.5rem;
- width: calc(100% - 1.4rem);
- background-color: #151515;
- color: #E8E3E3;
- border-radius: 0.25rem;
- border: 0.2rem solid #B66467;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.danger-zone > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.danger-zone h1,
-.danger-zone h2,
-.danger-zone h3,
-.danger-zone h4,
-.danger-zone h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.danger-zone p,
-.danger-zone a,
-.danger-zone button,
-.danger-zone input {
- font-family: "Secular One", sans-serif;
-}
-
/*
|-------------------------------------------------------------
- | ABOUT
+ | Groups
|-------------------------------------------------------------
*/
-.about-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.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+.group-banner {
+ position: relative;
}
-.about-root > * {
+
+.group-description {
+ height: auto;
+ width: auto;
+ position: relative;
+ z-index: 1;
+}
+.group-description h2 span {
+ margin-left: 0.25rem;
+ font-size: 16px;
+}
+.group-description h2 a {
+ margin-left: 0.25rem;
+ font-size: 16px;
+ color: #8C977D;
+ text-decoration: none;
+}
+.group-description > * {
+ margin: 0 0 0.5rem 0;
+}
+.group-description a {
+ text-decoration: none;
+}
+.group-description a:hover {
+ color: #8C977D;
+}
+.group-description .btn:hover {
+ color: #E8E3E3;
+}
+
+.group-cover {
+ height: 100%;
+ max-width: 50%;
+ width: auto;
+ position: absolute;
+ display: inline-block;
+ right: 0;
+ top: 0;
+ overflow: hidden;
+ z-index: 0;
+}
+.group-cover span {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background: linear-gradient(to right, #151515, rgba(21, 21, 21, 0.8), rgba(21, 21, 21, 0.2));
+ z-index: 1;
+ border-radius: 0.2rem;
+}
+.group-cover img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ margin-left: auto;
+ border-radius: 0.2rem;
+}
+
+.selectedImage {
+ outline: #8C977D solid 0.3rem;
+ transform: scale(0.8) !important;
+}
+
+.group-name {
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ transition: opacity 0.1s cubic-bezier(0.19, 1, 0.22, 1);
+ z-index: 6;
+ opacity: 0;
+ font-size: 17px;
+ font-family: "Secular One", sans-serif;
+ text-decoration: none;
+ text-align: center;
+}
+
+.gallery-group {
+ width: 100%;
+ height: 100%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+ z-index: 5;
+}
+
+.group-item .gallery-group {
+ -webkit-backdrop-filter: brightness(0.5);
+ backdrop-filter: brightness(0.5);
+}
+.group-item .nsfw-warning > * {
+ display: none;
+}
+.group-item .group-name {
+ opacity: 1;
+}
+
+.group-make {
+ margin: 0.25rem;
+ padding: 0;
+ height: auto;
+ max-width: calc(20% - 0.5rem);
+ min-width: calc(20% - 0.5rem);
+ border-radius: 3px;
+ position: relative;
+ overflow: hidden;
+ flex: 1 0 150px;
+ transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
+}
+.group-make:hover {
+ outline: #E8E3E3 0.2rem solid;
+}
+.group-make:after {
+ content: "";
+ display: block;
+ padding-bottom: 100%;
+}
+.group-make button {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ background-color: #121212;
+ border-radius: 3px;
+ border: none;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+ z-index: 5;
+ text-decoration: none;
+ font-family: "Secular One", sans-serif;
+}
+.group-make button:hover {
+ color: #E8E3E3;
+ cursor: pointer;
+}
+.group-make button span {
+ text-align: center;
+}
+.group-make button img {
+ margin: 0.25rem;
+ width: 2.5rem;
+ height: 2.5rem;
+}
+
+@media (max-width: 800px) {
+ .group-make {
+ max-width: calc(25% - 0.5rem);
+ min-width: calc(25% - 0.5rem);
+ }
+}
+@media (max-width: 550px) {
+ .group-make {
+ max-width: calc(33.33% - 0.5rem);
+ min-width: calc(33.33% - 0.5rem);
+ }
+}
+/*
+ |-------------------------------------------------------------
+ | profile
+ |-------------------------------------------------------------
+*/
+.profile-root {
+ margin: 3rem auto 1rem auto;
+ min-height: 7rem;
+ position: relative;
+ text-align: center;
+}
+.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.4rem;
+ 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;
}
-.about-root h1,
-.about-root h2,
-.about-root h3,
-.about-root h4,
-.about-root h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.about-root p,
-.about-root a,
-.about-root button,
-.about-root input {
- font-family: "Secular One", sans-serif;
-}
+@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
|-------------------------------------------------------------
*/
-.upload-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.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.upload-root > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.upload-root h1,
-.upload-root h2,
-.upload-root h3,
-.upload-root h4,
-.upload-root h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.upload-root p,
-.upload-root a,
-.upload-root button,
-.upload-root input {
- font-family: "Secular One", sans-serif;
+.upload-root > img {
+ margin: 0 auto;
+ max-width: 100%;
+ max-height: 15rem;
+ border-radius: 3px;
+ display: flex;
+ flex-direction: column;
}
/*
@@ -581,62 +755,37 @@ nav .btn {
| ACCOUNT
|-------------------------------------------------------------
*/
-.account-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.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+.pfp-upload {
+ display: flex;
+ flex-direction: row;
}
-.account-root > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
+.pfp-upload > img {
+ margin-left: 0.5rem;
+ width: 7.813rem;
+ height: 7.813rem;
+ -o-object-fit: cover;
+ object-fit: cover;
+ border-radius: 3px;
+ background-color: #121212;
}
-.account-root h1,
-.account-root h2,
-.account-root h3,
-.account-root h4,
-.account-root h5 {
- font-family: "Lexend Deca", sans-serif;
+.pfp-upload form > * {
+ margin: 0 0 0.5rem 0;
}
-.account-root p,
-.account-root a,
-.account-root button,
-.account-root input {
- font-family: "Secular One", sans-serif;
+.pfp-upload form > *:last-child {
+ margin: 0 0 0 0;
}
-.admin-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.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+@media (max-width: 621px) {
+ .pfp-upload {
+ display: flex;
+ flex-direction: column-reverse;
+ }
+ .pfp-upload > img {
+ margin: 0 auto 1rem;
+ width: 10rem;
+ height: 10rem;
+ }
}
-.admin-root > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.admin-root h1,
-.admin-root h2,
-.admin-root h3,
-.admin-root h4,
-.admin-root h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.admin-root p,
-.admin-root a,
-.admin-root button,
-.admin-root input {
- font-family: "Secular One", sans-serif;
-}
-
.tabs {
display: flex;
flex-direction: row;
@@ -661,18 +810,18 @@ nav .btn {
display: none;
flex-direction: column;
background-color: #151515;
- border-radius: calc(0.25rem - (0.5rem + 3px));
+ border-radius: 3px;
}
.log {
- min-width: 769px;
+ min-width: 850px;
padding: 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.log:nth-child(even) {
- background-color: rgba(255, 255, 255, 0.0666666667);
+ background-color: rgba(232, 227, 227, 0.0666666667);
}
.log > * {
margin: 0 0.5rem 0 0;
@@ -708,18 +857,18 @@ nav .btn {
display: none;
flex-direction: column;
background-color: #151515;
- border-radius: calc(0.25rem - (0.5rem + 3px));
+ border-radius: 3px;
}
.ban {
- min-width: 769px;
+ min-width: 900px;
padding: 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.ban:nth-child(even) {
- background-color: rgba(255, 255, 255, 0.0666666667);
+ background-color: rgba(232, 227, 227, 0.0666666667);
}
.ban > * {
margin: 0 0.5rem 0 0;
@@ -744,7 +893,7 @@ nav .btn {
}
.perm {
- border-left: #B66467 0.2rem solid;
+ border-left: #8C977D 0.2rem solid;
}
.ban:first-of-type {
@@ -762,18 +911,18 @@ nav .btn {
display: none;
flex-direction: column;
background-color: #151515;
- border-radius: calc(0.25rem - (0.5rem + 3px));
+ border-radius: 3px;
}
.user {
- min-width: 769px;
+ min-width: 950px;
padding: 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.user:nth-child(even) {
- background-color: rgba(255, 255, 255, 0.0666666667);
+ background-color: rgba(232, 227, 227, 0.0666666667);
}
.user > * {
margin: 0 0.5rem 0 0;
@@ -811,129 +960,6 @@ nav .btn {
top: 0;
}
-.signup-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.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
- display: none;
-}
-.signup-root > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.signup-root h1,
-.signup-root h2,
-.signup-root h3,
-.signup-root h4,
-.signup-root h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.signup-root p,
-.signup-root a,
-.signup-root button,
-.signup-root input {
- font-family: "Secular One", sans-serif;
-}
-
-.login-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.25rem;
- border: 0.2rem solid #8C977D;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.login-root > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.login-root h1,
-.login-root h2,
-.login-root h3,
-.login-root h4,
-.login-root h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.login-root p,
-.login-root a,
-.login-root button,
-.login-root input {
- font-family: "Secular One", sans-serif;
-}
-
-/*
- |-------------------------------------------------------------
- | PASSWORD RESET
- |-------------------------------------------------------------
-*/
-.password-reset-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.25rem;
- border: 0.2rem solid #B66467;
- box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.password-reset-root > * {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-.password-reset-root h1,
-.password-reset-root h2,
-.password-reset-root h3,
-.password-reset-root h4,
-.password-reset-root h5 {
- font-family: "Lexend Deca", sans-serif;
-}
-.password-reset-root p,
-.password-reset-root a,
-.password-reset-root button,
-.password-reset-root input {
- font-family: "Secular One", sans-serif;
-}
-
-/*
- |-------------------------------------------------------------
- | 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.25rem;
- 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;
-}
-.error-root p,
-.error-root a,
-.error-root button,
-.error-root input {
- font-family: "Secular One", sans-serif;
-}
-
/*
|-------------------------------------------------------------
| FOOTER
@@ -941,23 +967,27 @@ nav .btn {
*/
footer {
margin: 0 auto;
- width: calc(100% - 1.4rem);
+ width: auto;
text-align: center;
+ font-size: 12px;
+ text-transform: uppercase;
+ display: flex;
+ flex-direction: row;
}
footer p {
- margin: 0 0.5rem;
+ margin: 0.2rem;
+ padding: 0;
text-decoration: none;
- font-size: 16px;
font-family: "Secular One", sans-serif;
}
footer a {
- margin: 0 0.5rem;
+ margin: 0.2rem;
+ padding: 0;
text-decoration: none;
- font-size: 16px;
font-family: "Secular One", sans-serif;
}
footer a:hover {
- color: #FF7700;
+ color: #D8A657;
}
/*
@@ -1010,7 +1040,7 @@ body * {
font-family: "Secular One", sans-serif;
text-decoration: none;
border: none;
- border-radius: calc(0.25rem - (0.5rem + 3px));
+ border-radius: 3px;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover {
@@ -1026,7 +1056,7 @@ body * {
text-decoration: none;
background-color: #E8E3E3;
border: none;
- border-radius: 0.25rem;
+ border-radius: 3px;
}
.btn:where(input[type=file])::file-selector-button {
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
@@ -1036,23 +1066,31 @@ body * {
text-decoration: none;
background-color: #E8E3E3;
border: none;
- border-radius: 0.25rem;
+ border-radius: 3px;
}
a.btn {
text-align: center;
}
-.btn-good {
- background-color: #8C977D;
-}
-
.btn-bad {
background-color: #B66467;
+ /*color: darken($warning, 40%);*/
+}
+
+.btn-warning {
+ background-color: #D8A657;
+ /*color: darken($warning, 40%);*/
+}
+
+.btn-good {
+ background-color: #8C977D;
+ /*color: darken($warning, 40%);*/
}
.btn-neutral {
- background-color: #151515;
+ background-color: #121212;
+ /*color: $white;*/
}
/*
@@ -1095,6 +1133,19 @@ br {
line-height: 0.25rem;
}
+/*
+ |-------------------------------------------------------------
+ | Link text
+ |-------------------------------------------------------------
+*/
+a.link {
+ display: inline;
+ text-decoration: underline;
+}
+a.link:hover {
+ color: #8C977D;
+}
+
/*
|-------------------------------------------------------------
| BACK TO TOP
@@ -1112,7 +1163,7 @@ br {
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 9082cdc..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 + 3px));
+ @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: $rad;
+ @if calc($rad - 0.5rem) > 0 {
+ border-radius: calc($rad - 0.5rem);
+ } @else {
+ border-radius: 3px;
+ }
}
}
@@ -110,16 +118,22 @@ a.btn {
text-align: center;
}
-.btn-good {
- background-color: $page-accent;
-}
.btn-bad {
- background-color: $red;
+ background-color: $warning;
+ /*color: darken($warning, 40%);*/
+}
+.btn-warning {
+ background-color: $alert;
+ /*color: darken($warning, 40%);*/
+}
+.btn-good {
+ background-color: $page-accent;
+ /*color: darken($warning, 40%);*/
}
-
.btn-neutral {
- background-color: $black;
+ background-color: $neutral;
+ /*color: $white;*/
}
/*
@@ -131,7 +145,7 @@ form {
width: 100%;
box-sizing: content-box;
- >* {
+ & > * {
margin-bottom: 0.5rem;
}
}
@@ -166,6 +180,20 @@ br {
line-height: 0.25rem;
}
+/*
+ |-------------------------------------------------------------
+ | Link text
+ |-------------------------------------------------------------
+*/
+a.link {
+ display: inline;
+ text-decoration: underline;
+
+ &:hover {
+ color: $page-accent;
+ }
+}
+
/*
|-------------------------------------------------------------
| BACK TO TOP
@@ -185,7 +213,12 @@ br {
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 2d03dfd..93061be 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -1,26 +1,40 @@
+/*
+ |-------------------------------------------------------------
+ | DEFAULTS
+ |-------------------------------------------------------------
+*/
+.defaultSpacing {
+ @include defaultSpacing();
+}
+
+.defaultDecoration {
+ @include defaultDecoration($page-accent);
+}
+.warningDecoration {
+ @include defaultDecoration($red);
+}
+
+.defaultFonts {
+ @include defaultFont();
+}
+
/*
|-------------------------------------------------------------
| INDEX
|-------------------------------------------------------------
*/
.info-text {
- @include defaultFont();
-
margin: 1rem 0 1rem 0.5rem;
padding: 0;
text-align: center;
h1 {
- font-family: $font-header;
-
margin-top: 0;
margin-bottom: 1rem;
}
p {
- font-family: $font-body;
-
margin-top: 0;
margin-bottom: 1rem;
}
@@ -46,17 +60,7 @@
margin-bottom: 1rem;
padding: 0.25rem;
- background-color: $bg;
- color: $fg;
-
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
-
- border: 0.2rem solid $page-accent;
-
- border-radius: $rad;
- box-shadow: $shadow;
+ @include flexLeft(none);
}
.gallery-item {
@@ -64,10 +68,15 @@
padding: 0;
height: auto;
- max-width: calc(33.33% - 0.5rem);
+ max-width: calc(20% - 0.5rem);
+ 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;
@@ -84,6 +93,10 @@
z-index: 9;
}
+ &:active {
+ transform: scale(0.8) !important;
+ }
+
&:after {
content: "";
display: block;
@@ -91,6 +104,19 @@
}
}
+@media (max-width: 800px) {
+ .gallery-item {
+ max-width: calc(25% - 0.5rem);
+ min-width: calc(25% - 0.5rem);
+ }
+}
+@media (max-width: 550px) {
+ .gallery-item {
+ max-width: calc(33.33% - 0.5rem);
+ min-width: calc(33.33% - 0.5rem);
+ }
+}
+
.gallery-image {
margin: 0;
padding: 0;
@@ -108,7 +134,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 {
@@ -116,6 +146,9 @@
}
.nsfw-warning {
+ @include flexDown(center);
+ align-items: center;
+
width: 100%;
height: 100%;
@@ -127,11 +160,6 @@
position: absolute;
z-index: 5;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
text-decoration: none;
font-family: $font-body;
@@ -168,11 +196,78 @@
| IMAGE
|-------------------------------------------------------------
*/
+.fullscreen-image {
+ width: 101vw; height: 101vh;
+
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-050%) translateY(-50%);
+
+ background-color: $bg-alt;
+ backdrop-filter: blur(15px);
+
+ z-index: 999;
+
+ transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+ display: none; // Automatically hidden, revealed on fullscreen
+ opacity: 0; // expose
+
+ img {
+ max-width: 95%; max-height: 95%;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+
+ border-radius: $rad;
+
+ 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;
+ border-radius: $rad;
+
+ transition: outline 0.1s cubic-bezier(.19, 1, .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 {
margin: 1rem 0 2rem 0;
- padding: 0;
+ padding: 0.5rem;
- width: 100%;
+ width: calc(100% - 1rem);
max-height: 50vh;
height: auto;
min-height: 30vh;
@@ -201,15 +296,19 @@
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;
}
.preview-button {
- width: 1.5rem;
+ padding: 0.25rem;
- padding: 0;
+ width: 2rem; height: 2rem;
position: absolute;
bottom: 0.5rem;
@@ -218,22 +317,18 @@
display: block;
box-sizing: border-box;
- font-size: 14px;
- font-weight: 500;
- font-family: $font-body;
-
- text-decoration: none;
-
border: none;
- border-radius: calc($rad - (0.5rem + 3px));
+ @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);
- background-color: $black;
+ background-color: $bg-alt;
- opacity: 0.8;
-
- box-shadow: $shadow;
+ z-index: +2;
img {
width: 1.5rem;
@@ -244,21 +339,14 @@
&:hover {
outline: $white 0.2rem solid;
color: $fg;
- }
-}
-// DESCRIPTION
-.image-description {
- @include defaultDecoration($page-accent);
- @include defaultFont();
+ cursor: pointer;
+ }
}
// DETAILS
.image-detail {
- @include defaultDecoration($page-accent);
- @include defaultFont();
-
&>div {
width: 100%;
display: flex;
@@ -289,12 +377,6 @@
}
}
-// TAGS
-.tags-root {
- @include defaultDecoration($page-accent);
- @include defaultFont();
-}
-
.tags {
@include flexLeft(auto);
margin-bottom: 0;
@@ -308,7 +390,11 @@
background-color: $page-accent;
- border-radius: calc($rad - (0.5rem + 3px));
+ @if calc($rad - 0.5rem) > 0 {
+ border-radius: calc($rad - 0.5rem);
+ } @else {
+ border-radius: 3px;
+ }
font-family: $font-body;
@@ -317,20 +403,307 @@
}
}
-// DANGER ZONE
-.danger-zone {
- @include defaultDecoration($red);
- @include defaultFont();
-}
-
/*
|-------------------------------------------------------------
- | ABOUT
+ | Groups
|-------------------------------------------------------------
*/
-.about-root {
- @include defaultDecoration($page-accent);
- @include defaultFont();
+.group-banner {
+ position: relative;
+}
+
+.group-description {
+ height: auto;
+ width: auto;
+
+ position: relative;
+
+ z-index: +1;
+
+ h2 {
+ span {
+ margin-left: 0.25rem;
+
+ font-size: 16px;
+ }
+ a {
+ margin-left: 0.25rem;
+
+ font-size: 16px;
+
+ color: $page-accent;
+
+ text-decoration: none;
+ }
+ }
+
+ & > * {
+ margin: 0 0 0.5rem 0;
+ }
+
+ a {
+ text-decoration: none;
+
+ &:hover {
+ color: $page-accent;
+ }
+ }
+
+ .btn:hover {
+ color: $fg;
+ }
+}
+
+.group-cover {
+ height: 100%;
+ max-width: 50%;
+ width: auto;
+
+ position: absolute;
+
+ display: inline-block;
+
+ right: 0;
+ top: 0;
+
+ overflow: hidden;
+
+ z-index: 0;
+
+ span {
+ width: 100%;
+ height: 100%;
+
+ position: absolute;
+
+ background: linear-gradient(to right, $bg, rgba($bg, 0.8), rgba($bg, 0.2));
+
+ z-index: +1;
+
+ border-radius: calc($rad - $border-thickness);
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+
+ object-fit: cover;
+
+ margin-left: auto;
+
+ border-radius: calc($rad - $border-thickness);
+ }
+}
+
+.selectedImage {
+ outline: $page-accent solid 0.3rem;
+ transform: scale(0.8) !important;
+}
+.group-name {
+ margin: 0;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+
+ transition: opacity 0.1s cubic-bezier(.19, 1, .22, 1);
+
+ z-index: 6;
+
+ opacity: 0;
+ font-size: 17px;
+ font-family: $font-body;
+ text-decoration: none;
+ text-align: center;
+}
+
+.gallery-group {
+ width: 100%;
+ height: 100%;
+
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ position: absolute;
+ z-index: 5;
+}
+
+.group-item {
+ & .gallery-group {
+ backdrop-filter: brightness(0.5);
+ }
+ & .nsfw-warning > * {
+ display: none;
+ }
+ & .group-name {
+ opacity: 1;
+ }
+}
+
+.group-make {
+ margin: 0.25rem;
+ padding: 0;
+
+ height: auto;
+ max-width: calc(20% - 0.5rem);
+ min-width: calc(20% - 0.5rem);
+
+ @if calc($rad - 0.5rem) > 0 {
+ border-radius: calc($rad - 0.5rem);
+ } @else {
+ border-radius: 3px;
+ }
+
+ position: relative;
+
+ overflow: hidden;
+
+ flex: 1 0 150px;
+
+ transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
+
+ &:hover {
+ outline: $white 0.2rem solid;
+ }
+
+ &:after {
+ content: "";
+ display: block;
+ padding-bottom: 100%;
+ }
+
+ button {
+ @include flexDown(center);
+ align-items: center;
+
+ width: 100%;
+ height: 100%;
+
+ 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;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ position: absolute;
+ z-index: 5;
+
+ text-decoration: none;
+ font-family: $font-body;
+
+ &:hover {
+ color: $fg;
+
+ cursor: pointer;
+ }
+
+ span {
+ text-align: center;
+ }
+
+ img {
+ margin: 0.25rem;
+
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+ }
+}
+@media (max-width: 800px) {
+ .group-make {
+ max-width: calc(25% - 0.5rem);
+ min-width: calc(25% - 0.5rem);
+ }
+}
+@media (max-width: 550px) {
+ .group-make {
+ max-width: calc(33.33% - 0.5rem);
+ min-width: calc(33.33% - 0.5rem);
+ }
+}
+/*
+ |-------------------------------------------------------------
+ | profile
+ |-------------------------------------------------------------
+*/
+.profile-root {
+ 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: $border;
+
+ 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;
+ }
+ }
}
/*
@@ -338,9 +711,20 @@
| UPLOAD
|-------------------------------------------------------------
*/
-.upload-root {
- @include defaultDecoration($page-accent);
- @include defaultFont();
+.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;
+ }
+
+ display: flex;
+ flex-direction: column;
}
/*
@@ -348,13 +732,46 @@
| ACCOUNT
|-------------------------------------------------------------
*/
-.account-root {
- @include defaultDecoration($page-accent);
- @include defaultFont();
+.pfp-upload {
+ display: flex;
+ flex-direction: row;
+
+ & > img {
+ margin-left: 0.5rem;
+
+ width: 7.813rem;
+ height: 7.813rem;
+
+ object-fit: cover;
+
+ @if calc($rad - 0.5rem) > 0 {
+ border-radius: calc($rad - 0.5rem);
+ } @else {
+ border-radius: 3px;
+ }
+
+ background-color: $black;
+ }
+
+ form > * {
+ margin: 0 0 0.5rem 0;
+ }
+ form > *:last-child {
+ margin: 0 0 0 0;
+ }
}
-.admin-root {
- @include defaultDecoration($page-accent);
- @include defaultFont();
+@media (max-width: 621px) {
+ .pfp-upload {
+ display: flex;
+ flex-direction: column-reverse;
+
+ & > img {
+ margin: 0 auto 1rem;
+
+ width: 10rem;
+ height: 10rem;
+ }
+ }
}
.tabs {
@@ -383,10 +800,14 @@
display: none; flex-direction: column;
background-color: $bg;
- border-radius: calc($rad - (0.5rem + 3px));
+ @if calc($rad - 0.5rem) > 0 {
+ border-radius: calc($rad - 0.5rem);
+ } @else {
+ border-radius: 3px;
+ }
}
.log {
- min-width: 769px;
+ min-width: 850px;
padding: 0.5rem;
@@ -395,7 +816,7 @@
justify-content: space-between;
&:nth-child(even) {
- background-color: #ffffff11;
+ background-color: #E8E3E311;
}
& > * {
@@ -435,10 +856,14 @@
display: none; flex-direction: column;
background-color: $bg;
- border-radius: calc($rad - (0.5rem + 3px));
+ @if calc($rad - 0.5rem) > 0 {
+ border-radius: calc($rad - 0.5rem);
+ } @else {
+ border-radius: 3px;
+ }
}
.ban {
- min-width: 769px;
+ min-width: 900px;
padding: 0.5rem;
@@ -447,7 +872,7 @@
justify-content: space-between;
&:nth-child(even) {
- background-color: #ffffff11;
+ background-color: #E8E3E311;
}
& > * {
@@ -474,7 +899,7 @@
}
}
.perm {
- border-left: $red 0.2rem solid;
+ border-left: $border;
}
.ban:first-of-type {
background-color: $bg;
@@ -493,10 +918,14 @@
display: none; flex-direction: column;
background-color: $bg;
- border-radius: calc($rad - (0.5rem + 3px));
+ @if calc($rad - 0.5rem) > 0 {
+ border-radius: calc($rad - 0.5rem);
+ } @else {
+ border-radius: 3px;
+ }
}
.user {
- min-width: 769px;
+ min-width: 950px;
padding: 0.5rem;
@@ -505,7 +934,7 @@
justify-content: space-between;
&:nth-child(even) {
- background-color: #ffffff11;
+ background-color: #E8E3E311;
}
& > * {
@@ -535,41 +964,10 @@
}
}
.is-admin {
- border-left: $page-accent 0.2rem solid;
+ border-left: $border;
}
.user:first-of-type {
background-color: $bg;
position: sticky;
top: 0;
-}
-
-.signup-root {
- @include defaultDecoration($page-accent);
- @include defaultFont();
- // By default its hidden, in place is login
- display: none;
-}
-.login-root {
- @include defaultDecoration($page-accent);
- @include defaultFont();
-}
-
-/*
- |-------------------------------------------------------------
- | PASSWORD RESET
- |-------------------------------------------------------------
-*/
-.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/css/scss/_footer.scss b/css/scss/_footer.scss
index c32c2a3..0485944 100644
--- a/css/scss/_footer.scss
+++ b/css/scss/_footer.scss
@@ -6,23 +6,28 @@
footer {
margin: 0 auto;
- width: calc(100% - 1.4rem);
+ width: auto;
text-align: center;
+ font-size: 12px;
+ text-transform: uppercase;
+
+ display: flex; flex-direction: row;
+
p {
- margin: 0 0.5rem;
+ margin: 0.2rem;
+ padding: 0;
text-decoration: none;
- font-size: 16px;
font-family: $font-body;
}
a {
- margin: 0 0.5rem;
+ margin: 0.2rem;
+ padding: 0;
text-decoration: none;
- font-size: 16px;
font-family: $font-body;
diff --git a/css/scss/_mixin.scss b/css/scss/_mixin.scss
index 793ab56..be2d555 100644
--- a/css/scss/_mixin.scss
+++ b/css/scss/_mixin.scss
@@ -1,18 +1,18 @@
-@mixin defaultDecoration($border) {
- margin-bottom: 1rem;
- padding: 0.5rem 0.5rem 0 0.5rem;
-
- width: calc(100% - 1.4rem);
-
+@mixin defaultDecoration($border-colour) {
background-color: $bg;
color: $fg;
border-radius: $rad;
- border: 0.2rem solid $border;
+ border: $border-colour $border-thickness solid;
box-shadow: $shadow;
+}
+@mixin defaultSpacing() {
+ margin-bottom: 1rem;
+ padding: 0.5rem 0.5rem 0 0.5rem;
+ width: calc(100% - 1.4rem);
>* {
margin-top: 0;
@@ -28,6 +28,7 @@
h4,
h5 {
font-family: $font-header;
+ text-rendering: optimizeLegibility;
}
p,
@@ -35,6 +36,7 @@
button,
input {
font-family: $font-body;
+ text-rendering: optimizeLegibility;
}
}
diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss
index 0ef6565..f31608a 100644
--- a/css/scss/_navigation.scss
+++ b/css/scss/_navigation.scss
@@ -11,7 +11,7 @@ nav {
padding: 0.5rem;
width: calc(100% - 1.4rem);
- height: 2.5rem;
+ height: auto;
position: sticky;
z-index: 99;
@@ -56,6 +56,10 @@ nav {
font-family: $font-body;
width: auto;
+
+ a.btn {
+ padding: 0.2rem 0.5rem;
+ }
}
.nav-mobile {
@@ -77,6 +81,7 @@ nav {
margin: 0;
width: calc(100% - 1rem);
+ height: 2.5rem;
position: fixed;
top: auto;
@@ -88,7 +93,7 @@ nav {
backdrop-filter: blur(8px);
border: none;
- border-top: 3px solid $green;
+ border-top: $border;
border-radius: 0;
backdrop-filter: blur(16px);
@@ -100,6 +105,12 @@ nav {
}
}
+ .nav-links {
+ a.btn {
+ padding: 0.5rem;
+ }
+ }
+
.nav-hide {
display: none;
}
diff --git a/css/scss/_variables.scss b/css/scss/_variables.scss
index a3ded82..9e3fee1 100644
--- a/css/scss/_variables.scss
+++ b/css/scss/_variables.scss
@@ -5,15 +5,26 @@ $fg: #E8E3E3;
$fg-alt: #151515;
$red: #B66467;
-$orange: #FF7700;
+$orange: #D8A657;
+$yellow: #D9BC8C;
$green: #8C977D;
-$black: #151515;
+$blue: #8DA3B9;
+$purple: #A988B0;
+
+$black: #121212;
$white: #E8E3E3;
$page-accent: #8C977D;
+$warning: $red;
+$alert: $orange;
+$success: $green;
+$neutral: $black;
$shadow: 6px 6px 2px #15151566;
-$rad: 0.25rem;
+$rad: 0.4rem;
+$border-thickness: 0.2rem;
+
+$border: $page-accent $border-thickness solid;
$weight-bold: 621;
$weight-normal: 400;
@@ -35,13 +46,21 @@ sans-serif;
--red: #{$red};
--orange: #{$orange};
+ --yellow: #{$yellow};
--green: #{$green};
+ --blue: #{$blue};
+ --purple: #{$purple};
+
--black: #{$black};
--white: #{$white};
--accent: #{$page-accent};
+ --warning: #{$warning};
+ --alert: #{$alert};
+ --success: #{$success};
+ --neutral: #{$neutral};
--shadow: #{$shadow};
-
--rad: #{$rad};
+ --border: #{$border};
}
\ No newline at end of file
diff --git a/error.php b/error.php
deleted file mode 100644
index 576a58e..0000000
--- a/error.php
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
Woops...
- An error occured while connecting to the server. If you're an admin, check the database configuration and/or make sure the database is alive";
- } else {
- echo "
An error occured! But no description was provided.
";
- }
- ?>
-
-
-
-
-
-
\ No newline at end of file
diff --git a/group.php b/group.php
new file mode 100644
index 0000000..5fc6c2e
--- /dev/null
+++ b/group.php
@@ -0,0 +1,365 @@
+get_group_info($conn, $_GET['id']);
+
+ if (!isset($group) || empty($group)) {
+ header("Location: group.php");
+ $_SESSION['err'] = "You followed a broken link";
+ }
+ }
+ if (isset($_SESSION['err'])) {
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
";
+
+ $author_info = $user_info->get_user_info($conn, $group['author']);
+ echo "
";
+
+ $group_members = $group_info->get_group_members($conn, $_GET['id']);
+ if (!empty($group_members)) {
+ $members_array = array();
+ foreach ($group_members as $member) {
+ $member_info = $user_info->get_user_info($conn, $member);
+ if (!empty($member_info['username'])) $members_array[] = "
".$member_info['username']." ";
+ }
+ echo "
Featured: ".implode(", ", $members_array)."
";
+ }
+
+ if (!empty($group['image_list'])) echo "
Images: ".count(explode(" ", $group['image_list']))."
";
+
+ $upload_time = new DateTime($group['created_on']);
+ echo "
Created at: ".$upload_time->format('d/m/Y H:i:s T')."
";
+ ?>
+
+ Last Modified: ".$diff->time($group['last_modified'])."";
+
+ if ($_GET['mode'] == "edit") {
+ if ($_SESSION['id'] == $group['author'] || $user_info->is_admin($conn, $_SESSION['id'])) {
+ echo "
";
+
+ echo "
Delete ";
+ ?>
+
+ Update title";
+ ?>
+
+ ";
+
+ $image_request = mysqli_query($conn, "SELECT * FROM images");
+ echo "
";
+
+ echo "
Back ";
+ }
+ } else {
+ if ($_SESSION['id'] == $group['author'] || $user_info->is_admin($conn, $_SESSION['id'])) {
+ echo "
Edit ";
+ }
+ ?>
+
+
+ ";
+
+ $cover_image = $image_info->get_image_info($conn, $image_list[array_rand($image_list, 1)]);
+ if (!empty($cover_image['imagename'])) {
+ ?>
+
+
+
src='images/'/>
+
+ ";
+ }
+ ?>
+
+
+
Nothing here!
+
There are no images in the group, add some!
+
";
+ echo "
";
+ } else {
+ echo "
";
+ }
+ if (isset($_GET['id']) && !empty($_GET['id'])) {
+ if (isset($_GET['mode']) && $_GET['mode'] == "edit") {
+ $image_request = mysqli_query($conn, "SELECT * FROM images ORDER BY id DESC");
+
+ while ($image = mysqli_fetch_array($image_request)) {
+ // Getting thumbnail
+ if (file_exists("images/thumbnails/".$image['imagename'])) {
+ $image_path = "images/thumbnails/".$image['imagename'];
+ } else {
+ $image_path = "images/".$image['imagename'];
+ }
+
+ if (in_array($image['id'], $image_list)) {
+ echo "
+
+
";
+ } else {
+ echo "
+
+
";
+ }
+ }
+
+ ?>
+
+
+
NSFW
+
+
";
+ } else {
+ echo "
+
+
";
+ }
+ }
+ } catch(Exception $e) {
+ $e;
+ }
+ }
+ }
+ } elseif (!isset($_GET['id']) && empty($_GET['id'])) {
+ if ($_SESSION["loggedin"]) {
+ echo "
+
Make new group
+
";
+
+ ?>
+
+
+
+
+ get_image_info($conn, $image_list[array_rand($image_list, 1)]);
+
+ // Getting thumbnail
+ if (!empty($image['imagename'])) {
+ if (file_exists("images/thumbnails/".$image['imagename'])) {
+ $image_path = "images/thumbnails/".$image['imagename'];
+ } else {
+ $image_path = "images/".$image['imagename'];
+ }
+ } else {
+ $image_path = "assets/no_image.png";
+ }
+
+
+ // Check for NSFW tag
+ if (str_contains($image['tags'], "nsfw")) {
+ echo "
";
+ } else {
+ echo "
";
+ }
+ }
+ }
+ ?>
+
+
+
+
+
\ No newline at end of file
diff --git a/image.php b/image.php
index 0930052..fc354b6 100644
--- a/image.php
+++ b/image.php
@@ -1,184 +1,211 @@
-
-
-
-
-
-
-
-
-
-
- /*
- |-------------------------------------------------------------
- | Get image ID
- |-------------------------------------------------------------
- | Image ID should be written in the URL of the page as ?id=69
- | If ID cannot be obtained, give error. ID going here ^^
- |-------------------------------------------------------------
- */
- if (isset($_GET['id']) && is_numeric($_GET['id'])) {
- // Get all image info
- $image = $image_info->get_image_info($conn, $_GET['id']);
+
+
- // Check if image is avalible
- if (isset($image['imagename'])) {
- $image_present = True;
+
+
+
+
+
+ get_image_info($conn, $_GET['id']);
+
+ // Check if image is avalible
+ if (!empty($image['imagename']) && isset($image['imagename'])) {
+ $image_present = True;
+ } else {
+ ?>
+
+
-
+ ?>
+
-
- get_user_info($conn, $image['author']);
+ if ($image_present) {
+ /*
+ |-------------------------------------------------------------
+ | Check user details
+ |-------------------------------------------------------------
+ */
+ if (isset($image['author'])) {
+ // Get all information on the user
+ $user = $user_info->get_user_info($conn, $image['author']);
- if (isset($user['username'])) {
- $image_author = $user['username'];
+ if (isset($user['username'])) {
+ $image_author = $user['username'];
+ } else {
+ $image_author = "Deleted User";
+ }
} else {
- $image_author = "Deleted User";
+ $image_author = "No author";
+ }
+
+ /*
+ |-------------------------------------------------------------
+ | Check if image path is good
+ |-------------------------------------------------------------
+ */
+ 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)";
+ }
+ ?>
+
+ image_privilage($image['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
+ $privilaged = True;
+ } else {
+ $privilaged = False;
}
- } else {
- /*
- |-------------------------------------------------------------
- | Image was not present
- |-------------------------------------------------------------
- */
- $image_path = "assets/no_image.png";
- $image_alt = "No image could be found, sowwy";
- }
- /*
- |-------------------------------------------------------------
- | Check user privilge
- |-------------------------------------------------------------
- */
- if ($image_info->image_privilage($image['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
- $privilaged = True;
- } else {
- $privilaged = False;
- }
+ echo "
+
+
+
";
+
+ if (is_file("images/previews/".$image['imagename'])) {
+ echo "
+
+
+
";
+ } else {
+ echo "
+
+
+
";
+ }
+
- if (is_file("images/previews/".$image['imagename'])) {
- echo "
-
-
-
";
?>
-
+
-
-
";
- }
-
- /*
- |-------------------------------------------------------------
- | Start of displaying all info on image
- |-------------------------------------------------------------
- */
- if ($image_present) {
+ /*
+ |-------------------------------------------------------------
+ | Start of displaying all info on image
+ |-------------------------------------------------------------
+ */
+ if ($image_present) {
?>
-
+
+
Reset Password
-
+
+
+
Download image
@@ -245,12 +272,12 @@
function copyLink() {
navigator.clipboard.writeText(window.location.href);
- sniffleAdd("Info", "Link has been copied!", "var(--green)", "assets/icons/clipboard-text.svg");
+ sniffleAdd("Info", "Link has been copied!", "var(--success)", "assets/icons/clipboard-text.svg");
}
NSFW
+ 
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/upload.php b/upload.php
index 41822d9..8982fbf 100644
--- a/upload.php
+++ b/upload.php
@@ -1,90 +1,101 @@
+
+
-
-
-
-
+
is_loggedin()) {
- ?>
-
- is_loggedin()) {
+ ?>
+
+
- 
";
+ }
+ ?>
+
+ 
Logout
Cancel