Akif9748/akf-forum
Akif9748/akf-forum
1
1
Fork 0
mirror of https://github.com/Akif9748/akf-forum.git synced 2024-11-26 13:20:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

New navbar

Browse source
This commit is contained in:
Akif9748 2022-03-22 21:25:09 +03:00
parent 0dd3ab8838
commit b47e9e2834
13 changed files with 275 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -6,7 +6,8 @@ A forum script written in Node.js.
## Installation ## Installation
- Clone this repo. Or download it. - Clone this repo. Or download it.
- Write `npm i` to install **dependencies**. - Write `npm i` to install **dependencies**.
- Write `npm restart` for reset database, and `npm start` for run it. - Write `npm restart` for **reset database**, and `npm start` for run it.
- Note, the reset database is important!
## API ## API
Akf-forum has got an API for other clients etc. You can test api with run apitest.py. Akf-forum has got an API for other clients etc. You can test api with run apitest.py.
@ -21,6 +22,7 @@ And, you can learn informations about API in `APIDOCS.md`.
- Better error codes, example 400 for bad request - Better error codes, example 400 for bad request
- Database change. (To MongoDB) - Database change. (To MongoDB)
- Better DB writing. Example, not `message.author.id`, `messsage.authorID` - Better DB writing. Example, not `message.author.id`, `messsage.authorID`
- `/errors/error` will change
## Roadmap ## Roadmap
- [x] User - [x] User

2
index.js
View file

@ -13,7 +13,7 @@ app.set("view engine", "ejs");
app.use(express.json()); app.use(express.json());
for (const file of fs.readdirSync("./routes")) for (const file of fs.readdirSync("./routes"))
app.use("/" + file.slice(0, -3), require(`./routes/${file}`)); app.use("/" + file.replace(".js",""), require(`./routes/${file}`));
app.all("*", (req, res) => error(res, 404, "We have not got this page.")); app.all("*", (req, res) => error(res, 404, "We have not got this page."));

103
public/css/styles.css
View file

@ -1,4 +1,5 @@
:root { /* Apprentice Scheme */ :root {
/* Apprentice Scheme */
/* /*
* use `var(--col-x)` instead of directly typing the color. * use `var(--col-x)` instead of directly typing the color.
*/ */
@ -22,18 +23,7 @@
--col-bg: #262626; --col-bg: #262626;
} }
img.yuvarlak {
border-radius: 50%;
height: 30px;
width: 30px;
object-fit: cover;
}
img.logo {
width: 266px;
height: 75px;
display: inline;
}
textarea { textarea {
@ -68,8 +58,8 @@ h6 {
background: var(--col-bg); background: var(--col-bg);
color: var(--col-fg); color: var(--col-fg);
max-width: 69rem; max-width: 69rem;
margin: auto;
margin-top: 10px; margin-top: 10px;
margin: auto;
/* funny number */ /* funny number */
} }
@ -135,7 +125,88 @@ button:hover {
color: var(--col-bg); color: var(--col-bg);
} }
.mainpage {
padding: 10px; /* NAVBAR: */
float: right;
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
color: var(--col-fg);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-right: 3px solid var(--col-8);
}
.navbar a:hover {
background-color: var(--col-bg);
color: var(--col-fg);
}
.navbar h1:hover {
background-color: var(--col-bg);
color: var(--col-fg);
}
.navbar a.active {
background-color: var(--col-14);
color: var(--col-15);
}
.user {
margin: 0;
border: 1px solid var(--col-8);
}
.user h1 {
font-family: monospace;
background: #333;
color: var(--col-fg);
margin: auto;
text-align: center;
line-height: 1;
color: var(--col-13);
font-size: 27px;
}
.user img {
padding: 6px 10px;
}
.user a {
color: var(--col-13);
padding: 0px 5px;
}
/* ADMIN */
.admin {
background-color: #5F87AF;
}
.admin a {
font-family: monospace;
background-color: var(--col-bg);
border: 2px solid var(--col-8);
color: var(--col-fg);
}
/* IMAGES */
img.yuvarlak {
border-radius: 50%;
height: 30px;
width: 30px;
}
img.logo {
width: 266px;
height: 75px;
} }

0
public/js/navbar.js Normal file
View file

2
public/js/scripts.js Normal file
View file

@ -0,0 +1,2 @@
const admin = () => document.getElementById("admin").innerHTML =
'<a href="/admin"> <h3> You are admin, and you can go your page </h3></a><br>';

33
views/admin.ejs
View file

@ -14,20 +14,39 @@
<body> <body>
<!-- Navbar: --> <!-- Navbar: -->
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a> <a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<br> <button class="buyuk" onclick="window.location.href = '/threads'">THREADS</button>
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button>
<button class="buyuk" onclick="window.location.href = '/users'">USERS</button> <div class="navbar" id="navbar">
<button class="buyuk" onclick="window.location.href = '/threads/open/'">OPEN THREAD</button>
<h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a> <a href="/threads">THREADS</a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> <a href="/users">USERS</a>
</h1> <a href="/search">SEARCH</a>
<a href="/threads/open/">OPEN THREAD</a>
<div style="float: right;" class="user" id="user">
<a href=<%=user.getLink() %>>
<h1>
<%= user.name %><img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
</h1>
</a>
</div>
</div>
<hr> <hr>
<!-- Navbar end --> <!-- Navbar end -->
<h1>Welcome to the admin panel of the forum, <%= user.name %>!</h1> <h1>Welcome to the admin panel of the forum, <%= user.name %>!</h1>
<form action="/admin/" method="POST"> <form action="/admin/" method="POST">

64
views/index.ejs
View file

@ -9,34 +9,52 @@
<meta name="description" content="Main page of Akf-forum!"> <meta name="description" content="Main page of Akf-forum!">
<meta name="author" content="Akif9748"> <meta name="author" content="Akif9748">
<link rel="icon" type="image/x-icon" href="/images/favicon.jpg"> <link rel="icon" type="image/x-icon" href="/images/favicon.jpg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/js/scripts.js"></script>
</head> </head>
<body> <body>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<%if(user.admin){%>
<button onclick="window.location.href = '/admin'">ADMIN PANEL</button> <hr>
<%};%>
<!-- Navbar: --> <!-- Navbar: -->
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<br> <button class="buyuk" onclick="window.location.href = '/threads'">THREADS</button>
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button>
<button class="buyuk" onclick="window.location.href = '/users'">USERS</button> <a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<button class="buyuk" onclick="window.location.href = '/threads/open/'">OPEN THREAD</button>
<h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> <div class="navbar" id="navbar">
</h1>
<a href="/threads">THREADS</a>
<a href="/users">USERS</a>
<a href="/search">SEARCH</a>
<a href="/threads/open/">OPEN THREAD</a>
<div style="float: right;" class="user" id="user">
<a href=<%=user.getLink() %>>
<h1>
<%= user.name %><img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
</h1>
</a>
</div>
</div>
<hr> <hr>
<!-- Navbar end --> <!-- Navbar end -->
<h1>Welcome, <a href=<%=user.getLink() %>> <%= user.name %></a> <h1>Welcome, <a href=<%=user.getLink() %>> <%= user.name %></a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> <img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
<br> <br>
You can press logout here: You can press logout here:
<button onclick="window.location.href = '/login/'">LOGOUT</button> <button onclick="window.location.href = '/login/'">LOGOUT</button>
</h1> </h1>
@ -44,16 +62,24 @@
<h1>Statistics:</h1> <h1>Statistics:</h1>
<ul> <ul>
<li> <li>
<h3>Message count: <b> <%= messages %> </b></h3> <h3>Message count: <b>
<%= messages %>
</b></h3>
</li> </li>
<li> <li>
<h3>User count: <b> <%= users %> </b></h3> <h3>User count: <b>
<%= users %>
</b></h3>
</li> </li>
<li> <li>
<h3>Thread count: <b> <%= threads %></b></h3> <h3>Thread count: <b>
<%= threads %>
</b></h3>
</li> </li>
<li> <li>
<h3>Memory usage: <b> <%= mem.toFixed(2); %> MB </b></h3> <h3>Memory usage: <b>
<%= mem.toFixed(2); %> MB
</b></h3>
</li> </li>
</ul> </ul>

36
views/openThread.ejs
View file

@ -14,15 +14,37 @@
<body> <body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<!-- Navbar: --> <!-- Navbar: -->
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a> <a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<br>
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button>
<button class="buyuk" onclick="window.location.href = '/users'">USERS</button> <div class="navbar" id="navbar">
<button class="buyuk" onclick="window.location.href = '/threads'">THREADS</button>
<h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a> <a href="/threads">THREADS</a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> <a href="/users">USERS</a>
</h1> <a href="/search">SEARCH</a>
<a href="/threads/open/">OPEN THREAD</a>
<div style="float: right;" class="user" id="user">
<a href=<%=user.getLink() %>>
<h1>
<%= user.name %><img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
</h1>
</a>
</div>
</div>
<hr> <hr>
<!-- Navbar end --> <!-- Navbar end -->

29
views/thread.ejs
View file

@ -16,20 +16,25 @@
<body> <body>
<!-- Navbar: --> <script src="/js/scripts.js"></script>
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a> <div id="admin"></div>
<br> <button class="buyuk" onclick="window.location.href = '/threads'">THREADS</button> <script> if (<%= user.admin %>) admin(); </script>
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button> <!-- Navbar: -->
<button class="buyuk" onclick="window.location.href = '/users'">USERS</button> <a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<button class="buyuk" onclick="window.location.href = '/threads/open/'">OPEN THREAD</button> <div class="navbar" id="navbar">
<h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
</h1>
<hr>
<a href="/threads">THREADS</a>
<a href="/users">USERS</a>
<a href="/search">SEARCH</a>
<a href="/threads/open/">OPEN THREAD</a>
<!-- Navbar end --> <div style="float: right;" class="user" id="user">
<a href = <%= user.getLink() %> > <h1> <%= user.name %><img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> </h1> </a>
</div>
</div>
<hr>
<!-- Navbar end -->
<h1 style="font-size: 35px;"> <h1 style="font-size: 35px;">
<%= thread.title %> <%= thread.title %>
@ -41,7 +46,7 @@
<br> <br>
<% messages.forEach(message=>{ %> <% messages.forEach(message=>{ %>
<div id=<%="message-" + message.id %> style="border: 2px solid #444444; padding: 5px;"> <div id= <%= "message-" + message.id %> style="border: 2px solid #444444; padding: 5px;">
<h2> <h2>
<img class="yuvarlak" src=<%=message.author.avatar %> alt=<%= message.author.name %>> <img class="yuvarlak" src=<%=message.author.avatar %> alt=<%= message.author.name %>>
<a style=" color: #bcbcbc; " href=<%="/users/" + message.author.id %>> <%= message.author.name %></a>: <a style=" color: #bcbcbc; " href=<%="/users/" + message.author.id %>> <%= message.author.name %></a>:

22
views/threads.ejs
View file

@ -14,18 +14,24 @@
<body> <body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<!-- Navbar: --> <!-- Navbar: -->
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a> <a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<br> <div class="navbar" id="navbar">
<button class="buyuk" onclick="window.location.href = '/users'">USERS</button>
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button>
<button class="buyuk" onclick="window.location.href = '/threads/open/'">OPEN THREAD</button> <a href="/threads">THREADS</a>
<h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a> <a href="/users">USERS</a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> <a href="/search">SEARCH</a>
</h1> <a href="/threads/open/">OPEN THREAD</a>
<div style="float: right;" class="user" id="user">
<a href = <%= user.getLink() %> > <h1> <%= user.name %><img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> </h1> </a>
</div>
</div>
<hr> <hr>
<!-- Navbar end --> <!-- Navbar end -->

30
views/user.ejs
View file

@ -16,19 +16,25 @@
<body> <body>
<!-- Navbar: --> <script src="/js/scripts.js"></script>
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a> <div id="admin"></div>
<br> <script> if (<%= user.admin %>) admin(); </script>
<button class="buyuk" onclick="window.location.href = '/threads'">THREADS</button>
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button>
<button class="buyuk" onclick="window.location.href = '/users'">USERS</button>
<button class="buyuk" onclick="window.location.href = '/threads/open/'">OPEN THREAD</button>
<h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
</h1>
<hr>
<!-- Navbar end --> <!-- Navbar: -->
<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/open/">OPEN THREAD</a>
<div style="float: right;" class="user" id="user">
<a href = <%= user.getLink() %> > <h1> <%= user.name %><img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> </h1> </a>
</div>
</div>
<hr>
<!-- Navbar end -->
<ul> <ul>

25
views/userEdit.ejs
View file

@ -13,23 +13,26 @@
<body> <body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<!-- Navbar: --> <!-- Navbar: -->
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a> <a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<br> <button class="buyuk" onclick="window.location.href = '/threads'">THREADS</button> <div class="navbar" id="navbar">
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button> <a href="/threads">THREADS</a>
<button class="buyuk" onclick="window.location.href = '/users'">USERS</button> <a href="/users">USERS</a>
<button class="buyuk" onclick="window.location.href = '/threads/open/'">OPEN THREAD</button> <a href="/search">SEARCH</a>
<h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a> <a href="/threads/open/">OPEN THREAD</a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
</h1> <div style="float: right;" class="user" id="user">
<a href = <%= user.getLink() %> > <h1> <%= user.name %><img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> </h1> </a>
</div>
</div>
<hr> <hr>
<!-- Navbar end --> <!-- Navbar end -->
<hr>
<h1>This page is not ready.</h1> <h1>This page is not ready.</h1>
<hr> <hr>

27
views/users.ejs
View file

@ -14,25 +14,30 @@
<body> <body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if ( <%= user.admin %> ) admin(); </script>
<!-- Navbar: --> <!-- Navbar: -->
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a> <a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<br> <div class="navbar" id="navbar">
<button class="buyuk" onclick="window.location.href = '/threads'">THREADS</button>
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button> <a href="/threads">THREADS</a>
<button class="buyuk" onclick="window.location.href = '/threads/open/'">OPEN THREAD</button> <a href="/users">USERS</a>
<h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a> <a href="/search">SEARCH</a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> <a href="/threads/open/">OPEN THREAD</a>
</h1>
<div style="float: right;" class="user" id="user">
<a href = <%= user.getLink() %> > <h1> <%= user.name %><img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> </h1> </a>
</div>
</div>
<hr> <hr>
<!-- Navbar end --> <!-- Navbar end -->
<h1>USERS:</h1> <h1>USERS:</h1>
<ul> <ul>
<% users.forEach(user=>{ %> <% users.forEach(user=>{ %>
<li> <li>
<h1><a href=<%=links[user.id] %> > <%= user.name %></a> <h1><a href= <%= links[user.id] %> > <%= user.name %></a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>> <img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
</h1> </h1>
</li> </li>