rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Icons Runde 2: poison/wiki/movies/social + 16 Sprite-Icons — SW by-v416

Browse source 
Sprite: thermometer-hot, heartbeat, bone, lightning, plant, pill,
        circle-dashed, stethoscope, backpack (erste-hilfe),
        music-notes, lightbulb, sparkle, link-simple, globe,
        heart-straight, check-circle (social/movies)

poison.js:  ✅ → check-circle (Bestätigt-Badge, Button, Popup, Toast)
wiki.js:    📸 → camera (Community-Fotos Heading)
movies.js:  ✅⚠️★🐾🎬⭐ → check-circle/warning/star/paw-print/film-slate
social.js:  🎵📸🌐 Plattformen, ✓👁📌✨🏷🔗✅🤍💬↗️ → Phosphor
This commit is contained in:
rene 2026-04-26 09:36:31 +02:00
parent fd76eddfb9
commit 231f7976c5
7 changed files with 78 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

32
backend/static/icons/phosphor.svg
View file

@ -126,4 +126,36 @@
<symbol id="trend-down" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128v64a8,8,0,0,1-8,8H168a8,8,0,0,1-5.66-13.66L188.69,160,136,107.31l-34.34,34.35a8,8,0,0,1-11.32,0l-72-72A8,8,0,0,1,29.66,58.34L96,124.69l34.34-34.35a8,8,0,0,1,11.32,0L200,148.69l26.34-26.35A8,8,0,0,1,240,128Z"/></symbol> <symbol id="trend-down" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128v64a8,8,0,0,1-8,8H168a8,8,0,0,1-5.66-13.66L188.69,160,136,107.31l-34.34,34.35a8,8,0,0,1-11.32,0l-72-72A8,8,0,0,1,29.66,58.34L96,124.69l34.34-34.35a8,8,0,0,1,11.32,0L200,148.69l26.34-26.35A8,8,0,0,1,240,128Z"/></symbol>
<symbol id="trend-up" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,56v64a8,8,0,0,1-13.66,5.66L200,99.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,188.69,88,162.34,61.66A8,8,0,0,1,168,48h64A8,8,0,0,1,240,56Z"/></symbol> <symbol id="trend-up" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,56v64a8,8,0,0,1-13.66,5.66L200,99.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,188.69,88,162.34,61.66A8,8,0,0,1,168,48h64A8,8,0,0,1,240,56Z"/></symbol>
<symbol id="thermometer-hot" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M152,146.08V40a32,32,0,0,0-64,0V146.08a56,56,0,1,0,64,0ZM136,56H104V40a16,16,0,0,1,32,0Zm41.3,24.77a8,8,0,0,1,2.33-11.07c15-9.79,26.87-4.75,35.51-1.06C223,72,227.76,74,235.63,68.89a8,8,0,0,1,8.74,13.41C237.88,86.53,232,88,226.69,88c-7,0-12.92-2.54-17.83-4.63C201,80,196.24,78,188.37,83.11A8,8,0,0,1,177.3,80.77Zm69.4,22.46a8,8,0,0,1-2.33,11.07C237.88,118.53,232,120,226.69,120c-7,0-12.92-2.54-17.83-4.63-7.87-3.36-12.62-5.38-20.49-.25a8,8,0,0,1-8.74-13.41c15-9.79,26.87-4.75,35.51-1.06,7.87,3.36,12.62,5.39,20.49.25A8,8,0,0,1,246.7,103.23Z"/></symbol>
<symbol id="heartbeat" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0c-3.35-1.8-63.55-34.69-92.68-80.89A4,4,0,0,1,34.92,144H72a8,8,0,0,0,6.66-3.56l9.34-14,25.34,38a8,8,0,0,0,9.16,3.16,8.17,8.17,0,0,0,4.27-3.34L140.28,144H160a8,8,0,0,0,8-8.53,8.18,8.18,0,0,0-8.25-7.47H136a8,8,0,0,0-6.66,3.56l-9.34,14-25.34-38a8,8,0,0,0-9.16-3.16,8.17,8.17,0,0,0-4.27,3.34L67.72,128H23.53a4,4,0,0,1-3.83-2.81A76.93,76.93,0,0,1,16,102,62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z"/></symbol>
<symbol id="bone" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M231.12,107.72a35.91,35.91,0,0,1-46.19,6.8.14.14,0,0,0-.1,0l-70.35,70.36s0,0,0,.08a36,36,0,1,1-66.37,22.92,36,36,0,1,1,22.92-66.37.14.14,0,0,0,.1,0l70.35-70.36s0,0,0-.08a36,36,0,1,1,66.37-22.92,36,36,0,0,1,23.27,59.57Z"/></symbol>
<symbol id="lightning" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M213.85,125.46l-112,120a8,8,0,0,1-13.69-7l14.66-73.33L45.19,143.49a8,8,0,0,1-3-13l112-120a8,8,0,0,1,13.69,7L153.18,90.9l57.63,21.61a8,8,0,0,1,3,12.95Z"/></symbol>
<symbol id="plant" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M205.41,159.07a60.9,60.9,0,0,1-31.83,8.86,71.71,71.71,0,0,1-27.36-5.66A55.55,55.55,0,0,0,136,194.51V224a8,8,0,0,1-8.53,8,8.18,8.18,0,0,1-7.47-8.25V211.31L81.38,172.69A52.5,52.5,0,0,1,63.44,176a45.82,45.82,0,0,1-23.92-6.67C17.73,156.09,6,125.62,8.27,87.79a8,8,0,0,1,7.52-7.52c37.83-2.23,68.3,9.46,81.5,31.25A46,46,0,0,1,103.74,140a4,4,0,0,1-6.89,2.43l-19.2-20.1a8,8,0,0,0-11.31,11.31l53.88,55.25c.06-.78.13-1.56.21-2.33a68.56,68.56,0,0,1,18.64-39.46l50.59-53.46a8,8,0,0,0-11.31-11.32l-49,51.82a4,4,0,0,1-6.78-1.74c-4.74-17.48-2.65-34.88,6.4-49.82,17.86-29.48,59.42-45.26,111.18-42.22a8,8,0,0,1,7.52,7.52C250.67,99.65,234.89,141.21,205.41,159.07Z"/></symbol>
<symbol id="pill" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M216.43,39.6a53.27,53.27,0,0,0-75.33,0L39.6,141.09a53.26,53.26,0,0,0,75.32,75.31L216.43,114.91A53.32,53.32,0,0,0,216.43,39.6Zm-11.32,64-50.75,50.74-52.69-52.68,50.75-50.75a37.26,37.26,0,0,1,52.69,52.69ZM189.68,82.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,1,1-11.31-11.32l24-24A8,8,0,0,1,189.68,82.34Z"/></symbol>
<symbol id="circle-dashed" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm54.59,45a8,8,0,0,1,11.29.7,88,88,0,0,1,17.6,30.47,8,8,0,0,1-15.18,5.08,71.87,71.87,0,0,0-14.4-25A8,8,0,0,1,182.59,69ZM73.41,187.05a8,8,0,0,1-11.29-.7,88,88,0,0,1-17.6-30.47A8,8,0,1,1,59.7,150.8a71.87,71.87,0,0,0,14.4,24.95A8,8,0,0,1,73.41,187.05Zm.69-106.8a71.87,71.87,0,0,0-14.4,25,8,8,0,1,1-15.18-5.08,88,88,0,0,1,17.6-30.47,8,8,0,1,1,12,10.6Zm71.49,134a87.8,87.8,0,0,1-35.18,0,8,8,0,0,1,3.18-15.68,72.08,72.08,0,0,0,28.82,0,8,8,0,0,1,3.18,15.68Zm6.25-163A8,8,0,0,1,144,57.61a7.89,7.89,0,0,1-1.6-.16,72.08,72.08,0,0,0-28.82,0,8,8,0,1,1-3.18-15.68,87.92,87.92,0,0,1,35.18,0A8,8,0,0,1,151.84,51.2Zm59.64,104.68a88,88,0,0,1-17.6,30.47,8,8,0,1,1-12-10.6,71.87,71.87,0,0,0,14.4-24.95,8,8,0,0,1,15.18,5.08Z"/></symbol>
<symbol id="stethoscope" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,160a32,32,0,1,0-39.93,31,8,8,0,0,0-.07,1,32,32,0,0,1-32,32H144a32,32,0,0,1-32-32V151.48c31.47-4,56-31.47,56-64.31V40a8,8,0,0,0-8-8H136a8,8,0,0,0,0,16h16V87.17c0,26.58-21.25,48.49-47.36,48.83A48,48,0,0,1,56,88V48H72a8,8,0,0,0,0-16H48a8,8,0,0,0-8,8V88a64,64,0,0,0,56,63.49V192a48.05,48.05,0,0,0,48,48h24a48.05,48.05,0,0,0,48-48,8,8,0,0,0-.07-1A32,32,0,0,0,240,160Zm-32,8a8,8,0,1,1,8-8A8,8,0,0,1,208,168Z"/></symbol>
<symbol id="backpack" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M168,40.58V32A24,24,0,0,0,144,8H112A24,24,0,0,0,88,32v8.58A56.09,56.09,0,0,0,40,96V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V96A56.09,56.09,0,0,0,168,40.58ZM104,32a8,8,0,0,1,8-8h32a8,8,0,0,1,8,8v8H104Zm8,40h32a8,8,0,0,1,0,16H112a8,8,0,0,1,0-16Zm64,144H80V176h56v8a8,8,0,0,0,16,0v-8h24Zm0-56H80v-8a16,16,0,0,1,16-16h64a16,16,0,0,1,16,16Z"/></symbol>
<symbol id="music-notes" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M212.92,17.71a7.89,7.89,0,0,0-6.86-1.46l-128,32A8,8,0,0,0,72,56V166.1A36,36,0,1,0,88,196V102.25l112-28V134.1A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.71Z"/></symbol>
<symbol id="lightbulb" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-32.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"/></symbol>
<symbol id="sparkle" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"/></symbol>
<symbol id="link-simple" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM144.56,173.66l-21.45,21.45a44,44,0,0,1-62.22-62.22l21.45-21.46a8,8,0,0,1,11.32,11.31L72.2,144.2a28,28,0,0,0,39.6,39.6l21.45-21.46a8,8,0,0,1,11.31,11.32Zm-34.9-16a8,8,0,0,1-11.32-11.32l48-48a8,8,0,0,1,11.32,11.32Zm85.45-34.55-21.45,21.45a8,8,0,0,1-11.32-11.31L183.8,111.8a28,28,0,0,0-39.6-39.6L122.74,93.66a8,8,0,0,1-11.31-11.32l21.46-21.45a44,44,0,0,1,62.22,62.22Z"/></symbol>
<symbol id="globe" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm78.36,64H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM216,128a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM128,43a115.27,115.27,0,0,1,26,45H102A115.11,115.11,0,0,1,128,43ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48Zm50.35,61.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"/></symbol>
<symbol id="heart-straight" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,98a57.63,57.63,0,0,1-17,41L133.7,229.62a8,8,0,0,1-11.4,0L33,139a58,58,0,0,1,82-82.1L128,69.05l13.09-12.19A58,58,0,0,1,240,98Z"/></symbol>
<symbol id="star-four" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.94,166.06,26.5,143a16,16,0,0,1,0-30L89.94,89.94,113,26.5a16,16,0,0,1,30,0l23.07,63.44L229.5,113A15.79,15.79,0,0,1,240,128Z"/></symbol>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 56 KiB

Before After
Before After

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '394'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '395'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => { const App = (() => {

24
backend/static/js/pages/movies.js
View file

@ -74,16 +74,16 @@ window.Page_movies = (() => {
try { try {
_filme = await API.get('/movies/filme'); _filme = await API.get('/movies/filme');
} catch { } catch {
content.innerHTML = UI.emptyState({ icon: '🎬', title: 'Filme konnten nicht geladen werden', text: 'Bitte versuche es erneut.' }); content.innerHTML = UI.emptyState({ icon: 'film-slate', title: 'Filme konnten nicht geladen werden', text: 'Bitte versuche es erneut.' });
return; return;
} }
content.innerHTML = ` content.innerHTML = `
<div class="movies-filter-row"> <div class="movies-filter-row">
<button class="movies-filter-btn${_filter === 'alle' ? ' movies-filter-btn--active' : ''}" data-filter="alle">Alle</button> <button class="movies-filter-btn${_filter === 'alle' ? ' movies-filter-btn--active' : ''}" data-filter="alle">Alle</button>
<button class="movies-filter-btn${_filter === 'stirbt' ? ' movies-filter-btn--active' : ''}" data-filter="stirbt">😭 Hund stirbt</button> <button class="movies-filter-btn${_filter === 'stirbt' ? ' movies-filter-btn--active' : ''}" data-filter="stirbt"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#warning"></use></svg> Hund stirbt</button>
<button class="movies-filter-btn${_filter === 'ueberlebt' ? ' movies-filter-btn--active' : ''}" data-filter="ueberlebt">🐾 Hund überlebt</button> <button class="movies-filter-btn${_filter === 'ueberlebt' ? ' movies-filter-btn--active' : ''}" data-filter="ueberlebt"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#paw-print"></use></svg> Hund überlebt</button>
<button class="movies-filter-btn${_filter === 'top' ? ' movies-filter-btn--active' : ''}" data-filter="top">⭐⭐⭐⭐+</button> <button class="movies-filter-btn${_filter === 'top' ? ' movies-filter-btn--active' : ''}" data-filter="top"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#star"></use></svg><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#star"></use></svg><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#star"></use></svg><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#star"></use></svg>+</button>
</div> </div>
<div class="movie-grid" id="movie-grid"></div> <div class="movie-grid" id="movie-grid"></div>
`; `;
@ -130,8 +130,8 @@ window.Page_movies = (() => {
function _movieCard(film) { function _movieCard(film) {
const stirbt = film.stirbt_der_hund; const stirbt = film.stirbt_der_hund;
const tag = stirbt const tag = stirbt
? `<div class="movie-tag-stirbt">⚠️ ACHTUNG: Der Hund stirbt</div>` ? `<div class="movie-tag-stirbt"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg> ACHTUNG: Der Hund stirbt</div>`
: `<div class="movie-tag-ueberlebt">✅ Der Hund überlebt</div>`; : `<div class="movie-tag-ueberlebt"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg> Der Hund überlebt</div>`;
const stars = _starsHtml(film.bewertung_avg, film.id, film.user_rating, false); const stars = _starsHtml(film.bewertung_avg, film.id, film.user_rating, false);
return ` return `
@ -140,7 +140,7 @@ window.Page_movies = (() => {
<div class="movie-card-body"> <div class="movie-card-body">
<div class="movie-card-title">${_esc(film.titel)} <span class="movie-card-year">(${film.jahr})</span></div> <div class="movie-card-title">${_esc(film.titel)} <span class="movie-card-year">(${film.jahr})</span></div>
<div class="movie-card-genre">${_esc(film.genre)}</div> <div class="movie-card-genre">${_esc(film.genre)}</div>
<div class="movie-card-rasse">🐾 ${_esc(film.hund_rasse)}</div> <div class="movie-card-rasse"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#paw-print"></use></svg> ${_esc(film.hund_rasse)}</div>
${tag} ${tag}
<div class="movie-card-stars">${stars}</div> <div class="movie-card-stars">${stars}</div>
</div> </div>
@ -151,7 +151,7 @@ window.Page_movies = (() => {
function _openMovieModal(film) { function _openMovieModal(film) {
const stirbt = film.stirbt_der_hund; const stirbt = film.stirbt_der_hund;
const bannerClass = stirbt ? 'movie-tag-stirbt' : 'movie-tag-ueberlebt'; const bannerClass = stirbt ? 'movie-tag-stirbt' : 'movie-tag-ueberlebt';
const bannerText = stirbt ? '⚠️ ACHTUNG: Der Hund stirbt!' : '✅ Der Hund überlebt'; const bannerText = stirbt ? '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg> ACHTUNG: Der Hund stirbt!' : '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg> Der Hund überlebt';
const stars = _starsHtml(film.bewertung_avg, film.id, film.user_rating, true); const stars = _starsHtml(film.bewertung_avg, film.id, film.user_rating, true);
const loginHint = !_appState.user const loginHint = !_appState.user
@ -162,7 +162,7 @@ window.Page_movies = (() => {
<div class="movie-modal-emoji">${film.bild_emoji}</div> <div class="movie-modal-emoji">${film.bild_emoji}</div>
<div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)"> <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)">
<span class="badge badge-primary">${_esc(film.genre)}</span> <span class="badge badge-primary">${_esc(film.genre)}</span>
<span class="badge">🐾 ${_esc(film.hund_rasse)}</span> <span class="badge"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#paw-print"></use></svg> ${_esc(film.hund_rasse)}</span>
<span class="badge">${film.jahr}</span> <span class="badge">${film.jahr}</span>
</div> </div>
<div class="${bannerClass}" style="margin-bottom:var(--space-4);font-size:var(--text-base)">${bannerText}</div> <div class="${bannerClass}" style="margin-bottom:var(--space-4);font-size:var(--text-base)">${bannerText}</div>
@ -189,7 +189,7 @@ window.Page_movies = (() => {
const filled = Math.round(avg); const filled = Math.round(avg);
const stars = [1,2,3,4,5].map(i => { const stars = [1,2,3,4,5].map(i => {
const active = i <= (userRating || filled) ? ' movie-star--active' : ''; const active = i <= (userRating || filled) ? ' movie-star--active' : '';
return `<span class="movie-star${active}" data-film-id="${_esc(filmId)}" data-val="${i}">★</span>`; return `<span class="movie-star${active}" data-film-id="${_esc(filmId)}" data-val="${i}"><svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#star"></use></svg></span>`;
}).join(''); }).join('');
return `<div class="movie-star-rating" data-film-id="${_esc(filmId)}">${stars} <span class="movie-star-avg">${avg}</span></div>`; return `<div class="movie-star-rating" data-film-id="${_esc(filmId)}">${stars} <span class="movie-star-avg">${avg}</span></div>`;
} }
@ -305,7 +305,7 @@ window.Page_movies = (() => {
<div class="hdm-vote-name">${_esc(dog.name)}</div> <div class="hdm-vote-name">${_esc(dog.name)}</div>
${dog.rasse ? `<div class="hdm-vote-rasse">${_esc(dog.rasse)}</div>` : ''} ${dog.rasse ? `<div class="hdm-vote-rasse">${_esc(dog.rasse)}</div>` : ''}
<button class="btn${isVoted ? ' btn-primary' : ' btn-secondary'} hdm-vote-btn" data-dog-id="${dog.id}"> <button class="btn${isVoted ? ' btn-primary' : ' btn-secondary'} hdm-vote-btn" data-dog-id="${dog.id}">
${isVoted ? '✅ Gewählt' : 'Abstimmen'} ${isVoted ? '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg> Gewählt' : 'Abstimmen'}
</button> </button>
</div> </div>
`; `;
@ -344,7 +344,7 @@ window.Page_movies = (() => {
${dog.rasse ? `<div class="hdm-top-rasse">${_esc(dog.rasse)}</div>` : ''} ${dog.rasse ? `<div class="hdm-top-rasse">${_esc(dog.rasse)}</div>` : ''}
${vorname ? `<div class="hdm-top-besitzer">von ${vorname}</div>` : ''} ${vorname ? `<div class="hdm-top-besitzer">von ${vorname}</div>` : ''}
</div> </div>
<div class="hdm-top-stimmen">${dog.stimmen} ⭐</div> <div class="hdm-top-stimmen">${dog.stimmen} <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#star"></use></svg></div>
</div> </div>
`; `;
}).join('') }).join('')

12
backend/static/js/pages/poison.js
View file

@ -206,7 +206,7 @@ window.Page_poison = (() => {
${r.beschreibung ? UI.escape(r.beschreibung.slice(0, 80)) + '<br>' : ''} ${r.beschreibung ? UI.escape(r.beschreibung.slice(0, 80)) + '<br>' : ''}
<small>📍 ${distStr} entfernt</small><br> <small>📍 ${distStr} entfernt</small><br>
<small>📅 ${_fmtDate(r.created_at)}</small> <small>📅 ${_fmtDate(r.created_at)}</small>
${r.bestaetigt ? '<br><small>✅ Bestätigt</small>' : ''} ${r.bestaetigt ? '<br><small><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</small>' : ''}
`); `);
marker.on('click', () => _openDetail(r)); marker.on('click', () => _openDetail(r));
@ -223,7 +223,7 @@ window.Page_poison = (() => {
if (_reports.length === 0) { if (_reports.length === 0) {
listEl.innerHTML = UI.emptyState({ listEl.innerHTML = UI.emptyState({
icon : '✅', icon : 'check-circle',
title : 'Alles sicher', title : 'Alles sicher',
text : 'In deiner Nähe (10 km) gibt es aktuell keine Giftköder-Meldungen.', text : 'In deiner Nähe (10 km) gibt es aktuell keine Giftköder-Meldungen.',
action: `<button class="btn btn-danger" id="poison-empty-report">⚠️ Trotzdem melden</button>`, action: `<button class="btn btn-danger" id="poison-empty-report">⚠️ Trotzdem melden</button>`,
@ -260,7 +260,7 @@ window.Page_poison = (() => {
<span class="badge" <span class="badge"
style="background:${typ.color};color:#fff">${typ.label}</span> style="background:${typ.color};color:#fff">${typ.label}</span>
${r.bestaetigt ${r.bestaetigt
? '<span class="badge badge-success">✅ Bestätigt</span>' ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>'
: ''} : ''}
<span style="margin-left:auto;color:var(--c-text-secondary); <span style="margin-left:auto;color:var(--c-text-secondary);
font-size:var(--text-sm);white-space:nowrap"> font-size:var(--text-sm);white-space:nowrap">
@ -307,7 +307,7 @@ window.Page_poison = (() => {
<span class="badge" style="background:${typ.color};color:#fff"> <span class="badge" style="background:${typ.color};color:#fff">
${UI.icon(typ.icon)} ${typ.label} ${UI.icon(typ.icon)} ${typ.label}
</span> </span>
${r.bestaetigt ? '<span class="badge badge-success">✅ Bestätigt</span>' : ''} ${r.bestaetigt ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>' : ''}
</div> </div>
${r.beschreibung ${r.beschreibung
@ -324,7 +324,7 @@ window.Page_poison = (() => {
<div style="display:flex;gap:var(--space-2);flex-wrap:wrap"> <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
${!r.bestaetigt && _appState.user && !isOwnEntry ${!r.bestaetigt && _appState.user && !isOwnEntry
? `<button class="btn btn-secondary flex-1" id="detail-confirm">✅ Bestätigen</button>` ? `<button class="btn btn-secondary flex-1" id="detail-confirm"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigen</button>`
: ''} : ''}
<button class="btn btn-secondary flex-1" id="detail-show-map">🗺️ Auf Karte</button> <button class="btn btn-secondary flex-1" id="detail-show-map">🗺️ Auf Karte</button>
${isOwnEntry || isAdmin ${isOwnEntry || isAdmin
@ -380,7 +380,7 @@ window.Page_poison = (() => {
<div class="form-group"> <div class="form-group">
<label class="form-label">Grund</label> <label class="form-label">Grund</label>
<select class="form-control" id="resolve-grund"> <select class="form-control" id="resolve-grund">
<option value="beseitigt">✅ Gefahr wurde beseitigt</option> <option value="beseitigt">Gefahr wurde beseitigt</option>
<option value="fehlerhaft">❌ Meldung war fehlerhaft</option> <option value="fehlerhaft">❌ Meldung war fehlerhaft</option>
<option value="anderes">💬 Anderer Grund</option> <option value="anderes">💬 Anderer Grund</option>
</select> </select>

50
backend/static/js/pages/social.js
View file

@ -8,8 +8,8 @@ window.Page_social = (() => {
const _SC = { idea:'var(--c-text-muted)', draft:'var(--c-warning)', const _SC = { idea:'var(--c-text-muted)', draft:'var(--c-warning)',
scheduled:'var(--c-primary)', published:'var(--c-success)', scheduled:'var(--c-primary)', published:'var(--c-success)',
archived:'var(--c-text-muted)' }; archived:'var(--c-text-muted)' };
const _FL = { reel:'🎬 Reel', story:'⭕ Story', post:'🖼 Post', carousel:'🎠 Carousel' }; const _FL = { reel:'<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#film-slate"></use></svg> Reel', story:'⭕ Story', post:'🖼 Post', carousel:'🎠 Carousel' };
const _PL = { tiktok:'🎵 TikTok', instagram:'📸 Instagram', both:'🌐 Beide' }; const _PL = { tiktok:'<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#music-notes"></use></svg> TikTok', instagram:'<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#camera"></use></svg> Instagram', both:'<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#globe"></use></svg> Beide' };
// Luna-Wartebotschaften (alle 10s rotierend) // Luna-Wartebotschaften (alle 10s rotierend)
const _LUNA_MSGS = [ const _LUNA_MSGS = [
@ -18,7 +18,7 @@ window.Page_social = (() => {
['💡','Mir ist da was eingefallen…'], ['💡','Mir ist da was eingefallen…'],
['✍️','Ich arbeite das aus…'], ['✍️','Ich arbeite das aus…'],
['⏳','Kleinen Moment noch…'], ['⏳','Kleinen Moment noch…'],
['✨','Gleich hab ich es…'], ['<svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#sparkle"></use></svg>','Gleich hab ich es…'],
['🎯','Ich feile noch etwas dran…'], ['🎯','Ich feile noch etwas dran…'],
['🐾','Fast fertig für dich…'], ['🐾','Fast fertig für dich…'],
]; ];
@ -63,7 +63,7 @@ window.Page_social = (() => {
<!-- Tabs --> <!-- Tabs -->
<div style="display:flex;border-bottom:2px solid var(--c-border); <div style="display:flex;border-bottom:2px solid var(--c-border);
margin-bottom:var(--space-4)"> margin-bottom:var(--space-4)">
${[['idee','✨ Ideen'],['archiv','📂 Archiv'],['bewerten','🔍 Prüfen']].map(([t,l]) => ` ${[['idee','<svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#sparkle"></use></svg> Ideen'],['archiv','📂 Archiv'],['bewerten','🔍 Prüfen']].map(([t,l]) => `
<button class="sm-tab" data-tab="${t}" style="flex:1;padding:10px 4px;border:none; <button class="sm-tab" data-tab="${t}" style="flex:1;padding:10px 4px;border:none;
background:none;cursor:pointer;font-size:13px;white-space:nowrap; background:none;cursor:pointer;font-size:13px;white-space:nowrap;
border-bottom:3px solid ${_activeTab===t?'var(--c-primary)':'transparent'}; border-bottom:3px solid ${_activeTab===t?'var(--c-primary)':'transparent'};
@ -206,7 +206,7 @@ window.Page_social = (() => {
color:#fff;border-radius:var(--radius-md);padding:10px 14px; color:#fff;border-radius:var(--radius-md);padding:10px 14px;
margin-bottom:var(--space-4); margin-bottom:var(--space-4);
font-size:var(--text-sm);font-weight:600;text-align:center"> font-size:var(--text-sm);font-weight:600;text-align:center">
✓ Idee übernommen — prüf die Einstellungen und tippe auf <strong>Los geht's!</strong> 👇 <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#check"></use></svg> Idee übernommen — prüf die Einstellungen und tippe auf <strong>Los geht's!</strong> 👇
</div> </div>
<!-- Medien-Upload --> <!-- Medien-Upload -->
<div style="margin-bottom:var(--space-4)"> <div style="margin-bottom:var(--space-4)">
@ -315,7 +315,7 @@ window.Page_social = (() => {
<button id="sm-gen" class="btn btn-primary" <button id="sm-gen" class="btn btn-primary"
style="width:100%;min-height:52px;font-size:var(--text-base); style="width:100%;min-height:52px;font-size:var(--text-base);
border-radius:var(--radius-lg);box-shadow:var(--shadow-md)"> border-radius:var(--radius-lg);box-shadow:var(--shadow-md)">
✨ Los geht's! <svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#sparkle"></use></svg> Los geht's!
</button> </button>
<div id="sm-gen-result" style="margin-top:var(--space-4)"></div> <div id="sm-gen-result" style="margin-top:var(--space-4)"></div>
</div>`; </div>`;
@ -435,7 +435,7 @@ window.Page_social = (() => {
data-format="${idea.format||'post'}" data-format="${idea.format||'post'}"
data-platform="${idea.platform||'both'}" data-platform="${idea.platform||'both'}"
data-category="${_esc(idea.category||'')}"> data-category="${_esc(idea.category||'')}">
📌 Merken</button> <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#push-pin"></use></svg> Merken</button>
</div> </div>
</div> </div>
</div>`).join(''); </div>`).join('');
@ -473,12 +473,12 @@ window.Page_social = (() => {
platform: btn.dataset.platform, platform: btn.dataset.platform,
category: btn.dataset.category || undefined, category: btn.dataset.category || undefined,
}); });
btn.textContent = '✓ Gemerkt'; btn.textContent = '<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#check"></use></svg> Gemerkt';
btn.style.background = 'var(--c-success)'; btn.style.background = 'var(--c-success)';
btn.style.color = '#fff'; btn.style.color = '#fff';
btn.style.borderColor = 'var(--c-success)'; btn.style.borderColor = 'var(--c-success)';
} catch { } catch {
btn.textContent = '📌 Merken'; btn.textContent = '<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#push-pin"></use></svg> Merken';
btn.disabled = false; btn.disabled = false;
} }
}); });
@ -526,7 +526,7 @@ window.Page_social = (() => {
</div> </div>
<div style="display:flex;align-items:center;gap:6px;flex-shrink:0"> <div style="display:flex;align-items:center;gap:6px;flex-shrink:0">
${e.posts_count > 0 ? `<span style="font-size:10px;background:#10b981; ${e.posts_count > 0 ? `<span style="font-size:10px;background:#10b981;
color:#fff;padding:1px 6px;border-radius:4px">✓ ${e.posts_count}x</span>` : ''} color:#fff;padding:1px 6px;border-radius:4px"><svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#check"></use></svg> ${e.posts_count}x</span>` : ''}
<button class="btn btn-sm btn-primary sm-ex-use" <button class="btn btn-sm btn-primary sm-ex-use"
data-id="${e.exercise_id}" data-name="${_esc(e.name)}" data-id="${e.exercise_id}" data-name="${_esc(e.name)}"
style="font-size:11px;padding:4px 10px;min-height:28px"> style="font-size:11px;padding:4px 10px;min-height:28px">
@ -720,7 +720,7 @@ window.Page_social = (() => {
😬 Ups: ${_esc(e.message||String(e))}</div>`; 😬 Ups: ${_esc(e.message||String(e))}</div>`;
} finally { } finally {
btn.disabled = false; btn.disabled = false;
btn.innerHTML = '✨ Los geht\'s!'; btn.innerHTML = '<svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#sparkle"></use></svg> Los geht\'s!';
} }
}); });
} }
@ -793,7 +793,7 @@ window.Page_social = (() => {
if (bar) bar.style.width = '100%'; if (bar) bar.style.width = '100%';
if (pctEl) pctEl.textContent = '100%'; if (pctEl) pctEl.textContent = '100%';
if (txt) txt.textContent = '🎉 Fertig!'; if (txt) txt.textContent = '🎉 Fertig!';
if (emoji) emoji.textContent = '✨'; if (emoji) emoji.textContent = '<svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#sparkle"></use></svg>';
} }
// --------------------------------------------------------------- // ---------------------------------------------------------------
@ -823,7 +823,7 @@ window.Page_social = (() => {
margin-bottom:var(--space-3);flex-wrap:wrap"> margin-bottom:var(--space-3);flex-wrap:wrap">
<span style="background:var(--c-success-subtle);color:var(--c-success); <span style="background:var(--c-success-subtle);color:var(--c-success);
border-radius:var(--radius-full); border-radius:var(--radius-full);
padding:4px 12px;font-size:11px;font-weight:700">✓ Gespeichert</span> padding:4px 12px;font-size:11px;font-weight:700"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#check"></use></svg> Gespeichert</span>
${score ? `<span style="font-size:13px">${score}</span>` : ''} ${score ? `<span style="font-size:13px">${score}</span>` : ''}
</div> </div>
@ -841,7 +841,7 @@ window.Page_social = (() => {
data-id="${data.id}" data-id="${data.id}"
style="flex:1;font-size:12px;padding:6px 10px;min-height:36px; style="flex:1;font-size:12px;padding:6px 10px;min-height:36px;
border-radius:var(--radius-full)"> border-radius:var(--radius-full)">
👁 Vorschau</button> <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#eye"></use></svg> Vorschau</button>
</div> </div>
</div> </div>
<div id="sm-posted-form-${data.id}" style="display:none;background:var(--c-surface-2); <div id="sm-posted-form-${data.id}" style="display:none;background:var(--c-surface-2);
@ -868,7 +868,7 @@ window.Page_social = (() => {
</div> </div>
<button class="btn btn-primary sm-confirm-posted" data-id="${data.id}" <button class="btn btn-primary sm-confirm-posted" data-id="${data.id}"
style="min-height:40px"> style="min-height:40px">
✓ Bestätigen <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#check"></use></svg> Bestätigen
</button> </button>
</div> </div>
</div> </div>
@ -888,7 +888,7 @@ window.Page_social = (() => {
<div style="background:var(--c-surface);border:1px solid var(--c-border); <div style="background:var(--c-surface);border:1px solid var(--c-border);
border-radius:var(--radius-lg);padding:var(--space-4); border-radius:var(--radius-lg);padding:var(--space-4);
margin-bottom:var(--space-3);box-shadow:var(--shadow-xs)"> margin-bottom:var(--space-3);box-shadow:var(--shadow-xs)">
<div class="sm-label">🏷 Hashtags</div> <div class="sm-label"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#tag"></use></svg> Hashtags</div>
<div style="font-size:var(--text-sm);color:var(--c-primary);margin-bottom:var(--space-3); <div style="font-size:var(--text-sm);color:var(--c-primary);margin-bottom:var(--space-3);
line-height:1.9;word-break:break-word"> line-height:1.9;word-break:break-word">
${data.hashtags.split(',').map(h=>`#${h.trim()}`).join(' ')}</div> ${data.hashtags.split(',').map(h=>`#${h.trim()}`).join(' ')}</div>
@ -963,7 +963,7 @@ window.Page_social = (() => {
.replace(/&amp;/g,'&').replace(/&lt;/g,'<') .replace(/&amp;/g,'&').replace(/&lt;/g,'<')
.replace(/&gt;/g,'>').replace(/&quot;/g,'"'); .replace(/&gt;/g,'>').replace(/&quot;/g,'"');
navigator.clipboard?.writeText(text).then(() => { navigator.clipboard?.writeText(text).then(() => {
btn.textContent = '✓ Kopiert!'; btn.textContent = '<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#check"></use></svg> Kopiert!';
setTimeout(() => btn.textContent = '📋 Kopieren', 2000); setTimeout(() => btn.textContent = '📋 Kopieren', 2000);
}); });
}); });
@ -1063,7 +1063,7 @@ window.Page_social = (() => {
<!-- Actions --> <!-- Actions -->
<div style="padding:8px 12px"> <div style="padding:8px 12px">
<div style="display:flex;gap:14px;margin-bottom:6px;font-size:20px"> <div style="display:flex;gap:14px;margin-bottom:6px;font-size:20px">
<span>🤍</span><span>💬</span><span>↗️</span> <span><svg class="ph-icon" aria-hidden="true" style="width:20px;height:20px"><use href="/icons/phosphor.svg#heart-straight"></use></svg></span><span><svg class="ph-icon" aria-hidden="true" style="width:20px;height:20px"><use href="/icons/phosphor.svg#chat-circle"></use></svg></span><span><svg class="ph-icon" aria-hidden="true" style="width:20px;height:20px"><use href="/icons/phosphor.svg#arrow-square-out"></use></svg></span>
<span style="margin-left:auto">🔖</span> <span style="margin-left:auto">🔖</span>
</div> </div>
<div style="font-size:11px;font-weight:700;color:#000;margin-bottom:4px"> <div style="font-size:11px;font-weight:700;color:#000;margin-bottom:4px">
@ -1140,7 +1140,7 @@ window.Page_social = (() => {
</div> </div>
${!items.length ${!items.length
? UI.emptyState({icon:'camera',title:'Noch nichts hier', ? UI.emptyState({icon:'camera',title:'Noch nichts hier',
text:'Geh zu "✨ Ideen" und erstelle deinen ersten Post!'}) text:'Geh zu "<svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#sparkle"></use></svg> Ideen" und erstelle deinen ersten Post!'})
: items.map(c => ` : items.map(c => `
<div class="card" style="padding:12px;margin-bottom:10px"> <div class="card" style="padding:12px;margin-bottom:10px">
<div style="display:flex;align-items:flex-start;gap:10px"> <div style="display:flex;align-items:flex-start;gap:10px">
@ -1161,7 +1161,7 @@ window.Page_social = (() => {
? `<a href="${_esc(c.post_url)}" target="_blank" rel="noopener" ? `<a href="${_esc(c.post_url)}" target="_blank" rel="noopener"
style="font-size:10px;color:var(--c-primary);display:inline-flex; style="font-size:10px;color:var(--c-primary);display:inline-flex;
align-items:center;gap:3px;margin-top:2px"> align-items:center;gap:3px;margin-top:2px">
🔗 Post ansehen</a>` <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#link-simple"></use></svg> Post ansehen</a>`
: c.status === 'published' : c.status === 'published'
? `<button class="sm-add-url" data-id="${c.id}" ? `<button class="sm-add-url" data-id="${c.id}"
style="font-size:10px;color:var(--c-text-muted);background:none; style="font-size:10px;color:var(--c-text-muted);background:none;
@ -1177,13 +1177,13 @@ window.Page_social = (() => {
background:#10b981;border:1px solid #10b981; background:#10b981;border:1px solid #10b981;
color:#fff;border-radius:6px;cursor:pointer"> color:#fff;border-radius:6px;cursor:pointer">
📤</button>` : ` 📤</button>` : `
<div style="text-align:center;font-size:18px;padding:3px 8px">✅</div>`} <div style="text-align:center;font-size:18px;padding:3px 8px"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg></div>`}
<button class="btn btn-sm btn-secondary sm-exp" <button class="btn btn-sm btn-secondary sm-exp"
data-id="${c.id}" style="padding:3px 8px;font-size:11px;min-height:28px"> data-id="${c.id}" style="padding:3px 8px;font-size:11px;min-height:28px">
Details</button> Details</button>
<button class="btn btn-sm btn-secondary sm-prev-arch" <button class="btn btn-sm btn-secondary sm-prev-arch"
data-id="${c.id}" style="padding:3px 8px;font-size:11px;min-height:28px"> data-id="${c.id}" style="padding:3px 8px;font-size:11px;min-height:28px">
👁</button> <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#eye"></use></svg></button>
<button class="btn btn-sm btn-secondary sm-del" <button class="btn btn-sm btn-secondary sm-del"
data-id="${c.id}" style="padding:3px 8px;font-size:11px; data-id="${c.id}" style="padding:3px 8px;font-size:11px;
min-height:28px;color:var(--c-danger)">✕</button> min-height:28px;color:var(--c-danger)">✕</button>
@ -1234,7 +1234,7 @@ window.Page_social = (() => {
</div>`, </div>`,
footer: ` footer: `
<button class="btn btn-secondary flex-1" id="qp-cancel">Abbrechen</button> <button class="btn btn-secondary flex-1" id="qp-cancel">Abbrechen</button>
<button class="btn btn-primary flex-1" id="qp-ok-${id}">✓ Bestätigen</button>`, <button class="btn btn-primary flex-1" id="qp-ok-${id}"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#check"></use></svg> Bestätigen</button>`,
}); });
document.getElementById('qp-cancel')?.addEventListener('click', UI.modal.close); document.getElementById('qp-cancel')?.addEventListener('click', UI.modal.close);
document.getElementById(`qp-ok-${id}`)?.addEventListener('click', async () => { document.getElementById(`qp-ok-${id}`)?.addEventListener('click', async () => {
@ -1255,7 +1255,7 @@ window.Page_social = (() => {
el.querySelectorAll('.sm-add-url').forEach(b => b.addEventListener('click', () => { el.querySelectorAll('.sm-add-url').forEach(b => b.addEventListener('click', () => {
const id = b.dataset.id; const id = b.dataset.id;
UI.modal.open({ UI.modal.open({
title: '🔗 Post-Link eintragen', title: '<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#link-simple"></use></svg> Post-Link eintragen',
body: ` body: `
<div class="form-group"> <div class="form-group">
<label class="form-label">Link zum veröffentlichten Post</label> <label class="form-label">Link zum veröffentlichten Post</label>
@ -1284,7 +1284,7 @@ window.Page_social = (() => {
.replace(/&amp;/g,'&').replace(/&lt;/g,'<') .replace(/&amp;/g,'&').replace(/&lt;/g,'<')
.replace(/&gt;/g,'>').replace(/&quot;/g,'"'); .replace(/&gt;/g,'>').replace(/&quot;/g,'"');
navigator.clipboard?.writeText(text).then(() => { navigator.clipboard?.writeText(text).then(() => {
b.textContent = '✓ Kopiert!'; b.textContent = '<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#check"></use></svg> Kopiert!';
setTimeout(() => b.textContent = '📋 Kopieren', 2000); setTimeout(() => b.textContent = '📋 Kopieren', 2000);
}); });
})); }));

2
backend/static/js/pages/wiki.js
View file

@ -732,7 +732,7 @@ window.Page_wiki = (() => {
? `<div style="margin-top:var(--space-3)"> ? `<div style="margin-top:var(--space-3)">
<div style="font-size:var(--text-xs);color:var(--c-text-muted); <div style="font-size:var(--text-xs);color:var(--c-text-muted);
font-weight:700;text-transform:uppercase;letter-spacing:.05em; font-weight:700;text-transform:uppercase;letter-spacing:.05em;
margin-bottom:var(--space-2)">📸 Community-Fotos</div> margin-bottom:var(--space-2)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#camera"></use></svg> Community-Fotos</div>
<div style="display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:4px"> <div style="display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:4px">
${rasse.user_fotos.map(f => ` ${rasse.user_fotos.map(f => `
<div style="flex-shrink:0"> <div style="flex-shrink:0">

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v415'; const CACHE_VERSION = 'by-v416';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten