express-message-board/views/index.ejs
ak f36b48f4ce progress update
image uploading works
hosted at deta space
2023-09-20 18:00:32 -07:00

112 lines
3.6 KiB
Text

<!DOCTYPE html>
<html>
<head>
<title>b0ard</title>
<link rel="stylesheet" href="/styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="/stylesheets/index.css" />
</head>
<body class="bg-dark text-light min-vh-100">
<header
class="d-flex w-100 align-items-center justify-content-between border-bottom mb-2 border-light py-2 px-4 w-100"
>
<a href="/" class="logotext p-0 m-0 fs-1">b0ard</a>
<a
href="/user/<%= user._id %>"
type="button"
class="btn btn-outline-light px-4 py-2"
>
<div class="d-flex align-items-center gap-4">
<img
src="data:image/image/png;base64,
<%=user.avatar.toString('base64')%>"
width="24px"
/>
<%= user.username %>
</div>
</a>
</header>
<div class="d-flex flex-row p-4 w-100 justify-content-between">
<div class="d-flex flex-column w-50 pe-3">
<center>
<h1 class="fs-4">Direct Messages:</h1>
</center>
<% DMs.forEach(DM => { %>
<a
href="/msg/<%= DM._id %>"
type="button"
class="btn btn-outline-light py-4"
>
<div class="d-flex align-items-between">
<div
class="d-flex flex-column align-items-center justify-content-center w-50"
>
<div class="d-flex align-items-center gap-4">
<img
src="data:image/image/png;base64,
<%=DM.from.avatar.toString('base64')%>"
width="48px"
/>
<p class="p-0 m-0 fs-3"><%= DM.from.username %></p>
</div>
</div>
<div
class="d-flex flex-column w-50 align-items-center justify-content-center"
>
<p class="p-0 m-0">Sent: <%= DM.date.toDateString() %></p>
<p class="p-0 m-0">
Last Updated: <%= DM.updated.toDateString() %>
</p>
</div>
</div>
<div class="pb-3"></div>
<p class="p-0 m-0"><%= DM.text %></p>
</a>
<div class="pb-4"></div>
<% }) %>
</div>
<div class="d-flex flex-column w-50 ps-3">
<center>
<h1 class="fs-4">Public Messages:</h1>
</center>
<% allChat.forEach(chat => { %>
<a
href="/msg/<%= chat._id %>"
type="button"
class="btn btn-outline-light py-4"
>
<div class="d-flex align-items-between">
<div
class="d-flex flex-column align-items-center justify-content-center w-50"
>
<div class="d-flex align-items-center gap-3">
<img
src="data:image/image/png;base64,
<%=chat.from.avatar.toString('base64')%>"
width="48px"
/>
<p class="p-0 m-0 fs-3"><%= chat.from.username %></p>
</div>
</div>
<div
class="d-flex flex-column w-50 align-items-center justify-content-center"
>
<p class="p-0 m-0">Sent: <%= chat.date.toDateString() %></p>
<p class="p-0 m-0">
Last Updated: <%= chat.updated.toDateString() %>
</p>
</div>
</div>
<div class="pb-3"></div>
<p class="p-0 m-0"><%= chat.text %></p>
</a>
<div class="pb-4"></div>
<% }) %>
</div>
</div>
<center>
<a href="/msg/new" type="button" class="btn btn-outline-light px-4 py-2">
+ New Message
</a>
</center>
</body>
</html>