-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (115 loc) · 4.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Mental Health & Wellness Guide</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #FFD54F;
font-family: Helvetica, Arial, sans-serif;
}
.text-brand {
color: #223A5E;
}
.input-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hidden {
display: none;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="max-w-md w-full mx-auto text-center">
<!-- Book Image -->
<div class="mb-12">
<img
src="book-cover.png"
alt="QUEEN ENERGY: The Complete Mental Health & Wellness Journal for Women - Your 52-Week Journey to Emotional Freedom, Self-Care & Personal Power"
class="w-64 mx-auto shadow-lg rounded-lg"
/>
</div>
<!-- Form Section -->
<div id="formSection">
<h2 class="text-3xl font-bold text-brand mb-8">
Get Your Free Check-in Guide
</h2>
<form id="emailForm" class="space-y-4 max-w-sm mx-auto">
<input
type="email"
id="emailInput"
name="email"
placeholder="[email protected]"
class="w-full px-4 py-3 rounded-lg border-0 input-shadow focus:ring-2 focus:ring-[#FF5E7F] mb-4"
required
/>
<button
type="submit"
id="submitButton"
class="w-full bg-[#FF5E7F] text-white px-6 py-3 rounded-lg font-bold hover:opacity-90 transition-colors"
>
GET MY FREE GUIDE
</button>
<p class="text-xs text-gray-600 mt-2">
By submitting your email, you agree to receive occasional emails about our products and services to help your wellness journey. We need this consent to send you the guide. You can unsubscribe at any time.
</p>
</form>
</div>
<!-- Thank You Message (Hidden by default) -->
<div id="thankYouSection" class="hidden">
<h2 class="text-3xl font-bold text-brand mb-4">
Thank You!
</h2>
<p class="text-xl text-brand">
Check your email for your free check-in guide.
</p>
</div>
<!-- Error Message (Hidden by default) -->
<div id="errorMessage" class="hidden text-red-600 mt-4">
Something went wrong. Please try again.
</div>
</div>
<script>
document.getElementById('emailForm').addEventListener('submit', async function(e) {
e.preventDefault();
const submitButton = document.getElementById('submitButton');
const errorMessage = document.getElementById('errorMessage');
const formSection = document.getElementById('formSection');
const thankYouSection = document.getElementById('thankYouSection');
const email = document.getElementById('emailInput').value;
// Disable button and show loading state
submitButton.disabled = true;
submitButton.textContent = 'Sending...';
errorMessage.classList.add('hidden');
try {
// Log attempt
console.log('Attempting to submit:', email);
const response = await fetch('https://script.google.com/macros/s/AKfycbzrrrTmBIY5_f8a5gtMb6gegjSth_z6vMPltn4mffuDgdeMidGS-QSc3PUdO9ppCWci/exec', {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email,
source: window.location.href,
utm_source: new URLSearchParams(window.location.search).get('utm_source'),
utm_medium: new URLSearchParams(window.location.search).get('utm_medium'),
utm_campaign: new URLSearchParams(window.location.search).get('utm_campaign')
})
});
// Always show success since we can't actually check the response with no-cors
formSection.classList.add('hidden');
thankYouSection.classList.remove('hidden');
} catch (error) {
console.error('Error:', error);
errorMessage.classList.remove('hidden');
submitButton.disabled = false;
submitButton.textContent = 'GET MY FREE GUIDE';
}
});
</script>
</body>
</html>