mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-29 10:56:12 +00:00
UI remake - in progress
This commit is contained in:
parent
418a102d49
commit
360a07a67b
241
css/master.css
Normal file
241
css/master.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
85
image.php
Normal file
85
image.php
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UwU</title>
|
||||
<link rel="stylesheet" href="css/master.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<?php include('ui/header.php'); ?>
|
||||
|
||||
<?php
|
||||
// Attempt database connection
|
||||
$conn = mysqli_connect("localhost", "uwu", "password", "swag");
|
||||
// If connecton failed, notify user
|
||||
if (!$conn) {
|
||||
echo "<p class='alert fail'>Could not connect to database</p>";
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="image-container">
|
||||
<?php
|
||||
// Get image ID
|
||||
// Getting all image info from table
|
||||
$get_image = "SELECT * FROM swag_table WHERE id = ".$_GET['id'];
|
||||
$image_results = mysqli_query($conn, $get_image);
|
||||
$image = mysqli_fetch_assoc($image_results);
|
||||
|
||||
echo "<img class='image' src='images/".$image['imagename']."' id='".$image['id']."'>";
|
||||
|
||||
if (!isset($_GET['id'])) {
|
||||
echo "cannot obtain image";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="image-detail flex-down">
|
||||
<?php
|
||||
echo "<p>ID: ".$image['id']."</p>";
|
||||
echo "<p>File Name: ".$image['imagename']."</p>";
|
||||
echo "<p>Upload Date: ".$image['upload']."</p>";
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="danger-zone flex-down">
|
||||
<h2>Danger zone</h2>
|
||||
<?php
|
||||
// Image hover details
|
||||
echo "<form class='detail' method='GET' enctype='multipart/form-data'>";
|
||||
echo "<p class='identity default'>ID: ".$row['id']."</p>";
|
||||
echo "<button class='delete_button btn b-colour' type='submit' name='d' value='".$row['id']."'>Delete</button>";
|
||||
echo "</form>";
|
||||
|
||||
// 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 "<p class='alert success' id='deleted'>Successfully deleted: ".$file_name."/".$_GET['d']."</p>";
|
||||
}
|
||||
}else{
|
||||
// Could not delete from file
|
||||
echo "<p class='alert fail' id='deleted'>Failed to delete or no file under the name: ".$file_name." ".$_GET['d']."</p>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php include('ui/footer.php'); ?>
|
||||
</body>
|
||||
</html>
|
||||
111
index.php
111
index.php
|
|
@ -4,126 +4,43 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UwU</title>
|
||||
<link rel="stylesheet" href="sussy.css">
|
||||
<link rel="stylesheet" href="css/master.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hewwo UwU</h1>
|
||||
<?php include('ui/header.php'); ?>
|
||||
|
||||
<h1>The website is currently being reconstructed! Please be patient!</h1>
|
||||
<p>Fluffy's test website on uploading images to a database!</p>
|
||||
|
||||
<form method="POST" action="index.php?" enctype="multipart/form-data">
|
||||
<input class="btn" type="file" name="image" placeholder="select image UwU">
|
||||
<button class="btn" type="submit" name="upload">Upload Image</button>
|
||||
</form>
|
||||
|
||||
<?php
|
||||
// Get page URL and parse to get query
|
||||
$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
|
||||
$parse = parse_url($url);
|
||||
|
||||
$base_url = $parse["scheme"]."://".$parse["host"].$parse["path"]."?";
|
||||
|
||||
parse_str($parse["query"], $query);
|
||||
|
||||
// Check Query to check file upload status
|
||||
if ($query["r"] == "epic") {
|
||||
echo "<p class='alert success'>Your Image uploaded successfully!</p>";
|
||||
}elseif ($query["r"] == "fail") {
|
||||
echo "<p class='alert fail'>F, Upload failed</p>";
|
||||
}elseif ($query["r"] == "nofile") {
|
||||
echo "<p class='alert fail'>No file lol</p>";
|
||||
}elseif ($query["r"] == "del") {
|
||||
echo "<p class='alert success'>Deleted file</p>";
|
||||
}elseif ($query["r"] == "nodel") {
|
||||
echo "<p class='alert fail'>Could not delete file</p>";
|
||||
}else{
|
||||
echo "<p class='alert default'>Select an image to upload</p>";
|
||||
// Attempt database connection
|
||||
$conn = mysqli_connect("localhost", "uwu", "password", "swag");
|
||||
// If connecton failed, notify user
|
||||
if (!$conn) {
|
||||
echo "<p class='alert fail'>Could not connect to database</p>";
|
||||
}
|
||||
|
||||
|
||||
// My terrible workaround for not being able to show deletion status up here
|
||||
if (isset($_GET['d'])) {
|
||||
echo "<p class='alert default'>Image ".$_GET['d']." has been modified, <a href='#deleted'>view status here</a></p>";
|
||||
}
|
||||
|
||||
// Attempt database connection
|
||||
$conn = mysqli_connect("localhost", "uwu", "password", "swag");
|
||||
|
||||
// If connecton failed, notify user
|
||||
if (!$conn) {
|
||||
echo "<p class='alert fail'>Could not connect to database</p>";
|
||||
}
|
||||
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");
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!--<p class="alert fail">Whatever gets uploaded will have to manually get removed.</p>-->
|
||||
|
||||
<div class="gallery">
|
||||
<div class="gallery-root flex-left">
|
||||
<?php
|
||||
// Reading images from table
|
||||
$img = mysqli_query($conn, "SELECT * FROM swag_table");
|
||||
while ($row = mysqli_fetch_array($img)) {
|
||||
echo "<div class='item'>";
|
||||
echo "<div class='gallery-item'>";
|
||||
// Image loading
|
||||
echo "<img loading='lazy' src='images/".$row['imagename']."' id='".$row['id']."'>";
|
||||
// Image hover details
|
||||
echo "<form class='detail' method='GET' enctype='multipart/form-data'>";
|
||||
echo "<p class='identity default'>ID: ".$row['id']."</p>";
|
||||
echo "<button class='delete_button btn b-colour' type='submit' name='d' value='".$row['id']."'>Delete</button>";
|
||||
|
||||
echo "</form>";
|
||||
echo "<a href='https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$row['id']."'><img class='gallery-image' loading='lazy' src='images/".$row['imagename']."' id='".$row['id']."'></a>";
|
||||
echo "</div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// 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 "<p class='alert success' id='deleted'>Successfully deleted: ".$file_name."/".$_GET['d']."</p>";
|
||||
}
|
||||
}else{
|
||||
// Could not delete from file
|
||||
echo "<p class='alert fail' id='deleted'>Failed to delete or no file under the name: ".$file_name." ".$_GET['d']."</p>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
<?php include('ui/footer.php'); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
20
ui/footer.php
Normal file
20
ui/footer.php
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="footer-root flex-left around">
|
||||
<div class="footer-child center flex-down">
|
||||
<h3>Contact me</h3>
|
||||
<p>Telegram</p>
|
||||
<p>Twitter</p>
|
||||
<p>Discord</p>
|
||||
</div>
|
||||
<div class="footer-child center flex-down">
|
||||
<h3>Information</h3>
|
||||
<p>How to use</p>
|
||||
<p>Wiki</p>
|
||||
<p>Guides</p>
|
||||
</div>
|
||||
<div class="footer-child center flex-down">
|
||||
<h3>Other</h3>
|
||||
<p>AAAAAAAA</p>
|
||||
<p>*Internal screaming*</p>
|
||||
<p>(s)pain</p>
|
||||
</div>
|
||||
</div>
|
||||
10
ui/header.php
Normal file
10
ui/header.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<div class="nav-root flex-left between">
|
||||
<div class="nav-name flex-left">
|
||||
<h3>Fluffys Gallery!</h3>
|
||||
</div>
|
||||
<div class="nav-links flex-left">
|
||||
<p><a href="https://superdupersecteteuploadtest.fluffybean.gay">Home</a></p>
|
||||
<p><a href="https://superdupersecteteuploadtest.fluffybean.gay/upload.php">Upload</a></p>
|
||||
<p>info</p>
|
||||
</div>
|
||||
</div>
|
||||
73
upload.php
Normal file
73
upload.php
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UwU</title>
|
||||
<link rel="stylesheet" href="css/master.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<?php include('ui/header.php'); ?>
|
||||
|
||||
<div class="upload-root">
|
||||
<form method="POST" action="upload.php" enctype="multipart/form-data">
|
||||
<input class="btn" type="file" name="image" placeholder="select image UwU">
|
||||
<button class="btn" type="submit" name="upload">Upload Image</button>
|
||||
</form>
|
||||
<?php
|
||||
if ($_GET["r"] == "success") {
|
||||
echo "<p class='alert alert-high'>Your Image uploaded successfully!</p>";
|
||||
}elseif ($_GET["r"] == "fail") {
|
||||
echo "<p class='alert alert-low'>F, Upload failed</p>";
|
||||
}elseif ($_GET["r"] == "nofile") {
|
||||
echo "<p class='alert alert-default'>No file lol</p>";
|
||||
}else{
|
||||
echo "<p class='alert alert-default'>Select an image to upload</p>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
// Attempt database connection
|
||||
$conn = mysqli_connect("localhost", "uwu", "password", "swag");
|
||||
// If connecton failed, notify user
|
||||
if (!$conn) {
|
||||
echo "<p class='alert fail'>Could not connect to database</p>";
|
||||
}
|
||||
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?php include('ui/footer.php'); ?>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue