Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-21 19:04:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

New alert system

Browse source
This commit is contained in:
Michał Gdula 2022-08-01 14:09:53 +01:00
parent 41667bff0a
commit 9fd958648b
9 changed files with 141 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

20
account/login.php
View file

@ -91,6 +91,18 @@
} }
?> ?>
<div class="alert-banner">
<?php
if (isset($error)) {
echo notify($error, "low");
}
if (isset($success)) {
echo notify($success, "hight");
}
?>
<script src='../scripts/alert.js'></script>
</div>
<div class="login-root default-window"> <div class="login-root default-window">
<h2 class="space-bottom">Login</h2> <h2 class="space-bottom">Login</h2>
<p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p> <p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
@ -99,14 +111,6 @@
<input class="btn alert-default space-bottom-large" type="password" name="password" placeholder="Password"> <input class="btn alert-default space-bottom-large" type="password" name="password" placeholder="Password">
<button class="btn alert-high" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button> <button class="btn alert-high" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button>
</form> </form>
<?php
if (isset($error)) {
echo "<p class='alert alert-low space-top'>".$error."</p>";
}
if (isset($success)) {
echo "<p class='alert alert-high space-top'>".$success."</p>";
}
?>
<a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a> <a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
</div> </div>

14
account/password-reset.php
View file

@ -74,6 +74,15 @@
} }
?> ?>
<div class="alert-banner">
<?php
if (isset($error)) {
echo notify($error, "low");
}
?>
<script src='../scripts/alert.js'></script>
</div>
<div class="password-reset-root default-window"> <div class="password-reset-root default-window">
<h2 class="space-bottom">Reset Password</h2> <h2 class="space-bottom">Reset Password</h2>
<p class="space-bottom">After reset, you will be kicked out to login again</p> <p class="space-bottom">After reset, you will be kicked out to login again</p>
@ -82,11 +91,6 @@
<input class="btn alert-default space-bottom" type="password" name="confirm_password" placeholder="Confirm Password"> <input class="btn alert-default space-bottom" type="password" name="confirm_password" placeholder="Confirm Password">
<button class="btn alert-low" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button> <button class="btn alert-low" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button>
</form> </form>
<?php
if (isset($error)) {
echo "<p class='alert alert-low space-top'>".$error."</p>";
}
?>
</div> </div>
<?php <?php

20
account/signup.php
View file

@ -155,6 +155,18 @@
} }
?> ?>
<div class="alert-banner">
<?php
if (isset($error)) {
echo notify($error, "low");
}
if (isset($success)) {
echo notify($success, "hight");
}
?>
<script src='../scripts/alert.js'></script>
</div>
<div class="signup-root default-window"> <div class="signup-root default-window">
<h2 class="space-bottom">Make account</h2> <h2 class="space-bottom">Make account</h2>
<p class="space-bottom">And amazing things happened here...</p> <p class="space-bottom">And amazing things happened here...</p>
@ -164,14 +176,6 @@
<input class="btn alert-default space-bottom-large" type="password" name="confirm_password" placeholder="Re-enter Password"> <input class="btn alert-default space-bottom-large" type="password" name="confirm_password" placeholder="Re-enter Password">
<input class="btn alert-default space-bottom-large" type="text" name="token" placeholder="Invite Code"> <input class="btn alert-default space-bottom-large" type="text" name="token" placeholder="Invite Code">
<button class="btn alert-high" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button> <button class="btn alert-high" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button>
<?php
if (isset($error)) {
echo "<p class='alert alert-low space-top'>".$error."</p>";
}
if (isset($success)) {
echo "<p class='alert alert-high space-top'>".$success."</p>";
}
?>
</form> </form>
</div> </div>

13
css/master.css
View file

@ -315,6 +315,18 @@ body {
/* /*
-=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/ */
.alert-banner {
margin: 0; padding: 0;
max-width: 621px; width: calc(100% - 2rem);
height: auto;
top: 1rem; left: 50%;
transform: translateX(-50%);
position: fixed; z-index: 9999999;
}
.alert { .alert {
padding: 1rem; padding: 1rem;
@ -328,6 +340,7 @@ body {
outline: 0.5rem solid var(--bg); outline: 0.5rem solid var(--bg);
} }
.alert-high { .alert-high {
background-color: var(--green); background-color: var(--green);
} }

20
image.php
View file

@ -16,19 +16,27 @@
<meta property="og:description" content="Only Legs, a gallery made and hosted by Fluffy"> <meta property="og:description" content="Only Legs, a gallery made and hosted by Fluffy">
</head> </head>
<body> <body>
<?php <?php include("ui/header.php"); ?>
include("ui/header.php");
<div class="alert-banner">
<?php
/* /*
If theres a success in updating the image, If theres a success in updating the image,
it'll let the user know it'll let the user know
*/ */
if ($_GET["update"] == "success") { if ($_GET["update"] == "success") {
echo "<p class='alert alert-high space-bottom-large'>Information updated</p>"; echo notify("Information updated", "high");
} elseif ($_GET["update"] == "error") { } elseif ($_GET["update"] == "error") {
echo "<p class='alert alert-default space-bottom-large'>Something went fuckywucky, please try later</p>"; echo notify("Something went fuckywucky, please try later", "default");
} }
if ($_GET["del"] == "fail") {
echo notify("Failed to delete image", "low");
}
?>
<script src='scripts/alert.js'></script>
</div>
<?php
// If ID present pull all image data // If ID present pull all image data
if (isset($_GET['id'])) { if (isset($_GET['id'])) {
$image = get_image_info($conn, $_GET['id']); $image = get_image_info($conn, $_GET['id']);
@ -107,7 +115,7 @@
} }
header("Location:index.php?del=true&id=".$image['id']); header("Location:index.php?del=true&id=".$image['id']);
} else { } else {
$error = "Could not delete image"; header("Location: image.php?id=".$image['id']."&del=fail>");
} }
} }
@ -184,7 +192,7 @@
} }
// Clean input // Clean input
$tags_string = clean(trim($_POST['add_tags'])); $tags_string = tag_clean(trim($_POST['add_tags']));
// getting ready forSQL asky asky // getting ready forSQL asky asky
$sql = "UPDATE swag_table SET tags=? WHERE id=?"; $sql = "UPDATE swag_table SET tags=? WHERE id=?";

22
index.php
View file

@ -10,19 +10,27 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
</head> </head>
<body> <body>
<?php <?php include("ui/header.php"); ?>
include("ui/header.php");
<div class="alert-banner">
<?php
/*
If theres a success in updating the image,
it'll let the user know
*/
// Deletion toast // Deletion toast
if ($_GET["del"] == "true") { if ($_GET["del"] == "true") {
echo "<p class='alert alert-high space-bottom'>Successfully deleted image: ".$_GET['id']."</p>"; echo notify("Successfully deleted image: ".$_GET['id'], "high");
} }
// Account toast // Account toast
if ($_GET["login"] == "success") { if ($_GET["login"] == "success") {
echo "<p class='alert alert-high space-bottom'>O hi ".$_SESSION['username']."</p>"; echo notify("O hi ".$_SESSION['username'], "high");
} }
?>
<script src='scripts/alert.js'></script>
</div>
<?php
// Show search // Show search
if ($_GET["srch"] == "show") { if ($_GET["srch"] == "show") {
$header = "Search for a tags!"; $header = "Search for a tags!";
@ -42,12 +50,12 @@
unset($header, $content, $action); unset($header, $content, $action);
// Clean input // Clean input
$tags_string = clean(trim($_POST['search'])); $tags_string = tag_clean(trim($_POST['search']));
header("Location:https://superdupersecteteuploadtest.fluffybean.gay?q=".$tags_string); header("Location:https://superdupersecteteuploadtest.fluffybean.gay?q=".$tags_string);
} }
if (isset($_GET["q"])) { if (isset($_GET["q"])) {
echo "<p class='alert alert-high space-bottom'>Search results for: ".$_GET['q']."</p>"; echo "<p class='alert alert-default space-bottom'>Search results for: ".$_GET['q']."</p>";
} }
?> ?>

5
scripts/alert.js Normal file
View file

@ -0,0 +1,5 @@
let alertClose = document.querySelectorAll(".alert");
function closeAlert(aaaa) {
aaaa.closest(".alert").style.display="none";
};

34
ui/functions.php
View file

@ -151,4 +151,38 @@ function flyout($header, $content, $action) {
echo "<button class='btn alert-default space-top flyout-close'>Close</button> echo "<button class='btn alert-default space-top flyout-close'>Close</button>
</div>"; </div>";
} }
/*
Notification of an action done, takes in min 3 inputs:
Text is the text that shows up on the notification
Takes in string input
Level is the level of the notification
high is a good response or the colour green
low is a bad response or the colour red
default is a neutral response or the colour black/gray
returns notification html including classes
===== Editors note ==================================
I made this so I didn't have to remake the html
portion of the notification, it was annoying.
This also allows for expanding the system later on!
=====================================================
*/
function notify($text, $level) {
if ($level == "high") {
$text_string = "<p class='alert alert-high space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
} elseif ($level == "low") {
$text_string = "<p class='alert alert-low space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
} elseif ($level == "default") {
$text_string = "<p class='alert alert-default space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
} else {
$text_string = "<p class='alert alert-default space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
}
return $text_string;
}
?> ?>

20
upload.php
View file

@ -69,6 +69,18 @@
} }
?> ?>
<div class="alert-banner">
<?php
if (isset($error)) {
echo notify($error, "low");
}
if (isset($success)) {
echo notify($success, "hight");
}
?>
<script src='scripts/alert.js'></script>
</div>
<div class="upload-root default-window"> <div class="upload-root default-window">
<h2 class="space-bottom">Upload image</h2> <h2 class="space-bottom">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>
@ -77,14 +89,6 @@
<input class="btn alert-default space-bottom-large" type="text" name="alt" placeholder="Description/Alt for image"> <input class="btn alert-default space-bottom-large" type="text" name="alt" placeholder="Description/Alt for image">
<button class="btn alert-high" type="submit" name="upload"><img class="svg" src="assets/icons/upload.svg">Upload Image</button> <button class="btn alert-high" type="submit" name="upload"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
</form> </form>
<?php
if (isset($error)) {
echo "<p class='alert alert-low space-top'>".$error."</p>";
}
if (isset($success)) {
echo "<p class='alert alert-high space-top'>".$success."</p>";
}
?>
</div> </div>
<?php <?php