@@ -100,10 +100,14 @@
|
||||
<div>
|
||||
<h5 class="text-white text-sm font-semibold mb-4">Connect</h5>
|
||||
<p class="text-xs text-slate-500 mb-4">Subscribe to our technical updates and newsletter.</p>
|
||||
<div class="flex gap-2">
|
||||
<input type="email" placeholder="Enter email" class="bg-slate-900 border border-slate-800 text-xs px-3 py-2 rounded-lg text-white focus:outline-none focus:border-brand w-full">
|
||||
<button class="bg-[#1c8098] hover:bg-[#145f72] text-white text-xs px-4 py-2 rounded-lg font-semibold transition-colors">Join</button>
|
||||
</div>
|
||||
<form id="newsletter-form" action="/Subscribe" method="post">
|
||||
@Html.AntiForgeryToken()
|
||||
<div class="flex gap-2">
|
||||
<input type="email" name="Email" required aria-label="Email address" placeholder="Enter email" class="bg-slate-900 border border-slate-800 text-xs px-3 py-2 rounded-lg text-white focus:outline-none focus:border-brand w-full">
|
||||
<button type="submit" class="bg-[#1c8098] hover:bg-[#145f72] text-white text-xs px-4 py-2 rounded-lg font-semibold transition-colors">Join</button>
|
||||
</div>
|
||||
<p id="newsletter-message" class="mt-2 text-xs" hidden></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-slate-900 text-center text-xs text-slate-600">
|
||||
@@ -140,6 +144,57 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Footer "Connect" newsletter form — posts to /Subscribe and shows
|
||||
// the result inline instead of navigating away.
|
||||
(function () {
|
||||
var form = document.getElementById('newsletter-form');
|
||||
if (!form) return;
|
||||
var input = form.querySelector('input[type="email"]');
|
||||
var button = form.querySelector('button[type="submit"]');
|
||||
var message = document.getElementById('newsletter-message');
|
||||
|
||||
function show(ok, text) {
|
||||
message.textContent = text;
|
||||
message.classList.toggle('text-emerald-400', ok);
|
||||
message.classList.toggle('text-red-400', !ok);
|
||||
message.hidden = false;
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
var email = input.value.trim();
|
||||
if (!email) {
|
||||
show(false, 'Please enter your email address.');
|
||||
return;
|
||||
}
|
||||
|
||||
button.disabled = true;
|
||||
try {
|
||||
var response = await fetch(form.action, {
|
||||
method: 'POST',
|
||||
// FormData picks up the Email input plus the antiforgery token.
|
||||
body: new URLSearchParams(new FormData(form)),
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
|
||||
});
|
||||
var payload = null;
|
||||
try { payload = await response.json(); } catch (e) { /* non-JSON response */ }
|
||||
|
||||
if (response.ok && payload && payload.success) {
|
||||
input.value = '';
|
||||
show(true, payload.message || "You're on the list — thanks for subscribing!");
|
||||
} else {
|
||||
show(false, (payload && payload.message) || "We couldn't sign you up right now. Please try again later.");
|
||||
}
|
||||
} catch (err) {
|
||||
show(false, 'Something went wrong. Please try again later.');
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@await RenderSectionAsync("Scripts", required: false)
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user