diff --git a/css/styles.css b/css/styles.css index 1f26106..ec6db45 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1097,14 +1097,14 @@ body[data-lang="en"] .hide-de { display: none !important; } .wiki-topic-badge { display: inline-block; padding: 4px 10px; - background: #e7f3ff; - color: #1877f2; font-size: 12px; font-weight: 600; border-radius: 6px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; + border-left: 4px solid transparent; + transition: all 0.2s ease; } .wiki-subtopic-headline { diff --git a/js/main.js b/js/main.js index bd67ffc..f85a510 100644 --- a/js/main.js +++ b/js/main.js @@ -657,8 +657,47 @@ function getRank(posts) { return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; } + +// ======================================== +// TOPIC COLORS — each topic gets a distinct color +// ======================================== +const TOPIC_COLORS = { + '🌎 Internationales Geschäft': { bg: '#E0F2F1', text: '#00695C', border: '#00695C' }, + '🏦 Banken & Finanzen Filialen': { bg: '#E3F2FD', text: '#1565C0', border: '#1565C0' }, + '🏦 Banken & Finanzen allgmein': { bg: '#E8EAF6', text: '#283593', border: '#283593' }, + '💰 Steuern': { bg: '#FFF3E0', text: '#E65100', border: '#E65100' }, + '💻 Software & Digital Operations': { bg: '#EDE7F6', text: '#4527A0', border: '#4527A0' }, + '📑 Buchhaltung': { bg: '#E8F5E9', text: '#2E7D32', border: '#2E7D32' } +}; + +function getTopicColor(topic) { + // Try exact match first + if (TOPIC_COLORS[topic]) return TOPIC_COLORS[topic]; + // Try matching without emoji + const cleanTopic = topic.replace(/^[^\s]+\s/, ''); + for (const key of Object.keys(TOPIC_COLORS)) { + const cleanKey = key.replace(/^[^\s]+\s/, ''); + if (cleanTopic === cleanKey) return TOPIC_COLORS[key]; + } + // Fallback: generate color from topic string + let hash = 0; + for (let i = 0; i < topic.length; i++) { + hash = topic.charCodeAt(i) + ((hash << 5) - hash); + } + const hues = [200, 180, 240, 30, 140, 60]; // blue, teal, purple, orange, green, amber + const idx = Math.abs(hash) % hues.length; + const color = hues[idx]; + return { + bg: `hsl(${color}, 70%, 92%)`, + text: `hsl(${color}, 60%, 35%)`, + border: `hsl(${color}, 60%, 35%)` + }; +} + // ======================================== // WIKI +// ======================================== + // ======================================== let wikiData = []; @@ -700,224 +739,6 @@ function renderWikiCards(data) { card.setAttribute('tabindex', '0'); const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown'); - const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || ''); - const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || ''); + const topicColor = getTopicColor(topic); - // Get date — try updatedAt first, fall back to createdAt - const dateStr = formatDate(new Date(item.updatedAt || item.createdAt)); - - // Teaser: first 150 chars of content - const teaser = content.trim().substring(0, 180); - const teaserEnd = content.trim().length > 180 ? '...' : ''; - - card.innerHTML = ` - ${escapeHtml(topic)} -

${escapeHtml(subtopic)}

-

${escapeHtml(teaser)}${teaserEnd}

-
- ${dateStr} -
- `; - - // Open modal on click - card.addEventListener('click', () => openWikiModalSingle(item)); - card.addEventListener('keydown', (e) => { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - openWikiModalSingle(item); - } - }); - - grid.appendChild(card); - }); -} - -function formatDate(date) { - if (!(date instanceof Date) || isNaN(date)) return ''; - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - return `${year}-${month}-${day}`; -} - -function openWikiModal(topicName, subtopics) { - // Create modal if not exists - let modalOverlay = document.getElementById('wiki-modal-overlay'); - if (!modalOverlay) { - modalOverlay = document.createElement('div'); - modalOverlay.id = 'wiki-modal-overlay'; - modalOverlay.className = 'modal-overlay'; - document.body.appendChild(modalOverlay); - } - - let html = '
'; - html += '
'; - html += `

${escapeHtml(topicName)}

`; - - subtopics.forEach(sub => { - const title = currentLang === 'en' && sub.subtopic_en ? sub.subtopic_en : (sub.subtopic || ''); - const content = currentLang === 'en' && sub.wiki_en ? sub.wiki_en : (sub.wiki || ''); - html += `

${escapeHtml(title)}

`; - html += `
${escapeHtml(content)}
`; - }); - - html += '
'; - modalOverlay.innerHTML = html; - modalOverlay.classList.add('active'); -} - -function closeWikiModal() { - const overlay = document.getElementById('wiki-modal-overlay'); - if (overlay) overlay.classList.remove('active'); -} - -function openWikiModalSingle(item) { - let modalOverlay = document.getElementById('wiki-modal-overlay'); - if (!modalOverlay) { - modalOverlay = document.createElement('div'); - modalOverlay.id = 'wiki-modal-overlay'; - modalOverlay.className = 'modal-overlay'; - document.body.appendChild(modalOverlay); - } - - const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown'); - const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || ''); - const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || ''); - - // Get date - const dateStr = formatDate(new Date(item.updatedAt || item.createdAt)); - - let html = '
'; - html += '
'; - html += `
${escapeHtml(topic)}
`; - html += `

${escapeHtml(subtopic)}

`; - if (dateStr) html += `
${dateStr}
`; - html += `
${escapeHtml(content)}
`; - html += '
'; - modalOverlay.innerHTML = html; - modalOverlay.classList.add('active'); -} - -function searchWiki(term) { - if (!term.trim()) { - renderWikiCards(wikiData); - return; - } - - const t = term.toLowerCase(); - const filtered = wikiData.filter(item => { - const topic = ((item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || '')) + - ' ' + ((item.subtopic_en && currentLang === 'en') ? item.subtopic_en : (item.subtopic || '')) + - ' ' + ((item.wiki_en && currentLang === 'en') ? item.wiki_en : (item.wiki || '')); - return topic.toLowerCase().includes(t); - }); - - renderWikiCards(filtered); -} - -// ======================================== -// DATES / EVENTS -// ======================================== -async function loadDates() { - try { - const response = await fetch(SCHEDULE_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const result = await response.json(); - - if (result.data && Array.isArray(result.data) && result.data.length > 0) { - renderDates(result.data); - } else { - document.getElementById('dates-list').innerHTML = - `

${isDE() ? 'Keine Termine geplant' : 'No events scheduled'}

`; - } - } catch (error) { - document.getElementById('dates-list').innerHTML = - `

${isDE() ? 'Fehler beim Laden' : 'Error loading events'}

`; - } -} - -function renderDates(events) { - const container = document.getElementById('dates-list'); - container.innerHTML = ''; - - // Sort events by date - const sorted = events.sort((a, b) => new Date(a.start) - new Date(b.start)); - - sorted.forEach((event, idx) => { - const card = document.createElement('div'); - card.className = 'date-card stagger-' + (idx % 4 + 1); - - // Parse date/time from ISO string - const startDate = new Date(event.start); - const endDate = new Date(event.end); - - // Format date: yyyy.mm.dd - const day = String(startDate.getDate()).padStart(2, '0'); - const month = String(startDate.getMonth() + 1).padStart(2, '0'); - const year = startDate.getFullYear(); - const dateStr = `${year}.${month}.${day}`; - - // Format time: HH:MM (local time) - const startHour = String(startDate.getHours()).padStart(2, '0'); - const startMinute = String(startDate.getMinutes()).padStart(2, '0'); - const endHour = String(endDate.getHours()).padStart(2, '0'); - const endMinute = String(endDate.getMinutes()).padStart(2, '0'); - const startStr = `${startHour}:${startMinute}`; - const endStr = `${endHour}:${endMinute}`; - - card.innerHTML = ` -
-
📅
-

${escapeHtml(event.headline || 'Unbenanntes Event')}

-
-
-
- - ${dateStr} -
-
- - ${isDE() ? 'Start' : 'Start'} ${startStr} -
-
- - ${isDE() ? 'Ende' : 'End'} ${endStr} -
-
- `; - - container.appendChild(card); - }); -} - -// ======================================== -// COOKIES -// ======================================== -function getCookie(name) { - const localVal = localStorage.getItem('paraguay_' + name); - if (localVal) return localVal; - - const value = `; ${document.cookie}`; - const parts = value.split(`; ${name}=`); - if (parts.length === 2) { - return parts.pop().split(';').shift().replace(/^"|"$/g, ''); - } - return ''; -} - -function setCookie(name, value, days) { - const expires = new Date(); - expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); - document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expires.toUTCString() + ';path=/'; - localStorage.setItem('paraguay_' + name, value); -} - -// ======================================== -// UTILS -// ======================================== -function escapeHtml(text) { - if (!text) return ''; - const div = document.createElement('div'); - div.textContent = text; - return div.innerHTML; -} + // Get excerpt from first subtopic \ No newline at end of file