ÿþ<!-- Subscription Popup -->
<div id="subscriptionModal" class="custom-modal">
<div class="custom-modal-dialog">
<div class="custom-modal-content">
<div class="custom-modal-header">
<h5 class="custom-modal-title">Subscribe to Our Newsletter</h5>
<button type="button" class="custom-close-button" onclick="hideSubscriptionModal()" aria-label="Close">×</button>
</div>
<div class="custom-modal-body">
<p>Get the latest updates and exclusive content delivered to your inbox!</p>
<form id="subscriptionForm" onsubmit="handleSubscription(event)">
<div class="form-group">
<input type="email" class="form-control" id="emailInput" placeholder="Enter your email" required>
</div>
<div id="subscriptionStatus" class="subscription-status"></div>
<button type="submit" class="submit-button" id="submitButton">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<script>
// Debug logging
function debugLog(message) {
console.log('[Subscription Popup]', message);
}
// Storage management with fallback
const storage = {
setItem: function(key, value, expiryDays) {
try {
// Try cookies first
const date = new Date();
date.setTime(date.getTime() + (expiryDays * 24 * 60 * 60 * 1000));
document.cookie = `${key}=${value}; expires=${date.toUTCString()}; path=/`;
debugLog(`Cookie set: ${key}=${value}`);
return true;
} catch (e) {
try {
// Fallback to localStorage
localStorage.setItem(key, value);
localStorage.setItem(`${key}_expiry`, (Date.now() + (expiryDays * 24 * 60 * 60 * 1000)).toString());
debugLog(`localStorage set: ${key}=${value}`);
return true;
} catch (e) {
debugLog('Storage not available: ' + e.message);
return false;
}
}
},
getItem: function(key) {
try {
// Try cookies first
const cookies = document.cookie.split(';');
const cookie = cookies.find(c => c.trim().startsWith(`${key}=`));
if (cookie) {
const value = cookie.split('=')[1];
debugLog(`Cookie found: ${key}=${value}`);
return value;
}
// Fallback to localStorage
const value = localStorage.getItem(key);
const expiry = localStorage.getItem(`${key}_expiry`);
if (value && expiry) {
if (Date.now() < parseInt(expiry)) {
debugLog(`localStorage found: ${key}=${value}`);
return value;
} else {
debugLog(`localStorage expired: ${key}`);
localStorage.removeItem(key);
localStorage.removeItem(`${key}_expiry`);
}
}
debugLog(`No storage found for: ${key}`);
return null;
} catch (e) {
debugLog('Storage error: ' + e.message);
return null;
}
}
};
// Custom modal implementation
function showSubscriptionModal() {
debugLog('Attempting to show modal');
const modal = document.getElementById('subscriptionModal');
if (modal) {
modal.style.display = 'block';
document.body.style.overflow = 'hidden';
debugLog('Modal shown successfully');
} else {
debugLog('Error: Modal element not found');
}
}
function hideSubscriptionModal() {
debugLog('Attempting to hide modal');
const modal = document.getElementById('subscriptionModal');
if (modal) {
modal.style.display = 'none';
document.body.style.overflow = '';
// Store popup state with 7-day expiry
storage.setItem('subscriptionPopupSeen', 'true', 7);
debugLog('Modal hidden successfully');
} else {
debugLog('Error: Modal element not found');
}
}
// Show status message in the popup
function showStatus(message, isSuccess) {
const statusDiv = document.getElementById('subscriptionStatus');
const submitButton = document.getElementById('submitButton');
if (statusDiv) {
statusDiv.textContent = message;
statusDiv.className = 'subscription-status ' + (isSuccess ? 'success' : 'error');
if (isSuccess) {
submitButton.disabled = true;
submitButton.textContent = 'Subscribed!';
setTimeout(() => {
hideSubscriptionModal();
}, 2000);
}
}
}
async function handleSubscription(event) {
event.preventDefault();
const email = document.getElementById('emailInput').value;
const submitButton = document.getElementById('submitButton');
if (email) {
try {
submitButton.disabled = true;
submitButton.textContent = 'Subscribing...';
// Google Form submission URL
const formUrl = 'https://docs.google.com/forms/d/e/1FAIpQLSeSQYeJZmDAwSgU7vkskIk9D-GGno-rixi3nncHu-hPLpefUg/formResponse';
// Create URL-encoded form data
const formData = new URLSearchParams();
formData.append('entry.1045781291', email);
// formData.append('draftResponse', '[null,null,"-5315431293427228687"]');
formData.append('pageHistory', '0');
formData.append('fbzx', '-5315431293427228687');
formData.append('fvv', '1');
formData.append('partialResponse', '[null,null,"-5315431293427228687"]');
//formData.append('submissionTimestamp', Date.now().toString());
// Submit to Google Form
const response = await fetch(formUrl, {
method: 'POST',
body: formData,
mode: 'no-cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formData.toString()
});
// Log the response for debugging
debugLog('Form submission response: ' + JSON.stringify(response));
// Since we're using no-cors, we can't check the response status
// We'll assume success if we get here
showStatus('Thank you for subscribing!', true);
debugLog('Subscription successful: ' + email);
// Hide the modal after successful submission
setTimeout(() => {
hideSubscriptionModal();
}, 2000);
} catch (error) {
showStatus('Failed to subscribe. Please try again.', false);
submitButton.disabled = false;
submitButton.textContent = 'Subscribe';
debugLog('Subscription failed: ' + error.message);
console.error('Subscription error:', error);
}
}
}
// Initialize subscription popup
function initSubscriptionPopup() {
debugLog('Initializing subscription popup');
try {
// Check if user has seen the popup recently
const hasSeenPopup = storage.getItem('subscriptionPopupSeen');
debugLog('Has seen popup: ' + hasSeenPopup);
if (!hasSeenPopup) {
debugLog('Setting timeout to show modal');
// Show modal after 5 seconds
setTimeout(showSubscriptionModal, 5000);
} else {
debugLog('Popup already seen, skipping');
}
} catch (error) {
debugLog('Error initializing subscription popup: ' + error.message);
}
}
// Ensure DOM is ready before initializing
debugLog('Script loaded, checking document ready state: ' + document.readyState);
if (document.readyState === 'loading') {
debugLog('Document still loading, adding DOMContentLoaded listener');
document.addEventListener('DOMContentLoaded', function() {
debugLog('DOMContentLoaded fired');
initSubscriptionPopup();
});
} else {
debugLog('Document already loaded, initializing immediately');
initSubscriptionPopup();
}
</script>
<style>
/* Custom Modal Styles */
.custom-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.custom-modal-dialog {
position: relative;
width: auto;
margin: 1.75rem auto;
max-width: 500px;
top: 50%;
transform: translateY(-50%);
}
.custom-modal-content {
position: relative;
background-color: #fff;
border-radius: 0.3rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.custom-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #dee2e6;
}
.custom-modal-body {
padding: 1rem;
}
.custom-modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 500;
}
.custom-close-button {
background: none;
border: none;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
opacity: 0.5;
cursor: pointer;
padding: 0;
}
.custom-close-button:hover {
opacity: 0.75;
}
/* Form Styles */
.form-group {
margin-bottom: 1rem;
}
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #212529;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.submit-button {
display: inline-block;
width: 100%;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.submit-button:hover:not(:disabled) {
background-color: #0b5ed7;
border-color: #0a58ca;
}
.submit-button:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* Status Message Styles */
.subscription-status {
margin: 1rem 0;
padding: 0.5rem;
border-radius: 0.25rem;
text-align: center;
display: none;
}
.subscription-status.success {
display: block;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.subscription-status.error {
display: block;
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>