From 7077c44e844c872ed493700695af3db0103418d0 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Thu, 21 Jul 2022 19:42:03 +0100 Subject: [PATCH] UI remake --- assets/1.svg | 1 + assets/footer.svg | 1 + assets/nav.svg | 1 + css/master.css | 110 +++++++++++++++++++++++++++++----------------- image.php | 28 ++++-------- index.php | 15 +++++-- ui/footer.php | 4 +- ui/header.php | 12 ++--- upload.php | 7 +-- 9 files changed, 105 insertions(+), 74 deletions(-) create mode 100644 assets/1.svg create mode 100644 assets/footer.svg create mode 100644 assets/nav.svg diff --git a/assets/1.svg b/assets/1.svg new file mode 100644 index 0000000..81e1783 --- /dev/null +++ b/assets/1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/footer.svg b/assets/footer.svg new file mode 100644 index 0000000..d271bf7 --- /dev/null +++ b/assets/footer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/nav.svg b/assets/nav.svg new file mode 100644 index 0000000..420562f --- /dev/null +++ b/assets/nav.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/master.css b/css/master.css index 5d9163a..4e843d8 100644 --- a/css/master.css +++ b/css/master.css @@ -1,6 +1,6 @@ :root { - --red: #B66467; - --green: #8C977D; + --red: #B66467dd; + --green: #8C977Ddd; --black: #151515; --gray: #15151555; --dark-gray: #151515cc; @@ -19,10 +19,18 @@ font-weight: 621; } html { - margin: 0; padding: 0; + margin: 0; + padding: 0; } body { - margin: 0; padding: var(--space-small); + margin: 0; + padding: var(--space-small); + + min-height: calc(100vh - 1rem); + + display: flex; + flex-direction: column; + justify-content: space-between; } @@ -45,20 +53,20 @@ body { .around { justify-content: space-around; } - .center { text-align: center; } .alert { margin: var(--space-small) 0; - padding: var(--space-small); + padding: var(--space-medium); - width: auto; + width: calc(100% - (var(--space-large))); + + display: inline-block; border-radius: var(--rad); } - .alert-high { background-color: var(--green); } @@ -69,38 +77,63 @@ body { background-color: var(--gray); } -.block { +.btn { + padding: var(--space-small); + + border: none; + display: inline-block; + + align-items: center; + + border-radius: var(--rad); } -.inline { - display: inline; +.btn:hover { + outline: var(--gray) 3px solid; +} + +.space-small { + margin-left: var(--space-small); + + width: 0; + height: 0; + + border: none; } /* -=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ -.nav-root { +nav { margin: 0; padding: var(--space-small); width: calc(100vw - (var(--space-medium) * 2)); - height: 3rem; + height: 2.5rem; align-items: center; - background-color: var(--gray); + background-image: url(../assets/nav.svg); + background-position: top; + background-repeat: no-repeat; + background-size: cover; + border-radius: var(--rad); } /* -=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ -.footer-root { +footer { margin: 0; padding: var(--space-small); width: calc(100vw - (var(--space-medium) * 2)); - background-color: var(--gray); + background-image: url(../assets/footer.svg); + background-position: bottom; + background-repeat: no-repeat; + background-size: cover; + border-radius: var(--rad); } .footer-child { @@ -119,12 +152,21 @@ body { 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-large) auto; + margin: var(--space-medium) auto; padding: 0; max-width: 1500px; @@ -152,7 +194,7 @@ body { } .gallery-item:hover { - transform: scale(1.2); + transform: scale(1.1); box-shadow:0 0 5px var(--dark-gray); } @@ -160,7 +202,7 @@ body { -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ .image-container { - margin: var(--space-large) auto; + margin: var(--space-medium) auto; padding: 0; width: calc(100vw - var(--space-medium)); @@ -182,8 +224,8 @@ body { } .image-detail { - margin: var(--space-large) 0; - padding: var(--space-small); + margin: var(--space-medium) 0; + padding: var(--space-medium); background-color: var(--gray); @@ -191,8 +233,8 @@ body { } .danger-zone { - margin: var(--space-large) 0; - padding: var(--space-small); + margin: var(--space-medium) 0; + padding: var(--space-medium); background-color: var(--red); @@ -203,39 +245,27 @@ body { -=-=-= TEXT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ h1 { - margin: var(--space-small); - padding: 0; + margin: 0 0 var(--space-small) 0; font-size: 30px; } h2 { - margin: var(--space-small); - padding: 0; + margin: 0 0 var(--space-small) 0; font-size: 27px; } h3 { - margin: var(--space-small); - padding: 0; + margin: 0 0 var(--space-small) 0; font-size: 24px; } h4 { - margin: var(--space-small); - padding: 0; + margin: 0 0 var(--space-small) 0; font-size: 21px; } p { - margin: var(--space-small); - padding: 0; + margin: 0 0 var(--space-small) 0; - display: inline; - - font-size: 16px; -} -a { - margin: 0; - padding: 0; } diff --git a/image.php b/image.php index 0e12e22..4cd6908 100644 --- a/image.php +++ b/image.php @@ -47,34 +47,24 @@

Danger zone

"; - echo "

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

"; - echo ""; + echo "
"; + echo ""; echo "
"; // Check if query is set - if (isset($_GET['d'])) { - // Get all image detail - $delete_select = "SELECT * FROM swag_table WHERE id = ".$_GET['d']; - $delete_result = mysqli_query($conn,$delete_select); - $img_records = mysqli_fetch_assoc($delete_result); - - // Get image name and its file path - $file_name = $img_records['imagename']; - $file_path = "images/".$file_name; - + if (isset($_POST['delete'])) { // Try deleting image - if(unlink($file_path)) { + if(unlink("images/".$image['imagename'])) { // If deleted, delete from Table - $img_delete_request = "DELETE FROM swag_table WHERE id =".$img_records[id]; - $img_delete = mysqli_query($conn,$img_delete_request); - if ($img_delete) { + $image_delete_request = "DELETE FROM swag_table WHERE id =".$image['id']; + $image_delete = mysqli_query($conn,$image_delete_request); + if ($image_delete) { // Deleted image - echo "

Successfully deleted: ".$file_name."/".$_GET['d']."

"; + header("Location:index.php?del=true&id=".$image['id']); } }else{ // Could not delete from file - echo "

Failed to delete or no file under the name: ".$file_name." ".$_GET['d']."

"; + echo "

Error: Coult not delete image

"; } } ?> diff --git a/index.php b/index.php index f041e5a..8e3b2a1 100644 --- a/index.php +++ b/index.php @@ -10,15 +10,23 @@ -

The website is currently being reconstructed! Please be patient!

-

Fluffy's test website on uploading images to a database!

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

"; + } + ?> + +
+

Fluffys Super Duper Secrete Project!

+

Fluffy's test website on uploading images to a database!

+
Could not connect to database

"; + echo "

Could not connect to database

"; } @@ -40,7 +48,6 @@ ?> - diff --git a/ui/footer.php b/ui/footer.php index 4da8909..df53ebc 100644 --- a/ui/footer.php +++ b/ui/footer.php @@ -1,4 +1,4 @@ -
+

Contact me

Telegram

@@ -17,4 +17,4 @@

*Internal screaming*

(s)pain

-
+ diff --git a/ui/header.php b/ui/header.php index 6fa1e70..82d9f19 100644 --- a/ui/header.php +++ b/ui/header.php @@ -1,10 +1,10 @@ -
+ diff --git a/upload.php b/upload.php index 269bf67..292a272 100644 --- a/upload.php +++ b/upload.php @@ -11,9 +11,10 @@
-
- - + + +
+