465 lines
21 KiB
HTML
465 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Paraguay SRL LLC — Community</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
</head>
|
|
<body data-lang="de" data-logged-in="false">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav" id="main-nav">
|
|
<div class="nav-container">
|
|
<a href="#hero" class="nav-brand">
|
|
<span class="nav-logo" style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,#1877f2,#42b0ff);color:#fff;border-radius:8px;font-size:18px;font-weight:700;">P</span>
|
|
<span class="nav-title">Paraguay LLC & SRL</span>
|
|
</a>
|
|
<button class="nav-toggle" id="nav-toggle" aria-label="Toggle navigation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
<div class="nav-menu" id="nav-menu">
|
|
<a href="#hero" class="nav-link">
|
|
<span class="hide-de">Start</span>
|
|
<span class="hide-en">Home</span>
|
|
</a>
|
|
<a href="#about" class="nav-link">
|
|
<span class="hide-de">Über uns</span>
|
|
<span class="hide-en">About</span>
|
|
</a>
|
|
<a href="#members" class="nav-link">
|
|
<span class="hide-de">Mitglieder</span>
|
|
<span class="hide-en">Members</span>
|
|
</a>
|
|
<a href="#wiki" class="nav-link">
|
|
<span class="hide-de">Wiki</span>
|
|
<span class="hide-en">Wiki</span>
|
|
</a>
|
|
<div class="nav-actions">
|
|
<div class="lang-select" id="lang-select">
|
|
<button class="lang-btn" data-lang="de">DE</button>
|
|
<button class="lang-btn" data-lang="en">EN</button>
|
|
</div>
|
|
<a href="https://t.me/+2s0N78kM5n4xMzBi" target="_blank" rel="noopener" class="btn btn-outline" id="login-btn">
|
|
<span class="hide-de">Anmelden</span>
|
|
<span class="hide-en">Login</span>
|
|
</a>
|
|
<button class="btn btn-primary" id="logout-btn" style="display:none;" onclick="logout()">
|
|
<span class="hide-de">Abmelden</span>
|
|
<span class="hide-en">Logout</span>
|
|
</button>
|
|
<button class="btn btn-outline" id="profile-btn" style="display:none;" onclick="openProfileModal()">
|
|
<span class="hide-de">Profil</span>
|
|
<span class="hide-en">Profile</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Login Modal -->
|
|
<div class="modal-overlay" id="login-modal-overlay">
|
|
<div class="modal" id="login-modal">
|
|
<button class="modal-close" onclick="closeLoginModal()">×</button>
|
|
<div class="login-steps">
|
|
<!-- Step 1: Username -->
|
|
<div class="login-step active" id="login-step-1">
|
|
<img src="https://images.unsplash.com/photo-1611162616475-46b635cb6868?w=80&h=80&fit=crop&q=80" alt="Telegram" class="modal-image" />
|
|
<h2 class="hide-de">Telegram Username eingeben</h2>
|
|
<h2 class="hide-en">Enter Telegram Username</h2>
|
|
<p class="login-hint">
|
|
<span class="hide-de">Geben Sie Ihren Telegram-Nutzernamen ein, um einen Login-Link per Nachricht zu erhalten.</span>
|
|
<span class="hide-en">Enter your Telegram username to receive a login link via message.</span>
|
|
</p>
|
|
<div class="form-group">
|
|
<input type="text" id="telegram-user" class="form-input" placeholder="@username" />
|
|
</div>
|
|
<button class="btn btn-primary btn-block" onclick="sendTelegramUser()">
|
|
<span class="hide-de">Login-Link senden</span>
|
|
<span class="hide-en">Send Login Link</span>
|
|
</button>
|
|
</div>
|
|
<!-- Step 2: Code -->
|
|
<div class="login-step" id="login-step-2">
|
|
<img src="https://images.unsplash.com/photo-1567427017947-545c5f8d16ad?w=80&h=80&fit=crop&q=80" alt="Verification" class="modal-image" />
|
|
<h2 class="hide-de">Verifizierungscode</h2>
|
|
<h2 class="hide-en">Verification Code</h2>
|
|
<p class="login-hint">
|
|
<span class="hide-de">Der Code wurde an Ihren Telegram-Account gesendet.</span>
|
|
<span class="hide-en">The code has been sent to your Telegram account.</span>
|
|
</p>
|
|
<div class="form-group">
|
|
<input type="text" id="verification-code" class="form-input" placeholder="123456" />
|
|
</div>
|
|
<button class="btn btn-primary btn-block" onclick="verifyCode()">
|
|
<span class="hide-de">Verifizieren</span>
|
|
<span class="hide-en">Verify</span>
|
|
</button>
|
|
</div>
|
|
<!-- Step 3: Registration -->
|
|
<div class="login-step" id="login-step-3">
|
|
<img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?w=80&h=80&fit=crop&q=80" alt="Registration" class="modal-image" />
|
|
<h2 class="hide-de">Registrierung abschließen</h2>
|
|
<h2 class="hide-en">Complete Registration</h2>
|
|
<div class="form-group">
|
|
<input type="text" id="full-name" class="form-input" placeholder="Ihr Name" />
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="llc-name" class="form-input" placeholder="LLC / SRL Name" />
|
|
</div>
|
|
<button class="btn btn-primary btn-block" onclick="submitLoginData()">
|
|
<span class="hide-de">Registrieren</span>
|
|
<span class="hide-en">Register</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Modal -->
|
|
<div class="modal-overlay" id="profile-modal-overlay">
|
|
<div class="modal" id="profile-modal">
|
|
<button class="modal-close" onclick="closeProfileModal()">×</button>
|
|
<h2 class="hide-de">Dein Profil</h2>
|
|
<h2 class="hide-en">Your Profile</h2>
|
|
<div id="profile-username-display" class="profile-username"></div>
|
|
<div class="profile-rank" id="profile-rank-badge"></div>
|
|
<div class="profile-edit-fields">
|
|
<div class="form-group">
|
|
<label>
|
|
<span class="hide-de">Name der LLC / SRL</span>
|
|
<span class="hide-en">LLC / SRL name</span>
|
|
</label>
|
|
<input type="text" id="profile-company" class="form-input" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<span class="hide-de">E-Mail</span>
|
|
<span class="hide-en">Email</span>
|
|
</label>
|
|
<input type="email" id="profile-email" class="form-input" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<span class="hide-de">Homepage</span>
|
|
<span class="hide-en">Homepage</span>
|
|
</label>
|
|
<input type="url" id="profile-homepage" class="form-input" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<span class="hide-de">Bild URL</span>
|
|
<span class="hide-en">Image URL</span>
|
|
</label>
|
|
<input type="text" id="profile-image" class="form-input" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<span class="hide-de">Standort</span>
|
|
<span class="hide-en">Location</span>
|
|
</label>
|
|
<input type="text" id="profile-location" class="form-input" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<span class="hide-de">Beschreibung</span>
|
|
<span class="hide-en">Description</span>
|
|
</label>
|
|
<textarea id="profile-description" class="form-input" rows="4"></textarea>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="profile-publish" class="checkbox" />
|
|
<label for="profile-publish" class="hide-de">Veröffentlichen</label>
|
|
<label for="profile-publish" class="hide-en">Publish</label>
|
|
</div>
|
|
<button class="btn btn-primary btn-block" onclick="saveProfile()">
|
|
<span class="hide-de">Speichern</span>
|
|
<span class="hide-en">Save</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Detail Modal -->
|
|
<div class="modal-overlay" id="user-detail-modal-overlay">
|
|
<div class="modal user-detail-modal" id="user-detail-modal">
|
|
<button class="modal-close" onclick="closeUserDetailModal()">×</button>
|
|
<div class="user-detail-content">
|
|
<div class="user-detail-avatar" id="user-detail-avatar">
|
|
<span class="user-avatar-text" id="user-detail-initial">?</span>
|
|
</div>
|
|
<div class="user-detail-header">
|
|
<div class="user-detail-info">
|
|
<div class="user-detail-name-rank">
|
|
<h2 id="user-detail-username">@username</h2>
|
|
<span class="rank-badge" id="user-detail-rank-badge"></span>
|
|
</div>
|
|
<p class="user-detail-company" id="user-detail-company">Company</p>
|
|
</div>
|
|
</div>
|
|
<div class="user-detail-fields">
|
|
<div class="detail-field">
|
|
<span class="detail-label">
|
|
<span class="hide-de">E-Mail</span>
|
|
<span class="hide-en">Email</span>
|
|
</span>
|
|
<span class="detail-value" id="user-detail-email">-</span>
|
|
</div>
|
|
<div class="detail-field">
|
|
<span class="detail-label">
|
|
<span class="hide-de">Homepage</span>
|
|
<span class="hide-en">Homepage</span>
|
|
</span>
|
|
<span class="detail-value" id="user-detail-homepage">-</span>
|
|
</div>
|
|
<div class="detail-field">
|
|
<span class="detail-label">
|
|
<span class="hide-de">Standort</span>
|
|
<span class="hide-en">Location</span>
|
|
</span>
|
|
<span class="detail-value" id="user-detail-location">-</span>
|
|
</div>
|
|
<div class="detail-field">
|
|
<span class="detail-label">
|
|
<span class="hide-de">Beschreibung</span>
|
|
<span class="hide-en">Description</span>
|
|
</span>
|
|
<span class="detail-value user-desc-value" id="user-detail-description">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero" id="hero">
|
|
<img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1920&h=900&fit=crop&q=75" alt="Aerial landscape with river" class="hero-image" />
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">
|
|
<span class="hide-de">Paraguay LLC & SRL Community</span>
|
|
<span class="hide-en">Paraguay LLC & SRL Community</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
<span class="hide-de">Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay</span>
|
|
<span class="hide-en">The experience exchange for German and American expats in Paraguay</span>
|
|
</p>
|
|
<div class="hero-stats">
|
|
<div class="stat">
|
|
<span class="stat-number" id="stat-members">--</span>
|
|
<span class="hide-de">Mitglieder</span>
|
|
<span class="hide-en">Members</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-number" id="stat-posts">--</span>
|
|
<span class="hide-de">Beiträge</span>
|
|
<span class="hide-en">Posts</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-number" id="stat-wiki">--</span>
|
|
<span class="hide-de">Wiki-Artikel</span>
|
|
<span class="hide-en">Wiki Articles</span>
|
|
</div>
|
|
</div>
|
|
<a href="https://t.me/+2s0N78kM5n4xMzBi" target="_blank" rel="noopener" class="btn btn-cta">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.94 8.13l-1.97 9.27c-.15.67-.54.83-1.09.52l-3.02-2.22-1.46 1.4c-.16.16-.3.3-.61.3l.22-3.06 5.55-5.02c.24-.22-.05-.34-.38-.13L8.69 14.7l-2.95-.92c-.64-.2-.66-.64.14-.95l11.15-4.3c.52-.19.97.13.81.9z"/></svg>
|
|
<span class="hide-de">Unserem Telegram-Kanal beitreten</span>
|
|
<span class="hide-en">Join our Telegram Channel</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Telegram Banner (nicht logged-in) -->
|
|
<div class="telegram-banner" id="telegram-banner">
|
|
<div class="banner-content">
|
|
<img src="https://images.unsplash.com/photo-1614680376593-902f74cf0d41?w=64&h=64&fit=crop&q=80" alt="Telegram" class="banner-image" />
|
|
<div class="banner-text">
|
|
<strong>
|
|
<span class="hide-de">Noch nicht angemeldet?</span>
|
|
<span class="hide-en">Not logged in yet?</span>
|
|
</strong>
|
|
<span class="hide-de">Tritt unserer Telegram-Gruppe bei und erhalte einen Login-Link!</span>
|
|
<span class="hide-en">Join our Telegram group and receive a login link!</span>
|
|
</div>
|
|
<a href="https://t.me/+2s0N78kM5n4xMzBi" target="_blank" rel="noopener" class="btn btn-telegram">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.94 8.13l-1.97 9.27c-.15.67-.54.83-1.09.52l-3.02-2.22-1.46 1.4c-.16.16-.3.3-.61.3l.22-3.06 5.55-5.02c.24-.22-.05-.34-.38-.13L8.69 14.7l-2.95-.92c-.64-.2-.66-.64.14-.95l11.15-4.3c.52-.19.97.13.81.9z"/></svg>
|
|
<span class="hide-de">Telegram beitreten</span>
|
|
<span class="hide-en">Join Telegram</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About Section (always visible) -->
|
|
<section class="section fade-in-section" id="about">
|
|
<div class="container">
|
|
<h2 class="section-title">
|
|
<span class="hide-de">Über die Community</span>
|
|
<span class="hide-en">About the Community</span>
|
|
</h2>
|
|
<div class="about-grid">
|
|
<div class="about-card" data-image="banking">
|
|
<img src="https://images.unsplash.com/photo-1601597111158-2fceff292cdc?w=400&h=250&fit=crop&q=80" alt="Banking" class="about-image" />
|
|
<h3>
|
|
<span class="hide-de">Banken & Zahlungsverkehr</span>
|
|
<span class="hide-en">Banking & Payments</span>
|
|
</h3>
|
|
<p>
|
|
<span class="hide-de">Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten.</span>
|
|
<span class="hide-en">Experiences with Paraguayan and international banks, accounts, transfers and credit cards.</span>
|
|
</p>
|
|
</div>
|
|
<div class="about-card" data-image="legal">
|
|
<img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=400&h=250&fit=crop&q=80" alt="Legal" class="about-image" />
|
|
<h3>
|
|
<span class="hide-de">Rechtliches</span>
|
|
<span class="hide-en">Legal Matters</span>
|
|
</h3>
|
|
<p>
|
|
<span class="hide-de">Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay.</span>
|
|
<span class="hide-en">Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay.</span>
|
|
</p>
|
|
</div>
|
|
<div class="about-card" data-image="taxes">
|
|
<img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop&q=80" alt="Taxes" class="about-image" />
|
|
<h3>
|
|
<span class="hide-de">Steuern & Buchhaltung</span>
|
|
<span class="hide-en">Taxes & Accounting</span>
|
|
</h3>
|
|
<p>
|
|
<span class="hide-de">Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung.</span>
|
|
<span class="hide-en">Tax advice, accounting systems, annual statements and international tax planning.</span>
|
|
</p>
|
|
</div>
|
|
<div class="about-card" data-image="erp">
|
|
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop&q=80" alt="ERP Systems" class="about-image" />
|
|
<h3>
|
|
<span class="hide-de">ERP-Systeme</span>
|
|
<span class="hide-en">ERP Systems</span>
|
|
</h3>
|
|
<p>
|
|
<span class="hide-de">Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management.</span>
|
|
<span class="hide-en">Experiences with various ERP systems, software solutions and digital management.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Content (logged-in) -- Members, Wiki, Newsletter -->
|
|
<main class="main-content" id="main-content">
|
|
|
|
<!-- Members Section -->
|
|
<section class="section section-alt fade-in-section" id="members">
|
|
<div class="container">
|
|
<h2 class="section-title">
|
|
<span class="hide-de">Mitglieder</span>
|
|
<span class="hide-en">Members</span>
|
|
</h2>
|
|
<div class="search-bar">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
<input type="text" id="member-search" class="search-input" placeholder="Mitglieder durchsuchen..." />
|
|
</div>
|
|
<div class="members-grid" id="members-list">
|
|
<p class="loading-text">
|
|
<span class="hide-de">Lade Mitglieder...</span>
|
|
<span class="hide-en">Loading members...</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Wiki Section -->
|
|
<section class="section fade-in-section" id="wiki">
|
|
<div class="container">
|
|
<h2 class="section-title">
|
|
<span class="hide-de">Wiki</span>
|
|
<span class="hide-en">Wiki</span>
|
|
</h2>
|
|
<div class="search-bar">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
<input type="text" id="wiki-search" class="search-input" placeholder="Wiki durchsuchen..." />
|
|
</div>
|
|
<div class="wiki-grid" id="wiki-grid">
|
|
<p class="loading-text">
|
|
<span class="hide-de">Lade Wiki...</span>
|
|
<span class="hide-en">Loading wiki...</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter Section (nur logged-in) -->
|
|
<section class="section section-alt newsletter-section" id="newsletter-section" style="display:none;">
|
|
<div class="container">
|
|
<div class="newsletter-card">
|
|
<img src="https://images.unsplash.com/photo-1596526131083-e8c633c948d2?w=120&h=120&fit=crop&q=80" alt="Newsletter" class="newsletter-image" />
|
|
<h2>
|
|
<span class="hide-de">Newsletter</span>
|
|
<span class="hide-en">Newsletter</span>
|
|
</h2>
|
|
<p class="newsletter-hint">
|
|
<span class="hide-de">Erhalten Sie Updates und wichtige Informationen direkt in Ihr Postfach.</span>
|
|
<span class="hide-en">Receive updates and important information directly in your inbox.</span>
|
|
</p>
|
|
<form id="newsletter-form">
|
|
<div class="form-group">
|
|
<input type="email" id="newsletter-email" class="form-input" placeholder="name@example.com" />
|
|
</div>
|
|
<button type="button" class="btn btn-primary btn-block" onclick="subscribeNewsletter()">
|
|
<span class="hide-de">Abonnieren</span>
|
|
<span class="hide-en">Subscribe</span>
|
|
</button>
|
|
</form>
|
|
<div id="newsletter-success" class="hidden">
|
|
<p class="success-message">
|
|
<span class="hide-de">Danke! Bitte prüfen Sie Ihre E-Mails.</span>
|
|
<span class="hide-en">Thank you! Please check your emails.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dates / Events Section -->
|
|
<section class="section fade-in-section" id="dates" style="display:none;">
|
|
<div class="container">
|
|
<h2 class="section-title">
|
|
<span class="hide-de">Termine</span>
|
|
<span class="hide-en">Dates & Events</span>
|
|
</h2>
|
|
<div class="dates-grid" id="dates-list">
|
|
<p class="loading-text">
|
|
<span class="hide-de">Lade Termine...</span>
|
|
<span class="hide-en">Loading events...</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-bottom">
|
|
<p class="footer-copy">
|
|
<span class="hide-de">© 2025 Paraguay LLC & SRL Community. Alle Rechte vorbehalten.</span>
|
|
<span class="hide-en">© 2025 Paraguay LLC & SRL Community. All rights reserved.</span>
|
|
</p>
|
|
<p>
|
|
<span class="hide-de">Gesponsert von</span>
|
|
<span class="hide-en">Sponsored by</span>
|
|
<a href="https://ODOO4projects.com" target="_blank" rel="noopener">ODOO4projects</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|