Adds a web manifest, hand-drawn cup+frame icons, and a presence-only service worker (no offline caching) so mobile browsers offer "Add to Home Screen" for the server UI.
50 lines
1.8 KiB
HTML
50 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{% block title %}ESPresso Frame{% endblock %}</title>
|
|
{% if csrf_token %}<meta name="csrf-token" content="{{ csrf_token }}">{% endif %}
|
|
<script>
|
|
// Applied before first paint so there's no flash of the wrong theme.
|
|
(function () {
|
|
try {
|
|
var stored = localStorage.getItem('theme');
|
|
if (stored === 'light' || stored === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', stored);
|
|
}
|
|
} catch (e) { /* localStorage unavailable (private mode, etc.) */ }
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="/static/theme.css">
|
|
<link rel="manifest" href="/static/manifest.json">
|
|
<link rel="icon" href="/static/icons/favicon.png">
|
|
<link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">
|
|
<meta name="theme-color" content="#2563eb">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-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="ESPresso">
|
|
{% block extra_head %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<div class="page {% block page_class %}{% endblock %}">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="brand-mark" aria-hidden="true">☕</span>
|
|
<div>
|
|
<h1>ESPresso Frame</h1>
|
|
{% block subtitle %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
<button type="button" id="theme-toggle" class="icon-btn" title="Toggle dark mode" aria-label="Toggle dark mode">🌓</button>
|
|
</header>
|
|
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<script src="/static/common.js"></script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|