rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
banyaro/backend/static/index.html
rene ebe4ce20cf Sprint 10: OSM-POI-Cache, Karten-Clustering, Routen-Redesign 
Karte (map.js):
- OSM Overpass API: Restaurants, Tierärzte, Parkplätze, Bänke, Wasserstellen
- Leaflet.markercluster für alle OSM-Layer
- Standort-Dot mit GPS-Genauigkeitskreis, Wake-Lock bei Aufzeichnung
- Community-Pins setzen/löschen, Meldungen, Crosshair-Placement
- Layer-Sichtbarkeit in localStorage (by_map_visible_v1)

Routen (routes.js + routen.py):
- Komoot-Stil: SVG-Track-Preview, Foto-Upload, Nearby-POIs im Detail-Modal
- Neue Felder: is_public, hunde_tauglichkeit, foto_urls
- Rate-Endpoint (POST /api/routes/{id}/rate)
- Foto-Upload (POST /api/routes/{id}/photo)
- Fix: json_extract $[-1] → $[#-1] (SQLite-kompatibler Pfad für letztes Element)

Backend (osm.py, database.py, scheduler.py):
- /api/osm/pois: OSM-Overpass-Cache mit Tile-Logik (14 Tage TTL)
- /api/osm/user-poi: Community-Marker CRUD
- /api/osm/report: Marker als ungültig melden
- Neue Tabellen: osm_pois, osm_tiles, user_map_pois, osm_reports
- Giftköder-Archiv-Job (täglich 03:00, soft-delete nach Ablauf)
- Giftköder-Archiv-Job als APScheduler-CronJob

UI: Orte-Menüpunkt entfernt (in Karte integriert), APP_VER auf 62
2026-04-15 16:30:10 +02:00

232 lines
7.9 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#C4843A">
<meta name="description" content="Ban Yaro — Die Hunde-Plattform. Alles rund um deinen Hund.">
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png">
<!-- PWA -->
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180.png">
<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="Ban Yaro">
<title>Ban Yaro</title>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/layout.css?v=62">
<link rel="stylesheet" href="/css/components.css?v=62">
</head>
<body>
<!-- Backdrop + Sidebar direkt im body (kein Ancestor-Stacking-Context) -->
<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
<nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
<div class="sidebar-logo" id="sidebar-dog-switcher">
<img class="sidebar-logo-img" src="/icons/icon-180.png" alt="Ban Yaro">
<span class="sidebar-logo-text">Ban Yaro</span>
</div>
<div class="sidebar-add">
<button class="btn btn-primary btn-full" id="sidebar-add">+ Neu erstellen</button>
</div>
<div class="sidebar-nav">
<span class="sidebar-section-label">Mein Hund</span>
<div class="sidebar-item active" data-page="diary">
<span class="sidebar-item-icon">📖</span> Tagebuch
</div>
<div class="sidebar-item" data-page="health">
<span class="sidebar-item-icon">💉</span> Gesundheit
</div>
<span class="sidebar-section-label">Entdecken</span>
<div class="sidebar-item" data-page="map">
<span class="sidebar-item-icon">🗺️</span> Karte
</div>
<div class="sidebar-item" data-page="routes">
<span class="sidebar-item-icon">🥾</span> Routen
</div>
<div class="sidebar-item" data-page="events">
<span class="sidebar-item-icon">🎯</span> Events
</div>
<span class="sidebar-section-label">Community</span>
<div class="sidebar-item" data-page="poison">
<span class="sidebar-item-icon">⚠️</span> Giftköder
<span class="sidebar-item-badge" id="poison-badge" style="display:none">0</span>
</div>
<div class="sidebar-item" data-page="walks">
<span class="sidebar-item-icon">🦮</span> Gassi-Treffen
</div>
<div class="sidebar-item" data-page="sitting">
<span class="sidebar-item-icon">🏠</span> Sitting
</div>
<div class="sidebar-item" data-page="forum">
<span class="sidebar-item-icon">💬</span> Forum
</div>
<span class="sidebar-section-label">Wissen</span>
<div class="sidebar-item" data-page="wiki">
<span class="sidebar-item-icon">📚</span> Wiki
</div>
<div class="sidebar-item" data-page="knigge">
<span class="sidebar-item-icon">🤝</span> Knigge
</div>
<div class="sidebar-item" data-page="movies">
<span class="sidebar-item-icon">🎬</span> Filme
</div>
<div class="sidebar-item sidebar-item--user" id="sidebar-user">
<span class="sidebar-item-icon">👤</span>
<span id="sidebar-username">Anmelden</span>
</div>
</div>
</nav>
<!-- ============================================================
APP SHELL
============================================================ -->
<div id="app">
<!-- MOBILE HEADER -->
<header id="app-header">
<button class="header-back hidden" id="header-back" aria-label="Zurück">&#8592;</button>
<div id="header-dog-switcher" class="dog-switcher">
<span class="header-title" id="header-title">Ban Yaro</span>
</div>
<div id="header-actions"></div>
<button class="header-menu-btn" id="header-menu-btn" aria-label="Menü">☰</button>
</header>
<!-- HAUPT-INHALTSBEREICH -->
<main id="page-content" role="main">
<!-- Jede Seite ist ein <section class="page"> -->
<section class="page active" id="page-diary">
<div class="page-body page-container">
<!-- wird von diary.js befüllt -->
</div>
</section>
<section class="page" id="page-health">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-dog-profile">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-map">
<div class="page-body page-container-wide"></div>
</section>
<section class="page" id="page-routes">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-events">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-poison">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-walks">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-sitting">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-forum">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-wiki">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-knigge">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-movies">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-settings">
<div class="page-body page-container"></div>
</section>
</main>
<!-- MOBILE BOTTOM NAVIGATION -->
<nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation">
<div class="nav-item active" data-page="diary">
<span class="nav-item-icon">📖</span>
<span class="nav-item-label">Tagebuch</span>
</div>
<div class="nav-item" data-page="health">
<span class="nav-item-icon">💉</span>
<span class="nav-item-label">Gesundheit</span>
</div>
<!-- Mittlerer + Button -->
<div class="nav-item nav-item-center" id="nav-add">
<span class="nav-item-icon">+</span>
</div>
<div class="nav-item" data-page="poison">
<span class="nav-item-icon">
⚠️
<span class="nav-badge hidden" id="poison-nav-badge">0</span>
</span>
<span class="nav-item-label">Alarm</span>
</div>
<div class="nav-item" data-page="settings">
<span class="nav-item-icon">👤</span>
<span class="nav-item-label">Ich</span>
</div>
</nav>
</div><!-- #app -->
<!-- TOAST CONTAINER (außerhalb der App, immer sichtbar) -->
<div class="toast-container" id="toast-container" role="alert" aria-live="polite"></div>
<!-- MODAL CONTAINER -->
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=62"></script>
<script src="/js/ui.js?v=62"></script>
<script src="/js/app.js?v=62"></script>
<!-- Feature-Seiten werden lazy geladen -->
<!-- Service Worker -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.catch(err => console.log('SW Registration failed:', err));
});
// Wenn ein neuer SW die Kontrolle übernimmt (nach Update),
// Seite neu laden — sonst hat app.js neue Seiten-JS aber altes api.js im Speicher.
navigator.serviceWorker.addEventListener('controllerchange', () => {
window.location.reload();
});
}
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink