Sprint 11: Freunde & Chat + Phosphor-Icon-Vollmigration

- Freundschaften (pending/accepted), Nutzersuche, Anfragen per Push
- Direktnachrichten mit Polling, iMessage-Stil, Deep-Links aus Push
- Alle Seiten (map, places, diary, health, dog-profile, sitting, knigge,
  forum, wiki, walks) vollständig auf Phosphor-Icons migriert
- Wikidata-Rassen-Scraper (~833 neue Rassen, lokal gespiegelte Fotos)
- TheDogAPI lokal gespiegelt (169 Rassen + Fotos)
- Quiz-Result-Cards horizontal (korrekte Bildproportionen)
- SW by-v89
This commit is contained in:
rene 2026-04-15 21:33:53 +02:00
parent 96bd57f0ad
commit 097295c628
44 changed files with 9980 additions and 300 deletions

View file

@ -22,8 +22,8 @@
<!-- 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">
<link rel="stylesheet" href="/css/layout.css?v=65">
<link rel="stylesheet" href="/css/components.css?v=65">
</head>
<body>
@ -43,50 +43,64 @@
<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
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg> Tagebuch
</div>
<div class="sidebar-item" data-page="health">
<span class="sidebar-item-icon">💉</span> Gesundheit
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#syringe"></use></svg> Gesundheit
</div>
<span class="sidebar-section-label">Entdecken</span>
<div class="sidebar-item" data-page="map">
<span class="sidebar-item-icon">🗺️</span> Karte
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg> Karte
</div>
<div class="sidebar-item" data-page="routes">
<span class="sidebar-item-icon">🥾</span> Routen
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#path"></use></svg> Routen
</div>
<div class="sidebar-item" data-page="events">
<span class="sidebar-item-icon">🎯</span> Events
<div class="sidebar-item" data-page="events">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-dots"></use></svg> Events
</div>
<span class="sidebar-section-label">Soziales</span>
<div class="sidebar-item" data-page="friends">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#users"></use></svg> Freunde
<span class="sidebar-item-badge" id="friends-badge" style="display:none">0</span>
</div>
<div class="sidebar-item" data-page="chat">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#chat-circle-dots"></use></svg> Nachrichten
<span class="sidebar-item-badge" id="chat-badge" style="display:none">0</span>
</div>
<span class="sidebar-section-label">Community</span>
<div class="sidebar-item" data-page="poison">
<span class="sidebar-item-icon">⚠️</span> Giftköder
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning-octagon"></use></svg> 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
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#paw-print"></use></svg> Gassi-Treffen
</div>
<div class="sidebar-item" data-page="sitting">
<span class="sidebar-item-icon">🏠</span> Sitting
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#house-line"></use></svg> Sitting
</div>
<div class="sidebar-item" data-page="forum">
<span class="sidebar-item-icon">💬</span> Forum
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#chat-circle-dots"></use></svg> Forum
</div>
<div class="sidebar-item" data-page="lost">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg> Verlorener Hund
<span class="sidebar-item-badge" id="lost-badge" style="display:none">0</span>
</div>
<span class="sidebar-section-label">Wissen</span>
<div class="sidebar-item" data-page="wiki">
<span class="sidebar-item-icon">📚</span> Wiki
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#books"></use></svg> Wiki
</div>
<div class="sidebar-item" data-page="knigge">
<span class="sidebar-item-icon">🤝</span> Knigge
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#handshake"></use></svg> Knigge
</div>
<div class="sidebar-item" data-page="movies">
<span class="sidebar-item-icon">🎬</span> Filme
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#film-slate"></use></svg> Filme
</div>
<div class="sidebar-item sidebar-item--user" id="sidebar-user">
<span class="sidebar-item-icon">👤</span>
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user"></use></svg>
<span id="sidebar-username">Anmelden</span>
</div>
</div>
@ -99,12 +113,12 @@
<!-- MOBILE HEADER -->
<header id="app-header">
<button class="header-back hidden" id="header-back" aria-label="Zurück">&#8592;</button>
<button class="header-back hidden" id="header-back" aria-label="Zurück"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrow-left"></use></svg></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>
<button class="header-menu-btn" id="header-menu-btn" aria-label="Menü"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#list"></use></svg></button>
</header>
<!-- HAUPT-INHALTSBEREICH -->
@ -165,35 +179,47 @@
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-lost">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-settings">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-friends">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-chat">
<div class="page-body page-container-chat"></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>
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
<span class="nav-item-label">Tagebuch</span>
</div>
<div class="nav-item" data-page="health">
<span class="nav-item-icon">💉</span>
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#syringe"></use></svg>
<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>
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#plus"></use></svg>
</div>
<div class="nav-item" data-page="poison">
<span class="nav-item-icon">
⚠️
<span style="position:relative;display:inline-flex">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning-octagon"></use></svg>
<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>
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#gear"></use></svg>
<span class="nav-item-label">Ich</span>
</div>
</nav>
@ -207,9 +233,9 @@
<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>
<script src="/js/api.js?v=65"></script>
<script src="/js/ui.js?v=65"></script>
<script src="/js/app.js?v=65"></script>
<!-- Feature-Seiten werden lazy geladen -->