Miguel A. Vico 5a040b08d2 Improvement: Make it a web app on iOS
Hides Safari UI when added to home screen as a web app and
provides an app logo.
2025-01-15 03:10:48 -08:00

78 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="OpenSpoolMan">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>OpenSpoolMan</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='logo.png') }}">
<style>
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
</style>
</head>
<body>
<header class="p-1 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="{{ url_for('home') }}" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<img width="40" height="40" alt="OpenSpoolMan Logo" src="{{ url_for('static', filename='logo.png') }}"/>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="{{ url_for('home') }}" class="nav-link px-2 link-body-emphasis">Home</a></li>
<li><a href="{{ url_for('assign_tag') }}" class="nav-link px-2 link-body-emphasis">Assign NFC Tag</a></li>
<li><a href="{{ SPOOLMAN_BASE_URL }}" target="_blank" class="nav-link px-2 link-body-emphasis">SpoolMan</a></li>
</ul>
</div>
</div>
</header>
<main class="container">
{% if success_message %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success!</strong> {{ success_message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
{% block content %}{% endblock %}
</main>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<ul class="nav col-md-12 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="link-body-emphasis" href="https://github.com/drndos/openspoolman">
<i class="bi bi-github"></i>
</a></li>
</ul>
</footer>
</div>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script>
;(function () {
const htmlElement = document.querySelector("html")
if (htmlElement.getAttribute("data-bs-theme") === 'auto') {
function updateTheme() {
document.querySelector("html").setAttribute("data-bs-theme",
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
updateTheme()
}
})()
</script>
</body>
</html>