Riyadh
81acbc2710
Replace generic PWA/favicon assets with the IT-P brand image and layer
the same image over the login page's AnimatedArt panel.
- Generated icon-192/512, maskable-512, and apple-touch-icon (180) from
the attached IT-P photo via ImageMagick (center crop 1110x1110, then
resize). Maskable has #0B1E3F padding so the safe zone is respected
on Android adaptive icons.
- Copied source as public/brand-itp.jpg for the login hero.
- index.html: replaced the generic favicon.svg link with a full
favicon set built from IT-P (favicon.ico + 16/32/48/192/512 PNG),
all cache-busted with ?v=itp1. Deleted public/favicon.svg so no
browser can fall back to the old generic mark.
- Cache-busted apple-touch-icon link the same way so iPad PWA
re-installs pick up the new artwork.
- manifest.webmanifest: same ?v=itp1 cache-bust on all icon entries.
- login.tsx: layered IT-P image over AnimatedArt with mix-blend-screen
(opacity 90%) plus top/bottom and right-edge dark gradients so the
composition reads as one piece and the right edge fades cleanly into
the form panel. Still hidden on < lg per scope.
Did not change favicon.svg itself (kept as last-resort vector
fallback). Mobile (< lg) shows no hero — explicit choice per plan
("إخفاؤها بشكل مدروس").
54 lines
2.7 KiB
HTML
54 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
|
|
<title>Tx OS</title>
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico?v=itp1" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png?v=itp1" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png?v=itp1" />
|
|
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48.png?v=itp1" />
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png?v=itp1" />
|
|
<link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png?v=itp1" />
|
|
<!--
|
|
PWA / "Add to Home Screen" — when the user installs Tx OS to the
|
|
iPad/iPhone home screen (Share → Add to Home Screen) the app
|
|
launches full-screen with no Safari URL bar. The same manifest
|
|
also makes the app installable from Chrome (Add to Dock / Install).
|
|
Note: existing home-screen shortcuts created BEFORE these tags
|
|
shipped will keep opening in regular Safari with the URL bar —
|
|
remove and re-add the icon to pick up the manifest.
|
|
-->
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=itp1" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="apple-mobile-web-app-title" content="Tx OS" />
|
|
<meta name="theme-color" content="#0B1E3F" />
|
|
<!--
|
|
Fonts are now bundled locally via `src/custom-fonts.css`
|
|
(DIN Next LT Arabic, Tajawal, Helvetica Neue LT Arabic,
|
|
Helvetica Neue, Majalla). No third-party Google Fonts roundtrip
|
|
is needed at page load, which speeds up first paint and removes
|
|
the external dependency.
|
|
|
|
#350 (browser print): preload DIN Next LT Arabic — the app's
|
|
sole Arabic print font — so it's already in the HTTP cache by
|
|
the time `@font-face` (declared with `font-display: block` in
|
|
custom-fonts.css) wants to fetch it. Without this, Chrome's
|
|
print snapshot can be taken before the font is ready and the
|
|
output uses a system fallback that lacks Arabic GSUB shaping
|
|
(isolated, unjoined letters that look reversed).
|
|
-->
|
|
<link rel="preload" href="/fonts/DINNextLTArabic-Regular.ttf"
|
|
as="font" type="font/ttf" crossorigin="anonymous" />
|
|
<link rel="preload" href="/fonts/DINNextLTArabic-Bold.ttf"
|
|
as="font" type="font/ttf" crossorigin="anonymous" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|