automation-tools/ecw-charge-validation
8
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Portal look: aligned header and footer, 7-day chart, today's reasons, pass rate

Browse Source 
Header, breadcrumb, page and footer share one 1180px column; the header
marks the current page; a footer sits at the bottom of every page.
Dashboard: pass rate on Checked today, a Last 7 days Pass / Fail / Review
chart, today's Fail and Review reasons grouped with counts, and three
equal cards (Claim status, Runs, Find a claim). Motion is movement only
and off under prefers-reduced-motion. Context.md brought up to date.

Snapshot of local 9d5ac63 (tree scanned: no real claim ids, no patient
data).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ManikandanandClaude Opus 5.5 committed 2026-10-26 13:06:52 +05:30
1 parent ba15a574ab
commit 120fd6808a
5 files changed
+295 -39
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/templates/base.html
+68 -18
View File
@@ -21,35 +21,76 @@
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
font: 14px/1.45 "Segoe UI", system-ui, sans-serif; }
font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header.top { background: var(--navy); color: #fff; padding: 12px 24px;
display: flex; align-items: center; gap: 14px; }
/* Header, breadcrumb, page and footer share one column (1180px), so
their edges line up (operator, 2026-10-26). */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; }
header.top { background: var(--navy); color: #fff; }
header.top .wrap { display: flex; align-items: center; gap: 14px;
min-height: 58px; }
header.top .brand { color: #fff; font-size: 17px; font-weight: 600;
letter-spacing: .2px; }
letter-spacing: .2px; display: flex; align-items: center; }
header.top .brand:hover { text-decoration: none; }
header.top .mark { display: inline-grid; place-items: center; width: 30px;
height: 30px; border-radius: 8px; background: #fff;
color: var(--navy); font-size: 12px; font-weight: 800;
margin-right: 10px; letter-spacing: .5px; }
.pill { border-radius: 12px; padding: 2px 10px; font-size: 11px;
font-weight: 700; letter-spacing: .4px; background: var(--pass);
color: #fff; }
.pill.LIVE-WRITE { background: var(--fail); }
header.top nav.links { margin-left: auto; display: flex; gap: 18px;
header.top nav.links { margin-left: auto; display: flex; gap: 4px;
align-items: center; }
header.top nav.links a { color: #e3ecf7; font-weight: 600; }
header.top .who { color: #b9c6d6; font-size: 13px; }
header.top nav.links a { color: #e3ecf7; font-weight: 600; padding: 6px 11px;
border-radius: 6px; transition: background .15s; }
header.top nav.links a:hover { background: rgba(255, 255, 255, .08);
text-decoration: none; }
header.top nav.links a.on { background: rgba(255, 255, 255, .16); color: #fff; }
header.top .who { color: #b9c6d6; font-size: 13px; display: flex;
align-items: center; gap: 7px; margin-left: 10px; }
header.top .who b { color: #fff; }
header.top .avatar { display: inline-grid; place-items: center; width: 26px;
height: 26px; border-radius: 50%; background: var(--accent);
color: #fff; font-size: 12px; font-weight: 700; }
header.top form.out { margin: 0; }
header.top form.out button { background: transparent; border-color: #6f86a3;
font-weight: 400; padding: 4px 10px; }
.msg { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.msg.bad { background: var(--fail-bg); color: var(--fail); }
.msg.good { background: var(--pass-bg); color: var(--pass); }
nav.crumbs { background: var(--navy-2); color: #b9c6d6; padding: 7px 24px;
nav.crumbs { background: var(--navy-2); color: #b9c6d6; padding: 7px 0;
font-size: 13px; }
nav.crumbs a { color: #e3ecf7; }
nav.crumbs .sep { margin: 0 8px; color: #7d8ea3; }
nav.crumbs .here { color: #fff; font-weight: 600; }
main { max-width: 1180px; margin: 0 auto; padding: 22px 24px 40px; }
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto;
padding: 22px 24px 40px; }
footer.foot { background: var(--panel); border-top: 1px solid var(--line);
color: var(--muted); font-size: 12px; }
footer.foot .wrap { display: flex; gap: 16px; align-items: center;
justify-content: space-between; flex-wrap: wrap;
padding-top: 12px; padding-bottom: 12px; }
footer.foot b { color: var(--text); font-weight: 600; }
/* Motion: short, never in the way, off when Windows asks for less. */
/* Movement only, never opacity: a tab the browser holds in the
background must not leave the page faded. */
@keyframes rise { from { transform: translateY(8px); }
to { transform: none; } }
.card, .tile { animation: rise .35s ease both; }
.tiles > :nth-child(2) { animation-delay: .06s; }
.tiles > :nth-child(3) { animation-delay: .12s; }
.tiles > :nth-child(4) { animation-delay: .18s; }
a.tile, a.card { transition: transform .15s, box-shadow .15s,
border-color .15s; }
a.tile:hover, a.card:hover { transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(18, 53, 91, .12); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important;
transition: none !important; }
}
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--muted); margin: 0 0 16px; }
.card { background: var(--panel); border: 1px solid var(--line);
@@ -91,7 +132,6 @@
border-radius: 10px; padding: 26px; color: var(--muted);
text-align: center; }
.note { color: var(--muted); font-size: 12px; }
footer.note { max-width: 1180px; margin: 0 auto; padding: 0 24px 24px; }
/* Tables: short, no sideways scroll; long text cut on one line. */
table.list { width: 100%; border-collapse: separate; border-spacing: 0;
background: var(--panel); border: 1px solid var(--line);
@@ -146,7 +186,9 @@
@media (max-width: 760px) {
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
main { padding: 16px; }
header.top, nav.crumbs { padding-left: 16px; padding-right: 16px; }
.wrap { padding-left: 16px; padding-right: 16px; }
header.top .wrap { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
header.top nav.links { margin-left: 0; flex-wrap: wrap; }
}
{% block style %}{% endblock %}
</style>
@@ -169,24 +211,32 @@
</script>
</head>
<body>
{% set section = crumbs[1][0] if crumbs | length > 1 else crumbs[0][0] %}
<header class="top">
<a class="brand" href="/">eCW Charge Validation</a>
<div class="wrap">
<a class="brand" href="/"><span class="mark" aria-hidden="true">CV</span>eCW Charge Validation</a>
<span class="pill {{ mode }}" title="SAVE_CORRECTIONS mode">{{ mode }}</span>
{% if user %}<nav class="links">
<a href="/days">Claim status</a><a href="/runs">Runs</a>
{% if is_admin %}<a href="/admin/users">Users</a><a href="/admin/signins">Sign-ins</a>{% endif %}
<a class="who" href="/account/password" title="Change password"><b>{{ user.display_name }}</b> · {{ user.role }}</a>
{% for label, link, admin in [("Dashboard", "/", False), ("Claim status", "/days", False), ("Runs", "/runs", False), ("Users", "/admin/users", True), ("Sign-ins", "/admin/signins", True)] %}{% if not admin or is_admin %}{% if label == section %}<a href="{{ link }}" class="on" aria-current="page">{{ label }}</a>{% else %}<a href="{{ link }}">{{ label }}</a>{% endif %}{% endif %}{% endfor %}
<a class="who" href="/account/password" title="Change password"><span class="avatar" aria-hidden="true">{{ (user.display_name or "?")[:1] | upper }}</span><b>{{ user.display_name }}</b> · {{ user.role }}</a>
<form class="out" method="post" action="/signout"><input type="hidden" name="token" value="{{ run_token }}"><button type="submit">Sign out</button></form>
</nav>{% endif %}
</div>
</header>
<nav class="crumbs">
{% for label, link in crumbs %}{% if not loop.first %}<span class="sep">›</span>{% endif %}{% if link %}<a href="{{ link }}">{{ label }}</a>{% else %}<span class="here">{{ label }}</span>{% endif %}{% endfor %}
<div class="wrap">{% for label, link in crumbs %}{% if not loop.first %}<span class="sep">›</span>{% endif %}{% if link %}<a href="{{ link }}">{{ label }}</a>{% else %}<span class="here">{{ label }}</span>{% endif %}{% endfor %}</div>
</nav>
<main>
{% block content %}{% endblock %}
</main>
<footer class="note">Local page (127.0.0.1) — contains patient data; do not
share screenshots outside the team.</footer>
<footer class="foot">
<div class="wrap">
<span><b>eCW Charge Validation</b> · Ecare India</span>
<span class="phi">Local page — contains patient data; do not share
screenshots outside the team.</span>
<span>Mode <b>{{ mode }}</b></span>
</div>
</footer>
{% block scripts %}{% endblock %}
</body>
</html>