addition of new dashboard

2026-08-20 15:08:32 +00:00
parent 0622018d95
commit bf59249ed7
161 changed files with 13170 additions and 119 deletions
--- a/backend/http/views/include/header.ejs
+++ b/backend/http/views/include/header.ejs
@@ -0,0 +1,125 @@
+<head>
+	<title>
+		<%= title %>
+	</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="icon" href="/images/icon.svg" type="image/x-icon">
+	<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&display=swap" rel="stylesheet">
+	<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+
+	<style>
+		:root {
+			--md-ref-typeface-brand: 'Open Sans', sans-serif;
+			--md-ref-typeface-plain: system-ui, sans-serif;
+		}
+
+		body {
+			font-family: var(--md-ref-typeface-plain);
+			color: #fff;
+			background-color: rgba(0, 0, 0, 0);
+			background-image: linear-gradient(135deg, #31A9BA 10%, #0E0618 10%, #231641 90%, #31A9BA 90%);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100vh;
+			margin: 0;
+		}
+
+		div {
+			font-family: var(--md-ref-typeface-plain);
+		}
+
+		h1,
+		h2,
+		h3 {
+			font-family: var(--md-ref-typeface-brand);
+		}
+
+		h1 {
+			font-weight: 400;
+		}
+
+		h2 {
+			font-weight: 500;
+		}
+
+		h3 {
+			font-weight: 500;
+		}
+
+		.mdc-card {
+			padding-bottom: 16px;
+			padding-left: 16px;
+			padding-right: 16px;
+			background-color: rgb(68, 62, 77);
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+		}
+
+		.mdc-button {
+			--mdc-theme-primary: rgb(255, 255, 255, .85);
+			--mdc-theme-on-primary: rgb(68, 62, 77);
+
+			/* @include button.ink-color(#84565E); */
+		}
+
+		.agreement-link {
+			font-family: var(--md-ref-typeface-plain);
+			color: white;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="profile-icon-container" style="position: absolute; top: 16px; right: 16px;">
+		<% if (typeof user !=='undefined' && user) { %>
+			<div style="position: relative;">
+				<button id="profileButton" class="profile-icon"
+					style="border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; background-color: #31A9BA; color: #fff; cursor: pointer;">
+					<span style="font-size: 30px">
+						<%= user.username.charAt(0).toUpperCase() %>
+					</span>
+				</button>
+
+				<div id="profileMenu"
+					style="display: none; position: absolute; top: 60px; right: 0; background-color: #4F378B; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 8px; padding: 10px; min-width: 160px; z-index: 100;">
+					<div style="padding: 8px; font-weight: bold;">
+						<span style="display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+						<%= user.username %>
+						</span>
+					</div>
+					<form method="POST" action="/logout">
+						<button type="submit"
+							style="width: 100%; padding: 8px; background-color: #31A9BA; color: white; border: none; border-radius: 4px; cursor: pointer;">Logout</button>
+					</form>
+				</div>
+			</div>
+
+			<script>
+				const profileButton = document.getElementById('profileButton');
+				const profileMenu = document.getElementById('profileMenu');
+
+				profileButton.addEventListener('click', () => {
+					profileMenu.style.display = profileMenu.style.display === 'block' ? 'none' : 'block';
+				});
+
+				// Optional: Hide menu if clicking outside
+				document.addEventListener('click', (event) => {
+					if (!profileButton.contains(event.target) && !profileMenu.contains(event.target)) {
+						profileMenu.style.display = 'none';
+					}
+				});
+			</script>
+			<% } %>
+	</div>
+	<div style="width: 100%; overflow-y: auto; max-height: 100%; word-wrap: break-word;">
+		<center>
+			<div style="width: 90%; max-width: 600px; text-align: left">
+				<div
+					style="padding-top: 20px; display: flex; align-items: center; justify-content: center; gap: 0px; text-align: center; transform: translateX(-0px);">
+					<div style="width: 200px; padding-bottom: 26px">
+						<%- include('./logo-white.svg') %>
+					</div>
+				</div>