From dc89737cfcf9f44f770a24aa3a4324d0c6da19da Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Wed, 3 Aug 2022 17:46:50 +0100 Subject: [PATCH 01/29] AJAX rewrite --- info/about.php => about.php | 22 ++- account/account.php | 21 ++- account/login.php | 21 ++- account/password-reset.php | 21 ++- account/signup.php | 21 ++- css/master.css | 33 +++- css/nav.css | 6 +- css/normalize.css | 349 ++++++++++++++++++++++++++++++++++++ image.php | 165 ++++++++++------- index.php | 27 ++- scripts/flyout.js | 4 +- ui/footer.php | 52 +++--- ui/header.php | 30 ---- ui/nav.php | 20 +++ ui/required.php | 60 +++++-- upload.php | 21 ++- 16 files changed, 689 insertions(+), 184 deletions(-) rename info/about.php => about.php (82%) create mode 100644 css/normalize.css delete mode 100644 ui/header.php create mode 100644 ui/nav.php diff --git a/info/about.php b/about.php similarity index 82% rename from info/about.php rename to about.php index 1e9e6ca..7af9794 100644 --- a/info/about.php +++ b/about.php @@ -1,16 +1,26 @@ + + - Gallery - - + Lynx Gallery + + + + + + - +

What is Fluffys Amazing Gallery?

@@ -31,8 +41,8 @@
diff --git a/account/account.php b/account/account.php index 624ca5e..83517f1 100644 --- a/account/account.php +++ b/account/account.php @@ -1,18 +1,27 @@ + + - Account + Lynx Gallery + + - + + +
@@ -46,8 +55,8 @@
diff --git a/account/login.php b/account/login.php index c013abf..e796eb5 100644 --- a/account/login.php +++ b/account/login.php @@ -1,18 +1,27 @@ + + - Login + Lynx Gallery + + - + + + diff --git a/account/password-reset.php b/account/password-reset.php index de6c47c..cb70390 100644 --- a/account/password-reset.php +++ b/account/password-reset.php @@ -1,18 +1,27 @@ + + - Account + Lynx Gallery + + - + + + diff --git a/account/signup.php b/account/signup.php index 597ce8c..9978bc5 100644 --- a/account/signup.php +++ b/account/signup.php @@ -1,18 +1,27 @@ + + - Sign Up + Lynx Gallery + + - + + + diff --git a/css/master.css b/css/master.css index b8e5911..c716a13 100644 --- a/css/master.css +++ b/css/master.css @@ -1,3 +1,12 @@ +/* + Normalize CSS + + This ensures that the website looks the same across all devices + and browsers, regardless if I waisted my time making a tag look + good or not +*/ +@import "normalize.css"; + @import "nav.css"; @import "footer.css"; @@ -321,8 +330,14 @@ body { /* -=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ -.alert-banner { - margin: 0; padding: 0; + +/* + Notification system + + This is the notification system used by the website. Probably a little too much for what its used for +*/ +.notify-root { + margin: 0; padding: 1rem; max-width: 621px; width: calc(100% - 2rem); height: auto; @@ -330,7 +345,19 @@ body { top: 1rem; left: 50%; transform: translateX(-50%); - position: fixed; z-index: 9999999; + position: fixed; z-index: 999; +} +.notify { + margin-bottom: 1rem; padding: 0.5rem; + + width: auto; + + text-align: center; + + display: block; + + border-radius: var(--rad); + outline: 0.5rem solid var(--bg); } .alert { diff --git a/css/nav.css b/css/nav.css index 3f5ad56..18203f3 100644 --- a/css/nav.css +++ b/css/nav.css @@ -19,7 +19,7 @@ nav { box-shadow: var(--shadow); } -nav h3 { +nav p { margin: 0; vertical-align: middle; } @@ -29,7 +29,7 @@ nav hr { opacity: 0; } -.nav-name h3, .nav-name { +.nav-name p, .nav-name { display: block; } .nav-links { @@ -37,7 +37,7 @@ nav hr { justify-content: space-between; } @media (max-width: 800px) { - .nav-name h3, .nav-name hr, .nav-name { + .nav-name p, .nav-name hr, .nav-name { display: none; } .nav-links { diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! 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/image.php b/image.php index d5daae4..0cd9c97 100644 --- a/image.php +++ b/image.php @@ -1,25 +1,101 @@ +"; +// Div Start +echo "
"; + + +// Header for the flyout, must be included +echo "

Header

"; +// Flyout content, must be included!!!! +echo "

Description

"; +// Flyout button, not required so must need more information when added +echo $action; +// Exit button + Div End +echo " +
"; +// Must be included with flyout.php +echo ""; +?> + +Could not find image with ID: ".$_GET['id']."

"; + + // Replacement "no image" image and description + $image_path = "assets/no_image.png"; + $image_alt = "No image could be found, sowwy"; + } +} else { + // No ID toast + //echo "

No ID present

"; + + // Replacement "no image" image and description + //$image_path = "assets/no_image.png"; + //$image_alt = "No image could be found, sowwy"; +} + + +/* + Get all user details + + This gets the user info from the image +*/ +if (isset($image['author'])) { + $user = get_user_info($conn, $image['author']); +} + +/* + Check user privilge + + This requires the user to be logged in or an admin +*/ +if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { + $privilaged = True; +} else { + $privilaged = False; +} +?> + - Gallery + Lynx Gallery + + - - - - - - - + + + - +
+

Could not find image with ID: ".$_GET['id']."

"; - - // Replacement "no image" image and description - $image_path = "assets/no_image.png"; - $image_alt = "No image could be found, sowwy"; - } - } else { - // No ID toast - echo "

No ID present

"; - - // Replacement "no image" image and description - $image_path = "assets/no_image.png"; - $image_alt = "No image could be found, sowwy"; - } - - - // Get all user details - if (isset($image['author'])) { - $user = get_user_info($conn, $image['author']); - } - - // Check user privilge - if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { - $privilaged = True; - } else { - $privilaged = False; - } - - /* Delete flyout @@ -155,9 +192,9 @@ // Attempt to execute the prepared statement if (mysqli_stmt_execute($stmt)) { - header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=success"); + header("Location:image.php?id=".$image["id"]."&update=success"); } else { - header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=error"); + header("Location:image.php?id=".$image["id"]."&update=error"); } } } @@ -210,9 +247,9 @@ // Attempt to execute the prepared statement if (mysqli_stmt_execute($stmt)) { - header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=success"); + header("Location:image.php?id=".$image["id"]."&update=success"); } else { - header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=error"); + header("Location:image.php?id=".$image["id"]."&update=error"); } } } @@ -250,9 +287,9 @@ // Attempt to execute the prepared statement if (mysqli_stmt_execute($stmt)) { - header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=success"); + header("Location:image.php?id=".$image["id"]."&update=success"); } else { - header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$image["id"]."&update=error"); + header("Location:image.php?id=".$image["id"]."&update=error"); } } } @@ -265,6 +302,7 @@ ?> +

Description

+

Details

- + echo "
+ + +
"; } @@ -375,8 +416,8 @@ // Must be included with flyout.php echo ""; - include("ui/top.html"); - include("ui/footer.php"); + include "ui/top.html"; + include "ui/footer.php"; ?> diff --git a/index.php b/index.php index 5392535..94a20ba 100644 --- a/index.php +++ b/index.php @@ -1,18 +1,27 @@ + + - Gallery + Lynx Gallery + + - + + +
@@ -55,7 +64,7 @@ // Clean input $tags_string = tag_clean(trim($_POST['search'])); - header("Location:https://superdupersecteteuploadtest.fluffybean.gay?q=".$tags_string); + header("Location:index.php?q=".$tags_string); } if (isset($_GET["q"])) { echo "

Search results for: ".$_GET['q']."

"; @@ -103,7 +112,7 @@ // Image loading echo "
"; - echo ""; + echo ""; echo "
"; } } else { @@ -116,7 +125,7 @@ // Image loading echo "
"; - echo ""; + echo ""; echo "
"; } } @@ -124,8 +133,8 @@
diff --git a/scripts/flyout.js b/scripts/flyout.js index 50c01dc..c1008d8 100644 --- a/scripts/flyout.js +++ b/scripts/flyout.js @@ -1,5 +1,3 @@ -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/ . . ."); - $(document).ready(function() { let show = document.querySelectorAll(".flyout-display"); let hide = document.querySelector(".flyout-close"); @@ -19,6 +17,6 @@ $(document).ready(function() { setTimeout(function(){ document.querySelector(".flyout-dim").style.display= "none"; - }, 600); + }, 621); }); }); diff --git a/ui/footer.php b/ui/footer.php index 9abbb1e..dff30cd 100644 --- a/ui/footer.php +++ b/ui/footer.php @@ -1,43 +1,43 @@ - - -
+ diff --git a/ui/header.php b/ui/header.php deleted file mode 100644 index 13a6f0c..0000000 --- a/ui/header.php +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/ui/nav.php b/ui/nav.php new file mode 100644 index 0000000..9f57a20 --- /dev/null +++ b/ui/nav.php @@ -0,0 +1,20 @@ + diff --git a/ui/required.php b/ui/required.php index 8f575e0..4092266 100644 --- a/ui/required.php +++ b/ui/required.php @@ -1,20 +1,56 @@ connect_error) { + // Send notification that connection couldn't be made +} + + +/* + Start session + + This is important as most pages use the PHP session and will complain if its not possible to access. +*/ session_start(); -if (is_dir("ui/")) { - include_once("ui/functions.php"); + +/* + Check which directory user is in + + I don't know if theres a better way of doing this? If there is please let me know +*/ +if (is_file("index.php")) { + $root_dir = ""; } else { - include_once("../ui/functions.php"); + $root_dir = "../"; } -$conn = mysqli_connect("localhost", "uwu", "fennec621", "swag"); -if ($conn->connect_error) { - echo "

Could not connect to database

"; -} + +/* + Include functions + + Maybe I should put all the functions in this file? Dunno +*/ +include $root_dir."ui/functions.php"; + +/* + Notification system + + This is the notification system used by the website. Probably a little too much for what its used for +*/ +echo "
"; ?> - diff --git a/upload.php b/upload.php index e8f2e06..c53d6dd 100644 --- a/upload.php +++ b/upload.php @@ -1,18 +1,27 @@ + + - Upload + Lynx Gallery + + - + + + From c8f434e10610b35fa5a1925491ef4078e7f40940 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sat, 6 Aug 2022 10:52:40 +0100 Subject: [PATCH 02/29] Adding modules --- .gitmodules | 6 ++++++ Flyout | 1 + Sniffle | 1 + css/master.css | 6 +++--- image.php | 36 +++++++++++++++++-------------- index.php | 54 ++++++++++++----------------------------------- scripts/alert.js | 10 --------- scripts/flyout.js | 22 ------------------- search.php | 25 ++++++++++++++++++++++ ui/required.php | 23 ++++++++++++++++++++ 10 files changed, 93 insertions(+), 91 deletions(-) create mode 100644 .gitmodules create mode 160000 Flyout create mode 160000 Sniffle delete mode 100644 scripts/alert.js delete mode 100644 scripts/flyout.js create mode 100644 search.php diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..474978f --- /dev/null +++ b/.gitmodules @@ -0,0 +1,6 @@ +[submodule "Sniffle"] + path = Sniffle + url = https://github.com/Fluffy-Bean/Sniffle.git +[submodule "Flyout"] + path = Flyout + url = https://github.com/Fluffy-Bean/Flyout.git diff --git a/Flyout b/Flyout new file mode 160000 index 0000000..57d63d7 --- /dev/null +++ b/Flyout @@ -0,0 +1 @@ +Subproject commit 57d63d741f57eaaa8b863b1ecd5d6df8c1d00834 diff --git a/Sniffle b/Sniffle new file mode 160000 index 0000000..471cd36 --- /dev/null +++ b/Sniffle @@ -0,0 +1 @@ +Subproject commit 471cd363a78fd2b73d960211a33829bada62e849 diff --git a/css/master.css b/css/master.css index c716a13..e2baef5 100644 --- a/css/master.css +++ b/css/master.css @@ -337,7 +337,7 @@ body { This is the notification system used by the website. Probably a little too much for what its used for */ .notify-root { - margin: 0; padding: 1rem; + margin: 0; padding: 0; max-width: 621px; width: calc(100% - 2rem); height: auto; @@ -447,7 +447,7 @@ a.btn { /* -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ -.flyout { +/*.flyout { margin: 0; padding: 0.5rem 0.5rem 1.5rem; max-width: 621px; width: calc(100% - 2.5rem + 3px); @@ -487,7 +487,7 @@ a.btn { backdrop-filter: blur(5px); transition: opacity 2s cubic-bezier(.19,1,.22,1); -} +}*/ /* -=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- diff --git a/image.php b/image.php index 0cd9c97..4dd4619 100644 --- a/image.php +++ b/image.php @@ -93,28 +93,26 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> + + + + + + + + -
- + if (params.update == "success") { + sniffleAdd("Info", "Image information updated", "var(--green)"); } - if ($_GET["del"] == "fail") { - echo notify("Failed to delete image", "low"); + if (params.del == "fail") { + sniffleAdd("Error", "Failed to delete image", "var(--red)"); } - ?> -

- -
+ "; } + echo ""; + + echo""; + echo "
"; } ?> diff --git a/index.php b/index.php index 94a20ba..2d44fcb 100644 --- a/index.php +++ b/index.php @@ -18,29 +18,28 @@ integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> + + + + + + + + -
- + if (params.del == "true") { + sniffleAdd("Image Deleted", "Successfully deleted image: ", "var(--green)"); } - // Account toast - if ($_GET["login"] == "success") { - echo notify("O hi ".$_SESSION['username'], "high"); + if (params.login == "success") { + sniffleAdd("Logged in", "O hi ", "var(--green)"); } - ?> - -
+ 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 "
"; - } - } else { // Getting thumbnail if (file_exists("images/thumbnails/".$image['imagename'])) { $image_path = "images/thumbnails/".$image['imagename']; @@ -127,7 +102,6 @@ echo "
"; echo ""; echo "
"; - } } ?> diff --git a/scripts/alert.js b/scripts/alert.js deleted file mode 100644 index e63b189..0000000 --- a/scripts/alert.js +++ /dev/null @@ -1,10 +0,0 @@ -let alertClose = document.querySelectorAll(".alert"); - -function closeAlert(gone) { - gone.closest(".alert").style.transform="translateY(-10rem) scale(0.8)"; - gone.closest(".alert").style.opacity="0"; - - setTimeout(function(){ - gone.closest(".alert").style.display="none"; - }, 200); -}; diff --git a/scripts/flyout.js b/scripts/flyout.js deleted file mode 100644 index c1008d8..0000000 --- a/scripts/flyout.js +++ /dev/null @@ -1,22 +0,0 @@ -$(document).ready(function() { - let show = document.querySelectorAll(".flyout-display"); - let hide = document.querySelector(".flyout-close"); - - show.forEach(function(){ - document.querySelector(".flyout").style.transform= "translateX(-50%) scale(1)"; - document.querySelector(".flyout").style.bottom= "-1rem"; - document.querySelector(".flyout-dim").style.display= "block"; - }); - - - hide.addEventListener("click", function(){ - document.querySelector(".flyout").style.transform= "translateX(-50%) scale(0.8)"; - document.querySelector(".flyout").style.bottom= "-20rem"; - - document.querySelector(".flyout-dim").style.opacity= "0"; - - setTimeout(function(){ - document.querySelector(".flyout-dim").style.display= "none"; - }, 621); - }); -}); diff --git a/search.php b/search.php new file mode 100644 index 0000000..3557674 --- /dev/null +++ b/search.php @@ -0,0 +1,25 @@ + 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 "
"; + } +} +?> diff --git a/ui/required.php b/ui/required.php index 4092266..91c318c 100644 --- a/ui/required.php +++ b/ui/required.php @@ -52,5 +52,28 @@ include $root_dir."ui/functions.php"; echo "
"; ?> + + +
+ + +
+
+

Header

+

Description

+
+ +
From 21152358f17699b54623ffcbb5543fc130afe502 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sat, 6 Aug 2022 22:14:05 +0100 Subject: [PATCH 03/29] Working on getting new Modules working --- assets/icons/hand-waving.svg | 1 + assets/icons/warning.svg | 1 + css/nav.css | 3 ++ image.php | 79 ++++++++++++++---------------------- index.php | 6 ++- ui/required.php | 10 ++--- 6 files changed, 45 insertions(+), 55 deletions(-) create mode 100644 assets/icons/hand-waving.svg create mode 100644 assets/icons/warning.svg diff --git a/assets/icons/hand-waving.svg b/assets/icons/hand-waving.svg new file mode 100644 index 0000000..d71604d --- /dev/null +++ b/assets/icons/hand-waving.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/warning.svg b/assets/icons/warning.svg new file mode 100644 index 0000000..d607334 --- /dev/null +++ b/assets/icons/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/nav.css b/css/nav.css index 18203f3..28526ba 100644 --- a/css/nav.css +++ b/css/nav.css @@ -6,6 +6,9 @@ nav { width: calc(100vh - 2rem)); height: 2.5rem; + position: sticky; z-index: 99; + top: 1rem; + align-items: center; vertical-align: middle; diff --git a/image.php b/image.php index 4dd4619..91d9900 100644 --- a/image.php +++ b/image.php @@ -1,23 +1,3 @@ -"; -// Div Start -echo "
"; - - -// Header for the flyout, must be included -echo "

Header

"; -// Flyout content, must be included!!!! -echo "

Description

"; -// Flyout button, not required so must need more information when added -echo $action; -// Exit button + Div End -echo " -
"; -// Must be included with flyout.php -echo ""; -?> - -

Danger zone

"; + ?> + +
+

Danger zone

- // Delete - echo "
- -
"; + + + - // Edit description - echo "
- -
"; + + + - // Edit tags - echo "
- -
"; + + + - // Edit authro + + + ?> +
-
"; + + Show flyout!"; - - echo""; - echo "
"; } ?> "; - include "ui/top.html"; include "ui/footer.php"; ?> diff --git a/index.php b/index.php index 2d44fcb..47b09df 100644 --- a/index.php +++ b/index.php @@ -33,11 +33,13 @@ ?> diff --git a/ui/required.php b/ui/required.php index 91c318c..d1e1eb1 100644 --- a/ui/required.php +++ b/ui/required.php @@ -71,9 +71,9 @@ echo "
";
-
-

Header

-

Description

-
- +
+

Header

+

Description

+
+
From 6a60375904b8fc006f59e9d17709c92abccdb9f9 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 7 Aug 2022 09:07:18 +0100 Subject: [PATCH 04/29] Getting buttons working, not functional yet bruh --- app/image/delete_image.php | 0 app/image/edit_author.php | 0 app/image/edit_description.php | 76 +++++++++++++++++++++++++++ app/image/edit_tags.php | 0 app/server/conn.php | 17 ++++++ image.php | 95 ++++++++++++++++------------------ index.php | 5 +- scripts/top.js | 13 ----- ui/functions.php | 1 - ui/nav.php | 2 +- ui/required.php | 56 +++++++++++++------- ui/top.html | 4 -- 12 files changed, 177 insertions(+), 92 deletions(-) create mode 100644 app/image/delete_image.php create mode 100644 app/image/edit_author.php create mode 100644 app/image/edit_description.php create mode 100644 app/image/edit_tags.php create mode 100644 app/server/conn.php delete mode 100644 scripts/top.js delete mode 100644 ui/top.html diff --git a/app/image/delete_image.php b/app/image/delete_image.php new file mode 100644 index 0000000..e69de29 diff --git a/app/image/edit_author.php b/app/image/edit_author.php new file mode 100644 index 0000000..e69de29 diff --git a/app/image/edit_description.php b/app/image/edit_description.php new file mode 100644 index 0000000..9ef91da --- /dev/null +++ b/app/image/edit_description.php @@ -0,0 +1,76 @@ +connect_error) { + // Send notification that connection couldn't be made +} +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; + } +} +function get_image_info($conn, $id) { + // Setting SQL query + $sql = "SELECT * FROM swag_table WHERE id = ".$id; + // Getting results + $query = mysqli_query($conn, $sql); + // Fetching associated info + $image_array = mysqli_fetch_assoc($query); + + return($image_array); +} + + +// Get image ID to search up +$image_post_id = $_POST['image_id']; +$image_info = get_image_info($conn, $image_post_id); + +if (isset($_POST['description'])) { + // If privilaged, continue + if (image_privilage($image_info['id'])) { + // getting ready forSQL asky asky + $sql = "UPDATE swag_table 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['description']; + $param_id = $image_post_id; + + // Attempt to execute the prepared statement + if (mysqli_stmt_execute($stmt)) { + echo ""; + } else { + echo ""; + } + } + } else { + echo ""; + } +} diff --git a/app/image/edit_tags.php b/app/image/edit_tags.php new file mode 100644 index 0000000..e69de29 diff --git a/app/server/conn.php b/app/server/conn.php new file mode 100644 index 0000000..2f6fda8 --- /dev/null +++ b/app/server/conn.php @@ -0,0 +1,17 @@ +connect_error) { + // Send notification that connection couldn't be made +} diff --git a/image.php b/image.php index 91d9900..2a6cdb5 100644 --- a/image.php +++ b/image.php @@ -95,20 +95,6 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { - - "; - - flyout($header, $content, $action); - } /* Confirm deleting user @@ -137,19 +123,7 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { } } - /* - Description edit - */ - if (isset($_POST['description_flyout']) && $privilaged) { - $header = "Enter new Description/Alt"; - $content = "Whatcha gonna put in there 👀"; - $action = "
- - -
"; - flyout($header, $content, $action); - } /* Description confirm */ @@ -177,19 +151,7 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { } } - /* - Adding tags - */ - if (isset($_POST['tags_flyout']) && $privilaged) { - $header = "Tags"; - $content = "Add image tags here! This is still being tested so your tags may be removed later on. Tags ONLY accept, letters, numbers and underscores. Hyphens will be stitched to underscores and spaces will seperate the different tags from eachother."; - $action = "
- - -
"; - flyout($header, $content, $action); - } /* Tags Confirm */ @@ -367,15 +329,49 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { - - + + @@ -383,7 +379,11 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { @@ -394,7 +394,7 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) {
- +
- + diff --git a/index.php b/index.php index 47b09df..c6503c2 100644 --- a/index.php +++ b/index.php @@ -108,9 +108,6 @@ ?>
- + diff --git a/scripts/top.js b/scripts/top.js deleted file mode 100644 index 87f2b5c..0000000 --- a/scripts/top.js +++ /dev/null @@ -1,13 +0,0 @@ -$(document).ready(function() { - button = document.getElementById("back-to-top"); - - window.onscroll = function() {scrollFunction()}; - - function scrollFunction() { - if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { - button.style.right = "1rem"; - } else { - button.style.right = "-2.5rem"; - } - } -}); diff --git a/ui/functions.php b/ui/functions.php index fadd86b..e11239b 100644 --- a/ui/functions.php +++ b/ui/functions.php @@ -188,4 +188,3 @@ function notify($text, $level) { return $text_string; } -?> diff --git a/ui/nav.php b/ui/nav.php index 9f57a20..4a4f72e 100644 --- a/ui/nav.php +++ b/ui/nav.php @@ -13,7 +13,7 @@ echo "
"; echo "".substr($_SESSION["username"], 0, 15).""; } else { - echo "Login"; + echo "Login"; } ?> diff --git a/ui/required.php b/ui/required.php index d1e1eb1..838f2b4 100644 --- a/ui/required.php +++ b/ui/required.php @@ -1,22 +1,4 @@ connect_error) { - // Send notification that connection couldn't be made -} - - /* Start session @@ -37,6 +19,11 @@ if (is_file("index.php")) { } +/* + Connect to the server +*/ +include $root_dir."app/server/conn.php"; + /* Include functions @@ -66,10 +53,16 @@ echo "
"; }); - +
- +

Header

@@ -77,3 +70,26 @@ echo "
";
+ + + + + + diff --git a/ui/top.html b/ui/top.html deleted file mode 100644 index 12b1f7c..0000000 --- a/ui/top.html +++ /dev/null @@ -1,4 +0,0 @@ - - - - From 9fd86cb3fcf89671dc89069d550d0e520fce0071 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 7 Aug 2022 10:59:27 +0100 Subject: [PATCH 05/29] This will never work --- app/image/edit_description.php | 81 ++++++++-------------------------- image.php | 66 +++++---------------------- 2 files changed, 31 insertions(+), 116 deletions(-) diff --git a/app/image/edit_description.php b/app/image/edit_description.php index 9ef91da..8a9a547 100644 --- a/app/image/edit_description.php +++ b/app/image/edit_description.php @@ -1,17 +1,4 @@ connect_error) { // Send notification that connection couldn't be made } -function image_privilage($id) { - $session_id = $_SESSION['id']; - if (isset($session_id) || !empty($session_id)) { - if ($session_id == $id) { - return True; + + +if (isset($_POST['submit'])) { + // getting ready forSQL asky asky + $sql = "UPDATE swag_table 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['description']; + $param_id = $_POST['id']; + + // Attempt to execute the prepared statement + if (mysqli_stmt_execute($stmt)) { + echo "sniffleAdd('Info','Description has been updated successfully! You may need to refresh the page to see the new information.','var(--green)')"; } else { - return False; + echo "sniffleAdd('Error','An error occured on the servers','var(--red)')"; } - } else { - return False; - } -} -function get_image_info($conn, $id) { - // Setting SQL query - $sql = "SELECT * FROM swag_table WHERE id = ".$id; - // Getting results - $query = mysqli_query($conn, $sql); - // Fetching associated info - $image_array = mysqli_fetch_assoc($query); - - return($image_array); -} - - -// Get image ID to search up -$image_post_id = $_POST['image_id']; -$image_info = get_image_info($conn, $image_post_id); - -if (isset($_POST['description'])) { - // If privilaged, continue - if (image_privilage($image_info['id'])) { - // getting ready forSQL asky asky - $sql = "UPDATE swag_table 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['description']; - $param_id = $image_post_id; - - // Attempt to execute the prepared statement - if (mysqli_stmt_execute($stmt)) { - echo ""; - } else { - echo ""; - } - } - } else { - echo ""; } } +?> diff --git a/image.php b/image.php index 2a6cdb5..1a5b507 100644 --- a/image.php +++ b/image.php @@ -68,11 +68,7 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { - + @@ -123,35 +119,6 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { } } - - /* - Description confirm - */ - if (isset($_POST['description_confirm']) && $privilaged) { - // Unset all the variables, needed by flyout - unset($header, $content, $action); - - // getting ready forSQL asky asky - $sql = "UPDATE swag_table 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['update_alt']; - $param_id = $image["id"]; - - // Attempt to execute the prepared statement - if (mysqli_stmt_execute($stmt)) { - header("Location:image.php?id=".$image["id"]."&update=success"); - } else { - header("Location:image.php?id=".$image["id"]."&update=error"); - } - } - } - - /* Tags Confirm */ @@ -340,37 +307,28 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { |------------------------------------------------------------- | Edit description |------------------------------------------------------------- - | As the name suggests, this edits the description, this - | Uses the following variables: - | editDescriptionButton - | editDescriptionConfirm - | editDescriptionInput - | editDescriptionSubmit - |------------------------------------------------------------- --> From dba8379a0cf4ba59bd3bb44bb01365c47d68e4ed Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 7 Aug 2022 11:02:42 +0100 Subject: [PATCH 06/29] Replaced symlink with local version of Plugins --- .gitmodules | 6 --- Flyout | 1 - Flyout/.flyout.css.swp | Bin 0 -> 12288 bytes Flyout/flyout.css | 51 +++++++++++++++++++ Flyout/flyout.js | 50 ++++++++++++++++++ Sniffle | 1 - Sniffle/sniffle.css | 112 +++++++++++++++++++++++++++++++++++++++++ Sniffle/sniffle.js | 52 +++++++++++++++++++ 8 files changed, 265 insertions(+), 8 deletions(-) delete mode 160000 Flyout create mode 100644 Flyout/.flyout.css.swp create mode 100644 Flyout/flyout.css create mode 100644 Flyout/flyout.js delete mode 160000 Sniffle create mode 100644 Sniffle/sniffle.css create mode 100644 Sniffle/sniffle.js diff --git a/.gitmodules b/.gitmodules index 474978f..e69de29 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +0,0 @@ -[submodule "Sniffle"] - path = Sniffle - url = https://github.com/Fluffy-Bean/Sniffle.git -[submodule "Flyout"] - path = Flyout - url = https://github.com/Fluffy-Bean/Flyout.git diff --git a/Flyout b/Flyout deleted file mode 160000 index 57d63d7..0000000 --- a/Flyout +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 57d63d741f57eaaa8b863b1ecd5d6df8c1d00834 diff --git a/Flyout/.flyout.css.swp b/Flyout/.flyout.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..c09233443a2d9229763897d8abdfc9703f2d30cb GIT binary patch literal 12288 zcmeI2yN=U96ov;1B(&TFRL~qiNLjQ_>@17GDG^8%bX+SmwkPp`;|ca;y%!-0cn?54 z2NFC1E9emgh>n7ai$MJ2I2*)ek?4?)qfcIY&YU^(&7_ESBLB*Ti*&jj2weMwFt6T6 zM-T20FAob*7-QY*zg?AzJgZ8p^TC#(on={cs;cUwc9?Zsj~nIftaCnFHDlZ9*SB_D zmRly_MmE3({?Wj0vDgiK*ZJ7dBXnT@<$uh>-PiydU;}J`4X^<=zy{a=8~7g$*wHp| z7lm(cieGH*+kUz?k9=bTY=8~00XDz}*Z><~18jf|umLu}2L3|>G7;j)oDe&Ap?LiN zfBO6X!(Jg?f*0T!cnThZ2jD)q2NDp2%it3DvPXzd;3IesHo$Z60BDecbD#yj?H1xI zcnvndb6`OUu7CjS0lUB)_>B7Afw$ld*Z@z!WAF%E2WP=a&;^IU9B}j64)|gNY=8~0 z0XDz}*Z><~18kr+aA$G}qDm(=4M~oz>52B_K&~fat4$u66*_^>y0|k741E9i?*rFG z=LB6fMV6FQrrNs0zEqjwmMqLTPskdQG%8G#sUcmUR4yyZ4aM15QEDpJ-q#qhQxAv1 zy;85?d~ryTDH2t9c-2E8i7rQ(Tn$O*na&J(o~(iwNvLk;DMmnuC-k*4drjx>F&cN`6Mz8MhI0m$rnHT&{ZH^9P8 zcPWaCTW$xEM~n4hP23J;G0^bp_h=-Oq~0`>#oS!;>0}1sbcHREXFFwICb0X<*#b%fX(kfZrnEj!!^DjXSte5c8}?% K1254-c=!&($9%m2 literal 0 HcmV?d00001 diff --git a/Flyout/flyout.css b/Flyout/flyout.css new file mode 100644 index 0000000..44b04c9 --- /dev/null +++ b/Flyout/flyout.css @@ -0,0 +1,51 @@ +.flyout-dim { + width: 100vw; height: 100vh; + + display: none; + + position: fixed; z-index: 99; + + object-position: center; + + background-color: #151515aa; + + opacity: 0; + + transition: opacity 1s cubic-bezier(.19,1,.22,1), filter 1s cubic-bezier(.19,1,.22,1); +} + +.flyout { + margin: 0; padding: 0.5rem; + + max-width: 621px; width: calc(100% - 3.5rem); + max-height: 20rem; height: auto; min-height: 10rem; + + position: fixed; z-index: 99999; + left: 50%; bottom: -15rem; + transform: translateX(-50%) scale(0.5); + + background-color: #151515; + color: white; + + transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1); + + border-radius: var(--rad); + border: 0.2rem solid var(--green); + outline: 0.5rem solid var(--bg); +} + +.flyout-header { + font-size: 20px; +} + +.flyout-actionbox { + display: inline; + box-sizing: border-box; +} +/* Worlds shittest workaround to a problem I have no clue how to fix */ +.flyout-actionbox * { + width: 100%; +} +.flyout-actionbox * * { + width: auto; +} diff --git a/Flyout/flyout.js b/Flyout/flyout.js new file mode 100644 index 0000000..af75cbc --- /dev/null +++ b/Flyout/flyout.js @@ -0,0 +1,50 @@ +$(document).ready(function() { + var flyoutRoot = document.getElementById("#flyoutRoot"); + var flyoutDim = document.getElementById("#flyoutDim"); + + var flyoutHeader = document.getElementById("#flyoutHeader"); + var flyoutDescription = document.getElementById("#flyoutDescription"); + var flyoutActionbox = document.getElementById("#flyoutActionbox"); +}); + +function flyoutShow(header, description, actionbox) { + // Checking if actionbox is set + if (typeof actionbox === 'undefined') { + flyoutActionbox.style.display = "none"; + } else if (actionbox == "") { + flyoutActionbox.style.display = "none"; + } else { + flyoutActionbox.style.display = "block"; + } + + // Set information in flyout + flyoutHeader.textContent = header; + flyoutDescription.textContent = description; + flyoutActionbox.innerHTML = actionbox; + + // Show the flyout + flyoutRoot.style.display = "flex"; + // Show the dim + flyoutDim.style.display = "block"; + setTimeout(function(){ + // Show the flyout + flyoutRoot.style.transform = "translateX(-50%) scale(1)"; + flyoutRoot.style.bottom = "1rem"; + // Show the dim + flyoutDim.style.opacity = "1"; + }, 1); +}; + +function flyoutClose() { + // Hide the flyout + flyoutRoot.style.transform = "translateX(-50%) scale(0.5)"; + flyoutRoot.style.bottom = "-20rem"; + // Hide the dim + flyoutDim.style.opacity = "0"; + setTimeout(function(){ + // Hide the flyout + flyoutRoot.style.display = "none"; + // Hide the dim + flyoutDim.style.display = "none"; + }, 500); +}; diff --git a/Sniffle b/Sniffle deleted file mode 160000 index 471cd36..0000000 --- a/Sniffle +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 471cd363a78fd2b73d960211a33829bada62e849 diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css new file mode 100644 index 0000000..f55b256 --- /dev/null +++ b/Sniffle/sniffle.css @@ -0,0 +1,112 @@ +/* + Sniffle CSS + + Written simply for easy changing! +*/ + + +/* + Base notification stacking + + It allows for the notifications to stack simply + Due to div having no height initself there is no + reason in hiding it when no notifications are showing +*/ +.sniffle { + margin: 0; padding: 0 1rem; + + max-width: 621px; width: calc(100% - 1rem); + + top: 0.5rem; left: 50%; + transform: translateX(-50%); + + position: fixed; z-index: 999; +} + +/* + Notification body + + It contains 2 child elements, + am image .sniffle-img + and a text div .sniffle-content +*/ +.sniffle-notification { + margin-bottom: 1rem; padding: 0.5rem; + + max-width: calc(100% - 1rem); min-height: 2.5rem; + + display: flex; flex-direction: row; overflow-y: hidden; + + z-index: 999; + + background-color: #151515; + + box-shadow: 5px 5px 5px #151515aa; + + transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1); + + border-radius: var(--rad); +} +.sniffle-notification:hover { + transform: scale(1.05); + + cursor: pointer; +} + + +/* + Notification content Root + + Overflow is hidden incase the description of the message is too long too display + And to prevent text from overflowing the notification +*/ +.sniffle-content { + margin: 0 auto; + + width: calc(100% - 3.5rem); + flex-direction: column; flex-wrap: wrap; + + overflow-y: hidden; +} + +/* + Notification icon/image +*/ +.sniffle-img { + margin-right: 1rem; + + max-width: 2.5rem; width: auto; + height: auto; + + object-fit: contain; +} +/* + Notification header +*/ +.sniffle-header { + margin: 0 0 0.25rem 0; padding: 0; + + font-size: 16px; + font-weight: bold; + + color: var(--fg); +} +/* + Notification description +*/ +.sniffle-description { + margin: 0; padding: 0; + font-size: 14px; + + word-wrap: break-word; + font-weight: bold; + + color: var(--fg); +} +.sniffle-description::after { + content: '\A Click\00A0 to\00A0 dissmiss'; + + white-space: pre; + + opacity: 0.6; +} diff --git a/Sniffle/sniffle.js b/Sniffle/sniffle.js new file mode 100644 index 0000000..111e4b3 --- /dev/null +++ b/Sniffle/sniffle.js @@ -0,0 +1,52 @@ +/* + Close notification + Used by the notifications themself, don't use in code +*/ +function sniffleClose(a) { + a.closest(".sniffle-notification").style.transform="translateY(-20rem) scale(0.8)"; + a.closest(".sniffle-notification").style.opacity="0"; + + setTimeout(function(){ + a.closest(".sniffle-notification").style.display="none"; + a.remove() + }, 200); +}; + + +/* + Add notification + + Header > Required + Takes in String input + + Description > Required + Takes in String input + + Img > Optional + Takes in String input +*/ +function sniffleAdd(header, description, colour, img) { + // Colour is optional, so check if it was added or not + if (typeof colour === 'undefined') { + colour = ''; + } else { + colour = `style="background-color:${colour};"`; + } + + // Image is optional, so check if it was added or not + if (typeof img === 'undefined') { + img = ''; + } else { + img = ``; + } + + var newSniffle = `
\ + ${img}\ +
\ +

${header}

\ +

${description}

\ +
\ +
`; + + $(".sniffle").append(newSniffle); +}; From 8da2aff2656995b027608359d1ed557d386cbd63 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 7 Aug 2022 12:57:13 +0100 Subject: [PATCH 07/29] AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA --- app/account/get_info.php | 16 +++ app/account/is_admin.php | 18 +++ app/account/login_status.php | 14 ++ app/format/string_to_tags.php | 18 +++ app/image/delete_image.php | 27 ++++ app/image/edit_author.php | 26 ++++ app/image/edit_description.php | 1 - app/image/edit_tags.php | 41 ++++++ app/image/get_image_info.php | 16 +++ app/image/image_privilage.php | 19 +++ app/server/conn.php | 2 +- app/server/secrete.php | 0 image.php | 235 +++++++++------------------------ index.php | 31 +---- ui/functions.php | 189 -------------------------- ui/required.php | 18 +-- 16 files changed, 270 insertions(+), 401 deletions(-) create mode 100644 app/account/get_info.php create mode 100644 app/account/is_admin.php create mode 100644 app/account/login_status.php create mode 100644 app/format/string_to_tags.php create mode 100644 app/image/get_image_info.php create mode 100644 app/image/image_privilage.php create mode 100644 app/server/secrete.php diff --git a/app/account/get_info.php b/app/account/get_info.php new file mode 100644 index 0000000..cd65e21 --- /dev/null +++ b/app/account/get_info.php @@ -0,0 +1,16 @@ +"); + } +} diff --git a/app/image/edit_author.php b/app/image/edit_author.php index e69de29..fb3874d 100644 --- a/app/image/edit_author.php +++ b/app/image/edit_author.php @@ -0,0 +1,26 @@ +/* + Author confirm +*/ +if (isset($_POST['author_confirm']) && is_admin($_SESSION['id'])) { + // Unset all the variables, needed by flyout + unset($header, $content, $action); + + // getting ready forSQL asky asky + $sql = "UPDATE swag_table 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['update_author']; + $param_id = $image["id"]; + + // Attempt to execute the prepared statement + if (mysqli_stmt_execute($stmt)) { + header("Location:image.php?id=".$image["id"]."&update=success"); + } else { + header("Location:image.php?id=".$image["id"]."&update=error"); + } + } +} diff --git a/app/image/edit_description.php b/app/image/edit_description.php index 8a9a547..378fa2b 100644 --- a/app/image/edit_description.php +++ b/app/image/edit_description.php @@ -30,4 +30,3 @@ if (isset($_POST['submit'])) { } } } -?> diff --git a/app/image/edit_tags.php b/app/image/edit_tags.php index e69de29..7787578 100644 --- a/app/image/edit_tags.php +++ b/app/image/edit_tags.php @@ -0,0 +1,41 @@ +/* + Tags Confirm +*/ +if (isset($_POST['tags_confirm']) && $privilaged) { + // Unset all the variables, needed by flyout + unset($header, $content, $action); + + // Clean tags before adding + function clean($string) { + // Change to lowercase + $string = strtolower($string); + // Replace hyphens + $string = str_replace('-', '_', $string); + // Regex + $string = preg_replace('/[^A-Za-z0-9\_ ]/', '', $string); + // Return string + return preg_replace('/ +/', ' ', $string); + } + + // Clean input + $tags_string = tag_clean(trim($_POST['add_tags'])); + + // getting ready forSQL asky asky + $sql = "UPDATE swag_table 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 = $image["id"]; + + // Attempt to execute the prepared statement + if (mysqli_stmt_execute($stmt)) { + header("Location:image.php?id=".$image["id"]."&update=success"); + } else { + header("Location:image.php?id=".$image["id"]."&update=error"); + } + } +} diff --git a/app/image/get_image_info.php b/app/image/get_image_info.php new file mode 100644 index 0000000..b2b9fb6 --- /dev/null +++ b/app/image/get_image_info.php @@ -0,0 +1,16 @@ +connect_error) { - // Send notification that connection couldn't be made + echo ""; } diff --git a/app/server/secrete.php b/app/server/secrete.php new file mode 100644 index 0000000..e69de29 diff --git a/image.php b/image.php index 1a5b507..249dfcc 100644 --- a/image.php +++ b/image.php @@ -1,57 +1,10 @@ Could not find image with ID: ".$_GET['id']."

"; - - // Replacement "no image" image and description - $image_path = "assets/no_image.png"; - $image_alt = "No image could be found, sowwy"; + return "No information provided."; } -} else { - // No ID toast - //echo "

No ID present

"; - - // Replacement "no image" image and description - //$image_path = "assets/no_image.png"; - //$image_alt = "No image could be found, sowwy"; -} - - -/* - Get all user details - - This gets the user info from the image -*/ -if (isset($image['author'])) { - $user = get_user_info($conn, $image['author']); -} - -/* - Check user privilge - - This requires the user to be logged in or an admin -*/ -if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { - $privilaged = True; -} else { - $privilaged = False; } ?> @@ -79,7 +32,63 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { - + Could not find image with ID: ".$_GET['id']."

"; + + // Replacement "no image" image and description + $image_path = "assets/no_image.png"; + $image_alt = "No image could be found, sowwy"; + } + } else { + // No ID toast + //echo "

No ID present

"; + + // Replacement "no image" image and description + //$image_path = "assets/no_image.png"; + //$image_alt = "No image could be found, sowwy"; + } + + + /* + Get all user details + + This gets the user info from the image + */ + if (isset($image['author'])) { + $user = get_user_info($conn, $image['author']); + } + + /* + Check user privilge + + This requires the user to be logged in or an admin + */ + if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { + $privilaged = True; + } else { + $privilaged = False; + } + + include"ui/nav.php"; ?> - "); - } - } - - /* - Tags Confirm - */ - if (isset($_POST['tags_confirm']) && $privilaged) { - // Unset all the variables, needed by flyout - unset($header, $content, $action); - - // Clean tags before adding - function clean($string) { - // Change to lowercase - $string = strtolower($string); - // Replace hyphens - $string = str_replace('-', '_', $string); - // Regex - $string = preg_replace('/[^A-Za-z0-9\_ ]/', '', $string); - // Return string - return preg_replace('/ +/', ' ', $string); - } - - // Clean input - $tags_string = tag_clean(trim($_POST['add_tags'])); - - // getting ready forSQL asky asky - $sql = "UPDATE swag_table 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 = $image["id"]; - - // Attempt to execute the prepared statement - if (mysqli_stmt_execute($stmt)) { - header("Location:image.php?id=".$image["id"]."&update=success"); - } else { - header("Location:image.php?id=".$image["id"]."&update=error"); - } - } - } - - /* - Description athor - */ - if (isset($_POST['author_flyout']) && is_admin($_SESSION['id'])) { - $header = "Who owns the image?????"; - $content = "Enter ID of image owner"; - $action = "
- - -
"; - - flyout($header, $content, $action); - } - /* - Author confirm - */ - if (isset($_POST['author_confirm']) && is_admin($_SESSION['id'])) { - // Unset all the variables, needed by flyout - unset($header, $content, $action); - - // getting ready forSQL asky asky - $sql = "UPDATE swag_table 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['update_author']; - $param_id = $image["id"]; - - // Attempt to execute the prepared statement - if (mysqli_stmt_execute($stmt)) { - header("Location:image.php?id=".$image["id"]."&update=success"); - } else { - header("Location:image.php?id=".$image["id"]."&update=error"); - } - } - } - ?> -
- "; - ?> + ' src='' alt=''>
@@ -314,13 +208,12 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) { var header = "Enter new Description/Alt"; var description = "Whatcha gonna put in there 👀"; var actionBox = "
\ - \ - \ + \ + \
\
"; flyoutShow(header, description, actionBox); }); - $("#descriptionConfirm").submit(function(event) { event.preventDefault(); var descriptionInput = $("#descriptionInput").val(); diff --git a/index.php b/index.php index c6503c2..06e8d0f 100644 --- a/index.php +++ b/index.php @@ -43,35 +43,6 @@ } - - - - "; - - flyout($header, $content, $action); - } - /* - Search Confirm - */ - if (isset($_POST['search_confirm'])) { - // Unset all the variables, needed by flyout - unset($header, $content, $action); - - // Clean input - $tags_string = tag_clean(trim($_POST['search'])); - - header("Location:index.php?q=".$tags_string); - } - if (isset($_GET["q"])) { - echo "

Search results for: ".$_GET['q']."

"; - } - ?> -
".$welcome_message[array_rand($welcome_message, 1)]."

"; ?>
diff --git a/ui/functions.php b/ui/functions.php index e11239b..b3d9bbc 100644 --- a/ui/functions.php +++ b/ui/functions.php @@ -1,190 +1 @@ - At the bottom of the HTML document -*/ -function flyout($header, $content, $action) { - // Used for background dimming - echo "
"; - // Div Start - echo "
"; - - // Header for the flyout, must be included - if (isset($header) && !empty($header)) { - echo "

".$header."

"; - } else { - echo "

Header

"; - } - - // Flyout content, must be included!!!! - if (isset($content) && !empty($content)) { - echo "

".$content."

"; - } else { - echo "

Description

"; - } - - // Flyout button, not required so must need more information when added - if (isset($action) && !empty($action)) { - echo $action; - } - - // Exit button + Div End - echo " -
"; - - // Must be included with flyout.php - echo ""; -} - - -/* - Notification of an action done, takes in min 3 inputs: - - Text is the text that shows up on the notification - Takes in string input - - Level is the level of the notification - high is a good response or the colour green - low is a bad response or the colour red - default is a neutral response or the colour black/gray - - returns notification html including classes - - ===== Programmers note ============================== - I made this so I didn't have to remake the html - portion of the notification, it was annoying. - This also allows for expanding the system later on! - ===================================================== -*/ -function notify($text, $level) { - if ($level == "high") { - $text_string = "

".$text."

"; - } elseif ($level == "low") { - $text_string = "

".$text."

"; - } elseif ($level == "default") { - $text_string = "

".$text."

"; - } else { - $text_string = "

".$text."

"; - } - - return $text_string; -} diff --git a/ui/required.php b/ui/required.php index 838f2b4..1a72f8d 100644 --- a/ui/required.php +++ b/ui/required.php @@ -25,18 +25,18 @@ if (is_file("index.php")) { include $root_dir."app/server/conn.php"; /* - Include functions - - Maybe I should put all the functions in this file? Dunno + Add functions */ -include $root_dir."ui/functions.php"; +include $root_dir."app/account/get_info.php"; +include $root_dir."app/account/is_admin.php"; +include $root_dir."app/account/login_status.php"; -/* - Notification system +include $root_dir."app/format/string_to_tags.php"; - This is the notification system used by the website. Probably a little too much for what its used for -*/ -echo "
"; +include $root_dir."app/image/get_image_info.php"; +include $root_dir."app/image/image_privilage.php"; + +include $root_dir."app/server/secrete.php"; ?> + + @@ -33,13 +27,25 @@ function info_check($string){ @@ -186,6 +198,8 @@ function info_check($string){

Danger zone

+ + From d8b20c9b34fa7ddf06ff860f7854f1f57de1ee0e Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Mon, 8 Aug 2022 12:43:57 +0100 Subject: [PATCH 09/29] Working on getting new components to work with AJAX and Jquery --- app/image/delete_image.php | 84 +++++++++++++---- app/image/edit_author.php | 60 ++++++++---- app/image/edit_description.php | 81 ++++++++++++----- app/image/edit_tags.php | 101 ++++++++++++++++----- assets/icons/circle-wavy-check.svg | 1 + assets/icons/circle-wavy-question.svg | 1 + assets/icons/circle-wavy.svg | 2 +- assets/icons/clipboard-text.svg | 1 + assets/icons/cookie.svg | 1 + assets/icons/export.svg | 1 + assets/icons/gear.svg | 1 + assets/icons/tag.svg | 1 + css/master.css | 4 +- image.php | 126 ++++++++++++++++++-------- index.php | 2 +- 15 files changed, 344 insertions(+), 123 deletions(-) create mode 100644 assets/icons/circle-wavy-check.svg create mode 100644 assets/icons/circle-wavy-question.svg create mode 100644 assets/icons/clipboard-text.svg create mode 100644 assets/icons/cookie.svg create mode 100644 assets/icons/export.svg create mode 100644 assets/icons/gear.svg create mode 100644 assets/icons/tag.svg diff --git a/app/image/delete_image.php b/app/image/delete_image.php index 7871696..c15c0cf 100644 --- a/app/image/delete_image.php +++ b/app/image/delete_image.php @@ -1,27 +1,73 @@ + + + + + + + "); + ?> + + + + + + + + connect_error) { - // Send notification that connection couldn't be made -} +/* + |------------------------------------------------------------- + | Edit Description + |------------------------------------------------------------- + | This script took probably over 24hours to write, mostly + | because of my stupidity. But it (mostly) works now which is + | good. Reason for all the includes and session_start is due + | to the need of checking if the person owns the image. If this + | check is not done, someone could come by and just edit the + | Jquery code on the front-end and change the image ID. Which + | isnt too great :p + |------------------------------------------------------------- +*/ +session_start(); +// Include server connection +include "../server/conn.php"; +// Include required checks +include "get_image_info.php"; +include "image_privilage.php"; if (isset($_POST['submit'])) { - // getting ready forSQL asky asky - $sql = "UPDATE swag_table SET alt=? WHERE id=?"; + // Get all image info + $image_array = get_image_info($conn, $_POST['id']); + // If user owns image or has the ID of 1 + if (image_privilage($image_array['author']) || $_SESSION['id'] == 1) { + // getting ready forSQL asky asky + $sql = "UPDATE swag_table 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['description']; - $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)) { - echo "sniffleAdd('Info', 'Description has been updated successfully! You may need to refresh the page to see the new information.', 'var(--green)', ".$root_dir."'assets/icons/check.svg')"; + // Attempt to execute the prepared statement + if (mysqli_stmt_execute($stmt)) { + ?> + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/circle-wavy-question.svg b/assets/icons/circle-wavy-question.svg new file mode 100644 index 0000000..6f43cb5 --- /dev/null +++ b/assets/icons/circle-wavy-question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/circle-wavy.svg b/assets/icons/circle-wavy.svg index 839e559..0721523 100644 --- a/assets/icons/circle-wavy.svg +++ b/assets/icons/circle-wavy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/clipboard-text.svg b/assets/icons/clipboard-text.svg new file mode 100644 index 0000000..8c3857e --- /dev/null +++ b/assets/icons/clipboard-text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/cookie.svg b/assets/icons/cookie.svg new file mode 100644 index 0000000..70c21ba --- /dev/null +++ b/assets/icons/cookie.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/export.svg b/assets/icons/export.svg new file mode 100644 index 0000000..5bac907 --- /dev/null +++ b/assets/icons/export.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/gear.svg b/assets/icons/gear.svg new file mode 100644 index 0000000..bbce50d --- /dev/null +++ b/assets/icons/gear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/tag.svg b/assets/icons/tag.svg new file mode 100644 index 0000000..f4dbfde --- /dev/null +++ b/assets/icons/tag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/master.css b/css/master.css index 54f89ed..cf789b7 100644 --- a/css/master.css +++ b/css/master.css @@ -256,9 +256,7 @@ body { border-radius: var(--rad); } -.tag::before { - content: '#'; -} + /* -=-=-= UNIVERSAL =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ diff --git a/image.php b/image.php index 45a7da0..4c52852 100644 --- a/image.php +++ b/image.php @@ -98,16 +98,8 @@ $privilaged = False; } - include"ui/nav.php"; ?> - - + include "ui/nav.php"; + ?>
' src='' alt=''> @@ -174,7 +166,7 @@ if (isset($image['tags']) && !empty($image['tags'])) { $image_tags_array = explode(" ", $image['tags']); foreach ($image_tags_array as $tag) { - echo "

".$tag."

"; + echo "

".$tag."

"; } } else { echo "

No tags present

"; @@ -200,34 +192,52 @@ - + - - + + - + -
- - - -
+ + "; diff --git a/index.php b/index.php index 06e8d0f..025ed73 100644 --- a/index.php +++ b/index.php @@ -33,7 +33,7 @@ ?> + + + + + + + + + @@ -54,9 +57,6 @@ ?>
- + diff --git a/account/login.php b/account/login.php index e796eb5..b992e16 100644 --- a/account/login.php +++ b/account/login.php @@ -1,5 +1,3 @@ - - @@ -13,14 +11,19 @@ - + + + + + + + + + Need an account? Sign up!
- + diff --git a/account/password-reset.php b/account/password-reset.php index cb70390..026ce5b 100644 --- a/account/password-reset.php +++ b/account/password-reset.php @@ -1,5 +1,3 @@ - - @@ -13,14 +11,19 @@ - + + + + + + + + + - + diff --git a/account/signup.php b/account/signup.php index 9978bc5..fb2161e 100644 --- a/account/signup.php +++ b/account/signup.php @@ -1,5 +1,3 @@ - - @@ -13,14 +11,19 @@ - + + + + + + + + + - + diff --git a/css/nav.css b/css/nav.css index a5cd364..eae0fef 100644 --- a/css/nav.css +++ b/css/nav.css @@ -54,10 +54,30 @@ nav hr { } @media (max-width: 550px) { + nav { + margin: 0; + + width: calc(100vw - 2rem)); + + position: fixed; + top: auto; bottom: 0; left: 0; right: 0; + + border: none; + border-top: 3px solid var(--green); + + backdrop-filter: blur(16px); + } .nav-hide { display: none; } .nav-links a .svg { margin: 0; } + + footer { + margin-bottom: 3.5rem !important; + } + #back-to-top { + bottom: 4.5rem !important; + } } diff --git a/image.php b/image.php index 4c52852..527b6af 100644 --- a/image.php +++ b/image.php @@ -13,10 +13,6 @@ - - @@ -155,6 +151,18 @@ // Image download echo "Download image"; + + // Copy image + ?> + + Copy image link"; ?> diff --git a/index.php b/index.php index 025ed73..4ca720d 100644 --- a/index.php +++ b/index.php @@ -9,8 +9,8 @@ - - + + + + + + + + + + + sniffleAdd('Error', '".$error."', 'var(--red)', '".$root_dir."assets/icons/cross.svg');"; } if (isset($success)) { - echo notify($success, "high"); + echo ""; } ?> @@ -101,9 +101,6 @@ - + From 6a835866c46fb68036460fd802494490c5fa9e85 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Tue, 9 Aug 2022 11:16:50 +0100 Subject: [PATCH 12/29] *cries* --- Sniffle/sniffle.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css index 3ade61b..e91e15c 100644 --- a/Sniffle/sniffle.css +++ b/Sniffle/sniffle.css @@ -85,7 +85,7 @@ .sniffle-header { margin: 0 0 0.25rem 0; padding: 0; - font-size: 14px; + font-size: 15px; font-weight: 621; color: var(--fg); @@ -95,7 +95,7 @@ */ .sniffle-description { margin: 0; padding: 0; - font-size: 15px; + font-size: 14px; word-wrap: break-word; font-weight: 300; From d4aff1d64fa0e80580fb4158455cc9b00de30aae Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Tue, 9 Aug 2022 14:11:32 +0100 Subject: [PATCH 13/29] I forgor what I done :skull: --- Flyout/flyout.css | 1 + Sniffle/sniffle.css | 4 ++- css/footer.css | 4 +-- css/master.css | 11 +++++--- image.php | 6 ++--- index.php | 13 +++++++--- ui/footer.php | 61 +++++++++++++++------------------------------ 7 files changed, 46 insertions(+), 54 deletions(-) diff --git a/Flyout/flyout.css b/Flyout/flyout.css index 4a60e7a..530919d 100644 --- a/Flyout/flyout.css +++ b/Flyout/flyout.css @@ -42,6 +42,7 @@ .flyout-header { font-size: 20px; + font-family: "Lexend Deca", sans-serif; } .flyout-actionbox { diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css index e91e15c..79c3751 100644 --- a/Sniffle/sniffle.css +++ b/Sniffle/sniffle.css @@ -87,6 +87,7 @@ font-size: 15px; font-weight: 621; + font-family: "Lexend Deca", sans-serif; color: var(--fg); } @@ -98,7 +99,8 @@ font-size: 14px; word-wrap: break-word; - font-weight: 300; + font-weight: 500; + font-family: 'Secular One', sans-serif; color: var(--fg); } diff --git a/css/footer.css b/css/footer.css index d409e7c..02b12af 100644 --- a/css/footer.css +++ b/css/footer.css @@ -16,6 +16,6 @@ footer { box-shadow: var(--shadow); } -.footer-child { - min-width: 200px; +footer a { + margin: 0.5rem; } diff --git a/css/master.css b/css/master.css index 01bfeb4..2c51ed5 100644 --- a/css/master.css +++ b/css/master.css @@ -4,8 +4,10 @@ This ensures that the website looks the same across all devices and browsers, regardless if I waisted my time making a tag look good or not -*/ + @import "normalize.css"; +*/ + @import "nav.css"; @import "footer.css"; @@ -32,9 +34,9 @@ } * { - font-weight: 521; + font-weight: 500; color: var(--fg); - font-family: "Fira Code", monospace; + font-family: 'Secular One', sans-serif; } html { margin: 0; padding: 0; @@ -411,6 +413,7 @@ form * { display: block; font-size: 16px; + font-weight: 500; text-decoration: none; @@ -511,7 +514,7 @@ h4 { p, a { margin: 0 0 0.5rem 0; - font-family: "Fira Code", monospace; + font-family: 'Secular One', sans-serif; } a { text-decoration: none; diff --git a/image.php b/image.php index 527b6af..3d344c8 100644 --- a/image.php +++ b/image.php @@ -7,8 +7,8 @@ - - + + @@ -147,7 +147,7 @@ echo "

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

"; // Image Upload date - echo "

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

"; + echo "

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

"; // Image download echo "Download image"; diff --git a/index.php b/index.php index 4ca720d..9dbd394 100644 --- a/index.php +++ b/index.php @@ -10,7 +10,7 @@ - + + + + + + + + + diff --git a/account/account.php b/account/account.php index 5e9fff8..911fb40 100644 --- a/account/account.php +++ b/account/account.php @@ -5,13 +5,20 @@ Lynx Gallery - + - - + + + + + - + diff --git a/account/login.php b/account/login.php index b992e16..6714787 100644 --- a/account/login.php +++ b/account/login.php @@ -5,13 +5,20 @@ Lynx Gallery - + - - + + + + + - + diff --git a/account/password-reset.php b/account/password-reset.php index 026ce5b..d09db61 100644 --- a/account/password-reset.php +++ b/account/password-reset.php @@ -5,13 +5,20 @@ Lynx Gallery - + - - + + + + + - + diff --git a/account/signup.php b/account/signup.php index fb2161e..0af0ddc 100644 --- a/account/signup.php +++ b/account/signup.php @@ -5,13 +5,20 @@ Lynx Gallery - + - - + + + + + - + diff --git a/assets/icons/heart-break.svg b/assets/icons/heart-break.svg new file mode 100644 index 0000000..d0a802c --- /dev/null +++ b/assets/icons/heart-break.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/nav.css b/css/nav.css index eae0fef..266d562 100644 --- a/css/nav.css +++ b/css/nav.css @@ -57,13 +57,14 @@ nav hr { nav { margin: 0; - width: calc(100vw - 2rem)); + width: calc(100vw - 2rem)); height: 3rem; position: fixed; top: auto; bottom: 0; left: 0; right: 0; border: none; border-top: 3px solid var(--green); + border-radius: 0; backdrop-filter: blur(16px); } @@ -75,9 +76,12 @@ nav hr { } footer { - margin-bottom: 3.5rem !important; + margin-bottom: 5.5rem !important; } #back-to-top { - bottom: 4.5rem !important; + bottom: 5.5rem !important; + } + nav .svg { + padding: 0.35rem !important; } } diff --git a/image.php b/image.php index 3d344c8..05fea59 100644 --- a/image.php +++ b/image.php @@ -5,13 +5,20 @@ Lynx Gallery - + + + + - + diff --git a/index.php b/index.php index 9dbd394..d98c08a 100644 --- a/index.php +++ b/index.php @@ -1,5 +1,3 @@ - - @@ -7,8 +5,11 @@ Lynx Gallery - + + + + @@ -26,6 +27,8 @@ + + ".$welcome_message[array_rand($welcome_message, 1)]."

"; ?> diff --git a/upload.php b/upload.php index c799565..e105055 100644 --- a/upload.php +++ b/upload.php @@ -5,13 +5,20 @@ Lynx Gallery - + - - + + + + + - + From 7c13b6478db952bbf810dd8f823d25b5ef74b882 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Wed, 10 Aug 2022 14:05:15 +0100 Subject: [PATCH 15/29] nothing ever works for me --- app/image/upload_image.php | 82 +++++++++++++++++++++++++++++++++++ assets/icons/bug.svg | 1 + image.php | 10 ++--- upload.php | 88 +++++++++++--------------------------- 4 files changed, 112 insertions(+), 69 deletions(-) create mode 100644 app/image/upload_image.php create mode 100644 assets/icons/bug.svg diff --git a/app/image/upload_image.php b/app/image/upload_image.php new file mode 100644 index 0000000..308e473 --- /dev/null +++ b/app/image/upload_image.php @@ -0,0 +1,82 @@ +resizeImage(300,null,null,1,null); + $image_thumbnail->writeImage($thumb_dir.$image_basename); + } catch (Exception $e) { + ?> + + + + + + + + + + \ No newline at end of file diff --git a/image.php b/image.php index 05fea59..7eb15e0 100644 --- a/image.php +++ b/image.php @@ -205,8 +205,6 @@

Danger zone

- - + + + resizeImage(300,null,null,1,null); - $image_thumbnail->writeImage($thumb_dir.$image_basename); - - // Prepare sql for destruction and filtering the sus - $sql = "INSERT INTO swag_table (imagename, alt, author) VALUES (?, ?, ?)"; - - if ($stmt = mysqli_prepare($conn, $sql)) { - // Bind the smelly smelly - mysqli_stmt_bind_param($stmt, "sss", $param_image_name, $param_alt_text, $param_user_id); - - // Setting up parameters - $param_image_name = $_FILES["image"]["name"]; - $param_alt_text = $_POST['alt']; - $param_user_id = $_SESSION["id"]; - - // Attempt to execute the prepared statement - if (mysqli_stmt_execute($stmt)) { - $success = "Your Image uploaded successfully!"; - } else { - $error = "Something went fuckywucky, please try later"; - } - } - } else { - $error = "F, Upload failed"; - } - } else { - $error = "File uploaded not supported, file types that are allowed include: JPG, JPEG, PNG and WEBP"; - } - } - } ?> -
- sniffleAdd('Error', '".$error."', 'var(--red)', '".$root_dir."assets/icons/cross.svg');"; - } - if (isset($success)) { - echo ""; - } - ?> - -
-

Upload image

In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.

-
- - - + + + +
From c18d72ccb0a6b18cf116b14c97fa2919c94b91ee Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Wed, 10 Aug 2022 15:55:15 +0100 Subject: [PATCH 16/29] It finally works --- app/image/upload_image.php | 116 ++++++++++++++++++++----------------- upload.php | 28 +++++++-- 2 files changed, 84 insertions(+), 60 deletions(-) diff --git a/app/image/upload_image.php b/app/image/upload_image.php index 308e473..ce68bc1 100644 --- a/app/image/upload_image.php +++ b/app/image/upload_image.php @@ -11,72 +11,80 @@ session_start(); include "../server/conn.php"; if (isset($_POST['submit'])) { - // Root paths - $dir = "images/"; - $thumb_dir = $dir."thumbnails/"; + if (isset($_SESSION['id'])) { + // Root paths + $dir = "../../images/"; + $thumb_dir = $dir."thumbnails/"; - // File paths - $image_basename = basename($_FILES['image']['name']); - $image_path = $dir.$image_basename; - $file_type = pathinfo($image_path,PATHINFO_EXTENSION); + // File paths + $image_basename = basename($_FILES['image']['name']); + $image_path = $dir.$image_basename; + $file_type = pathinfo($image_path,PATHINFO_EXTENSION); - // 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 - try { - $image_thumbnail = new Imagick($image_path); - $image_thumbnail->resizeImage(300,null,null,1,null); - $image_thumbnail->writeImage($thumb_dir.$image_basename); - } catch (Exception $e) { - ?> - - + // 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 + try { + $image_thumbnail = new Imagick($image_path); + $image_thumbnail->resizeImage(300,null,null,1,null); + $image_thumbnail->writeImage($thumb_dir.$image_basename); + } catch (Exception $e) { + echo " - - - + sniffleAdd(':3', 'Your Image uploaded successfully!', 'var(--green)', '".$root_dir."assets/icons/check.svg'); + + "; + } else { + echo " + + "; + } + } + } else { + echo " + + "; } } else { - ?> + echo " - + echo " - + sniffleAdd('Who are you!', 'You must be loggedin to upload things, sowwy!', 'var(--red)', '".$root_dir."assets/icons/cross.svg'); + + "; } ?> @@ -64,9 +80,9 @@

Upload image

In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.

- - - + + +
From 85afe70daa22f1930c03b12f51113d822170fc1c Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Wed, 10 Aug 2022 20:11:44 +0100 Subject: [PATCH 17/29] Making the website a bit more preformant on weaker phones and ajusting image view --- app/image/edit_tags.php | 16 ----- assets/icons/file-search.svg | 1 + css/.master.css.swp | Bin 24576 -> 0 bytes css/footer.css | 3 +- css/master.css | 83 +-------------------- css/nav.css | 8 ++- image.php | 135 +++++++++++++++++++++++------------ upload.php | 55 ++++++++------ 8 files changed, 132 insertions(+), 169 deletions(-) create mode 100644 assets/icons/file-search.svg delete mode 100644 css/.master.css.swp diff --git a/app/image/edit_tags.php b/app/image/edit_tags.php index b3298bf..d18bc2e 100644 --- a/app/image/edit_tags.php +++ b/app/image/edit_tags.php @@ -1,19 +1,3 @@ -/* - Tags Confirm -*/ -if (isset($_POST['tags_confirm']) && $privilaged) { - // Unset all the variables, needed by flyout - unset($header, $content, $action); - - - - - header("Location:image.php?id=".$image["id"]."&update=success"); - } else { - header("Location:image.php?id=".$image["id"]."&update=error"); - } - } -} \ No newline at end of file diff --git a/css/.master.css.swp b/css/.master.css.swp deleted file mode 100644 index 22751548b1bfd74c75c3d8ecf655eba5a2f3c7da..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24576 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 z ztJhvuDF2mPXjD`tXbPP_zr6tsUy8!8GpjSoLO^- zQ`OA%^rS3m#GrIG`6x#(yH?YO&!0nQ)CC2Fv-r2dJ9^X1R<5aXgj1a|GE(dsTO_yk zK4gb;A~nKKZCW+$pzuzX);GWM;DF3+u*=e+6_lvvL5-%-em6nwDdbgBb+v+;T^c0K zVI>yc2fs5QQ8zq!5RGGvvO0R`K zGgm$KC5FSrxm41U|Ia3WHzD~yX`cG|F|VJ)0XzfA|F1(8vh7-Y04L*Z^7o(P6-Xbz z-H`GBPr*S6^U;YUPKMi))ZU3X=N|Vh;WoGcX-*kiW}Z z|0nQGd;!6n|G(hxA~qs}rC0(3ZJ3D}c#FLK=QxO$a67i)I>`9{Wf;Uqa26!jKN0W6 zOiaU%$k`8IAMVF}*on{LR@{OuFd;erYV=|@-iMix?*zPv{df|)@fAqU|9M=GAm6`) zzt6=A4B%|Y_XMWl7`(*Id=XFLdw3k*!hN_GJFp#}!cB0o2_}|f8RWYIXXBvc?RW~0 zLizx1#WlDZd91{_kUal%==eh%gQM}^~ zzopcELH_;<4&YHdf?c=?@_mBqu@#+YM=L&rx5?Sx#INxaNY1|pyYWp_!2b$EvvDET zqaVv4-!VwwWV|1e|NoT!vKMeSzJ$NUmDqqh{v7fX=h#6->-9B6+YfP$-C)e4;dc#W zR$7?U#yNI_FKWpAGrk1)rsA7H9~<#pg68u4hec;%|Ta|ZMk>jwwd_OBTjnCka&qGLDSRE|bp GaQ$D}c{8a1 diff --git a/css/footer.css b/css/footer.css index 02b12af..5b03cac 100644 --- a/css/footer.css +++ b/css/footer.css @@ -6,8 +6,7 @@ footer { width: calc(100vh - 2rem)); - background-color: var(--bg); color: var(--fg); - backdrop-filter: blur(8px); + background-color: var(--bg-3); color: var(--fg); border: 0.2rem solid var(--green); /*outline: 0.5rem solid var(--bg);*/ diff --git a/css/master.css b/css/master.css index 2c51ed5..27b986d 100644 --- a/css/master.css +++ b/css/master.css @@ -28,7 +28,7 @@ --white: #E8E3E3; --shadow: 6px 6px 2px #15151588; - --rad: 2px; + --rad: 0px; --square: 33.33%; } @@ -110,8 +110,7 @@ body { width: auto; - background-color: var(--bg); - backdrop-filter: blur(8px); + background-color: var(--bg-3); /*outline: 0.5rem solid var(--bg);*/ @@ -152,8 +151,7 @@ body { .gallery-root { margin: 0 0 2rem; padding: 0.25rem; - background-color: var(--bg); color: var(--fg); - backdrop-filter: blur(8px); + background-color: var(--bg-3); color: var(--fg); border: 0.2rem solid var(--green); /*outline: 0.5rem solid var(--bg);*/ @@ -332,36 +330,6 @@ body { /* -=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ - -/* - Notification system - - This is the notification system used by the website. Probably a little too much for what its used for -*/ -.notify-root { - margin: 0; padding: 0; - - max-width: 621px; width: calc(100% - 2rem); - height: auto; - - top: 1rem; left: 50%; - transform: translateX(-50%); - - position: fixed; z-index: 999; -} -.notify { - margin-bottom: 1rem; padding: 0.5rem; - - width: auto; - - text-align: center; - - display: block; - - border-radius: var(--rad); - /*outline: 0.5rem solid var(--bg);*/ -} - .alert { padding: 0.69rem; @@ -447,51 +415,6 @@ a.btn { border-radius: var(--rad); } -/* - -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -*/ -/*.flyout { - margin: 0; padding: 0.5rem 0.5rem 1.5rem; - - max-width: 621px; width: calc(100% - 2.5rem + 3px); - max-height: 20rem; height: auto; min-height: 10rem; - - bottom: -20rem; left: 50%; - - transform: translateX(-50%) scale(0.8); - - position: fixed; z-index: 99999; - - overflow-y: auto; - - border: 0.2rem solid var(--green); - border-bottom: none; - border-radius: inherit inherit none none; - - word-wrap: break-word; - - transition: bottom 0.5s cubic-bezier(.19,1,.22,1), transform 0.5s cubic-bezier(.19,1,.22,1); -} - -.flyout-dim { - margin: 0; padding: 0; - - width: 100vw; height: 100vh; - - left: 0; top: 0; - - position: fixed; z-index: 99998; - - opacity: 1; - - display: none; - - background: #15151588; - backdrop-filter: blur(5px); - - transition: opacity 2s cubic-bezier(.19,1,.22,1); -}*/ - /* -=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ diff --git a/css/nav.css b/css/nav.css index 266d562..3614ee4 100644 --- a/css/nav.css +++ b/css/nav.css @@ -6,14 +6,13 @@ nav { width: calc(100vh - 2rem)); height: 2.5rem; - position: sticky; z-index: 99; + position: static; z-index: 99; top: 1rem; align-items: center; vertical-align: middle; - background-color: var(--bg); color: var(--fg); - backdrop-filter: blur(8px); + background-color: var(--bg-3); color: var(--fg); border: 0.2rem solid var(--green); /*outline: 0.5rem solid var(--bg);*/ @@ -62,6 +61,9 @@ nav hr { position: fixed; top: auto; bottom: 0; left: 0; right: 0; + background-color: var(--bg); + backdrop-filter: blur(8px); + border: none; border-top: 3px solid var(--green); border-radius: 0; diff --git a/image.php b/image.php index 7eb15e0..d4bcc63 100644 --- a/image.php +++ b/image.php @@ -41,6 +41,8 @@ |------------------------------------------------------------- */ include "ui/required.php"; + include "ui/nav.php"; + /* |------------------------------------------------------------- @@ -50,98 +52,132 @@ | If ID cannot be obtained, give error. ID going here ^^ |------------------------------------------------------------- */ - if (isset($_GET['id'])) { + if (isset($_GET['id']) && is_numeric($_GET['id'])) { // Get all image info $image = get_image_info($conn, $_GET['id']); // Check if image is avalible if (isset($image['imagename'])) { - // Display image - $image_path = "images/".$image['imagename']; - $image_alt = $image['alt']; + $image_present = True; } else { - // ID not avalible toast - echo "

Could not find image with ID: ".$_GET['id']."

"; - - // Replacement "no image" image and description - $image_path = "assets/no_image.png"; - $image_alt = "No image could be found, sowwy"; + ?> + + No ID present

"; - - // Replacement "no image" image and description - //$image_path = "assets/no_image.png"; - //$image_alt = "No image could be found, sowwy"; + ?> + +
' src='' alt=''>
+

Description

- ".$image_alt."

"; - } else { - echo "

No description provided

"; - } - ?> +

Details

Author: ".$user['username']."

"; - } else { - echo "

Author: Deleted User

"; - } - } else { - echo "

Author: No author

"; - } + // User + echo "

Author: ".$image_author."

"; // Image ID echo "

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

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

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

"; + echo "

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

"; } else { echo "

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

"; } @@ -195,8 +231,8 @@ |------------------------------------------------------------- | Check if user is privilaged, |------------------------------------------------------------- - | If yes, grant them access to the Danger zone, or "the place that can fuck things up" - | Checking is done prior to here + | If yes, grant them access to the Danger zone, or "the place + | that can fuck things up" |------------------------------------------------------------- */ if ($privilaged) { @@ -338,6 +374,13 @@ } echo "
"; } + + /* + |------------------------------------------------------------- + | End of displaying all user info + |------------------------------------------------------------- + */ + } ?> diff --git a/upload.php b/upload.php index 66eee17..e4687a0 100644 --- a/upload.php +++ b/upload.php @@ -33,30 +33,41 @@ $(document).ready(function() { $("#uploadSubmit").submit(function(event) { event.preventDefault(); - // Make form - var formData = new FormData(); + // Check if image avalible + var file = $("#image").val(); + if (file != "") { + // Make form + var formData = new FormData(); - // Get image - var image_data = $("#image").prop("files")[0]; - formData.append("image", image_data); - // Get ALT - var alt = $("#alt").val(); - formData.append("alt", alt); - // Get ALT - var submit = $("#submit").val(); - formData.append("submit", submit); + // Get image + var image_data = $("#image").prop("files")[0]; + formData.append("image", image_data); + // Get ALT + var alt = $("#alt").val(); + formData.append("alt", alt); + // Get ALT + var submit = $("#submit").val(); + formData.append("submit", submit); - // Upload the information - $.ajax({ - url: 'app/image/upload_image.php', - type: 'post', - data: formData, - contentType: false, - processData: false, - success: function(response){ - $("#sniffle").html(response); - } - }); + // Upload the information + $.ajax({ + url: 'app/image/upload_image.php', + type: 'post', + data: formData, + contentType: false, + processData: false, + success: function(response){ + $("#sniffle").html(response); + } + }); + + // Empty values + $("#image").val(""); + $("#alt").val(""); + $("#submit").val(""); + } else { + sniffleAdd('Gwha!', 'Pls provide image', 'var(--red)', 'assets/icons/file-search.svg'); + } }); }); From 4007f47e490118b8cbf09236268b30fcb5607c92 Mon Sep 17 00:00:00 2001 From: fluffy-bean Date: Thu, 11 Aug 2022 18:28:52 +0000 Subject: [PATCH 18/29] Something something switching to sass --- .gitignore | 1 + css/main.css | 400 ++++++++++++++++++++++++++++++++++++++ css/main.css.map | 1 + css/main.scss | 182 +++++++++++++++++ css/master.css | 2 +- css/nav.css | 8 +- css/scss/_body.scss | 117 +++++++++++ css/scss/_footer.scss | 22 +++ css/scss/_mixin.scss | 30 +++ css/scss/_navigation.scss | 84 ++++++++ css/scss/_variables.scss | 44 +++++ image.php | 4 +- index.php | 201 +++++++++---------- 13 files changed, 991 insertions(+), 105 deletions(-) create mode 100644 .gitignore create mode 100644 css/main.css create mode 100644 css/main.css.map create mode 100644 css/main.scss create mode 100644 css/scss/_body.scss create mode 100644 css/scss/_footer.scss create mode 100644 css/scss/_mixin.scss create mode 100644 css/scss/_navigation.scss create mode 100644 css/scss/_variables.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..47241b6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +images/ diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..6ef7373 --- /dev/null +++ b/css/main.css @@ -0,0 +1,400 @@ +/* + |------------------------------------------------------------- + | Sass stylesheet + |------------------------------------------------------------- + | This is all written by me! Fluffy! This is intended to be + | compiled before use, I want to make this autocompile for + | ease of use, but you may suffer along with me for now :3 + |------------------------------------------------------------- +*/ +:root { + --bg: #151515bb; + --bg-1: #242621; + --bg-2: #1D1E1C; + --bg-3: #151515; + --fg:#E8E3E3; + --fg-dark: #151515; + --red: #B66467; + --orange: #FF7700; + --green: #8C977D; + --black: #151515; + --white: #E8E3E3; + --shadow: 6px 6px 2px #15151588; + --rad: 0px; + --square: 33.33%; +} + +nav { + width: calc(100% - 2.4rem); + padding: 0.5rem; + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + 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-between; + margin: 0 auto 1rem; + width: calc(100% - 1.4rem); + height: 2.5rem; + position: -webkit-sticky; + position: sticky; + z-index: 99; + top: 1rem; + align-items: center; + vertical-align: middle; +} +nav p { + margin: 0; + vertical-align: middle; +} +nav hr { + margin: 0.5rem 0.2rem; + padding: 0; + opacity: 0; +} + +.nav-name { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + margin: 0; + font-family: "Lexend Deca", sans-serif; + font-size: 22px; + display: block; +} + +.nav-links { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + font-family: "Secular One", sans-serif; + width: auto; +} + +@media (max-width: 800px) { + .nav-name { + display: none; + } + .nav-links { + width: 100%; + } +} +@media (max-width: 550px) { + nav { + margin: 0; + width: calc(100% - 1rem); + position: fixed; + top: auto; + bottom: 0; + left: 0; + right: 0; + background-color: #151515; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + border: none; + border-top: 3px solid #8C977D; + border-radius: 0; + -webkit-backdrop-filter: blur(16px); + backdrop-filter: blur(16px); + } + .nav-hide { + display: none; + } + .info-text { + text-align: left !important; + } + footer { + margin-bottom: calc(5rem + 3px) !important; + } + #back-to-top { + bottom: 5rem !important; + } +} +/* + |------------------------------------------------------------- + | INDEX + |------------------------------------------------------------- +*/ +.info-text { + margin: 1rem 0; + padding: 0; + text-align: center; +} +.info-text h1 { + font-family: "Lexend Deca", sans-serif; + margin-top: 0.5rem; + margin-bottom: 1rem; +} +.info-text p { + font-family: "Secular One", sans-serif; + margin-top: 0; + margin-bottom: 1rem; +} + +.gallery-root { + padding: 0.25rem; + background-color: #151515; + color: #E8E3E3; + display: flex; + flex-direction: row; + flex-wrap: wrap; + border: 0.2rem solid #8C977D; + border-radius: 0; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} + +.gallery-item { + margin: 0.25rem; + padding: 0; + height: auto; + max-width: calc(33.33% - 0.5rem); + background-color: #151515; + border-radius: 0; + position: relative; + flex: 1 0 150px; + transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1); +} +.gallery-item:hover { + transform: scale(1.1) rotate(5deg); + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + z-index: 999; +} +.gallery-item:after { + content: ""; + display: block; + padding-bottom: 100%; +} + +.gallery-image { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; + position: absolute; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; + border-radius: 0; +} + +/* + |------------------------------------------------------------- + | IMAGE + |------------------------------------------------------------- +*/ +.image-container { + margin: 1rem 0 2rem 0; + padding: 0; + width: 100%; + max-height: 69vh; + height: auto; + display: flex; + background-color: #151515; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + border-radius: 0; + transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1); +} + +@media (max-width: 600px) { + .image-container { + max-height: 42vh !important; + } +} +.image { + margin: 0 auto; + max-width: 100%; + width: auto; + max-height: inherit; + height: auto; + border-radius: 0; +} + +footer { + width: calc(100% - 2.4rem); + padding: 0.5rem; + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + 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 !important; + bottom: 0; + width: calc(100% - 1.4rem); +} +footer a { + margin: 0.5rem; + text-decoration: none; + font-family: "Secular One", sans-serif; +} +footer a:hover { + color: #FF7700; +} + +/* + |------------------------------------------------------------- + | BODY COMPONENTS + |------------------------------------------------------------- +*/ +html { + margin: 0; + padding: 0; + min-height: 100vh; + max-width: 100vw; + position: relative; + background-color: #151515; + background-image: url("../assets/bg.svg"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + scroll-behavior: smooth; + overflow: auto; +} + +body { + margin: 0 auto; + padding: 1rem; + max-width: 1000px; + min-height: calc(100vh - 2rem); + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; +} +body * { + color: #E8E3E3; +} + +/* + |------------------------------------------------------------- + | BUTTONS + |------------------------------------------------------------- +*/ +.btn { + padding: 0.5rem; + display: block; + font-size: 16px; + font-weight: 500; + text-decoration: none; + border: none; + border-radius: 0; + transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); +} +.btn:hover { + outline: #E8E3E3 3px solid; + color: #E8E3E3; +} +.btn:where(input[type=file])::-webkit-file-upload-button { + margin: -0.5rem 0.5rem -0.5rem -0.5rem; + padding: 0.5rem; + display: inline-block; + font-size: 16px; + text-decoration: none; + background-color: #E8E3E3; + border: none; + border-radius: 0; +} +.btn:where(input[type=file])::file-selector-button { + margin: -0.5rem 0.5rem -0.5rem -0.5rem; + padding: 0.5rem; + display: inline-block; + font-size: 16px; + text-decoration: none; + background-color: #E8E3E3; + border: none; + border-radius: 0; +} +.btn a { + margin-bottom: 0; + text-align: center; +} + +/* + |------------------------------------------------------------- + | FORM + |------------------------------------------------------------- +*/ +form { + width: 100%; + box-sizing: border-box; +} +form * { + width: 100%; + box-sizing: border-box; +} + +/* + |------------------------------------------------------------- + | IMAGES + |------------------------------------------------------------- +*/ +.image-container { + width: 100%; + max-height: 69vh; + height: auto; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: rgba(21, 21, 21, 0.7333333333); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + border-radius: 0; + transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1); +} + +.svg { + margin: 0 0.2rem 0.1rem 0; + width: 19px; + height: 18px; + vertical-align: middle; + display: inline; +} + +/* + |------------------------------------------------------------- + | BACK TO TOP + |------------------------------------------------------------- +*/ +#back-to-top { + margin: 0; + padding: 0.5rem; + position: fixed; + z-index: 99; + right: -2.5rem; + bottom: 1rem; + -o-object-position: center; + object-position: center; + background-color: #151515; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + border-radius: 50%; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); + transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1); +} +#back-to-top:hover { + outline: 0.2rem solid #8C977D; +} +#back-to-top * { + margin: 0; + padding: 0; + width: 1.5rem; + height: 1.5rem; + display: block; + -o-object-position: center; + object-position: center; +}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..0064a46 --- /dev/null +++ b/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..76ce477 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,182 @@ +/* + |------------------------------------------------------------- + | Sass stylesheet + |------------------------------------------------------------- + | This is all written by me! Fluffy! This is intended to be + | compiled before use, I want to make this autocompile for + | ease of use, but you may suffer along with me for now :3 + |------------------------------------------------------------- +*/ +@import "scss/mixin"; +@import "scss/variables"; + +@import "scss/navigation"; +@import "scss/body"; +@import "scss/footer"; + +/* + |------------------------------------------------------------- + | BODY COMPONENTS + |------------------------------------------------------------- +*/ +html { + margin: 0; padding: 0; + + min-height: 100vh; max-width: 100vw; + + position: relative; + + background-color: $bg; + background-image: url("../assets/bg.svg"); + + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + + scroll-behavior: smooth; + + overflow: auto; +} + +body { + margin: 0 auto; padding: 1rem; + + max-width: 1000px; + + min-height: calc(100vh - 2rem); + + @include flexDown(space-between); + + position: relative; + + * { + color: $fg; + } +} + +/* + |------------------------------------------------------------- + | BUTTONS + |------------------------------------------------------------- +*/ +.btn { + padding: 0.5rem; + + display: block; + + font-size: 16px; + font-weight: 500; + + text-decoration: none; + + border: none; + border-radius: $rad; + + transition: outline 0.1s cubic-bezier(.19,1,.22,1); + + &:hover { + outline: $white 3px solid; + color: $fg; + } + + &:where(input[type="file"])::file-selector-button { + margin: -0.5rem 0.5rem -0.5rem -0.5rem; + padding: 0.5rem; + + display: inline-block; + + font-size: 16px; + + text-decoration: none; + + background-color: $white; + + border: none; + border-radius: $rad; + } + + a { + margin-bottom: 0; + text-align: center; + } +} + +/* + |------------------------------------------------------------- + | FORM + |------------------------------------------------------------- +*/ +form { + width: 100%; + box-sizing: border-box; + + * { + width: 100%; + box-sizing: border-box; + } +} + +/* + |------------------------------------------------------------- + | IMAGES + |------------------------------------------------------------- +*/ +.image-container { + width: 100%; + max-height: 69vh; height: auto; + + @include flexDown(space-between); + + background-color: $bg-alt; + backdrop-filter: blur(8px); + + border-radius: $rad; + + transition: max-height 0.15s cubic-bezier(.19,1,.22,1); +} + +.svg { + margin: 0 0.2rem 0.1rem 0; + + width: 19px; height: 18px; + + vertical-align: middle; + + display: inline; +} + +/* + |------------------------------------------------------------- + | BACK TO TOP + |------------------------------------------------------------- +*/ +#back-to-top { + margin: 0; padding: 0.5rem; + + position: fixed; z-index: 99; + right: -2.5rem; bottom: 1rem; + + object-position: center; + + background-color: $bg; + backdrop-filter: blur(8px); + + border-radius: 50%; + box-shadow: $shadow; + + transition: right 0.15s cubic-bezier(.19,1,.22,1); + + &:hover { + outline: 0.2rem solid $green; + } + + * { + margin: 0; padding: 0; + width: 1.5rem; height: 1.5rem; + + display: block; + + object-position: center; + } +} diff --git a/css/master.css b/css/master.css index 27b986d..194a98a 100644 --- a/css/master.css +++ b/css/master.css @@ -106,7 +106,7 @@ body { -=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ .default-window { - margin: 0 0 2rem; padding: 0.5rem; + margin: 0 0 1rem; padding: 0.5rem; width: auto; diff --git a/css/nav.css b/css/nav.css index 3614ee4..3c41946 100644 --- a/css/nav.css +++ b/css/nav.css @@ -31,7 +31,9 @@ nav hr { opacity: 0; } -.nav-name p, .nav-name { +.nav-name *, .nav-name { + margin: 0; + font-family: "Lexend Deca", sans-serif; font-size: 22px; @@ -78,10 +80,10 @@ nav hr { } footer { - margin-bottom: 5.5rem !important; + margin-bottom: calc(4rem + 3px) !important; } #back-to-top { - bottom: 5.5rem !important; + bottom: 5rem !important; } nav .svg { padding: 0.35rem !important; diff --git a/css/scss/_body.scss b/css/scss/_body.scss new file mode 100644 index 0000000..235cd6a --- /dev/null +++ b/css/scss/_body.scss @@ -0,0 +1,117 @@ +/* + |------------------------------------------------------------- + | INDEX + |------------------------------------------------------------- +*/ +.info-text { + margin: 1rem 0; padding: 0; + + text-align: center; + + h1 { + font-family: $font-header; + + margin-top: 0.5rem; + margin-bottom: 1rem; + } + p { + font-family: $font-body; + + margin-top: 0; + margin-bottom: 1rem; + } +} + +.gallery-root { + padding: 0.25rem; + + background-color: $bg; color: $fg; + + display: flex; + flex-direction: row; + flex-wrap: wrap; + + border: 0.2rem solid $green; + + border-radius: $rad; + box-shadow: $shadow; +} + +.gallery-item { + margin: 0.25rem; padding: 0; + + height: auto; max-width: calc(33.33% - 0.5rem); + + background-color: $bg; + border-radius: $rad; + + position: relative; + + flex: 1 0 150px; + + transition: transform 0.15s cubic-bezier(.19,1,.22,1); + + &:hover { + transform: scale(1.1) rotate(5deg); + box-shadow: $shadow; + + z-index: 999; + } + + &:after { + content: ""; + display: block; + padding-bottom: 100%; + } +} + +.gallery-image { + margin: 0; padding: 0; + + width: 100%; height: 100%; + + top: 0; bottom: 0; left: 0; right: 0; + + position: absolute; + + object-fit: cover; + object-position: center; + + border-radius: $rad; +} + +/* + |------------------------------------------------------------- + | IMAGE + |------------------------------------------------------------- +*/ +.image-container { + margin: 1rem 0 2rem 0; padding: 0; + + width: 100%; + max-height: 69vh; height: auto; + + display: flex; + + background-color: $bg; + backdrop-filter: blur(8px); + + border-radius: $rad; + + transition: max-height 0.15s cubic-bezier(.19,1,.22,1); +} + +@media (max-width: 600px) { + .image-container { + max-height: 42vh !important; + } +} + +.image { + margin: 0 auto; + + max-width: 100%; width: auto; + max-height: inherit; height: auto; + + border-radius: $rad; +} \ No newline at end of file diff --git a/css/scss/_footer.scss b/css/scss/_footer.scss new file mode 100644 index 0000000..abac2a6 --- /dev/null +++ b/css/scss/_footer.scss @@ -0,0 +1,22 @@ +footer { + @include defaultDecoration($page-accent); + @include flexLeft(space-around); + + margin: 0 auto !important; + + bottom: 0; + + width: calc(100% - 1.4rem); + + a { + margin: 0.5rem; + + text-decoration: none; + + font-family: $font-body; + + &:hover { + color: $orange; + } + } +} diff --git a/css/scss/_mixin.scss b/css/scss/_mixin.scss new file mode 100644 index 0000000..2c1a6c8 --- /dev/null +++ b/css/scss/_mixin.scss @@ -0,0 +1,30 @@ +@mixin defaultDecoration($border) { + width: calc(100% - 2.4rem); + + padding: 0.5rem; + + background-color: $bg; color: $fg; + + border-radius: $rad; + + border: 0.2rem solid $border; + + box-shadow: $shadow; +} + +@mixin flexDown($justify) { + display: flex; + + flex-direction: column; + + justify-content: $justify; +} +@mixin flexLeft($justify) { + display: flex; + + flex-direction: row; + + flex-wrap: wrap; + + justify-content: $justify; +} \ No newline at end of file diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss new file mode 100644 index 0000000..26864ce --- /dev/null +++ b/css/scss/_navigation.scss @@ -0,0 +1,84 @@ +nav { + @include defaultDecoration($page-accent); + @include flexLeft(space-between); + + margin: 0 auto 1rem; + + width: calc(100% - 1.4rem); height: 2.5rem; + + position: sticky; z-index: 99; + top: 1rem; + + align-items: center; + vertical-align: middle; + + p { + margin: 0; + vertical-align: middle; + } + hr { + margin: 0.5rem 0.2rem; padding: 0; + opacity: 0; + } +} + +.nav-name { + @include flexLeft(space-around); + + margin: 0; + + font-family: $font-header; + + font-size: 22px; + + display: block; +} +.nav-links { + @include flexLeft(space-around); + + font-family: $font-body; + + width: auto; +} + +@media (max-width: 800px) { + .nav-name { + display: none; + } + .nav-links { + width: 100%; + } +} + +@media (max-width: 550px) { + nav { + margin: 0; + + width: calc(100% - 1rem); + + position: fixed; + top: auto; bottom: 0; left: 0; right: 0; + + background-color: $bg; + backdrop-filter: blur(8px); + + border: none; + border-top: 3px solid $green; + border-radius: 0; + + backdrop-filter: blur(16px); + } + .nav-hide { + display: none; + } + + .info-text { + text-align: left !important; + } + footer { + margin-bottom: calc(5rem + 3px) !important; + } + #back-to-top { + bottom: 5rem !important; + } +} \ No newline at end of file diff --git a/css/scss/_variables.scss b/css/scss/_variables.scss new file mode 100644 index 0000000..ee9dd41 --- /dev/null +++ b/css/scss/_variables.scss @@ -0,0 +1,44 @@ +$bg: #151515; +$bg-alt: #151515bb; + +$fg: #E8E3E3; +$fg-alt: #151515; + +$red: #B66467; +$orange: #FF7700; +$green: #8C977D; +$black: #151515; +$white: #E8E3E3; + +$page-accent: #8C977D; + +$shadow: 6px 6px 2px #15151588; +$rad: 0; + +$weight-bold: 621; +$weight-normal: 400; + +$font-header: 'Lexend Deca', sans-serif; +$font-body: 'Secular One', sans-serif; + +// Fallback for items that do not yet support the new sass stylesheet system +:root { + --bg: #151515bb; + --bg-1: #242621; + --bg-2: #1D1E1C; + --bg-3: #151515; + + --fg:#E8E3E3; + --fg-dark: #151515; + + --red: #B66467; + --orange: #FF7700; + --green: #8C977D; + --black: #151515; + --white: #E8E3E3; + + --shadow: 6px 6px 2px #15151588; + --rad: 0px; + + --square: 33.33%; + } \ No newline at end of file diff --git a/image.php b/image.php index d4bcc63..0bfbcaf 100644 --- a/image.php +++ b/image.php @@ -6,7 +6,7 @@ Lynx Gallery - + @@ -147,7 +147,7 @@ } ?> -
+
' src='' alt=''>
diff --git a/index.php b/index.php index d98c08a..9d66c24 100644 --- a/index.php +++ b/index.php @@ -1,121 +1,124 @@ - - - Lynx Gallery + + + Lynx Gallery - - - + + + - - - - - + + + - - - + + - - - + + + - + + + + + - + - + - // Welcome depending on if user is logged in or not - if (isset($_SESSION["username"])) { - echo "

".$time_welc." ".$_SESSION['username']."!

"; - } else { - echo "

".$time_welc."!

"; - } +
+ = "12" && $time < "17") { + $time_welc = "Good afternoon"; + } else if ($time >= "17" && $time < "19") { + $time_welc = "Good evening"; + } else if ($time >= "19") { + $time_welc = "Good night"; + } - // Random welcome message - $welcome_message = array("*internal screaming*", - "Sussy Wussy", - "What is this world?", - "Don't forget to drink water!", - "Bruh", - "This is so poorly programmed", - "Sorry", - "Fluffy made this!", - "maybe", - "I'm gay", - "I wish we were better strangers.", - "Just like Minecraft!", - "If I were you, I'd run now", - "This is the part where I kill you", - "SILICA GEL \"DO NOT EAT\".", - "This was supposed to be a simple project", - "AAAAAAAAAAAAAAAAAAAA", - "Let me out", - "nice", - "Thank you that you're here", - "The weather is dry", - "Need me a man 👀"); - echo "

".$welcome_message[array_rand($welcome_message, 1)]."

"; - ?> -
+ // Welcome depending on if user is logged in or not + if (isset($_SESSION["username"])) { + echo "

".$time_welc." ".$_SESSION['username']."!

"; + } else { + echo "

".$time_welc."!

"; + } -
- Just like Minecraft!", + "If I were you, I'd run now", + "This is the part where I kill you", + "SILICA GEL \"DO NOT EAT\".", + "This was supposed to be a simple project", + "AAAAAAAAAAAAAAAAAAAA", + "Let me out", + "nice", + "Thank you that you're here", + "The weather is dry", + "Need me a man 👀"); + echo "

".$welcome_message[array_rand($welcome_message, 1)]."

"; + ?> +
- 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']; - } +
+ "; - echo ""; - echo "
"; - } - ?> -
+ 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']; + } - + // Image loading + echo "
"; + echo ""; + echo "
"; + } + ?> + + + + From 302fe6c15e1f277f4d6a31179fd8bf397c9d6ee9 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Fri, 12 Aug 2022 11:28:19 +0000 Subject: [PATCH 19/29] Sass progress --- .gitignore | 1 + css/main.css | 203 +++++++++++++++++++++++++++++++------- css/main.css.map | 2 +- css/main.scss | 46 ++++----- css/scss/_body.scss | 71 +++++++++++-- css/scss/_footer.scss | 2 +- css/scss/_mixin.scss | 21 +++- css/scss/_navigation.scss | 9 +- image.php | 34 ++++--- 9 files changed, 296 insertions(+), 93 deletions(-) diff --git a/.gitignore b/.gitignore index 47241b6..abac08b 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ images/ +css/main.css.map \ No newline at end of file diff --git a/css/main.css b/css/main.css index 6ef7373..efd3e3f 100644 --- a/css/main.css +++ b/css/main.css @@ -25,8 +25,9 @@ } nav { - width: calc(100% - 2.4rem); + margin-bottom: 1rem; padding: 0.5rem; + width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; border-radius: 0; @@ -46,6 +47,10 @@ nav { align-items: center; vertical-align: middle; } +nav > * { + margin-top: 0; + margin-bottom: 0.5rem; +} nav p { margin: 0; vertical-align: middle; @@ -55,6 +60,9 @@ nav hr { padding: 0; opacity: 0; } +nav .btn { + width: auto; +} .nav-name { display: flex; @@ -72,6 +80,7 @@ nav hr { flex-direction: row; flex-wrap: wrap; justify-content: space-around; + margin: 0; font-family: "Secular One", sans-serif; width: auto; } @@ -93,7 +102,7 @@ nav hr { bottom: 0; left: 0; right: 0; - background-color: #151515; + background-color: rgba(21, 21, 21, 0.7333333333); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: none; @@ -109,7 +118,7 @@ nav hr { text-align: left !important; } footer { - margin-bottom: calc(5rem + 3px) !important; + margin-bottom: 4rem !important; } #back-to-top { bottom: 5rem !important; @@ -121,13 +130,19 @@ nav hr { |------------------------------------------------------------- */ .info-text { - margin: 1rem 0; + margin: 1rem 0 1rem 0.5rem; 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.5rem; + margin-top: 0; margin-bottom: 1rem; } .info-text p { @@ -137,6 +152,7 @@ nav hr { } .gallery-root { + margin-bottom: 1rem; padding: 0.25rem; background-color: #151515; color: #E8E3E3; @@ -199,7 +215,7 @@ nav hr { max-height: 69vh; height: auto; display: flex; - background-color: #151515; + background-color: rgba(21, 21, 21, 0.7333333333); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 0; @@ -208,7 +224,7 @@ nav hr { @media (max-width: 600px) { .image-container { - max-height: 42vh !important; + max-height: 42vh; } } .image { @@ -220,9 +236,130 @@ nav hr { border-radius: 0; } -footer { - width: calc(100% - 2.4rem); +/* + |------------------------------------------------------------- + | DESCRIPTION + |------------------------------------------------------------- +*/ +.image-description { + margin-bottom: 1rem; padding: 0.5rem; + width: calc(100% - 1.4rem); + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + border: 0.2rem solid #8C977D; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} +.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; +} + +/* + |------------------------------------------------------------- + | DETAILS + |------------------------------------------------------------- +*/ +.image-detail { + margin-bottom: 1rem; + padding: 0.5rem; + width: calc(100% - 1.4rem); + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + border: 0.2rem solid #8C977D; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} +.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; +} + +/* + |------------------------------------------------------------- + | TAGS + |------------------------------------------------------------- +*/ +.tags-root { + margin-bottom: 1rem; + padding: 0.5rem; + width: calc(100% - 1.4rem); + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + border: 0.2rem solid #8C977D; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} +.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; + flex-wrap: wrap; + justify-content: auto; +} + +.tag { + margin: 0.25rem; + padding: 0.5rem; + display: block; + background-color: #8C977D; + border-radius: 0; + font-family: "Secular One", sans-serif; +} + +/* + |------------------------------------------------------------- + | DANGER ZONE + |------------------------------------------------------------- +*/ +.danger-zone { + margin-bottom: 1rem; + padding: 0.5rem; + width: calc(100% - 1.4rem); + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + border: 0.2rem solid #B66467; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} +.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; +} + +footer { + margin-bottom: 1rem; + padding: 0.5rem; + width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; border-radius: 0; @@ -232,10 +369,14 @@ footer { flex-direction: row; flex-wrap: wrap; justify-content: space-around; - margin: 0 auto !important; + margin: 0 auto; bottom: 0; width: calc(100% - 1.4rem); } +footer > * { + margin-top: 0; + margin-bottom: 0.5rem; +} footer a { margin: 0.5rem; text-decoration: none; @@ -287,10 +428,14 @@ body * { */ .btn { padding: 0.5rem; + width: 100%; display: block; + box-sizing: border-box; font-size: 16px; font-weight: 500; + font-family: "Secular One", sans-serif; text-decoration: none; + text-align: center; border: none; border-radius: 0; transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); @@ -319,44 +464,34 @@ body * { border: none; border-radius: 0; } -.btn a { - margin-bottom: 0; - text-align: center; + +.btn-good { + background-color: #8C977D; +} + +.btn-bad { + background-color: #B66467; +} + +.btn-neutral { + background-color: #151515; } /* |------------------------------------------------------------- - | FORM + | FORM SIZING |------------------------------------------------------------- */ form { width: 100%; - box-sizing: border-box; -} -form * { - width: 100%; - box-sizing: border-box; + box-sizing: content-box; } /* |------------------------------------------------------------- - | IMAGES + | SVG |------------------------------------------------------------- */ -.image-container { - width: 100%; - max-height: 69vh; - height: auto; - display: flex; - flex-direction: column; - justify-content: space-between; - background-color: rgba(21, 21, 21, 0.7333333333); - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); - border-radius: 0; - transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1); -} - .svg { margin: 0 0.2rem 0.1rem 0; width: 19px; diff --git a/css/main.css.map b/css/main.css.map index 0064a46..b9e3e23 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"AAAA;;;;;;;;CAAA;ACwBA;EACI,eAAA;EACA,eAAA;EACA,eAAA;EACA,eAAA;EAEA,YAAA;EACA,kBAAA;EAEA,cAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,gBAAA;EAEA,+BAAA;EACA,UAAA;EAEA,gBAAA;AClBJ;;ACxBA;ECCC,0BAAA;EAEA,eAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGNF,4BAAA;EAEH,sDHGQ;EGQR,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,8BD1BkB;EAElB,mBAAA;EAEA,0BAAA;EAA4B,cAAA;EAE5B,wBAAA;EAAA,gBAAA;EAAkB,WAAA;EAClB,SAAA;EAEA,mBAAA;EACA,sBAAA;ADkCD;AChCC;EACC,SAAA;EACA,sBAAA;ADkCF;AChCC;EACC,qBAAA;EAAuB,UAAA;EACvB,UAAA;ADmCF;;AC/BA;ECFC,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BDHkB;EAElB,SAAA;EAEA,sCFTa;EEWb,eAAA;EAEA,cAAA;ADiCD;;AC/BA;ECbC,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BDQkB;EAElB,sCFjBW;EEmBX,WAAA;ADmCD;;AChCA;EACC;IACC,aAAA;EDmCA;ECjCD;IACC,WAAA;EDmCA;AACF;AChCA;EACC;IACC,SAAA;IAEA,wBAAA;IAEA,eAAA;IACA,SAAA;IAAW,SAAA;IAAW,OAAA;IAAS,QAAA;IAE/B,yBF7DG;IE8DH,kCAAA;YAAA,0BAAA;IAEA,YAAA;IACA,6BAAA;IACA,gBAAA;IAEA,mCAAA;YAAA,2BAAA;EDgCA;EC9BD;IACC,aAAA;EDgCA;EC7BD;IACC,2BAAA;ED+BA;EC7BD;IACC,0CAAA;ED+BA;EC7BD;IACC,uBAAA;ED+BA;AACF;AGjHA;;;;CAAA;AAKA;EACC,cAAA;EAAgB,UAAA;EAEhB,kBAAA;AHmHD;AGjHC;EACC,sCJSY;EIPZ,kBAAA;EACA,mBAAA;AHkHF;AGhHC;EACC,sCJIU;EIFV,aAAA;EACA,mBAAA;AHiHF;;AG7GA;EACC,gBAAA;EAEA,yBJ3BI;EI2BmB,cJxBnB;EI0BJ,aAAA;EACA,mBAAA;EACA,eAAA;EAEA,4BAAA;EAEA,gBJpBK;EIqBL,sDJtBQ;ACmIT;;AG1GA;EACC,eAAA;EAAiB,UAAA;EAEjB,YAAA;EAAc,gCAAA;EAEd,yBJ5CI;EI6CJ,gBJ9BK;EIgCL,kBAAA;EAEA,eAAA;EAEA,0DAAA;AH0GD;AGxGC;EACC,kCAAA;EACA,sDJzCO;EI2CP,YAAA;AHyGF;AGtGC;EACC,WAAA;EACA,cAAA;EACA,oBAAA;AHwGF;;AGpGA;EACC,SAAA;EAAW,UAAA;EAEX,WAAA;EAAa,YAAA;EAEb,MAAA;EAAQ,SAAA;EAAW,OAAA;EAAS,QAAA;EAE5B,kBAAA;EAEA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;EAEA,gBJhEK;ACuKN;;AGpGA;;;;CAAA;AAKA;EACC,qBAAA;EAAuB,UAAA;EAEvB,WAAA;EACA,gBAAA;EAAkB,YAAA;EAElB,aAAA;EAEA,yBJ/FI;EIgGJ,kCAAA;UAAA,0BAAA;EAEA,gBJnFK;EIqFL,2DAAA;AHoGD;;AGjGA;EACC;IACC,2BAAA;EHoGA;AACF;AGjGA;EACC,cAAA;EAEA,eAAA;EAAiB,WAAA;EACjB,mBAAA;EAAqB,YAAA;EAErB,gBJpGK;ACuMN;;AItNA;EFCC,0BAAA;EAEA,eAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGNF,4BAAA;EAEH,sDHGQ;EGQR,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BE1BkB;EAElB,yBAAA;EAEA,SAAA;EAEA,0BAAA;AJ+ND;AI7NC;EACC,cAAA;EAEA,qBAAA;EAEA,sCLMU;ACuNZ;AI3NE;EACC,cLXM;ACwOT;;AF/NA;;;;CAAA;AAKA;EACC,SAAA;EAAW,UAAA;EAEX,iBAAA;EAAmB,gBAAA;EAEnB,kBAAA;EAEA,yBC5BI;ED6BJ,yCAAA;EAEA,2BAAA;EACA,sBAAA;EACA,4BAAA;EACA,4BAAA;EAEA,uBAAA;EAEA,cAAA;AE8ND;;AF3NA;EACC,cAAA;EAAgB,aAAA;EAEhB,iBAAA;EAEA,8BAAA;EI/BA,aAAA;EAEA,sBAAA;EAEA,8BJ6BkB;EAElB,kBAAA;AE6ND;AF3NC;EACC,cClDG;AC+QL;;AFzNA;;;;CAAA;AAKA;EACC,eAAA;EAEA,cAAA;EAEA,eAAA;EACA,gBAAA;EAEA,qBAAA;EAEA,YAAA;EACA,gBC1DK;ED4DL,uDAAA;AEuND;AFrNC;EACC,0BAAA;EACA,cC5EG;ACmSL;AFpNC;EACC,sCAAA;EACA,eAAA;EAEA,qBAAA;EAEA,eAAA;EAEA,qBAAA;EAEA,yBClFM;EDoFN,YAAA;EACA,gBChFI;ACiSN;AF9NC;EACC,sCAAA;EACA,eAAA;EAEA,qBAAA;EAEA,eAAA;EAEA,qBAAA;EAEA,yBClFM;EDoFN,YAAA;EACA,gBChFI;ACiSN;AF9MC;EACC,gBAAA;EACA,kBAAA;AEgNF;;AF5MA;;;;CAAA;AAKA;EACC,WAAA;EACA,sBAAA;AE+MD;AF7MC;EACC,WAAA;EACA,sBAAA;AE+MF;;AF3MA;;;;CAAA;AAKA;EACI,WAAA;EACA,gBAAA;EAAkB,YAAA;EI/GrB,aAAA;EAEA,sBAAA;EAEA,8BJ6GqB;EAElB,gDCjIK;EDkIL,kCAAA;UAAA,0BAAA;EAEA,gBCtHE;EDwHF,2DAAA;AE6MJ;;AF1MA;EACC,yBAAA;EAEA,WAAA;EAAa,YAAA;EAEb,sBAAA;EAEA,eAAA;AE2MD;;AFxMA;;;;CAAA;AAKA;EACC,SAAA;EAAW,eAAA;EAEX,eAAA;EAAiB,WAAA;EACjB,cAAA;EAAgB,YAAA;EAEhB,0BAAA;KAAA,uBAAA;EAEA,yBCjKI;EDkKJ,kCAAA;UAAA,0BAAA;EAEA,kBAAA;EACA,sDCvJQ;EDyJR,sDAAA;AEyMD;AFvMC;EACC,6BAAA;AEyMF;AFtMC;EACC,SAAA;EAAW,UAAA;EACX,aAAA;EAAe,cAAA;EAEf,cAAA;EAEA,0BAAA;KAAA,uBAAA;AEwMF","file":"main.css"} \ No newline at end of file +{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 76ce477..aca35b0 100644 --- a/css/main.scss +++ b/css/main.scss @@ -63,12 +63,17 @@ body { .btn { padding: 0.5rem; + width: 100%; + display: block; + box-sizing: border-box; font-size: 16px; font-weight: 500; + font-family: $font-body; text-decoration: none; + text-align: center; border: none; border-radius: $rad; @@ -95,47 +100,32 @@ body { border: none; border-radius: $rad; } - - a { - margin-bottom: 0; - text-align: center; - } +} +.btn-good { + background-color: $green; +} +.btn-bad { + background-color: $red; +} +.btn-neutral { + background-color: $black; } /* |------------------------------------------------------------- - | FORM + | FORM SIZING |------------------------------------------------------------- */ form { width: 100%; - box-sizing: border-box; - - * { - width: 100%; - box-sizing: border-box; - } + box-sizing: content-box; } /* |------------------------------------------------------------- - | IMAGES + | SVG |------------------------------------------------------------- */ -.image-container { - width: 100%; - max-height: 69vh; height: auto; - - @include flexDown(space-between); - - background-color: $bg-alt; - backdrop-filter: blur(8px); - - border-radius: $rad; - - transition: max-height 0.15s cubic-bezier(.19,1,.22,1); -} - .svg { margin: 0 0.2rem 0.1rem 0; @@ -179,4 +169,4 @@ form { object-position: center; } -} +} \ No newline at end of file diff --git a/css/scss/_body.scss b/css/scss/_body.scss index 235cd6a..1cd8e50 100644 --- a/css/scss/_body.scss +++ b/css/scss/_body.scss @@ -4,14 +4,16 @@ |------------------------------------------------------------- */ .info-text { - margin: 1rem 0; padding: 0; + @include defaultFont(); + + margin: 1rem 0 1rem 0.5rem; padding: 0; text-align: center; h1 { font-family: $font-header; - margin-top: 0.5rem; + margin-top: 0; margin-bottom: 1rem; } p { @@ -23,7 +25,7 @@ } .gallery-root { - padding: 0.25rem; + margin-bottom: 1rem; padding: 0.25rem; background-color: $bg; color: $fg; @@ -93,7 +95,7 @@ display: flex; - background-color: $bg; + background-color: $bg-alt; backdrop-filter: blur(8px); border-radius: $rad; @@ -103,10 +105,10 @@ @media (max-width: 600px) { .image-container { - max-height: 42vh !important; + max-height: 42vh; } } - + .image { margin: 0 auto; @@ -114,4 +116,59 @@ max-height: inherit; height: auto; border-radius: $rad; -} \ No newline at end of file +} + +/* + |------------------------------------------------------------- + | DESCRIPTION + |------------------------------------------------------------- +*/ +.image-description { + @include defaultDecoration($green); + @include defaultFont(); +} + + +/* + |------------------------------------------------------------- + | DETAILS + |------------------------------------------------------------- +*/ +.image-detail { + @include defaultDecoration($green); + @include defaultFont(); +} + +/* + |------------------------------------------------------------- + | TAGS + |------------------------------------------------------------- +*/ +.tags-root { + @include defaultDecoration($green); + @include defaultFont(); +} +.tags { + @include flexLeft(auto); +} +.tag { + margin: 0.25rem; padding: 0.5rem; + + display: block; + + background-color: $page-accent; + + border-radius: $rad; + + font-family: $font-body; +} + +/* + |------------------------------------------------------------- + | DANGER ZONE + |------------------------------------------------------------- +*/ +.danger-zone { + @include defaultDecoration($red); + @include defaultFont(); +} diff --git a/css/scss/_footer.scss b/css/scss/_footer.scss index abac2a6..a837ec5 100644 --- a/css/scss/_footer.scss +++ b/css/scss/_footer.scss @@ -2,7 +2,7 @@ footer { @include defaultDecoration($page-accent); @include flexLeft(space-around); - margin: 0 auto !important; + margin: 0 auto; bottom: 0; diff --git a/css/scss/_mixin.scss b/css/scss/_mixin.scss index 2c1a6c8..6ad889a 100644 --- a/css/scss/_mixin.scss +++ b/css/scss/_mixin.scss @@ -1,15 +1,28 @@ @mixin defaultDecoration($border) { - width: calc(100% - 2.4rem); - - padding: 0.5rem; + margin-bottom: 1rem; padding: 0.5rem; + + width: calc(100% - 1.4rem); background-color: $bg; color: $fg; border-radius: $rad; - border: 0.2rem solid $border; box-shadow: $shadow; + + >* { + margin-top: 0; margin-bottom: 0.5rem; + } +} + +@mixin defaultFont() { + h1, h2, h3, h4, h5 { + font-family: $font-header; + } + + p, a, button, input { + font-family: $font-body; + } } @mixin flexDown($justify) { diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss index 26864ce..8896e09 100644 --- a/css/scss/_navigation.scss +++ b/css/scss/_navigation.scss @@ -20,6 +20,9 @@ nav { margin: 0.5rem 0.2rem; padding: 0; opacity: 0; } + .btn { + width: auto; + } } .nav-name { @@ -36,6 +39,8 @@ nav { .nav-links { @include flexLeft(space-around); + margin: 0; + font-family: $font-body; width: auto; @@ -59,7 +64,7 @@ nav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; - background-color: $bg; + background-color: $bg-alt; backdrop-filter: blur(8px); border: none; @@ -76,7 +81,7 @@ nav { text-align: left !important; } footer { - margin-bottom: calc(5rem + 3px) !important; + margin-bottom: 4rem !important; } #back-to-top { bottom: 5rem !important; diff --git a/image.php b/image.php index 0bfbcaf..bece92c 100644 --- a/image.php +++ b/image.php @@ -192,8 +192,10 @@ // Image Upload date echo "

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

"; + echo "
"; + // Image download - echo "Download image"; + echo "Download image"; // Copy image ?> @@ -205,19 +207,19 @@ } Copy image link"; + echo ""; ?>

Tags

-
+
".$tag."

"; + echo "

".$tag."

"; } } else { echo "

No tags present

"; @@ -249,13 +251,13 @@ | I cannot describe the anxiety this gives me. pls help |------------------------------------------------------------- --> - + -
- -