a lot of changes

This commit is contained in:
Richard Mikloš 2024-01-25 20:40:16 +01:00
parent fdc0b7c5bc
commit 0a9983f56c
8 changed files with 83 additions and 6 deletions

@ -1,4 +1,12 @@
<!--PAGENAME=You have rights--> <!--PAGENAME=Hello, <template name="username">-->
<h2>Welcome</h2> <!--PAGESTYLE=/styles/pages/admin/style.css-->
<p>Logged in as an admin: <template name="username"></p>
<template name="gravatar_image"> <header class="admin-index-header">
<div class="admin-index-header-text" id="headerText">
<h1 class="admin fade-in">Hello,</h1>
<h2 class="admin-index-h2 fade-in">Welcome back, Admin <span class="outlined-text"><template name="username"></template></span></h2>
</div>
</header>
<script src="/scripts/pages/admin/main.js" defer></script>

@ -31,6 +31,8 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
} }
?> ?>
<!--PAGENAME=Login-->
<h2>Login</h2> <h2>Login</h2>
<form action="" method="post"> <form action="" method="post">
<input type="email" name="email" id="email-field" placeholder="E-Mail" required> <input type="email" name="email" id="email-field" placeholder="E-Mail" required>

@ -1,3 +1,6 @@
<!--PAGENAME=Register-->
<h2>Register</h2> <h2>Register</h2>
<form action="register.php" method="post"> <form action="register.php" method="post">
<input type="text" name="username" id="username-field" pattern=".{3,32}" placeholder="Username" required> <input type="text" name="username" id="username-field" pattern=".{3,32}" placeholder="Username" required>

@ -1,5 +1,6 @@
<!--PAGENAME=Hello, <template name="username">--> <!--PAGENAME=Hello, <template name="username">-->
<!--PAGESTYLE=/styles/pages/user/style.css--> <!--PAGESTYLE=/styles/pages/user/style.css-->
<header class="user-index-header"> <header class="user-index-header">
<div class="user-index-header-text" id="headerText"> <div class="user-index-header-text" id="headerText">
<h1 class="user-index-h1 fade-in">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1> <h1 class="user-index-h1 fade-in">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1>
@ -8,4 +9,4 @@
</header> </header>
<script src="/scripts/pages/user/main.js" defer></script> <script src="/scripts/pages/admin/main.js" defer></script>

@ -0,0 +1,24 @@
document.addEventListener('DOMContentLoaded', function () {
var h1 = document.querySelector('.admin-index-h1');
var h2 = document.querySelector('.admin-index-h2');
// Initial styles for fade-in effect
h1.style.opacity = '0';
h1.style.transform = 'translateX(-35px)';
h2.style.opacity = '0';
h2.style.transform = 'translateX(-35px)';
// Trigger the reflow to restart the CSS animation
void h1.offsetWidth;
void h2.offsetWidth;
// Apply the fade-in effect
h1.style.transition = 'opacity 0.8s ease, transform 0.6s ease';
h1.style.opacity = '1';
h1.style.transform = 'translateX(0)';
h2.style.transition = 'opacity 0.8s ease, transform 0.6s ease';
h2.style.opacity = '1';
h2.style.transform = 'translateX(0)';
});

@ -68,6 +68,7 @@ nav ul .links {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 20px; font-size: 20px;
gap: 2.5rem;
} }
nav ul li { nav ul li {

@ -0,0 +1,38 @@
body {
height: 200vh !important;
}
.admin-index-header-text {
width: 80%;
margin: auto;
text-align: left;
padding: 0;
}
.admin-index-h1 {
font-size: 4rem;
text-align: left;
}
.admin-index-h2 {
font-size: 3.3rem;
text-align: left;
}
.outlined-text {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2.2px #8c00ff;
}
.admin-index-h1,
.admin-index-h2 {
opacity: 0;
transform: translateX(-35px);
transition: opacity 0.8s ease, transform 0.6s ease;
}
.fade-in {
opacity: 1;
transform: translateX(0);
}

@ -3,7 +3,7 @@
<li><a href="/settings"><i class="ri-settings-4-fill"></i></a></li> <li><a href="/settings"><i class="ri-settings-4-fill"></i></a></li>
<div class="links"> <div class="links">
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
<li><span class="pfp"><i class="ri-question-fill"></i></span></li> <li><a href="/" class="pfp"><i class="ri-question-fill"></i></a></li>
</div> </div>
</ul> </ul>
</nav> </nav>