BUMP! NEW THEME!

2022-08-26 16:27:29 +03:00 · 2022-08-26 16:27:29 +03:00 · 7276d1c044
parent a857e68617
commit 7276d1c044
23 changed files with 422 additions and 103 deletions
--- a/README.md
+++ b/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
-* [Camroku](https://github.com/Camroku) - Made stylesheets
+* [Akif9748](https://github.com/Akif9748) - Project mainteiner, main developer, made **old** frontend
+* [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 |
-| Search | 🔴 | MEDIUM |
+| Multi-theme support | 🟡 | LOW |
+| Search | 🟡 | MEDIUM |
 | Better view, page support, support message limit correct | 🔴 | MEDIUM |
 | Sending message etc. will use fetch API | 🟢 | HIGH |

-## Screenshot
-![akf-forum](https://user-images.githubusercontent.com/70021050/160255959-ef216cba-1348-4d4b-9347-fe67e21348e7.png)
+### New Theme
+- [x] Users
+- [x] Threads
+- [ ] Login
+- [ ] Register
+- [ ] Thread
+- [ ] User
+- [ ] Main page
+- [ ] Error
+- [ ] ADMIN
+- [ ] Create Thread
+
--- a/package.json
+++ b/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 .",
-    "reset": "node reset.js"
+    "start": "node ."
  },
  "repository": {
    "type": "git",
@ -13,7 +12,8 @@
  },
  "author": "Akif9748",
  "contributors": [
-    "Camroku"
+    "Camroku",
+    "Tokmak"
  ],
  "license": "GPL-3.0-or-later",
  "bugs": {
--- a/public/css/navbar.css
+++ b/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;
+    }
+}
--- a/public/css/old_style.css
+++ b/public/css/old_style.css
--- a/public/css/threads.css
+++ b/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;
+  }
+}
--- a/public/css/users.css
+++ b/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;
+  }
+}
--- a/routes/.js
+++ b/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}),
--- a/views/admin.ejs
+++ b/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>

--- a/views/createThread.ejs
+++ b/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>
--- a/views/error.ejs
+++ b/views/error.ejs
@ -31,7 +31,7 @@



-  <%- include("extra/footer") %>
+  <%- include("extra/old_footer") %>
 </body>

 </html>
--- a/views/extra/meta.ejs
+++ b/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>
--- a/views/extra/navbar.ejs
+++ b/views/extra/navbar.ejs
@ -1,41 +1,47 @@
+<link rel="stylesheet" href="/css/navbar.css" />

 <% 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>
+<div class="admin-bar">
+    <a href="/admin" class="admin-bar">You are admin, and you can go your page!</a> 
+</div>

 <% } %>

-<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>
-
+<div class="header">
+    <a class="logo" href="/">AKF <span>FORUM</span></a>
+    <div class="buttons">
+        
    <% 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>
-
-
-         <% } %> 
    
+        <a href="<%=user.getLink() %>" class="btn-outline-primary" >
+            <div class="box-username"><%= user.name %>
+                <div class="avatar"><img src="<%=user.avatar %>"></div>
+            </div>
+        </a>
+   
 
-
+    <% } 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>
-<hr>
+<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>
--- a/views/extra/old_footer.ejs
+++ b/views/extra/old_footer.ejs
--- a/views/extra/old_header.ejs
+++ b/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>
--- a/views/extra/old_navbar.ejs
+++ b/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>
--- a/views/index.ejs
+++ b/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>

--- a/views/login.ejs
+++ b/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>
--- a/views/register.ejs
+++ b/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>
--- a/views/thread.ejs
+++ b/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>
--- a/views/threads.ejs
+++ b/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>
+             
+        </div>
+    </a>             
+    <br>                
+   <% }); %>
+        
+</div>

-            <h1>Threads:</h1>
-            <ul>
-                <% threads.forEach(thread=>{ %>
-                    <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>
-            
-
-            <%- include("extra/footer") %>
-    </body>
-
-</html>
+</body>
--- a/views/user.ejs
+++ b/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>
--- a/views/userEdit.ejs
+++ b/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>

--- a/views/users.ejs
+++ b/views/users.ejs
@ -1,27 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">

-<%- include("extra/header", {title: "User list!" }) %>
-
-    <body>
-
-        <%- include("extra/navbar", {user}) %>
+<%- include("extra/meta", {title: "User list!" }) %>


-            <h1>USERS:</h1>
-            <ul>
-                <% 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>
+<body>
+  <link rel="stylesheet" href="/css/users.css" />

+  <%- 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") %>
-    </body>
+  </div>
+</body>

-</html>