a lot of changes

pages/admin/index.html

@@ -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>

pages/global/login.html

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

pages/global/register.html

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

pages/user/index.html

@@ -1,5 +1,6 @@
 <!--PAGENAME=Hello, <template name="username">-->
 <!--PAGESTYLE=/styles/pages/user/style.css-->
+
 <header class="user-index-header">
     <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>
@@ -8,4 +9,4 @@
 </header>
 
 
-<script src="/scripts/pages/user/main.js" defer></script>
+<script src="/scripts/pages/admin/main.js" defer></script>

scripts/pages/admin/main.js

@@ -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)';
+});

styles/global.css

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

styles/pages/admin/style.css

@@ -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);
+}

templates/navigation.html

@@ -3,7 +3,7 @@
         <li><a href="/settings"><i class="ri-settings-4-fill"></i></a></li>
         <div class="links">
             <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>
     </ul>
 </nav>