Yashas
602b570064
The console was wearing an approximation of the bank. Everything here was read off HDFC Bank's own production assets instead. The mark was inside out. It had been drawn as a blue square with a red square inset; HDFC's is the reverse — a red ground, a white channel cross splitting it into four corner blocks, and a small blue square at the centre. Every coordinate now comes verbatim from the SVG the bank serves in its own site header, including the "HDFC BANK" wordmark outlines, so the lockup is the bank's rather than a redrawing of it. The favicon in index.html carried the same inversion and is fixed with the same numbers. Open Sans replaces the Segoe UI stack. hdfcbank.com preloads OpenSans Regular / SemiBold / Bold / ExtraBold and sets its whole site in it. It is self-hosted through @fontsource-variable/open-sans rather than pulled from a CDN, for the reason the API URL is read at runtime: this build gets promoted between environments and dropped behind bank proxies, and a font that sometimes fails to arrive is a product that sometimes looks like someone else's. The header stops being a navy band. HDFC puts the full lockup on a light ground on every one of its own digital surfaces, and a navy header made the real logo unusable — the lockup's own blue bar would have dissolved into it. The blue now does its work as the rule under the header, the active queue and the primary button, which is how the bank uses it. The lockup's 3px white keyline is the bank's own, so it sits correctly on the panel in dark mode too and no reversed variant is needed. Palette, grounded rather than invented: the page canvas is #F0F6FB, the tint hdfcbank.com uses behind content; the good/ tokens sit on the hue of the bank's #00B947 instead of a generic emerald, darkened to #00713D because #00B947 is 2.6:1 on white and unreadable as a label. The two brand hexes were already right and are unchanged. Also closes three AA failures the palette claimed it did not have — --color-faint in light, and --color-faint / --color-brand in dark, each below 4.5:1 on --color-panel3. White on --color-signal (4.31:1) is left alone knowingly: darkening HDFC red for the Decline button would have made it a different red from the logo beside it.
59 lines
2.8 KiB
HTML
59 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!--BASE_HREF-->
|
|
<title>HDFC Bank | Loan Desk</title>
|
|
<!-- The bank's mark as a data-URI favicon: an inline SVG needs no asset,
|
|
which matters because the build is promoted between environments
|
|
unchanged and a /favicon.ico would resolve against whatever mount path
|
|
the server chose.
|
|
|
|
These coordinates are the same ones in src/components/HdfcLogo.tsx,
|
|
taken off HDFC's own vector: a RED ground, a white channel cross, a
|
|
BLUE centre. It was drawn inside out here too — blue outside, red in —
|
|
so if you change one of the two, change the other. -->
|
|
<link
|
|
rel="icon"
|
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23ED232A'/%3E%3Crect x='7' y='7' width='26' height='26' fill='%23fff'/%3E%3Crect x='18' width='4' height='40' fill='%23fff'/%3E%3Crect y='18' width='40' height='4' fill='%23fff'/%3E%3Crect x='14' y='14' width='12' height='12' fill='%23004C8F'/%3E%3C/svg%3E"
|
|
/>
|
|
<!-- Mobile browser chrome, matching the app header — which is the panel
|
|
colour, not the bank's blue: HDFC sets its logo on a light ground
|
|
everywhere, so the console does too. Kept in step with the active
|
|
theme by applyTheme() in src/theme.ts. -->
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<!-- Theme, resolved BEFORE first paint.
|
|
This duplicates a few lines of src/theme.ts on purpose. The bundle is a
|
|
module and therefore deferred, so resolving the theme in React means
|
|
the browser paints the light default first and a dark-mode user gets a
|
|
white flash on every navigation. Blocking and inline is the only place
|
|
this can run early enough. Keep the localStorage key in step with
|
|
THEME_KEY. -->
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var t = localStorage.getItem('hdfc-loan-desk-theme');
|
|
if (t !== 'light' && t !== 'dark') {
|
|
t = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
? 'dark'
|
|
: 'light';
|
|
}
|
|
document.documentElement.setAttribute('data-theme', t);
|
|
if (t === 'dark') {
|
|
var m = document.querySelector('meta[name="theme-color"]');
|
|
if (m) m.setAttribute('content', '#052b52');
|
|
}
|
|
} catch (e) {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
}
|
|
})();
|
|
</script>
|
|
<script src="./config.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|