From fda00c7c317fb9063c738dfbbd7c974d0dbd2917 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Fri, 22 Jul 2022 01:21:48 +0100 Subject: [PATCH] Final UI change --- assets/bg.svg | 7 ++ css/footer.css | 20 +++++ css/gallery.css | 45 ++++++++++ css/image.css | 59 +++++++++++++ css/master.css | 220 ++++++++++-------------------------------------- css/nav.css | 18 ++++ css/sussy.css | 119 -------------------------- css/upload.css | 20 +++++ image.php | 9 +- index.php | 4 +- ui/header.php | 6 +- upload.php | 13 ++- 12 files changed, 235 insertions(+), 305 deletions(-) create mode 100644 assets/bg.svg create mode 100644 css/footer.css create mode 100644 css/gallery.css create mode 100644 css/image.css create mode 100644 css/nav.css delete mode 100644 css/sussy.css create mode 100644 css/upload.css diff --git a/assets/bg.svg b/assets/bg.svg new file mode 100644 index 0000000..6ee2feb --- /dev/null +++ b/assets/bg.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..3fc2858 --- /dev/null +++ b/css/footer.css @@ -0,0 +1,20 @@ +/* + -=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +footer { + margin: 0; padding: 0.5rem; + + width: calc(100vh - 2rem)); + + background-color: var(--bg); color: var(--fg); + + border: 0.2rem solid var(--green); + outline: 0.5rem solid var(--bg); + + border-radius: var(--rad); + box-shadow: var(--shadow); +} + +.footer-child { + min-width: 300px; +} diff --git a/css/gallery.css b/css/gallery.css new file mode 100644 index 0000000..1798c18 --- /dev/null +++ b/css/gallery.css @@ -0,0 +1,45 @@ +/* + -=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +.info-text { + margin: 0 0 2rem; +} + +.gallery-root { + margin: 0 0 2rem; padding: 0; + + background-color: var(--bg); color: var(--fg); + + border: 0.2rem solid var(--green); + outline: 0.5rem solid var(--bg); + + border-radius: var(--rad); + box-shadow: var(--shadow); +} + +.gallery-item { + margin: 0.5rem; padding: 0; + + max-width: 300px; height: 200px; + + background-color: var(--gray); + border-radius: var(--rad); + + flex: 1 0 150px; + + transition: transform 0.15s cubic-bezier(.19,1,.22,1); +} +.gallery-item:hover { + transform: scale(1.1) rotate(5deg); + box-shadow: var(--shadow); +} + +.gallery-image { + margin: 0; padding: 0; + + width: 100%; height: 100%; + + object-fit: cover; + + border-radius: var(--rad); +} diff --git a/css/image.css b/css/image.css new file mode 100644 index 0000000..2ad3358 --- /dev/null +++ b/css/image.css @@ -0,0 +1,59 @@ +/* + -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +.image-container { + margin: 0 0 2rem; padding: 0; + + width: calc(100vw - var(--space-medium)); + height: 60vh; + + position: relative; +} +.image { + max-width: 100%; + width: auto; + max-height: 100%; + height: auto; + + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + + border-radius: var(--rad); +} + +.image-description { + margin: 0 0 2rem; padding: 0.5rem;; + + background-color: var(--bg); color: var(--fg); + + border: 0.2rem solid var(--green); + outline: 0.5rem solid var(--bg); + + border-radius: var(--rad); + box-shadow: var(--shadow); +} + +.image-detail { + margin: 0 0 2rem; padding: 0.5rem;; + + background-color: var(--bg); color: var(--fg); + + border: 0.2rem solid var(--green); + outline: 0.5rem solid var(--bg); + + border-radius: var(--rad); + box-shadow: var(--shadow); +} + +.danger-zone { + margin: 0 0 2rem; padding: 0.5rem;; + + background-color: var(--bg); color: var(--fg); + + border: 0.2rem solid var(--red); + outline: 0.5rem solid var(--bg); + + border-radius: var(--rad); + box-shadow: var(--shadow); +} diff --git a/css/master.css b/css/master.css index 3491940..8f55917 100644 --- a/css/master.css +++ b/css/master.css @@ -1,33 +1,45 @@ +@import "nav.css"; +@import "footer.css"; + +@import "gallery.css"; +@import "image.css"; +@import "upload.css"; + :root { - --red: #B66467dd; - --green: #8C977Ddd; + --bg: #151515df; + --bg-1: #242621; + --bg-2: #1D1E1C; + + --fg:#E8E3E3; + --fg-dark: #151515; + + --red: #B66467; + --green: #8C977D; --black: #151515; - --gray: #15151555; - --dark-gray: #151515cc; --white: #E8E3E3; + --shadow: 6px 6px 10px #15151588; --rad: 5px; - - --space-xsmall: 0.25rem; - --space-small: 0.5rem; - --space-medium: 1rem; - --space-large: 2rem; } * { - font-family: "Rubik", sans-serif; - font-weight: 621; + font-weight: 521; + color: var(--fg); } html { - margin: 0; - padding: 0; + margin: 0; padding: 0; + + height: 100vh; width: 100vw; + + background-color: var(--bg-2); } body { - margin: 0; - padding: var(--space-small); + margin: 0 auto; padding: 1rem; min-height: calc(100vh - 1rem); + max-width: 1500px; + display: flex; flex-direction: column; justify-content: space-between; @@ -58,10 +70,9 @@ body { } .alert { - margin: var(--space-small) 0; - padding: var(--space-medium); + margin: 0; padding: 1rem; - width: calc(100% - (var(--space-large))); + width: inherit; display: inline-block; @@ -74,11 +85,11 @@ body { background-color: var(--red); } .alert-default { - background-color: var(--gray); + background-color: var(--black); } .btn { - padding: var(--space-small); + margin: 0; padding: 0.5rem; border: none; @@ -89,183 +100,44 @@ body { border-radius: var(--rad); } .btn:hover { - outline: var(--gray) 3px solid; + outline: var(--white) 3px solid; } -.space-small { - margin-left: var(--space-small); - - width: 0; - height: 0; - - border: none; +.space-bottom { + margin-bottom: 1rem; } - -/* - -=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -*/ -nav { - margin: 0; - padding: var(--space-small); - - width: calc(100vw - (var(--space-medium) * 2)); - height: 2.5rem; - - align-items: center; - - background-image: url(../assets/nav.svg); - background-position: top; - background-repeat: no-repeat; - background-size: cover; - - border-radius: var(--rad); -} -/* - -=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -*/ -footer { - margin: 0; - padding: var(--space-small); - - width: calc(100vw - (var(--space-medium) * 2)); - - background-image: url(../assets/footer.svg); - background-position: bottom; - background-repeat: no-repeat; - background-size: cover; - - border-radius: var(--rad); -} -.footer-child { - min-width: 300px; -} - -/* - -=-=-= UPLOAD =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -*/ -.upload-root { - margin: var(--space-large) auto; - padding: var(--space-medium); - - max-width: 621px; - - background-color: var(--gray); - border-radius: var(--rad); -} -form { - width: 100%; -} - -/* - -=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -*/ -.info-text { - margin: var(--space-medium) auto; - - max-width: 1500px; -} - -.gallery-root { - margin: var(--space-medium) auto; - padding: 0; - - max-width: 1500px; -} -.gallery-item { - margin: var(--space-xsmall); padding: 0; - - max-width: 300px; height: 200px; - - background-color: var(--gray); - border-radius: var(--rad); - - flex: 1 0 170px; - - transition: transform 0.15s cubic-bezier(.19,1,.22,1); -} -.gallery-image { - margin: 0; padding: 0; - - width: 100%; height: 100%; - - object-fit: cover; - - border-radius: var(--rad); -} - -.gallery-item:hover { - transform: scale(1.1) rotate(5deg); - box-shadow:0 0 5px var(--dark-gray); -} - -/* - -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -*/ -.image-container { - margin: var(--space-medium) auto; - padding: 0; - - width: calc(100vw - var(--space-medium)); - height: 60vh; - - position: relative; -} -.image { - max-width: 100%; - width: auto; - max-height: 100%; - height: auto; - - position: absolute; - top: 50%; left: 50%; - transform: translate(-50%, -50%); - - border-radius: var(--rad); -} - -.image-detail { - margin: var(--space-medium) 0; - padding: var(--space-medium); - - background-color: var(--gray); - - border-radius: var(--rad); -} - -.danger-zone { - margin: var(--space-medium) 0; - padding: var(--space-medium); - - background-color: var(--red); - - border-radius: var(--rad); +.space-top { + margin-top: 1rem; } /* -=-=-= TEXT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ h1 { - margin: 0 0 var(--space-small) 0; + margin: 0 0 0.5rem 0; + font-family: "Lexend Deca", sans-serif; font-size: 30px; } h2 { - margin: 0 0 var(--space-small) 0; + margin: 0 0 0.5rem 0; + font-family: "Lexend Deca", sans-serif; font-size: 27px; } h3 { - margin: 0 0 var(--space-small) 0; + margin: 0 0 0.5rem 0; + font-family: "Lexend Deca", sans-serif; font-size: 24px; } h4 { - margin: 0 0 var(--space-small) 0; + margin: 0 0 0.5rem 0; + font-family: "Lexend Deca", sans-serif; font-size: 21px; } - p { - margin: 0 0 var(--space-small) 0; - + margin: 0 0 0.5rem 0; + font-family: "Fira Code", monospace; } diff --git a/css/nav.css b/css/nav.css new file mode 100644 index 0000000..53b2853 --- /dev/null +++ b/css/nav.css @@ -0,0 +1,18 @@ +/* + -=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +nav { + margin: 0 0 2rem; padding: 0.5rem; + + width: calc(100vh - 2rem)); height: 2.5rem; + + align-items: center; + + background-color: var(--bg); color: var(--fg); + + border: 0.2rem solid var(--green); + outline: 0.5rem solid var(--bg); + + border-radius: var(--rad); + box-shadow: var(--shadow); +} diff --git a/css/sussy.css b/css/sussy.css deleted file mode 100644 index 448ada5..0000000 --- a/css/sussy.css +++ /dev/null @@ -1,119 +0,0 @@ -:root { - --red: #B66467; - --green: #8C977D; - --black: #151515; - --gray: #15151555; - --dark-gray: #151515cc; - --white: #E8E3E3; - - --rad: 5px; -} - -* { - font-family: "Rubik", sans-serif; - font-weight: 621; - font-size: 15px; -} - -html { - margin: 0; padding: 0; -} -body { - margin: 0 auto; padding: 1rem; - max-width: 1000px; - background-color: #15151522; -} -h1 { - font-size: 40px; -} - -form { - margin: 1rem auto; padding: 0; - /*max-width: 621px;*/ - display: flex; - justify-content: space-between; -} - -.item { - margin: 0.25rem 0; padding: 0; - height: 300px; width: calc(33.33% - 0.5rem); - - display: block; - position: relative; - - border-radius: var(--rad); - - background-color: var(--gray); - - overflow: hidden; -} -img { - width: 100%; height: 100%; - object-fit: contain; - position: absolute; - background-size: cover; -} -.delete_button { - height: 3rem; width: calc(100% - 1rem); - padding: 0; - position: absolute; - bottom: -3rem; left: 0.5rem; - border-radius: var(--rad); - transition: bottom 0.2s cubic-bezier(0,.76,0,1); -} -.identity { - width: calc(100% - 1rem); - padding: 0.7rem 0; - text-align: center; - position: absolute; - top: -3.6rem; left: 50%; - transform: translate(-50%, 0%); - color: #fff; - border-radius: var(--rad); - transition: top 0.2s cubic-bezier(0,.76,0,1); -} - -.item:hover .delete_button { - bottom: 0.5rem; - background-color: var(--red); -} -.item:hover .identity { - top: -0.5rem; -} - -.gallery { - margin: 0; padding: 0; - display: flex; flex-direction: row; - flex-wrap: wrap; justify-content: space-between; -} - -.alert { - margin: 1rem 0; padding: 0.7rem; - text-align: center; - border-radius: var(--rad); -} - - -.btn { - padding: 0.7rem; - background-color: var(--gray); - border: none; - border-radius: var(--rad); -} -.btn:hover { - color: #fff; - background-color: var(--dark-gray); -} -.b-colour { - color: #fff; -} - -.fail { - background-color: var(--red); -} -.success { - background-color: var(--green); -} -.default { - background-color: var(--gray); -} diff --git a/css/upload.css b/css/upload.css new file mode 100644 index 0000000..27bc9d3 --- /dev/null +++ b/css/upload.css @@ -0,0 +1,20 @@ +/* + -=-=-= UPLOAD =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +.upload-root { + margin: 0 auto 2rem; padding: 0.5rem;; + + background-color: var(--bg); color: var(--fg); + + border: 0.2rem solid var(--green); + outline: 0.5rem solid var(--bg); + + border-radius: var(--rad); + box-shadow: var(--shadow); + + max-width: 621px; +} + +form { + width: 100%; +} diff --git a/image.php b/image.php index b904c7a..2b0e9cf 100644 --- a/image.php +++ b/image.php @@ -43,12 +43,19 @@ ?> +
+

Description

+ ".$image_alt."

"; + ?> +
+
+

Details

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

"; echo "

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

"; echo "

Upload Date: ".$image['upload']."

"; - echo "

Description: ".$image_alt."

"; ?>
diff --git a/index.php b/index.php index 8e3b2a1..742931b 100644 --- a/index.php +++ b/index.php @@ -6,13 +6,15 @@ UwU + + Successfully deleted image: ".$_GET['id']."

"; + echo "

Successfully deleted image: ".$_GET['id']."

"; } ?> diff --git a/ui/header.php b/ui/header.php index 82d9f19..927cf27 100644 --- a/ui/header.php +++ b/ui/header.php @@ -3,8 +3,8 @@

Fluffys Gallery!

-

Home

-
-

Upload

+

Home

+
+

Upload

diff --git a/upload.php b/upload.php index c850798..fa793b7 100644 --- a/upload.php +++ b/upload.php @@ -13,19 +13,18 @@
-
- -
+ + + -
Your Image uploaded successfully!

"; + echo "

Your Image uploaded successfully!

"; }elseif ($_GET["r"] == "fail") { - echo "

F, Upload failed

"; + echo "

F, Upload failed

"; }elseif ($_GET["r"] == "nofile") { - echo "

No file lol

"; + echo "

No file lol

"; }else{ // echo "

Select an image to upload

"; }