Test css

assets/style.css

@@ -207,64 +207,6 @@ ul.navpage_list {
     height: 1.5rem;
 }
 
-@media (max-width: 1050px) {
-
-    div#articleslist {
-        width: 100vw !important;
-        left: 0 !important;
-    }
-
-    #toggle_button {
-        display: flex;
-    }
-
-    #navsite_list {
-        display: none;
-        position: fixed;
-        flex-direction: column;
-        width: 100%;
-        text-align: center;
-    }
-
-    #navsite_list li {
-        text-align: center;
-    }
-
-    .navsite_item {
-        width: inherit;
-    }
-
-    ul.navpage_list {
-        border: 4px solid var(--pico-primary-hover) !important;
-        display: flex !important;
-        max-height: 200px !important;
-        width: inherit;
-        box-sizing: content-box;
-        transition-delay: .1s;
-    }
-    .navsite_item:not(:hover) .navpage_list {
-        transition-delay: .1s;
-        width: inherit;
-    }
-
-    /*noinspection CssUnusedSymbol*/
-    #navsite_list.active {
-        display: flex;
-        -moz-box-shadow: 0 20px 28px 0 var(--dimmer);
-        -webkit-box-shadow: 0 20px 28px 0 var(--dimmer);
-        background-color: var(--dimmer);
-        box-shadow: 0 20px 28px 0 var(--dimmer);
-        top: 80px;
-        text-align: center;
-    }
-
-    nav {
-        flex-direction: column;
-        align-items: center;
-        background-color: var(--dimmer);
-    }
-}
-
 #statusMessageContainer {
     position: fixed;
     top: 80px;
@@ -399,3 +341,75 @@ div#articleslist>article{
     width: 100%;
     height: 100%;
 }
+
+form.form-content {
+    display: flex;
+    flex-direction: row;
+}
+
+div.form-container {
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-width: 1050px) {
+
+    div#articleslist {
+        width: 100vw !important;
+        left: 0 !important;
+    }
+
+    #toggle_button {
+        display: flex;
+    }
+
+    #navsite_list {
+        display: none;
+        position: fixed;
+        flex-direction: column;
+        width: 100%;
+        text-align: center;
+    }
+
+    #navsite_list li {
+        text-align: center;
+    }
+
+    .navsite_item {
+        width: inherit;
+    }
+
+    ul.navpage_list {
+        border: 4px solid var(--pico-primary-hover) !important;
+        display: flex !important;
+        max-height: 200px !important;
+        width: inherit;
+        box-sizing: content-box;
+        transition-delay: .1s;
+    }
+    .navsite_item:not(:hover) .navpage_list {
+        transition-delay: .1s;
+        width: inherit;
+    }
+
+    /*noinspection CssUnusedSymbol*/
+    #navsite_list.active {
+        display: flex;
+        -moz-box-shadow: 0 20px 28px 0 var(--dimmer);
+        -webkit-box-shadow: 0 20px 28px 0 var(--dimmer);
+        background-color: var(--dimmer);
+        box-shadow: 0 20px 28px 0 var(--dimmer);
+        top: 80px;
+        text-align: center;
+    }
+
+    nav {
+        flex-direction: column;
+        align-items: center;
+        background-color: var(--dimmer);
+    }
+
+    form.form-content {
+        flex-direction: column;
+    }
+}

endpoints/meme.php

@@ -0,0 +1,12 @@
+<?php
+
+require_once "lib/meme.php";
+
+function endpoint($endpoint_data): array
+{
+
+    return match ($endpoint_data["action"]) {
+        "addMeme" => addMeme($endpoint_data['memetext'], $endpoint_data['imageid']),
+        default => ["Status" => "Fail", "message" => "Invalid action"],
+    };
+}

lib/meme.php

@@ -3,16 +3,39 @@
 function addMeme(string $memeText, int $imageID): bool
 {
     global $mysqli;
-    if(fileExists($imageID)){
+
-        $stmtMemeAdd = $mysqli->prepare('INSERT INTO Memes (AuthorID, TextContent, FileID) VALUES (?, ?, ?)');
+    if (isLoggedIn() && fileExists($imageID)) {
-        $stmtMemeAdd->bind_param('isi', $_SESSION['ID'], htmlspecialchars($memeText), $imageID);
+        $stmtMemeAdd = $mysqli->prepare('INSERT INTO Memes (AuthorID, Title, TextContent, FileID) VALUES (?, ?, ?)');
+        $stmtMemeAdd->bind_param('issi', $_SESSION['ID'], htmlspecialchars($memeText), $imageID);
         $stmtMemeAdd->execute();
         return true;
     }
     return false;
 }
 
-function renderMemeGallery() :string
+function renderMemeGallery(): string
 {
+    global $mysqli;
+    $stmtlist = $mysqli->prepare('SELECT Memes.ID, Memes.Title Memes.TextContent, Memes.CreatedAt, Files.Path, Files.Type, Users.Nickname FROM Memes INNER JOIN Users ON Memes.AuthorID = Users.ID INNER JOIN Files ON Memes.FileID = Files.ID');
+
+    // Execute the prepared statement
+    $stmtlist->execute();
+    $memeID = 0;
+    $title = "";
+    $textContent = "";
+    $filePath = "";
+    $fileType = "";
+    $userNickname = "";
+    $createdAt = "";
+    // Bind the result variables
+    $stmtlist->bind_result($memeID, $title, $textContent, $createdAt, $filePath, $fileType, $userNickname);
+
+// Fetch the results
+    while ($stmtlist->fetch()) {
+
+    }
+
+// Close the statement
+    $stmtlist->close();
     return "";
 }

lib/upload.php

@@ -229,3 +229,16 @@ function addToGroup(int $groupId, int $fileId): bool
     }
     return $output;
 }
+
+function getImageURL(int $imageFileID) :string
+{
+    global $mysqli;
+    $path = "";
+    $stmtget = $mysqli->prepare('SELECT Path FROM Files WHERE ID = ?');
+    $stmtget->bind_param('i', $imageFileID);
+    $stmtget->execute();
+    $stmtget->bind_result($path);
+    $stmtget->fetch();
+    return $path;
+
+}

templates/login.html

@@ -3,8 +3,8 @@
 <main class="login-file">
     <div class="container" id="container">
         <div class="form-container sign-up">
-            <form>
             <h1>Create Account</h1>
+            <form class="form-content sign-up">
                 <input type="text" name="firstName" id="register_firstName" required placeholder="First name">
                 <input type="text" name="lastName" id="register_lastName" required placeholder="Last name">
                 <input type="email" name="email" id="register_email" required placeholder="Email">
@@ -16,7 +16,7 @@
         </div>
         <div class="form-container sign-in">
             <h1>Login</h1>
-            <form>
+            <form class="form-content sign-in">
                 <input type="email" name="email" id="login_email" required placeholder="Email">
                 <input type="password" name="password" id="login_password" required placeholder="Password">
                 <button type="button" onclick="login()">Login</button>

templates/meme.html

@@ -0,0 +1,8 @@
+<article>
+    <h2 class='meme'>__TEMPLATE_ARTICLE_TITLE__</h2>
+    <div class="memebody">
+        <p class='newsauthor'><i class="ri-user-line"></i>__TEMPLATE_MEME_AUTHOR__</p>
+        <p class='newsdate'><i class="ri-calendar-line"></i>__TEMPLATE_MEME_DATE__</p>
+        <img src="__TEMPLATE_MEME_IMAGE__"
+    </div>
+</article>

templates/userActions.html

@@ -1,12 +1,14 @@
 <!-- Centralized Status Message -->
 <p id="StatusMessage"></p>
 <div id="user-settings">
-    <button type="button" onclick="logout()">Logout</button><br>
+    <button type="button" onclick="logout()">Logout</button>
+    <br>
 
     <div class="form-container" id="updateUserProfileForm">
         <h1>Update User</h1>
 
         <h2>Profile</h2>
+        <div class="form-content" id="profile-form">
             <label for="updateFirstName">First Name:</label>
             <input type="text" id="updateFirstName" name="updateFirstName" required><br>
 
@@ -20,20 +22,20 @@
             <input type="text" id="updateMinecraftNick" name="updateMinecraftNick" required><br>
 
             <button type="button" onclick="updateUserProfile()">Update Profile</button>
-
+        </div>
         <br><br>
 
         <h2>Email</h2>
-
+        <div class="form-content" id="email-form">
             <label for="updateNewEmail">New Email:</label>
             <input type="email" id="updateNewEmail" name="updateNewEmail" required><br>
 
             <button type="button" onclick="updateEmail()">Update Email</button>
-
+        </div>
         <br><br>
 
         <h2>Password</h2>
-
+        <div class="form-content" id="password-form">
             <label for="changeOldPassword">Old Password:</label>
             <input type="password" id="changeOldPassword" name="changeOldPassword" required><br>
 
@@ -42,6 +44,7 @@
 
             <button type="button" onclick="changePassword()">Change Password</button>
         </div>
+    </div>
 </div>
 <hr>