Files
paraguay/index.html
T

541 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="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/YourBotUsername?start=send_a_login_link" 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()">&times;</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()">&times;</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()">&times;</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">Unsere Themen</span>
<span class="hide-en">Our Topics</span>
</h2>
<p class="section-subtitle">
<span class="hide-de">Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay. Von Unternehmer zu Unternehmer.</span>
<span class="hide-en">The exchange of experience for German and American expats in Paraguay. From entrepreneur to entrepreneur.</span>
</p>
<div class="about-grid">
<div class="about-card stagger-1" 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 stagger-2" 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 stagger-3" 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="section-locked" id="members-locked">
<img class="locked-bg" src="/spacer.png" alt="" aria-hidden="true">
<div class="locked-overlay"></div>
<div class="locked-cta">
<div class="locked-cta-content">
<div class="locked-icon">🌴</div>
<h3 class="locked-title">
<span class="hide-de">Willkommen in der Community</span>
<span class="hide-en">Welcome to the Community</span>
</h3>
<p class="locked-desc">
<span class="hide-de">Tritt unserer Telegram-Gruppe bei und erhalte Zugang zu allen Inhalten Mitglieder, Wiki, Termine und mehr. Alles aus der Praxis, von Unternehmer zu Unternehmer.</span>
<span class="hide-en">Join our Telegram group and get access to all content members, wiki, events and more. All from practice, entrepreneur to entrepreneur.</span>
</p>
<a href="https://t.me/YourBotUsername?start=send_a_login_link" target="_blank" rel="noopener" class="btn btn-primary locked-login-btn">
<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">Jetzt Telegram beitreten</span>
<span class="hide-en">Join Telegram now</span>
</a>
<p class="locked-hint">
<span class="hide-de">Danach erhältst du einen Link und bist sofort dabei.</span>
<span class="hide-en">You'll receive a link and you're in.</span>
</p>
</div>
</div>
</div>
<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="section-locked" id="wiki-locked">
<img class="locked-bg" src="/spacer.png" alt="" aria-hidden="true">
<div class="locked-overlay"></div>
<div class="locked-cta">
<div class="locked-cta-content">
<div class="locked-icon">🌴</div>
<h3 class="locked-title">
<span class="hide-de">Willkommen in der Community</span>
<span class="hide-en">Welcome to the Community</span>
</h3>
<p class="locked-desc">
<span class="hide-de">Tritt unserer Telegram-Gruppe bei und erhalte Zugang zu unserem Wiki mit wertvollen Erfahrungen zu Steuern, Banken und Rechtlichem in Paraguay.</span>
<span class="hide-en">Join our Telegram group and get access to our wiki with valuable experiences on taxes, banking and legal matters in Paraguay.</span>
</p>
<a href="https://t.me/YourBotUsername?start=send_a_login_link" target="_blank" rel="noopener" class="btn btn-primary locked-login-btn">
<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">Jetzt Telegram beitreten</span>
<span class="hide-en">Join Telegram now</span>
</a>
</div>
</div>
</div>
<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-topics" id="wiki-topics"></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 class="wiki-footer" id="wiki-footer">
<div class="wiki-counter" id="wiki-counter"></div>
<div class="wiki-pagination" id="wiki-pagination"></div>
</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-calendar-grid">
<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 class="calendar-card">
<div class="calendar-header">
<div class="calendar-title">
<span class="hide-de">Termine</span>
<span class="hide-en">Upcoming Dates</span>
</div>
</div>
<div class="calendar-events" id="calendar-events">
<p class="calendar-events-hint">
<span class="hide-de">Termine werden geladen...</span>
<span class="hide-en">Loading events...</span>
</p>
</div>
</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>