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

Fix: API URL, rename buttons to Anmelden, remove duplicate Registrieren

Browse Source
This commit is contained in:
Kato
2026-09-02 14:35:15 +00:00
parent a1c08187a1
commit a9e0b9f8ca
1 changed files with 93 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+93 -266
View File
@@ -29,7 +29,6 @@
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; } .container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
/* Header */
.header { .header {
border-bottom: 1px solid var(--gray2); border-bottom: 1px solid var(--gray2);
padding: 24px 0; padding: 24px 0;
@@ -37,207 +36,61 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.brand { .brand { font-size: 1.75rem; font-weight: 800; }
font-size: 1.75rem;
font-weight: 800;
}
.lang-select { .lang-select {
display: flex; display: flex; gap: 8px; background: var(--gray1);
gap: 8px; padding: 4px; border-radius: 8px;
background: var(--gray1);
padding: 4px;
border-radius: 8px;
} }
.lang-btn { .lang-btn {
padding: 6px 14px; padding: 6px 14px; font-size: .85rem; font-weight: 600;
font-size: .85rem; border: none; border-radius: 6px; background: transparent;
font-weight: 600; cursor: pointer; color: var(--black); transition: all .2s;
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);
} }
.lang-btn.active { background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
/* Intro */ .intro { padding: 48px 0 32px; text-align: center; }
.intro { .intro h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
padding: 48px 0 32px; .intro p { font-size: 1.1rem; color: #4b5563; max-width: 600px; margin: 0 auto; }
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 Content */ .main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.main-grid { .news-col h2 { font-size: 1.75rem; font-weight: 800; border-bottom: 2px solid var(--black); padding-bottom: 12px; margin-bottom: 24px; }
display: grid; .news-item { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gray2); }
grid-template-columns: 2fr 1fr; .news-date { font-size: .75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
gap: 40px; .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-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 { .news-tag {
display: inline-block; display: inline-block; font-size: .75rem; font-weight: 600;
font-size: .75rem; color: var(--blue); text-transform: uppercase; letter-spacing: .04em;
font-weight: 600; border: 1px solid var(--blue); padding: 4px 10px; border-radius: 20px; margin-top: 10px;
color: var(--blue);
text-transform: uppercase;
letter-spacing: .04em;
border: 1px solid var(--blue);
padding: 4px 10px;
border-radius: 20px;
margin-top: 10px;
} }
/* Sidebar */
.sidebar-col { position: sticky; top: 20px; height: fit-content; } .sidebar-col { position: sticky; top: 20px; height: fit-content; }
.login-panel { .login-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); }
background: var(--gray1); .login-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
padding: 32px;
border-radius: 16px;
border: 1px solid var(--gray2);
}
.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 { margin-bottom: 16px; }
.form-group label { .form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
display: block;
font-size: .85rem;
font-weight: 600;
margin-bottom: 6px;
}
.form-group input { .form-group input {
width: 100%; width: 100%; padding: 12px; border: 1px solid var(--gray2); border-radius: 8px;
padding: 12px; font-size: 1rem; outline: none; transition: border-color .2s;
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;
} }
.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-primary:hover { background: var(--blue); }
.btn-outline { .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; }
width: 100%;
padding: 12px;
background: transparent;
border: 2px solid var(--black);
color: var(--black);
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-top: 12px;
}
.btn-outline:hover { background: var(--black); color: var(--white); }
.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; } .btn-secondary:hover { background: #e5e7eb; }
.hidden { display: none; } .hidden { display: none; }
.success-msg { .success-msg { padding: 12px; background: #d1fae5; border: 1px solid #34d399; border-radius: 8px; color: #065f46; margin-bottom: 16px; text-align: center; }
padding: 12px;
background: #d1fae5;
border: 1px solid #34d399;
border-radius: 8px;
color: #065f46;
margin-bottom: 16px;
text-align: center;
}
/* Footer */ .footer { margin-top: 64px; padding-top: 32px; border-top: 2px solid var(--black); text-align: center; font-size: 1rem; }
.footer { .footer a { font-weight: 600; text-decoration: none; }
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; } .footer a:hover { text-decoration: underline; }
/* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.main-grid { grid-template-columns: 1fr; } .main-grid { grid-template-columns: 1fr; }
.sidebar-col { position: static; } .sidebar-col { position: static; }
.brand { font-size: 1.4rem; } .brand { font-size: 1.4rem; }
} }
/* Language helper classes */
.hide-de { display: none; } .hide-de { display: none; }
.hide-en { display: none; } .hide-en { display: none; }
[data-lang="de"] .hide-de { display: block; } [data-lang="de"] .hide-de { display: block; }
@@ -248,7 +101,6 @@
</head> </head>
<body data-lang="de"> <body data-lang="de">
<!-- Header -->
<header class="header"> <header class="header">
<div class="brand">Paraguay SRL LLC</div> <div class="brand">Paraguay SRL LLC</div>
<div class="lang-select"> <div class="lang-select">
@@ -257,7 +109,6 @@
</div> </div>
</header> </header>
<!-- Intro -->
<section class="intro"> <section class="intro">
<h1 class="hide-de">Paraguay LLC & SRL – Austausch & Community</h1> <h1 class="hide-de">Paraguay LLC & SRL – Austausch & Community</h1>
<h1 class="hide-en">Paraguay LLC & SRL – Exchange & Community</h1> <h1 class="hide-en">Paraguay LLC & SRL – Exchange & Community</h1>
@@ -265,10 +116,8 @@
<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> <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> </section>
<!-- Main Content -->
<main class="container" style="padding-top: 32px;"> <main class="container" style="padding-top: 32px;">
<div class="main-grid"> <div class="main-grid">
<!-- News Column -->
<div class="news-col"> <div class="news-col">
<h2 class="hide-de">Aktuelle Erfahrungsbereichte</h2> <h2 class="hide-de">Aktuelle Erfahrungsbereichte</h2>
<h2 class="hide-en">Latest Experience Reports</h2> <h2 class="hide-en">Latest Experience Reports</h2>
@@ -304,11 +153,10 @@
</article> </article>
</div> </div>
<!-- Sidebar: Login -->
<aside class="sidebar-col"> <aside class="sidebar-col">
<div class="login-panel"> <div class="login-panel">
<h3 class="hide-de">Login / Registrierung</h3> <h3 class="hide-de">Anmeldung</h3>
<h3 class="hide-en">Login / Registration</h3> <h3 class="hide-en">Login</h3>
<form id="login-form"> <form id="login-form">
<div id="login-step-1"> <div id="login-step-1">
<div class="form-group"> <div class="form-group">
@@ -316,14 +164,10 @@
<label for="telegram-user" class="hide-en">Telegram Username</label> <label for="telegram-user" class="hide-en">Telegram Username</label>
<input type="text" id="telegram-user" required placeholder="@username" /> <input type="text" id="telegram-user" required placeholder="@username" />
</div> </div>
<button type="button" class="btn-primary hide-de" onclick="sendTelegramUser()">Nutzer verifizieren</button> <button type="button" class="btn-primary hide-de" onclick="sendTelegramUser()">Anmelden</button>
<button type="button" class="btn-primary hide-en" onclick="sendTelegramUser()">Verify user</button> <button type="button" class="btn-primary hide-en" onclick="sendTelegramUser()">Login</button>
<p class="hide-de" style="font-size: .85rem; color: #6b7280; margin-top: 12px;"> <p class="hide-de" style="font-size: .85rem; color: #6b7280; margin-top: 12px;">Wir senden einen Code an Ihren Telegram-Account.</p>
Wir senden einen Code an Ihren Telegram-Account. <p class="hide-en" style="font-size: .85rem; color: #6b7280; margin-top: 12px;">We'll send a code to your Telegram account.</p>
</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>
<div id="login-step-2" class="hidden"> <div id="login-step-2" class="hidden">
@@ -332,16 +176,11 @@
<label for="verification-code" class="hide-en">Verification code</label> <label for="verification-code" class="hide-en">Verification code</label>
<input type="text" id="verification-code" required placeholder="123456" /> <input type="text" id="verification-code" required placeholder="123456" />
</div> </div>
<button type="button" class="btn-primary hide-de" onclick="verifyCode()">Code verifizieren</button> <button type="button" class="btn-primary hide-de" onclick="verifyCode()">Anmelden</button>
<button type="button" class="btn-primary hide-en" onclick="verifyCode()">Verify code</button> <button type="button" class="btn-primary hide-en" onclick="verifyCode()">Login</button>
</div> </div>
<div id="register-form" class="hidden"> <div id="login-step-3" class="hidden">
<div class="form-group">
<label for="register-telegram-user" class="hide-de">Telegram Nutzername</label>
<label for="register-telegram-user" class="hide-en">Telegram Username</label>
<input type="text" id="register-telegram-user" required placeholder="@username" />
</div>
<div class="form-group"> <div class="form-group">
<label for="full-name" class="hide-de">Vollständiger Name</label> <label for="full-name" class="hide-de">Vollständiger Name</label>
<label for="full-name" class="hide-en">Full name</label> <label for="full-name" class="hide-en">Full name</label>
@@ -352,32 +191,18 @@
<label for="llc-name" class="hide-en">LLC / SRL name</label> <label for="llc-name" class="hide-en">LLC / SRL name</label>
<input type="text" id="llc-name" required placeholder="Paraguay LLC" /> <input type="text" id="llc-name" required placeholder="Paraguay LLC" />
</div> </div>
<button type="button" class="btn-primary hide-de" onclick="submitRegisterData()">Registrieren</button> <button type="button" class="btn-primary hide-de" onclick="submitLoginData()">Anmelden</button>
<button type="button" class="btn-primary hide-en" onclick="submitRegisterData()">Register</button> <button type="button" class="btn-primary hide-en" onclick="submitLoginData()">Login</button>
</div>
<div id="success-message" class="hidden">
<div class="success-msg hide-de">
Erfolgreich registriert! Sie werden weitergeleitet.
</div>
<div class="success-msg hide-en">
Successfully registered! You will be redirected.
</div>
</div> </div>
</form> </form>
<button type="button" class="btn-secondary hide-de" onclick="showRegisterForm()" style="margin-top: 12px;"> <button type="button" class="btn-secondary hide-de" onclick="showRegisterForm()">Registrieren</button>
Registrieren <button type="button" class="btn-secondary hide-en" onclick="showRegisterForm()">Register</button>
</button>
<button type="button" class="btn-secondary hide-en" onclick="showRegisterForm()" style="margin-top: 12px;">
Register
</button>
</div> </div>
</aside> </aside>
</div> </div>
</main> </main>
<!-- Footer -->
<footer class="footer"> <footer class="footer">
<p> <p>
<span class="hide-de">Sponsored by</span> <span class="hide-de">Sponsored by</span>
@@ -396,119 +221,121 @@
}); });
}); });
const API_URL = 'https://n8n.odoo4projects.com/webhook-test/paraguay/login'; const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login';
// Schritt 1: Telegram Nutzer senden
async function sendTelegramUser() { async function sendTelegramUser() {
const user = document.getElementById('telegram-user').value.trim(); const user = document.getElementById('telegram-user').value.trim();
if (!user) { if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; }
alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); const btn = document.querySelector('#login-step-1 .btn-primary');
return; btn.disabled = true; btn.textContent = 'Verifizierung läuft...';
}
document.querySelector('.btn-primary[type="button"]').disabled = true;
document.querySelector('.btn-primary[type="button"]').textContent = 'Verifizierung läuft...';
try { try {
const response = await fetch(API_URL, { const response = await fetch(API_URL, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: user }) body: JSON.stringify({ username: user })
}); });
if (response.ok) { if (response.ok) {
document.getElementById('login-step-1').classList.add('hidden'); document.getElementById('login-step-1').classList.add('hidden');
document.getElementById('login-step-2').classList.remove('hidden'); document.getElementById('login-step-2').classList.remove('hidden');
alert('Code wurde an Ihren Telegram-Account gesendet.'); alert('Code wurde an Ihren Telegram-Account gesendet.');
} else { } else {
alert('Fehler bei der Verifizierung. Bitte versuchen Sie es erneut.'); alert('Fehler bei der Verifizierung. Bitte versuchen Sie es erneut.');
document.querySelector('.btn-primary[type="button"]').disabled = false; btn.disabled = false; btn.textContent = document.body.dataset.lang === 'de' ? 'Anmelden' : 'Login';
document.querySelector('.btn-primary[type="button"]').textContent = document.body.dataset.lang === 'de' ? 'Nutzer verifizieren' : 'Verify user';
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.'); alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
document.querySelector('.btn-primary[type="button"]').disabled = false; btn.disabled = false; btn.textContent = document.body.dataset.lang === 'de' ? 'Anmelden' : 'Login';
document.querySelector('.btn-primary[type="button"]').textContent = document.body.dataset.lang === 'de' ? 'Nutzer verifizieren' : 'Verify user';
} }
} }
// Schritt 2: Code verifizieren
async function verifyCode() { async function verifyCode() {
const code = document.getElementById('verification-code').value.trim(); const code = document.getElementById('verification-code').value.trim();
if (!code) { if (!code) { alert('Bitte geben Sie den Verifizierungscode ein.'); return; }
alert('Bitte geben Sie den Verifizierungscode ein.'); const btns = document.querySelectorAll('#login-step-2 .btn-primary');
return; btns.forEach(b => b.disabled = true);
}
document.querySelectorAll('#login-step-2 .btn-primary').forEach(b => b.disabled = true);
try { try {
const response = await fetch(API_URL, { const response = await fetch(API_URL, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: document.getElementById('telegram-user').value, code: code }) body: JSON.stringify({ username: document.getElementById('telegram-user').value, code: code })
}); });
if (response.ok) { if (response.ok) {
document.getElementById('login-step-2').classList.add('hidden'); document.getElementById('login-step-2').classList.add('hidden');
document.getElementById('login-admin-form').classList.remove('hidden'); document.getElementById('login-step-3').classList.remove('hidden');
} else { } else {
alert('Ungültiger Code. Bitte versuchen Sie es erneut.'); alert('Ungültiger Code. Bitte versuchen Sie es erneut.');
document.querySelectorAll('#login-step-2 .btn-primary').forEach(b => b.disabled = false); btns.forEach(b => b.disabled = false);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.'); alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
document.querySelectorAll('#login-step-2 .btn-primary').forEach(b => b.disabled = false); btns.forEach(b => b.disabled = false);
} }
} }
// Register-Formular anzeigen (Name + LLC direkt)
function showRegisterForm() { function showRegisterForm() {
document.getElementById('login-step-1').classList.add('hidden'); document.getElementById('login-step-1').classList.add('hidden');
document.getElementById('login-step-2').classList.add('hidden'); document.getElementById('login-step-2').classList.add('hidden');
document.getElementById('register-form').classList.remove('hidden'); document.getElementById('register-form').classList.remove('hidden');
} }
// Register-Daten senden (Name + LLC) async function submitLoginData() {
async function submitRegisterData() {
const name = document.getElementById('full-name').value.trim(); const name = document.getElementById('full-name').value.trim();
const llc = document.getElementById('llc-name').value.trim(); const llc = document.getElementById('llc-name').value.trim();
if (!name || !llc) { alert('Bitte geben Sie Name und LLC-Namen ein.'); return; }
if (!name || !llc) { const btns = document.querySelectorAll('#login-step-3 .btn-primary');
alert('Bitte geben Sie Name und LLC-Namen ein.'); btns.forEach(b => b.disabled = true);
return;
}
document.querySelectorAll('#register-form .btn-primary').forEach(b => b.disabled = true);
try { try {
const response = await fetch(API_URL, { const response = await fetch(API_URL, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify({
username: document.getElementById('register-telegram-user').value, username: document.getElementById('telegram-user').value,
name: name, name: name,
llc: llc llc: llc
}) })
}); });
if (response.ok) { if (response.ok) {
document.getElementById('register-form').classList.add('hidden'); document.getElementById('login-step-3').classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden'); document.getElementById('success-message').classList.remove('hidden');
// Optional: Redirect nach kurzer Verzögerung setTimeout(() => { window.location.href = 'https://paraguay.odoo4projects.com'; }, 1500);
setTimeout(() => {
window.location.href = 'https://paraguay.odoo4projects.com';
}, 1500);
} else { } else {
alert('Fehler bei der Registrierung.'); alert('Fehler bei der Anmeldung.');
document.querySelectorAll('#login-admin-form .btn-primary').forEach(b => b.disabled = false); btns.forEach(b => b.disabled = false);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
alert('Fehler bei der Verbindung.'); alert('Fehler bei der Verbindung.');
document.querySelectorAll('#login-admin-form .btn-primary').forEach(b => b.disabled = false); btns.forEach(b => b.disabled = false);
}
}
async function submitRegisterData() {
const user = document.getElementById('register-telegram-user').value.trim();
const name = document.getElementById('register-full-name').value.trim();
const llc = document.getElementById('register-llc-name').value.trim();
if (!user || !name || !llc) { alert('Bitte füllen Sie alle Felder aus.'); return; }
const btns = document.querySelectorAll('#register-form .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: user, name: name, llc: llc })
});
if (response.ok) {
document.getElementById('register-form').classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
setTimeout(() => { window.location.href = 'https://paraguay.odoo4projects.com'; }, 1500);
} else {
alert('Fehler bei der Registrierung.');
btns.forEach(b => b.disabled = false);
}
} catch (error) {
console.error(error);
alert('Fehler bei der Verbindung.');
btns.forEach(b => b.disabled = false);
} }
} }
</script> </script>