diff --git a/Flyout/.flyout.css.swp b/Flyout/.flyout.css.swp deleted file mode 100644 index c092334..0000000 Binary files a/Flyout/.flyout.css.swp and /dev/null differ diff --git a/Flyout/flyout.css b/Flyout/flyout.css index d1eb7f8..da03dbe 100644 --- a/Flyout/flyout.css +++ b/Flyout/flyout.css @@ -10,7 +10,7 @@ position: fixed; z-index: 999; background-color: var(--bg); - backdrop-filter: blur(8px); + backdrop-filter: blur(15px); opacity: 0; @@ -67,3 +67,9 @@ .flyout-actionbox * * * { width: auto; } +.flyout-actionbox > button { + margin-bottom: 0.5rem; +} +.flyout-actionbox > button > * { + width: auto; +} diff --git a/GitHub/LICENSE.md b/LICENSE.md similarity index 100% rename from GitHub/LICENSE.md rename to LICENSE.md diff --git a/README.md b/README.md index 2b18094..8864a8c 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,63 @@ # OnlyLegs! -Welcome little one, this is the start of something great +The only gallery made by a maned wolf. -Hey Fluffy! Why is this open source when there could still be security issues with all of this? -So people who know what they are doing can help me fix this shit? :'3 +## How to setup +### Downloading & installing +#### Path +Download this project and move it into your website(s) folder. Usually under ```/var/www/html/``` on Linux. -# How do I use this! -First of all, I don't recommend anyone using this at this time. Though I want this to get to a state where its usable for anyone to setup and host themselves, its just not anywhere near a state where this is usable. Also, security is just not upto my standards +#### Imagik +You will need to install the image-magik PHP plugin for thumbnail creation, on Ubuntu its as easy as ```apt install php-imagik```. -# License +#### PHP +This project also requires PHP 8 and was made with Ubuntu 22.04 LTS in mind, so I reccommend running this gallery on such. + +### Database setup +If you made it this far, congrats! We're not even close to done. Next you will need to setup your database. If you're running a seperate server for databases, that'll also work. + +You first need to head over to ```app/server/conn.php``` and set the correct information, if you're using localhost, this should be the following details: + +- localhost +- (username) +- (password) +- Gallery + +I recommend using a database name such as Gallery, but others should work just as well. + +I also recommend not using root for this and setting up a user specifically for this, but I will not go through the process of making a such user here. + +You will next need to setup the following 5 tables: + +#### Images +```CREATE TABLE images ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, imagename VARCHAR(50) UNIQUE, alt VARCHAR(255), tags VARCHAR(255), alt VARCHAR(50), last_modified TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, upload_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP );``` +#### Users +```CREATE TABLE users ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, usernname VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, admin bool, last_modified TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );``` +#### Tokens +```CREATE TABLE tokens ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, code VARCHAR(50) NOT NULL, used BOOL, used_at VARCHAR(50) NOT NULL );``` +#### Logs +```CREATE TABLE logs ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, ipaddress VARCHAR(16) NOT NULL, action VARCHAR(255), time TIMESTAMP DEFAULT CURRENT_TIMESTAMP );``` +#### Bans +```CREATE TABLE bans ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, ipaddress VARCHAR(16) NOT NULL, reason VARCHAR(255), time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, length VARCHAR(255) NOT NULL, permanent BOOL NOT NULL ); ``` + + +### Manifest +In the ```app/settings/manifest.json``` you have a list of infomation about your website. You must change ```user_name``` to your prefered name, ```is_testing``` to false (or anything else) as that is used for development and ```upload_max``` to your prefered file size max in MBs. + +### Creating an account +For now, there is no automated way of doing this, so you will have to go into your database on a terminal and type the following command ```INSERT INTO tokens (code, used) VALUES('UserToken', False)```. You have now made a token that you can use to make an account with. + +Head over to the Login section off the app and click the Need an account button, from there you can enter your own details. Once you get to the token section enter ```UserToken```. And with that, you have now set up your own image gallery! + +## Usage +### Admin +As an admin, you can do things such as modifying other people's posts, reseting users passwords and checking logs for sussy behaviour. With that, use these tools with respect to others and don't abuse them. + +If you trust someone enough, you can set them to a moderator through the settings > users > toggle admin. You can tell who is an admin by the green highlight to the left of their name. + +### Images +Uploading images is as simple as choosing the image you want to upload, then clicking upload! Keep in mind that not all formats play well as this gallery uses Imagik to generate thumbnails and preview images, so images such as GIFs do not work as of now. Supported file formats include JPG, JPEG, PNG and WEBP. + +You should also keep in mind the file size, by default images of 20MBs should be able to get uploaded. But if you run into issues, either raise the file size in the ```manifest.json``` or locate your ```php.ini``` on your webserver and raise the ```upload_max_filesize``` and ```post_max_size``` to a same or greater value. + +## License This project is under the GNU v3 License diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css index 79c3751..4bfa591 100644 --- a/Sniffle/sniffle.css +++ b/Sniffle/sniffle.css @@ -15,7 +15,7 @@ .sniffle { margin: 0; padding: 0 1rem; - max-width: 621px; width: calc(100% - 1rem); + max-width: 569px; width: calc(100% - 1rem); top: 0.5rem; left: 50%; transform: translateX(-50%); @@ -31,28 +31,65 @@ and a text div .sniffle-content */ .sniffle-notification { - margin-bottom: 0.5rem; padding: 0.5rem; + margin-bottom: 0.5rem; padding: 0; - max-width: calc(100% - 1rem); min-height: 2.5rem; + max-width: 100%; min-height: 2.5rem; display: flex; flex-direction: row; overflow-y: hidden; - z-index: 999; + position: relative; background-color: #151515; box-shadow: var(--shadow); - transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1); - border-radius: var(--rad); + + transition: margin-top 1s cubic-bezier(.19,1,.22,1); + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .sniffle-notification:hover { - transform: scale(1.05); - cursor: pointer; } +.sniffle-notification:not(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) { + display: none; + opacity: 0; +} +.sniffle-notification:nth-of-type(1) { + z-index: 1; + transform: scale(1); + opacity: 1; + transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.25s cubic-bezier(.19,1,.22,1); +} +.sniffle-notification:nth-of-type(2) { + z-index: -1; + transform: scale(0.95); + margin-top: -4.8rem; + opacity: 1; + transition: transform 1.25s, opacity 0.5s; +} +.sniffle-notification:nth-of-type(3) { + z-index: -2; + transform: scale(0.9); + margin-top: -4.8rem; + opacity: 1; + transition: transform 1.5s, opacity 0.75s; +} +.sniffle-notification:nth-of-type(4) { + z-index: -3; + transform: scale(0.85); + margin-top: -4.8rem; + opacity: 0; + transition: transform 1.75s, opacity 1s; +} + /* Notification content Root @@ -60,9 +97,9 @@ And to prevent text from overflowing the notification */ .sniffle-content { - margin: 0 auto; + margin: 0 auto; padding: 0.5rem; - width: calc(100% - 3.5rem); + width: 100%; flex-direction: column; flex-wrap: wrap; overflow-y: hidden; @@ -72,12 +109,14 @@ Notification icon/image */ .sniffle-img { - margin-right: 1rem; + padding: 0 0.5rem; max-width: 2.5rem; width: auto; height: auto; object-fit: contain; + + background-color: #15151533; } /* Notification header diff --git a/about.php b/about.php index 3f7ce90..18e1d22 100644 --- a/about.php +++ b/about.php @@ -2,44 +2,43 @@ - +
-

What is Fluffys Amazing Gallery?

-

Fluffys Amazing Gallery is a smol project I originally started to control the images on my main page, but quickly turned into something much bigger...

-

What Do I want this to become in the future? No clue, but I do want this to be usable by others, if its a file they download a docker image they setup on your own web server.

-

Will it become that any time soon? No, but. I am going to work on this untill it becomes what I want it to be!

+

+

+

Version

+ +
+ +

TOS

+

+

This project is protected under the license by

+ +
+ +

Credits to development

+

Carty: Kickstarting development and SQL/PHP development

+

Jeetix: Helping patch holes in some features

+

mrHDash, Verg, Fennec, Carty, Jeetix and everyone else for helping with early bug testing

+

Phosphor for providing nice SVG icons


-

Can you add "A" or "B"?

-

No.

- -
- -

How do I use this!

-

First you must obtain the invite code. If you don't have one and are interested in trying this, feel free to DM me on Telegram!

-

But once you're done doing that, you can start making your account at the signup page here.

-

From there you should be able to go and login at this fancy page here!

-

Now you should see "Welcome (your username)" at the homepage. From there navigate to the navbar and click on the upload button. Choose your file, enter the description and your image is up!

- -
- -

Credits!

-

To Carty for being super cool again and helping me get started with SQL and PHP!

-

To Phosphor for providing nice SVG icons.

-

To mrHDash...

+

Development

+ Project Github + Creators Twitter
- + \ No newline at end of file diff --git a/account.php b/account.php new file mode 100644 index 0000000..e93b3c7 --- /dev/null +++ b/account.php @@ -0,0 +1,404 @@ + + + + + + + + + + + is_loggedin()) { + ?> +
+

Settings

+ Reset Password + +
+

Don't leave! I'm with the science team!

+ Logout +
+ + + is_admin($conn, $_SESSION['id'])) { + ?> +
+

Admin controlls

+

Invite Codes

+ + + + + +
+ +
+ + + +
+ +
+
+

ID

+

User IP

+

Action

+

Time

+
+ +
+

+

+

+ " . $log_time->format('Y-m-d H:i:s T') . " | " . $diff->time($log['time']) . "

"; + ?> +
+ +
+ +
+
+

ID

+

User IP

+

Reason

+

Lenght

+

Time

+
+ "; + } else { + echo "
"; + } + ?> +

+

+

+

mins

+ " . $log_time->format('Y-m-d H:i:s T') . " | " . $diff->time($ban['time']) . "

"; + ?> +
+ +
+ +
+ +
+

ID

+

Username

+

Last Modified

+

User Options

+

+

+
+ "; + } else { + echo "
"; + } + ?> +

+

+ " . $user_time->format('Y-m-d H:i:s T') . " | " . $diff->time($user['last_modified']) . "

"; + + if ($user['id'] == 1) { + ?> + + + + + + + + +
+ + +
+ +
+ +
+

Login

+

Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!

+
+
+ + +
+ +
+ +
+ + +
+

Make account

+

And amazing things happened here...

+
+
+ +
+ + +
+ +
+ +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/account/account.php b/account/account.php deleted file mode 100644 index b8df11b..0000000 --- a/account/account.php +++ /dev/null @@ -1,126 +0,0 @@ - - - - - - - - - - - -
-

Account settings

-
- Invite Codes"; - $token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0"); - while ($token = mysqli_fetch_array($token_request)) { - ?> - - - - -
-

Danger ahead

-

Resetting your password regularly is a good way of keeping your account safe

- Reset Password -
-

Don't leave! I'm with the science team!

- Logout -
- -
-

Login

-

Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!

-
-
- - -
- -
- -
- - -
-

Make account

-

And amazing things happened here...

-
-
- -
- - -
- -
- -
- -
- - - - - - - - - \ No newline at end of file diff --git a/app/account/account.php b/app/account/account.php index 61ee48d..12534f9 100644 --- a/app/account/account.php +++ b/app/account/account.php @@ -1,7 +1,12 @@ get_ip(); /* |------------------------------------------------------------- @@ -14,38 +19,75 @@ include "../server/conn.php"; |------------------------------------------------------------- */ if (isset($_POST['submit_login'])) { - /* - |------------------------------------------------------------- - | Set error status to 0 - |------------------------------------------------------------- - | if there are more than 0 error, then they cannot submit a - | request - |------------------------------------------------------------- - */ $error = 0; + $ban_query = mysqli_query($conn, "SELECT * FROM bans WHERE ipaddress = '$user_ip' ORDER BY id DESC LIMIT 1"); - // Checking if Username is empty - if (empty(trim($_POST["username"]))) { - ?> - - - + + + = 5) { + mysqli_query($conn,"INSERT INTO bans (ipaddress, reason, length, permanent) VALUES('$user_ip','Attempted password too many times', '60', '0')"); + } + } + + if ($error <= 0) { + // Checking if Username is empty + if (empty(trim($_POST["username"]))) { + ?> + + + + - + is_admin($conn, $id) == false) { + mysqli_query($conn,"UPDATE users SET admin = 1 WHERE id = 1"); + } } else { ?> - + - + - + - + - + - - - - = 5) { + mysqli_query($conn,"INSERT INTO bans (ipaddress, reason, length, permanent) VALUES('$user_ip','Attempted password too many times', '60', '0')"); } } - // Validate sussness of Password - if (empty(trim($_POST["password"]))) { - // No password entered - ?> - - - - - - - + - + - + - + + + + + + + + + + + + + + + - + - + is_admin($conn, $_SESSION['id'])) { + $is_admin = mysqli_query($conn, "SELECT * FROM users WHERE id = " . $_POST['id'] . " ORDER BY id DESC LIMIT 1"); + + while ($user_info = mysqli_fetch_assoc($is_admin)) { + $admin_status = $user_info['admin']; + $username = $user_info['username']; + } + + $sql = "UPDATE users SET admin = ? WHERE id = ?"; + + if ($stmt = mysqli_prepare($conn, $sql)) { + // Bind variables to the prepared statement as parameters + mysqli_stmt_bind_param($stmt, "ii", $param_admin_status, $param_user_id); + + // Set parameters + if ($admin_status) { + $param_admin_status = 0; + $admin_update_message = "removed from the admins list"; + } elseif (!$admin_status) { + $param_admin_status = 1; + $admin_update_message = "added to the admins list"; + } + $param_user_id = $_POST['id']; + + // Attempt to execute the prepared statement + if (mysqli_stmt_execute($stmt)) { + ?> + + + + + + + + + + + + + + + + is_admin($conn, $_SESSION["id"])) { + $user_id = $_POST['id']; + } elseif (empty($_POST['id'])) { + $user_id = $_SESSION["id"]; + } else { + ?> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/account/password_reset.php b/app/account/password_reset.php deleted file mode 100644 index ed709e2..0000000 --- a/app/account/password_reset.php +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - - - - - - - - resizeImage($resolution,null,null,1,null); + $thumbnail->writeImage($thumbnail_path); + + return "success"; + } catch (\Exception $e) { + return $e; + } + } + + /* + Clean up long text input and turn into an array for tags + + Returns clean string of words with equal white space between it + */ + function tags($string) { + // Replace hyphens + $string = str_replace('-', '_', $string); + // Regex + $string = preg_replace('/[^A-Za-z0-9\_ ]/', '', $string); + // Change to lowercase + $string = strtolower($string); + // Removing extra spaces + $string = preg_replace('/ +/', ' ', $string); + + return $string; + } +} + +class Account { + /* + Check if user is loggedin + + Returns True if user is + Returns False if user is NOT + */ + function is_loggedin() { + if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) { + return True; + } else { + return False; + } + } + /* + Get full user info from database + + 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); + + return($user_array); + } + /* + Check if user is admin + + Returns True if user is privilaged + Returns False if user is NOT privilaged + */ + 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); + + if ($user_array['admin'] || $id == 1) { + return True; + } else { + return False; + } + } else { + return False; + } + } + /* + Get target IP, used for logging + */ + function get_ip() { + if (!empty($_SERVER['HTTP_CLIENT_IP'])) { + $target_ip = $_SERVER['HTTP_CLIENT_IP']; + } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) { + $target_ip = $_SERVER['HTTP_X_FORWARDED_FOR']; + } else { + $target_ip = $_SERVER['REMOTE_ADDR']; + } + + return $target_ip; + } +} + +class Image { + /* + Get full image info from database + + 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); + + return($image_array); + } + /* + Check if user is image owner + + Returns True if user is privilaged + Returns False if user is NOT privilaged + */ + function image_privilage($id) { + $session_id = $_SESSION['id']; + if (isset($session_id) || !empty($session_id)) { + if ($session_id == $id) { + return True; + } else { + return False; + } + } else { + return False; + } + } +} + +class Diff { + function time($past_time, $full_date = false) { + $now = new \DateTime; + $ago = new \DateTime($past_time); + $diff = $now->diff($ago); + + $diff->w = floor($diff->d / 7); + $diff->d -= $diff->w * 7; + + $string = array( + 'y' => 'year', + 'm' => 'month', + 'w' => 'week', + 'd' => 'day', + 'h' => 'hour', + 'i' => 'minute', + 's' => 'second', + ); + foreach ($string as $k => &$v) { + if ($diff->$k) { + $v = $diff->$k . ' ' . $v . ($diff->$k > 1 ? 's' : ''); + } else { + unset($string[$k]); + } + } + + if (!$full_date) $string = array_slice($string, 0, 1); + return $string ? implode(', ', $string) . ' ago' : 'just now'; + } +} \ No newline at end of file diff --git a/app/format/string_to_tags.php b/app/format/string_to_tags.php deleted file mode 100644 index 0c8d2a5..0000000 --- a/app/format/string_to_tags.php +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - get_ip(); + +/* + |------------------------------------------------------------- + | Delete image + |------------------------------------------------------------- + | This is the scarries code I written. I hate writing anything + | like this, please help + |------------------------------------------------------------- +*/ +if (isset($_POST['submit_delete'])) { + // 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); + + // 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=?"; + + // 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']; + + // 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'])); + + // 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); + + // 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=?"; + + // 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"]; + + // Attempt to execute the prepared statement + if (mysqli_stmt_execute($stmt)) { + ?> + + + + + + resizeImage(300,null,null,1,null); - $image_thumbnail->writeImage($thumb_dir.$image_basename); - } catch (Exception $e) { - ?> - - tags(trim($_POST['tags'])); - // Prepare sql for destruction and filtering the sus - $sql = "INSERT INTO swag_table (imagename, alt, author) VALUES (?, ?, ?)"; + // Allowed file types + $allowed_types = array('jpg', 'jpeg', 'png', 'webp'); + if (in_array($file_type, $allowed_types)) { + // Move file to server + if (move_uploaded_file($_FILES['image']['tmp_name'], $image_path)) { + // Attempt making a thumbnail + list($width, $height) = getimagesize($image_path); + if ($width > 300) { + if ($make_stuff->thumbnail($image_path, $thumb_dir.$image_newname, 300) != "success") { + ?> + + 1100) { + if ($make_stuff->thumbnail($image_path, $preview_dir.$image_newname, 900) != "success") { + ?> + + - - - - - - - - - - + + + + + + + + + + connect_error) { - echo ""; +try { + $conn = @mysqli_connect($conn_ip, $conn_username, $conn_password , $conn_database); +} catch (Exception $e) { + header("location: error.php?e=conn"); } + +session_start(); diff --git a/app/server/secrete.php b/app/server/secrete.php index d190cb1..029c3ea 100644 --- a/app/server/secrete.php +++ b/app/server/secrete.php @@ -1,13 +1,25 @@ \ No newline at end of file diff --git a/default.json b/app/settings/manifest.json similarity index 55% rename from default.json rename to app/settings/manifest.json index 9c531dd..dca09b2 100644 --- a/default.json +++ b/app/settings/manifest.json @@ -1,6 +1,7 @@ { - "name": "Only Legs", - "description": "A simple gallery with multiple users in mind", + "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!", @@ -21,16 +22,12 @@ "The weather is dry", "Need me a man 👀", "Gods die too.", - "Eat hotchip and lie" + "Eat hotchip and lie", + "The world will not be destroyed by those who do evil, but by those who watch them and do nothing." ], - "database": { - "ip": "192.168.0.79", - "port": "3306", - "username": "uwu", - "password": "fennec621", - "database": "gallery" - }, - "testing": true, - "version": "15.08.22", - "license":"GPL 3.0" + "license":"GPL 3.0", + "version": "22.09.20", + "user_name": "Michal", + "is_testing": "true", + "upload_max": "20" } \ No newline at end of file diff --git a/app/settings/settings.php b/app/settings/settings.php new file mode 100644 index 0000000..84cf2fa --- /dev/null +++ b/app/settings/settings.php @@ -0,0 +1,20 @@ +data as $website) { + foreach ($website->debug as $debug) { + + } +} + +$debug = $user_settings["website"]["debug"]; diff --git a/assets/icons/arrow-clockwise.svg b/assets/icons/arrow-clockwise.svg new file mode 100644 index 0000000..08457f9 --- /dev/null +++ b/assets/icons/arrow-clockwise.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/arrows-out-simple.svg b/assets/icons/arrows-out-simple.svg new file mode 100644 index 0000000..17e103d --- /dev/null +++ b/assets/icons/arrows-out-simple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/crown-simple.svg b/assets/icons/crown-simple.svg new file mode 100644 index 0000000..0ae343b --- /dev/null +++ b/assets/icons/crown-simple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/scan.svg b/assets/icons/scan.svg new file mode 100644 index 0000000..fd3f518 --- /dev/null +++ b/assets/icons/scan.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/main.css b/css/main.css index 2c2e2ee..aec0d1d 100644 --- a/css/main.css +++ b/css/main.css @@ -8,7 +8,7 @@ |------------------------------------------------------------- */ :root { - --bg: #151515bb; + --bg: rgba(21, 21, 21, 0.7333333333); --bg-1: #242621; --bg-2: #1D1E1C; --bg-3: #151515; @@ -19,6 +19,9 @@ --green: #8C977D; --black: #151515; --white: #E8E3E3; + --accent: #8C977D; + --shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); + --rad: 0.25rem; } /* @@ -28,18 +31,19 @@ */ nav { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 auto 1rem; + padding: 0.5rem; width: calc(100% - 1.4rem); height: 2.5rem; position: -webkit-sticky; @@ -171,6 +175,31 @@ nav .btn { margin-bottom: 1rem; } +.gallery-order { + margin-bottom: 1rem; + display: flex; + flex-direction: row; +} +.gallery-order h1, +.gallery-order h2, +.gallery-order h3, +.gallery-order h4, +.gallery-order h5 { + font-family: "Lexend Deca", sans-serif; +} +.gallery-order p, +.gallery-order a, +.gallery-order button, +.gallery-order input { + font-family: "Secular One", sans-serif; +} +.gallery-order > * { + margin-right: 0.5rem; +} +.gallery-order > *:last-child { + margin-right: 0; +} + .gallery-root { margin-bottom: 1rem; padding: 0.25rem; @@ -180,8 +209,8 @@ nav .btn { flex-direction: row; flex-wrap: wrap; border: 0.2rem solid #8C977D; - border-radius: 0rem; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + border-radius: 0.25rem; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .gallery-item { @@ -190,7 +219,7 @@ nav .btn { height: auto; max-width: calc(33.33% - 0.5rem); background-color: #151515; - border-radius: -0.5rem; + border-radius: -0.25rem; position: relative; overflow: hidden; flex: 1 0 150px; @@ -198,7 +227,7 @@ nav .btn { } .gallery-item:hover { transform: scale(1.1) rotate(5deg); - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); z-index: 9; } .gallery-item:after { @@ -221,7 +250,7 @@ nav .btn { object-fit: cover; -o-object-position: center; object-position: center; - border-radius: -0.5rem; + border-radius: -0.25rem; } .nsfw-blur { @@ -272,13 +301,14 @@ nav .btn { margin: 1rem 0 2rem 0; padding: 0; width: 100%; - max-height: 69vh; + max-height: 50vh; height: auto; + min-height: 30vh; display: flex; background-color: rgba(21, 21, 21, 0.7333333333); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); - border-radius: 0rem; + border-radius: 0.25rem; transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1); } @@ -288,23 +318,52 @@ nav .btn { } } .image { - margin: 0 auto; + margin: auto; max-width: 100%; width: auto; max-height: inherit; height: auto; - border-radius: 0rem; + border-radius: 0.25rem; + transition: opacity 0.5s; +} + +.preview-button { + width: 1.5rem; + padding: 0; + 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)); + 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); +} +.preview-button img { + width: 1.5rem; + display: block; +} +.preview-button:hover { + outline: #E8E3E3 0.2rem solid; + color: #E8E3E3; } .image-description { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .image-description > * { margin-top: 0; @@ -326,13 +385,13 @@ nav .btn { .image-detail { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .image-detail > * { margin-top: 0; @@ -351,16 +410,39 @@ nav .btn { .image-detail input { font-family: "Secular One", sans-serif; } +.image-detail > div { + width: 100%; + display: flex; + flex-direction: row; +} +.image-detail > div > div { + width: 50%; +} +.image-detail > div > div * { + margin-top: 0; + margin-bottom: 0.5rem; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +@media (max-width: 669px) { + .image-detail > div { + flex-direction: column; + } + .image-detail > div > div { + width: auto; + } +} .tags-root { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .tags-root > * { margin-top: 0; @@ -393,7 +475,7 @@ nav .btn { padding: 0.5rem; display: block; background-color: #8C977D; - border-radius: 0rem; + border-radius: calc(0.25rem - (0.5rem + 3px)); font-family: "Secular One", sans-serif; } .tag::before { @@ -402,13 +484,13 @@ nav .btn { .danger-zone { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #B66467; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .danger-zone > * { margin-top: 0; @@ -435,13 +517,13 @@ nav .btn { */ .about-root { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .about-root > * { margin-top: 0; @@ -468,13 +550,13 @@ nav .btn { */ .upload-root { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .upload-root > * { margin-top: 0; @@ -501,13 +583,13 @@ nav .btn { */ .account-root { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .account-root > * { margin-top: 0; @@ -527,20 +609,217 @@ nav .btn { font-family: "Secular One", sans-serif; } -/* - |------------------------------------------------------------- - | SIGNUP - |------------------------------------------------------------- -*/ -.signup-root { +.admin-root { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); +} +.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; +} +.tabs > button { + margin-right: 0.5rem; + width: 33.33%; +} +.tabs > button:last-child { + margin-right: 0; +} + +.active-tab { + background-color: #8C977D !important; +} + +.logs { + width: 100%; + height: 21rem; + padding: 0; + overflow-y: scroll; + display: none; + flex-direction: column; + background-color: #151515; + border-radius: calc(0.25rem - (0.5rem + 3px)); +} + +.log { + min-width: 769px; + padding: 0.5rem; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.log:nth-child(even) { + background-color: rgba(255, 255, 255, 0.0666666667); +} +.log > * { + margin: 0 0.5rem 0 0; + padding: 0; + word-wrap: break-word; +} +.log > *:nth-child(1) { + width: 5%; +} +.log > *:nth-child(2) { + width: 17%; +} +.log > *:nth-child(3) { + width: 38%; +} +.log > *:nth-child(4) { + width: 40%; + margin: 0; +} + +.log:first-of-type { + background-color: #151515; + position: -webkit-sticky; + position: sticky; + top: 0; +} + +.bans { + width: 100%; + height: 21rem; + padding: 0; + overflow-y: scroll; + display: none; + flex-direction: column; + background-color: #151515; + border-radius: calc(0.25rem - (0.5rem + 3px)); +} + +.ban { + min-width: 769px; + padding: 0.5rem; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.ban:nth-child(even) { + background-color: rgba(255, 255, 255, 0.0666666667); +} +.ban > * { + margin: 0 0.5rem 0 0; + padding: 0; + word-wrap: break-word; +} +.ban > *:nth-child(1) { + width: 5%; +} +.ban > *:nth-child(2) { + width: 17%; +} +.ban > *:nth-child(3) { + width: 34%; +} +.ban > *:nth-child(4) { + width: 10%; +} +.ban > *:nth-child(5) { + width: 34%; + margin: 0; +} + +.perm { + border-left: #B66467 0.2rem solid; +} + +.ban:first-of-type { + background-color: #151515; + position: -webkit-sticky; + position: sticky; + top: 0; +} + +.user-settings { + width: 100%; + height: 21rem; + padding: 0; + overflow-y: scroll; + display: none; + flex-direction: column; + background-color: #151515; + border-radius: calc(0.25rem - (0.5rem + 3px)); +} + +.user { + min-width: 769px; + padding: 0.5rem; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.user:nth-child(even) { + background-color: rgba(255, 255, 255, 0.0666666667); +} +.user > * { + margin: 0 0.5rem 0 0; + padding: 0; + word-wrap: break-word; +} +.user > *:nth-child(1) { + width: 5%; +} +.user > *:nth-child(2) { + width: 15%; +} +.user > *:nth-child(3) { + width: 35%; +} +.user > *:nth-child(4) { + width: 15%; +} +.user > *:nth-child(5) { + width: 15%; +} +.user > *:nth-child(6) { + width: 15%; + margin: 0; +} + +.is-admin { + border-left: #8C977D 0.2rem solid; +} + +.user:first-of-type { + background-color: #151515; + position: -webkit-sticky; + position: sticky; + 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 > * { @@ -561,20 +840,15 @@ nav .btn { font-family: "Secular One", sans-serif; } -/* - |------------------------------------------------------------- - | LOGIN - |------------------------------------------------------------- -*/ .login-root { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .login-root > * { margin-top: 0; @@ -601,13 +875,13 @@ nav .btn { */ .password-reset-root { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #B66467; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } .password-reset-root > * { margin-top: 0; @@ -629,34 +903,34 @@ nav .btn { /* |------------------------------------------------------------- - | SEARCH + | ERROR PAGE |------------------------------------------------------------- */ -.search-root { +.error-root { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; - border-radius: 0rem; + border-radius: 0.25rem; border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } -.search-root > * { +.error-root > * { margin-top: 0; margin-bottom: 0.5rem; } -.search-root h1, -.search-root h2, -.search-root h3, -.search-root h4, -.search-root h5 { +.error-root h1, +.error-root h2, +.error-root h3, +.error-root h4, +.error-root h5 { font-family: "Lexend Deca", sans-serif; } -.search-root p, -.search-root a, -.search-root button, -.search-root input { +.error-root p, +.error-root a, +.error-root button, +.error-root input { font-family: "Secular One", sans-serif; } @@ -666,25 +940,9 @@ nav .btn { |------------------------------------------------------------- */ footer { - margin-bottom: 1rem; - padding: 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-around; margin: 0 auto; - bottom: 0; width: calc(100% - 1.4rem); -} -footer > * { - margin-top: 0; - margin-bottom: 0.5rem; + text-align: center; } footer p { margin: 0 0.5rem; @@ -752,12 +1010,13 @@ body * { font-family: "Secular One", sans-serif; text-decoration: none; border: none; - border-radius: calc(0rem - (0.5rem + 3px)); + border-radius: calc(0.25rem - (0.5rem + 3px)); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); } .btn:hover { outline: #E8E3E3 0.2rem solid; color: #E8E3E3; + cursor: pointer; } .btn:where(input[type=file])::-webkit-file-upload-button { margin: -0.25rem 0.5rem -0.25rem -0.25rem; @@ -767,7 +1026,7 @@ body * { text-decoration: none; background-color: #E8E3E3; border: none; - border-radius: 0rem; + border-radius: 0.25rem; } .btn:where(input[type=file])::file-selector-button { margin: -0.25rem 0.5rem -0.25rem -0.25rem; @@ -777,7 +1036,7 @@ body * { text-decoration: none; background-color: #E8E3E3; border: none; - border-radius: 0rem; + border-radius: 0.25rem; } a.btn { @@ -809,6 +1068,10 @@ form > * { margin-bottom: 0.5rem; } +textarea { + resize: none; +} + /* |------------------------------------------------------------- | SVG @@ -850,7 +1113,7 @@ br { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 50%; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1); } #back-to-top:hover { @@ -864,4 +1127,10 @@ br { display: block; -o-object-position: center; object-position: center; +} + +@media (prefers-reduced-motion) { + * { + transition: none !important; + } }/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 5790ecf..9082cdc 100644 --- a/css/main.scss +++ b/css/main.scss @@ -85,6 +85,8 @@ body { &:hover { outline: $white 0.2rem solid; color: $fg; + + cursor: pointer; } &:where(input[type="file"])::file-selector-button { @@ -109,7 +111,7 @@ a.btn { } .btn-good { - background-color: $green; + background-color: $page-accent; } .btn-bad { @@ -134,6 +136,9 @@ form { } } +textarea { + resize: none; +} /* |------------------------------------------------------------- | SVG @@ -199,4 +204,10 @@ br { object-position: center; } +} + +@media(prefers-reduced-motion){ + * { + transition: none !important; + } } \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css deleted file mode 100644 index 192eb9c..0000000 --- a/css/normalize.css +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/css/scss/_body.scss b/css/scss/_body.scss index 219618f..2d03dfd 100644 --- a/css/scss/_body.scss +++ b/css/scss/_body.scss @@ -26,6 +26,22 @@ } } +.gallery-order { + @include defaultFont(); + + margin-bottom: 1rem; + + display: flex; + flex-direction: row; + + & > * { + margin-right: 0.5rem; + } + & > *:last-child { + margin-right: 0; + } +} + .gallery-root { margin-bottom: 1rem; padding: 0.25rem; @@ -37,7 +53,7 @@ flex-direction: row; flex-wrap: wrap; - border: 0.2rem solid $green; + border: 0.2rem solid $page-accent; border-radius: $rad; box-shadow: $shadow; @@ -157,8 +173,9 @@ padding: 0; width: 100%; - max-height: 69vh; + max-height: 50vh; height: auto; + min-height: 30vh; display: flex; @@ -177,7 +194,7 @@ } .image { - margin: 0 auto; + margin: auto; max-width: 100%; width: auto; @@ -185,24 +202,96 @@ height: auto; border-radius: $rad; + + transition: opacity 0.5s; +} + +.preview-button { + width: 1.5rem; + + padding: 0; + + position: absolute; + bottom: 0.5rem; + right: 0.5rem; + + 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)); + + transition: outline 0.1s cubic-bezier(.19, 1, .22, 1); + + background-color: $black; + + opacity: 0.8; + + box-shadow: $shadow; + + img { + width: 1.5rem; + + display: block; + } + + &:hover { + outline: $white 0.2rem solid; + color: $fg; + } } // DESCRIPTION .image-description { - @include defaultDecoration($green); + @include defaultDecoration($page-accent); @include defaultFont(); } // DETAILS .image-detail { - @include defaultDecoration($green); + @include defaultDecoration($page-accent); @include defaultFont(); + + &>div { + width: 100%; + display: flex; + flex-direction: row; + + &>div { + width: 50%; + + * { + margin-top: 0; + margin-bottom: 0.5rem; + + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + } +} +@media (max-width: 669px) { + .image-detail { + &>div { + flex-direction: column; + &>div { + width: auto; + } + } + } } // TAGS .tags-root { - @include defaultDecoration($green); + @include defaultDecoration($page-accent); @include defaultFont(); } @@ -219,7 +308,7 @@ background-color: $page-accent; - border-radius: $rad; + border-radius: calc($rad - (0.5rem + 3px)); font-family: $font-body; @@ -240,7 +329,7 @@ |------------------------------------------------------------- */ .about-root { - @include defaultDecoration($green); + @include defaultDecoration($page-accent); @include defaultFont(); } @@ -250,7 +339,7 @@ |------------------------------------------------------------- */ .upload-root { - @include defaultDecoration($green); + @include defaultDecoration($page-accent); @include defaultFont(); } @@ -260,29 +349,208 @@ |------------------------------------------------------------- */ .account-root { - @include defaultDecoration($green); + @include defaultDecoration($page-accent); + @include defaultFont(); +} +.admin-root { + @include defaultDecoration($page-accent); @include defaultFont(); } -/* - |------------------------------------------------------------- - | SIGNUP - |------------------------------------------------------------- -*/ +.tabs { + display: flex; flex-direction: row; + + & > button { + margin-right: 0.5rem; + width: 33.33%; + } + & > button:last-child { + margin-right: 0; + } +} +.active-tab { + background-color: $page-accent !important; +} + +.logs { + width: 100%; + height: 21rem; + + padding: 0; + + overflow-y: scroll; + + display: none; flex-direction: column; + + background-color: $bg; + border-radius: calc($rad - (0.5rem + 3px)); +} +.log { + min-width: 769px; + + padding: 0.5rem; + + display: flex; flex-direction: row; + + justify-content: space-between; + + &:nth-child(even) { + background-color: #ffffff11; + } + + & > * { + margin: 0 0.5rem 0 0; + padding: 0; + word-wrap: break-word; + + &:nth-child(1) { + width: 5%; + } + &:nth-child(2) { + width: 17%; + } + &:nth-child(3) { + width: 38%; + } + &:nth-child(4) { + width: 40%; + margin: 0; + } + } +} +.log:first-of-type { + background-color: $bg; + position: sticky; + top: 0; +} + +.bans { + width: 100%; + height: 21rem; + + padding: 0; + + overflow-y: scroll; + + display: none; flex-direction: column; + + background-color: $bg; + border-radius: calc($rad - (0.5rem + 3px)); +} +.ban { + min-width: 769px; + + padding: 0.5rem; + + display: flex; flex-direction: row; + + justify-content: space-between; + + &:nth-child(even) { + background-color: #ffffff11; + } + + & > * { + margin: 0 0.5rem 0 0; + padding: 0; + word-wrap: break-word; + + &:nth-child(1) { + width: 5%; + } + &:nth-child(2) { + width: 17%; + } + &:nth-child(3) { + width: 34%; + } + &:nth-child(4) { + width: 10%; + } + &:nth-child(5) { + width: 34%; + margin: 0; + } + } +} +.perm { + border-left: $red 0.2rem solid; +} +.ban:first-of-type { + background-color: $bg; + position: sticky; + top: 0; +} + +.user-settings { + width: 100%; + height: 21rem; + + padding: 0; + + overflow-y: scroll; + + display: none; flex-direction: column; + + background-color: $bg; + border-radius: calc($rad - (0.5rem + 3px)); +} +.user { + min-width: 769px; + + padding: 0.5rem; + + display: flex; flex-direction: row; + + justify-content: space-between; + + &:nth-child(even) { + background-color: #ffffff11; + } + + & > * { + margin: 0 0.5rem 0 0; + padding: 0; + word-wrap: break-word; + + &:nth-child(1) { + width: 5%; + } + &:nth-child(2) { + width: 15%; + } + &:nth-child(3) { + width: 35%; + } + &:nth-child(4) { + width: 15%; + } + &:nth-child(5) { + width: 15%; + } + &:nth-child(6) { + width: 15%; + margin: 0; + } + } +} +.is-admin { + border-left: $page-accent 0.2rem solid; +} +.user:first-of-type { + background-color: $bg; + position: sticky; + top: 0; +} + .signup-root { - @include defaultDecoration($green); + @include defaultDecoration($page-accent); @include defaultFont(); // By default its hidden, in place is login display: none; } - -/* - |------------------------------------------------------------- - | LOGIN - |------------------------------------------------------------- -*/ .login-root { - @include defaultDecoration($green); + @include defaultDecoration($page-accent); @include defaultFont(); } @@ -298,10 +566,10 @@ /* |------------------------------------------------------------- - | SEARCH + | ERROR PAGE |------------------------------------------------------------- */ -.search-root { - @include defaultDecoration($green); +.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 dac9c4a..c32c2a3 100644 --- a/css/scss/_footer.scss +++ b/css/scss/_footer.scss @@ -4,15 +4,11 @@ |------------------------------------------------------------- */ footer { - @include defaultDecoration($page-accent); - @include flexLeft(space-around); - margin: 0 auto; - bottom: 0; - width: calc(100% - 1.4rem); + text-align: center; p { margin: 0 0.5rem; diff --git a/css/scss/_mixin.scss b/css/scss/_mixin.scss index 315f3a1..793ab56 100644 --- a/css/scss/_mixin.scss +++ b/css/scss/_mixin.scss @@ -1,6 +1,6 @@ @mixin defaultDecoration($border) { margin-bottom: 1rem; - padding: 0.5rem; + padding: 0.5rem 0.5rem 0 0.5rem; width: calc(100% - 1.4rem); @@ -12,6 +12,8 @@ box-shadow: $shadow; + + >* { margin-top: 0; margin-bottom: 0.5rem; diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss index 24a48c1..0ef6565 100644 --- a/css/scss/_navigation.scss +++ b/css/scss/_navigation.scss @@ -8,6 +8,7 @@ nav { @include flexLeft(space-between); margin: 0 auto 1rem; + padding: 0.5rem; width: calc(100% - 1.4rem); height: 2.5rem; diff --git a/css/scss/_variables.scss b/css/scss/_variables.scss index 0749c8f..a3ded82 100644 --- a/css/scss/_variables.scss +++ b/css/scss/_variables.scss @@ -12,8 +12,8 @@ $white: #E8E3E3; $page-accent: #8C977D; -$shadow: 6px 6px 2px #15151588; -$rad: 0rem; +$shadow: 6px 6px 2px #15151566; +$rad: 0.25rem; $weight-bold: 621; $weight-normal: 400; @@ -25,17 +25,23 @@ sans-serif; // Fallback for items that do not yet support the new sass stylesheet system :root { - --bg: #151515bb; + --bg: #{$bg-alt}; --bg-1: #242621; --bg-2: #1D1E1C; - --bg-3: #151515; + --bg-3: #{$bg}; - --fg: #E8E3E3; - --fg-dark: #151515; + --fg: #{$fg}; + --fg-dark: #{$fg-alt}; - --red: #B66467; - --orange: #FF7700; - --green: #8C977D; - --black: #151515; - --white: #E8E3E3; + --red: #{$red}; + --orange: #{$orange}; + --green: #{$green}; + --black: #{$black}; + --white: #{$white}; + + --accent: #{$page-accent}; + + --shadow: #{$shadow}; + + --rad: #{$rad}; } \ No newline at end of file diff --git a/error.php b/error.php new file mode 100644 index 0000000..576a58e --- /dev/null +++ b/error.php @@ -0,0 +1,26 @@ + + + + + + + + + +
+ +
+

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/image.php b/image.php index b657db2..0930052 100644 --- a/image.php +++ b/image.php @@ -2,7 +2,7 @@ - + @@ -18,9 +18,16 @@ | many rewrites and hours of learning.... |------------------------------------------------------------- */ - include __DIR__."/ui/required.php"; - include __DIR__."/ui/nav.php"; + require_once __DIR__."/ui/required.php"; + require_once __DIR__."/ui/nav.php"; + use App\Account; + use App\Image; + use App\Diff; + + $image_info = new Image; + $user_info = new Account; + $diff = new Diff(); /* |------------------------------------------------------------- @@ -32,7 +39,7 @@ */ if (isset($_GET['id']) && is_numeric($_GET['id'])) { // Get all image info - $image = get_image_info($conn, $_GET['id']); + $image = $image_info->get_image_info($conn, $_GET['id']); // Check if image is avalible if (isset($image['imagename'])) { @@ -40,17 +47,17 @@ } else { ?> - - get_user_info($conn, $image['author']); if (isset($user['username'])) { $image_author = $user['username']; @@ -88,7 +95,7 @@ |------------------------------------------------------------- */ if (isset($image['imagename'])) { - $image_path = "images/" . $image['imagename']; + $image_path = "images/".$image['imagename']; $image_alt = $image['alt']; } else { $image_path = "assets/no_image.png"; @@ -118,18 +125,36 @@ | Check user privilge |------------------------------------------------------------- */ - if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { + if ($image_info->image_privilage($image['author']) || $user_info->is_admin($conn, $_SESSION['id'])) { $privilaged = True; } else { $privilaged = False; } - ?> -
- ' src='' alt=''> -
+ if (is_file("images/previews/".$image['imagename'])) { + echo "
+ ".$image_alt." + +
"; + ?> + + + ".$image_alt." + "; + } + -

Description

-

+

-
+

Details

- Author: " . $image_author . "

"; +
+
+ is_admin($conn, $image['author'])) { + echo "

Author: ".$image_author."

"; + } else { + echo "

Author: ".$image_author."

"; + } - // Image ID - echo "

ID: " . $image['id'] . "

"; + // Image ID + if ($image['id'] == 69) { + echo "

ID: ".$image['id'].", nice

"; + } else { + echo "

ID: ".$image['id']."

"; + } - // File name - if (strlen($image['imagename']) > 30) { - echo "

File Name: " . substr($image['imagename'], 0, 30) . "...

"; - } else { - echo "

File Name: " . $image['imagename'] . "

"; - } + $upload_time = new DateTime($image['upload_date']); + echo "

Uploaded at: ".$upload_time->format('d/m/Y H:i:s T')."

"; + ?> + - // Image resolution - list($width, $height) = getimagesize($image_path); - echo "

Image resolution: " . $width . "x" . $height . "

"; +

Last Modified: time($image['last_modified']); ?>

+
+
+ File Name: ".$image_pathinfo['filename']."

"; - // Image Upload date - echo "

Last updated: +0 " . $image['upload'] . "

"; + // File extention + echo "

File Type: ".pathinfo($image['imagename'], PATHINFO_EXTENSION)."

"; - echo "
"; + // Image resolution + list($width, $height) = getimagesize($image_path); + echo "

Image resolution: ".$width."x".$height."

"; - // Image download - echo "Download image"; + function human_filesize($bytes, $decimals = 2) { + $sz = 'BKMGTP'; + $factor = floor((strlen($bytes) - 1) / 3); + return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor]; + } + echo "

File size: ".human_filesize(filesize($image_path), 2)."

"; + ?> +
+
+ + ' download=''>Download image + - // Copy image - ?> + + - Copy image link"; - ?>
@@ -198,9 +259,9 @@ $image_tags_array = explode(" ", $image['tags']); foreach ($image_tags_array as $tag) { if ($tag == "nsfw") { - echo "

" . $tag . "

"; + echo "

".$tag."

"; } else { - echo "

" . $tag . "

"; + echo "

".$tag."

"; } } } else { @@ -239,16 +300,16 @@ var header = "Are you sure?"; var description = "Deleting this image is pernament, there is no going back after this!!!!!"; var actionBox = "
\ - \ -
"; + \ + "; flyoutShow(header, description, actionBox); $("#deleteConfirm").submit(function(event) { event.preventDefault(); var deleteSubmit = $("#deleteSubmit").val(); - $("#sniffle").load("app/image/delete_image.php", { + $("#sniffle").load("app/image/image.php", { id: , - submit: deleteSubmit + submit_delete: deleteSubmit }); }); }); @@ -269,19 +330,21 @@ var header = "Enter new Description/Alt"; var description = "Whatcha gonna put in there 👀"; var actionBox = "
\ - \ - \ -
"; + \ + \ + "; flyoutShow(header, description, actionBox); + $('#descriptionInput').val(""); + $("#descriptionConfirm").submit(function(event) { event.preventDefault(); var descriptionInput = $("#descriptionInput").val(); var descriptionSubmit = $("#descriptionSubmit").val(); - $("#sniffle").load("app/image/edit_description.php", { + $("#sniffle").load("app/image/image.php", { id: , input: descriptionInput, - submit: descriptionSubmit + submit_description: descriptionSubmit }); }); }); @@ -301,21 +364,23 @@ + ", "var(--green)", "assets/icons/hand-waving.svg"); - } - +?>
".$welcome_message[array_rand($welcome_message, 1)]."

"; ?>
-
+ + +
NSFW"; + } else { + $image_nsfw = ""; + $nsfw_warning = ""; + } + + // Image loading + echo "
"; + echo $nsfw_warning; + echo ""; + echo "
"; } - - // Check for NSFW tag - if (str_contains($image['tags'], "nsfw")) { - $image_nsfw = "nsfw-blur"; - $nsfw_warning = "NSFW"; - } else { - $image_nsfw = ""; - $nsfw_warning = ""; - } - - // Image loading - echo "
"; - echo $nsfw_warning; - echo ""; - echo "
"; - } ?>
- - + diff --git a/account/password-reset.php b/password-reset.php similarity index 54% rename from account/password-reset.php rename to password-reset.php index 9fb6af8..3f632b4 100644 --- a/account/password-reset.php +++ b/password-reset.php @@ -2,18 +2,22 @@ - + is_loggedin() != true) { + header("location: account.php"); exit; } ?> @@ -24,27 +28,27 @@
- +
- +
- + \ No newline at end of file diff --git a/search.php b/search.php deleted file mode 100644 index c7875fd..0000000 --- a/search.php +++ /dev/null @@ -1,48 +0,0 @@ - 0) { - // Getting thumbnail - if (file_exists("images/thumbnails/".$image['imagename'])) { - $image_path = "images/thumbnails/".$image['imagename']; - } else { - $image_path = "images/".$image['imagename']; - } - - // Image loading - echo "
"; - echo ""; - echo "
"; - } -}*/ -?> - - - - - - - - - - - -
-

Where did the search go!

-

Due to how it was implemented originally, it was hard to handle and work with. So I removed it.

-

It'll be coming back, but since it's going to be a lot of work it'll have to be much later.

-
- - - - diff --git a/ui/footer.php b/ui/footer.php index be8d452..d111e5e 100644 --- a/ui/footer.php +++ b/ui/footer.php @@ -1,22 +1,5 @@ -
- - - Telegram - - - - Twitter - - - - Github - - - - About - - - - My website! - +
+

Hosted by under

+

Version

+ About
diff --git a/ui/header.php b/ui/header.php index 23001bd..e2a3f2c 100644 --- a/ui/header.php +++ b/ui/header.php @@ -1,18 +1,8 @@ - - -<?php echo $setup_json['website']['name']; ?> - - + @@ -27,9 +17,9 @@ if (is_file("index.php")) { - - + + - - + + diff --git a/ui/nav.php b/ui/nav.php index ec8b258..df84c3d 100644 --- a/ui/nav.php +++ b/ui/nav.php @@ -1,19 +1,27 @@ + +
- + \ No newline at end of file