BUMP! NEW THEME!

README.md

@@ -19,8 +19,13 @@ Python is only for testing 😭
 And, you can learn about API in `util/APIDOCS.md`.
 
 ## Credits
-* [Akif9748](https://github.com/Akif9748) - Project mainteiner, main developer
+* [Akif9748](https://github.com/Akif9748) - Project mainteiner, main developer, made **old** frontend
-* [Camroku](https://github.com/Camroku) - Made stylesheets
+* [Tokmak](https://github.com/-) - Made **new** frontend
+* [Camroku](https://github.com/Camroku) - Made **old** stylesheets
+
+## Screenshot
+![akf-forum](https://user-images.githubusercontent.com/70021050/160255959-ef216cba-1348-4d4b-9347-fe67e21348e7.png)
+
 
 ## Roadmap
 ### User
@@ -60,7 +65,7 @@ And, you can learn about API in `util/APIDOCS.md`.
 ### API
 | To do | Is done? | Priority |
 | ----- | -------- | -------- |
-| RATELIMITS | 🟡 | MEDIUM |
+| RATELIMITS | 🟢 | MEDIUM |
 | Other clients for forum via API | 🟢 | LOW |
 | Get message**s** | 🟢 | MEDIUM |
 | Send message | 🟢 | MEDIUM |
@@ -74,10 +79,20 @@ And, you can learn about API in `util/APIDOCS.md`.
 | ----- | -------- | -------- |
 | Footer | 🟢 | LOW |
 | auto-scroll  | 🟢 | LOW |
-| Multi-theme support | 🔴 | LOW |
+| Multi-theme support | 🟡 | LOW |
-| Search | 🔴 | MEDIUM |
+| Search | 🟡 | MEDIUM |
 | Better view, page support, support message limit correct | 🔴 | MEDIUM |
 | Sending message etc. will use fetch API | 🟢 | HIGH |
 
-## Screenshot
+### New Theme
-![akf-forum](https://user-images.githubusercontent.com/70021050/160255959-ef216cba-1348-4d4b-9347-fe67e21348e7.png)
+- [x] Users
+- [x] Threads
+- [ ] Login
+- [ ] Register
+- [ ] Thread
+- [ ] User
+- [ ] Main page
+- [ ] Error
+- [ ] ADMIN
+- [ ] Create Thread
+

package.json

@@ -1,11 +1,10 @@
 {
   "name": "akf-forum",
   "version": "2.9.2",
-  "description": "A forum script written in Node.js",
+  "description": "A Node.js based forum software",
   "main": "index.js",
   "scripts": {
-    "start": "node .",
+    "start": "node ."
-    "reset": "node reset.js"
   },
   "repository": {
     "type": "git",
@@ -13,7 +12,8 @@
   },
   "author": "Akif9748",
   "contributors": [
-    "Camroku"
+    "Camroku",
+    "Tokmak"
   ],
   "license": "GPL-3.0-or-later",
   "bugs": {

public/css/navbar.css

@@ -0,0 +1,168 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+    color: initial;
+}
+
+.header {
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-self: center;
+}
+
+.logo {
+    padding: 10px;
+    font-size: 28px;
+    color: #4d18e6;
+    font-weight: 900;
+}
+
+.logo>span {
+    color: #606060;
+}
+
+.buttons {
+    padding: 0;
+    display: flex;
+    align-items: center;
+}
+
+.btn-primary {
+    color: #e8e8e8;
+    background-color: #4d18e6;
+    padding: 10px 20px 10px 20px;
+    border-radius: 4px;
+    font-weight: 700;
+    margin: 10px;
+    cursor: pointer;
+    border: 2px solid #4d18e6;
+}
+
+.btn-outline-primary {
+    color: #4d18e6;
+    padding: 10px 20px 10px 20px;
+
+    border-radius: 4px;
+    font-weight: 700;
+    margin: 10px;
+    cursor: pointer;
+    border: 2px solid #e2e2e2;
+}
+
+.menu {
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.btn-primary:hover {
+    color: #4d18e6;
+    background-color: rgba(0, 0, 0, 0);
+    border: 2px solid #4d18e6;
+}
+
+.menu-item {
+    padding: 10px;
+    font-weight: 700;
+    background-color: #606060;
+    color: #ffffff;
+    border-radius: 5px;
+    width: 100%;
+    text-align: center;
+    margin: 0px 10px 0px 0px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.active-menu {
+    background-color: #4d18e6;
+}
+
+body {
+    font-family: Poppins;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+
+.btn-outline-primary:hover {
+    border: 2px solid #4d18e6;
+}
+
+
+.menu-item:hover {
+    background-color: #4d18e6;
+}
+
+.admin-bar {
+    font-size: 15px;
+    color: #ffffff;
+    background: #4d18e6;
+    text-align: center;
+}
+
+div.avatar {
+    padding-left: 10px;
+}
+
+.avatar>img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin: auto;
+}
+
+.box-username {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #4d18e6;
+}
+
+@media (max-width: 992px) {
+    .header {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .menu {
+        flex-direction: column;
+    }
+
+    .menu-item {
+        margin: 0px 10px 10px 0px;
+    }
+
+
+}
+
+@media (max-width: 480px) {
+    .btn-outline-primary {
+        width: 100%;
+        text-align: center;
+    }
+
+    .buttons {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .btn-primary {
+        width: 100%;
+        text-align: center;
+    }
+}

public/css/threads.css

@@ -0,0 +1,36 @@
+
+.threads {
+  width: 100%;
+  padding: 20px;
+}
+
+.threads-box {
+  width: 100%;
+  padding: 8px;
+  box-shadow: 0 0 5px 0 #cbcbcb;
+  display: flex;
+  justify-content: space-between;
+  margin: 0px 0px 8px 0px;
+  cursor: pointer;
+  align-items: center;
+}
+
+.threads-box:hover {
+  background-color: #e2e2e2;
+}
+.thread-box-title {
+  padding: 10px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.thread-box-title>span {
+  color: #ff0000;
+}
+
+
+@media (max-width: 480px) {
+  .threads-box {
+    flex-direction: column;
+  }
+}

public/css/users.css

@@ -0,0 +1,41 @@
+.users {
+  width: 100%;
+  padding: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 10px;
+}
+
+.user-box {
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 0 5px 0 #beb9b9;
+}
+
+.user-box-title {
+  padding: 10px;
+  margin: 8px;
+  font-weight: 500;
+}
+
+.user-box-title>span {
+  color: #ff0000;
+}
+
+.user-box-img {
+  width: 80px;
+  height: 80px;
+}
+
+@media (max-width: 992px) {
+  .users {
+    display: block;
+  }
+
+  .user-box {
+    margin-bottom: 10px;
+  }
+}

routes/.js

@@ -3,6 +3,8 @@ const { Router } = require("express");
 const app = Router();
 
 app.get("/", async (req, res) => {
+    
+
     const
         mem = process.memoryUsage().heapUsed / Math.pow(2, 20),
         users = await UserModel.count({deleted:false}),

views/admin.ejs

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<%- include("extra/header", {title: "Admin panel!" }) %>
+<%- include("extra/old_header", {title: "Admin panel!" }) %>
 
     <body>
 
-        <%- include("extra/navbar", {user}) %>
+        <%- include("extra/old_navbar", {user}) %>
 
             <h1>Welcome to the admin panel of the forum, <%= user.name %>!</h1>
 
@@ -33,7 +33,7 @@
 
             </script>
 
-        <%- include("extra/footer") %>
+        <%- include("extra/old_footer") %>
 
     </body>
 

views/createThread.ejs

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<%- include("extra/header", {title: "Create Thread!" }) %>
+<%- include("extra/old_header", {title: "Create Thread!" }) %>
 
     <body>
 
-        <%- include("extra/navbar", {user}) %>
+        <%- include("extra/old_navbar", {user}) %>
 
 
 
@@ -45,7 +45,7 @@
 
 
             </script>
-            <%- include("extra/footer") %>
+            <%- include("extra/old_footer") %>
     </body>
 
 </html>

views/error.ejs

@@ -31,7 +31,7 @@
 
 
 
-  <%- include("extra/footer") %>
+  <%- include("extra/old_footer") %>
 </body>
 
 </html>

views/extra/meta.ejs

@@ -0,0 +1,8 @@
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= title || "Akf-forum" %> </title>
+    <meta name="description" content="Akf-forum!">
+    <meta name="author" content="Akif9748">
+    <link rel="icon" type="image/x-icon" href="/images/favicon.jpg">
+</head>

views/extra/navbar.ejs

@@ -1,41 +1,47 @@
+<link rel="stylesheet" href="/css/navbar.css" />
 
 <% if (user?.admin){ %>
-    <div class="admin">
+<div class="admin-bar">
-        <a class="admin" href="/admin"><p>You are admin, and you can go your page!</p></a>
+    <a href="/admin" class="admin-bar">You are admin, and you can go your page!</a> 
-    </div>
+</div>
-    <hr>
 
 <% } %>
 
-<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
+<div class="header">
-
+    <a class="logo" href="/">AKF <span>FORUM</span></a>
-<div class="navbar" id="navbar">
+    <div class="buttons">
-
-    <a href="/threads">THREADS</a>
-    <a href="/users">USERS</a>
-    <a href="/search">SEARCH</a>
-    <a href="/threads/create/">CREATE THREAD</a>
         
     <% if (user){ %>
-        <div style="float: right;" class="user" id="user">
-            <a href=<%=user.getLink() %>>
-                <h1>
-                    <%= user.name %><img class="circle" src=<%=user.avatar %> alt=<%= user.name %>>
-                </h1>
-            </a>
-        </div>
     
-        <% } else { %>
+        <a href="<%=user.getLink() %>" class="btn-outline-primary" >
-            <a style="float: right; background-color: #5F875F;" href="/register">REGISTER</a>
+            <div class="box-username"><%= user.name %>
-            <a  id="login" style="float: right; background-color:#5F87AF; " href="/login">LOGIN</a>
+                <div class="avatar"><img src="<%=user.avatar %>"></div>
-            <script>
+            </div>
-document.getElementById("login").href += "?redirect="+window.location.pathname;
+        </a>
-            </script>
    
  
-         <% } %> 
+    <% } else { %>
-    
             
+        <a id="login" href="/login" class="btn-primary">Login</a>
+        <a href="/register" class="btn-outline-primary">Register</a>
+        <script>
+            document.getElementById("login").href += "?redirect="+window.location.pathname;
+        </script>
+    <% } %> 
     
+    </div>
+</div>
+<div class="menu">
+    <a href="/threads" class="menu-item">Threads</a>
+    <a href="/users" class="menu-item">Users</a>
+    <a href="/search" class="menu-item">Search</a>
+    <a href="/threads/create/" class="menu-item">Create Thread</a>
+    <script>
+    const menuItems = document.getElementsByClassName("menu-item");
+
+    for (let i = 0; i < menuItems.length; i++)  
+        if (menuItems[i].getAttribute("href") == window.location.pathname)  
+            menuItems[i].classList.add("active-menu");
+
+    </script>
 </div>
-<hr>

views/extra/old_header.ejs

@@ -1,5 +1,5 @@
 <head>
-    <link rel="stylesheet" href="/css/styles.css" />
+    <link rel="stylesheet" href="/css/old_style.css" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= title || "Akf-forum" %> </title>

views/extra/old_navbar.ejs

@@ -0,0 +1,41 @@
+
+<% if (user?.admin){ %>
+    <div class="admin">
+        <a class="admin" href="/admin"><p>You are admin, and you can go your page!</p></a>
+    </div>
+    <hr>
+
+<% } %>
+
+<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
+
+<div class="navbar" id="navbar">
+
+    <a href="/threads">THREADS</a>
+    <a href="/users">USERS</a>
+    <a href="/search">SEARCH</a>
+    <a href="/threads/create/">CREATE THREAD</a>
+
+    <% if (user){ %>
+        <div style="float: right;" class="user" id="user">
+            <a href=<%=user.getLink() %>>
+                <h1>
+                    <%= user.name %><img class="circle" src=<%=user.avatar %> alt=<%= user.name %>>
+                </h1>
+            </a>
+        </div>
+    
+        <% } else { %>
+            <a style="float: right; background-color: #5F875F;" href="/register">REGISTER</a>
+            <a  id="login" style="float: right; background-color:#5F87AF; " href="/login">LOGIN</a>
+            <script>
+document.getElementById("login").href += "?redirect="+window.location.pathname;
+            </script>
+
+
+         <% } %> 
+    
+ 
+
+</div>
+<hr>

views/index.ejs

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<%- include("extra/header", {title: "Main page!" }) %>
+<%- include("extra/old_header", {title: "Main page!" }) %>
 <body>
 
-    <%- include("extra/navbar") %>
+    <%- include("extra/old_navbar") %>
 
     <% if (user) { %>
     <h1>Welcome, <a href=<%=user.getLink() %>> <%= user.name %></a>
@@ -46,7 +46,7 @@
 
     </ul>
 
-    <%- include("extra/footer") %>
+    <%- include("extra/old_footer") %>
 
 </body>
 

views/login.ejs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-    <%- include("extra/header", {title: "Login page!" }) %>
+    <%- include("extra/old_header", {title: "Login page!" }) %>
 
 <body>
     <!-- Navbar: -->
@@ -20,7 +20,7 @@
         <input type="submit" value="Login">
     </form>
 
-    <%- include("extra/footer") %>
+    <%- include("extra/old_footer") %>
 </body>
 
 </html>

views/register.ejs

@@ -2,7 +2,7 @@
 <html lang="en">
 
 
-<%- include("extra/header", {title: "Register!" }) %>
+<%- include("extra/old_header", {title: "Register!" }) %>
 
 <body>
 
@@ -30,7 +30,7 @@
         <input type="submit" value="Register">
     </form>
 
-    <%- include("extra/footer") %>
+    <%- include("extra/old_footer") %>
 </body>
 
 </html>

views/thread.ejs

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<%- include("extra/header", { title: thread.title }) %>
+<%- include("extra/old_header", { title: thread.title }) %>
 
   <body>
 
-    <%- include("extra/navbar", {user}) %>
+    <%- include("extra/old_navbar", {user}) %>
 
 
       <h1 style="font-size: 35px;">
@@ -63,7 +63,7 @@
                           <button id="right_page" style="display:inline;float: right;" type="submit">NEXT</button>
                       </div>--> 
               
-                <%- include("extra/footer") %>
+                <%- include("extra/old_footer") %>
   </body>
 
 </html>

views/threads.ejs

@@ -1,25 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
+<%- include("extra/meta", {title: "Threads!" }) %>
 
-<%- include("extra/header", {title: "Thread list" }) %>
+<body>
+  <link rel="stylesheet" href="/css/threads.css" />
 
-    <body>
+<%- include("extra/navbar") %>
 
-        <%- include("extra/navbar", {user}) %>
+<div class="threads">
 
+  <% threads.forEach(thread=>{ %>
+    <a href="<%= thread.getLink() %>" class="">
+        <div class="threads-box">
+          <div class="thread-box-title">
+            <% if (thread.deleted) { %> <span>[DELETED]</span><% } %>
+            <%= thread.title  %>
+          </div>
+          <div class="box-username">
+            <%= user.name %>  <div class="avatar"><img src="<%=user.avatar %>"> </div>
+          </div>
              
-            <h1>Threads:</h1>
+        </div>
-            <ul>
+    </a>             
-                <% threads.forEach(thread=>{ %>
+    <br>                
-                    <li>
+   <% }); %>
-                        <h1 style="display: inline;"> <a href=<%= thread.getLink() %> ><%= thread.title %></a></h1> 
-                        <h3 style="display: inline;"> | By <%= thread.author.name  %> <%= thread.deleted ? "(DELETED)" :""  %></h3>
-                    </li>
-                <% }); %>
-            </ul>
         
+</div>
 
-            <%- include("extra/footer") %>
+</body>
-    </body>
-
-</html>

views/user.ejs

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<%- include("extra/header", { title: member.name }) %>
+<%- include("extra/old_header", { title: member.name }) %>
 
   <body>
 
-    <%- include("extra/navbar", { user }) %>
+    <%- include("extra/old_navbar", { user }) %>
 
 
       <ul>
@@ -79,7 +79,7 @@
             <h1>This user has been deleted!</h1>
             <% }; %>
 
-              <%- include("extra/footer") %>
+              <%- include("extra/old_footer") %>
   </body>
 
 </html>

views/userEdit.ejs

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<%- include("extra/header", {title: "Edit user!" }) %>
+<%- include("extra/old_header", {title: "Edit user!" }) %>
 
     <body>
 
-        <%- include("extra/navbar", {user}) %>
+        <%- include("extra/old_navbar", {user}) %>
 
 
             <h1>This page's development is not completed yet.</h1>
@@ -22,7 +22,7 @@
         <input type="submit" value="Register">
     </form>
 -->
-            <%- include("extra/footer") %>
+            <%- include("extra/old_footer") %>
 
     </body>
 

views/users.ejs

@@ -1,27 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<%- include("extra/header", {title: "User list!" }) %>
+<%- include("extra/meta", {title: "User list!" }) %>
-
-    <body>
-
-        <%- include("extra/navbar", {user}) %>
 
 
-            <h1>USERS:</h1>
+<body>
-            <ul>
+  <link rel="stylesheet" href="/css/users.css" />
-                <% users.forEach(user=>{ %>
-                    <li>
-                        <h1><a href=<%= user.getLink() %> > <%= user.name %> <%= user.deleted ? "(DELETED)" :""  %></a> 
-                            <img class="circle" src=<%=user.avatar %> alt=<%= user.name %>>
-                        </h1>
-                    </li>
-                <% }); %>
-            </ul>
 
+  <%- include("extra/navbar") %>
 
+  <div class="users">
+  <% users.forEach(user=>{ %>
+      <div class="user-box">
+        <img src="<%=user.avatar %>" class="user-box-img">
+        <div class="user-box-title"> <a href="<%= user.getLink() %>">
+          <% if (user.deleted) { %> <span>[DELETED]</span><% } %>
+          <%= user.name %></a></div>
+      </div>
+  <% }); %>
 
-            <%- include("extra/footer") %>
+  </div>
-    </body>
+</body>
 
-</html>