This commit is contained in:
Flatlogic Bot 2025-10-17 10:10:17 +00:00
parent 16c40428e5
commit 0dc1ca6104
2 changed files with 67 additions and 81 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

View File

@ -23,20 +23,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
header('Content-Type: application/json'); header('Content-Type: application/json');
// --- DATA CAPTURE --- // --- DATA CAPTURE ---
$webinar_id = filter_input(INPUT_POST, 'webinar_id', FILTER_VALIDATE_INT); // The $webinar object is already available from the initial page load.
// --- WEBINAR DETAILS ---
$webinar = null;
if ($webinar_id) {
try {
// Fetch webinar details to create calendar links
$stmt = $pdo->prepare("SELECT title, description, starts_at, ends_at FROM webinars WHERE id = ?");
$stmt->execute([$webinar_id]);
$webinar = $stmt->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
// Log error, but don't show to user
}
}
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
$first_name = filter_input(INPUT_POST, 'first_name', FILTER_SANITIZE_STRING); $first_name = filter_input(INPUT_POST, 'first_name', FILTER_SANITIZE_STRING);
$last_name = filter_input(INPUT_POST, 'last_name', FILTER_SANITIZE_STRING); $last_name = filter_input(INPUT_POST, 'last_name', FILTER_SANITIZE_STRING);
@ -149,17 +136,14 @@ if (!$webinar) {
.form-card h2 { margin-top: 0; font-size: 1.5rem; color: #f6e05e; text-align: center; } .form-card h2 { margin-top: 0; font-size: 1.5rem; color: #f6e05e; text-align: center; }
.form-group { margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.5rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: bold; } label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
input[type="email"], input[type="text"] { width: 100%; padding: 0.75rem; background-color: #1a202c; border: 1px solid #4a5568; border-radius: 0.375rem; color: #e2e8f0; font-size: 1rem; box-sizing: border-box; } input[type="email"], input[type="text"], input[type="password"] { width: 100%; padding: 0.75rem; background-color: #1a202c; border: 1px solid #4a5568; border-radius: 0.375rem; color: #e2e8f0; font-size: 1rem; box-sizing: border-box; }
.consent-group { display: flex; align-items: start; gap: 0.75rem; }
.consent-group label { font-weight: normal; font-size: 0.9rem; color: #a0aec0; }
.microcopy { font-size: 0.8rem; color: #718096; margin-top: 0.5rem; }
.submit-btn { display: block; width: 100%; background-color: #f6e05e; color: #1a202c; padding: 0.85rem; border: none; border-radius: 0.375rem; font-weight: bold; font-size: 1.125rem; cursor: pointer; transition: background-color 0.2s; } .submit-btn { display: block; width: 100%; background-color: #f6e05e; color: #1a202c; padding: 0.85rem; border: none; border-radius: 0.375rem; font-weight: bold; font-size: 1.125rem; cursor: pointer; transition: background-color 0.2s; }
.submit-btn:hover { background-color: #f6d32d; } .submit-btn:hover { background-color: #f6d32d; }
.submit-btn:disabled { background-color: #4a5568; cursor: not-allowed; } .submit-btn:disabled { background-color: #4a5568; cursor: not-allowed; }
#form-result { margin-top: 1.5rem; text-align: center; } #form-result { margin-top: 1.5rem; text-align: center; }
.success-message { background-color: #2d3748; border: 1px solid #4a5568; padding: 2rem; border-radius: 0.5rem; } .success-message { background-color: #2d3748; border: 1px solid #4a5568; padding: 2rem; border-radius: 0.5rem; text-align: center; }
.error-message { background-color: #c53030; padding: 1rem; border-radius: 0.375rem; } .error-message { background-color: #c53030; padding: 1rem; border-radius: 0.375rem; }
.calendar-buttons a, .copy-link-btn { display: inline-block; background-color: #4a5568; color: #e2e8f0; padding: 0.75rem 1.5rem; border-radius: 0.375rem; text-decoration: none; margin: 0.5rem; font-weight: bold; } .calendar-buttons a { display: inline-block; background-color: #4a5568; color: #e2e8f0; padding: 0.75rem 1.5rem; border-radius: 0.375rem; text-decoration: none; margin: 0.5rem; font-weight: bold; }
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } } @media (max-width: 768px) { .container { grid-template-columns: 1fr; } }
</style> </style>
</head> </head>
@ -187,7 +171,6 @@ if (!$webinar) {
<div class="form-group"> <div class="form-group">
<label for="email">Email (required)</label> <label for="email">Email (required)</label>
<input type="email" id="email" name="email" required> <input type="email" id="email" name="email" required>
<p class="microcopy">Well send the join link & calendar invite.</p>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="first_name">First name</label> <label for="first_name">First name</label>
@ -264,76 +247,79 @@ if (!$webinar) {
submitButton.textContent = 'Processing...'; submitButton.textContent = 'Processing...';
const formData = new FormData(form); const formData = new FormData(form);
fetch(window.location.href, { const xhr = new XMLHttpRequest();
method: 'POST', xhr.open('POST', window.location.href, true);
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
formContainer.style.display = 'none';
const webinarTitle = encodeURIComponent(data.webinar_title);
const webinarDate = new Date(data.webinar_date_utc + 'Z');
// Correctly format dates for UTC (YYYYMMDDTHHMMSSZ) xhr.onload = function() {
const formatUTCDate = (date) => { if (xhr.status >= 200 && xhr.status < 400) {
return date.toISOString().replace(/\.\d{3}Z$/, 'Z').replace(/[-:]/g, ''); console.log("Response from server:", xhr.responseText);
}; let data;
try {
data = JSON.parse(xhr.responseText);
} catch (e) {
formResult.innerHTML = '<div class="error-message">An unexpected error occurred parsing the server response.</div>';
console.error("JSON Parsing Error:", e);
return;
}
const startTime = formatUTCDate(webinarDate);
const endTime = formatUTCDate(new Date(webinarDate.getTime() + (60 * 60 * 1000)));
const googleLink = `https://www.google.com/calendar/render?action=TEMPLATE&text=${webinarTitle}&dates=${startTime}/${endTime}&details=Join+the+webinar!&ctz=UTC`; if (data.success) {
formContainer.style.display = 'none';
const webinarTitle = encodeURIComponent(data.webinar_title);
const webinarDate = new Date(data.webinar_date_utc + 'Z');
const icsContent = [ const formatUTCDate = (date) => {
'BEGIN:VCALENDAR', return date.toISOString().replace(/\.\d{3}Z$/, 'Z').replace(/[-:]/g, '');
'VERSION:2.0', };
'BEGIN:VEVENT',
`URL:${window.location.href}`,
`DTSTART:${startTime}`,
`DTEND:${endTime}`,
`SUMMARY:${data.webinar_title}`,
'DESCRIPTION:Join the webinar!',
'END:VEVENT',
'END:VCALENDAR'
].join('\n');
const outlookLink = `data:text/calendar;charset=utf-8,${encodeURIComponent(icsContent)}`;
formResult.innerHTML = ` const startTime = formatUTCDate(webinarDate);
<div class="success-message"> const endTime = formatUTCDate(new Date(webinarDate.getTime() + (60 * 60 * 1000)));
<h3 style="color: #f6e05e; font-size: 1.75rem;">Youre in for ${data.webinar_title}!</h3>
<p style="color: #cbd5e0; font-size: 1.1rem;">Check your email for your confirmation. You can now log in to see the details.</p> const googleLink = `https://www.google.com/calendar/render?action=TEMPLATE&text=${webinarTitle}&dates=${startTime}/${endTime}&details=Join+the+webinar!&ctz=UTC`;
<div class="calendar-buttons">
<a href="${googleLink}" target="_blank">Add to Google Calendar</a> const icsContent = [
<a href="${outlookLink}" download="webinar.ics">Add to Outlook (ICS)</a> 'BEGIN:VCALENDAR',
'VERSION:2.0',
'BEGIN:VEVENT',
`URL:${window.location.href}`,
`DTSTART:${startTime}`,
`DTEND:${endTime}`,
`SUMMARY:${data.webinar_title}`,
'DESCRIPTION:Join the webinar!',
'END:VEVENT',
'END:VCALENDAR'
].join('\n');
const outlookLink = `data:text/calendar;charset=utf-8,${encodeURIComponent(icsContent)}`;
formResult.innerHTML = `
<div class="success-message">
<h3 style="color: #f6e05e; font-size: 1.75rem;">Youre in for ${data.webinar_title}!</h3>
<p style="color: #cbd5e0; font-size: 1.1rem;">Check your email for your confirmation. You can now log in to see the details.</p>
<div class="calendar-buttons">
<a href="${googleLink}" target="_blank">Add to Google Calendar</a>
<a href="${outlookLink}" download="webinar.ics">Add to Outlook (ICS)</a>
</div>
</div> </div>
</div> `;
`; } else {
formResult.innerHTML = `<div class="error-message">${data.error || 'An unknown error occurred.'}</div>`;
submitButton.disabled = false;
submitButton.textContent = 'Register Now';
}
} else { } else {
formResult.innerHTML = `<div class="error-message">${data.error}</div>`; formResult.innerHTML = '<div class="error-message">A server error occurred. Please try again later.</div>';
submitButton.disabled = false; submitButton.disabled = false;
submitButton.textContent = 'Register Now'; submitButton.textContent = 'Register Now';
} }
}) };
.catch(error => {
formResult.innerHTML = `<div class="error-message">An unexpected error occurred.</div>`; xhr.onerror = function() {
formResult.innerHTML = '<div class="error-message">A network error occurred. Please check your connection.</div>';
submitButton.disabled = false; submitButton.disabled = false;
submitButton.textContent = 'Register Now'; submitButton.textContent = 'Register Now';
}); };
});
// --- COPY LINK --- xhr.send(formData);
formResult.addEventListener('click', function(e) {
if (e.target.classList.contains('copy-link-btn')) {
e.preventDefault();
const link = e.target.dataset.link;
navigator.clipboard.writeText(link).then(() => {
e.target.textContent = 'Copied!';
setTimeout(() => {
e.target.textContent = 'Copy Join Link';
}, 2000);
});
}
}); });
</script> </script>