diff --git a/README.md b/README.md
index 6de344a..abd470d 100644
--- 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
+
+
## 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
-
+### New Theme
+- [x] Users
+- [x] Threads
+- [ ] Login
+- [ ] Register
+- [ ] Thread
+- [ ] User
+- [ ] Main page
+- [ ] Error
+- [ ] ADMIN
+- [ ] Create Thread
+
diff --git a/package.json b/package.json
index 345c74d..345a201 100644
--- 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": {
diff --git a/public/css/navbar.css b/public/css/navbar.css
new file mode 100644
index 0000000..4d5d7c9
--- /dev/null
+++ 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;
+ }
+}
\ No newline at end of file
diff --git a/public/css/styles.css b/public/css/old_style.css
similarity index 100%
rename from public/css/styles.css
rename to public/css/old_style.css
diff --git a/public/css/threads.css b/public/css/threads.css
new file mode 100644
index 0000000..9b06ce4
--- /dev/null
+++ 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;
+ }
+}
\ No newline at end of file
diff --git a/public/css/users.css b/public/css/users.css
new file mode 100644
index 0000000..6c2e740
--- /dev/null
+++ 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;
+ }
+}
diff --git a/routes/.js b/routes/.js
index 88feade..81dcdc8 100644
--- 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}),
diff --git a/views/admin.ejs b/views/admin.ejs
index 59a52ec..741e362 100644
--- 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>
diff --git a/views/createThread.ejs b/views/createThread.ejs
index 1e9007c..4301abe 100644
--- 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>
\ No newline at end of file
diff --git a/views/error.ejs b/views/error.ejs
index 5901efc..ffb6f2a 100644
--- a/views/error.ejs
+++ b/views/error.ejs
@@ -31,7 +31,7 @@
- <%- include("extra/footer") %>
+ <%- include("extra/old_footer") %>
</body>
</html>
\ No newline at end of file
diff --git a/views/extra/meta.ejs b/views/extra/meta.ejs
new file mode 100644
index 0000000..5a405fe
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/views/extra/navbar.ejs b/views/extra/navbar.ejs
index cd27f3c..4f4ad2f 100644
--- 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>
\ No newline at end of file
diff --git a/views/extra/footer.ejs b/views/extra/old_footer.ejs
similarity index 100%
rename from views/extra/footer.ejs
rename to views/extra/old_footer.ejs
diff --git a/views/extra/header.ejs b/views/extra/old_header.ejs
similarity index 88%
rename from views/extra/header.ejs
rename to views/extra/old_header.ejs
index 6761f19..c91e962 100644
--- a/views/extra/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>
diff --git a/views/extra/old_navbar.ejs b/views/extra/old_navbar.ejs
new file mode 100644
index 0000000..cd27f3c
--- /dev/null
+++ 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>
diff --git a/views/index.ejs b/views/index.ejs
index 7a06bec..170115b 100644
--- 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>
diff --git a/views/login.ejs b/views/login.ejs
index e0d0864..6295fd4 100644
--- 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>
diff --git a/views/register.ejs b/views/register.ejs
index a32d424..a0ef896 100644
--- 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>
\ No newline at end of file
diff --git a/views/thread.ejs b/views/thread.ejs
index 6992fe0..1aada9c 100644
--- 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>
\ No newline at end of file
diff --git a/views/threads.ejs b/views/threads.ejs
index 8bf0d73..bdeb17a 100644
--- 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>
\ No newline at end of file
+</body>
diff --git a/views/user.ejs b/views/user.ejs
index cc2eda2..009cb6f 100644
--- 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>
\ No newline at end of file
diff --git a/views/userEdit.ejs b/views/userEdit.ejs
index 75c31b6..97b6c9e 100644
--- 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>
diff --git a/views/users.ejs b/views/users.ejs
index a0515cb..dd7de9a 100644
--- 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>
\ No newline at end of file