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

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);
});
}));