From 0a9983f56c6796c8feb76870653cd5d74bffec64 Mon Sep 17 00:00:00 2001
From: AkisYTB3 <akisytbsteamy@gmail.com>
Date: Thu, 25 Jan 2024 20:40:16 +0100
Subject: [PATCH] a lot of changes

---
 pages/admin/index.html       | 16 +++++++++++----
 pages/global/login.html      |  2 ++
 pages/global/register.html   |  3 +++
 pages/user/index.html        |  3 ++-
 scripts/pages/admin/main.js  | 24 +++++++++++++++++++++++
 styles/global.css            |  1 +
 styles/pages/admin/style.css | 38 ++++++++++++++++++++++++++++++++++++
 templates/navigation.html    |  2 +-
 8 files changed, 83 insertions(+), 6 deletions(-)
 create mode 100644 scripts/pages/admin/main.js
 create mode 100644 styles/pages/admin/style.css

diff --git a/pages/admin/index.html b/pages/admin/index.html
index 8072345..2eee200 100644
--- a/pages/admin/index.html
+++ b/pages/admin/index.html
@@ -1,4 +1,12 @@
-<!--PAGENAME=You have rights-->
-<h2>Welcome</h2>
-<p>Logged in as an admin: <template name="username"></p>
-<template name="gravatar_image">
\ No newline at end of file
+<!--PAGENAME=Hello, <template name="username">-->
+<!--PAGESTYLE=/styles/pages/admin/style.css-->
+
+<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>
\ No newline at end of file
diff --git a/pages/global/login.html b/pages/global/login.html
index 1de577c..f66ef4c 100644
--- a/pages/global/login.html
+++ b/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>
diff --git a/pages/global/register.html b/pages/global/register.html
index 9cd9042..cf0231a 100644
--- a/pages/global/register.html
+++ b/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>
diff --git a/pages/user/index.html b/pages/user/index.html
index c0dbba1..78f55fb 100644
--- a/pages/user/index.html
+++ b/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>
\ No newline at end of file
+<script src="/scripts/pages/admin/main.js" defer></script>
\ No newline at end of file
diff --git a/scripts/pages/admin/main.js b/scripts/pages/admin/main.js
new file mode 100644
index 0000000..331c227
--- /dev/null
+++ b/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)';
+});
diff --git a/styles/global.css b/styles/global.css
index 98491d7..c74c547 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -68,6 +68,7 @@ nav ul .links {
     display: flex;
     flex-direction: row;
     font-size: 20px;
+    gap: 2.5rem;
 }
 
 nav ul li {
diff --git a/styles/pages/admin/style.css b/styles/pages/admin/style.css
new file mode 100644
index 0000000..c9a4957
--- /dev/null
+++ b/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);
+}
diff --git a/templates/navigation.html b/templates/navigation.html
index 38f36f7..231a392 100644
--- a/templates/navigation.html
+++ b/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>
\ No newline at end of file