Split project into 3 files: index.html, css/styles.css, js/main.js
This commit is contained in:
Kato
@@ -0,0 +1,96 @@
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--black: #000000;
|
||||
--white: #ffffff;
|
||||
--blue: #1e40af;
|
||||
--gray1: #f3f4f6;
|
||||
--gray2: #e5e7eb;
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
line-height: 1.6;
|
||||
}
|
||||
a { color: var(--blue); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.brand { font-size: 1.75rem; font-weight: 800; }
|
||||
.lang-select {
|
||||
display: flex; gap: 8px; background: var(--gray1);
|
||||
padding: 4px; border-radius: 8px;
|
||||
}
|
||||
.lang-btn {
|
||||
padding: 6px 14px; font-size: .85rem; font-weight: 600;
|
||||
border: none; border-radius: 6px; background: transparent;
|
||||
cursor: pointer; color: var(--black); transition: all .2s;
|
||||
}
|
||||
.lang-btn.active { background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
|
||||
|
||||
.intro { padding: 48px 0 32px; text-align: center; }
|
||||
.intro h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
|
||||
.intro p { font-size: 1.1rem; color: #4b5563; max-width: 600px; margin: 0 auto; }
|
||||
|
||||
.main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
|
||||
.news-col h2 { font-size: 1.75rem; font-weight: 800; border-bottom: 2px solid var(--black); padding-bottom: 12px; margin-bottom: 24px; }
|
||||
.news-item { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gray2); }
|
||||
.news-date { font-size: .75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
|
||||
.news-item h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; line-height: 1.3; }
|
||||
.news-item p { font-size: 1rem; color: #4b5563; line-height: 1.6; }
|
||||
.news-tag {
|
||||
display: inline-block; font-size: .75rem; font-weight: 600;
|
||||
color: var(--blue); text-transform: uppercase; letter-spacing: .04em;
|
||||
border: 1px solid var(--blue); padding: 4px 10px; border-radius: 20px; margin-top: 10px;
|
||||
}
|
||||
|
||||
.sidebar-col { position: sticky; top: 20px; height: fit-content; }
|
||||
.login-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); }
|
||||
.newsletter-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); }
|
||||
.notebook { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
|
||||
.newsletter-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
|
||||
.notebook .tabs { display: flex; border-bottom: 2px solid var(--gray2); }
|
||||
.notebook .tab { flex: 1; padding: 14px; text-align: center; font-weight: 600; cursor: pointer; border: none; background: #f9fafb; color: #6b7280; }
|
||||
.notebook .tab.active { background: var(--white); color: var(--black); border-bottom: 3px solid var(--blue); }
|
||||
.notebook .tab-content { padding: 24px; min-height: 200px; }
|
||||
.notebook .hidden { display: none; }
|
||||
.login-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
|
||||
.form-group input {
|
||||
width: 100%; padding: 12px; border: 1px solid var(--gray2); border-radius: 8px;
|
||||
font-size: 1rem; outline: none; transition: border-color .2s;
|
||||
}
|
||||
.form-group input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
|
||||
.btn-primary { width: 100%; padding: 12px; background: var(--black); color: var(--white); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .2s; }
|
||||
.btn-primary:hover { background: var(--blue); }
|
||||
.btn-secondary { width: 100%; padding: 10px; background: var(--gray1); border: 1px solid var(--gray2); border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; margin-top: 12px; }
|
||||
.btn-secondary:hover { background: #e5e7eb; }
|
||||
.hidden { display: none; }
|
||||
.success-msg { padding: 12px; background: #d1fae5; border: 1px solid #34d399; border-radius: 8px; color: #065f46; margin-bottom: 16px; text-align: center; }
|
||||
|
||||
.footer { margin-top: 64px; padding-top: 32px; border-top: 2px solid var(--black); text-align: center; font-size: 1rem; }
|
||||
.footer a { font-weight: 600; text-decoration: none; }
|
||||
.footer a:hover { text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-grid { grid-template-columns: 1fr; }
|
||||
.sidebar-col { position: static; }
|
||||
.brand { font-size: 1.4rem; }
|
||||
.header { flex-direction: column; gap: 12px; }
|
||||
}
|
||||
|
||||
.hide-de { display: none; }
|
||||
.hide-en { display: none; }
|
||||
[data-lang="de"] .hide-de { display: block; }
|
||||
[data-lang="en"] .hide-en { display: block; }
|
||||
[data-lang="de"] .hide-en { display: none; }
|
||||
[data-lang="en"] .hide-de { display: none; }
|
||||
+15
-356
@@ -8,113 +8,14 @@
|
||||
<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@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--black: #000000;
|
||||
--white: #ffffff;
|
||||
--blue: #1e40af;
|
||||
--gray1: #f3f4f6;
|
||||
--gray2: #e5e7eb;
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
line-height: 1.6;
|
||||
}
|
||||
a { color: var(--blue); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.brand { font-size: 1.75rem; font-weight: 800; }
|
||||
.lang-select {
|
||||
display: flex; gap: 8px; background: var(--gray1);
|
||||
padding: 4px; border-radius: 8px;
|
||||
}
|
||||
.lang-btn {
|
||||
padding: 6px 14px; font-size: .85rem; font-weight: 600;
|
||||
border: none; border-radius: 6px; background: transparent;
|
||||
cursor: pointer; color: var(--black); transition: all .2s;
|
||||
}
|
||||
.lang-btn.active { background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
|
||||
|
||||
.intro { padding: 48px 0 32px; text-align: center; }
|
||||
.intro h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
|
||||
.intro p { font-size: 1.1rem; color: #4b5563; max-width: 600px; margin: 0 auto; }
|
||||
|
||||
|
||||
|
||||
.main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
|
||||
.news-col h2 { font-size: 1.75rem; font-weight: 800; border-bottom: 2px solid var(--black); padding-bottom: 12px; margin-bottom: 24px; }
|
||||
.news-item { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gray2); }
|
||||
.news-date { font-size: .75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
|
||||
.news-item h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; line-height: 1.3; }
|
||||
.news-item p { font-size: 1rem; color: #4b5563; line-height: 1.6; }
|
||||
.news-tag {
|
||||
display: inline-block; font-size: .75rem; font-weight: 600;
|
||||
color: var(--blue); text-transform: uppercase; letter-spacing: .04em;
|
||||
border: 1px solid var(--blue); padding: 4px 10px; border-radius: 20px; margin-top: 10px;
|
||||
}
|
||||
|
||||
.sidebar-col { position: sticky; top: 20px; height: fit-content; }
|
||||
.login-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); }
|
||||
.newsletter-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); }
|
||||
.notebook { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
|
||||
.newsletter-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
|
||||
.notebook .tabs { display: flex; border-bottom: 2px solid var(--gray2); }
|
||||
.notebook .tab { flex: 1; padding: 14px; text-align: center; font-weight: 600; cursor: pointer; border: none; background: #f9fafb; color: #6b7280; }
|
||||
.notebook .tab.active { background: var(--white); color: var(--black); border-bottom: 3px solid var(--blue); }
|
||||
.notebook .tab-content { padding: 24px; min-height: 200px; }
|
||||
.notebook .hidden { display: none; }
|
||||
.login-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
|
||||
.form-group input {
|
||||
width: 100%; padding: 12px; border: 1px solid var(--gray2); border-radius: 8px;
|
||||
font-size: 1rem; outline: none; transition: border-color .2s;
|
||||
}
|
||||
.form-group input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
|
||||
.btn-primary { width: 100%; padding: 12px; background: var(--black); color: var(--white); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .2s; }
|
||||
.btn-primary:hover { background: var(--blue); }
|
||||
.btn-secondary { width: 100%; padding: 10px; background: var(--gray1); border: 1px solid var(--gray2); border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; margin-top: 12px; }
|
||||
.btn-secondary:hover { background: #e5e7eb; }
|
||||
.hidden { display: none; }
|
||||
.success-msg { padding: 12px; background: #d1fae5; border: 1px solid #34d399; border-radius: 8px; color: #065f46; margin-bottom: 16px; text-align: center; }
|
||||
|
||||
.footer { margin-top: 64px; padding-top: 32px; border-top: 2px solid var(--black); text-align: center; font-size: 1rem; }
|
||||
.footer a { font-weight: 600; text-decoration: none; }
|
||||
.footer a:hover { text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-grid { grid-template-columns: 1fr; }
|
||||
.sidebar-col { position: static; }
|
||||
.brand { font-size: 1.4rem; }
|
||||
.header { flex-direction: column; gap: 12px; }
|
||||
}
|
||||
|
||||
.hide-de { display: none; }
|
||||
.hide-en { display: none; }
|
||||
[data-lang="de"] .hide-de { display: block; }
|
||||
[data-lang="en"] .hide-en { display: block; }
|
||||
[data-lang="de"] .hide-en { display: none; }
|
||||
[data-lang="en"] .hide-de { display: none; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
<body data-lang="de">
|
||||
|
||||
<header class="header">
|
||||
<div class="brand">
|
||||
Paraguay LLC & SRL – Austausch & Community
|
||||
<div class="lang-select" style="margin-top: 8px;">
|
||||
<div class="lang-select">
|
||||
<button class="lang-btn active" data-lang="de">DE</button>
|
||||
<button class="lang-btn" data-lang="en">EN</button>
|
||||
</div>
|
||||
@@ -126,65 +27,27 @@
|
||||
<p class="hide-en">Welcome to the Paraguay LLC & SRL group! This group serves as an exchange platform for people who run or are engaged with an LLC or SRL in Paraguay.</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<main class="container" style="padding-top: 32px;">
|
||||
<div class="main-grid">
|
||||
<div class="news-col">
|
||||
<h2 class="hide-de">Über den Channel</h2>
|
||||
<h2 class="hide-en">About the Channel</h2>
|
||||
|
||||
<p class="hide-de">
|
||||
Willkommen in der Paraguay SRL LLC Community! Wir sind eine engagierte Gruppe von deutschen und amerikanischen Expats, die in Paraguay eine LLC oder SRL betreiben und sich darauf freuen ihre Erfahrungen zu teilen.
|
||||
</p>
|
||||
<p class="hide-en">
|
||||
Welcome to the Paraguay SRL LLC community! We are a dedicated group of German and American expats running an LLC or SRL in Paraguay and eager to share our experiences.
|
||||
</p>
|
||||
|
||||
<p class="hide-de">Willkommen in der Paraguay SRL LLC Community! Wir sind eine engagierte Gruppe von deutschen und amerikanischen Expats, die in Paraguay eine LLC oder SRL betreiben und sich darauf freuen ihre Erfahrungen zu teilen.</p>
|
||||
<p class="hide-en">Welcome to the Paraguay SRL LLC community! We are a dedicated group of German and American expats running an LLC or SRL in Paraguay and eager to share our experiences.</p>
|
||||
<h3 class="hide-de">Unsere Themen</h3>
|
||||
<h3 class="hide-en">Our Topics</h3>
|
||||
<ul class="hide-de">
|
||||
<li>Banken & Zahlungsverkehr</li>
|
||||
<li>Rechtliches & Gesellschaftsrecht</li>
|
||||
<li>Steuern & Buchhaltung</li>
|
||||
</ul>
|
||||
<ul class="hide-en">
|
||||
<li>Banking & Payments</li>
|
||||
<li>Legal & Corporate Law</li>
|
||||
<li>Taxes & Accounting</li>
|
||||
</ul>
|
||||
|
||||
<p class="hide-de">
|
||||
Hier tauschen wir echte Erfahrungen aus – von der Gründung über das Banking bis hin zu Steuern und Recht. Gemeinsam lernen wir, was in Paraguay funktioniert.
|
||||
</p>
|
||||
<p class="hide-en">
|
||||
Here we exchange real experiences – from formation to banking to taxes and law. Together we learn what actually works in Paraguay.
|
||||
</p>
|
||||
|
||||
<ul class="hide-de"><li>Banken & Zahlungsverkehr</li><li>Rechtliches & Gesellschaftsrecht</li><li>Steuern & Buchhaltung</li></ul>
|
||||
<ul class="hide-en"><li>Banking & Payments</li><li>Legal & Corporate Law</li><li>Taxes & Accounting</li></ul>
|
||||
<p class="hide-de">Hier tauschen wir echte Erfahrungen aus – von der Gründung über das Banking bis hin zu Steuern und Recht. Gemeinsam lernen wir, was in Paraguay funktioniert.</p>
|
||||
<p class="hide-en">Here we exchange real experiences – from formation to banking to taxes and law. Together we learn what actually works in Paraguay.</p>
|
||||
<h3 class="hide-de">Was wir nicht wollen</h3>
|
||||
<h3 class="hide-en">What we do NOT want</h3>
|
||||
<ul class="hide-de">
|
||||
<li>Geschäftsanbahnungen / Werbung / Akquise</li>
|
||||
<li>Vermittlungsangebote innerhalb der Gruppe</li>
|
||||
</ul>
|
||||
<ul class="hide-en">
|
||||
<li>Business solicitations / Advertising / Lead generation</li>
|
||||
<li>Referral offers within the group</li>
|
||||
</ul>
|
||||
|
||||
<p class="hide-de">
|
||||
<strong>🚫 Werbung, Akquise und Vermittlungsangebote bitte außerhalb der Gruppe bzw. offline. Der fachliche Erfahrungsaustausch steht im Vordergrund!</strong>
|
||||
</p>
|
||||
<p class="hide-en">
|
||||
<strong>🚫 Advertising, lead generation, and referral offers outside the group or offline. Professional experience exchange is our priority!</strong>
|
||||
</p>
|
||||
|
||||
<p class="hide-de">
|
||||
Die Website paraguay.odoo4projects.com bietet weiterführende Informationen: Wiki, Teilnehmerliste, Anmeldung für die Gruppe und mehr.
|
||||
</p>
|
||||
<p class="hide-en">
|
||||
The website paraguay.odoo4projects.com offers additional resources: wiki, member list, group registration and more.
|
||||
</p>
|
||||
<ul class="hide-de"><li>Geschäftsanbahnungen / Werbung / Akquise</li><li>Vermittlungsangebote innerhalb der Gruppe</li></ul>
|
||||
<ul class="hide-en"><li>Business solicitations / Advertising / Lead generation</li><li>Referral offers within the group</li></ul>
|
||||
<p class="hide-de"><strong>🚫 Werbung, Akquise und Vermittlungsangebote bitte außerhalb der Gruppe bzw. offline. Der fachliche Erfahrungsaustausch steht im Vordergrund!</strong></p>
|
||||
<p class="hide-en"><strong>🚫 Advertising, lead generation, and referral offers outside the group or offline. Professional experience exchange is our priority!</strong></p>
|
||||
<p class="hide-de">Die Website paraguay.odoo4projects.com bietet weiterführende Informationen: Wiki, Teilnehmerliste, Anmeldung für die Gruppe und mehr.</p>
|
||||
<p class="hide-en">The website paraguay.odoo4projects.com offers additional resources: wiki, member list, group registration and more.</p>
|
||||
<div style="margin-top: 24px; padding: 20px; background: var(--gray1); border-radius: 12px; text-align: center;">
|
||||
<p style="font-size: 1.2rem; font-weight: 700; margin-bottom: 12px;">
|
||||
<span class="hide-de">Melden Sie sich bei unserem Bot im Channel an</span>
|
||||
@@ -217,7 +80,6 @@
|
||||
<p class="hide-de" style="font-size: .85rem; color: #6b7280; margin-top: 12px;">Wir senden einen Code an Ihren Telegram-Account.</p>
|
||||
<p class="hide-en" style="font-size: .85rem; color: #6b7280; margin-top: 12px;">We'll send a code to your Telegram account.</p>
|
||||
</div>
|
||||
|
||||
<div id="login-step-2" class="hidden">
|
||||
<div class="form-group">
|
||||
<label for="verification-code" class="hide-de">Verifizierungscode</label>
|
||||
@@ -227,7 +89,6 @@
|
||||
<button type="button" class="btn-primary hide-de" onclick="verifyCode()">Anmelden</button>
|
||||
<button type="button" class="btn-primary hide-en" onclick="verifyCode()">Login</button>
|
||||
</div>
|
||||
|
||||
<div id="login-step-3" class="hidden">
|
||||
<div class="form-group">
|
||||
<label for="full-name" class="hide-de">Vollständiger Name</label>
|
||||
@@ -243,7 +104,6 @@
|
||||
<button type="button" class="btn-primary hide-en" onclick="submitLoginData()">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -304,207 +164,6 @@
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function checkSession() {
|
||||
const sessionid = getCookie('sessionid');
|
||||
console.log('checkSession: sessionid =', sessionid);
|
||||
const intro = document.getElementById('intro-section');
|
||||
const news = document.getElementById('news-col');
|
||||
const login = document.getElementById('login-panel');
|
||||
const newsletter = document.getElementById('newsletter-panel');
|
||||
const notebook = document.getElementById('notebook-panel');
|
||||
console.log('checkSession elements:', { intro, news, login, newsletter, notebook });
|
||||
if (sessionid) {
|
||||
if (intro) intro.classList.add('hidden');
|
||||
if (news) news.classList.add('hidden');
|
||||
if (login) login.classList.add('hidden');
|
||||
if (newsletter) newsletter.classList.add('hidden');
|
||||
if (notebook) notebook.classList.remove('hidden');
|
||||
} else {
|
||||
if (notebook) notebook.classList.add('hidden');
|
||||
if (login) login.classList.remove('hidden');
|
||||
// Newsletter is hidden by default in HTML (newsletter-panel hidden), show it when not logged in
|
||||
if (newsletter) newsletter.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login';
|
||||
|
||||
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=/';
|
||||
}
|
||||
|
||||
async function sendTelegramUser() {
|
||||
const user = document.getElementById('telegram-user').value.trim();
|
||||
if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; }
|
||||
const btn = document.querySelector('#login-step-1 .btn-primary');
|
||||
btn.disabled = true; btn.textContent = 'Verifizierung läuft...';
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username: user })
|
||||
});
|
||||
console.log('sendTelegramUser response:', response.status, await response.clone().json());
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('sendTelegramUser data:', data);
|
||||
if (data.sessionid) {
|
||||
setCookie('sessionid', data.sessionid, 1);
|
||||
}
|
||||
document.getElementById('login-step-1').classList.add('hidden');
|
||||
document.getElementById('login-step-2').classList.remove('hidden');
|
||||
alert('Code wurde an Ihren Telegram-Account gesendet.');
|
||||
} else {
|
||||
alert('Fehler bei der Verifizierung. Bitte versuchen Sie es erneut.');
|
||||
btn.disabled = false; btn.textContent = document.body.dataset.lang === 'de' ? 'Anmelden' : 'Login';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('sendTelegramUser error:', error);
|
||||
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
||||
btn.disabled = false; btn.textContent = document.body.dataset.lang === 'de' ? 'Anmelden' : 'Login';
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.notebook .tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.notebook .tab').forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
const tabName = tab.dataset.tab;
|
||||
document.querySelectorAll('.notebook .tab-content').forEach(c => c.classList.add('hidden'));
|
||||
document.getElementById('tab-' + tabName).classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
function getCookie(name) {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop().split(';').shift();
|
||||
return '';
|
||||
}
|
||||
|
||||
async function verifyCode() {
|
||||
const code = document.getElementById('verification-code').value.trim();
|
||||
if (!code) { alert('Bitte geben Sie den Verifizierungscode ein.'); return; }
|
||||
const btns = document.querySelectorAll('#login-step-2 .btn-primary');
|
||||
btns.forEach(b => b.disabled = true);
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: document.getElementById('telegram-user').value,
|
||||
code: code,
|
||||
sessionid: getCookie('sessionid')
|
||||
})
|
||||
});
|
||||
console.log('verifyCode response:', response.status, await response.clone().json());
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('verifyCode data:', data);
|
||||
if (data.sessionid) {
|
||||
setCookie('sessionid', data.sessionid, 1);
|
||||
// Show notebook and hide news after successful login
|
||||
document.getElementById('intro-section').classList.add('hidden');
|
||||
document.getElementById('news-col').classList.add('hidden');
|
||||
document.getElementById('login-panel').classList.add('hidden');
|
||||
document.getElementById('notebook-panel').classList.remove('hidden');
|
||||
}
|
||||
} else {
|
||||
alert('Ungültiger Code. Bitte versuchen Sie es erneut.');
|
||||
btns.forEach(b => b.disabled = false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('verifyCode error:', error);
|
||||
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
||||
btns.forEach(b => b.disabled = false);
|
||||
}
|
||||
}
|
||||
|
||||
const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter';
|
||||
|
||||
async function submitLoginData() {
|
||||
const name = document.getElementById('full-name').value.trim();
|
||||
const llc = document.getElementById('llc-name').value.trim();
|
||||
if (!name || !llc) { alert('Bitte geben Sie Name und LLC-Namen ein.'); return; }
|
||||
const btns = document.querySelectorAll('#login-step-3 .btn-primary');
|
||||
btns.forEach(b => b.disabled = true);
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: document.getElementById('telegram-user').value,
|
||||
name: name,
|
||||
llc: llc
|
||||
})
|
||||
});
|
||||
console.log('submitLoginData response:', response.status, await response.clone().json());
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('submitLoginData data:', data);
|
||||
if (data.sessionid) {
|
||||
setCookie('sessionid', data.sessionid, 1);
|
||||
}
|
||||
// Show notebook and hide news after successful login
|
||||
document.getElementById('intro-section').classList.add('hidden');
|
||||
document.getElementById('news-col').classList.add('hidden');
|
||||
document.getElementById('login-panel').classList.add('hidden');
|
||||
document.getElementById('notebook-panel').classList.remove('hidden');
|
||||
alert('Erfolgreich angemeldet! Willkommen!');
|
||||
} else {
|
||||
alert('Fehler bei der Anmeldung.');
|
||||
btns.forEach(b => b.disabled = false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('submitLoginData error:', error);
|
||||
alert('Fehler bei der Verbindung.');
|
||||
btns.forEach(b => b.disabled = false);
|
||||
}
|
||||
}
|
||||
|
||||
async function subscribeNewsletter() {
|
||||
const email = document.getElementById('newsletter-email').value.trim();
|
||||
if (!email) { alert('Bitte geben Sie eine E-Mail-Adresse ein.'); return; }
|
||||
const btn = document.querySelector('#newsletter-form .btn-primary');
|
||||
btn.disabled = true; btn.textContent = document.body.dataset.lang === 'de' ? 'Absenden...' : 'Submitting...';
|
||||
try {
|
||||
const response = await fetch(NEWSLETTER_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: email })
|
||||
});
|
||||
console.log('subscribeNewsletter response:', response.status, await response.clone().json());
|
||||
if (response.ok) {
|
||||
document.getElementById('newsletter-form').classList.add('hidden');
|
||||
document.getElementById('newsletter-success').classList.remove('hidden');
|
||||
} else {
|
||||
alert('Fehler bei der Anmeldung. Bitte versuchen Sie es erneut.');
|
||||
btn.disabled = false;
|
||||
btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('subscribeNewsletter error:', error);
|
||||
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
||||
btn.disabled = false;
|
||||
btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
checkSession();
|
||||
});
|
||||
</script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+196
@@ -0,0 +1,196 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
checkSession();
|
||||
});
|
||||
|
||||
function getCookie(name) {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop().split(';').shift();
|
||||
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=/';
|
||||
}
|
||||
|
||||
const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login';
|
||||
const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter';
|
||||
|
||||
function checkSession() {
|
||||
const sessionid = getCookie('sessionid');
|
||||
console.log('checkSession: sessionid =', sessionid);
|
||||
const intro = document.getElementById('intro-section');
|
||||
const news = document.getElementById('news-col');
|
||||
const login = document.getElementById('login-panel');
|
||||
const newsletter = document.getElementById('newsletter-panel');
|
||||
const notebook = document.getElementById('notebook-panel');
|
||||
console.log('checkSession elements:', { intro, news, login, newsletter, notebook });
|
||||
if (sessionid) {
|
||||
if (intro) intro.classList.add('hidden');
|
||||
if (news) news.classList.add('hidden');
|
||||
if (login) login.classList.add('hidden');
|
||||
if (newsletter) newsletter.classList.add('hidden');
|
||||
if (notebook) notebook.classList.remove('hidden');
|
||||
} else {
|
||||
if (notebook) notebook.classList.add('hidden');
|
||||
if (login) login.classList.remove('hidden');
|
||||
if (newsletter) newsletter.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.notebook .tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.notebook .tab').forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
const tabName = tab.dataset.tab;
|
||||
document.querySelectorAll('.notebook .tab-content').forEach(c => c.classList.add('hidden'));
|
||||
document.getElementById('tab-' + tabName).classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
async function sendTelegramUser() {
|
||||
const user = document.getElementById('telegram-user').value.trim();
|
||||
if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; }
|
||||
const btn = document.querySelector('#login-step-1 .btn-primary');
|
||||
btn.disabled = true; btn.textContent = 'Verifizierung läuft...';
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username: user })
|
||||
});
|
||||
console.log('sendTelegramUser response:', response.status, await response.clone().json());
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('sendTelegramUser data:', data);
|
||||
if (data.sessionid) {
|
||||
setCookie('sessionid', data.sessionid, 1);
|
||||
}
|
||||
document.getElementById('login-step-1').classList.add('hidden');
|
||||
document.getElementById('login-step-2').classList.remove('hidden');
|
||||
alert('Code wurde an Ihren Telegram-Account gesendet.');
|
||||
} else {
|
||||
alert('Fehler bei der Verifizierung. Bitte versuchen Sie es erneut.');
|
||||
btn.disabled = false; btn.textContent = document.body.dataset.lang === 'de' ? 'Anmelden' : 'Login';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('sendTelegramUser error:', error);
|
||||
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
||||
btn.disabled = false; btn.textContent = document.body.dataset.lang === 'de' ? 'Anmelden' : 'Login';
|
||||
}
|
||||
}
|
||||
|
||||
async function verifyCode() {
|
||||
const code = document.getElementById('verification-code').value.trim();
|
||||
if (!code) { alert('Bitte geben Sie den Verifizierungscode ein.'); return; }
|
||||
const btns = document.querySelectorAll('#login-step-2 .btn-primary');
|
||||
btns.forEach(b => b.disabled = true);
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: document.getElementById('telegram-user').value,
|
||||
code: code,
|
||||
sessionid: getCookie('sessionid')
|
||||
})
|
||||
});
|
||||
console.log('verifyCode response:', response.status, await response.clone().json());
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('verifyCode data:', data);
|
||||
if (data.sessionid) {
|
||||
setCookie('sessionid', data.sessionid, 1);
|
||||
document.getElementById('intro-section').classList.add('hidden');
|
||||
document.getElementById('news-col').classList.add('hidden');
|
||||
document.getElementById('login-panel').classList.add('hidden');
|
||||
document.getElementById('notebook-panel').classList.remove('hidden');
|
||||
}
|
||||
} else {
|
||||
alert('Ungültiger Code. Bitte versuchen Sie es erneut.');
|
||||
btns.forEach(b => b.disabled = false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('verifyCode error:', error);
|
||||
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
||||
btns.forEach(b => b.disabled = false);
|
||||
}
|
||||
}
|
||||
|
||||
async function submitLoginData() {
|
||||
const name = document.getElementById('full-name').value.trim();
|
||||
const llc = document.getElementById('llc-name').value.trim();
|
||||
if (!name || !llc) { alert('Bitte geben Sie Name und LLC-Namen ein.'); return; }
|
||||
const btns = document.querySelectorAll('#login-step-3 .btn-primary');
|
||||
btns.forEach(b => b.disabled = true);
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: document.getElementById('telegram-user').value,
|
||||
name: name,
|
||||
llc: llc
|
||||
})
|
||||
});
|
||||
console.log('submitLoginData response:', response.status, await response.clone().json());
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('submitLoginData data:', data);
|
||||
if (data.sessionid) {
|
||||
setCookie('sessionid', data.sessionid, 1);
|
||||
}
|
||||
document.getElementById('intro-section').classList.add('hidden');
|
||||
document.getElementById('news-col').classList.add('hidden');
|
||||
document.getElementById('login-panel').classList.add('hidden');
|
||||
document.getElementById('notebook-panel').classList.remove('hidden');
|
||||
alert('Erfolgreich angemeldet! Willkommen!');
|
||||
} else {
|
||||
alert('Fehler bei der Anmeldung.');
|
||||
btns.forEach(b => b.disabled = false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('submitLoginData error:', error);
|
||||
alert('Fehler bei der Verbindung.');
|
||||
btns.forEach(b => b.disabled = false);
|
||||
}
|
||||
}
|
||||
|
||||
async function subscribeNewsletter() {
|
||||
const email = document.getElementById('newsletter-email').value.trim();
|
||||
if (!email) { alert('Bitte geben Sie eine E-Mail-Adresse ein.'); return; }
|
||||
const btn = document.querySelector('#newsletter-form .btn-primary');
|
||||
btn.disabled = true; btn.textContent = document.body.dataset.lang === 'de' ? 'Absenden...' : 'Submitting...';
|
||||
try {
|
||||
const response = await fetch(NEWSLETTER_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: email })
|
||||
});
|
||||
console.log('subscribeNewsletter response:', response.status, await response.clone().json());
|
||||
if (response.ok) {
|
||||
document.getElementById('newsletter-form').classList.add('hidden');
|
||||
document.getElementById('newsletter-success').classList.remove('hidden');
|
||||
} else {
|
||||
alert('Fehler bei der Anmeldung. Bitte versuchen Sie es erneut.');
|
||||
btn.disabled = false;
|
||||
btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('subscribeNewsletter error:', error);
|
||||
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
||||
btn.disabled = false;
|
||||
btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user