Added "Top" button 👀

This commit is contained in:
Michał 2022-07-26 13:34:48 +01:00
parent d6c9951233
commit 4ab1b39650
12 changed files with 78 additions and 13 deletions

View file

@ -16,7 +16,7 @@
<h2>Account settings</h2>
<?php
if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
echo "<p>O hi ".$_SESSION["username"].".</p>";
echo "<p>O hi ".$_SESSION["username"].". This is pretty empty right now. But it wont be soon!</p>";
echo "<a class='btn alert-default space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/logout.php'><img class='svg' src='assets/icons/sign-out.svg'>Logout</a>";
} else {
echo "<p class='space-bottom-large'>You must be logged in to change your account settings!</p>";
@ -25,6 +25,9 @@
?>
</div>
<?php include("ui/footer.php"); ?>
<?php
include("ui/top.html");
include("ui/footer.html");
?>
</body>
</html>

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><polyline points="48 160 128 80 208 160" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>

After

Width:  |  Height:  |  Size: 304 B

View file

@ -190,3 +190,34 @@ p, a {
margin: 0 0 0.5rem 0;
font-family: "Fira Code", monospace;
}
/*
-=-=-= Back to top button =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
#back-to-top {
margin: 0; padding: 0.5rem;
position: fixed;
right: -2.5rem; bottom: 1rem;
object-position: center;
background-color: var(--bg);
border-radius: 50%;
box-shadow: var(--shadow);
transition: right 0.15s cubic-bezier(.19,1,.22,1);
}
#back-to-top:hover {
outline: 0.2rem solid var(--green);
}
#back-to-top * {
margin: 0; padding: 0;
width: 1.5rem; height: 1.5rem;
display: block;
object-position: center;
}

View file

@ -70,6 +70,9 @@
?>
</div>
<?php include("ui/footer.php"); ?>
<?php
include("ui/top.html");
include("ui/footer.html");
?>
</body>
</html>

View file

@ -143,9 +143,11 @@
} else {
}
?>
<?php include("ui/footer.php"); ?>
<?php
include("ui/top.html");
include("ui/footer.html");
?>
</body>
</html>

View file

@ -62,6 +62,9 @@
?>
</div>
<?php include("ui/footer.php"); ?>
<?php
include("ui/top.html");
include("ui/footer.html");
?>
</body>
</html>

View file

@ -94,7 +94,7 @@
<div class="login-root">
<h2 class="space-bottom">Login</h2>
<p class="space-bottom">This is still being worked on, so I ask you kindly to not try anything, thankies!</p>
<p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
<form class="flex-down between" method="POST" action="login.php" enctype="multipart/form-data">
<input class="btn alert-default space-bottom" type="text" name="username" placeholder="Username">
<input class="btn alert-default space-bottom-large" type="password" name="password" placeholder="Password">
@ -111,6 +111,9 @@
<a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/signup.php'><img class="svg" src="assets/icons/sign-in.svg">Need an account? Sign up!</a>
</div>
<?php include("ui/footer.php"); ?>
<?php
include("ui/top.html");
include("ui/footer.html");
?>
</body>
</html>

11
scripts/top.js Normal file
View file

@ -0,0 +1,11 @@
button = document.getElementById("back-to-top");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
button.style.right = "1rem";
} else {
button.style.right = "-2.5rem";
}
}

View file

@ -113,7 +113,7 @@
<div class="signup-root">
<h2 class="space-bottom">Make account</h2>
<p class="space-bottom">This is still being worked on, so I ask you kindly to not try anything, thankies!</p>
<p class="space-bottom">And amazing things happened here...</p>
<form class="flex-down between" method="POST" action="signup.php" enctype="multipart/form-data">
<input class="btn alert-default space-bottom-large" type="text" name="username" placeholder="Username">
<input class="btn alert-default space-bottom" type="password" name="password" placeholder="Password">
@ -131,6 +131,9 @@
</form>
</div>
<?php include("ui/footer.php"); ?>
<?php
include("ui/top.html");
include("ui/footer.html");
?>
</body>
</html>

View file

@ -3,7 +3,6 @@
<h3>Contact me</h3>
<a href="https://t.me/Fluffy_Bean">Telegram</a>
<a href="https://twitter.com/fluffybeanUwU">Twitter</a>
<a href="https://discord.com/users/317376266066067459">Discord</a>
<a href="https://github.com/Fluffy-Bean">GitHub</a>
</div>
<div class="footer-child center flex-down">
@ -17,6 +16,5 @@
<p>AAAAAAAA</p>
<p>*Internal screaming*</p>
<a href="https://gay.fluffybean.gay">My website!</a>
<a href="#">Go back up!</a>
</div>
</footer>

4
ui/top.html Normal file
View file

@ -0,0 +1,4 @@
<a id="back-to-top" href="#">
<img src="assets/icons/caret-up.svg">
</a>
<script src="scripts/top.js"></script>

View file

@ -91,6 +91,9 @@
?>
</div>
<?php include("ui/footer.php"); ?>
<?php
include("ui/top.html");
include("ui/footer.html");
?>
</body>
</html>