Oliver/paraguay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplified newspaper-style design: black/white/blue, mission + login + news layout

Browse Source
This commit is contained in:
Kato
2026-09-02 13:55:57 +00:00
parent 2f89944e64
commit 3816201bdc
1 changed files with 233 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+215 -519
View File
@@ -3,618 +3,314 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Paraguay SRL LLC — Community & Resources</title> <title>Paraguay SRL LLC — Aktuelle Erfahrungsbereichte</title>
<meta name="description" content="Paraguay SRL LLC Community — German/English expats sharing real experiences on banking, taxes, legal matters for LLC/SRL formation in Paraguay." /> <meta name="description" content="Deutsche / Amerikaner in Paraguay tauschen Erfahrungen zu Banken, Steuern, Recht für LLC/SRL." />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style> <style>
/* ── Reset & Base ── */ /* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { :root {
--black: #0a0a0a; --black: #000000;
--glass: #111111;
--amber: #ffb300;
--tg: #2AABEE;
--white: #ffffff; --white: #ffffff;
--gray1: #e0e0e0; --blue: #1e40af;
--gray2: #888888; --blue-d: #1e3a8a;
--radius: 12px; --gray1: #f5f5f5;
--gray2: #e5e5e5;
--gray3: #737373;
--gray4: #404040;
--radius: 0;
} }
html { scroll-behavior: auto; } html { scroll-behavior: smooth; }
body { body {
font-family: 'Inter', system-ui, sans-serif; font-family: 'Inter', system-ui, sans-serif;
background: var(--black); background: var(--white);
color: var(--white); color: var(--black);
line-height: 1.5; line-height: 1.6;
overflow: hidden;
height: 100vh;
width: 100vw;
} }
a { color: inherit; text-decoration: none; } a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; } img { max-width: 100%; display: block; }
/* ── Layout ── */ /* ── Layout ── */
.app { .container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
display: grid;
grid-template-columns: 260px 1fr 280px;
grid-template-rows: 72px 1fr 56px;
height: 100vh;
gap: 16px;
padding: 16px;
}
/* ── Header ── */ /* ── Header ── */
.header { .header {
grid-column: 1 / -1; border-bottom: 3px double var(--black);
padding: 16px 0;
margin-bottom: 32px;
}
.header-inner {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; align-items: flex-start;
padding: 0 8px; gap: 24px;
} }
.brand { .brand {
display: flex; font-family: 'Playfair Display', serif;
align-items: center; font-size: 2rem;
gap: 10px; font-weight: 900;
font-weight: 700; line-height: 1.1;
font-size: 1.05rem;
}
.flag { font-size: 1.4rem; }
.lang-toggle {
display: flex;
background: var(--glass);
border-radius: 50px;
padding: 4px;
gap: 4px;
border: 1px solid rgba(255,255,255,.06);
}
.lang-btn {
padding: 6px 14px;
font-size: .8rem;
font-weight: 600;
border-radius: 50px;
border: none;
background: transparent;
color: var(--gray2);
cursor: pointer;
transition: all .2s;
}
.lang-btn.active {
background: var(--amber);
color: var(--black); color: var(--black);
flex: 1;
} }
.mission {
/* ── Sidebar Left ── Main Menu ── */
.sidebar {
display: flex;
flex-direction: column;
gap: 8px;
}
.menu-title {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--gray2);
margin-bottom: 4px;
}
.menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--glass);
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,.06);
font-size: .9rem;
font-weight: 500;
transition: all .2s;
}
.menu-item:hover {
border-color: var(--amber);
}
.menu-item.active {
background: rgba(255,179,0,.1);
border-color: var(--amber);
color: var(--amber);
}
.menu-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem; font-size: 1rem;
} font-weight: 500;
.menu-item[data-status="active"] { border-color: var(--amber); } color: var(--gray4);
.menu-item[data-status="disabled"] { opacity: .5; cursor: not-allowed; } max-width: 480px;
.menu-item[data-status="gap"] { line-height: 1.5;
background: transparent;
border: none;
font-size: .75rem;
color: var(--gray2);
}
.menu-item[data-status="gap"]::before {
content: '';
display: block;
width: 100%;
height: 1px;
background: rgba(255,255,255,.06);
margin-bottom: 6px;
} }
/* ── Main Content ── */ /* ── Main Content ── */
.main { .main-grid {
display: flex; display: grid;
flex-direction: column; grid-template-columns: 1.5fr 1fr;
background: var(--glass); gap: 32px;
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,.06);
overflow: hidden;
position: relative;
}
.main-header {
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,.06);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.main-title {
font-size: 1.2rem;
font-weight: 700;
}
.status-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(42,171,238,.15);
border: 1px solid rgba(42,171,238,.3);
border-radius: 50px;
font-size: .75rem;
font-weight: 600;
color: var(--tg);
}
.status-dot {
width: 8px;
height: 8px;
background: var(--tg);
border-radius: 50%;
} }
.content-scroll { /* ── News Column ── */
flex: 1; .news-col h2 {
overflow-y: auto; font-family: 'Playfair Display', serif;
padding: 20px; font-size: 2.5rem;
scrollbar-width: thin; font-weight: 900;
scrollbar-color: rgba(255,255,255,.15) transparent; margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 2px solid var(--black);
} }
.content-scroll::-webkit-scrollbar { width: 6px; }
.content-scroll::-webkit-scrollbar-track { background: transparent; }
.content-scroll::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.15);
border-radius: 3px;
}
/* ── Cards ── */
.card {
background: rgba(255,255,255,.03);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 16px;
border: 1px solid rgba(255,255,255,.06);
transition: border-color .2s;
}
.card:hover { border-color: var(--amber); }
.card h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--white);
}
.card p {
font-size: .9rem;
color: var(--gray1);
line-height: 1.6;
}
.card .cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 8px 14px;
background: var(--tg);
color: var(--white);
border-radius: 50px;
font-size: .85rem;
font-weight: 600;
transition: background .2s;
}
.card .cta:hover { background: var(--tg); opacity: .9; }
/* ── Login Panel ── */
.login-panel {
background: linear-gradient(135deg, rgba(255,179,0,.08), rgba(255,255,255,.02));
border: 1px solid var(--amber);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 16px;
}
.login-panel h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 12px;
color: var(--amber);
}
.input-group {
margin-bottom: 12px;
}
.input-group label {
display: block;
font-size: .78rem;
color: var(--gray2);
margin-bottom: 6px;
}
.input-group input {
width: 100%;
padding: 10px 12px;
background: var(--black);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
color: var(--white);
font-size: .9rem;
outline: none;
transition: border-color .2s;
}
.input-group input:focus {
border-color: var(--amber);
}
.btn-primary {
width: 100%;
padding: 10px;
background: var(--amber);
color: var(--black);
border: none;
border-radius: 8px;
font-size: .9rem;
font-weight: 700;
cursor: pointer;
transition: all .2s;
}
.btn-primary:hover {
background: #ffd633;
transform: translateY(-1px);
}
/* ── News Item ── */
.news-item { .news-item {
display: flex; margin-bottom: 32px;
gap: 14px; padding-bottom: 24px;
padding-bottom: 14px; border-bottom: 1px solid var(--gray2);
border-bottom: 1px solid rgba(255,255,255,.06);
} }
.news-item:last-child { border-bottom: none; } .news-item:last-child { border-bottom: none; }
.news-date { .news-date {
flex-shrink: 0; font-size: .8rem;
font-size: .75rem; color: var(--gray3);
color: var(--amber); text-transform: uppercase;
font-weight: 600; letter-spacing: .05em;
min-width: 60px; margin-bottom: 8px;
} }
.news-text p { .news-item h3 {
font-size: .86rem; font-family: 'Playfair Display', serif;
color: var(--gray1); font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.2;
}
.news-item p {
font-size: 1rem;
color: var(--gray4);
line-height: 1.6; line-height: 1.6;
margin-bottom: 12px;
} }
.news-tag { .news-tag {
display: inline-block; display: inline-block;
padding: 2px 8px; font-size: .75rem;
background: rgba(255,255,255,.06); font-weight: 600;
border-radius: 4px; color: var(--blue);
font-size: .68rem; text-transform: uppercase;
color: var(--gray2); letter-spacing: .04em;
margin-top: 8px; border: 1px solid var(--blue);
padding: 4px 8px;
border-radius: 0;
} }
/* ── Sidebar Right ── Quick Actions ── */ /* ── Sidebar Column ── */
.quick-actions { .sidebar-col {
display: flex; position: sticky;
flex-direction: column; top: 20px;
gap: 12px; height: fit-content;
} }
.action-btn { .panel {
display: flex; background: var(--gray1);
align-items: center; padding: 24px;
gap: 12px; margin-bottom: 24px;
padding: 14px; border: 2px solid var(--black);
background: var(--glass); }
border-radius: var(--radius); .panel h3 {
border: 1px solid rgba(255,255,255,.06); font-family: 'Playfair Display', serif;
font-size: .9rem; font-size: 1.4rem;
font-weight: 900;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid var(--black);
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: .85rem;
font-weight: 600; font-weight: 600;
transition: all .2s; margin-bottom: 6px;
} }
.action-btn:hover { .form-group input {
border-color: var(--amber); width: 100%;
transform: translateX(4px); padding: 10px 12px;
} background: var(--white);
.action-icon { border: 1px solid var(--black);
width: 28px;
height: 28px;
background: rgba(42,171,238,.15);
border: 1px solid rgba(42,171,238,.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem; font-size: 1rem;
color: var(--tg); outline: none;
} }
.form-group input:focus {
border-color: var(--blue);
box-shadow: inset 0 0 0 2px var(--blue);
}
.btn-primary {
width: 100%;
padding: 12px;
background: var(--black);
color: var(--white);
border: none;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.btn-primary:hover { background: var(--blue); }
.btn-outline {
width: 100%;
padding: 12px;
background: transparent;
border: 2px solid var(--black);
color: var(--black);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-top: 8px;
}
.btn-outline:hover { background: var(--blue); color: var(--white); }
/* ── Footer ── */ /* ── Footer ── */
.footer { .footer {
grid-column: 1 / -1; margin-top: 64px;
display: flex; border-top: 3px double var(--black);
align-items: center; padding-top: 24px;
justify-content: space-between; font-size: .85rem;
padding: 0 8px; color: var(--gray4);
font-size: .78rem;
color: var(--gray2);
} }
.footer-links { .footer-links {
display: flex; display: flex;
gap: 16px; gap: 20px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.footer-links a { color: var(--blue); }
.copyright {
text-align: center;
color: var(--gray3);
} }
.footer-links a { opacity: .7; transition: opacity .2s; }
.footer-links a:hover { opacity: 1; }
/* ── Language Variants ── */
[data-lang="de"] .hide-de { display: none; }
[data-lang="en"] .hide-en { display: none; }
/* ── Responsive ── */ /* ── Responsive ── */
@media (max-width: 960px) { @media (max-width: 768px) {
.app { .brand { font-size: 1.5rem; }
grid-template-columns: 200px 1fr; .mission { display: none; }
grid-template-rows: 72px 1fr 220px 56px; .main-grid { grid-template-columns: 1fr; }
} .sidebar-col { position: static; }
.sidebar { display: none; }
.quick-actions { display: none; }
.main { grid-column: 2; grid-row: 2 / 4; }
}
@media (max-width: 720px) {
.app {
grid-template-columns: 1fr;
grid-template-rows: 64px 1fr 360px 48px;
}
.main { grid-column: 1; grid-row: 2 / 4; }
.brand span:last-child { display: none; }
} }
</style> </style>
</head> </head>
<body data-lang="de"> <body>
<div class="app">
<!-- Header --> <!-- Header -->
<header class="header"> <header class="header">
<div class="brand"> <div class="container header-inner">
<span class="flag">🇵🇾</span> <div class="brand">Paraguay SRL LLC</div>
<span class="hide-de">Paraguay SRL LLC</span> <div class="mission">
<span class="hide-en">Paraguay SRL LLC</span> <span class="hide-de">Deutsche / Amerikaner in Paraguay tauschen Erfahrungen zu Banken, Steuern, Recht für LLC/SRL.</span>
<span class="hide-en">German / American expats in Paraguay share experiences on banking, taxes, legal matters for LLC/SRL.</span>
</div> </div>
<div class="lang-toggle">
<button class="lang-btn active" data-lang="de">DE</button>
<button class="lang-btn" data-lang="en">EN</button>
</div> </div>
</header> </header>
<!-- Left Sidebar: Menu -->
<aside class="sidebar">
<div>
<div class="menu-title">Menu</div>
<a href="#news" class="menu-item active" data-status="active">
<span class="menu-icon">📰</span>
<span class="hide-de">Neuigkeiten</span>
<span class="hide-en">News</span>
</a>
<a href="#community" class="menu-item" data-status="active">
<span class="menu-icon">👥</span>
<span class="hide-de">Community</span>
<span class="hide-en">Community</span>
</a>
<a href="#wiki" class="menu-item" data-status="active">
<span class="menu-icon">📖</span>
<span class="hide-de">Wiki</span>
<span class="hide-en">Wiki</span>
</a>
<div class="menu-item" data-status="gap"></div>
<a href="#banking" class="menu-item" data-status="active">
<span class="menu-icon">🏦</span>
<span class="hide-de">Banking</span>
<span class="hide-en">Banking</span>
</a>
<a href="#tax" class="menu-item" data-status="active">
<span class="menu-icon">🧾</span>
<span class="hide-de">Steuern</span>
<span class="hide-en">Taxes</span>
</a>
<a href="#legal" class="menu-item" data-status="active">
<span class="menu-icon">⚖️</span>
<span class="hide-de">Recht</span>
<span class="hide-en">Legal</span>
</a>
</div>
</aside>
<!-- Main Content --> <!-- Main Content -->
<main class="main"> <main class="container">
<header class="main-header"> <div class="main-grid">
<div class="main-title"> <!-- News Column -->
<span class="hide-de">Herzlich willkommen</span> <div class="news-col">
<span class="hide-en">Welcome</span> <h2 class="hide-de">Aktuelle Erfahrungsbereichte</h2>
</div> <h2 class="hide-en">Latest Experience Reports</h2>
<div class="status-badge">
<span class="status-dot"></span>
<span class="hide-de">Telegram: 2.000+ Mitglieder</span>
<span class="hide-en">Telegram: 2,000+ members</span>
</div>
</header>
<div class="content-scroll"> <article class="news-item">
<!-- Wiki Login --> <div class="news-date">02.09.2026</div>
<div class="login-panel"> <h3 class="hide-de">Neue Bankpartner: Banco Atlántida & BISA</h3>
<h3><span class="hide-de">Wiki Login</span><span class="hide-en">Wiki Login</span></h3> <h3 class="hide-en">New Banking Partners: Banco Atlántida & BISA</h3>
<p class="hide-de">Melden Sie sich an, um Zugriff auf das vollständige Wiki mit allen Informationen über LLC/SRL-Gründung, Steuern, Banking und Recht in Paraguay zu erhalten.</p>
<p class="hide-en">Login to access the full wiki with all information on LLC/SRL formation, taxes, banking, and legal matters in Paraguay.</p>
<form id="wiki-login">
<div class="input-group">
<label for="email"><span class="hide-de">E-Mail</span><span class="hide-en">Email</span></label>
<input type="email" id="email" required placeholder="name@example.com" />
</div>
<div class="input-group">
<label for="password"><span class="hide-de">Passwort</span><span class="hide-en">Password</span></label>
<input type="password" id="password" required placeholder="••••••••" />
</div>
<button type="submit" class="btn-primary">
<span class="hide-de">Zum Wiki anmelden</span>
<span class="hide-en">Login to Wiki</span>
</button>
</form>
</div>
<!-- News Section -->
<div id="news">
<h3 class="hide-de">Aktuelle Neuigkeiten</h3>
<h3 class="hide-en">Latest News</h3>
<div class="card">
<h3><span class="hide-de">Neue Bankpartner</span><span class="hide-en">New Banking Partners</span></h3>
<p class="hide-de">Wir haben zwei neue Banken in unserer Community-Liste hinzugefügt: Banco Atlántida und Banco BISA. Erfahre mehr über die Anforderungen für Nicht-Residenten in unserem Wiki.</p> <p class="hide-de">Wir haben zwei neue Banken in unserer Community-Liste hinzugefügt: Banco Atlántida und Banco BISA. Erfahre mehr über die Anforderungen für Nicht-Residenten in unserem Wiki.</p>
<p class="hide-en">We've added two new banks to our community list: Banco Atlántida and Banco BISA. Learn about requirements for non-residents in our wiki.</p> <p class="hide-en">We've added two new banks to our community list: Banco Atlántida and Banco BISA. Learn about requirements for non-residents in our wiki.</p>
<span class="news-tag hide-de">Banking</span><span class="news-tag hide-en">Banking</span> <span class="news-tag hide-de">Banking</span><span class="news-tag hide-en">Banking</span>
</div> </article>
<div class="card"> <article class="news-item">
<h3><span class="hide-de">Steuersatzänderung 2026</span><span class="hide-en">Tax Rate Update 2026</span></h3> <div class="news-date">28.08.2026</div>
<h3 class="hide-de">Steuersatz bleibt unverändert 2026</h3>
<h3 class="hide-en">Tax Rate Unchanged for 2026</h3>
<p class="hide-de">Paraguay behält seinen Territorialsteuersatz bei — 10% für lokales Einkommen, 0% für ausländisches Einkommen. Die aktuelle Debatte im Kongress betrifft nur die Einfuhrsteuern.</p> <p class="hide-de">Paraguay behält seinen Territorialsteuersatz bei — 10% für lokales Einkommen, 0% für ausländisches Einkommen. Die aktuelle Debatte im Kongress betrifft nur die Einfuhrsteuern.</p>
<p class="hide-en">Paraguay maintains its territorial tax rate — 10% for local income, 0% for foreign income. Current congressional debate only affects import tariffs.</p> <p class="hide-en">Paraguay maintains its territorial tax rate — 10% for local income, 0% for foreign income. Current congressional debate only affects import tariffs.</p>
<span class="news-tag hide-de">Steuern</span><span class="news-tag hide-en">Taxes</span> <span class="news-tag hide-de">Steuern</span><span class="news-tag hide-en">Taxes</span>
</div> </article>
<div class="card"> <article class="news-item">
<h3><span class="hide-de">Neuer SRL-Checklist-Guide</span><span class="hide-en">New SRL Checklist Guide</span></h3> <div class="news-date">15.08.2026</div>
<h3 class="hide-de">SRL-Checklist-Guide aktualisiert</h3>
<h3 class="hide-en">SRL Checklist Guide Updated</h3>
<p class="hide-de">Unsere Community-Mitglieder haben eine detaillierte Checklist für die SRL-Gründung erstellt — von der Notariatsbevollmächtigung bis zur RUC-Registrierung.</p> <p class="hide-de">Unsere Community-Mitglieder haben eine detaillierte Checklist für die SRL-Gründung erstellt — von der Notariatsbevollmächtigung bis zur RUC-Registrierung.</p>
<p class="hide-en">Our community members created a detailed SRL formation checklist — from notary power of attorney to RUC registration.</p> <p class="hide-en">Our community members created a detailed SRL formation checklist — from notary power of attorney to RUC registration.</p>
<a href="#wiki" class="cta"> <span class="news-tag hide-de">Gründung</span><span class="news-tag hide-en">Formation</span>
<span class="hide-de">Zum Guide →</span> </article>
<span class="hide-en">To the guide →</span>
</a> <article class="news-item">
</div> <div class="news-date">10.08.2026</div>
<h3 class="hide-de">Banking: Erfahrungen mit fintech Lösungen</h3>
<h3 class="hide-en">Banking: Experiences with fintech solutions</h3>
<p class="hide-de">Mehrere Mitglieder haben erfolgreich Konten bei Wise Business, Payoneer und Mercury geöffnet. Unser Wiki enthält aktuelle Erfahrungsberichte.</p>
<p class="hide-en">Several members have successfully opened accounts with Wise Business, Payoneer, and Mercury. Our wiki contains current experience reports.</p>
<span class="news-tag hide-de">Banking</span><span class="news-tag hide-en">Banking</span>
</article>
</div> </div>
<!-- Community Info --> <!-- Sidebar: Login/Signup -->
<div id="community" style="display:none;"> <aside class="sidebar-col">
<h3 class="hide-de">Community</h3> <div class="panel">
<h3 class="hide-en">Community</h3> <h3 class="hide-de">Login / Registrierung</h3>
<div class="card"> <h3 class="hide-en">Login / Registration</h3>
<h3><span class="hide-de">Was dich erwartet</span><span class="hide-en">What to expect</span></h3> <form>
<p class="hide-de">Tägliche Diskussionen, geteilte Erfahrungen mit Banken, Steuerberatern und Anwälten in Paraguay, und ein Netzwerk von Unternehmern, die es bereits geschafft haben.</p> <div class="form-group">
<p class="hide-en">Daily discussions, shared experiences with Paraguayan banks, accountants and lawyers, and a network of entrepreneurs who've already done it.</p> <label for="email" class="hide-de">E-Mail</label>
<a href="#" class="cta"> <label for="email" class="hide-en">Email</label>
<span class="hide-de">Telegram beitreten</span> <input type="email" id="email" required placeholder="name@example.com" />
<span class="hide-en">Join Telegram</span>
</a>
</div> </div>
<div class="form-group">
<label for="password" class="hide-de">Passwort</label>
<label for="password" class="hide-en">Password</label>
<input type="password" id="password" required placeholder="••••••••" />
</div> </div>
<button type="submit" class="btn-primary hide-de">Anmelden</button>
<button type="submit" class="btn-primary hide-en">Login</button>
<button type="button" class="btn-outline hide-de">Noch nicht registriert? Registrieren</button>
<button type="button" class="btn-outline hide-en">Not registered yet? Register</button>
</form>
</div>
</aside>
</div> </div>
</main> </main>
<!-- Right Sidebar: Quick Actions -->
<aside class="quick-actions">
<a href="#" class="action-btn">
<span class="action-icon">📢</span>
<span class="hide-de">Telegram Kanal</span>
<span class="hide-en">Telegram Channel</span>
</a>
<a href="#wiki" class="action-btn">
<span class="action-icon">📚</span>
<span class="hide-de">Wiki durchsuchen</span>
<span class="hide-en">Search Wiki</span>
</a>
<a href="#" class="action-btn">
<span class="action-icon">❓</span>
<span class="hide-de">Hilfe & FAQ</span>
<span class="hide-en">Help & FAQ</span>
</a>
<a href="#" class="action-btn">
<span class="action-icon">📧</span>
<span class="hide-de">Kontakt</span>
<span class="hide-en">Contact</span>
</a>
</aside>
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<div> <div class="container">
<span class="hide-de">© 2026 Paraguay SRL LLC Community</span>
<span class="hide-en">© 2026 Paraguay SRL LLC Community</span>
</div>
<div class="footer-links"> <div class="footer-links">
<a href="#" class="hide-de">Impressum</a> <a href="#" class="hide-de">Impressum</a>
<a href="#" class="hide-en">Imprint</a> <a href="#" class="hide-en">Imprint</a>
<a href="#" class="hide-de">Datenschutz</a> <a href="#" class="hide-de">Datenschutz</a>
<a href="#" class="hide-en">Privacy</a> <a href="#" class="hide-en">Privacy</a>
<a href="#" class="hide-de">Kontakt</a>
<a href="#" class="hide-en">Contact</a>
</div>
<p class="copyright hide-de">© 2026 Paraguay SRL LLC Community</p>
<p class="copyright hide-en">© 2026 Paraguay SRL LLC Community</p>
</div> </div>
</footer> </footer>
</div>
<script>
// ── Language Switcher ──
document.querySelectorAll('.lang-btn').forEach(btn => {
btn.addEventListener('click', () => {
const lang = btn.dataset.lang;
document.body.dataset.lang = lang;
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
// ── Wiki Login Form ──
document.getElementById('wiki-login').addEventListener('submit', (e) => {
e.preventDefault();
const btn = e.target.querySelector('.btn-primary');
const originalText = btn.textContent;
btn.textContent = '...';
btn.disabled = true;
setTimeout(() => {
alert(lang === 'de' ? 'Login-Funktionalität muss im Wiki implementiert werden.' : 'Login functionality must be implemented in the wiki.');
btn.textContent = originalText;
btn.disabled = false;
}, 800);
});
// ── Menu Navigation ──
document.querySelectorAll('.menu-item').forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
const href = item.getAttribute('href');
if (href === '#news') {
document.getElementById('news').style.display = 'block';
document.getElementById('community').style.display = 'none';
} else if (href === '#community') {
document.getElementById('news').style.display = 'none';
document.getElementById('community').style.display = 'block';
} else if (href === '#wiki') {
// Trigger wiki login or open wiki
document.getElementById('wiki-login').scrollIntoView({ behavior: 'smooth' });
}
document.querySelectorAll('.menu-item').forEach(m => m.classList.remove('active'));
item.classList.add('active');
});
});
</script>
</body> </body>
</html> </html>