New navbar

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

View file

@ -6,7 +6,8 @@ A forum script written in Node.js.
## Installation
- Clone this repo. Or download it.
- 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
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
- Database change. (To MongoDB)
- Better DB writing. Example, not `message.author.id`, `messsage.authorID`
- `/errors/error` will change
## Roadmap
- [x] User

View file

@ -13,7 +13,7 @@ app.set("view engine", "ejs");
app.use(express.json());
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."));

View file

@ -1,4 +1,5 @@
:root { /* Apprentice Scheme */
:root {
/* Apprentice Scheme */
/*
* use `var(--col-x)` instead of directly typing the color.
*/
@ -22,18 +23,7 @@
--col-bg: #262626;
}
img.yuvarlak {
border-radius: 50%;
height: 30px;
width: 30px;
object-fit: cover;
}
img.logo {
width: 266px;
height: 75px;
display: inline;
}
textarea {
@ -68,8 +58,8 @@ h6 {
background: var(--col-bg);
color: var(--col-fg);
max-width: 69rem;
margin: auto;
margin-top: 10px;
margin: auto;
/* funny number */
}
@ -135,7 +125,88 @@ button:hover {
color: var(--col-bg);
}
.mainpage {
padding: 10px;
float: right;
/* NAVBAR: */
.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>';

View file

@ -14,20 +14,39 @@
<body>
<!-- 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>
<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">
<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 -->
<h1>Welcome to the admin panel of the forum, <%= user.name %>!</h1>
<form action="/admin/" method="POST">

View file

@ -9,29 +9,47 @@
<meta name="description" content="Main page of Akf-forum!">
<meta name="author" content="Akif9748">
<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>
<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: -->
<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>
<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 %>>
<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 -->
<h1>Welcome, <a href=<%=user.getLink() %>> <%= user.name %></a>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
<br>
@ -44,16 +62,24 @@
<h1>Statistics:</h1>
<ul>
<li>
<h3>Message count: <b> <%= messages %> </b></h3>
<h3>Message count: <b>
<%= messages %>
</b></h3>
</li>
<li>
<h3>User count: <b> <%= users %> </b></h3>
<h3>User count: <b>
<%= users %>
</b></h3>
</li>
<li>
<h3>Thread count: <b> <%= threads %></b></h3>
<h3>Thread count: <b>
<%= threads %>
</b></h3>
</li>
<li>
<h3>Memory usage: <b> <%= mem.toFixed(2); %> MB </b></h3>
<h3>Memory usage: <b>
<%= mem.toFixed(2); %> MB
</b></h3>
</li>
</ul>

View file

@ -14,15 +14,37 @@
<body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<!-- Navbar: -->
<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>
<button class="buyuk" onclick="window.location.href = '/threads'">THREADS</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">
<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 -->

View file

@ -16,19 +16,24 @@
<body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<!-- 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>
<div class="navbar" id="navbar">
<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>
<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 -->
<h1 style="font-size: 35px;">

View file

@ -14,18 +14,24 @@
<body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<!-- Navbar: -->
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<br>
<button class="buyuk" onclick="window.location.href = '/users'">USERS</button>
<button class="buyuk" onclick="window.location.href = '/search'">SEARCH</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>
<img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
</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>
<!-- Navbar end -->

View file

@ -16,18 +16,24 @@
<body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<!-- 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>
<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>
<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 -->

View file

@ -13,23 +13,26 @@
<body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if (<%= user.admin %>) admin(); </script>
<!-- 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>
<div class="navbar" id="navbar">
<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>
<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 -->
<hr>
<h1>This page is not ready.</h1>
<hr>

View file

@ -14,20 +14,25 @@
<body>
<script src="/js/scripts.js"></script>
<div id="admin"></div>
<script> if ( <%= user.admin %> ) admin(); </script>
<!-- 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 = '/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>
<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 -->
<h1>USERS:</h1>
<ul>
<% users.forEach(user=>{ %>