mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-05-29 14:53:12 +00:00
Final UI change
This commit is contained in:
parent
310510b686
commit
fda00c7c31
12 changed files with 235 additions and 305 deletions
7
assets/bg.svg
Normal file
7
assets/bg.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.102" numOctaves="4" seed="15" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
|
||||
<feSpecularLighting surfaceScale="15" specularConstant="1.2" specularExponent="20" lighting-color="#ff7700" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting">
|
||||
<feDistantLight azimuth="3" elevation="59"></feDistantLight>
|
||||
</feSpecularLighting>
|
||||
|
||||
</filter></defs><rect width="700" height="700" fill="#242621"></rect><rect width="700" height="700" fill="#ff7700" filter="url(#nnnoise-filter)"></rect></svg>
|
||||
|
After Width: | Height: | Size: 991 B |
20
css/footer.css
Normal file
20
css/footer.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
45
css/gallery.css
Normal file
45
css/gallery.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
59
css/image.css
Normal file
59
css/image.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
220
css/master.css
220
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;
|
||||
}
|
||||
|
|
|
|||
18
css/nav.css
Normal file
18
css/nav.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
119
css/sussy.css
119
css/sussy.css
|
|
@ -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);
|
||||
}
|
||||
20
css/upload.css
Normal file
20
css/upload.css
Normal file
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -43,12 +43,19 @@
|
|||
?>
|
||||
</div>
|
||||
|
||||
<div class="image-description">
|
||||
<h2>Description</h2>
|
||||
<?php
|
||||
echo "<p>".$image_alt."</p>";
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="image-detail flex-down">
|
||||
<h2>Details</h2>
|
||||
<?php
|
||||
echo "<p>ID: ".$image['id']."</p>";
|
||||
echo "<p>File Name: ".$image['imagename']."</p>";
|
||||
echo "<p>Upload Date: ".$image['upload']."</p>";
|
||||
echo "<p>Description: ".$image_alt."</p>";
|
||||
?>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,15 @@
|
|||
<title>UwU</title>
|
||||
<link rel="stylesheet" href="css/master.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap">
|
||||
</head>
|
||||
<body>
|
||||
<?php include('ui/header.php'); ?>
|
||||
|
||||
<?php
|
||||
if ($_GET["del"] == "true") {
|
||||
echo "<p class='alert alert-high'>Successfully deleted image: ".$_GET['id']."</p>";
|
||||
echo "<p class='alert alert-high space-bottom'>Successfully deleted image: ".$_GET['id']."</p>";
|
||||
}
|
||||
?>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<h3>Fluffys Gallery!</h3>
|
||||
</div>
|
||||
<div class="nav-links flex-left between">
|
||||
<p class="btn"><a href="https://superdupersecteteuploadtest.fluffybean.gay">Home</a></p>
|
||||
<hr class="space-small">
|
||||
<p class="btn"><a href="https://superdupersecteteuploadtest.fluffybean.gay/upload.php">Upload</a></p>
|
||||
<p class="btn alert-default"><a href="https://superdupersecteteuploadtest.fluffybean.gay">Home</a></p>
|
||||
<hr>
|
||||
<p class="btn alert-default"><a href="https://superdupersecteteuploadtest.fluffybean.gay/upload.php">Upload</a></p>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
13
upload.php
13
upload.php
|
|
@ -13,19 +13,18 @@
|
|||
<div class="upload-root">
|
||||
<form class="flex-down between" method="POST" action="upload.php" enctype="multipart/form-data">
|
||||
<input class="btn alert-default" type="file" name="image" placeholder="select image UwU">
|
||||
<hr class="space-small">
|
||||
<input class="btn" type="text" name="alt" placeholder="Description/Alt for image">
|
||||
<hr class="space-small">
|
||||
<span class="space-bottom"></span>
|
||||
<input class="btn alert-default" type="text" name="alt" placeholder="Description/Alt for image">
|
||||
<span class="space-bottom"></span>
|
||||
<button class="btn alert-default" type="submit" name="upload">Upload Image</button>
|
||||
<hr class="space-small">
|
||||
</form>
|
||||
<?php
|
||||
if ($_GET["r"] == "success") {
|
||||
echo "<p class='alert alert-high'>Your Image uploaded successfully!</p>";
|
||||
echo "<p class='alert alert-high space-top'>Your Image uploaded successfully!</p>";
|
||||
}elseif ($_GET["r"] == "fail") {
|
||||
echo "<p class='alert alert-low'>F, Upload failed</p>";
|
||||
echo "<p class='alert alert-low space-top'>F, Upload failed</p>";
|
||||
}elseif ($_GET["r"] == "nofile") {
|
||||
echo "<p class='alert alert-default'>No file lol</p>";
|
||||
echo "<p class='alert alert-default space-top'>No file lol</p>";
|
||||
}else{
|
||||
// echo "<p class='alert alert-default'>Select an image to upload</p>";
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue