landing/templates/base.html
2025-08-31 13:36:36 -05:00

148 lines
4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<title>{% block title %}RideAware{% endblock %}</title>
<!-- Icons/Fonts -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<!-- Core CSS -->
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/styles.css') }}"
/>
<!-- Favicons -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="{{ url_for('static', filename='assets/32x32.png') }}"
/>
<link
rel="alternate icon"
type="image/png"
sizes="32x32"
href="{{ url_for('static', filename='assets/32x32.png') }}"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="{{ url_for('static', filename='assets/apple-touch-icon.png') }}"
/>
<link
rel="manifest"
href="{{ url_for('static', filename='assets/site.webmanifest') }}"
/>
<meta name="theme-color" content="#0f172a" />
{% block extra_head %}{% endblock %}
</head>
<body>
{% set is_home = is_home | default(false) %}
<nav class="navbar">
<div class="nav-container">
<a
href="{{ url_for('index') }}"
class="logo"
aria-label="RideAware home"
>
<img
src="{{ url_for('static', filename='assets/logo.png') }}"
alt="RideAware"
class="logo-img"
width="140"
height="28"
decoding="async"
fetchpriority="high"
/>
</a>
<button
class="nav-toggle"
id="nav-toggle"
aria-label="Toggle navigation"
aria-controls="primary-nav"
aria-expanded="false"
>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<ul class="nav-links" id="primary-nav">
{% if is_home %}
<li><a href="#features">Features</a></li>
{% endif %}
<li><a href="{{ url_for('newsletters') }}">Newsletters</a></li>
</ul>
</div>
</nav>
{% block content %}{% endblock %}
<footer class="footer">
<p>&copy; 2025 RideAware. All rights reserved.</p>
</footer>
<!-- Core JS -->
<script
defer
src="https://cdn.statically.io/gl/rideaware/landing/06d19988c7df53636277f945f9ed853bda76471b/static/js/main.min.js"
crossorigin="anonymous"
></script>
{% block extra_scripts %}
<script>
(function () {
const btn = document.getElementById("nav-toggle");
const menu = document.getElementById("primary-nav");
if (!btn || !menu) return;
function closeMenu() {
btn.classList.remove("active");
btn.setAttribute("aria-expanded", "false");
menu.classList.remove("open");
}
btn.addEventListener("click", () => {
const open = btn.classList.toggle("active");
btn.setAttribute("aria-expanded", String(open));
menu.classList.toggle("open", open);
});
// Close on link click (for anchors like #features)
menu.addEventListener("click", (e) => {
if (e.target.tagName === "A") closeMenu();
});
// Close on escape
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") closeMenu();
});
// Close if clicking outside
document.addEventListener("click", (e) => {
if (!menu.contains(e.target) && !btn.contains(e.target)) {
closeMenu();
}
});
})();
</script>
{% endblock %}
</body>
</html>