jjsm01/cv-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Admin and Settings menu with collapsible submenus and placeholder pages

Browse Source
This commit is contained in:
root
2026-07-25 10:00:07 +00:00
parent 1dac6df6e4
commit 4734fdea85
3 changed files with 82 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/app.js
View File

@@ -2,6 +2,12 @@
const API = '';
let currentChatId = null;
// Toggle collapsible nav sections (Admin, Settings)
function toggleNavSection(id) {
const el = document.getElementById(id);
if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
// ============================================================
// NAVIGATION
// ============================================================

63
static/index.html
View File

@@ -22,6 +22,25 @@
<li><a href="#" class="nav-link" data-page="batches">Batches</a></li>
<li><a href="#" class="nav-link" data-page="generated">Generated CVs</a></li>
</ul>
<ul class="nav" style="margin-top:auto">
<li class="nav-section">
<a href="#" class="nav-section-title" onclick="toggleNavSection('admin-section')">Admin ▾</a>
<ul class="nav-sub" id="admin-section">
<li><a href="#" class="nav-link" data-page="admin-users">Users</a></li>
<li><a href="#" class="nav-link" data-page="admin-health">System Health</a></li>
</ul>
</li>
<li class="nav-section">
<a href="#" class="nav-section-title" onclick="toggleNavSection('settings-section')">Settings ▾</a>
<ul class="nav-sub" id="settings-section">
<li><a href="#" class="nav-link" data-page="settings-ai">AI Provider</a></li>
<li><a href="#" class="nav-link" data-page="settings-appearance">Appearance</a></li>
<li><a href="#" class="nav-link" data-page="settings-branding">Branding</a></li>
<li><a href="#" class="nav-link" data-page="settings-onlyoffice">ONLYOFFICE</a></li>
<li><a href="#" class="nav-link" data-page="settings-notifications">Notifications</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Main content -->
@@ -121,6 +140,48 @@
<h2 style="margin-bottom:20px">Generated CVs</h2>
<div id="generated-list"></div>
</div>
<!-- ADMIN: USERS -->
<div id="page-admin-users" class="page">
<h2 style="margin-bottom:20px">Users</h2>
<div class="card"><p class="text-muted">User management with role-based access control — coming soon.</p></div>
</div>
<!-- ADMIN: SYSTEM HEALTH -->
<div id="page-admin-health" class="page">
<h2 style="margin-bottom:20px">System Health</h2>
<div class="card"><p class="text-muted">Service status dashboard — coming soon.</p></div>
</div>
<!-- SETTINGS: AI PROVIDER -->
<div id="page-settings-ai" class="page">
<h2 style="margin-bottom:20px">AI Provider</h2>
<div class="card"><p class="text-muted">Configure AI provider, model, and API key — coming soon.</p></div>
</div>
<!-- SETTINGS: APPEARANCE -->
<div id="page-settings-appearance" class="page">
<h2 style="margin-bottom:20px">Appearance</h2>
<div class="card"><p class="text-muted">Theme and display settings — coming soon.</p></div>
</div>
<!-- SETTINGS: BRANDING -->
<div id="page-settings-branding" class="page">
<h2 style="margin-bottom:20px">Branding</h2>
<div class="card"><p class="text-muted">Company name, logo, and header text — coming soon.</p></div>
</div>
<!-- SETTINGS: ONLYOFFICE -->
<div id="page-settings-onlyoffice" class="page">
<h2 style="margin-bottom:20px">ONLYOFFICE</h2>
<div class="card"><p class="text-muted">ONLYOFFICE connection URL and JWT secret — coming soon.</p></div>
</div>
<!-- SETTINGS: NOTIFICATIONS -->
<div id="page-settings-notifications" class="page">
<h2 style="margin-bottom:20px">Notifications</h2>
<div class="card"><p class="text-muted">Email notification settings — coming soon.</p></div>
</div>
</main>
</div>
@@ -140,7 +201,7 @@
</div>
</div>
<script src="/static/app.js?v=18"></script>
<script src="/static/app.js?v=19"></script>
<script src="/static/carbone.js?v=16"></script>
<script src="/static/batches.js?v=2"></script>
</body>

14
static/style.css
View File

@@ -74,6 +74,20 @@ a:hover { text-decoration: underline; }
color: var(--accent);
border-left-color: var(--accent);
}
.nav-section-title {
display: block;
padding: 10px 20px;
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
border-left: 3px solid transparent;
}
.nav-section-title:hover { color: var(--text); text-decoration: none; }
.nav-sub { list-style: none; padding: 0; margin: 0; }
.nav-sub li a { font-size: 13px; padding: 7px 20px 7px 32px; }
.main {
flex: 1;
padding: 24px 32px;