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

UI: Phosphor-Icons für Jobs, Filme, Admin-Bewerbungen + Jobs-Link in Entdecken, SW by-v582

Browse source
This commit is contained in:
rene 2026-05-01 09:44:51 +02:00
parent d5e408528b
commit b3bd34c76a
6 changed files with 42 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

3
backend/static/index.html
View file

@ -169,6 +169,9 @@
<div class="sidebar-item" data-page="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 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-dots"></use></svg> Events
</div> </div>
<div class="sidebar-item" data-page="jobs">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#sparkle"></use></svg> Jobs
</div>
<span class="sidebar-section-label">Soziales</span> <span class="sidebar-section-label">Soziales</span>
<div class="sidebar-item" data-page="friends"> <div class="sidebar-item" data-page="friends">

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 = '581'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '582'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.2.1'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.2.1'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';

6
backend/static/js/pages/admin.js
View file

@ -2388,7 +2388,11 @@ window.Page_admin = (() => {
<div style="display:flex;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;align-items:center"> <div style="display:flex;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;align-items:center">
${['pending','reviewing','accepted','rejected','alle'].map(s => ` ${['pending','reviewing','accepted','rejected','alle'].map(s => `
<button class="btn btn-sm ${s===_statusFilter?'btn-primary':'btn-ghost'} adm-bew-filter" data-s="${s}"> <button class="btn btn-sm ${s===_statusFilter?'btn-primary':'btn-ghost'} adm-bew-filter" data-s="${s}">
${s==='pending'?'⏳ Neu':s==='reviewing'?'🔍 In Prüfung':s==='accepted'?'✅ Angenommen':s==='rejected'?'❌ Abgelehnt':'Alle'} ${s==='pending' ? `${UI.icon('clock')} Neu`
: s==='reviewing' ? `${UI.icon('magnifying-glass')} In Prüfung`
: s==='accepted' ? `${UI.icon('check-circle')} Angenommen`
: s==='rejected' ? `${UI.icon('x')} Abgelehnt`
: 'Alle'}
</button>`).join('')} </button>`).join('')}
</div> </div>
<div id="adm-bew-list">${UI.skeleton(3)}</div>`; <div id="adm-bew-list">${UI.skeleton(3)}</div>`;

39
backend/static/js/pages/jobs.js
View file

@ -8,6 +8,8 @@ window.Page_jobs = (() => {
let _appState = null; let _appState = null;
const _esc = s => UI.escape(s ?? ''); const _esc = s => UI.escape(s ?? '');
const _ph = (name, size = 22) =>
`<svg class="ph-icon" aria-hidden="true" style="width:${size}px;height:${size}px;flex-shrink:0;color:var(--c-primary)"><use href="/icons/phosphor.svg#${name}"></use></svg>`;
async function init(container, appState) { async function init(container, appState) {
_container = container; _container = container;
@ -46,11 +48,11 @@ window.Page_jobs = (() => {
<div style="padding:var(--space-5)"> <div style="padding:var(--space-5)">
<h2 style="font-size:var(--text-lg);font-weight:700;margin:0 0 var(--space-4);color:var(--c-primary)">Die Stelle</h2> <h2 style="font-size:var(--text-lg);font-weight:700;margin:0 0 var(--space-4);color:var(--c-primary)">Die Stelle</h2>
<div style="display:grid;gap:var(--space-3)"> <div style="display:grid;gap:var(--space-3)">
${_infoRow('📍', 'Remote', '100 % flexibel — du arbeitest wann und wie du willst')} ${_infoRow(_ph('map-pin'), 'Remote', '100 % flexibel — du arbeitest wann und wie du willst')}
${_infoRow('📅', 'Umfang', '1–2 Posts pro Woche auf Instagram &amp; TikTok')} ${_infoRow(_ph('calendar-dots'), 'Umfang', '1–2 Posts pro Woche auf Instagram &amp; TikTok')}
${_infoRow('💶', 'Vergütung', '50 € / Monat — wächst mit der Community')} ${_infoRow(_ph('tag'), 'Vergütung', '50 € / Monat — wächst mit der Community')}
${_infoRow('🤖', 'Luna an deiner Seite', 'Unser KI-Assistent schreibt Captions, generiert Post-Ideen und Hashtags — du wählst aus und postest')} ${_infoRow(_ph('robot'), 'Luna an deiner Seite', 'Unser KI-Assistent schreibt Captions, generiert Post-Ideen und Hashtags — du wählst aus und postest')}
${_infoRow('⭐', 'Gründer-Status', 'Du wirst Teil der ersten 100 Gründer — für immer')} ${_infoRow(_ph('star'), 'Gründer-Status', 'Du wirst Teil der ersten 100 Gründer — für immer')}
</div> </div>
</div> </div>
</div> </div>
@ -58,8 +60,9 @@ window.Page_jobs = (() => {
<!-- Luna-Probezugang Teaser --> <!-- Luna-Probezugang Teaser -->
<div style="background:linear-gradient(135deg,var(--c-primary),#e8a857);border-radius:var(--radius-lg); <div style="background:linear-gradient(135deg,var(--c-primary),#e8a857);border-radius:var(--radius-lg);
padding:var(--space-5);margin-bottom:var(--space-4);color:#fff"> padding:var(--space-5);margin-bottom:var(--space-4);color:#fff">
<div style="font-size:var(--text-lg);font-weight:800;margin-bottom:var(--space-2)"> <div style="font-size:var(--text-lg);font-weight:800;margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)">
🤖 Luna 14 Tage kostenlos testen <svg class="ph-icon" aria-hidden="true" style="width:24px;height:24px"><use href="/icons/phosphor.svg#robot"></use></svg>
Luna 14 Tage kostenlos testen
</div> </div>
<p style="margin:0;opacity:.9;font-size:var(--text-sm)"> <p style="margin:0;opacity:.9;font-size:var(--text-sm)">
Mit deiner Bewerbung schalten wir dir sofort den vollen Zugang zu Luna frei — Mit deiner Bewerbung schalten wir dir sofort den vollen Zugang zu Luna frei —
@ -68,7 +71,8 @@ window.Page_jobs = (() => {
</p> </p>
${trialStatus?.active ? `<div style="margin-top:var(--space-3);background:rgba(255,255,255,.2); ${trialStatus?.active ? `<div style="margin-top:var(--space-3);background:rgba(255,255,255,.2);
border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-weight:700;font-size:var(--text-sm)"> border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-weight:700;font-size:var(--text-sm)">
✅ Dein Probezugang läuft noch ${trialStatus.remaining_days} Tage</div>` : ''} <svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px;vertical-align:middle"><use href="/icons/phosphor.svg#check-circle"></use></svg>
Dein Probezugang läuft noch ${trialStatus.remaining_days} Tage</div>` : ''}
</div> </div>
<!-- Wen wir suchen --> <!-- Wen wir suchen -->
@ -99,7 +103,7 @@ window.Page_jobs = (() => {
function _infoRow(icon, label, text) { function _infoRow(icon, label, text) {
return ` return `
<div style="display:flex;gap:var(--space-3);align-items:flex-start"> <div style="display:flex;gap:var(--space-3);align-items:flex-start">
<span style="font-size:20px;line-height:1.4">${icon}</span> <div style="margin-top:1px">${icon}</div>
<div> <div>
<div style="font-weight:700;font-size:var(--text-sm)">${label}</div> <div style="font-weight:700;font-size:var(--text-sm)">${label}</div>
<div style="color:var(--c-text-secondary);font-size:var(--text-sm)">${text}</div> <div style="color:var(--c-text-secondary);font-size:var(--text-sm)">${text}</div>
@ -109,15 +113,17 @@ window.Page_jobs = (() => {
function _renderStatus(app) { function _renderStatus(app) {
const statusMap = { const statusMap = {
pending: { icon: '⏳', text: 'Deine Bewerbung ist eingegangen — wir melden uns bald!', color: 'var(--c-text-secondary)' }, pending: { icon: 'clock', text: 'Deine Bewerbung ist eingegangen — wir melden uns bald!', color: 'var(--c-text-secondary)' },
reviewing: { icon: '🔍', text: 'Wir schauen uns deine Bewerbung gerade genauer an.', color: '#0284c7' }, reviewing: { icon: 'magnifying-glass', text: 'Wir schauen uns deine Bewerbung gerade genauer an.', color: '#0284c7' },
accepted: { icon: '🎉', text: 'Herzlichen Glückwunsch — du bist dabei!', color: 'var(--c-success)' }, accepted: { icon: 'check-circle', text: 'Herzlichen Glückwunsch — du bist dabei!', color: 'var(--c-success)' },
rejected: { icon: '😔', text: 'Es hat diesmal leider nicht geklappt.', color: 'var(--c-danger)' }, rejected: { icon: 'x', text: 'Es hat diesmal leider nicht geklappt.', color: 'var(--c-danger)' },
}; };
const s = statusMap[app.status] || statusMap.pending; const s = statusMap[app.status] || statusMap.pending;
return ` return `
<div class="card" style="padding:var(--space-5);text-align:center"> <div class="card" style="padding:var(--space-5);text-align:center">
<div style="font-size:40px;margin-bottom:var(--space-3)">${s.icon}</div> <div style="margin-bottom:var(--space-3)">
<svg class="ph-icon" aria-hidden="true" style="width:48px;height:48px;color:${s.color}"><use href="/icons/phosphor.svg#${s.icon}"></use></svg>
</div>
<div style="font-weight:700;color:${s.color};font-size:var(--text-lg);margin-bottom:var(--space-2)">${s.text}</div> <div style="font-weight:700;color:${s.color};font-size:var(--text-lg);margin-bottom:var(--space-2)">${s.text}</div>
<div style="color:var(--c-text-muted);font-size:var(--text-xs)"> <div style="color:var(--c-text-muted);font-size:var(--text-xs)">
Bewerbung eingereicht: ${app.created_at?.slice(0,10)} Bewerbung eingereicht: ${app.created_at?.slice(0,10)}
@ -203,8 +209,9 @@ window.Page_jobs = (() => {
bekommst du sofort den 14-tägigen Luna-Probezugang. bekommst du sofort den 14-tägigen Luna-Probezugang.
</div>` : ''} </div>` : ''}
<button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)"> <button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2);display:flex;align-items:center;justify-content:center;gap:var(--space-2)">
Bewerbung absenden + Luna freischalten 🚀 <svg class="ph-icon" aria-hidden="true" style="width:18px;height:18px"><use href="/icons/phosphor.svg#sparkle"></use></svg>
Bewerbung absenden + Luna freischalten
</button> </button>
</form> </form>

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

@ -95,11 +95,11 @@ window.Page_movies = (() => {
<div class="movies-filter-row" style="margin-top:var(--space-2)"> <div class="movies-filter-row" style="margin-top:var(--space-2)">
<button class="movies-type-btn${_typ === 'alle' ? ' movies-filter-btn--active' : ''}" data-typ="alle">Alle Typen</button> <button class="movies-type-btn${_typ === 'alle' ? ' movies-filter-btn--active' : ''}" data-typ="alle">Alle Typen</button>
<button class="movies-type-btn${_typ === 'film' ? ' movies-filter-btn--active' : ''}" data-typ="film">🎬 Filme</button> <button class="movies-type-btn${_typ === 'film' ? ' movies-filter-btn--active' : ''}" data-typ="film">🎬 Filme</button>
<button class="movies-type-btn${_typ === 'serie' ? ' movies-filter-btn--active' : ''}" data-typ="serie">📺 Serien</button> <button class="movies-type-btn${_typ === 'serie' ? ' movies-filter-btn--active' : ''}" data-typ="serie"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#film-slate"></use></svg> Serien</button>
<button class="movies-type-btn${_typ === 'doku' ? ' movies-filter-btn--active' : ''}" data-typ="doku">🎥 Dokus</button> <button class="movies-type-btn${_typ === 'doku' ? ' movies-filter-btn--active' : ''}" data-typ="doku"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#camera"></use></svg> Dokus</button>
</div> </div>
<div style="display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)"> <div style="display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)">
<svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px;color:var(--c-text-muted)"><use href="/icons/phosphor.svg#sort-ascending"></use></svg> <svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px;color:var(--c-text-muted)"><use href="/icons/phosphor.svg#list"></use></svg>
<select id="movies-sort" class="form-control" style="flex:1;font-size:var(--text-sm);padding:var(--space-2) var(--space-3)"> <select id="movies-sort" class="form-control" style="flex:1;font-size:var(--text-sm);padding:var(--space-2) var(--space-3)">
<option value="default" ${_sort==='default' ?'selected':''}>Empfohlen</option> <option value="default" ${_sort==='default' ?'selected':''}>Empfohlen</option>
<option value="bewertung" ${_sort==='bewertung' ?'selected':''}>Community-Bewertung</option> <option value="bewertung" ${_sort==='bewertung' ?'selected':''}>Community-Bewertung</option>
@ -182,7 +182,12 @@ window.Page_movies = (() => {
? `<div class="movie-tag-stirbt"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg> Hund stirbt</div>` ? `<div class="movie-tag-stirbt"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg> Hund stirbt</div>`
: `<div class="movie-tag-ueberlebt"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg> Hund überlebt</div>`; : `<div class="movie-tag-ueberlebt"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg> 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);
const typLabel = film.typ === 'serie' ? '📺 Serie' : film.typ === 'doku' ? '🎥 Doku' : ''; const typIcon = film.typ === 'serie'
? `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#film-slate"></use></svg>`
: film.typ === 'doku'
? `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#camera"></use></svg>`
: '';
const typLabel = film.typ === 'serie' ? `${typIcon} Serie` : film.typ === 'doku' ? `${typIcon} Doku` : '';
const imdb = film.imdb_rating ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">IMDb ${film.imdb_rating}</span>` : ''; const imdb = film.imdb_rating ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">IMDb ${film.imdb_rating}</span>` : '';
const streaming = film.streaming ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(film.streaming)}</span>` : ''; const streaming = film.streaming ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(film.streaming)}</span>` : '';

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-v581'; const CACHE_VERSION = 'by-v582';
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
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache