diff --git a/variations/apple/index.html b/variations/apple/index.html new file mode 100644 index 0000000..165b0bf --- /dev/null +++ b/variations/apple/index.html @@ -0,0 +1,467 @@ + + + + + + Paraguay SRL LLC — Community + + + + + + + + + + + + + + + + + + + + +
+
+
+

+ Paraguay LLC & SRL Community + Paraguay LLC & SRL Community +

+

+ Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay + The experience exchange for German and American expats in Paraguay +

+
+
+ -- + Mitglieder + Members +
+
+ -- + Beiträge + Posts +
+
+ -- + Wiki-Artikel + Wiki Articles +
+
+
+
+
+
+
+ + +
+ +
+ + +
+ + +
+
+

+ Über die Community + About the Community +

+
+
+
🏦
+

+ Banken & Zahlungsverkehr + Banking & Payments +

+

+ Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. + Experiences with Paraguayan and international banks, accounts, transfers and credit cards. +

+
+
+
⚖️
+

+ Rechtliches + Legal Matters +

+

+ Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. + Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. +

+
+
+
📊
+

+ Steuern & Buchhaltung + Taxes & Accounting +

+

+ Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. + Tax advice, accounting systems, annual statements and international tax planning. +

+
+
+
💻
+

+ ERP-Systeme + ERP Systems +

+

+ Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. + Experiences with various ERP systems, software solutions and digital management. +

+
+
+
+
+ + +
+
+

+ Mitglieder + Members +

+
+ + +
+
+

+ Lade Mitglieder... + Loading members... +

+
+
+
+ + +
+
+

+ Wiki + Wiki +

+
+ + +
+
+

+ Lade Wiki... + Loading wiki... +

+
+
+
+ + + + +
+ + + + + + + diff --git a/variations/apple/main.js b/variations/apple/main.js new file mode 100644 index 0000000..667dad7 --- /dev/null +++ b/variations/apple/main.js @@ -0,0 +1,637 @@ +// ======================================== +// Paraguay LLC & SRL — Main JS +// ======================================== + +const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; +const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; +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'; + +let currentLang = 'de'; + +document.addEventListener('DOMContentLoaded', () => { + currentLang = document.body.dataset.lang || 'de'; + checkSession(); + loadCommunityStats(); + + // Smooth scroll nav links + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const target = document.querySelector(link.getAttribute('href')); + if (target) { + target.scrollIntoView({ behavior: 'smooth' }); + } + // Close mobile nav + document.getElementById('nav-menu').classList.remove('open'); + }); + }); + + // Mobile nav toggle + const navToggle = document.getElementById('nav-toggle'); + const navMenu = document.getElementById('nav-menu'); + if (navToggle) { + navToggle.addEventListener('click', () => { + navMenu.classList.toggle('open'); + }); + } + + // Navbar scroll effect + window.addEventListener('scroll', () => { + const nav = document.getElementById('main-nav'); + if (nav) { + nav.classList.toggle('scrolled', window.scrollY > 20); + } + }); + + // Language toggle + document.querySelectorAll('.lang-btn').forEach(btn => { + btn.addEventListener('click', () => { + const lang = btn.dataset.lang; + setLanguage(lang); + // Reload content in new language + if (isLoggedIn) { + if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); + if (document.getElementById('wiki-grid')) loadWiki(); + } + }); + }); + + // Member search + const memberSearch = document.getElementById('member-search'); + if (memberSearch) { + memberSearch.addEventListener('input', (e) => { + filterMembers(e.target.value); + }); + } + + // Wiki search + const wikiSearch = document.getElementById('wiki-search'); + if (wikiSearch) { + wikiSearch.addEventListener('input', (e) => { + searchWiki(e.target.value); + }); + } + + // Close modals on overlay click + document.querySelectorAll('.modal-overlay').forEach(overlay => { + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.classList.remove('active'); + } + }); + }); + + // Close modals on Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); + } + }); + + // Login button + const loginBtn = document.getElementById('login-btn'); + if (loginBtn) { + loginBtn.addEventListener('click', () => { + openLoginModal(); + }); + } +}); + +// ======================================== +// LANGUAGE +// ======================================== +function setLanguage(lang) { + currentLang = lang; + document.body.dataset.lang = lang; + document.querySelectorAll('.lang-btn').forEach(b => { + b.classList.toggle('active', b.dataset.lang === lang); + }); +} + +function isDE() { + return currentLang !== 'en'; +} + +// ======================================== +// COMMUNITY STATS +// ======================================== +async function loadCommunityStats() { + try { + const response = await fetch(COMMUNITY_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + + if (data.users !== undefined) { + animateCounter('stat-members', data.users); + } + if (data.topics !== undefined) { + document.getElementById('stat-wiki').textContent = data.topics; + } + } catch (error) { + console.error('Failed to load community stats:', error); + } +} + +function animateCounter(elementId, targetNumber) { + const element = document.getElementById(elementId); + if (!element) return; + + let current = 0; + const duration = 1500; // ms + const steps = 40; + const increment = targetNumber / steps; + const stepTime = duration / steps; + + const timer = setInterval(() => { + current += increment; + if (current >= targetNumber) { + element.textContent = targetNumber; + clearInterval(timer); + } else { + element.textContent = Math.floor(current); + } + }, stepTime); +} + +// ======================================== +// AUTH / SESSION +// ======================================== +let isLoggedIn = false; + +function isSessionValid() { + const sid = getCookie('sessionid'); + return sid.length > 0; +} + +function checkSession() { + isLoggedIn = isSessionValid(); + + if (isLoggedIn) { + document.body.dataset.loggedIn = 'true'; + document.getElementById('login-btn').style.display = 'none'; + document.getElementById('logout-btn').style.display = 'inline-flex'; + document.getElementById('profile-btn').style.display = 'inline-flex'; + document.getElementById('telegram-banner').style.display = 'none'; + document.getElementById('main-content').style.display = 'block'; + document.getElementById('newsletter-section').style.display = 'block'; + loadUsers(); + loadWiki(); + } else { + document.body.dataset.loggedIn = 'false'; + document.getElementById('login-btn').style.display = 'inline-flex'; + document.getElementById('logout-btn').style.display = 'none'; + document.getElementById('profile-btn').style.display = 'none'; + document.getElementById('telegram-banner').style.display = 'block'; + document.getElementById('main-content').style.display = 'none'; + document.getElementById('newsletter-section').style.display = 'none'; + } +} + +// ======================================== +// LOGIN MODAL +// ======================================== +function openLoginModal() { + document.getElementById('login-modal-overlay').classList.add('active'); + // Reset to step 1 + document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); + document.getElementById('login-step-1').classList.add('active'); + document.getElementById('telegram-user').value = ''; + document.getElementById('verification-code').value = ''; +} + +function closeLoginModal() { + document.getElementById('login-modal-overlay').classList.remove('active'); +} + +// ======================================== +// PROFILE MODAL +// ======================================== +function openProfileModal() { + const sid = getCookie('sessionid'); + if (!sid) { alert('Bitte anmelden.'); return; } + + fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) + .then(r => r.json()) + .then(user => { + document.getElementById('profile-username-display').textContent = user.username || ''; + const rank = getRank(user.posts || 0); + const badge = document.getElementById('profile-rank-badge'); + badge.innerHTML = `${rank.emoji} ${rank.title}`; + + document.getElementById('profile-company').value = user.company || ''; + document.getElementById('profile-email').value = user.email || ''; + document.getElementById('profile-homepage').value = user.homepage || ''; + document.getElementById('profile-image').value = user.image || ''; + document.getElementById('profile-location').value = user.location || ''; + document.getElementById('profile-description').value = user.Description || ''; + document.getElementById('profile-publish').checked = true; + + document.getElementById('profile-modal-overlay').classList.add('active'); + }) + .catch(() => alert('Fehler beim Laden des Profils.')); +} + +function closeProfileModal() { + document.getElementById('profile-modal-overlay').classList.remove('active'); +} + +function saveProfile() { + const sid = getCookie('sessionid'); + fetch(PROFILE_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('profile-username-display').textContent, + company: document.getElementById('profile-company').value.trim(), + email: document.getElementById('profile-email').value, + homepage: document.getElementById('profile-homepage').value, + image: document.getElementById('profile-image').value, + location: document.getElementById('profile-location').value, + Description: document.getElementById('profile-description').value, + sessionid: sid, + publish: document.getElementById('profile-publish').checked + }) + }) + .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) + .catch(() => alert('Fehler bei der Verbindung.')); +} + +// ======================================== +// USER DETAIL MODAL +// ======================================== +function openUserDetailModal(user) { + const avatar = document.getElementById('user-detail-avatar'); + if (user.image) { + avatar.innerHTML = `${user.username}`; + } else { + avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; + } + + document.getElementById('user-detail-initial').textContent = ''; + document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); + + const rank = getRank(user.posts || 0); + document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; + document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; + + document.getElementById('user-detail-company').textContent = user.company || ''; + + const emailEl = document.getElementById('user-detail-email'); + emailEl.innerHTML = user.email ? `${user.email}` : '-'; + + const hpEl = document.getElementById('user-detail-homepage'); + const hp = user.homepage || ''; + hpEl.innerHTML = hp ? `${hp}` : '-'; + + document.getElementById('user-detail-location').textContent = user.location || '-'; + document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); + + document.getElementById('user-detail-modal-overlay').classList.add('active'); +} + +function closeUserDetailModal() { + document.getElementById('user-detail-modal-overlay').classList.remove('active'); +} + +// ======================================== +// LOGIN FLOW +// ======================================== +function sendTelegramUser() { + const user = document.getElementById('telegram-user').value.trim(); + if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } + + const btn = event.target; + btn.disabled = true; + btn.textContent = isDE() ? 'Sende...' : 'Sending...'; + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: user }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-3').classList.add('active'); + } else if (data.status === 'code send') { + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-2').classList.add('active'); + } else { + alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); + } + }) + .catch(() => { + btn.disabled = false; + alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); + }); +} + +function verifyCode() { + const code = document.getElementById('verification-code').value.trim(); + if (!code) { alert('Bitte geben Sie den Code ein.'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + code: code, + sessionid: getCookie('sessionid') + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function submitLoginData() { + const name = document.getElementById('full-name').value.trim(); + const llc = document.getElementById('llc-name').value.trim(); + if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + name: name, + llc: llc + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function logout() { + setCookie('sessionid', '', -1); + checkSession(); +} + +// ======================================== +// NEWSLETTER +// ======================================== +function subscribeNewsletter() { + const email = document.getElementById('newsletter-email').value.trim(); + if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } + + fetch(NEWSLETTER_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email: email }) + }) + .then(r => { + if (r.ok) { + document.getElementById('newsletter-form').classList.add('hidden'); + document.getElementById('newsletter-success').classList.remove('hidden'); + } else { + alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +// ======================================== +// USERS / MEMBERS +// ======================================== +async function loadUsers() { + try { + const response = await fetch(USER_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + const container = document.getElementById('members-list'); + + if (data.data && Array.isArray(data.data)) { + container.innerHTML = ''; + container.style.display = 'grid'; + + data.data.forEach(user => { + const card = createMemberCard(user); + container.appendChild(card); + }); + + // Update stats will be handled by loadCommunityStats + } else { + container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; + } + } catch (error) { + const container = document.getElementById('members-list'); + container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function createMemberCard(user) { + const card = document.createElement('div'); + card.className = 'member-card'; + + const rank = getRank(user.posts || 0); + const avatarContent = user.image + ? `${user.username}` + : (user.username || '?').charAt(0).toUpperCase(); + + card.innerHTML = ` +
${avatarContent}
+
+

${user.username || 'N/A'}

+

${user.company || ''}

+ ${user.location ? `

📍 ${user.location}

` : ''} + ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} + ${rank.emoji} ${rank.title} +
+ `; + + card.addEventListener('click', () => openUserDetailModal(user)); + return card; +} + +function filterMembers(term) { + const cards = document.querySelectorAll('.member-card'); + const t = term.toLowerCase(); + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = text.includes(t) ? 'flex' : 'none'; + }); +} + +// ======================================== +// RANKS +// ======================================== +function getRank(posts) { + if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; + if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; + if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; + if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; + if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; + if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; + return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; +} + +// ======================================== +// WIKI +// ======================================== +let wikiData = []; + +async function loadWiki() { + try { + const response = await fetch(WIKI_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const result = await response.json(); + + if (result.data && Array.isArray(result.data)) { + wikiData = result.data; + renderWikiCards(wikiData); + + // Wiki count will be loaded from community webhook + } else { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; + } + } catch (error) { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function renderWikiCards(data) { + const grid = document.getElementById('wiki-grid'); + grid.innerHTML = ''; + + if (data.length === 0) { + grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; + return; + } + + // Group by topic + const topics = {}; + data.forEach(item => { + const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); + if (!topics[topicKey]) topics[topicKey] = []; + topics[topicKey].push(item); + }); + + const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; + + Object.entries(topics).forEach(([topicName, subtopics], idx) => { + const card = document.createElement('div'); + card.className = 'wiki-card'; + card.dataset.color = colors[idx % colors.length]; + + // Get excerpt from first subtopic + const firstSub = subtopics[0]; + const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); + const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); + + card.innerHTML = ` +
${escapeHtml(topicName)}
+
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
+
+ ${escapeHtml(subtopicTitle)} + ${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'} +
+ `; + + // Open modal on click + card.addEventListener('click', () => openWikiModal(topicName, subtopics)); + + grid.appendChild(card); + }); +} + +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 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); +} + +// ======================================== +// 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; +} diff --git a/variations/apple/style.css b/variations/apple/style.css new file mode 100644 index 0000000..33aedb7 --- /dev/null +++ b/variations/apple/style.css @@ -0,0 +1,429 @@ +/* Apple Style — Minimal, Clean, Premium */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { + font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background: #fff; + color: #1d1d1f; + line-height: 1.47059; + font-size: 17px; + -webkit-font-smoothing: antialiased; +} + +/* Navigation */ +.nav { + background: rgba(0,0,0,0.8); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: saturate(180%) blur(20px); + height: 44px; + position: sticky; + top: 0; + z-index: 1000; +} +.nav-container { + max-width: 1024px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; + padding: 0 22px; +} +.nav-brand { + display: flex; + align-items: center; + gap: 8px; + text-decoration: none; + color: #f5f5f7; + font-size: 14px; + font-weight: 400; + letter-spacing: -0.01em; +} +.nav-logo { font-size: 1.4rem; } +.nav-menu { display: flex; gap: 28px; align-items: center; } +.nav-link { + color: #f5f5f7; + text-decoration: none; + font-size: 12px; + opacity: 0.8; + transition: opacity 0.3s; +} +.nav-link:hover { opacity: 1; } +.nav-actions { display: flex; gap: 12px; align-items: center; } +.lang-select { display: flex; gap: 4px; } +.lang-btn { + background: none; + border: none; + color: #f5f5f7; + font-size: 12px; + cursor: pointer; + opacity: 0.8; + transition: opacity 0.3s; + padding: 4px 8px; +} +.lang-btn.active { opacity: 1; } +.lang-btn:hover { opacity: 1; } + +/* Buttons */ +.btn { + padding: 4px 16px; + font-size: 12px; + border-radius: 980px; + cursor: pointer; + text-decoration: none; + display: inline-block; + font-weight: 400; + border: none; + transition: all 0.3s; +} +.btn-primary { background: #0071e3; color: #fff; } +.btn-primary:hover { background: #0077ed; } +.btn-outline { + background: transparent; + color: #f5f5f7; + border: 1px solid rgba(255,255,255,0.4); +} +.btn-outline:hover { border-color: #f5f5f7; } +.btn-block { display: block; width: 100%; text-align: center; } +.btn-telegram { background: #0088cc; color: #fff; } + +/* Hero */ +.hero { + background: #000; + color: #f5f5f7; + text-align: center; + padding: 120px 20px 80px; + min-height: 80vh; + display: flex; + align-items: center; + justify-content: center; +} +.hero-title { + font-size: 56px; + line-height: 1.07143; + font-weight: 600; + letter-spacing: -0.005em; + margin-bottom: 16px; + background: linear-gradient(180deg, #f5f5f7 0%, #a1a1a6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +.hero-subtitle { + font-size: 24px; + line-height: 1.16667; + font-weight: 400; + color: #a1a1a6; + max-width: 600px; + margin: 0 auto 40px; +} +.hero-stats { display: flex; justify-content: center; gap: 80px; } +.stat { text-align: center; } +.stat-number { + display: block; + font-size: 48px; + font-weight: 600; + letter-spacing: -0.003em; + color: #f5f5f7; +} + +/* Sections */ +.section { + padding: 100px 20px; + max-width: 980px; + margin: 0 auto; +} +.section-alt { background: #f5f5f7; } +.section-title { + font-size: 40px; + line-height: 1.1; + font-weight: 600; + letter-spacing: -0.015em; + margin-bottom: 60px; + text-align: center; + color: #1d1d1f; +} +.container { max-width: 100%; } + +/* About */ +.about-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 30px; +} +.about-card { + padding: 24px; + border-radius: 18px; + background: #f5f5f7; + transition: transform 0.3s; +} +.about-card:hover { transform: scale(1.02); } +.about-icon { font-size: 2rem; margin-bottom: 12px; } +.about-card h3 { + font-size: 17px; + font-weight: 600; + color: #1d1d1f; + margin-bottom: 8px; +} +.about-card p { font-size: 14px; color: #6e6e73; line-height: 1.4; } + +/* Search */ +.search-bar { + display: flex; + max-width: 380px; + margin: 0 auto 40px; + position: relative; +} +.search-icon { + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + color: #86868b; +} +.search-input { + width: 100%; + padding: 12px 16px 12px 40px; + border: none; + border-radius: 12px; + background: #f5f5f7; + font-size: 15px; + color: #1d1d1f; +} +.search-input:focus { outline: 2px solid #0071e3; outline-offset: -2px; } + +/* Members Grid */ +.members-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; +} +.member-card { + display: flex; + align-items: center; + gap: 14px; + padding: 18px; + border-radius: 14px; + background: #fff; + cursor: pointer; + transition: all 0.3s; + box-shadow: 0 1px 3px rgba(0,0,0,0.04); +} +.member-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); } +.user-avatar { + width: 44px; + height: 44px; + border-radius: 50%; + object-fit: cover; +} +.user-avatar-text { + width: 44px; + height: 44px; + border-radius: 50%; + background: #f5f5f7; + color: #86868b; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; +} +.member-info h4 { font-size: 15px; font-weight: 600; color: #1d1d1f; margin-bottom: 2px; } +.member-company { font-size: 13px; color: #6e6e73; } +.member-location, .member-posts { font-size: 13px; color: #6e6e73; } +.rank-badge { + font-size: 11px; + padding: 3px 10px; + border-radius: 980px; + position: absolute; + top: -6px; + right: 0; + font-weight: 500; +} +.rank-badge.rank-rookie { background: #f5f5f7; color: #6e6e73; } +.rank-badge.rank-beginner { background: #e8f5e9; color: #2e7d32; } +.rank-badge.rank-member { background: #e3f2fd; color: #1565c0; } +.rank-badge.rank-contributor { background: #e0f7fa; color: #00838f; } +.rank-badge.rank-veteran { background: #f3e5f5; color: #8e24aa; } +.rank-badge.rank-expert { background: #fff3e0; color: #e65100; } +.rank-badge.rank-legend { background: #fce4ec; color: #c62828; } + +/* Wiki Cards */ +.wiki-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; +} +.wiki-card { + padding: 28px; + border-radius: 18px; + background: #f5f5f7; + cursor: pointer; + transition: all 0.3s; + border: none; +} +.wiki-card:hover { background: #e8e8ed; transform: translateY(-3px); } +.wiki-card-title { font-size: 17px; font-weight: 600; color: #1d1d1f; margin-bottom: 8px; } +.wiki-card-excerpt { font-size: 14px; color: #6e6e73; margin-bottom: 12px; } +.wiki-card-footer { display: flex; justify-content: space-between; font-size: 13px; color: #86868b; } +.wiki-card-subtopic { color: #0071e3; } +.no-results { padding: 40px; text-align: center; color: #86868b; } +.loading-text { padding: 40px; text-align: center; color: #86868b; font-style: italic; } + +/* Modal */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.6); + backdrop-filter: blur(10px); + z-index: 2000; + display: none; + align-items: center; + justify-content: center; +} +.modal-overlay.active { display: flex; } +.modal { + background: #fff; + border-radius: 20px; + padding: 36px; + max-width: 480px; + width: 90%; + box-shadow: 0 20px 60px rgba(0,0,0,0.3); + position: relative; + animation: modalIn 0.3s ease; +} +@keyframes modalIn { + from { opacity: 0; transform: scale(0.95); } + to { opacity: 1; transform: scale(1); } +} +.modal-close { + position: absolute; + top: 16px; + right: 20px; + background: #f5f5f7; + border: none; + width: 28px; + height: 28px; + border-radius: 50%; + font-size: 14px; + cursor: pointer; + color: #86868b; +} +.login-icon { font-size: 3rem; text-align: center; margin-bottom: 20px; } +.login-hint { color: #6e6e73; text-align: center; margin-bottom: 24px; font-size: 15px; } +.form-group { margin-bottom: 16px; } +.form-input { + width: 100%; + padding: 14px 16px; + border: 1px solid #d2d2d7; + border-radius: 12px; + font-size: 16px; + color: #1d1d1f; + background: #fff; +} +.form-input:focus { outline: 2px solid #0071e3; outline-offset: -2px; border-color: transparent; } +.login-step { display: none; } +.login-step.active { display: block; } + +/* Profile & Detail */ +.profile-username { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; } +.profile-rank { margin-bottom: 20px; } +.user-detail-modal { max-width: 560px; } +.user-detail-content { padding: 10px; } +.user-detail-avatar { + width: 70px; + height: 70px; + border-radius: 50%; + margin: 0 auto 20px; + overflow: hidden; +} +.user-detail-header { text-align: center; margin-bottom: 20px; } +.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } +.user-detail-name-rank h2 { font-size: 1.3rem; font-weight: 600; } +.user-detail-fields { display: grid; gap: 12px; } +.detail-field { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e5e5e7; } +.detail-label { color: #6e6e73; font-size: 14px; } +.detail-value { color: #1d1d1f; font-size: 14px; text-align: right; } +.user-detail-company { color: #6e6e73; text-align: center; } + +/* Telegram Banner */ +.telegram-banner { + background: #f5f5f7; + padding: 20px; + margin: 30px auto; + max-width: 980px; + border-radius: 18px; + display: flex; + align-items: center; + gap: 16px; +} +.banner-icon { font-size: 1.8rem; } +.banner-text strong { color: #1d1d1f; } + +/* Newsletter */ +.newsletter-card { text-align: center; max-width: 380px; margin: 0 auto; } +.newsletter-icon { font-size: 2.5rem; margin-bottom: 16px; } +.newsletter-hint { color: #6e6e73; margin-bottom: 20px; font-size: 15px; } + +/* Footer */ +.footer { + background: #f5f5f7; + padding: 40px 20px; + text-align: center; + border-top: 1px solid #d2d2d7; +} +.footer-brand { margin-bottom: 16px; } +.footer-logo { font-size: 1.6rem; } +.footer-title { color: #1d1d1f; margin-left: 10px; font-size: 14px; } +.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; } +.footer-links a { color: #424245; text-decoration: none; font-size: 12px; } +.footer-links a:hover { color: #0071e3; } +.footer-bottom p { color: #86868b; margin: 4px 0; font-size: 11px; } +.footer-bottom a { color: #0071e3; } +.footer-copy { font-size: 11px; } + +/* Hide/Show */ +.hide-en { display: none; } +body[data-lang="en"] .hide-en { display: inline; } +body[data-lang="en"] .hide-de { display: none; } +.hidden { display: none !important; } + +/* Responsive */ +@media (max-width: 768px) { + .nav-menu { display: none; } + .nav-menu.open { + display: flex; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: rgba(0,0,0,0.95); + flex-direction: column; + padding: 16px; + gap: 12px; + } + .nav-toggle { + display: flex; + flex-direction: column; + gap: 3px; + background: none; + border: none; + cursor: pointer; + padding: 4px; + } + .nav-toggle span { display: block; width: 18px; height: 1.5px; background: #f5f5f7; } + .hero-title { font-size: 32px; } + .hero-subtitle { font-size: 19px; } + .hero-stats { gap: 30px; flex-wrap: wrap; } + .stat-number { font-size: 36px; } + .section-title { font-size: 28px; } + .about-grid { grid-template-columns: 1fr; } + .wiki-grid { grid-template-columns: 1fr; } + .members-grid { grid-template-columns: 1fr; } +} +@media (min-width: 769px) { + .nav-toggle { display: none; } +} \ No newline at end of file diff --git a/variations/aurora/index.html b/variations/aurora/index.html new file mode 100644 index 0000000..90a8ba9 --- /dev/null +++ b/variations/aurora/index.html @@ -0,0 +1,455 @@ + + + + + + Paraguay SRL LLC — Community + + + + + + + + + + + + + + + + + +
+
+

+ Paraguay LLC & SRL Community + Paraguay LLC & SRL Community +

+

+ Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay + The experience exchange for German and American expats in Paraguay +

+
+
+ -- + Mitglieder + Members +
+
+ -- + Beiträge + Posts +
+
+ -- + Wiki-Artikel + Wiki Articles +
+
+
+
+ + +
+ +
+ + +
+ + +
+
+

+ Über die Community + About the Community +

+
+
+
🏦
+

+ Banken & Zahlungsverkehr + Banking & Payments +

+

+ Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. + Experiences with Paraguayan and international banks, accounts, transfers and credit cards. +

+
+
+
⚖️
+

+ Rechtliches + Legal Matters +

+

+ Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. + Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. +

+
+
+
📊
+

+ Steuern & Buchhaltung + Taxes & Accounting +

+

+ Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. + Tax advice, accounting systems, annual statements and international tax planning. +

+
+
+
💻
+

+ ERP-Systeme + ERP Systems +

+

+ Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. + Experiences with various ERP systems, software solutions and digital management. +

+
+
+
+
+ + +
+
+

+ Mitglieder + Members +

+
+ + +
+
+

+ Lade Mitglieder... + Loading members... +

+
+
+
+ + +
+
+

+ Wiki + Wiki +

+
+ + +
+
+

+ Lade Wiki... + Loading wiki... +

+
+
+
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/variations/aurora/main.js b/variations/aurora/main.js new file mode 100644 index 0000000..667dad7 --- /dev/null +++ b/variations/aurora/main.js @@ -0,0 +1,637 @@ +// ======================================== +// Paraguay LLC & SRL — Main JS +// ======================================== + +const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; +const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; +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'; + +let currentLang = 'de'; + +document.addEventListener('DOMContentLoaded', () => { + currentLang = document.body.dataset.lang || 'de'; + checkSession(); + loadCommunityStats(); + + // Smooth scroll nav links + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const target = document.querySelector(link.getAttribute('href')); + if (target) { + target.scrollIntoView({ behavior: 'smooth' }); + } + // Close mobile nav + document.getElementById('nav-menu').classList.remove('open'); + }); + }); + + // Mobile nav toggle + const navToggle = document.getElementById('nav-toggle'); + const navMenu = document.getElementById('nav-menu'); + if (navToggle) { + navToggle.addEventListener('click', () => { + navMenu.classList.toggle('open'); + }); + } + + // Navbar scroll effect + window.addEventListener('scroll', () => { + const nav = document.getElementById('main-nav'); + if (nav) { + nav.classList.toggle('scrolled', window.scrollY > 20); + } + }); + + // Language toggle + document.querySelectorAll('.lang-btn').forEach(btn => { + btn.addEventListener('click', () => { + const lang = btn.dataset.lang; + setLanguage(lang); + // Reload content in new language + if (isLoggedIn) { + if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); + if (document.getElementById('wiki-grid')) loadWiki(); + } + }); + }); + + // Member search + const memberSearch = document.getElementById('member-search'); + if (memberSearch) { + memberSearch.addEventListener('input', (e) => { + filterMembers(e.target.value); + }); + } + + // Wiki search + const wikiSearch = document.getElementById('wiki-search'); + if (wikiSearch) { + wikiSearch.addEventListener('input', (e) => { + searchWiki(e.target.value); + }); + } + + // Close modals on overlay click + document.querySelectorAll('.modal-overlay').forEach(overlay => { + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.classList.remove('active'); + } + }); + }); + + // Close modals on Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); + } + }); + + // Login button + const loginBtn = document.getElementById('login-btn'); + if (loginBtn) { + loginBtn.addEventListener('click', () => { + openLoginModal(); + }); + } +}); + +// ======================================== +// LANGUAGE +// ======================================== +function setLanguage(lang) { + currentLang = lang; + document.body.dataset.lang = lang; + document.querySelectorAll('.lang-btn').forEach(b => { + b.classList.toggle('active', b.dataset.lang === lang); + }); +} + +function isDE() { + return currentLang !== 'en'; +} + +// ======================================== +// COMMUNITY STATS +// ======================================== +async function loadCommunityStats() { + try { + const response = await fetch(COMMUNITY_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + + if (data.users !== undefined) { + animateCounter('stat-members', data.users); + } + if (data.topics !== undefined) { + document.getElementById('stat-wiki').textContent = data.topics; + } + } catch (error) { + console.error('Failed to load community stats:', error); + } +} + +function animateCounter(elementId, targetNumber) { + const element = document.getElementById(elementId); + if (!element) return; + + let current = 0; + const duration = 1500; // ms + const steps = 40; + const increment = targetNumber / steps; + const stepTime = duration / steps; + + const timer = setInterval(() => { + current += increment; + if (current >= targetNumber) { + element.textContent = targetNumber; + clearInterval(timer); + } else { + element.textContent = Math.floor(current); + } + }, stepTime); +} + +// ======================================== +// AUTH / SESSION +// ======================================== +let isLoggedIn = false; + +function isSessionValid() { + const sid = getCookie('sessionid'); + return sid.length > 0; +} + +function checkSession() { + isLoggedIn = isSessionValid(); + + if (isLoggedIn) { + document.body.dataset.loggedIn = 'true'; + document.getElementById('login-btn').style.display = 'none'; + document.getElementById('logout-btn').style.display = 'inline-flex'; + document.getElementById('profile-btn').style.display = 'inline-flex'; + document.getElementById('telegram-banner').style.display = 'none'; + document.getElementById('main-content').style.display = 'block'; + document.getElementById('newsletter-section').style.display = 'block'; + loadUsers(); + loadWiki(); + } else { + document.body.dataset.loggedIn = 'false'; + document.getElementById('login-btn').style.display = 'inline-flex'; + document.getElementById('logout-btn').style.display = 'none'; + document.getElementById('profile-btn').style.display = 'none'; + document.getElementById('telegram-banner').style.display = 'block'; + document.getElementById('main-content').style.display = 'none'; + document.getElementById('newsletter-section').style.display = 'none'; + } +} + +// ======================================== +// LOGIN MODAL +// ======================================== +function openLoginModal() { + document.getElementById('login-modal-overlay').classList.add('active'); + // Reset to step 1 + document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); + document.getElementById('login-step-1').classList.add('active'); + document.getElementById('telegram-user').value = ''; + document.getElementById('verification-code').value = ''; +} + +function closeLoginModal() { + document.getElementById('login-modal-overlay').classList.remove('active'); +} + +// ======================================== +// PROFILE MODAL +// ======================================== +function openProfileModal() { + const sid = getCookie('sessionid'); + if (!sid) { alert('Bitte anmelden.'); return; } + + fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) + .then(r => r.json()) + .then(user => { + document.getElementById('profile-username-display').textContent = user.username || ''; + const rank = getRank(user.posts || 0); + const badge = document.getElementById('profile-rank-badge'); + badge.innerHTML = `${rank.emoji} ${rank.title}`; + + document.getElementById('profile-company').value = user.company || ''; + document.getElementById('profile-email').value = user.email || ''; + document.getElementById('profile-homepage').value = user.homepage || ''; + document.getElementById('profile-image').value = user.image || ''; + document.getElementById('profile-location').value = user.location || ''; + document.getElementById('profile-description').value = user.Description || ''; + document.getElementById('profile-publish').checked = true; + + document.getElementById('profile-modal-overlay').classList.add('active'); + }) + .catch(() => alert('Fehler beim Laden des Profils.')); +} + +function closeProfileModal() { + document.getElementById('profile-modal-overlay').classList.remove('active'); +} + +function saveProfile() { + const sid = getCookie('sessionid'); + fetch(PROFILE_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('profile-username-display').textContent, + company: document.getElementById('profile-company').value.trim(), + email: document.getElementById('profile-email').value, + homepage: document.getElementById('profile-homepage').value, + image: document.getElementById('profile-image').value, + location: document.getElementById('profile-location').value, + Description: document.getElementById('profile-description').value, + sessionid: sid, + publish: document.getElementById('profile-publish').checked + }) + }) + .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) + .catch(() => alert('Fehler bei der Verbindung.')); +} + +// ======================================== +// USER DETAIL MODAL +// ======================================== +function openUserDetailModal(user) { + const avatar = document.getElementById('user-detail-avatar'); + if (user.image) { + avatar.innerHTML = `${user.username}`; + } else { + avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; + } + + document.getElementById('user-detail-initial').textContent = ''; + document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); + + const rank = getRank(user.posts || 0); + document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; + document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; + + document.getElementById('user-detail-company').textContent = user.company || ''; + + const emailEl = document.getElementById('user-detail-email'); + emailEl.innerHTML = user.email ? `${user.email}` : '-'; + + const hpEl = document.getElementById('user-detail-homepage'); + const hp = user.homepage || ''; + hpEl.innerHTML = hp ? `${hp}` : '-'; + + document.getElementById('user-detail-location').textContent = user.location || '-'; + document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); + + document.getElementById('user-detail-modal-overlay').classList.add('active'); +} + +function closeUserDetailModal() { + document.getElementById('user-detail-modal-overlay').classList.remove('active'); +} + +// ======================================== +// LOGIN FLOW +// ======================================== +function sendTelegramUser() { + const user = document.getElementById('telegram-user').value.trim(); + if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } + + const btn = event.target; + btn.disabled = true; + btn.textContent = isDE() ? 'Sende...' : 'Sending...'; + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: user }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-3').classList.add('active'); + } else if (data.status === 'code send') { + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-2').classList.add('active'); + } else { + alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); + } + }) + .catch(() => { + btn.disabled = false; + alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); + }); +} + +function verifyCode() { + const code = document.getElementById('verification-code').value.trim(); + if (!code) { alert('Bitte geben Sie den Code ein.'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + code: code, + sessionid: getCookie('sessionid') + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function submitLoginData() { + const name = document.getElementById('full-name').value.trim(); + const llc = document.getElementById('llc-name').value.trim(); + if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + name: name, + llc: llc + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function logout() { + setCookie('sessionid', '', -1); + checkSession(); +} + +// ======================================== +// NEWSLETTER +// ======================================== +function subscribeNewsletter() { + const email = document.getElementById('newsletter-email').value.trim(); + if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } + + fetch(NEWSLETTER_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email: email }) + }) + .then(r => { + if (r.ok) { + document.getElementById('newsletter-form').classList.add('hidden'); + document.getElementById('newsletter-success').classList.remove('hidden'); + } else { + alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +// ======================================== +// USERS / MEMBERS +// ======================================== +async function loadUsers() { + try { + const response = await fetch(USER_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + const container = document.getElementById('members-list'); + + if (data.data && Array.isArray(data.data)) { + container.innerHTML = ''; + container.style.display = 'grid'; + + data.data.forEach(user => { + const card = createMemberCard(user); + container.appendChild(card); + }); + + // Update stats will be handled by loadCommunityStats + } else { + container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; + } + } catch (error) { + const container = document.getElementById('members-list'); + container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function createMemberCard(user) { + const card = document.createElement('div'); + card.className = 'member-card'; + + const rank = getRank(user.posts || 0); + const avatarContent = user.image + ? `${user.username}` + : (user.username || '?').charAt(0).toUpperCase(); + + card.innerHTML = ` +
${avatarContent}
+
+

${user.username || 'N/A'}

+

${user.company || ''}

+ ${user.location ? `

📍 ${user.location}

` : ''} + ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} + ${rank.emoji} ${rank.title} +
+ `; + + card.addEventListener('click', () => openUserDetailModal(user)); + return card; +} + +function filterMembers(term) { + const cards = document.querySelectorAll('.member-card'); + const t = term.toLowerCase(); + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = text.includes(t) ? 'flex' : 'none'; + }); +} + +// ======================================== +// RANKS +// ======================================== +function getRank(posts) { + if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; + if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; + if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; + if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; + if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; + if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; + return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; +} + +// ======================================== +// WIKI +// ======================================== +let wikiData = []; + +async function loadWiki() { + try { + const response = await fetch(WIKI_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const result = await response.json(); + + if (result.data && Array.isArray(result.data)) { + wikiData = result.data; + renderWikiCards(wikiData); + + // Wiki count will be loaded from community webhook + } else { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; + } + } catch (error) { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function renderWikiCards(data) { + const grid = document.getElementById('wiki-grid'); + grid.innerHTML = ''; + + if (data.length === 0) { + grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; + return; + } + + // Group by topic + const topics = {}; + data.forEach(item => { + const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); + if (!topics[topicKey]) topics[topicKey] = []; + topics[topicKey].push(item); + }); + + const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; + + Object.entries(topics).forEach(([topicName, subtopics], idx) => { + const card = document.createElement('div'); + card.className = 'wiki-card'; + card.dataset.color = colors[idx % colors.length]; + + // Get excerpt from first subtopic + const firstSub = subtopics[0]; + const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); + const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); + + card.innerHTML = ` +
${escapeHtml(topicName)}
+
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
+
+ ${escapeHtml(subtopicTitle)} + ${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'} +
+ `; + + // Open modal on click + card.addEventListener('click', () => openWikiModal(topicName, subtopics)); + + grid.appendChild(card); + }); +} + +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 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); +} + +// ======================================== +// 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; +} diff --git a/variations/aurora/style.css b/variations/aurora/style.css new file mode 100644 index 0000000..f3909df --- /dev/null +++ b/variations/aurora/style.css @@ -0,0 +1,510 @@ +/* Aurora Glassmorphism — Dreamy Gradient with Frosted Glass */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { + font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; + background: #0f0c29; + color: #fff; + line-height: 1.6; + overflow-x: hidden; +} + +/* Animated Aurora Background */ +body::before { + content: ''; + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: linear-gradient( + 135deg, + #0f0c29 0%, + #302b63 25%, + #24243e 50%, + #0f0c29 75%, + #302b63 100% + ); + background-size: 400% 400%; + animation: aurora 20s ease infinite; + z-index: -2; +} + +@keyframes aurora { + 0% { background-position: 0% 50%; } + 25% { background-position: 100% 50%; } + 50% { background-position: 100% 100%; } + 75% { background-position: 0% 100%; } + 100% { background-position: 0% 50%; } +} + +/* Floating orbs */ +body::after { + content: ''; + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: + radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.2) 0%, transparent 50%), + radial-gradient(circle at 50% 50%, rgba(120, 255, 198, 0.15) 0%, transparent 60%); + animation: float 30s ease-in-out infinite; + z-index: -1; +} + +@keyframes float { + 0%, 100% { transform: translate(0, 0) rotate(0deg); } + 33% { transform: translate(30px, -30px) rotate(120deg); } + 66% { transform: translate(-20px, 20px) rotate(240deg); } +} + +/* Glass Card Mixin */ +.glass { + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 20px; +} + +/* Navigation */ +.nav { + background: rgba(15, 12, 41, 0.8); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 0 20px; + height: 60px; + position: sticky; + top: 0; + z-index: 1000; +} +.nav-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; +} +.nav-brand { + display: flex; + align-items: center; + gap: 10px; + text-decoration: none; + color: #fff; + font-size: 18px; + font-weight: 700; +} +.nav-logo { font-size: 24px; } +.nav-menu { display: flex; gap: 24px; align-items: center; } +.nav-link { + color: rgba(255, 255, 255, 0.7); + text-decoration: none; + font-size: 14px; + font-weight: 500; + transition: all 0.3s; +} +.nav-link:hover { + color: #fff; + text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); +} +.nav-actions { display: flex; gap: 10px; align-items: center; } +.lang-select { display: flex; gap: 6px; } +.lang-btn { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: #fff; + padding: 6px 14px; + font-size: 12px; + cursor: pointer; + border-radius: 20px; + transition: all 0.3s; +} +.lang-btn.active { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.4); + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); +} + +/* Buttons */ +.btn { + padding: 10px 24px; + font-size: 14px; + font-weight: 600; + border-radius: 25px; + cursor: pointer; + text-decoration: none; + display: inline-block; + border: none; + transition: all 0.3s; +} +.btn-primary { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: #fff; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); +} +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); +} +.btn-outline { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.3); + color: #fff; +} +.btn-outline:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.5); +} +.btn-block { display: block; width: 100%; text-align: center; } +.btn-telegram { background: linear-gradient(135deg, #0088cc, #00aaff); color: #fff; } + +/* Hero */ +.hero { + text-align: center; + padding: 100px 20px 60px; + position: relative; +} +.hero-title { + font-size: 48px; + font-weight: 800; + margin-bottom: 16px; + background: linear-gradient(135deg, #fff 0%, #a78bfa 50%, #f472b6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +.hero-subtitle { + font-size: 18px; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 40px; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} +.hero-stats { display: flex; justify-content: center; gap: 60px; } +.stat { text-align: center; } +.stat-number { + display: block; + font-size: 40px; + font-weight: 700; + background: linear-gradient(135deg, #667eea, #764ba2); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Sections */ +.section { + padding: 60px 20px; + max-width: 1200px; + margin: 0 auto; +} +.section-alt { + background: rgba(255, 255, 255, 0.03); + border-top: 1px solid rgba(255, 255, 255, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} +.section-title { + font-size: 32px; + font-weight: 700; + margin-bottom: 40px; + text-align: center; +} +.container { max-width: 100%; } + +/* About */ +.about-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 24px; +} +.about-card { + padding: 30px; + transition: all 0.3s; +} +.about-card:hover { + transform: translateY(-5px); + background: rgba(255, 255, 255, 0.12); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); +} +.about-icon { font-size: 2.5rem; margin-bottom: 16px; } +.about-card h3 { + font-size: 18px; + font-weight: 600; + margin-bottom: 10px; + color: #fff; +} +.about-card p { font-size: 14px; color: rgba(255, 255, 255, 0.7); } + +/* Search */ +.search-bar { + display: flex; + max-width: 400px; + margin: 0 auto 30px; + position: relative; +} +.search-icon { + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + width: 18px; + height: 18px; + color: rgba(255, 255, 255, 0.5); +} +.search-input { + width: 100%; + padding: 14px 18px 14px 44px; + border-radius: 25px; + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.15); + font-size: 15px; + color: #fff; +} +.search-input:focus { + outline: none; + border-color: rgba(255, 255, 255, 0.4); + background: rgba(255, 255, 255, 0.12); +} + +/* Members */ +.members-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 16px; +} +.member-card { + padding: 20px; + transition: all 0.3s; + cursor: pointer; +} +.member-card:hover { + transform: translateY(-3px); + background: rgba(255, 255, 255, 0.12); +} +.user-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + object-fit: cover; + border: 2px solid rgba(255, 255, 255, 0.2); +} +.user-avatar-text { + width: 48px; + height: 48px; + border-radius: 50%; + background: linear-gradient(135deg, #667eea, #764ba2); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: 600; +} +.member-info h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } +.member-company { font-size: 13px; color: rgba(255, 255, 255, 0.6); } +.member-location, .member-posts { font-size: 13px; color: rgba(255, 255, 255, 0.5); } +.rank-badge { + font-size: 11px; + padding: 4px 10px; + border-radius: 15px; + position: absolute; + top: -6px; + right: 0; + font-weight: 600; +} +.rank-badge.rank-rookie { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); } +.rank-badge.rank-beginner { background: rgba(74,222,128,0.2); color: #4ade80; } +.rank-badge.rank-member { background: rgba(96,165,250,0.2); color: #60a5fa; } +.rank-badge.rank-contributor { background: rgba(45,212,191,0.2); color: #2dd4bf; } +.rank-badge.rank-veteran { background: rgba(192,132,252,0.2); color: #c084fc; } +.rank-badge.rank-expert { background: rgba(251,191,36,0.2); color: #fbbf24; } +.rank-badge.rank-legend { background: rgba(248,113,113,0.2); color: #f87171; } + +/* Wiki Cards */ +.wiki-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; +} +.wiki-card { + padding: 24px; + cursor: pointer; + transition: all 0.3s; +} +.wiki-card:hover { + transform: translateY(-4px); + background: rgba(255, 255, 255, 0.12); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} +.wiki-card-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; } +.wiki-card-excerpt { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; } +.wiki-card-footer { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, 0.5); } +.wiki-card-subtopic { color: #a78bfa; } +.no-results { padding: 30px; text-align: center; color: rgba(255, 255, 255, 0.5); } +.loading-text { padding: 30px; text-align: center; color: rgba(255, 255, 255, 0.4); font-style: italic; } + +/* Modal */ +.modal-overlay { + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(8px); + z-index: 2000; + display: none; + align-items: center; + justify-content: center; +} +.modal-overlay.active { display: flex; } +.modal { + padding: 32px; + max-width: 480px; + width: 90%; + position: relative; + animation: glassIn 0.3s ease; +} +@keyframes glassIn { + from { opacity: 0; transform: scale(0.95) translateY(10px); } + to { opacity: 1; transform: scale(1) translateY(0); } +} +.modal-close { + position: absolute; + top: 16px; + right: 20px; + background: rgba(255, 255, 255, 0.1); + border: none; + width: 32px; + height: 32px; + border-radius: 50%; + font-size: 18px; + cursor: pointer; + color: #fff; + transition: background 0.3s; +} +.modal-close:hover { background: rgba(255, 255, 255, 0.2); } +.login-icon { font-size: 3rem; text-align: center; margin-bottom: 20px; } +.login-hint { color: rgba(255, 255, 255, 0.7); text-align: center; margin-bottom: 24px; } +.form-group { margin-bottom: 16px; } +.form-input { + width: 100%; + padding: 14px 18px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.2); + font-size: 15px; + color: #fff; +} +.form-input:focus { + outline: none; + border-color: rgba(167, 139, 250, 0.5); + background: rgba(255, 255, 255, 0.12); +} +.login-step { display: none; } +.login-step.active { display: block; } + +/* Profile & Detail */ +.profile-username { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; } +.profile-rank { margin-bottom: 20px; } +.user-detail-modal { max-width: 540px; } +.user-detail-content { padding: 10px; } +.user-detail-avatar { + width: 64px; + height: 64px; + border-radius: 50%; + margin: 0 auto 20px; + overflow: hidden; + border: 2px solid rgba(255, 255, 255, 0.2); +} +.user-detail-header { text-align: center; margin-bottom: 20px; } +.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } +.user-detail-name-rank h2 { font-size: 1.3rem; font-weight: 700; } +.user-detail-fields { display: grid; gap: 12px; } +.detail-field { + display: flex; + justify-content: space-between; + padding: 12px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} +.detail-label { color: rgba(255, 255, 255, 0.6); font-size: 14px; } +.detail-value { color: #fff; font-size: 14px; text-align: right; } +.user-detail-company { color: rgba(255, 255, 255, 0.6); text-align: center; } + +/* Telegram Banner */ +.telegram-banner { + padding: 20px; + margin: 20px auto; + max-width: 1200px; + display: flex; + align-items: center; + gap: 16px; + animation: glow 3s ease-in-out infinite; +} +@keyframes glow { + 0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.2); } + 50% { box-shadow: 0 0 40px rgba(102, 126, 234, 0.4); } +} +.banner-icon { font-size: 2rem; } +.banner-text strong { color: #fff; } + +/* Newsletter */ +.newsletter-card { text-align: center; max-width: 400px; margin: 0 auto; } +.newsletter-icon { font-size: 2.5rem; margin-bottom: 16px; } +.newsletter-hint { color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; } + +/* Footer */ +.footer { + padding: 40px 20px; + text-align: center; + border-top: 1px solid rgba(255, 255, 255, 0.1); + margin-top: 40px; +} +.footer-brand { margin-bottom: 16px; } +.footer-logo { font-size: 1.5rem; } +.footer-title { color: #fff; margin-left: 10px; font-size: 14px; font-weight: 600; } +.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; } +.footer-links a { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 13px; } +.footer-links a:hover { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } +.footer-bottom p { color: rgba(255, 255, 255, 0.4); margin: 4px 0; font-size: 12px; } +.footer-bottom a { color: #a78bfa; } +.footer-copy { font-size: 12px; } + +/* Hide/Show */ +.hide-en { display: none; } +body[data-lang="en"] .hide-en { display: inline; } +body[data-lang="en"] .hide-de { display: none; } +.hidden { display: none !important; } + +/* Responsive */ +@media (max-width: 768px) { + .nav-menu { display: none; } + .nav-menu.open { + display: flex; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: rgba(15, 12, 41, 0.95); + flex-direction: column; + padding: 16px; + gap: 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + .nav-toggle { + display: flex; + flex-direction: column; + gap: 3px; + background: none; + border: none; + cursor: pointer; + padding: 4px; + } + .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; } + .hero-title { font-size: 28px; } + .hero-subtitle { font-size: 16px; } + .hero-stats { gap: 30px; flex-wrap: wrap; } + .stat-number { font-size: 28px; } + .about-grid { grid-template-columns: 1fr; } + .wiki-grid { grid-template-columns: 1fr; } + .members-grid { grid-template-columns: 1fr; } +} +@media (min-width: 769px) { + .nav-toggle { display: none; } +} \ No newline at end of file diff --git a/variations/facebook/index.html b/variations/facebook/index.html new file mode 100644 index 0000000..165b0bf --- /dev/null +++ b/variations/facebook/index.html @@ -0,0 +1,467 @@ + + + + + + Paraguay SRL LLC — Community + + + + + + + + + + + + + + + + + + + + +
+
+
+

+ Paraguay LLC & SRL Community + Paraguay LLC & SRL Community +

+

+ Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay + The experience exchange for German and American expats in Paraguay +

+
+
+ -- + Mitglieder + Members +
+
+ -- + Beiträge + Posts +
+
+ -- + Wiki-Artikel + Wiki Articles +
+
+
+
+
+
+
+ + +
+ +
+ + +
+ + +
+
+

+ Über die Community + About the Community +

+
+
+
🏦
+

+ Banken & Zahlungsverkehr + Banking & Payments +

+

+ Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. + Experiences with Paraguayan and international banks, accounts, transfers and credit cards. +

+
+
+
⚖️
+

+ Rechtliches + Legal Matters +

+

+ Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. + Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. +

+
+
+
📊
+

+ Steuern & Buchhaltung + Taxes & Accounting +

+

+ Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. + Tax advice, accounting systems, annual statements and international tax planning. +

+
+
+
💻
+

+ ERP-Systeme + ERP Systems +

+

+ Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. + Experiences with various ERP systems, software solutions and digital management. +

+
+
+
+
+ + +
+
+

+ Mitglieder + Members +

+
+ + +
+
+

+ Lade Mitglieder... + Loading members... +

+
+
+
+ + +
+
+

+ Wiki + Wiki +

+
+ + +
+
+

+ Lade Wiki... + Loading wiki... +

+
+
+
+ + + + +
+ + + + + + + diff --git a/variations/facebook/main.js b/variations/facebook/main.js new file mode 100644 index 0000000..667dad7 --- /dev/null +++ b/variations/facebook/main.js @@ -0,0 +1,637 @@ +// ======================================== +// Paraguay LLC & SRL — Main JS +// ======================================== + +const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; +const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; +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'; + +let currentLang = 'de'; + +document.addEventListener('DOMContentLoaded', () => { + currentLang = document.body.dataset.lang || 'de'; + checkSession(); + loadCommunityStats(); + + // Smooth scroll nav links + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const target = document.querySelector(link.getAttribute('href')); + if (target) { + target.scrollIntoView({ behavior: 'smooth' }); + } + // Close mobile nav + document.getElementById('nav-menu').classList.remove('open'); + }); + }); + + // Mobile nav toggle + const navToggle = document.getElementById('nav-toggle'); + const navMenu = document.getElementById('nav-menu'); + if (navToggle) { + navToggle.addEventListener('click', () => { + navMenu.classList.toggle('open'); + }); + } + + // Navbar scroll effect + window.addEventListener('scroll', () => { + const nav = document.getElementById('main-nav'); + if (nav) { + nav.classList.toggle('scrolled', window.scrollY > 20); + } + }); + + // Language toggle + document.querySelectorAll('.lang-btn').forEach(btn => { + btn.addEventListener('click', () => { + const lang = btn.dataset.lang; + setLanguage(lang); + // Reload content in new language + if (isLoggedIn) { + if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); + if (document.getElementById('wiki-grid')) loadWiki(); + } + }); + }); + + // Member search + const memberSearch = document.getElementById('member-search'); + if (memberSearch) { + memberSearch.addEventListener('input', (e) => { + filterMembers(e.target.value); + }); + } + + // Wiki search + const wikiSearch = document.getElementById('wiki-search'); + if (wikiSearch) { + wikiSearch.addEventListener('input', (e) => { + searchWiki(e.target.value); + }); + } + + // Close modals on overlay click + document.querySelectorAll('.modal-overlay').forEach(overlay => { + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.classList.remove('active'); + } + }); + }); + + // Close modals on Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); + } + }); + + // Login button + const loginBtn = document.getElementById('login-btn'); + if (loginBtn) { + loginBtn.addEventListener('click', () => { + openLoginModal(); + }); + } +}); + +// ======================================== +// LANGUAGE +// ======================================== +function setLanguage(lang) { + currentLang = lang; + document.body.dataset.lang = lang; + document.querySelectorAll('.lang-btn').forEach(b => { + b.classList.toggle('active', b.dataset.lang === lang); + }); +} + +function isDE() { + return currentLang !== 'en'; +} + +// ======================================== +// COMMUNITY STATS +// ======================================== +async function loadCommunityStats() { + try { + const response = await fetch(COMMUNITY_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + + if (data.users !== undefined) { + animateCounter('stat-members', data.users); + } + if (data.topics !== undefined) { + document.getElementById('stat-wiki').textContent = data.topics; + } + } catch (error) { + console.error('Failed to load community stats:', error); + } +} + +function animateCounter(elementId, targetNumber) { + const element = document.getElementById(elementId); + if (!element) return; + + let current = 0; + const duration = 1500; // ms + const steps = 40; + const increment = targetNumber / steps; + const stepTime = duration / steps; + + const timer = setInterval(() => { + current += increment; + if (current >= targetNumber) { + element.textContent = targetNumber; + clearInterval(timer); + } else { + element.textContent = Math.floor(current); + } + }, stepTime); +} + +// ======================================== +// AUTH / SESSION +// ======================================== +let isLoggedIn = false; + +function isSessionValid() { + const sid = getCookie('sessionid'); + return sid.length > 0; +} + +function checkSession() { + isLoggedIn = isSessionValid(); + + if (isLoggedIn) { + document.body.dataset.loggedIn = 'true'; + document.getElementById('login-btn').style.display = 'none'; + document.getElementById('logout-btn').style.display = 'inline-flex'; + document.getElementById('profile-btn').style.display = 'inline-flex'; + document.getElementById('telegram-banner').style.display = 'none'; + document.getElementById('main-content').style.display = 'block'; + document.getElementById('newsletter-section').style.display = 'block'; + loadUsers(); + loadWiki(); + } else { + document.body.dataset.loggedIn = 'false'; + document.getElementById('login-btn').style.display = 'inline-flex'; + document.getElementById('logout-btn').style.display = 'none'; + document.getElementById('profile-btn').style.display = 'none'; + document.getElementById('telegram-banner').style.display = 'block'; + document.getElementById('main-content').style.display = 'none'; + document.getElementById('newsletter-section').style.display = 'none'; + } +} + +// ======================================== +// LOGIN MODAL +// ======================================== +function openLoginModal() { + document.getElementById('login-modal-overlay').classList.add('active'); + // Reset to step 1 + document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); + document.getElementById('login-step-1').classList.add('active'); + document.getElementById('telegram-user').value = ''; + document.getElementById('verification-code').value = ''; +} + +function closeLoginModal() { + document.getElementById('login-modal-overlay').classList.remove('active'); +} + +// ======================================== +// PROFILE MODAL +// ======================================== +function openProfileModal() { + const sid = getCookie('sessionid'); + if (!sid) { alert('Bitte anmelden.'); return; } + + fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) + .then(r => r.json()) + .then(user => { + document.getElementById('profile-username-display').textContent = user.username || ''; + const rank = getRank(user.posts || 0); + const badge = document.getElementById('profile-rank-badge'); + badge.innerHTML = `${rank.emoji} ${rank.title}`; + + document.getElementById('profile-company').value = user.company || ''; + document.getElementById('profile-email').value = user.email || ''; + document.getElementById('profile-homepage').value = user.homepage || ''; + document.getElementById('profile-image').value = user.image || ''; + document.getElementById('profile-location').value = user.location || ''; + document.getElementById('profile-description').value = user.Description || ''; + document.getElementById('profile-publish').checked = true; + + document.getElementById('profile-modal-overlay').classList.add('active'); + }) + .catch(() => alert('Fehler beim Laden des Profils.')); +} + +function closeProfileModal() { + document.getElementById('profile-modal-overlay').classList.remove('active'); +} + +function saveProfile() { + const sid = getCookie('sessionid'); + fetch(PROFILE_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('profile-username-display').textContent, + company: document.getElementById('profile-company').value.trim(), + email: document.getElementById('profile-email').value, + homepage: document.getElementById('profile-homepage').value, + image: document.getElementById('profile-image').value, + location: document.getElementById('profile-location').value, + Description: document.getElementById('profile-description').value, + sessionid: sid, + publish: document.getElementById('profile-publish').checked + }) + }) + .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) + .catch(() => alert('Fehler bei der Verbindung.')); +} + +// ======================================== +// USER DETAIL MODAL +// ======================================== +function openUserDetailModal(user) { + const avatar = document.getElementById('user-detail-avatar'); + if (user.image) { + avatar.innerHTML = `${user.username}`; + } else { + avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; + } + + document.getElementById('user-detail-initial').textContent = ''; + document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); + + const rank = getRank(user.posts || 0); + document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; + document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; + + document.getElementById('user-detail-company').textContent = user.company || ''; + + const emailEl = document.getElementById('user-detail-email'); + emailEl.innerHTML = user.email ? `${user.email}` : '-'; + + const hpEl = document.getElementById('user-detail-homepage'); + const hp = user.homepage || ''; + hpEl.innerHTML = hp ? `${hp}` : '-'; + + document.getElementById('user-detail-location').textContent = user.location || '-'; + document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); + + document.getElementById('user-detail-modal-overlay').classList.add('active'); +} + +function closeUserDetailModal() { + document.getElementById('user-detail-modal-overlay').classList.remove('active'); +} + +// ======================================== +// LOGIN FLOW +// ======================================== +function sendTelegramUser() { + const user = document.getElementById('telegram-user').value.trim(); + if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } + + const btn = event.target; + btn.disabled = true; + btn.textContent = isDE() ? 'Sende...' : 'Sending...'; + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: user }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-3').classList.add('active'); + } else if (data.status === 'code send') { + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-2').classList.add('active'); + } else { + alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); + } + }) + .catch(() => { + btn.disabled = false; + alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); + }); +} + +function verifyCode() { + const code = document.getElementById('verification-code').value.trim(); + if (!code) { alert('Bitte geben Sie den Code ein.'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + code: code, + sessionid: getCookie('sessionid') + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function submitLoginData() { + const name = document.getElementById('full-name').value.trim(); + const llc = document.getElementById('llc-name').value.trim(); + if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + name: name, + llc: llc + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function logout() { + setCookie('sessionid', '', -1); + checkSession(); +} + +// ======================================== +// NEWSLETTER +// ======================================== +function subscribeNewsletter() { + const email = document.getElementById('newsletter-email').value.trim(); + if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } + + fetch(NEWSLETTER_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email: email }) + }) + .then(r => { + if (r.ok) { + document.getElementById('newsletter-form').classList.add('hidden'); + document.getElementById('newsletter-success').classList.remove('hidden'); + } else { + alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +// ======================================== +// USERS / MEMBERS +// ======================================== +async function loadUsers() { + try { + const response = await fetch(USER_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + const container = document.getElementById('members-list'); + + if (data.data && Array.isArray(data.data)) { + container.innerHTML = ''; + container.style.display = 'grid'; + + data.data.forEach(user => { + const card = createMemberCard(user); + container.appendChild(card); + }); + + // Update stats will be handled by loadCommunityStats + } else { + container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; + } + } catch (error) { + const container = document.getElementById('members-list'); + container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function createMemberCard(user) { + const card = document.createElement('div'); + card.className = 'member-card'; + + const rank = getRank(user.posts || 0); + const avatarContent = user.image + ? `${user.username}` + : (user.username || '?').charAt(0).toUpperCase(); + + card.innerHTML = ` +
${avatarContent}
+
+

${user.username || 'N/A'}

+

${user.company || ''}

+ ${user.location ? `

📍 ${user.location}

` : ''} + ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} + ${rank.emoji} ${rank.title} +
+ `; + + card.addEventListener('click', () => openUserDetailModal(user)); + return card; +} + +function filterMembers(term) { + const cards = document.querySelectorAll('.member-card'); + const t = term.toLowerCase(); + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = text.includes(t) ? 'flex' : 'none'; + }); +} + +// ======================================== +// RANKS +// ======================================== +function getRank(posts) { + if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; + if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; + if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; + if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; + if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; + if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; + return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; +} + +// ======================================== +// WIKI +// ======================================== +let wikiData = []; + +async function loadWiki() { + try { + const response = await fetch(WIKI_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const result = await response.json(); + + if (result.data && Array.isArray(result.data)) { + wikiData = result.data; + renderWikiCards(wikiData); + + // Wiki count will be loaded from community webhook + } else { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; + } + } catch (error) { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function renderWikiCards(data) { + const grid = document.getElementById('wiki-grid'); + grid.innerHTML = ''; + + if (data.length === 0) { + grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; + return; + } + + // Group by topic + const topics = {}; + data.forEach(item => { + const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); + if (!topics[topicKey]) topics[topicKey] = []; + topics[topicKey].push(item); + }); + + const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; + + Object.entries(topics).forEach(([topicName, subtopics], idx) => { + const card = document.createElement('div'); + card.className = 'wiki-card'; + card.dataset.color = colors[idx % colors.length]; + + // Get excerpt from first subtopic + const firstSub = subtopics[0]; + const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); + const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); + + card.innerHTML = ` +
${escapeHtml(topicName)}
+
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
+
+ ${escapeHtml(subtopicTitle)} + ${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'} +
+ `; + + // Open modal on click + card.addEventListener('click', () => openWikiModal(topicName, subtopics)); + + grid.appendChild(card); + }); +} + +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 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); +} + +// ======================================== +// 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; +} diff --git a/variations/facebook/style.css b/variations/facebook/style.css new file mode 100644 index 0000000..47c5bfa --- /dev/null +++ b/variations/facebook/style.css @@ -0,0 +1,401 @@ +/* Facebook Style — Blue social network */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + background: #f0f2f5; + color: #1c1e21; + line-height: 1.33; + font-size: 15px; +} + +/* Navigation */ +.nav { + background: #fff; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + height: 56px; + position: sticky; + top: 0; + z-index: 1000; + padding: 0 16px; +} +.nav-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; +} +.nav-brand { + display: flex; + align-items: center; + gap: 10px; + text-decoration: none; + color: #1877f2; + font-size: 24px; + font-weight: 700; +} +.nav-logo { font-size: 28px; } +.nav-menu { display: flex; gap: 8px; align-items: center; } +.nav-link { + color: #65676b; + text-decoration: none; + font-size: 15px; + font-weight: 500; + padding: 8px 16px; + border-radius: 8px; + transition: background 0.2s; +} +.nav-link:hover { background: #f0f2f5; } +.nav-actions { display: flex; gap: 8px; align-items: center; } +.lang-select { display: flex; gap: 4px; } +.lang-btn { + background: #f0f2f5; + border: none; + padding: 6px 12px; + font-size: 13px; + cursor: pointer; + border-radius: 6px; + font-weight: 500; +} +.lang-btn.active { background: #e7f3ff; color: #1877f2; } +.lang-btn:hover { background: #e4e6eb; } + +/* Buttons */ +.btn { + padding: 8px 16px; + font-size: 15px; + font-weight: 600; + border-radius: 6px; + cursor: pointer; + text-decoration: none; + display: inline-block; + border: none; + transition: background 0.2s; +} +.btn-primary { background: #1877f2; color: #fff; } +.btn-primary:hover { background: #166fe5; } +.btn-outline { + background: #f0f2f5; + color: #1c1e21; + border: none; +} +.btn-outline:hover { background: #e4e6eb; } +.btn-block { display: block; width: 100%; text-align: center; } +.btn-telegram { background: #0088cc; color: #fff; } + +/* Hero */ +.hero { + background: linear-gradient(135deg, #1877f2 0%, #42b0ff 100%); + color: #fff; + text-align: center; + padding: 60px 20px 40px; +} +.hero-title { + font-size: 42px; + font-weight: 700; + margin-bottom: 12px; + text-shadow: 0 2px 4px rgba(0,0,0,0.1); +} +.hero-subtitle { + font-size: 18px; + opacity: 0.9; + margin-bottom: 30px; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} +.hero-stats { display: flex; justify-content: center; gap: 60px; } +.stat { text-align: center; } +.stat-number { + display: block; + font-size: 36px; + font-weight: 700; +} + +/* Sections */ +.section { + background: #fff; + border-radius: 8px; + padding: 24px; + margin: 16px auto; + max-width: 1200px; + box-shadow: 0 1px 2px rgba(0,0,0,0.1); +} +.section-alt { background: #fff; border-radius: 8px; padding: 24px; margin: 16px auto; max-width: 1200px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } +.section-title { + font-size: 20px; + font-weight: 700; + margin-bottom: 20px; + color: #1c1e21; +} +.container { max-width: 100%; } + +/* About */ +.about-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 16px; +} +.about-card { + padding: 20px; + border-radius: 8px; + background: #f0f2f5; + transition: transform 0.2s, box-shadow 0.2s; +} +.about-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } +.about-icon { font-size: 2.5rem; margin-bottom: 12px; } +.about-card h3 { font-size: 16px; font-weight: 600; color: #1c1e21; margin-bottom: 8px; } +.about-card p { font-size: 14px; color: #65676b; line-height: 1.4; } + +/* Search */ +.search-bar { + display: flex; + max-width: 400px; + margin-bottom: 20px; + position: relative; +} +.search-icon { + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + color: #65676b; +} +.search-input { + width: 100%; + padding: 10px 12px 10px 36px; + border: none; + border-radius: 20px; + background: #f0f2f5; + font-size: 15px; +} +.search-input:focus { outline: 2px solid #1877f2; outline-offset: 0; } + +/* Members Grid */ +.members-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 12px; +} +.member-card { + display: flex; + align-items: center; + gap: 12px; + padding: 12px; + border-radius: 8px; + background: #f0f2f5; + cursor: pointer; + transition: background 0.2s; +} +.member-card:hover { background: #e4e6eb; } +.user-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + object-fit: cover; +} +.user-avatar-text { + width: 48px; + height: 48px; + border-radius: 50%; + background: #1877f2; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: 600; +} +.member-info h4 { font-size: 15px; font-weight: 600; color: #1c1e21; margin-bottom: 2px; } +.member-company { font-size: 13px; color: #65676b; } +.member-location, .member-posts { font-size: 13px; color: #65676b; } +.rank-badge { + font-size: 11px; + padding: 3px 8px; + border-radius: 12px; + position: absolute; + top: -4px; + right: 0; + font-weight: 500; +} +.rank-badge.rank-rookie { background: #e4e6eb; color: #65676b; } +.rank-badge.rank-beginner { background: #e7f3e9; color: #0a832c; } +.rank-badge.rank-member { background: #e7f0ff; color: #1877f2; } +.rank-badge.rank-contributor { background: #e0f7fa; color: #00838f; } +.rank-badge.rank-veteran { background: #f3e5f5; color: #8e24aa; } +.rank-badge.rank-expert { background: #fff3e0; color: #e65100; } +.rank-badge.rank-legend { background: #fce4ec; color: #c62828; } + +/* Wiki Cards */ +.wiki-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 12px; +} +.wiki-card { + padding: 16px; + border-radius: 8px; + background: #f0f2f5; + cursor: pointer; + transition: all 0.2s; + border-left: 4px solid #1877f2; +} +.wiki-card:hover { background: #e4e6eb; } +.wiki-card-title { font-size: 15px; font-weight: 600; color: #1c1e21; margin-bottom: 6px; } +.wiki-card-excerpt { font-size: 13px; color: #65676b; margin-bottom: 8px; } +.wiki-card-footer { display: flex; justify-content: space-between; font-size: 13px; color: #65676b; } +.wiki-card-subtopic { color: #1877f2; } +.no-results { padding: 20px; text-align: center; color: #65676b; } +.loading-text { padding: 20px; text-align: center; color: #65676b; font-style: italic; } + +/* Modal */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255,255,255,0.8); + z-index: 2000; + display: none; + align-items: center; + justify-content: center; +} +.modal-overlay.active { display: flex; } +.modal { + background: #fff; + border-radius: 8px; + padding: 24px; + max-width: 440px; + width: 90%; + box-shadow: 0 8px 30px rgba(0,0,0,0.2); + position: relative; +} +.modal-close { + position: absolute; + top: 12px; + right: 16px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + color: #65676b; +} +.login-icon { font-size: 3rem; text-align: center; margin-bottom: 16px; } +.login-hint { color: #65676b; text-align: center; margin-bottom: 20px; font-size: 15px; } +.form-group { margin-bottom: 14px; } +.form-input { + width: 100%; + padding: 12px 14px; + border: 1px solid #dddfe2; + border-radius: 6px; + font-size: 15px; +} +.form-input:focus { border-color: #1877f2; outline: 2px solid #1877f2; outline-offset: -2px; } +.login-step { display: none; } +.login-step.active { display: block; } + +/* Profile & Detail */ +.profile-username { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; } +.profile-rank { margin-bottom: 16px; } +.user-detail-modal { max-width: 520px; } +.user-detail-content { padding: 16px; } +.user-detail-avatar { + width: 64px; + height: 64px; + border-radius: 50%; + margin: 0 auto 16px; + overflow: hidden; +} +.user-detail-header { text-align: center; margin-bottom: 16px; } +.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } +.user-detail-name-rank h2 { font-size: 1.2rem; font-weight: 600; } +.user-detail-fields { display: grid; gap: 10px; } +.detail-field { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e4e6eb; } +.detail-label { color: #65676b; font-size: 14px; } +.detail-value { color: #1c1e21; font-size: 14px; text-align: right; } +.user-detail-company { color: #65676b; text-align: center; } + +/* Telegram Banner */ +.telegram-banner { + background: #e7f3ff; + padding: 16px 24px; + margin: 16px auto; + max-width: 1200px; + border-radius: 8px; + display: flex; + align-items: center; + gap: 16px; +} +.banner-icon { font-size: 2rem; } +.banner-text strong { color: #1c1e21; } + +/* Newsletter */ +.newsletter-card { text-align: center; max-width: 400px; margin: 0 auto; } +.newsletter-icon { font-size: 2.5rem; margin-bottom: 16px; } +.newsletter-hint { color: #65676b; margin-bottom: 16px; font-size: 15px; } + +/* Footer */ +.footer { + background: #fff; + padding: 24px 16px; + text-align: center; + border-top: 1px solid #e4e6eb; + margin-top: 32px; +} +.footer-brand { margin-bottom: 12px; } +.footer-logo { font-size: 1.5rem; } +.footer-title { color: #1c1e21; margin-left: 10px; font-size: 14px; font-weight: 600; } +.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; } +.footer-links a { color: #65676b; text-decoration: none; font-size: 13px; } +.footer-links a:hover { text-decoration: underline; } +.footer-bottom p { color: #65676b; margin: 4px 0; font-size: 12px; } +.footer-bottom a { color: #1877f2; } +.footer-copy { font-size: 12px; } + +/* Hide/Show */ +.hide-en { display: none; } +body[data-lang="en"] .hide-en { display: inline; } +body[data-lang="en"] .hide-de { display: none; } +.hidden { display: none !important; } + +/* Responsive */ +@media (max-width: 768px) { + .nav-menu { display: none; } + .nav-menu.open { + display: flex; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #fff; + flex-direction: column; + padding: 12px; + gap: 8px; + border-top: 1px solid #e4e6eb; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + } + .nav-toggle { + display: flex; + flex-direction: column; + gap: 3px; + background: none; + border: none; + cursor: pointer; + padding: 4px; + } + .nav-toggle span { display: block; width: 20px; height: 2px; background: #65676b; } + .hero-title { font-size: 28px; } + .hero-subtitle { font-size: 16px; } + .hero-stats { gap: 30px; flex-wrap: wrap; } + .stat-number { font-size: 28px; } + .about-grid { grid-template-columns: 1fr; } + .wiki-grid { grid-template-columns: 1fr; } + .members-grid { grid-template-columns: 1fr; } +} +@media (min-width: 769px) { + .nav-toggle { display: none; } +} \ No newline at end of file diff --git a/variations/neo-mirai/index.html b/variations/neo-mirai/index.html new file mode 100644 index 0000000..554a0cf --- /dev/null +++ b/variations/neo-mirai/index.html @@ -0,0 +1,462 @@ + + + + + + Paraguay SRL LLC — Community + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+
+

+ Paraguay LLC & SRL + Paraguay LLC & SRL + COMMUNITY +

+

+ Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay + The experience exchange for German and American expats in Paraguay +

+
+
+ -- + Mitglieder + Members +
+
+ -- + Beiträge + Posts +
+
+ -- + Wiki-Artikel + Wiki Articles +
+
+
+
+ + +
+ +
+ + +
+ + +
+
+

+ Über die Community + About the Community +

+
+
+
🏦
+

+ Banken & Zahlungsverkehr + Banking & Payments +

+

+ Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. + Experiences with Paraguayan and international banks, accounts, transfers and credit cards. +

+
+
+
⚖️
+

+ Rechtliches + Legal Matters +

+

+ Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. + Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. +

+
+
+
📊
+

+ Steuern & Buchhaltung + Taxes & Accounting +

+

+ Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. + Tax advice, accounting systems, annual statements and international tax planning. +

+
+
+
💻
+

+ ERP-Systeme + ERP Systems +

+

+ Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. + Experiences with various ERP systems, software solutions and digital management. +

+
+
+
+
+ + +
+
+

+ Mitglieder + Members +

+
+ + +
+
+

+ Lade Mitglieder... + Loading members... +

+
+
+
+ + +
+
+

+ Wiki + Wiki +

+
+ + +
+
+

+ Lade Wiki... + Loading wiki... +

+
+
+
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/variations/neo-mirai/main.js b/variations/neo-mirai/main.js new file mode 100644 index 0000000..667dad7 --- /dev/null +++ b/variations/neo-mirai/main.js @@ -0,0 +1,637 @@ +// ======================================== +// Paraguay LLC & SRL — Main JS +// ======================================== + +const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; +const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; +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'; + +let currentLang = 'de'; + +document.addEventListener('DOMContentLoaded', () => { + currentLang = document.body.dataset.lang || 'de'; + checkSession(); + loadCommunityStats(); + + // Smooth scroll nav links + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const target = document.querySelector(link.getAttribute('href')); + if (target) { + target.scrollIntoView({ behavior: 'smooth' }); + } + // Close mobile nav + document.getElementById('nav-menu').classList.remove('open'); + }); + }); + + // Mobile nav toggle + const navToggle = document.getElementById('nav-toggle'); + const navMenu = document.getElementById('nav-menu'); + if (navToggle) { + navToggle.addEventListener('click', () => { + navMenu.classList.toggle('open'); + }); + } + + // Navbar scroll effect + window.addEventListener('scroll', () => { + const nav = document.getElementById('main-nav'); + if (nav) { + nav.classList.toggle('scrolled', window.scrollY > 20); + } + }); + + // Language toggle + document.querySelectorAll('.lang-btn').forEach(btn => { + btn.addEventListener('click', () => { + const lang = btn.dataset.lang; + setLanguage(lang); + // Reload content in new language + if (isLoggedIn) { + if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); + if (document.getElementById('wiki-grid')) loadWiki(); + } + }); + }); + + // Member search + const memberSearch = document.getElementById('member-search'); + if (memberSearch) { + memberSearch.addEventListener('input', (e) => { + filterMembers(e.target.value); + }); + } + + // Wiki search + const wikiSearch = document.getElementById('wiki-search'); + if (wikiSearch) { + wikiSearch.addEventListener('input', (e) => { + searchWiki(e.target.value); + }); + } + + // Close modals on overlay click + document.querySelectorAll('.modal-overlay').forEach(overlay => { + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.classList.remove('active'); + } + }); + }); + + // Close modals on Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); + } + }); + + // Login button + const loginBtn = document.getElementById('login-btn'); + if (loginBtn) { + loginBtn.addEventListener('click', () => { + openLoginModal(); + }); + } +}); + +// ======================================== +// LANGUAGE +// ======================================== +function setLanguage(lang) { + currentLang = lang; + document.body.dataset.lang = lang; + document.querySelectorAll('.lang-btn').forEach(b => { + b.classList.toggle('active', b.dataset.lang === lang); + }); +} + +function isDE() { + return currentLang !== 'en'; +} + +// ======================================== +// COMMUNITY STATS +// ======================================== +async function loadCommunityStats() { + try { + const response = await fetch(COMMUNITY_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + + if (data.users !== undefined) { + animateCounter('stat-members', data.users); + } + if (data.topics !== undefined) { + document.getElementById('stat-wiki').textContent = data.topics; + } + } catch (error) { + console.error('Failed to load community stats:', error); + } +} + +function animateCounter(elementId, targetNumber) { + const element = document.getElementById(elementId); + if (!element) return; + + let current = 0; + const duration = 1500; // ms + const steps = 40; + const increment = targetNumber / steps; + const stepTime = duration / steps; + + const timer = setInterval(() => { + current += increment; + if (current >= targetNumber) { + element.textContent = targetNumber; + clearInterval(timer); + } else { + element.textContent = Math.floor(current); + } + }, stepTime); +} + +// ======================================== +// AUTH / SESSION +// ======================================== +let isLoggedIn = false; + +function isSessionValid() { + const sid = getCookie('sessionid'); + return sid.length > 0; +} + +function checkSession() { + isLoggedIn = isSessionValid(); + + if (isLoggedIn) { + document.body.dataset.loggedIn = 'true'; + document.getElementById('login-btn').style.display = 'none'; + document.getElementById('logout-btn').style.display = 'inline-flex'; + document.getElementById('profile-btn').style.display = 'inline-flex'; + document.getElementById('telegram-banner').style.display = 'none'; + document.getElementById('main-content').style.display = 'block'; + document.getElementById('newsletter-section').style.display = 'block'; + loadUsers(); + loadWiki(); + } else { + document.body.dataset.loggedIn = 'false'; + document.getElementById('login-btn').style.display = 'inline-flex'; + document.getElementById('logout-btn').style.display = 'none'; + document.getElementById('profile-btn').style.display = 'none'; + document.getElementById('telegram-banner').style.display = 'block'; + document.getElementById('main-content').style.display = 'none'; + document.getElementById('newsletter-section').style.display = 'none'; + } +} + +// ======================================== +// LOGIN MODAL +// ======================================== +function openLoginModal() { + document.getElementById('login-modal-overlay').classList.add('active'); + // Reset to step 1 + document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); + document.getElementById('login-step-1').classList.add('active'); + document.getElementById('telegram-user').value = ''; + document.getElementById('verification-code').value = ''; +} + +function closeLoginModal() { + document.getElementById('login-modal-overlay').classList.remove('active'); +} + +// ======================================== +// PROFILE MODAL +// ======================================== +function openProfileModal() { + const sid = getCookie('sessionid'); + if (!sid) { alert('Bitte anmelden.'); return; } + + fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) + .then(r => r.json()) + .then(user => { + document.getElementById('profile-username-display').textContent = user.username || ''; + const rank = getRank(user.posts || 0); + const badge = document.getElementById('profile-rank-badge'); + badge.innerHTML = `${rank.emoji} ${rank.title}`; + + document.getElementById('profile-company').value = user.company || ''; + document.getElementById('profile-email').value = user.email || ''; + document.getElementById('profile-homepage').value = user.homepage || ''; + document.getElementById('profile-image').value = user.image || ''; + document.getElementById('profile-location').value = user.location || ''; + document.getElementById('profile-description').value = user.Description || ''; + document.getElementById('profile-publish').checked = true; + + document.getElementById('profile-modal-overlay').classList.add('active'); + }) + .catch(() => alert('Fehler beim Laden des Profils.')); +} + +function closeProfileModal() { + document.getElementById('profile-modal-overlay').classList.remove('active'); +} + +function saveProfile() { + const sid = getCookie('sessionid'); + fetch(PROFILE_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('profile-username-display').textContent, + company: document.getElementById('profile-company').value.trim(), + email: document.getElementById('profile-email').value, + homepage: document.getElementById('profile-homepage').value, + image: document.getElementById('profile-image').value, + location: document.getElementById('profile-location').value, + Description: document.getElementById('profile-description').value, + sessionid: sid, + publish: document.getElementById('profile-publish').checked + }) + }) + .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) + .catch(() => alert('Fehler bei der Verbindung.')); +} + +// ======================================== +// USER DETAIL MODAL +// ======================================== +function openUserDetailModal(user) { + const avatar = document.getElementById('user-detail-avatar'); + if (user.image) { + avatar.innerHTML = `${user.username}`; + } else { + avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; + } + + document.getElementById('user-detail-initial').textContent = ''; + document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); + + const rank = getRank(user.posts || 0); + document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; + document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; + + document.getElementById('user-detail-company').textContent = user.company || ''; + + const emailEl = document.getElementById('user-detail-email'); + emailEl.innerHTML = user.email ? `${user.email}` : '-'; + + const hpEl = document.getElementById('user-detail-homepage'); + const hp = user.homepage || ''; + hpEl.innerHTML = hp ? `${hp}` : '-'; + + document.getElementById('user-detail-location').textContent = user.location || '-'; + document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); + + document.getElementById('user-detail-modal-overlay').classList.add('active'); +} + +function closeUserDetailModal() { + document.getElementById('user-detail-modal-overlay').classList.remove('active'); +} + +// ======================================== +// LOGIN FLOW +// ======================================== +function sendTelegramUser() { + const user = document.getElementById('telegram-user').value.trim(); + if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } + + const btn = event.target; + btn.disabled = true; + btn.textContent = isDE() ? 'Sende...' : 'Sending...'; + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: user }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-3').classList.add('active'); + } else if (data.status === 'code send') { + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-2').classList.add('active'); + } else { + alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); + } + }) + .catch(() => { + btn.disabled = false; + alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); + }); +} + +function verifyCode() { + const code = document.getElementById('verification-code').value.trim(); + if (!code) { alert('Bitte geben Sie den Code ein.'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + code: code, + sessionid: getCookie('sessionid') + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function submitLoginData() { + const name = document.getElementById('full-name').value.trim(); + const llc = document.getElementById('llc-name').value.trim(); + if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + name: name, + llc: llc + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function logout() { + setCookie('sessionid', '', -1); + checkSession(); +} + +// ======================================== +// NEWSLETTER +// ======================================== +function subscribeNewsletter() { + const email = document.getElementById('newsletter-email').value.trim(); + if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } + + fetch(NEWSLETTER_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email: email }) + }) + .then(r => { + if (r.ok) { + document.getElementById('newsletter-form').classList.add('hidden'); + document.getElementById('newsletter-success').classList.remove('hidden'); + } else { + alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +// ======================================== +// USERS / MEMBERS +// ======================================== +async function loadUsers() { + try { + const response = await fetch(USER_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + const container = document.getElementById('members-list'); + + if (data.data && Array.isArray(data.data)) { + container.innerHTML = ''; + container.style.display = 'grid'; + + data.data.forEach(user => { + const card = createMemberCard(user); + container.appendChild(card); + }); + + // Update stats will be handled by loadCommunityStats + } else { + container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; + } + } catch (error) { + const container = document.getElementById('members-list'); + container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function createMemberCard(user) { + const card = document.createElement('div'); + card.className = 'member-card'; + + const rank = getRank(user.posts || 0); + const avatarContent = user.image + ? `${user.username}` + : (user.username || '?').charAt(0).toUpperCase(); + + card.innerHTML = ` +
${avatarContent}
+
+

${user.username || 'N/A'}

+

${user.company || ''}

+ ${user.location ? `

📍 ${user.location}

` : ''} + ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} + ${rank.emoji} ${rank.title} +
+ `; + + card.addEventListener('click', () => openUserDetailModal(user)); + return card; +} + +function filterMembers(term) { + const cards = document.querySelectorAll('.member-card'); + const t = term.toLowerCase(); + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = text.includes(t) ? 'flex' : 'none'; + }); +} + +// ======================================== +// RANKS +// ======================================== +function getRank(posts) { + if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; + if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; + if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; + if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; + if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; + if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; + return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; +} + +// ======================================== +// WIKI +// ======================================== +let wikiData = []; + +async function loadWiki() { + try { + const response = await fetch(WIKI_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const result = await response.json(); + + if (result.data && Array.isArray(result.data)) { + wikiData = result.data; + renderWikiCards(wikiData); + + // Wiki count will be loaded from community webhook + } else { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; + } + } catch (error) { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function renderWikiCards(data) { + const grid = document.getElementById('wiki-grid'); + grid.innerHTML = ''; + + if (data.length === 0) { + grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; + return; + } + + // Group by topic + const topics = {}; + data.forEach(item => { + const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); + if (!topics[topicKey]) topics[topicKey] = []; + topics[topicKey].push(item); + }); + + const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; + + Object.entries(topics).forEach(([topicName, subtopics], idx) => { + const card = document.createElement('div'); + card.className = 'wiki-card'; + card.dataset.color = colors[idx % colors.length]; + + // Get excerpt from first subtopic + const firstSub = subtopics[0]; + const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); + const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); + + card.innerHTML = ` +
${escapeHtml(topicName)}
+
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
+
+ ${escapeHtml(subtopicTitle)} + ${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'} +
+ `; + + // Open modal on click + card.addEventListener('click', () => openWikiModal(topicName, subtopics)); + + grid.appendChild(card); + }); +} + +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 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); +} + +// ======================================== +// 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; +} diff --git a/variations/neo-mirai/style.css b/variations/neo-mirai/style.css new file mode 100644 index 0000000..cdf9cd8 --- /dev/null +++ b/variations/neo-mirai/style.css @@ -0,0 +1,319 @@ +/* Neo-Mirai — Cyberpunk/Futuristic Design */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { + font-family: 'Rajdhani', sans-serif; + background: #0a0a1a; + color: #e0e0e0; + overflow-x: hidden; + line-height: 1.6; +} + +/* Neon Grid Background */ +.neon-grid-bg { + position: fixed; top: 0; left: 0; width: 100%; height: 100%; + background-image: + linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px); + background-size: 50px 50px; + pointer-events: none; z-index: 0; +} + +/* Scanline Effect */ +.scanline { + position: fixed; top: 0; left: 0; width: 100%; height: 100%; + background: repeating-linear-gradient( + 0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px + ); + pointer-events: none; z-index: 9999; opacity: 0.4; +} + +/* Navigation */ +.nav { + position: fixed; top: 0; left: 0; right: 0; z-index: 1000; + background: rgba(10,10,26,0.95); + border-bottom: 1px solid rgba(0,255,255,0.2); + backdrop-filter: blur(10px); +} +.nav-container { + max-width: 1200px; margin: 0 auto; padding: 0 20px; + display: flex; align-items: center; justify-content: space-between; height: 70px; +} +.nav-brand { + display: flex; align-items: center; gap: 10px; text-decoration: none; + font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.2rem; color: #0ff; + text-shadow: 0 0 10px rgba(0,255,255,0.5); +} +.nav-title { letter-spacing: 2px; } +.accent { color: #f0f; text-shadow: 0 0 10px rgba(255,0,255,0.5); } +.nav-logo { font-size: 1.5rem; } + +/* Nav Links */ +.nav-menu { display: flex; align-items: center; gap: 25px; } +.nav-link { + color: #888; text-decoration: none; font-size: 1rem; font-weight: 500; + letter-spacing: 1px; transition: color 0.3s, text-shadow 0.3s; +} +.nav-link:hover { color: #0ff; text-shadow: 0 0 10px rgba(0,255,255,0.5); } + +/* Nav Actions */ +.nav-actions { display: flex; align-items: center; gap: 15px; } +.lang-select { display: flex; gap: 5px; } +.lang-btn { + background: none; border: 1px solid rgba(0,255,255,0.3); color: #888; + padding: 5px 12px; font-family: 'Orbitron', sans-serif; font-size: 0.8rem; + cursor: pointer; transition: all 0.3s; letter-spacing: 1px; +} +.lang-btn.active, .lang-btn:hover { color: #0ff; border-color: #0ff; box-shadow: 0 0 10px rgba(0,255,255,0.3); } + +/* Buttons */ +.btn { padding: 8px 20px; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s; letter-spacing: 1px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: none; } +.btn-neon { + background: transparent; border: 1px solid #0ff; color: #0ff; + box-shadow: 0 0 5px rgba(0,255,255,0.3), inset 0 0 5px rgba(0,255,255,0.1); +} +.btn-neon:hover { + background: rgba(0,255,255,0.1); + box-shadow: 0 0 20px rgba(0,255,255,0.5), inset 0 0 10px rgba(0,255,255,0.2); + text-shadow: 0 0 10px #0ff; +} +.btn-neon-outline { background: transparent; border: 1px solid rgba(0,255,255,0.3); color: #0ff; } +.btn-neon-outline:hover { border-color: #0ff; background: rgba(0,255,255,0.1); } +.btn-telegram { background: #0088cc; border: none; color: white; padding: 8px 20px; font-family: 'Rajdhani', sans-serif; font-weight: 600; } +.btn-telegram:hover { background: #0099dd; } +.btn-block { display: block; width: 100%; text-align: center; } + +/* Hero */ +.hero { + min-height: 100vh; display: flex; align-items: center; justify-content: center; + text-align: center; position: relative; padding: 100px 20px 60px; + background: radial-gradient(ellipse at center, rgba(0,255,255,0.05) 0%, transparent 70%); +} +.hero-content { position: relative; z-index: 2; } +.neo-title { + font-family: 'Orbitron', sans-serif; font-size: 3.5rem; font-weight: 900; + color: #fff; letter-spacing: 4px; margin-bottom: 20px; + text-shadow: 0 0 20px rgba(0,255,255,0.5), 0 0 40px rgba(0,255,255,0.3); +} +.hero-subtitle { + font-size: 1.3rem; color: #aaa; max-width: 600px; margin: 0 auto 40px; + letter-spacing: 2px; +} +.neo-stats { display: flex; justify-content: center; gap: 60px; } +.neo-stat { + text-align: center; padding: 20px; + border: 1px solid rgba(0,255,255,0.2); border-radius: 10px; + background: rgba(0,255,255,0.02); + backdrop-filter: blur(5px); +} +.stat-number { + display: block; font-family: 'Orbitron', sans-serif; font-size: 2.5rem; + font-weight: 900; color: #0ff; text-shadow: 0 0 10px rgba(0,255,255,0.5); +} + +/* Sections */ +.section { padding: 80px 20px; position: relative; z-index: 1; } +.section-alt { background: rgba(0,255,255,0.02); } +.section-title { + font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 700; + color: #0ff; text-align: center; margin-bottom: 50px; letter-spacing: 3px; + text-shadow: 0 0 10px rgba(0,255,255,0.3); +} +.container { max-width: 1200px; margin: 0 auto; } + +/* About Cards */ +.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; } +.neo-card { + background: rgba(0,255,255,0.02); border: 1px solid rgba(0,255,255,0.15); + border-radius: 15px; padding: 30px; transition: all 0.3s; + backdrop-filter: blur(5px); +} +.neo-card:hover { + border-color: #0ff; box-shadow: 0 0 20px rgba(0,255,255,0.2); + transform: translateY(-5px); +} +.about-icon { font-size: 2.5rem; margin-bottom: 15px; } +.about-card h3 { + font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: #0ff; + margin-bottom: 10px; letter-spacing: 1px; +} +.about-card p { color: #aaa; font-size: 0.95rem; } + +/* Members */ +.search-bar { display: flex; align-items: center; max-width: 400px; margin: 0 auto 30px; position: relative; } +.search-icon { position: absolute; left: 15px; width: 20px; height: 20px; color: #555; } +.search-input { + width: 100%; padding: 12px 15px 12px 45px; background: rgba(0,255,255,0.05); + border: 1px solid rgba(0,255,255,0.2); border-radius: 8px; + color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1rem; +} +.search-input:focus { outline: none; border-color: #0ff; box-shadow: 0 0 10px rgba(0,255,255,0.3); } + +.members-grid { + display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; +} +.member-card { + display: flex; align-items: center; gap: 15px; padding: 20px; + background: rgba(0,255,255,0.02); border: 1px solid rgba(0,255,255,0.1); + border-radius: 10px; cursor: pointer; transition: all 0.3s; +} +.member-card:hover { border-color: #0ff; box-shadow: 0 0 15px rgba(0,255,255,0.2); } +.user-avatar { + width: 50px; height: 50px; border-radius: 50%; object-fit: cover; + border: 2px solid rgba(0,255,255,0.3); +} +.user-avatar-text { + width: 50px; height: 50px; border-radius: 50%; + background: rgba(0,255,255,0.1); color: #0ff; + display: flex; align-items: center; justify-content: center; + font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700; +} +.member-info h4 { color: #0ff; font-family: 'Orbitron', sans-serif; font-size: 1rem; } +.member-company { color: #888; font-size: 0.85rem; } +.member-location, .member-posts { color: #aaa; font-size: 0.85rem; } +.rank-badge { + position: absolute; top: -8px; right: 0; font-size: 0.7rem; padding: 2px 8px; + border-radius: 10px; font-weight: 600; letter-spacing: 1px; +} +.rank-badge.rank-rookie { background: rgba(128,128,128,0.2); color: #888; } +.rank-badge.rank-beginner { background: rgba(0,255,0,0.2); color: #0f0; } +.rank-badge.rank-member { background: rgba(0,128,255,0.2); color: #08f; } +.rank-badge.rank-contributor { background: rgba(0,255,255,0.2); color: #0ff; } +.rank-badge.rank-veteran { background: rgba(255,0,255,0.2); color: #f0f; } +.rank-badge.rank-expert { background: rgba(255,200,0,0.2); color: #fc0; } +.rank-badge.rank-legend { background: rgba(255,0,0,0.2); color: #f44; } + +/* Wiki Grid */ +.wiki-grid { + display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; +} +.wiki-card { + padding: 25px; border-radius: 12px; cursor: pointer; + transition: all 0.3s; position: relative; overflow: hidden; +} +.wiki-card::before { + content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; +} +.wiki-card[data-color="blue"] { background: rgba(0,100,255,0.05); border: 1px solid rgba(0,100,255,0.2); } +.wiki-card[data-color="blue"]::before { background: #0064ff; } +.wiki-card[data-color="teal"] { background: rgba(0,200,200,0.05); border: 1px solid rgba(0,200,200,0.2); } +.wiki-card[data-color="teal"]::before { background: #00c8c8; } +.wiki-card[data-color="green"] { background: rgba(0,200,0,0.05); border: 1px solid rgba(0,200,0,0.2); } +.wiki-card[data-color="green"]::before { background: #00c800; } +.wiki-card[data-color="orange"] { background: rgba(255,150,0,0.05); border: 1px solid rgba(255,150,0,0.2); } +.wiki-card[data-color="orange"]::before { background: #ff9600; } +.wiki-card[data-color="purple"] { background: rgba(150,0,255,0.05); border: 1px solid rgba(150,0,255,0.2); } +.wiki-card[data-color="purple"]::before { background: #9600ff; } +.wiki-card[data-color="pink"] { background: rgba(255,0,150,0.05); border: 1px solid rgba(255,0,150,0.2); } +.wiki-card[data-color="pink"]::before { background: #ff0096; } +.wiki-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } +.wiki-card-title { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: #fff; margin-bottom: 10px; } +.wiki-card-excerpt { color: #888; font-size: 0.9rem; margin-bottom: 15px; } +.wiki-card-footer { display: flex; justify-content: space-between; font-size: 0.85rem; color: #aaa; } +.wiki-card-subtopic { color: #0ff; } +.no-results { color: #888; text-align: center; padding: 40px; } +.loading-text { color: #555; text-align: center; padding: 40px; font-style: italic; } + +/* Modal */ +.modal-overlay { + position: fixed; top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); + z-index: 2000; display: none; align-items: center; justify-content: center; +} +.modal-overlay.active { display: flex; } +.modal { + background: rgba(10,10,26,0.95); border: 1px solid rgba(0,255,255,0.3); + border-radius: 15px; padding: 40px; max-width: 500px; width: 90%; + box-shadow: 0 0 30px rgba(0,255,255,0.2); position: relative; +} +.modal-close { + position: absolute; top: 15px; right: 20px; background: none; border: none; + color: #0ff; font-size: 1.5rem; cursor: pointer; +} +.login-icon { font-size: 3rem; text-align: center; margin-bottom: 20px; } +.login-hint { color: #888; text-align: center; margin-bottom: 25px; font-size: 0.95rem; } +.form-group { margin-bottom: 15px; } +.form-input { + width: 100%; padding: 12px; background: rgba(0,255,255,0.05); + border: 1px solid rgba(0,255,255,0.2); border-radius: 8px; + color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1rem; +} +.form-input:focus { outline: none; border-color: #0ff; box-shadow: 0 0 10px rgba(0,255,255,0.3); } +.login-steps { display: none; } +.login-step.active { display: block; } +.login-step { display: none; } +.login-step.active { display: block; } + +/* Profile Modal */ +.profile-username { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; color: #0ff; margin-bottom: 10px; } +.profile-rank { margin-bottom: 20px; } +.profile-edit-fields { max-height: 500px; overflow-y: auto; } + +/* User Detail Modal */ +.user-detail-modal { max-width: 600px; } +.user-detail-content { padding: 20px; } +.user-detail-avatar { + width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px; + border: 2px solid #0ff; overflow: hidden; +} +.user-detail-header { text-align: center; margin-bottom: 20px; } +.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } +.user-detail-name-rank h2 { color: #0ff; font-family: 'Orbitron', sans-serif; } +.user-detail-fields { display: grid; gap: 10px; } +.detail-field { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(0,255,255,0.1); } +.detail-label { color: #888; font-size: 0.9rem; } +.detail-value { color: #0ff; font-size: 0.9rem; text-align: right; } +.user-detail-company { color: #aaa; } + +/* Telegram Banner */ +.telegram-banner { + background: rgba(0,136,204,0.1); border: 1px solid rgba(0,136,204,0.3); + padding: 20px; margin: 20px; border-radius: 10px; + display: flex; align-items: center; gap: 20px; flex-wrap: wrap; +} +.banner-icon { font-size: 2rem; } +.banner-text { flex: 1; } +.banner-text strong { color: #fff; } + +/* Newsletter */ +.newsletter-card { text-align: center; max-width: 400px; margin: 0 auto; } +.newsletter-icon { font-size: 3rem; margin-bottom: 20px; } +.newsletter-hint { color: #aaa; margin-bottom: 20px; } + +/* Footer */ +.footer { + background: rgba(0,0,0,0.3); border-top: 1px solid rgba(0,255,255,0.1); + padding: 40px 20px; text-align: center; position: relative; z-index: 1; +} +.footer-brand { margin-bottom: 20px; } +.footer-logo { font-size: 2rem; } +.footer-title { color: #0ff; font-family: 'Orbitron', sans-serif; margin-left: 10px; } +.footer-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; } +.footer-links a { color: #888; text-decoration: none; transition: color 0.3s; letter-spacing: 1px; } +.footer-links a:hover { color: #0ff; } +.footer-bottom p { color: #555; margin: 5px 0; } +.footer-bottom a { color: #0ff; text-decoration: none; } +.footer-copy { font-size: 0.85rem; } + +/* Hide/Show */ +.hide-en { display: none; } +body[data-lang="en"] .hide-en { display: inline; } +body[data-lang="en"] .hide-de { display: none; } +.hidden { display: none !important; } + +/* Responsive */ +@media (max-width: 768px) { + .nav-menu { display: none; } + .nav-menu.open { display: flex; position: absolute; top: 70px; left: 0; right: 0; background: rgba(10,10,26,0.98); flex-direction: column; padding: 20px; gap: 15px; border-bottom: 1px solid rgba(0,255,255,0.2); } + .nav-toggle { display: block; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; } + .nav-toggle span { display: block; width: 25px; height: 2px; background: #0ff; } + .neo-title { font-size: 2rem; } + .neo-stats { gap: 15px; flex-wrap: wrap; } + .neo-stat { flex: 1; min-width: 120px; } + .stat-number { font-size: 1.5rem; } + .section-title { font-size: 1.5rem; } +} +@media (min-width: 769px) { + .nav-toggle { display: none; } +} \ No newline at end of file diff --git a/variations/wikipedia/index.html b/variations/wikipedia/index.html new file mode 100644 index 0000000..165b0bf --- /dev/null +++ b/variations/wikipedia/index.html @@ -0,0 +1,467 @@ + + + + + + Paraguay SRL LLC — Community + + + + + + + + + + + + + + + + + + + + +
+
+
+

+ Paraguay LLC & SRL Community + Paraguay LLC & SRL Community +

+

+ Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay + The experience exchange for German and American expats in Paraguay +

+
+
+ -- + Mitglieder + Members +
+
+ -- + Beiträge + Posts +
+
+ -- + Wiki-Artikel + Wiki Articles +
+
+
+
+
+
+
+ + +
+ +
+ + +
+ + +
+
+

+ Über die Community + About the Community +

+
+
+
🏦
+

+ Banken & Zahlungsverkehr + Banking & Payments +

+

+ Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. + Experiences with Paraguayan and international banks, accounts, transfers and credit cards. +

+
+
+
⚖️
+

+ Rechtliches + Legal Matters +

+

+ Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. + Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. +

+
+
+
📊
+

+ Steuern & Buchhaltung + Taxes & Accounting +

+

+ Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. + Tax advice, accounting systems, annual statements and international tax planning. +

+
+
+
💻
+

+ ERP-Systeme + ERP Systems +

+

+ Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. + Experiences with various ERP systems, software solutions and digital management. +

+
+
+
+
+ + +
+
+

+ Mitglieder + Members +

+
+ + +
+
+

+ Lade Mitglieder... + Loading members... +

+
+
+
+ + +
+
+

+ Wiki + Wiki +

+
+ + +
+
+

+ Lade Wiki... + Loading wiki... +

+
+
+
+ + + + +
+ + + + + + + diff --git a/variations/wikipedia/main.js b/variations/wikipedia/main.js new file mode 100644 index 0000000..667dad7 --- /dev/null +++ b/variations/wikipedia/main.js @@ -0,0 +1,637 @@ +// ======================================== +// Paraguay LLC & SRL — Main JS +// ======================================== + +const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; +const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; +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'; + +let currentLang = 'de'; + +document.addEventListener('DOMContentLoaded', () => { + currentLang = document.body.dataset.lang || 'de'; + checkSession(); + loadCommunityStats(); + + // Smooth scroll nav links + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const target = document.querySelector(link.getAttribute('href')); + if (target) { + target.scrollIntoView({ behavior: 'smooth' }); + } + // Close mobile nav + document.getElementById('nav-menu').classList.remove('open'); + }); + }); + + // Mobile nav toggle + const navToggle = document.getElementById('nav-toggle'); + const navMenu = document.getElementById('nav-menu'); + if (navToggle) { + navToggle.addEventListener('click', () => { + navMenu.classList.toggle('open'); + }); + } + + // Navbar scroll effect + window.addEventListener('scroll', () => { + const nav = document.getElementById('main-nav'); + if (nav) { + nav.classList.toggle('scrolled', window.scrollY > 20); + } + }); + + // Language toggle + document.querySelectorAll('.lang-btn').forEach(btn => { + btn.addEventListener('click', () => { + const lang = btn.dataset.lang; + setLanguage(lang); + // Reload content in new language + if (isLoggedIn) { + if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); + if (document.getElementById('wiki-grid')) loadWiki(); + } + }); + }); + + // Member search + const memberSearch = document.getElementById('member-search'); + if (memberSearch) { + memberSearch.addEventListener('input', (e) => { + filterMembers(e.target.value); + }); + } + + // Wiki search + const wikiSearch = document.getElementById('wiki-search'); + if (wikiSearch) { + wikiSearch.addEventListener('input', (e) => { + searchWiki(e.target.value); + }); + } + + // Close modals on overlay click + document.querySelectorAll('.modal-overlay').forEach(overlay => { + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.classList.remove('active'); + } + }); + }); + + // Close modals on Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); + } + }); + + // Login button + const loginBtn = document.getElementById('login-btn'); + if (loginBtn) { + loginBtn.addEventListener('click', () => { + openLoginModal(); + }); + } +}); + +// ======================================== +// LANGUAGE +// ======================================== +function setLanguage(lang) { + currentLang = lang; + document.body.dataset.lang = lang; + document.querySelectorAll('.lang-btn').forEach(b => { + b.classList.toggle('active', b.dataset.lang === lang); + }); +} + +function isDE() { + return currentLang !== 'en'; +} + +// ======================================== +// COMMUNITY STATS +// ======================================== +async function loadCommunityStats() { + try { + const response = await fetch(COMMUNITY_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + + if (data.users !== undefined) { + animateCounter('stat-members', data.users); + } + if (data.topics !== undefined) { + document.getElementById('stat-wiki').textContent = data.topics; + } + } catch (error) { + console.error('Failed to load community stats:', error); + } +} + +function animateCounter(elementId, targetNumber) { + const element = document.getElementById(elementId); + if (!element) return; + + let current = 0; + const duration = 1500; // ms + const steps = 40; + const increment = targetNumber / steps; + const stepTime = duration / steps; + + const timer = setInterval(() => { + current += increment; + if (current >= targetNumber) { + element.textContent = targetNumber; + clearInterval(timer); + } else { + element.textContent = Math.floor(current); + } + }, stepTime); +} + +// ======================================== +// AUTH / SESSION +// ======================================== +let isLoggedIn = false; + +function isSessionValid() { + const sid = getCookie('sessionid'); + return sid.length > 0; +} + +function checkSession() { + isLoggedIn = isSessionValid(); + + if (isLoggedIn) { + document.body.dataset.loggedIn = 'true'; + document.getElementById('login-btn').style.display = 'none'; + document.getElementById('logout-btn').style.display = 'inline-flex'; + document.getElementById('profile-btn').style.display = 'inline-flex'; + document.getElementById('telegram-banner').style.display = 'none'; + document.getElementById('main-content').style.display = 'block'; + document.getElementById('newsletter-section').style.display = 'block'; + loadUsers(); + loadWiki(); + } else { + document.body.dataset.loggedIn = 'false'; + document.getElementById('login-btn').style.display = 'inline-flex'; + document.getElementById('logout-btn').style.display = 'none'; + document.getElementById('profile-btn').style.display = 'none'; + document.getElementById('telegram-banner').style.display = 'block'; + document.getElementById('main-content').style.display = 'none'; + document.getElementById('newsletter-section').style.display = 'none'; + } +} + +// ======================================== +// LOGIN MODAL +// ======================================== +function openLoginModal() { + document.getElementById('login-modal-overlay').classList.add('active'); + // Reset to step 1 + document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); + document.getElementById('login-step-1').classList.add('active'); + document.getElementById('telegram-user').value = ''; + document.getElementById('verification-code').value = ''; +} + +function closeLoginModal() { + document.getElementById('login-modal-overlay').classList.remove('active'); +} + +// ======================================== +// PROFILE MODAL +// ======================================== +function openProfileModal() { + const sid = getCookie('sessionid'); + if (!sid) { alert('Bitte anmelden.'); return; } + + fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) + .then(r => r.json()) + .then(user => { + document.getElementById('profile-username-display').textContent = user.username || ''; + const rank = getRank(user.posts || 0); + const badge = document.getElementById('profile-rank-badge'); + badge.innerHTML = `${rank.emoji} ${rank.title}`; + + document.getElementById('profile-company').value = user.company || ''; + document.getElementById('profile-email').value = user.email || ''; + document.getElementById('profile-homepage').value = user.homepage || ''; + document.getElementById('profile-image').value = user.image || ''; + document.getElementById('profile-location').value = user.location || ''; + document.getElementById('profile-description').value = user.Description || ''; + document.getElementById('profile-publish').checked = true; + + document.getElementById('profile-modal-overlay').classList.add('active'); + }) + .catch(() => alert('Fehler beim Laden des Profils.')); +} + +function closeProfileModal() { + document.getElementById('profile-modal-overlay').classList.remove('active'); +} + +function saveProfile() { + const sid = getCookie('sessionid'); + fetch(PROFILE_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('profile-username-display').textContent, + company: document.getElementById('profile-company').value.trim(), + email: document.getElementById('profile-email').value, + homepage: document.getElementById('profile-homepage').value, + image: document.getElementById('profile-image').value, + location: document.getElementById('profile-location').value, + Description: document.getElementById('profile-description').value, + sessionid: sid, + publish: document.getElementById('profile-publish').checked + }) + }) + .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) + .catch(() => alert('Fehler bei der Verbindung.')); +} + +// ======================================== +// USER DETAIL MODAL +// ======================================== +function openUserDetailModal(user) { + const avatar = document.getElementById('user-detail-avatar'); + if (user.image) { + avatar.innerHTML = `${user.username}`; + } else { + avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; + } + + document.getElementById('user-detail-initial').textContent = ''; + document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); + + const rank = getRank(user.posts || 0); + document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; + document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; + + document.getElementById('user-detail-company').textContent = user.company || ''; + + const emailEl = document.getElementById('user-detail-email'); + emailEl.innerHTML = user.email ? `${user.email}` : '-'; + + const hpEl = document.getElementById('user-detail-homepage'); + const hp = user.homepage || ''; + hpEl.innerHTML = hp ? `${hp}` : '-'; + + document.getElementById('user-detail-location').textContent = user.location || '-'; + document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); + + document.getElementById('user-detail-modal-overlay').classList.add('active'); +} + +function closeUserDetailModal() { + document.getElementById('user-detail-modal-overlay').classList.remove('active'); +} + +// ======================================== +// LOGIN FLOW +// ======================================== +function sendTelegramUser() { + const user = document.getElementById('telegram-user').value.trim(); + if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } + + const btn = event.target; + btn.disabled = true; + btn.textContent = isDE() ? 'Sende...' : 'Sending...'; + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: user }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-3').classList.add('active'); + } else if (data.status === 'code send') { + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-2').classList.add('active'); + } else { + alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); + } + }) + .catch(() => { + btn.disabled = false; + alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); + }); +} + +function verifyCode() { + const code = document.getElementById('verification-code').value.trim(); + if (!code) { alert('Bitte geben Sie den Code ein.'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + code: code, + sessionid: getCookie('sessionid') + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function submitLoginData() { + const name = document.getElementById('full-name').value.trim(); + const llc = document.getElementById('llc-name').value.trim(); + if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + name: name, + llc: llc + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function logout() { + setCookie('sessionid', '', -1); + checkSession(); +} + +// ======================================== +// NEWSLETTER +// ======================================== +function subscribeNewsletter() { + const email = document.getElementById('newsletter-email').value.trim(); + if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } + + fetch(NEWSLETTER_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email: email }) + }) + .then(r => { + if (r.ok) { + document.getElementById('newsletter-form').classList.add('hidden'); + document.getElementById('newsletter-success').classList.remove('hidden'); + } else { + alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +// ======================================== +// USERS / MEMBERS +// ======================================== +async function loadUsers() { + try { + const response = await fetch(USER_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + const container = document.getElementById('members-list'); + + if (data.data && Array.isArray(data.data)) { + container.innerHTML = ''; + container.style.display = 'grid'; + + data.data.forEach(user => { + const card = createMemberCard(user); + container.appendChild(card); + }); + + // Update stats will be handled by loadCommunityStats + } else { + container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; + } + } catch (error) { + const container = document.getElementById('members-list'); + container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function createMemberCard(user) { + const card = document.createElement('div'); + card.className = 'member-card'; + + const rank = getRank(user.posts || 0); + const avatarContent = user.image + ? `${user.username}` + : (user.username || '?').charAt(0).toUpperCase(); + + card.innerHTML = ` +
${avatarContent}
+
+

${user.username || 'N/A'}

+

${user.company || ''}

+ ${user.location ? `

📍 ${user.location}

` : ''} + ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} + ${rank.emoji} ${rank.title} +
+ `; + + card.addEventListener('click', () => openUserDetailModal(user)); + return card; +} + +function filterMembers(term) { + const cards = document.querySelectorAll('.member-card'); + const t = term.toLowerCase(); + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = text.includes(t) ? 'flex' : 'none'; + }); +} + +// ======================================== +// RANKS +// ======================================== +function getRank(posts) { + if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; + if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; + if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; + if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; + if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; + if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; + return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; +} + +// ======================================== +// WIKI +// ======================================== +let wikiData = []; + +async function loadWiki() { + try { + const response = await fetch(WIKI_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const result = await response.json(); + + if (result.data && Array.isArray(result.data)) { + wikiData = result.data; + renderWikiCards(wikiData); + + // Wiki count will be loaded from community webhook + } else { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; + } + } catch (error) { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function renderWikiCards(data) { + const grid = document.getElementById('wiki-grid'); + grid.innerHTML = ''; + + if (data.length === 0) { + grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; + return; + } + + // Group by topic + const topics = {}; + data.forEach(item => { + const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); + if (!topics[topicKey]) topics[topicKey] = []; + topics[topicKey].push(item); + }); + + const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; + + Object.entries(topics).forEach(([topicName, subtopics], idx) => { + const card = document.createElement('div'); + card.className = 'wiki-card'; + card.dataset.color = colors[idx % colors.length]; + + // Get excerpt from first subtopic + const firstSub = subtopics[0]; + const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); + const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); + + card.innerHTML = ` +
${escapeHtml(topicName)}
+
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
+
+ ${escapeHtml(subtopicTitle)} + ${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'} +
+ `; + + // Open modal on click + card.addEventListener('click', () => openWikiModal(topicName, subtopics)); + + grid.appendChild(card); + }); +} + +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 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); +} + +// ======================================== +// 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; +} diff --git a/variations/wikipedia/style.css b/variations/wikipedia/style.css new file mode 100644 index 0000000..0ffb0c9 --- /dev/null +++ b/variations/wikipedia/style.css @@ -0,0 +1,396 @@ +/* Wikipedia Style — Clean, Content-First */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background: #f8f9fa; + color: #202122; + line-height: 1.6; + font-size: 14px; +} + +/* Navigation */ +.nav { + background: #fff; + border-bottom: 1px solid #a2a9b1; + padding: 10px 20px; + position: sticky; + top: 0; + z-index: 1000; +} +.nav-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} +.nav-brand { + display: flex; + align-items: center; + gap: 10px; + text-decoration: none; + color: #202122; + font-size: 1.1rem; + font-weight: 600; +} +.nav-logo { font-size: 1.8rem; } +.nav-menu { display: flex; gap: 20px; align-items: center; } +.nav-link { + color: #0645ad; + text-decoration: none; + font-size: 14px; + padding: 5px 10px; +} +.nav-link:hover { text-decoration: underline; } +.nav-actions { display: flex; gap: 10px; align-items: center; } +.lang-select { display: flex; gap: 5px; } +.lang-btn { + background: #f8f9fa; + border: 1px solid #a2a9b1; + padding: 4px 12px; + font-size: 12px; + cursor: pointer; + border-radius: 3px; +} +.lang-btn.active { background: #36c; color: #fff; border-color: #36c; } + +/* Buttons */ +.btn { + padding: 6px 16px; + font-size: 13px; + border-radius: 3px; + cursor: pointer; + text-decoration: none; + display: inline-block; + font-weight: 500; + border: 1px solid; +} +.btn-primary { background: #36c; color: #fff; border-color: #36c; } +.btn-primary:hover { background: #2a4b8d; } +.btn-outline { + background: #f8f9fa; + color: #202122; + border-color: #a2a9b1; +} +.btn-outline:hover { background: #eaecf0; } +.btn-block { display: block; width: 100%; text-align: center; } +.btn-telegram { + background: #0088cc; + color: #fff; + border-color: #0088cc; +} + +/* Hero */ +.hero { + background: #fff; + border-bottom: 1px solid #a2a9b1; + padding: 40px 20px; + text-align: center; +} +.hero-title { + font-size: 2rem; + font-weight: 400; + margin-bottom: 10px; + color: #202122; +} +.hero-subtitle { + color: #72777d; + margin-bottom: 30px; + font-size: 15px; +} +.hero-stats { display: flex; justify-content: center; gap: 40px; } +.stat { text-align: center; } +.stat-number { + display: block; + font-size: 1.8rem; + font-weight: 600; + color: #36c; +} + +/* Sections */ +.section { + background: #fff; + border: 1px solid #a2a9b1; + border-radius: 4px; + padding: 25px; + margin: 20px auto; + max-width: 1200px; +} +.section-alt { background: #f8f9fa; border: none; } +.section-title { + font-size: 1.5rem; + font-weight: 400; + border-bottom: 1px solid #a2a9b1; + padding-bottom: 10px; + margin-bottom: 20px; + color: #202122; +} +.container { max-width: 100%; } + +/* About */ +.about-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; +} +.about-card { + padding: 15px; + border: 1px solid #eaecf0; + border-radius: 4px; + background: #fff; +} +.about-icon { font-size: 2rem; margin-bottom: 10px; } +.about-card h3 { + font-size: 1rem; + margin-bottom: 8px; + color: #0645ad; +} +.about-card p { font-size: 13px; color: #555; } + +/* Search */ +.search-bar { + display: flex; + max-width: 400px; + margin-bottom: 20px; +} +.search-icon { + position: absolute; + left: 10px; + width: 16px; + height: 16px; + color: #72777d; +} +.search-input { + width: 100%; + padding: 8px 10px; + border: 1px solid #a2a9b1; + border-radius: 2px; + font-size: 14px; +} +.search-input:focus { border-color: #36c; outline: none; } + +/* Members Grid */ +.members-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 10px; +} +.member-card { + display: flex; + align-items: center; + gap: 10px; + padding: 10px; + border: 1px solid #eaecf0; + border-radius: 3px; + cursor: pointer; + background: #fff; + transition: background 0.2s; +} +.member-card:hover { background: #eaecf0; } +.user-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + border: 1px solid #eaecf0; +} +.user-avatar-text { + width: 40px; + height: 40px; + border-radius: 50%; + background: #eaecf0; + color: #72777d; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; +} +.member-info h4 { font-size: 14px; color: #0645ad; } +.member-company { font-size: 12px; color: #72777d; } +.member-location, .member-posts { font-size: 12px; color: #555; } +.rank-badge { + font-size: 11px; + padding: 2px 8px; + border-radius: 10px; + position: absolute; + top: -5px; + right: 0; +} +.rank-badge.rank-rookie { background: #eee; color: #666; } +.rank-badge.rank-beginner { background: #e6f3e6; color: #0a0; } +.rank-badge.rank-member { background: #e6f0ff; color: #0066cc; } +.rank-badge.rank-contributor { background: #e6f9f9; color: #009999; } +.rank-badge.rank-veteran { background: #f9e6ff; color: #990099; } +.rank-badge.rank-expert { background: #fff3e6; color: #cc8800; } +.rank-badge.rank-legend { background: #ffe6e6; color: #cc0000; } + +/* Wiki Cards */ +.wiki-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 10px; +} +.wiki-card { + padding: 15px; + border: 1px solid #eaecf0; + border-left: 4px solid #36c; + background: #fff; + cursor: pointer; + transition: background 0.2s; + border-radius: 0 3px 3px 0; +} +.wiki-card:hover { background: #eaecf0; } +.wiki-card-title { font-size: 15px; color: #0645ad; margin-bottom: 5px; } +.wiki-card-excerpt { font-size: 13px; color: #72777d; margin-bottom: 8px; } +.wiki-card-footer { display: flex; justify-content: space-between; font-size: 12px; color: #555; } +.wiki-card-subtopic { color: #0645ad; } +.no-results { padding: 20px; text-align: center; color: #72777d; } +.loading-text { padding: 20px; text-align: center; color: #72777d; font-style: italic; } + +/* Modal */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255,255,255,0.95); + z-index: 2000; + display: none; + align-items: center; + justify-content: center; +} +.modal-overlay.active { display: flex; } +.modal { + background: #fff; + border: 1px solid #a2a9b1; + border-radius: 4px; + padding: 25px; + max-width: 500px; + width: 90%; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + position: relative; +} +.modal-close { + position: absolute; + top: 10px; + right: 15px; + background: none; + border: none; + font-size: 20px; + cursor: pointer; + color: #72777d; +} +.login-icon { font-size: 3rem; text-align: center; margin-bottom: 15px; } +.login-hint { color: #72777d; text-align: center; margin-bottom: 15px; font-size: 13px; } +.form-group { margin-bottom: 12px; } +.form-input { + width: 100%; + padding: 8px; + border: 1px solid #a2a9b1; + border-radius: 2px; + font-size: 14px; + box-sizing: border-box; +} +.form-input:focus { border-color: #36c; outline: none; } +.login-step { display: none; } +.login-step.active { display: block; } + +/* Profile & Detail Modals */ +.profile-username { font-size: 1.2rem; margin-bottom: 10px; } +.profile-rank { margin-bottom: 15px; } +.user-detail-modal { max-width: 600px; } +.user-detail-content { padding: 15px; } +.user-detail-avatar { + width: 60px; + height: 60px; + border-radius: 50%; + margin: 0 auto 15px; + border: 1px solid #a2a9b1; + overflow: hidden; +} +.user-detail-header { text-align: center; margin-bottom: 15px; } +.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } +.user-detail-name-rank h2 { font-size: 1.2rem; } +.user-detail-fields { display: grid; gap: 8px; } +.detail-field { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eaecf0; } +.detail-label { color: #72777d; font-size: 13px; } +.detail-value { color: #202122; font-size: 13px; text-align: right; } +.user-detail-company { color: #555; text-align: center; } + +/* Telegram Banner */ +.telegram-banner { + background: #f0f8ff; + border: 1px solid #a2a9b1; + padding: 15px 20px; + margin: 20px auto; + max-width: 1200px; + border-radius: 4px; + display: flex; + align-items: center; + gap: 15px; +} +.banner-icon { font-size: 1.5rem; } +.banner-text strong { color: #202122; } + +/* Newsletter */ +.newsletter-card { text-align: center; max-width: 400px; margin: 0 auto; } +.newsletter-icon { font-size: 2.5rem; margin-bottom: 15px; } +.newsletter-hint { color: #72777d; margin-bottom: 15px; font-size: 13px; } + +/* Footer */ +.footer { + background: #f8f9fa; + border-top: 1px solid #a2a9b1; + padding: 25px 20px; + text-align: center; + margin-top: 40px; +} +.footer-brand { margin-bottom: 15px; } +.footer-logo { font-size: 1.5rem; } +.footer-title { color: #202122; margin-left: 10px; font-size: 1rem; } +.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; } +.footer-links a { color: #0645ad; text-decoration: none; font-size: 13px; } +.footer-links a:hover { text-decoration: underline; } +.footer-bottom p { color: #72777d; margin: 5px 0; font-size: 12px; } +.footer-bottom a { color: #0645ad; } +.footer-copy { font-size: 12px; } + +/* Hide/Show */ +.hide-en { display: none; } +body[data-lang="en"] .hide-en { display: inline; } +body[data-lang="en"] .hide-de { display: none; } +.hidden { display: none !important; } + +/* Responsive */ +@media (max-width: 768px) { + .nav-menu { display: none; } + .nav-menu.open { + display: flex; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #fff; + flex-direction: column; + padding: 15px; + gap: 10px; + border-bottom: 1px solid #a2a9b1; + } + .nav-toggle { + display: flex; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; + } + .nav-toggle span { display: block; width: 20px; height: 2px; background: #202122; } + .hero-stats { gap: 20px; flex-wrap: wrap; } + .stat-number { font-size: 1.5rem; } + .about-grid { grid-template-columns: 1fr; } + .wiki-grid { grid-template-columns: 1fr; } +} +@media (min-width: 769px) { + .nav-toggle { display: none; } +} \ No newline at end of file diff --git a/variations/x/index.html b/variations/x/index.html new file mode 100644 index 0000000..165b0bf --- /dev/null +++ b/variations/x/index.html @@ -0,0 +1,467 @@ + + + + + + Paraguay SRL LLC — Community + + + + + + + + + + + + + + + + + + + + +
+
+
+

+ Paraguay LLC & SRL Community + Paraguay LLC & SRL Community +

+

+ Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay + The experience exchange for German and American expats in Paraguay +

+
+
+ -- + Mitglieder + Members +
+
+ -- + Beiträge + Posts +
+
+ -- + Wiki-Artikel + Wiki Articles +
+
+
+
+
+
+
+ + +
+ +
+ + +
+ + +
+
+

+ Über die Community + About the Community +

+
+
+
🏦
+

+ Banken & Zahlungsverkehr + Banking & Payments +

+

+ Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. + Experiences with Paraguayan and international banks, accounts, transfers and credit cards. +

+
+
+
⚖️
+

+ Rechtliches + Legal Matters +

+

+ Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. + Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. +

+
+
+
📊
+

+ Steuern & Buchhaltung + Taxes & Accounting +

+

+ Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. + Tax advice, accounting systems, annual statements and international tax planning. +

+
+
+
💻
+

+ ERP-Systeme + ERP Systems +

+

+ Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. + Experiences with various ERP systems, software solutions and digital management. +

+
+
+
+
+ + +
+
+

+ Mitglieder + Members +

+
+ + +
+
+

+ Lade Mitglieder... + Loading members... +

+
+
+
+ + +
+
+

+ Wiki + Wiki +

+
+ + +
+
+

+ Lade Wiki... + Loading wiki... +

+
+
+
+ + + + +
+ + + + + + + diff --git a/variations/x/main.js b/variations/x/main.js new file mode 100644 index 0000000..667dad7 --- /dev/null +++ b/variations/x/main.js @@ -0,0 +1,637 @@ +// ======================================== +// Paraguay LLC & SRL — Main JS +// ======================================== + +const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; +const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; +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'; + +let currentLang = 'de'; + +document.addEventListener('DOMContentLoaded', () => { + currentLang = document.body.dataset.lang || 'de'; + checkSession(); + loadCommunityStats(); + + // Smooth scroll nav links + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const target = document.querySelector(link.getAttribute('href')); + if (target) { + target.scrollIntoView({ behavior: 'smooth' }); + } + // Close mobile nav + document.getElementById('nav-menu').classList.remove('open'); + }); + }); + + // Mobile nav toggle + const navToggle = document.getElementById('nav-toggle'); + const navMenu = document.getElementById('nav-menu'); + if (navToggle) { + navToggle.addEventListener('click', () => { + navMenu.classList.toggle('open'); + }); + } + + // Navbar scroll effect + window.addEventListener('scroll', () => { + const nav = document.getElementById('main-nav'); + if (nav) { + nav.classList.toggle('scrolled', window.scrollY > 20); + } + }); + + // Language toggle + document.querySelectorAll('.lang-btn').forEach(btn => { + btn.addEventListener('click', () => { + const lang = btn.dataset.lang; + setLanguage(lang); + // Reload content in new language + if (isLoggedIn) { + if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); + if (document.getElementById('wiki-grid')) loadWiki(); + } + }); + }); + + // Member search + const memberSearch = document.getElementById('member-search'); + if (memberSearch) { + memberSearch.addEventListener('input', (e) => { + filterMembers(e.target.value); + }); + } + + // Wiki search + const wikiSearch = document.getElementById('wiki-search'); + if (wikiSearch) { + wikiSearch.addEventListener('input', (e) => { + searchWiki(e.target.value); + }); + } + + // Close modals on overlay click + document.querySelectorAll('.modal-overlay').forEach(overlay => { + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.classList.remove('active'); + } + }); + }); + + // Close modals on Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); + } + }); + + // Login button + const loginBtn = document.getElementById('login-btn'); + if (loginBtn) { + loginBtn.addEventListener('click', () => { + openLoginModal(); + }); + } +}); + +// ======================================== +// LANGUAGE +// ======================================== +function setLanguage(lang) { + currentLang = lang; + document.body.dataset.lang = lang; + document.querySelectorAll('.lang-btn').forEach(b => { + b.classList.toggle('active', b.dataset.lang === lang); + }); +} + +function isDE() { + return currentLang !== 'en'; +} + +// ======================================== +// COMMUNITY STATS +// ======================================== +async function loadCommunityStats() { + try { + const response = await fetch(COMMUNITY_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + + if (data.users !== undefined) { + animateCounter('stat-members', data.users); + } + if (data.topics !== undefined) { + document.getElementById('stat-wiki').textContent = data.topics; + } + } catch (error) { + console.error('Failed to load community stats:', error); + } +} + +function animateCounter(elementId, targetNumber) { + const element = document.getElementById(elementId); + if (!element) return; + + let current = 0; + const duration = 1500; // ms + const steps = 40; + const increment = targetNumber / steps; + const stepTime = duration / steps; + + const timer = setInterval(() => { + current += increment; + if (current >= targetNumber) { + element.textContent = targetNumber; + clearInterval(timer); + } else { + element.textContent = Math.floor(current); + } + }, stepTime); +} + +// ======================================== +// AUTH / SESSION +// ======================================== +let isLoggedIn = false; + +function isSessionValid() { + const sid = getCookie('sessionid'); + return sid.length > 0; +} + +function checkSession() { + isLoggedIn = isSessionValid(); + + if (isLoggedIn) { + document.body.dataset.loggedIn = 'true'; + document.getElementById('login-btn').style.display = 'none'; + document.getElementById('logout-btn').style.display = 'inline-flex'; + document.getElementById('profile-btn').style.display = 'inline-flex'; + document.getElementById('telegram-banner').style.display = 'none'; + document.getElementById('main-content').style.display = 'block'; + document.getElementById('newsletter-section').style.display = 'block'; + loadUsers(); + loadWiki(); + } else { + document.body.dataset.loggedIn = 'false'; + document.getElementById('login-btn').style.display = 'inline-flex'; + document.getElementById('logout-btn').style.display = 'none'; + document.getElementById('profile-btn').style.display = 'none'; + document.getElementById('telegram-banner').style.display = 'block'; + document.getElementById('main-content').style.display = 'none'; + document.getElementById('newsletter-section').style.display = 'none'; + } +} + +// ======================================== +// LOGIN MODAL +// ======================================== +function openLoginModal() { + document.getElementById('login-modal-overlay').classList.add('active'); + // Reset to step 1 + document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); + document.getElementById('login-step-1').classList.add('active'); + document.getElementById('telegram-user').value = ''; + document.getElementById('verification-code').value = ''; +} + +function closeLoginModal() { + document.getElementById('login-modal-overlay').classList.remove('active'); +} + +// ======================================== +// PROFILE MODAL +// ======================================== +function openProfileModal() { + const sid = getCookie('sessionid'); + if (!sid) { alert('Bitte anmelden.'); return; } + + fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) + .then(r => r.json()) + .then(user => { + document.getElementById('profile-username-display').textContent = user.username || ''; + const rank = getRank(user.posts || 0); + const badge = document.getElementById('profile-rank-badge'); + badge.innerHTML = `${rank.emoji} ${rank.title}`; + + document.getElementById('profile-company').value = user.company || ''; + document.getElementById('profile-email').value = user.email || ''; + document.getElementById('profile-homepage').value = user.homepage || ''; + document.getElementById('profile-image').value = user.image || ''; + document.getElementById('profile-location').value = user.location || ''; + document.getElementById('profile-description').value = user.Description || ''; + document.getElementById('profile-publish').checked = true; + + document.getElementById('profile-modal-overlay').classList.add('active'); + }) + .catch(() => alert('Fehler beim Laden des Profils.')); +} + +function closeProfileModal() { + document.getElementById('profile-modal-overlay').classList.remove('active'); +} + +function saveProfile() { + const sid = getCookie('sessionid'); + fetch(PROFILE_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('profile-username-display').textContent, + company: document.getElementById('profile-company').value.trim(), + email: document.getElementById('profile-email').value, + homepage: document.getElementById('profile-homepage').value, + image: document.getElementById('profile-image').value, + location: document.getElementById('profile-location').value, + Description: document.getElementById('profile-description').value, + sessionid: sid, + publish: document.getElementById('profile-publish').checked + }) + }) + .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) + .catch(() => alert('Fehler bei der Verbindung.')); +} + +// ======================================== +// USER DETAIL MODAL +// ======================================== +function openUserDetailModal(user) { + const avatar = document.getElementById('user-detail-avatar'); + if (user.image) { + avatar.innerHTML = `${user.username}`; + } else { + avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; + } + + document.getElementById('user-detail-initial').textContent = ''; + document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); + + const rank = getRank(user.posts || 0); + document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; + document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; + + document.getElementById('user-detail-company').textContent = user.company || ''; + + const emailEl = document.getElementById('user-detail-email'); + emailEl.innerHTML = user.email ? `${user.email}` : '-'; + + const hpEl = document.getElementById('user-detail-homepage'); + const hp = user.homepage || ''; + hpEl.innerHTML = hp ? `${hp}` : '-'; + + document.getElementById('user-detail-location').textContent = user.location || '-'; + document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); + + document.getElementById('user-detail-modal-overlay').classList.add('active'); +} + +function closeUserDetailModal() { + document.getElementById('user-detail-modal-overlay').classList.remove('active'); +} + +// ======================================== +// LOGIN FLOW +// ======================================== +function sendTelegramUser() { + const user = document.getElementById('telegram-user').value.trim(); + if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } + + const btn = event.target; + btn.disabled = true; + btn.textContent = isDE() ? 'Sende...' : 'Sending...'; + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: user }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-3').classList.add('active'); + } else if (data.status === 'code send') { + document.getElementById('login-step-1').classList.remove('active'); + document.getElementById('login-step-2').classList.add('active'); + } else { + alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); + } + }) + .catch(() => { + btn.disabled = false; + alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); + }); +} + +function verifyCode() { + const code = document.getElementById('verification-code').value.trim(); + if (!code) { alert('Bitte geben Sie den Code ein.'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + code: code, + sessionid: getCookie('sessionid') + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function submitLoginData() { + const name = document.getElementById('full-name').value.trim(); + const llc = document.getElementById('llc-name').value.trim(); + if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } + + fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + name: name, + llc: llc + }) + }) + .then(r => r.json()) + .then(data => { + if (data.sessionid) { + setCookie('sessionid', data.sessionid, 1); + checkSession(); + closeLoginModal(); + } else { + alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +function logout() { + setCookie('sessionid', '', -1); + checkSession(); +} + +// ======================================== +// NEWSLETTER +// ======================================== +function subscribeNewsletter() { + const email = document.getElementById('newsletter-email').value.trim(); + if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } + + fetch(NEWSLETTER_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email: email }) + }) + .then(r => { + if (r.ok) { + document.getElementById('newsletter-form').classList.add('hidden'); + document.getElementById('newsletter-success').classList.remove('hidden'); + } else { + alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); + } + }) + .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); +} + +// ======================================== +// USERS / MEMBERS +// ======================================== +async function loadUsers() { + try { + const response = await fetch(USER_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + const container = document.getElementById('members-list'); + + if (data.data && Array.isArray(data.data)) { + container.innerHTML = ''; + container.style.display = 'grid'; + + data.data.forEach(user => { + const card = createMemberCard(user); + container.appendChild(card); + }); + + // Update stats will be handled by loadCommunityStats + } else { + container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; + } + } catch (error) { + const container = document.getElementById('members-list'); + container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function createMemberCard(user) { + const card = document.createElement('div'); + card.className = 'member-card'; + + const rank = getRank(user.posts || 0); + const avatarContent = user.image + ? `${user.username}` + : (user.username || '?').charAt(0).toUpperCase(); + + card.innerHTML = ` +
${avatarContent}
+
+

${user.username || 'N/A'}

+

${user.company || ''}

+ ${user.location ? `

📍 ${user.location}

` : ''} + ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} + ${rank.emoji} ${rank.title} +
+ `; + + card.addEventListener('click', () => openUserDetailModal(user)); + return card; +} + +function filterMembers(term) { + const cards = document.querySelectorAll('.member-card'); + const t = term.toLowerCase(); + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = text.includes(t) ? 'flex' : 'none'; + }); +} + +// ======================================== +// RANKS +// ======================================== +function getRank(posts) { + if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; + if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; + if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; + if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; + if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; + if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; + return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; +} + +// ======================================== +// WIKI +// ======================================== +let wikiData = []; + +async function loadWiki() { + try { + const response = await fetch(WIKI_URL); + if (!response.ok) throw new Error('Failed to fetch'); + const result = await response.json(); + + if (result.data && Array.isArray(result.data)) { + wikiData = result.data; + renderWikiCards(wikiData); + + // Wiki count will be loaded from community webhook + } else { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; + } + } catch (error) { + document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; + } +} + +function renderWikiCards(data) { + const grid = document.getElementById('wiki-grid'); + grid.innerHTML = ''; + + if (data.length === 0) { + grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; + return; + } + + // Group by topic + const topics = {}; + data.forEach(item => { + const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); + if (!topics[topicKey]) topics[topicKey] = []; + topics[topicKey].push(item); + }); + + const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; + + Object.entries(topics).forEach(([topicName, subtopics], idx) => { + const card = document.createElement('div'); + card.className = 'wiki-card'; + card.dataset.color = colors[idx % colors.length]; + + // Get excerpt from first subtopic + const firstSub = subtopics[0]; + const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); + const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); + + card.innerHTML = ` +
${escapeHtml(topicName)}
+
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
+
+ ${escapeHtml(subtopicTitle)} + ${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'} +
+ `; + + // Open modal on click + card.addEventListener('click', () => openWikiModal(topicName, subtopics)); + + grid.appendChild(card); + }); +} + +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 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); +} + +// ======================================== +// 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; +} diff --git a/variations/x/style.css b/variations/x/style.css new file mode 100644 index 0000000..87bc018 --- /dev/null +++ b/variations/x/style.css @@ -0,0 +1,403 @@ +/* X (Twitter) Style — Dark, Minimal, Icon-Driven */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + background: #000; + color: #e7e9ea; + line-height: 1.4; + font-size: 15px; +} + +/* Navigation */ +.nav { + background: #000; + border-bottom: 1px solid #2f3336; + padding: 0 16px; + height: 48px; + position: sticky; + top: 0; + z-index: 1000; +} +.nav-container { + max-width: 600px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; +} +.nav-brand { + display: flex; + align-items: center; + gap: 10px; + text-decoration: none; + color: #e7e9ea; + font-size: 16px; + font-weight: 700; +} +.nav-logo { font-size: 22px; } +.nav-menu { display: flex; gap: 24px; align-items: center; } +.nav-link { + color: #71767b; + text-decoration: none; + font-size: 14px; + font-weight: 500; + transition: color 0.2s; +} +.nav-link:hover { color: #e7e9ea; } +.nav-actions { display: flex; gap: 12px; align-items: center; } +.lang-select { display: flex; gap: 6px; } +.lang-btn { + background: #2f3336; + border: none; + color: #e7e9ea; + padding: 4px 10px; + font-size: 12px; + cursor: pointer; + border-radius: 16px; +} +.lang-btn.active { background: #1d9bf0; } + +/* Buttons */ +.btn { + padding: 8px 20px; + font-size: 15px; + font-weight: 700; + border-radius: 9999px; + cursor: pointer; + text-decoration: none; + display: inline-block; + border: none; + transition: background 0.2s; +} +.btn-primary { background: #1d9bf0; color: #fff; } +.btn-primary:hover { background: #1a8cd8; } +.btn-outline { + background: transparent; + color: #e7e9ea; + border: 1px solid #536471; +} +.btn-outline:hover { background: rgba(231,233,234,0.1); } +.btn-block { display: block; width: 100%; text-align: center; } +.btn-telegram { background: #0088cc; color: #fff; } + +/* Hero */ +.hero { + background: #000; + color: #e7e9ea; + text-align: center; + padding: 80px 20px 50px; +} +.hero-title { + font-size: 32px; + font-weight: 800; + margin-bottom: 12px; + letter-spacing: -0.5px; +} +.hero-subtitle { + font-size: 17px; + color: #71767b; + margin-bottom: 30px; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} +.hero-stats { display: flex; justify-content: center; gap: 50px; } +.stat { text-align: center; } +.stat-number { + display: block; + font-size: 28px; + font-weight: 700; + color: #fff; +} +.stat { font-size: 13px; color: #71767b; margin-top: 4px; } + +/* Sections */ +.section { + background: #000; + padding: 24px 16px; + max-width: 600px; + margin: 0 auto; + border-bottom: 1px solid #2f3336; +} +.section-alt { background: #000; } +.section-title { + font-size: 20px; + font-weight: 700; + margin-bottom: 16px; + color: #e7e9ea; +} +.container { max-width: 100%; } + +/* About */ +.about-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 16px; +} +.about-card { + padding: 16px; + border-radius: 12px; + background: #0f1419; + border: 1px solid #2f3336; +} +.about-icon { font-size: 1.8rem; margin-bottom: 10px; } +.about-card h3 { font-size: 14px; font-weight: 600; color: #e7e9ea; margin-bottom: 6px; } +.about-card p { font-size: 13px; color: #71767b; line-height: 1.4; } + +/* Search */ +.search-bar { + display: flex; + margin-bottom: 16px; + position: relative; +} +.search-icon { + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + color: #71767b; +} +.search-input { + width: 100%; + padding: 12px 14px 12px 38px; + border: 1px solid #2f3336; + border-radius: 24px; + background: #202327; + font-size: 15px; + color: #e7e9ea; +} +.search-input:focus { outline: none; border-color: #1d9bf0; } + +/* Members */ +.members-grid { + display: grid; + grid-template-columns: 1fr; + gap: 4px; +} +.member-card { + display: flex; + align-items: center; + gap: 12px; + padding: 14px 16px; + border-radius: 12px; + cursor: pointer; + transition: background 0.2s; +} +.member-card:hover { background: #16181c; } +.user-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; +} +.user-avatar-text { + width: 40px; + height: 40px; + border-radius: 50%; + background: #1d9bf0; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: 600; +} +.member-info h4 { font-size: 15px; font-weight: 600; color: #e7e9ea; } +.member-company { font-size: 13px; color: #71767b; } +.member-location, .member-posts { font-size: 13px; color: #71767b; } +.rank-badge { + font-size: 11px; + padding: 2px 8px; + border-radius: 10px; + position: absolute; + top: -4px; + right: 0; + font-weight: 600; +} +.rank-badge.rank-rookie { background: #2f3336; color: #71767b; } +.rank-badge.rank-beginner { background: #0f3a0f; color: #4ade80; } +.rank-badge.rank-member { background: #0c2a5e; color: #60a5fa; } +.rank-badge.rank-contributor { background: #0a3d3d; color: #2dd4bf; } +.rank-badge.rank-veteran { background: #3a0a5e; color: #c084fc; } +.rank-badge.rank-expert { background: #5e3a0a; color: #fbbf24; } +.rank-badge.rank-legend { background: #5e0a0a; color: #f87171; } + +/* Wiki Cards */ +.wiki-grid { + display: grid; + grid-template-columns: 1fr; + gap: 4px; +} +.wiki-card { + padding: 14px 16px; + border-radius: 12px; + background: #0f1419; + border: 1px solid #2f3336; + cursor: pointer; + transition: background 0.2s; +} +.wiki-card:hover { background: #16181c; } +.wiki-card-title { font-size: 15px; font-weight: 600; color: #e7e9ea; margin-bottom: 4px; } +.wiki-card-excerpt { font-size: 13px; color: #71767b; margin-bottom: 6px; } +.wiki-card-footer { display: flex; justify-content: space-between; font-size: 13px; color: #71767b; } +.wiki-card-subtopic { color: #1d9bf0; } +.no-results { padding: 20px; text-align: center; color: #71767b; } +.loading-text { padding: 20px; text-align: center; color: #71767b; font-style: italic; } + +/* Modal */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(91,112,131,0.4); + z-index: 2000; + display: none; + align-items: center; + justify-content: center; +} +.modal-overlay.active { display: flex; } +.modal { + background: #000; + border: 1px solid #2f3336; + border-radius: 16px; + padding: 24px; + max-width: 440px; + width: 90%; + position: relative; +} +.modal-close { + position: absolute; + top: 12px; + right: 16px; + background: none; + border: none; + font-size: 20px; + cursor: pointer; + color: #e7e9ea; + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.modal-close:hover { background: #202327; } +.login-icon { font-size: 2.5rem; text-align: center; margin-bottom: 16px; } +.login-hint { color: #71767b; text-align: center; margin-bottom: 20px; font-size: 15px; } +.form-group { margin-bottom: 14px; } +.form-input { + width: 100%; + padding: 12px 14px; + border: 1px solid #2f3336; + border-radius: 8px; + font-size: 15px; + color: #e7e9ea; + background: transparent; +} +.form-input:focus { border-color: #1d9bf0; outline: 2px solid #1d9bf0; outline-offset: -2px; } +.login-step { display: none; } +.login-step.active { display: block; } + +/* Profile & Detail */ +.profile-username { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; } +.profile-rank { margin-bottom: 16px; } +.user-detail-modal { max-width: 480px; } +.user-detail-content { padding: 16px; } +.user-detail-avatar { + width: 60px; + height: 60px; + border-radius: 50%; + margin: 0 auto 16px; + overflow: hidden; +} +.user-detail-header { text-align: center; margin-bottom: 16px; } +.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } +.user-detail-name-rank h2 { font-size: 1.2rem; font-weight: 700; } +.user-detail-fields { display: grid; gap: 10px; } +.detail-field { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #2f3336; } +.detail-label { color: #71767b; font-size: 14px; } +.detail-value { color: #e7e9ea; font-size: 14px; text-align: right; } +.user-detail-company { color: #71767b; text-align: center; } + +/* Telegram Banner */ +.telegram-banner { + background: #0f1419; + border: 1px solid #2f3336; + padding: 14px 20px; + margin: 16px auto; + max-width: 600px; + border-radius: 12px; + display: flex; + align-items: center; + gap: 14px; +} +.banner-icon { font-size: 1.6rem; } +.banner-text strong { color: #e7e9ea; } + +/* Newsletter */ +.newsletter-card { text-align: center; max-width: 360px; margin: 0 auto; } +.newsletter-icon { font-size: 2rem; margin-bottom: 14px; } +.newsletter-hint { color: #71767b; margin-bottom: 14px; font-size: 14px; } + +/* Footer */ +.footer { + background: #000; + padding: 20px 16px; + text-align: center; + border-top: 1px solid #2f3336; +} +.footer-brand { margin-bottom: 12px; } +.footer-logo { font-size: 1.4rem; } +.footer-title { color: #e7e9ea; margin-left: 10px; font-size: 14px; font-weight: 600; } +.footer-links { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; } +.footer-links a { color: #71767b; text-decoration: none; font-size: 13px; } +.footer-links a:hover { color: #e7e9ea; } +.footer-bottom p { color: #71767b; margin: 4px 0; font-size: 12px; } +.footer-bottom a { color: #1d9bf0; } +.footer-copy { font-size: 12px; } + +/* Hide/Show */ +.hide-en { display: none; } +body[data-lang="en"] .hide-en { display: inline; } +body[data-lang="en"] .hide-de { display: none; } +.hidden { display: none !important; } + +/* Responsive */ +@media (max-width: 768px) { + .nav-menu { display: none; } + .nav-menu.open { + display: flex; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #000; + flex-direction: column; + padding: 12px; + gap: 10px; + border-bottom: 1px solid #2f3336; + } + .nav-toggle { + display: flex; + flex-direction: column; + gap: 3px; + background: none; + border: none; + cursor: pointer; + padding: 4px; + } + .nav-toggle span { display: block; width: 18px; height: 2px; background: #e7e9ea; } + .hero-title { font-size: 24px; } + .hero-subtitle { font-size: 15px; } + .hero-stats { gap: 24px; flex-wrap: wrap; } + .stat-number { font-size: 22px; } + .about-grid { grid-template-columns: 1fr; } +} +@media (min-width: 769px) { + .nav-toggle { display: none; } +} \ No newline at end of file