From 360a07a67b9aaeed65a140c642fc6a1f2b1829a8 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Thu, 21 Jul 2022 15:53:04 +0100 Subject: [PATCH] UI remake - in progress --- css/master.css | 241 +++++++++++++++++++++++++++++++++++++ sussy.css => css/sussy.css | 0 image.php | 85 +++++++++++++ index.php | 111 +++-------------- ui/footer.php | 20 +++ ui/header.php | 10 ++ upload.php | 73 +++++++++++ 7 files changed, 443 insertions(+), 97 deletions(-) create mode 100644 css/master.css rename sussy.css => css/sussy.css (100%) create mode 100644 image.php create mode 100644 ui/footer.php create mode 100644 ui/header.php create mode 100644 upload.php diff --git a/css/master.css b/css/master.css new file mode 100644 index 0000000..5d9163a --- /dev/null +++ b/css/master.css @@ -0,0 +1,241 @@ +:root { + --red: #B66467; + --green: #8C977D; + --black: #151515; + --gray: #15151555; + --dark-gray: #151515cc; + --white: #E8E3E3; + + --rad: 5px; + + --space-xsmall: 0.25rem; + --space-small: 0.5rem; + --space-medium: 1rem; + --space-large: 2rem; +} + +* { + font-family: "Rubik", sans-serif; + font-weight: 621; +} +html { + margin: 0; padding: 0; +} +body { + margin: 0; padding: var(--space-small); +} + + +/* + -=-=-= UNIVERSAL =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +.flex-left { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.flex-down { + display: flex; + flex-direction: column; +} + +.between { + justify-content: space-between; +} +.around { + justify-content: space-around; +} + +.center { + text-align: center; +} + +.alert { + margin: var(--space-small) 0; + padding: var(--space-small); + + width: auto; + + border-radius: var(--rad); +} + +.alert-high { + background-color: var(--green); +} +.alert-low { + background-color: var(--red); +} +.alert-default { + background-color: var(--gray); +} + +.block { + display: inline-block; +} +.inline { + display: inline; +} + +/* + -=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +.nav-root { + margin: 0; + padding: var(--space-small); + + width: calc(100vw - (var(--space-medium) * 2)); + height: 3rem; + + align-items: center; + + background-color: var(--gray); + border-radius: var(--rad); +} +/* + -=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +.footer-root { + margin: 0; + padding: var(--space-small); + + width: calc(100vw - (var(--space-medium) * 2)); + + background-color: var(--gray); + 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); +} + +/* + -=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +.gallery-root { + margin: var(--space-large) 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 150px; + + 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.2); + box-shadow:0 0 5px var(--dark-gray); +} + +/* + -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +.image-container { + margin: var(--space-large) 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-large) 0; + padding: var(--space-small); + + background-color: var(--gray); + + border-radius: var(--rad); +} + +.danger-zone { + margin: var(--space-large) 0; + padding: var(--space-small); + + background-color: var(--red); + + border-radius: var(--rad); +} + +/* + -=-=-= TEXT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +*/ +h1 { + margin: var(--space-small); + padding: 0; + + font-size: 30px; +} +h2 { + margin: var(--space-small); + padding: 0; + + font-size: 27px; +} +h3 { + margin: var(--space-small); + padding: 0; + + font-size: 24px; +} +h4 { + margin: var(--space-small); + padding: 0; + + font-size: 21px; +} + +p { + margin: var(--space-small); + padding: 0; + + display: inline; + + font-size: 16px; +} +a { + margin: 0; + padding: 0; +} diff --git a/sussy.css b/css/sussy.css similarity index 100% rename from sussy.css rename to css/sussy.css diff --git a/image.php b/image.php new file mode 100644 index 0000000..0e12e22 --- /dev/null +++ b/image.php @@ -0,0 +1,85 @@ + + + + + + UwU + + + + + + + Could not connect to database

"; + } + ?> + +
+ "; + + if (!isset($_GET['id'])) { + echo "cannot obtain image"; + } + ?> +
+ +
+ ID: ".$image['id']."

"; + echo "

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

"; + echo "

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

"; + ?> +
+ +
+

Danger zone

+ "; + echo "

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

"; + 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; + + // Try deleting image + if(unlink($file_path)) { + // 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) { + // Deleted image + echo "

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

"; + } + }else{ + // Could not delete from file + echo "

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

"; + } + } + ?> +
+ + + + diff --git a/index.php b/index.php index 46a32b2..f041e5a 100644 --- a/index.php +++ b/index.php @@ -4,126 +4,43 @@ UwU - + -

Hewwo UwU

+ + +

The website is currently being reconstructed! Please be patient!

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

-
- - -
- Your Image uploaded successfully!

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

F, Upload failed

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

No file lol

"; - }elseif ($query["r"] == "del") { - echo "

Deleted file

"; - }elseif ($query["r"] == "nodel") { - echo "

Could not delete file

"; - }else{ - echo "

Select an image to upload

"; + // Attempt database connection + $conn = mysqli_connect("localhost", "uwu", "password", "swag"); + // If connecton failed, notify user + if (!$conn) { + echo "

Could not connect to database

"; } + // My terrible workaround for not being able to show deletion status up here if (isset($_GET['d'])) { echo "

Image ".$_GET['d']." has been modified, view status here

"; } - - // Attempt database connection - $conn = mysqli_connect("localhost", "uwu", "password", "swag"); - - // If connecton failed, notify user - if (!$conn) { - echo "

Could not connect to database

"; - } - if (isset($_POST['upload'])) { - // Get image name - $get_image_name = $_FILES['image']['name']; - - // If image present, continue - if ($get_image_name != "") { - // Set file path for image upload - $image_path = "images/".basename($get_image_name); - $sql = "INSERT INTO swag_table (imagename) VALUES ('$get_image_name')"; - - // Uploading image to Table - mysqli_query($conn, $sql); - - // Checking if image uploaded - if (move_uploaded_file($_FILES['image']['tmp_name'], $image_path)) { - header("Location:index.php?r=epic"); - }else{ - header("Location:index.php?r=fail"); - } - }else{ - // No image present - header("Location:index.php?r=nofile"); - } - } ?> - - -
+
"; + echo "
"; // Image loading - echo ""; - // Image hover details - echo "
"; - echo "

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

"; - echo ""; - - echo "
"; + echo ""; echo "
"; } ?>
- Successfully deleted: ".$file_name."/".$_GET['d']."

"; - } - }else{ - // Could not delete from file - echo "

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

"; - } - } - ?> + diff --git a/ui/footer.php b/ui/footer.php new file mode 100644 index 0000000..4da8909 --- /dev/null +++ b/ui/footer.php @@ -0,0 +1,20 @@ +
+
+

Contact me

+

Telegram

+

Twitter

+

Discord

+
+
+

Information

+

How to use

+

Wiki

+

Guides

+
+
+

Other

+

AAAAAAAA

+

*Internal screaming*

+

(s)pain

+
+
diff --git a/ui/header.php b/ui/header.php new file mode 100644 index 0000000..6fa1e70 --- /dev/null +++ b/ui/header.php @@ -0,0 +1,10 @@ +
+
+

Fluffys Gallery!

+
+
+

Home

+

Upload

+

info

+
+
diff --git a/upload.php b/upload.php new file mode 100644 index 0000000..269bf67 --- /dev/null +++ b/upload.php @@ -0,0 +1,73 @@ + + + + + + UwU + + + + + + +
+
+ + +
+ Your Image uploaded successfully!

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

F, Upload failed

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

No file lol

"; + }else{ + echo "

Select an image to upload

"; + } + ?> +
+ + Could not connect to database

"; + } + + + if (isset($_POST['upload'])) { + // Get image name + $get_image_name = $_FILES['image']['name']; + + + // If image present, continue + if ($get_image_name != "") { + // Set file path for image upload + $image_path = "images/".basename($get_image_name); + $sql = "INSERT INTO swag_table (imagename) VALUES ('$get_image_name')"; + + + // Uploading image to Table + mysqli_query($conn, $sql); + + + // Checking if image uploaded + if (move_uploaded_file($_FILES['image']['tmp_name'], $image_path)) { + header("Location:upload.php?r=success"); + + }else{ + header("Location:upload.php?r=fail"); + + } + }else{ + // No image present + header("Location:upload.php?r=nofile"); + } + } + ?> + + + +