diff --git a/css/styles.css b/css/styles.css index 09c45e4..ac28695 100644 --- a/css/styles.css +++ b/css/styles.css @@ -368,7 +368,81 @@ body { } /* ======================================== - HERO — Focal Motion + DATES / EVENTS +*/ +.dates-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 20px; + margin-top: 30px; +} + +.date-card { + background: #fff; + border-radius: 12px; + padding: 24px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); + border-left: 4px solid #0088cc; +} +.date-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); +} + +.date-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} +.date-icon { + width: 44px; + height: 44px; + background: linear-gradient(135deg, #0088cc, #006699); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 20px; + flex-shrink: 0; +} +.date-headline { + font-size: 17px; + font-weight: 700; + color: #1a1a2e; + margin: 0; +} + +.date-info { + display: flex; + flex-direction: column; + gap: 8px; +} +.date-row { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + color: #555; +} +.date-row svg { + width: 16px; + height: 16px; + fill: #0088cc; + flex-shrink: 0; +} +.no-events { + grid-column: 1 / -1; + text-align: center; + padding: 40px; + color: #888; + font-size: 15px; +} + +/* ======================================== + HERO — Focal Motion ======================================== */ .hero { min-height: 500px; diff --git a/index.html b/index.html index 92c4be2..58d3f97 100644 --- a/index.html +++ b/index.html @@ -424,6 +424,22 @@ + + + diff --git a/js/main.js b/js/main.js index d85d32f..03c17a2 100644 --- a/js/main.js +++ b/js/main.js @@ -8,6 +8,7 @@ const USER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/user'; const PROFILE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/profile'; const WIKI_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/wiki'; const COMMUNITY_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/community'; +const SCHEDULE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/schedule'; let currentLang = 'de'; @@ -283,6 +284,7 @@ function checkSession() { document.getElementById('newsletter-section').style.display = 'block'; loadUsers(); loadWiki(); + loadDates(); } else { document.body.dataset.loggedIn = 'false'; document.getElementById('login-btn').style.display = 'inline-flex'; @@ -720,6 +722,81 @@ function searchWiki(term) { 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 => { + const card = document.createElement('div'); + card.className = 'date-card'; + + // 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 // ========================================