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

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

@ -3,7 +3,7 @@
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 = (() => {

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

@ -74,16 +74,16 @@ window.Page_movies = (() => {
try {
_filme = await API.get('/movies/filme');
} 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;
}
content.innerHTML = `
<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 === 'stirbt' ? ' movies-filter-btn--active' : ''}" data-filter="stirbt">😭 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 === 'top' ? ' movies-filter-btn--active' : ''}" data-filter="top">⭐⭐⭐⭐+</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"><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"><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 class="movie-grid" id="movie-grid"></div>
`;
@ -130,8 +130,8 @@ window.Page_movies = (() => {
function _movieCard(film) {
const stirbt = film.stirbt_der_hund;
const tag = stirbt
? `<div class="movie-tag-stirbt">⚠️ ACHTUNG: Der Hund stirbt</div>`
: `<div class="movie-tag-ueberlebt">✅ Der Hund überlebt</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"><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);
return `
@ -140,7 +140,7 @@ window.Page_movies = (() => {
<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-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}
<div class="movie-card-stars">${stars}</div>
</div>
@ -151,7 +151,7 @@ window.Page_movies = (() => {
function _openMovieModal(film) {
const stirbt = film.stirbt_der_hund;
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 loginHint = !_appState.user
@ -162,7 +162,7 @@ window.Page_movies = (() => {
<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)">
<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>
</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 stars = [1,2,3,4,5].map(i => {
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('');
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>
${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}">
${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>
</div>
`;
@ -344,7 +344,7 @@ window.Page_movies = (() => {
${dog.rasse ? `<div class="hdm-top-rasse">${_esc(dog.rasse)}</div>` : ''}
${vorname ? `<div class="hdm-top-besitzer">von ${vorname}</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>
`;
}).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>' : ''}
<small>📍 ${distStr} entfernt</small><br>
<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));
@ -223,7 +223,7 @@ window.Page_poison = (() => {
if (_reports.length === 0) {
listEl.innerHTML = UI.emptyState({
icon : '✅',
icon : 'check-circle',
title : 'Alles sicher',
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>`,
@ -260,7 +260,7 @@ window.Page_poison = (() => {
<span class="badge"
style="background:${typ.color};color:#fff">${typ.label}</span>
${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);
font-size:var(--text-sm);white-space:nowrap">
@ -307,7 +307,7 @@ window.Page_poison = (() => {
<span class="badge" style="background:${typ.color};color:#fff">
${UI.icon(typ.icon)} ${typ.label}
</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>
${r.beschreibung
@ -324,7 +324,7 @@ window.Page_poison = (() => {
<div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
${!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>
${isOwnEntry || isAdmin
@ -380,7 +380,7 @@ window.Page_poison = (() => {
<div class="form-group">
<label class="form-label">Grund</label>
<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="anderes">💬 Anderer Grund</option>
</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)',
scheduled:'var(--c-primary)', published:'var(--c-success)',
archived:'var(--c-text-muted)' };
const _FL = { reel:'🎬 Reel', story:'⭕ Story', post:'🖼 Post', carousel:'🎠 Carousel' };
const _PL = { tiktok:'🎵 TikTok', instagram:'📸 Instagram', both:'🌐 Beide' };
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:'<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)
const _LUNA_MSGS = [
@ -18,7 +18,7 @@ window.Page_social = (() => {
['💡','Mir ist da was eingefallen…'],
['✍️','Ich arbeite das aus…'],
['⏳','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…'],
['🐾','Fast fertig für dich…'],
];
@ -63,7 +63,7 @@ window.Page_social = (() => {
<!-- Tabs -->
<div style="display:flex;border-bottom:2px solid var(--c-border);
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;
background:none;cursor:pointer;font-size:13px;white-space:nowrap;
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;
margin-bottom:var(--space-4);
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>
<!-- Medien-Upload -->
<div style="margin-bottom:var(--space-4)">
@ -315,7 +315,7 @@ window.Page_social = (() => {
<button id="sm-gen" class="btn btn-primary"
style="width:100%;min-height:52px;font-size:var(--text-base);
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>
<div id="sm-gen-result" style="margin-top:var(--space-4)"></div>
</div>`;
@ -435,7 +435,7 @@ window.Page_social = (() => {
data-format="${idea.format||'post'}"
data-platform="${idea.platform||'both'}"
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>`).join('');
@ -473,12 +473,12 @@ window.Page_social = (() => {
platform: btn.dataset.platform,
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.color = '#fff';
btn.style.borderColor = 'var(--c-success)';
} 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;
}
});
@ -526,7 +526,7 @@ window.Page_social = (() => {
</div>
<div style="display:flex;align-items:center;gap:6px;flex-shrink:0">
${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"
data-id="${e.exercise_id}" data-name="${_esc(e.name)}"
style="font-size:11px;padding:4px 10px;min-height:28px">
@ -720,7 +720,7 @@ window.Page_social = (() => {
😬 Ups: ${_esc(e.message||String(e))}</div>`;
} finally {
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 (pctEl) pctEl.textContent = '100%';
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">
<span style="background:var(--c-success-subtle);color:var(--c-success);
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>` : ''}
</div>
@ -841,7 +841,7 @@ window.Page_social = (() => {
data-id="${data.id}"
style="flex:1;font-size:12px;padding:6px 10px;min-height:36px;
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 id="sm-posted-form-${data.id}" style="display:none;background:var(--c-surface-2);
@ -868,7 +868,7 @@ window.Page_social = (() => {
</div>
<button class="btn btn-primary sm-confirm-posted" data-id="${data.id}"
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>
</div>
</div>
@ -888,7 +888,7 @@ window.Page_social = (() => {
<div style="background:var(--c-surface);border:1px solid var(--c-border);
border-radius:var(--radius-lg);padding:var(--space-4);
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);
line-height:1.9;word-break:break-word">
${data.hashtags.split(',').map(h=>`#${h.trim()}`).join(' ')}</div>
@ -963,7 +963,7 @@ window.Page_social = (() => {
.replace(/&amp;/g,'&').replace(/&lt;/g,'<')
.replace(/&gt;/g,'>').replace(/&quot;/g,'"');
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);
});
});
@ -1063,7 +1063,7 @@ window.Page_social = (() => {
<!-- Actions -->
<div style="padding:8px 12px">
<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>
</div>
<div style="font-size:11px;font-weight:700;color:#000;margin-bottom:4px">
@ -1140,7 +1140,7 @@ window.Page_social = (() => {
</div>
${!items.length
? 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 => `
<div class="card" style="padding:12px;margin-bottom: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"
style="font-size:10px;color:var(--c-primary);display:inline-flex;
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'
? `<button class="sm-add-url" data-id="${c.id}"
style="font-size:10px;color:var(--c-text-muted);background:none;
@ -1177,13 +1177,13 @@ window.Page_social = (() => {
background:#10b981;border:1px solid #10b981;
color:#fff;border-radius:6px;cursor:pointer">
📤</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"
data-id="${c.id}" style="padding:3px 8px;font-size:11px;min-height:28px">
Details</button>
<button class="btn btn-sm btn-secondary sm-prev-arch"
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"
data-id="${c.id}" style="padding:3px 8px;font-size:11px;
min-height:28px;color:var(--c-danger)">✕</button>
@ -1234,7 +1234,7 @@ window.Page_social = (() => {
</div>`,
footer: `
<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-ok-${id}`)?.addEventListener('click', async () => {
@ -1255,7 +1255,7 @@ window.Page_social = (() => {
el.querySelectorAll('.sm-add-url').forEach(b => b.addEventListener('click', () => {
const id = b.dataset.id;
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: `
<div class="form-group">
<label class="form-label">Link zum veröffentlichten Post</label>
@ -1284,7 +1284,7 @@ window.Page_social = (() => {
.replace(/&amp;/g,'&').replace(/&lt;/g,'<')
.replace(/&gt;/g,'>').replace(/&quot;/g,'"');
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);
});
}));

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="font-size:var(--text-xs);color:var(--c-text-muted);
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">
${rasse.user_fotos.map(f => `
<div style="flex-shrink:0">