50 lines
3.2 KiB
HTML
50 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{APP_NAME}}</title>
|
|
<!--{{SMART_BANNER}}-->
|
|
<!--
|
|
Minimal landing page written by `storebound web init --landing` from templates/web/landing.html. Deploy the whole
|
|
output folder to the domain root: index.html, appstore.svg, googleplay.svg and .well-known/. No external requests.
|
|
The store marks are the simple-icons files (CC0 data), shown as a mask in the text colour; they only name the store.
|
|
-->
|
|
<style>
|
|
:root { color-scheme: light dark; --fg: #1b1c20; --bg: #ffffff; --muted: #5d6170; --line: #d5d8e0; --card: #f4f5f8; --accent: #1d4ed8; }
|
|
@media (prefers-color-scheme: dark) { :root { --fg: #eceef3; --bg: #15161a; --muted: #a3a8b6; --line: #343744; --card: #1f2127; --accent: #8fb0ff; } }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
|
|
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 64px 16px 32px; text-align: center; }
|
|
h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.15; margin: 0 0 32px; overflow-wrap: anywhere; }
|
|
.stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; padding: 0; list-style: none; }
|
|
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg); font-weight: 600; text-decoration: none; }
|
|
.store:hover { border-color: var(--fg); }
|
|
.store:focus-visible, footer a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
|
|
.mark { display: inline-block; flex: none; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: none center / contain no-repeat; mask: none center / contain no-repeat; }
|
|
.mark-appstore { -webkit-mask-image: url(appstore.svg); mask-image: url(appstore.svg); }
|
|
.mark-googleplay { -webkit-mask-image: url(googleplay.svg); mask-image: url(googleplay.svg); }
|
|
footer { width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 16px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; text-align: center; }
|
|
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-bottom: 12px; }
|
|
footer a { color: var(--accent); }
|
|
footer p { margin: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>{{APP_NAME}}</h1>
|
|
<ul class="stores" aria-label="Get the app">
|
|
<!--apple--><li><a class="store" href="{{APP_STORE_URL}}"><span class="mark mark-appstore" aria-hidden="true"></span>App Store</a></li><!--/apple-->
|
|
<!--play--><li><a class="store" href="{{PLAY_URL}}"><span class="mark mark-googleplay" aria-hidden="true"></span>Google Play</a></li><!--/play-->
|
|
</ul>
|
|
</main>
|
|
<footer>
|
|
<nav aria-label="Legal and support">
|
|
<a href="{{PRIVACY_URL}}">Privacy Policy</a>
|
|
<!--terms--><a href="{{TERMS_URL}}">Terms of Use</a><!--/terms-->
|
|
<a href="{{SUPPORT_URL}}">Support</a>
|
|
</nav>
|
|
<p>App Store is a trademark of Apple Inc.; Google Play is a trademark of Google LLC.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|