fajri/doclink_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch login palette to red

Browse Source
This commit is contained in:
sas.fajri
2026-04-13 15:17:24 +07:00
parent bc6d4fcdad
commit e91574e2ae
2 changed files with 15 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
server.js
View File

@@ -960,30 +960,9 @@ function loginPage({ error = "" } = {}) {
<main class="auth-screen">
<section class="auth-card">
<div class="auth-visual">
<div class="badge">DocLink rebuild · responsive shell</div>
<h1>Clinical workflow that stays fast on desktop and mobile.</h1>
<p>The rebuilt shell keeps the old app's workflows intact, but removes the cramped mobile-only feel.</p>
<div class="auth-highlight">
<strong>Built for doctors who move between screens</strong>
<span>Orders, results, FPP, and account actions stay one click away.</span>
</div>
<div class="auth-points">
<div class="auth-point"><strong>Responsive shell</strong><div>Persistent sidebar on desktop, bottom nav on mobile.</div></div>
<div class="auth-point"><strong>HTMX fragments</strong><div>Detail panels update without leaving the page.</div></div>
<div class="auth-point"><strong>API adapter</strong><div>Login, orders, results, and save flows proxy upstream.</div></div>
</div>
<div class="auth-mini-grid">
<div class="auth-mini-card"><strong>5 routes</strong><span>Public + shell</span></div>
<div class="auth-mini-card"><strong>3 flows</strong><span>Most used actions</span></div>
<div class="auth-mini-card"><strong>1 session</strong><span>Cookie-backed auth</span></div>
</div>
<h1>DocLink Pramita</h1>
</div>
<div class="auth-form">
<div>
<div class="eyebrow">Sign in</div>
<h2>Login to DocLink</h2>
<p class="muted">Use the upstream API or switch to demo mode if the backend is unavailable.</p>
</div>
${error ? `<div class="note-box">${escapeHtml(error)}</div>` : ""}
<form class="form" action="/login" method="post">
<label class="field"><span>Username</span><input name="username" placeholder="dr.fajri" required /></label>
@@ -991,11 +970,6 @@ function loginPage({ error = "" } = {}) {
<label class="field"><span>Password</span><input type="password" name="password" placeholder="Enter password" required /></label>
<button class="btn btn-primary" type="submit">${icon("login")} Login</button>
</form>
<div class="pill-row">
<a class="pill" href="/splash">Open splash</a>
<a class="pill" href="/problem-login">Problem login</a>
<span class="pill">Demo fallback ready</span>
</div>
</div>
</section>
</main>
@@ -1011,22 +985,12 @@ function splashPage() {
<main class="auth-screen">
<section class="auth-card">
<div class="auth-visual">
<div class="badge">Starting DocLink</div>
<h1>Loading workspace...</h1>
<p>Checking session state, then routing into the right clinical entry point.</p>
<div class="auth-highlight">
<strong>Fast redirect</strong>
<span>Users land on dashboard, login, or the error screen without extra clicks.</span>
</div>
<h1>DocLink Pramita</h1>
</div>
<div class="auth-form">
<div class="empty-state">
<strong>Redirecting</strong>
<p>We will move you to the correct route in a moment.</p>
<div class="pill-row" style="justify-content:center; margin-top:14px">
<span class="pill">Session check</span>
<span class="pill">Route resolve</span>
</div>
</div>
</div>
</section>
@@ -1043,13 +1007,7 @@ function problemLoginPage() {
<main class="auth-screen">
<section class="auth-card">
<div class="auth-visual">
<div class="badge">Login problem</div>
<h1>Access needs attention.</h1>
<p>Use this page when auth state is broken, expired, or the upstream login rejects credentials.</p>
<div class="auth-highlight">
<strong>What to do</strong>
<span>Re-enter credentials or wait for the upstream service to recover.</span>
</div>
<h1>DocLink Pramita</h1>
</div>
<div class="auth-form">
<div class="empty-state">
@@ -1057,10 +1015,6 @@ function problemLoginPage() {
<p>The session was cleared. Go back to login and sign in again.</p>
<div style="height:16px"></div>
<a class="btn btn-primary" href="/login">Back to login</a>
<div class="pill-row" style="justify-content:center; margin-top:14px">
<span class="pill">Auth reset</span>
<span class="pill">Retry login</span>
</div>
</div>
</div>
</section>

24
styles.css
View File

@@ -8,11 +8,11 @@
--text: #122033;
--muted: #5b6677;
--muted-2: #7c8797;
--brand: #0f766e;
--brand-strong: #115e59;
--brand: #b91c1c;
--brand-strong: #7f1d1d;
--accent: #d97706;
--accent-soft: #fff4e6;
--success: #15803d;
--success: #dc2626;
--warning: #b45309;
--danger: #b91c1c;
--shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
@@ -41,7 +41,7 @@ body {
font-family: var(--font);
color: var(--text);
background:
radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 28%),
radial-gradient(circle at top left, rgba(185, 28, 28, 0.1), transparent 28%),
radial-gradient(circle at bottom right, rgba(217, 119, 6, 0.07), transparent 28%),
linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
}
@@ -81,7 +81,7 @@ button {
.orb-one {
top: -9rem;
left: -8rem;
background: rgba(15, 118, 110, 0.18);
background: rgba(185, 28, 28, 0.18);
}
.orb-two {
@@ -197,14 +197,14 @@ button {
.nav-link:hover {
transform: translateX(2px);
background: rgba(15, 118, 110, 0.08);
background: rgba(185, 28, 28, 0.08);
color: var(--text);
}
.nav-link.active {
color: white;
background: linear-gradient(135deg, var(--brand), #0f9488);
box-shadow: 0 12px 24px rgba(15, 118, 110, 0.24);
background: linear-gradient(135deg, var(--brand), #dc2626);
box-shadow: 0 12px 24px rgba(185, 28, 28, 0.24);
transform: translateX(2px);
position: relative;
}
@@ -357,8 +357,8 @@ button {
.btn-primary {
color: white;
background: linear-gradient(135deg, var(--brand), #0f9488);
box-shadow: 0 14px 26px rgba(15, 118, 110, 0.22);
background: linear-gradient(135deg, var(--brand), #dc2626);
box-shadow: 0 14px 26px rgba(185, 28, 28, 0.22);
}
.btn-secondary {
@@ -698,7 +698,7 @@ tr:last-child td {
color: white;
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 30%),
linear-gradient(135deg, #0f766e, #0f9488 52%, #115e59);
linear-gradient(135deg, #b91c1c, #dc2626 52%, #7f1d1d);
}
.auth-visual .badge {
@@ -753,7 +753,7 @@ tr:last-child td {
margin-top: 18px;
padding: 16px 18px;
border-radius: 18px;
color: #effaf8;
color: #fff1f2;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.14);
}