127 lines
5.7 KiB
Plaintext
127 lines
5.7 KiB
Plaintext
<!doctype html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title><%= title %> | Robot Installer</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/vendor/notiflix/notiflix-<%= notiflixVersion %>.min.css">
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
</head>
|
|
<body class="app-shell" <% if (notice) { %>data-notice-type="<%= notice.type %>" data-notice="<%= notice.message %>"<% } %>>
|
|
<aside id="appSidebar" class="sidebar" aria-label="Main navigation">
|
|
<div class="brand-block">
|
|
<div class="brand-mark">
|
|
<span class="material-symbols-outlined">precision_manufacturing</span>
|
|
</div>
|
|
<div class="brand-copy">
|
|
<strong>Robot Installer</strong>
|
|
<span>Package Console</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="nav-section" aria-label="Workspace">
|
|
<span class="nav-label">Workspace</span>
|
|
<% navItems.forEach((item) => { %>
|
|
<a href="<%= item.href %>" class="nav-item <%= active === item.id ? 'active' : '' %>">
|
|
<span class="material-symbols-outlined"><%= item.icon %></span>
|
|
<span><%= item.label %></span>
|
|
</a>
|
|
<% }) %>
|
|
</nav>
|
|
|
|
<div class="sidebar-copyright">
|
|
© Copyright 2026 Phenikaa X. All Rights Reserved
|
|
</div>
|
|
</aside>
|
|
|
|
<button id="sidebarBackdrop" type="button" aria-label="Đóng menu"></button>
|
|
|
|
<main id="appMain" class="main-shell">
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<button id="mobileMenuBtn" class="icon-button" type="button" aria-label="Mở menu" aria-expanded="false">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="topbar-actions">
|
|
<button class="icon-button" type="button" title="Đồng bộ dữ liệu" data-refresh-page>
|
|
<span class="material-symbols-outlined">sync</span>
|
|
</button>
|
|
<div class="notification-center" data-notification-center>
|
|
<button
|
|
id="notificationButton"
|
|
class="icon-button notification-button"
|
|
type="button"
|
|
title="Thông báo"
|
|
aria-label="Mở thông báo"
|
|
aria-controls="notificationPanel"
|
|
aria-expanded="false"
|
|
data-notification-toggle
|
|
>
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="notification-badge" data-notification-badge hidden>0</span>
|
|
</button>
|
|
|
|
<section id="notificationPanel" class="notification-panel" aria-label="Thông báo" hidden data-notification-panel>
|
|
<div class="notification-panel-header">
|
|
<div>
|
|
<strong>Thông báo</strong>
|
|
<span data-notification-summary>Đang tải...</span>
|
|
</div>
|
|
<button class="text-button" type="button" data-notification-read-all>Đánh dấu đã đọc</button>
|
|
</div>
|
|
|
|
<div class="notification-tabs" role="tablist" aria-label="Lọc thông báo">
|
|
<button class="active" type="button" role="tab" aria-selected="true" data-notification-filter="all">Tất cả</button>
|
|
<button type="button" role="tab" aria-selected="false" data-notification-filter="unread">Chưa đọc</button>
|
|
</div>
|
|
|
|
<div class="notification-list" data-notification-list></div>
|
|
<div class="notification-empty" data-notification-empty hidden>
|
|
<span class="material-symbols-outlined">notifications_none</span>
|
|
<strong>Chưa có thông báo</strong>
|
|
<span>Các cập nhật quan trọng sẽ xuất hiện tại đây.</span>
|
|
</div>
|
|
|
|
<% if (currentUser.role === 'Admin') { %>
|
|
<div class="notification-panel-footer">
|
|
<button class="btn btn-primary" type="button" data-modal-open="systemNotificationModal">
|
|
<span class="material-symbols-outlined">campaign</span>
|
|
Đăng thông báo hệ thống
|
|
</button>
|
|
</div>
|
|
<% } %>
|
|
</section>
|
|
</div>
|
|
<% if (currentUser.role === 'User') { %>
|
|
<button class="profile-chip profile-chip-button" type="button" title="Cập nhật thông tin cá nhân" aria-label="Cập nhật thông tin cá nhân" data-modal-open="profileModal">
|
|
<span class="profile-avatar"><%= currentUser.name.charAt(0) %></span>
|
|
<span class="profile-meta">
|
|
<strong><%= currentUser.name %></strong>
|
|
<span><%= currentUser.role %></span>
|
|
</span>
|
|
</button>
|
|
<% } else { %>
|
|
<div class="profile-chip">
|
|
<span class="profile-avatar"><%= currentUser.name.charAt(0) %></span>
|
|
<span class="profile-meta">
|
|
<strong><%= currentUser.name %></strong>
|
|
<span><%= currentUser.role %></span>
|
|
</span>
|
|
</div>
|
|
<% } %>
|
|
<form class="logout-form" method="post" action="/logout">
|
|
<button class="icon-button" type="submit" title="Đăng xuất" aria-label="Đăng xuất">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="mainContent" class="main-content">
|