BUMP! NEW THEME!

This commit is contained in:
Akif9748 2022-08-26 16:27:29 +03:00
parent a857e68617
commit 7276d1c044
23 changed files with 422 additions and 103 deletions

View file

@ -19,8 +19,13 @@ Python is only for testing 😭
And, you can learn about API in `util/APIDOCS.md`. And, you can learn about API in `util/APIDOCS.md`.
## Credits ## 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 ## Roadmap
### User ### User
@ -60,7 +65,7 @@ And, you can learn about API in `util/APIDOCS.md`.
### API ### API
| To do | Is done? | Priority | | To do | Is done? | Priority |
| ----- | -------- | -------- | | ----- | -------- | -------- |
| RATELIMITS | 🟡 | MEDIUM | | RATELIMITS | 🟢 | MEDIUM |
| Other clients for forum via API | 🟢 | LOW | | Other clients for forum via API | 🟢 | LOW |
| Get message**s** | 🟢 | MEDIUM | | Get message**s** | 🟢 | MEDIUM |
| Send message | 🟢 | MEDIUM | | Send message | 🟢 | MEDIUM |
@ -74,10 +79,20 @@ And, you can learn about API in `util/APIDOCS.md`.
| ----- | -------- | -------- | | ----- | -------- | -------- |
| Footer | 🟢 | LOW | | Footer | 🟢 | LOW |
| auto-scroll | 🟢 | 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 | | Better view, page support, support message limit correct | 🔴 | MEDIUM |
| Sending message etc. will use fetch API | 🟢 | HIGH | | 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

View file

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

168
public/css/navbar.css Normal file
View file

@ -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;
}
}

36
public/css/threads.css Normal file
View file

@ -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;
}
}

41
public/css/users.css Normal file
View file

@ -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;
}
}

View file

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

View file

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

View file

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

View file

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

8
views/extra/meta.ejs Normal file
View file

@ -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>

View file

@ -1,41 +1,47 @@
<link rel="stylesheet" href="/css/navbar.css" />
<% if (user?.admin){ %> <% 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){ %> <% 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> </div>
<hr>

View file

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

View file

@ -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>

View file

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

View file

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

View file

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

View file

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

View file

@ -1,25 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>

View file

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

View file

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

View file

@ -1,27 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>