MinhQuan/MiscCorpo
0
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: modernize UI to Mainframe design system

Browse Source
This commit is contained in:
hiep200311
2026-06-17 16:58:50 +07:00
parent ba68e5c15c
commit ff47d331ae
13 changed files with 2292 additions and 1822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/header/header.html
+21 -10
View File
@@ -2,16 +2,27 @@
<header class="app-header">
<nav class="header-nav">
<div class="nav-container">
<ul class="nav-links">
<li>
<a href="/" class="nav-link" data-nav="transcription">📝 Phiên Âm</a>
</li>
<li>
<a href="/scraperZLibrary" class="nav-link" data-nav="scraper"
>📚 Z-Library Scraper</a
>
</li>
</ul>
<!-- Left: Brand -->
<div class="nav-left">
<a href="/" class="nav-brand">KYLONG.</a>
</div>
<!-- Center: Navigation -->
<div class="nav-center">
<ul class="nav-links">
<li>
<a href="/" class="nav-link" data-nav="transcription">Phiên Âm</a>
</li>
<li>
<a href="/scraperZLibrary" class="nav-link" data-nav="scraper">Z-Library</a>
</li>
</ul>
</div>
<!-- Right: Utility -->
<div class="nav-right">
<span class="status-badge"><span class="dot"></span> Online</span>
</div>
</div>
</nav>
</header>
static/header/headerLoader.js
+101 -44
View File
@@ -11,96 +11,153 @@
version: "1.0",
};
// Styles
const styles = `
<style id="header-component-styles">
@import url('https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium');
@import url('https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg');
.app-header {
background: #fff;
border-bottom: 1px solid #e0e0e0;
background: rgba(244, 243, 239, 0.85);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid rgba(10,10,10,0.06);
position: fixed;
top: 0;
left: 0;
right: 0;
top: 0; left: 0; right: 0;
z-index: 1000;
width: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* top-edge glint */
.app-header::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
pointer-events: none;
}
.header-nav {
max-width: 1200px;
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
padding: 0 24px;
position: relative;
}
.nav-container {
display: flex;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
justify-content: space-between;
height: 64px;
height: 54px;
gap: 16px;
}
.nav-left { display: flex; align-items: center; justify-content: flex-start; }
.nav-center { display: flex; align-items: center; justify-content: center; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; }
.nav-brand {
font-size: 18px;
font-weight: 500;
color: #111;
letter-spacing: -0.3px;
font-family: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
color: #0a0a0a;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
}
.nav-links {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 4px;
gap: 4px;
background: rgba(10,10,10,0.04);
border-radius: 9999px;
border: 1px solid rgba(10,10,10,0.05);
box-shadow: inset 0 1px 3px rgba(10,10,10,0.02);
}
.nav-links li {
display: flex;
margin: 0;
padding: 0;
gap: 32px;
}
.nav-link {
display: flex;
align-items: center;
justify-content: center;
font-family: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Arial, sans-serif;
text-decoration: none;
color: #444;
font-size: 15px;
font-weight: 400;
padding: 8px 0;
transition: all 0.15s ease;
border-bottom: 2px solid transparent;
color: rgba(10,10,10,0.50);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.01em;
padding: 6px 18px;
border-radius: 9999px;
border: 1px solid transparent;
transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
white-space: nowrap;
line-height: 1;
height: 100%;
box-sizing: border-box;
}
.nav-link:hover {
color: #111;
border-bottom-color: #ccc;
color: #0a0a0a;
}
.nav-link.active {
color: #111;
border-bottom-color: #111;
font-weight: 500;
color: #0a0a0a;
background: #ffffff;
border-color: rgba(10,10,10,0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(10,10,10,0.45);
}
.status-badge .dot {
width: 6px; height: 6px;
background: #22c55e;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}
/* Ensure content doesn't hide behind fixed header */
body {
padding-top: 64px !important;
padding-top: 54px !important;
margin: 0;
}
/* Mobile responsive */
@media (max-width: 600px) {
.nav-container {
flex-direction: column;
height: auto;
padding: 16px 0;
gap: 12px;
}
.nav-links {
gap: 24px;
}
body {
padding-top: 100px !important;
.nav-container {
grid-template-columns: auto 1fr auto;
height: 48px;
gap: 10px;
}
.nav-center { order: 3; grid-column: 1 / -1; margin-top: -8px; margin-bottom: 8px; }
.nav-right { grid-column: 3; }
.nav-brand { font-size: 12px; }
.nav-link { font-size: 12px; padding: 5px 14px; }
body { padding-top: 90px !important; }
.app-header { padding-bottom: 8px; }
}
</style>
`;
// Load header function
async function loadHeader() {
try {