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

Add newsletter form for non-logged-in users with success message

Browse Source
This commit is contained in:
Kato
2026-09-02 18:20:35 +00:00
parent 1dc5fd989b
commit 29d26683da
1 changed files with 59 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+56 -4
View File
@@ -67,7 +67,9 @@
.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); }
@@ -245,6 +247,26 @@
</div>
</aside>
<aside class="sidebar-col hidden" id="newsletter-panel">
<div class="newsletter-panel">
<h3 class="hide-de">Newsletter</h3>
<h3 class="hide-en">Newsletter</h3>
<form id="newsletter-form">
<div class="form-group">
<label for="newsletter-email" class="hide-de">E-Mail-Adresse</label>
<label for="newsletter-email" class="hide-en">Email address</label>
<input type="email" id="newsletter-email" required placeholder="name@example.com" />
</div>
<button type="button" class="btn-primary hide-de" onclick="subscribeNewsletter()">Abonnieren</button>
<button type="button" class="btn-primary hide-en" onclick="subscribeNewsletter()">Subscribe</button>
</form>
<div id="newsletter-success" class="hidden">
<p class="hide-de">Bitte prüfen Sie Ihre E-Mails, um das Abonnement zu bestätigen.</p>
<p class="hide-en">Please check your emails to confirm your subscription.</p>
</div>
</div>
</aside>
<aside class="sidebar-col hidden" id="notebook-panel">
<div class="notebook">
<div class="tabs">
@@ -286,21 +308,22 @@
function checkSession() {
const sessionid = getCookie('sessionid');
console.log('checkSession: sessionid =', sessionid);
if (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, notebook });
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 {
const notebook = document.getElementById('notebook-panel');
const login = document.getElementById('login-panel');
if (notebook) notebook.classList.add('hidden');
if (login) login.classList.remove('hidden');
if (newsletter) newsletter.classList.remove('hidden');
}
}
@@ -408,6 +431,8 @@
}
}
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();
@@ -448,6 +473,33 @@
}
}
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();