Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-06-09 11:53:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Removed fullscreen close button

Browse source 
Fixed button colours
Added primary/good options for some assets
This commit is contained in:
Michał Gdula 2022-11-10 11:27:40 +00:00
parent bd7765b376
commit a6b9ab0e5a
10 changed files with 195 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

24
account.php
View file

@ -80,7 +80,7 @@
<h3>Profile Picture</h3> <h3>Profile Picture</h3>
<form id="pfpForm" method="POST" enctype="multipart/form-data"> <form id="pfpForm" method="POST" enctype="multipart/form-data">
<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU"> <input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
<button id="pfpSubmit" class="btn btn-good btn-icon" type="submit"><img class="svg" src="assets/icons/upload.svg"></button> <button id="pfpSubmit" class="btn btn-primary btn-icon" type="submit"><img class="svg" src="assets/icons/upload.svg"></button>
</form> </form>
<script> <script>
$("#pfpForm").submit(function(event) { $("#pfpForm").submit(function(event) {
@ -193,9 +193,7 @@
$sql_start = microtime(true); $sql_start = microtime(true);
?> ?>
<div class="sanity-check defaultDecoration defaultSpacing defaultFonts"> <div class="sanity-check defaultDecoration defaultSpacing defaultFonts">
<h2>Website</h2> <h2>Invite Codes</h2>
<h3>Invite Codes</h3>
<div style="display: flex; flex-direction: column; gap: 0.5rem;" id="tokenList"> <div style="display: flex; flex-direction: column; gap: 0.5rem;" id="tokenList">
<?php <?php
$token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0"); $token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0");
@ -204,7 +202,7 @@
?> ?>
<div style="display: flex; flex-direction: row; gap: 0.5rem;"> <div style="display: flex; flex-direction: row; gap: 0.5rem;">
<button onclick='copyCode(this)' class='btn btn-neutral btn-code'><?php echo $token['code']; ?></button> <button onclick='copyCode(this)' class='btn btn-neutral btn-code'><?php echo $token['code']; ?></button>
<button onclick='regenerateCode("<?php echo $token["code"]; ?>", this)' class='btn btn-good btn-icon'><img src="assets/icons/arrow-clockwise.svg"></button> <button onclick='regenerateCode("<?php echo $token["code"]; ?>", this)' class='btn btn-primary btn-icon'><img src="assets/icons/arrow-clockwise.svg"></button>
<button onclick='deleteCode(<?php echo $token["id"]; ?>)' class='btn btn-bad btn-icon'><img src="assets/icons/cross.svg"></button> <button onclick='deleteCode(<?php echo $token["id"]; ?>)' class='btn btn-bad btn-icon'><img src="assets/icons/cross.svg"></button>
</div> </div>
<?php <?php
@ -216,7 +214,7 @@
} }
?> ?>
</div> </div>
<button onclick='generateCode()' class='btn btn-good'>Generate code</button> <button onclick='generateCode()' class='btn btn-primary'>Generate code</button>
<script> <script>
function refreshList() { function refreshList() {
$("#tokenList").load("app/account/token.php", { $("#tokenList").load("app/account/token.php", {
@ -305,8 +303,11 @@
}); });
} }
</script> </script>
</div>
<br><h3>Admin</h3> <div class="sanity-check defaultDecoration defaultSpacing defaultFonts">
<h2>Admin</h2>
<p>Check gallery activity, login attemps, auto timeouts and more!</p>
<div class="tabs"> <div class="tabs">
<button class="btn btn-neutral tablinks" onclick="openTab(event, 'logs')">Logs</button> <button class="btn btn-neutral tablinks" onclick="openTab(event, 'logs')">Logs</button>
<button class="btn btn-neutral tablinks" onclick="openTab(event, 'bans')">Bans</button> <button class="btn btn-neutral tablinks" onclick="openTab(event, 'bans')">Bans</button>
@ -530,11 +531,16 @@
evt.currentTarget.className += " active-tab"; evt.currentTarget.className += " active-tab";
} }
</script> </script>
</div>
<div class="sanity-check warningDecoration defaultSpacing defaultFonts">
<h2>Sanity check</h2>
<p>You can check the stability of your gallery here, this is still being tested to running
autofix is only reccomended for people who like to live on the edge.</p>
<br><h3>Sanity check</h3>
<div id='sanityCheck'></div> <div id='sanityCheck'></div>
<button class='btn btn-good' onclick='sanityCheck(this)'>Run check</button> <button class='btn btn-bad' onclick='sanityCheck(this)'>Run check</button>
<script> <script>
function sanityCheck(thisButton) { function sanityCheck(thisButton) {
thisButton.innerHTML = "<img src='assets/icons/circle-notch.svg' class='svg loading'> Running..."; thisButton.innerHTML = "<img src='assets/icons/circle-notch.svg' class='svg loading'> Running...";

16
app/sanity/check/_database.php
View file

@ -85,24 +85,28 @@ if (defined('ROOT') && $_SESSION['id'] == 1) {
return $results; return $results;
} }
$table_list = array('images', 'users', 'groups', 'tokens', 'logs', 'bans'); $table_list = array('images', 'users', 'groups', 'tokens', 'logs', 'bans', 'test');
foreach ($table_list as $table) { foreach ($table_list as $table) {
$error_count = 0; $error_type = array();
$get_table = check_table($conn, $table); $get_table = check_table($conn, $table);
if ($get_table != false) { if ($get_table != false) {
foreach ($table_templates[$table] as $key => $value) { foreach ($table_templates[$table] as $key => $value) {
if (!empty(array_diff($get_table[$key], $value))) { if (!empty(array_diff($get_table[$key], $value))) {
$error_count += 1; $error_type[] = $table;
foreach (array_diff($get_table[$key], $value) as $value) {
$error_type[$table][] = $value;
}
} }
} }
if ($error_count > 0) { if (!empty($error_type)) {
$results[] = array( $results[] = array(
'type'=>'warning', 'type'=>'warning',
'message'=> 'Table '.$table.' is not setup correctly, '.$error_count.' errors found', 'message'=> 'Table "'.$table.'" is not setup correctly, the errors you see below may seem crypic,
'fix'=>'auto' and thats normal because of the shit way I made this:<br><br>'.implode(", ",$error_type[$table]),
'fix'=>'manual'
); );
} }

108
css/main.css
View file

@ -27,7 +27,7 @@
--alert: #d8a657; --alert: #d8a657;
--success: #8c977d; --success: #8c977d;
--neutral: #121212; --neutral: #121212;
--shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); --shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
--rad: 0.4rem; --rad: 0.4rem;
--border: #8c977d 0.2rem solid; --border: #8c977d 0.2rem solid;
} }
@ -42,7 +42,7 @@ nav {
color: #e8e3e3; color: #e8e3e3;
border-radius: 0.4rem; border-radius: 0.4rem;
border: #8c977d 0.2rem solid; border: #8c977d 0.2rem solid;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -122,17 +122,15 @@ nav .btn {
@media (max-width: 550px) { @media (max-width: 550px) {
nav { nav {
margin: 0; margin: 0;
padding-bottom: 1rem; padding-bottom: 2rem;
position: fixed; position: fixed;
top: auto; top: auto;
bottom: 0; bottom: -1rem;
left: 0; left: 0;
right: 0; right: 0;
border: none; border: none;
border-top: #8c977d 0.2rem solid; border-top: #8c977d 0.2rem solid;
border-radius: 0; border-radius: 0;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
} }
nav .svg { nav .svg {
margin: 0; margin: 0;
@ -178,7 +176,7 @@ nav .btn {
color: #e8e3e3; color: #e8e3e3;
border-radius: 0.4rem; border-radius: 0.4rem;
border: #8c977d 0.2rem solid; border: #8c977d 0.2rem solid;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
} }
.warningDecoration { .warningDecoration {
@ -186,7 +184,7 @@ nav .btn {
color: #e8e3e3; color: #e8e3e3;
border-radius: 0.4rem; border-radius: 0.4rem;
border: #b66467 0.2rem solid; border: #b66467 0.2rem solid;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
} }
.defaultFonts h1, .defaultFonts h1,
@ -244,7 +242,7 @@ nav .btn {
} }
.gallery-item:hover { .gallery-item:hover {
transform: scale(1.15) rotate(5deg); transform: scale(1.15) rotate(5deg);
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
z-index: 9; z-index: 9;
} }
.gallery-item:active { .gallery-item:active {
@ -328,8 +326,8 @@ nav .btn {
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
.fullscreen-image { .fullscreen-image {
width: 100vw; width: 110vw;
height: 100vh; height: 110vh;
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -343,39 +341,16 @@ nav .btn {
opacity: 0; opacity: 0;
} }
.fullscreen-image img { .fullscreen-image img {
max-width: 95%; max-width: calc(95% - 10rem);
max-height: 95%; max-height: calc(95% - 10rem);
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
border-radius: 0.4rem; border-radius: 0.4rem;
box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
z-index: 1; z-index: 1;
} }
.fullscreen-image button {
padding: 0.25rem;
width: 2rem;
height: 2rem;
position: absolute;
top: 1.25rem;
right: 1.25rem;
display: block;
box-sizing: border-box;
border: none;
border-radius: 3px;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #121212;
z-index: 2;
}
.fullscreen-image button img {
width: 1.5rem;
display: block;
}
.fullscreen-image button:hover {
outline: #e8e3e3 0.2rem solid;
color: #e8e3e3;
cursor: pointer;
}
.image-container { .image-container {
margin: 1rem 0 2rem 0; margin: 1rem 0 2rem 0;
@ -717,12 +692,47 @@ nav .btn {
.upload-root > img { .upload-root > img {
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
max-height: 15rem; height: 15rem;
border-radius: 3px;
display: none;
flex-direction: column;
}
.upload-root > #imagePreviewBlock {
margin: 0 auto;
max-width: 100%;
height: 15rem;
-webkit-animation: uploadGradient 10s ease infinite;
animation: uploadGradient 10s ease infinite;
background: linear-gradient(-45rad, #000000, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
border-radius: 3px; border-radius: 3px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@-webkit-keyframes uploadGradient {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
@keyframes uploadGradient {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
/* /*
|------------------------------------------------------------- |-------------------------------------------------------------
| ACCOUNT | ACCOUNT
@ -1142,6 +1152,11 @@ a.btn {
background-image: linear-gradient(to top, #7f8b6f, #8c977d); background-image: linear-gradient(to top, #7f8b6f, #8c977d);
} }
.btn-primary {
background-color: #8c977d;
background-image: linear-gradient(to top, #7f8b6f, #8c977d);
}
.btn-neutral { .btn-neutral {
background-color: #121212; background-color: #121212;
background-image: linear-gradient(to top, #111111, #121212); background-image: linear-gradient(to top, #111111, #121212);
@ -1167,6 +1182,11 @@ a.btn {
border-radius: 3px; border-radius: 3px;
} }
.alert-good {
border-color: #8c977d;
background-image: linear-gradient(120deg, rgba(140, 151, 125, 0.3), rgba(21, 21, 21, 0));
}
.alert-bad { .alert-bad {
border-color: #b66467; border-color: #b66467;
background-image: linear-gradient(120deg, rgba(182, 100, 103, 0.3), rgba(21, 21, 21, 0)); background-image: linear-gradient(120deg, rgba(182, 100, 103, 0.3), rgba(21, 21, 21, 0));
@ -1221,6 +1241,13 @@ a.btn {
.badge.badge-primary.link:hover { .badge.badge-primary.link:hover {
color: #8c977d; color: #8c977d;
} }
.badge.badge-good {
background: rgba(140, 151, 125, 0.3);
border: #8c977d 0.2rem solid;
}
.badge.badge-good.link:hover {
color: #8c977d;
}
.badge.badge-critical { .badge.badge-critical {
background: rgba(182, 100, 103, 0.3); background: rgba(182, 100, 103, 0.3);
border: #b66467 0.2rem solid; border: #b66467 0.2rem solid;
@ -1306,7 +1333,8 @@ br {
*/ */
a.link { a.link {
display: inline; display: inline;
text-decoration: underline; -webkit-text-decoration: underline 0.2rem solid #8c977d;
text-decoration: underline 0.2rem solid #8c977d;
} }
a.link:hover { a.link:hover {
color: #8c977d; color: #8c977d;
@ -1330,7 +1358,7 @@ a.link:hover {
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-radius: 3px; border-radius: 3px;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 10px rgba(21, 21, 21, 0.4);
transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1); transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
} }
#back-to-top:hover { #back-to-top:hover {

29
css/main.scss
View file

@ -182,6 +182,15 @@ a.btn {
} }
.btn-good { .btn-good {
background-color: $success;
background-image: linear-gradient(
to top,
darken($success, 5%),
$success
);
}
.btn-primary {
background-color: $page-accent; background-color: $page-accent;
background-image: linear-gradient( background-image: linear-gradient(
to top, to top,
@ -225,6 +234,12 @@ a.btn {
} }
} }
.alert-good {
border-color: $page-accent;
background-image: linear-gradient(120deg, rgba($page-accent, 0.3),rgba($bg, 0)
);
}
.alert-bad { .alert-bad {
border-color: $warning; border-color: $warning;
background-image: linear-gradient(120deg, rgba($warning, 0.3), rgba($bg, 0)); background-image: linear-gradient(120deg, rgba($warning, 0.3), rgba($bg, 0));
@ -236,12 +251,8 @@ a.btn {
} }
.alert-good { .alert-good {
border-color: $page-accent; border-color: $success;
background-image: linear-gradient( background-image: linear-gradient(120deg, rgba($success, 0.3), rgba($bg, 0));
120deg,
rgba($page-accent, 0.3),
rgba($bg, 0)
);
} }
.alert-box { .alert-box {
@ -300,6 +311,10 @@ a.btn {
@include badge($page-accent); @include badge($page-accent);
} }
&.badge-good {
@include badge($success);
}
&.badge-critical { &.badge-critical {
@include badge($red); @include badge($red);
} }
@ -381,7 +396,7 @@ br {
*/ */
a.link { a.link {
display: inline; display: inline;
text-decoration: underline; text-decoration: underline $border-thickness solid $page-accent;
&:hover { &:hover {
color: $page-accent; color: $page-accent;

108
css/scss/_body.scss
View file

@ -176,8 +176,8 @@
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
.fullscreen-image { .fullscreen-image {
width: 100vw; width: 110vw;
height: 100vh; height: 110vh;
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -194,60 +194,22 @@
display: none; // Automatically hidden, revealed on fullscreen display: none; // Automatically hidden, revealed on fullscreen
opacity: 0; // expose opacity: 0; // expose
img { img {
max-width: 95%; max-width: calc(95% - 10rem);
max-height: 95%; max-height: calc(95% - 10rem);
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
border-radius: $rad; border-radius: $rad;
box-shadow: $shadow;
z-index: +1; z-index: +1;
} }
button {
padding: 0.25rem;
width: 2rem;
height: 2rem;
position: absolute;
top: 1.25rem;
right: 1.25rem;
display: block;
box-sizing: border-box;
border: none;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: $black;
z-index: +2;
img {
width: 1.5rem;
display: block;
}
&:hover {
outline: $white 0.2rem solid;
color: $fg;
cursor: pointer;
}
}
} }
.image-container { .image-container {
@ -700,20 +662,48 @@
| UPLOAD | UPLOAD
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
.upload-root > img { .upload-root {
margin: 0 auto; > img {
margin: 0 auto;
max-width: 100%;
max-height: 15rem; max-width: 100%;
height: 15rem;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem); @if calc($rad - 0.5rem) > 0 {
} @else { border-radius: calc($rad - 0.5rem);
border-radius: 3px; } @else {
border-radius: 3px;
}
display: none;
flex-direction: column;
} }
display: flex; > #imagePreviewBlock {
flex-direction: column; margin: 0 auto;
max-width: 100%;
height: 15rem;
animation: uploadGradient 10s ease infinite;
background: linear-gradient(-45rad, #000000, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
display: flex;
flex-direction: column;
}
}
@keyframes uploadGradient {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
} }
/* /*

7
css/scss/_navigation.scss
View file

@ -101,11 +101,11 @@ nav {
@media (max-width: 550px) { @media (max-width: 550px) {
nav { nav {
margin: 0; margin: 0;
padding-bottom: 1rem; padding-bottom: 2rem;
position: fixed; position: fixed;
top: auto; top: auto;
bottom: 0; bottom: -1rem;
left: 0; left: 0;
right: 0; right: 0;
@ -113,11 +113,8 @@ nav {
border-top: $border; border-top: $border;
border-radius: 0; border-radius: 0;
backdrop-filter: blur(16px);
.svg { .svg {
margin: 0; margin: 0;
display: block; display: block;
} }
} }

4
css/scss/_variables.scss
View file

@ -14,13 +14,13 @@ $purple: #a988b0;
$black: #121212; $black: #121212;
$white: #e8e3e3; $white: #e8e3e3;
$page-accent: #8c977d; $page-accent: $green;
$warning: $red; $warning: $red;
$alert: $orange; $alert: $orange;
$success: $green; $success: $green;
$neutral: $black; $neutral: $black;
$shadow: 6px 6px 2px #15151566; $shadow: 6px 6px 10px #15151566;
$rad: 0.4rem; $rad: 0.4rem;
$border-thickness: 0.2rem; $border-thickness: 0.2rem;

2
group.php
View file

@ -161,7 +161,7 @@
} }
?> ?>
<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy link</button> <button class='btn btn-primary' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy link</button>
<script> <script>
function copyLink() { function copyLink() {
navigator.clipboard.writeText(window.location.href); navigator.clipboard.writeText(window.location.href);

14
image.php
View file

@ -58,10 +58,7 @@
unset($_SESSION['msg']); unset($_SESSION['msg']);
} }
echo "<div class='fullscreen-image'> echo "<div class='fullscreen-image'><img></div>";
<button onclick='closeFullScreen()'><img src='assets/icons/cross.svg'></button>
<img>
</div>";
if (is_file("usr/images/previews/".$image['imagename'])) { if (is_file("usr/images/previews/".$image['imagename'])) {
echo "<div class='image-container'> echo "<div class='image-container'>
@ -78,6 +75,11 @@
?> ?>
<script> <script>
$('.fullscreen-image').click(function(e) {
//if (e.target !== this) return;
closeFullScreen();
});
function fullScreen() { function fullScreen() {
document.querySelector(".preview-button").style.display = "none"; document.querySelector(".preview-button").style.display = "none";
document.querySelector("html").style.overflow = "hidden"; document.querySelector("html").style.overflow = "hidden";
@ -171,7 +173,7 @@
</div> </div>
</div> </div>
<!-- Download Image --> <!-- Download Image -->
<a id='download' class='btn btn-good' href='<?php echo "usr/images/".$image['imagename']; ?>' download='<?php echo $image['imagename']; ?>'><img class='svg' src='assets/icons/download.svg'>Download image</a> <a id='download' class='btn btn-primary' href='<?php echo "usr/images/".$image['imagename']; ?>' download='<?php echo $image['imagename']; ?>'><img class='svg' src='assets/icons/download.svg'>Download image</a>
<script> <script>
$("#download").click(function() { $("#download").click(function() {
sniffleAdd("Info", "Image download started!", "var(--success)", "assets/icons/download.svg"); sniffleAdd("Info", "Image download started!", "var(--success)", "assets/icons/download.svg");
@ -179,7 +181,7 @@
</script> </script>
<!-- Copy link --> <!-- Copy link -->
<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button> <button class='btn btn-primary' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>
<script> <script>
function copyLink() { function copyLink() {
navigator.clipboard.writeText(window.location.href); navigator.clipboard.writeText(window.location.href);

21
upload.php
View file

@ -25,6 +25,7 @@
<h2>Upload image</h2> <h2>Upload image</h2>
<p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p> <p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
<img id="imagePreview" src=""> <img id="imagePreview" src="">
<span id="imagePreviewBlock"></span>
<br> <br>
<form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data"> <form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data">
<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU"> <input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
@ -32,14 +33,19 @@
<input id="alt" class="btn btn-neutral" placeholder="Description/Alt for image" type='text'> <input id="alt" class="btn btn-neutral" placeholder="Description/Alt for image" type='text'>
<input id="tags" class="btn btn-neutral" placeholder="Tags, seperated by spaces" type='text'> <input id="tags" class="btn btn-neutral" placeholder="Tags, seperated by spaces" type='text'>
<br> <br>
<button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button> <button id="submit" class="btn btn-primary" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
</form> </form>
<script> <script>
image.onchange = evt => { image.onchange = evt => {
const [file] = image.files const [file] = image.files
if (file) { if (file && file.src !== "") {
imagePreview.src = URL.createObjectURL(file); imagePreview.src = URL.createObjectURL(file);
} imagePreview.style.display = "flex";
document.getElementById("imagePreviewBlock").style.display = "none";
} else {
imagePreview.style.display = "none";
document.getElementById("imagePreviewBlock").style.display = "block";
}
} }
</script> </script>
</div> </div>
@ -77,6 +83,15 @@
processData: false, processData: false,
success: function (response) { success: function (response) {
$("#newSniff").html(response); $("#newSniff").html(response);
document.getElementById("imagePreview").style.display = "none";
document.getElementById("imagePreviewBlock").style.display = "block";
},
error: function (response) {
$("#newSniff").html(response);
document.getElementById("imagePreview").style.display = "none";
document.getElementById("imagePreviewBlock").style.display = "block";
} }
}); });