-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnewsletter.html
191 lines (168 loc) · 7.27 KB
/
newsletter.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!doctype html>
<html class="h-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon.png">
<meta name="author" content="Amer Tahri-Joutey, Hassan Chalf">
<meta name="generator" content="Eleventy v2.0.0">
<meta name="HandheldFriendly" content="true">
<title>TaxiQuick — Subscribe to Our Newsletter</title>
<link rel="stylesheet" href="css/main.css">
<style>
video {
position: absolute;
top: 50%;
left: 69%;
width: 62%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: -1;
}
#notification {
display: none;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #00593a;
color: white;
padding: 15px 30px;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
font-size: 18px;
text-align: center;
opacity: 0;
animation: fadeDown 0.7s ease-in-out forwards;
}
@keyframes fadeDown {
0% {
opacity: 0;
transform: translate(-50%, -50px);
}
100% {
opacity: 1;
transform: translate(-50%, 20px);
}
}
.close-btn {
cursor: pointer;
padding-left: 10px;
font-size: 17px;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script type="text/javascript">
emailjs.init('t0K-CG2k9n8qwRTFT');
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('form');
const btn = document.querySelector('button[type="submit"]');
// Function to get the subscribed emails from localStorage
function getSubscribedEmails() {
const emails = localStorage.getItem('subscribedEmails');
return emails ? JSON.parse(emails) : [];
}
// Function to add a new email to localStorage
function addSubscribedEmail(email) {
const emails = getSubscribedEmails();
emails.push(email);
localStorage.setItem('subscribedEmails', JSON.stringify(emails));
}
form.addEventListener('submit', function(event) {
event.preventDefault();
btn.innerHTML = 'Checking...';
const email = form.email.value;
const subscribedEmails = getSubscribedEmails();
if (subscribedEmails.includes(email)) {
showNotification('Email is already subscribed.');
btn.innerHTML = 'Subscribe';
} else {
addSubscribedEmail(email);
emailjs.sendForm('service_bhhn5jy', 'template_0ftntag', form)
.then(() => {
btn.innerHTML = 'Subscribe';
showNotification('Success! Thank you for subscribing to our newsletter.');
form.reset();
})
.catch((err) => {
btn.innerHTML = 'Subscribe';
showNotification('Failed to send email. Please try again.');
console.error('Error:', err);
});
}
});
});
function showNotification(message) {
const notification = document.getElementById('notification');
if (notification) {
notification.innerHTML = message + ' <span class="close-btn">✕</span>';
notification.style.display = 'block';
setTimeout(() => {
notification.style.opacity = '0';
setTimeout(() => {
notification.style.display = 'none';
notification.style.opacity = '1';
}, 500);
}, 4000);
document.querySelector('.close-btn').addEventListener('click', () => {
notification.style.display = 'none';
});
} else {
console.error('Notification element not found.');
}
}
</script>
</head>
<body class="d-flex h-100 w-100 bg-black text-white" data-bs-spy="scroll" data-bs-target="#navScroll">
<div id="notification"></div>
<div class="h-100 container-fluid">
<div class="h-100 row d-flex align-items-stretch">
<div class="col-12 col-md-7 col-lg-6 col-xl-5 d-flex align-items-start flex-column px-vw-5">
<header class="mb-auto py-vh-2 col-12">
<a class="navbar-brand pe-md-4 fs-4 col-12 col-md-auto text-center" href="index.html">
<img src="img/Taxi.png" width="30" height="30" style="margin-top: -10px;"
class="d-inline-block align-text-top me-2" alt="TaxiQuick logo">
<span class="ms-md-1 mt-1 fw-bolder me-md-5" style="font-family: sans-serif">TaxiQuick</span>
</a>
<div style="position: relative; margin-top: 70px;">
<span class="h5 text-secondary fw-lighter" style="font-size: 30px;">Join the TaxiQuick Community</span>
<h2 class="display-4" style="font-size: 42px;">Get exclusive updates, offers, and tips on navigating
London with ease</h2>
</div>
<main class="mb-auto col-xl-9" style="margin-top: 60px;">
<h1 style="font-size: 35px; margin-bottom: 25px;">Enter your email address</h1>
<form id="form" class="row" onsubmit="handleFormSubmit(event)">
<div class="col-12">
<div class="mb-3">
<input type="email" name="email"
class="form-control form-control-lg bg-gray-800 border-dark"
id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="xyz@gmail.com"
required>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3 form-check py-3">
<input type="checkbox" class="form-check-input" id="consentCheck" required>
<label class="form-check-label" for="consentCheck">Yes, I want to receive exclusive
offers and updates in the newsletter.</label>
</div>
<button type="submit" class="btn btn-white btn-xl"
style="border-color: white;">Subscribe</button>
</div>
</form>
</main>
</header>
</div>
<div class="col-12 col-md-5 col-lg-6 col-xl-7">
<video autoplay loop muted playsinline style="opacity: 0.7;">
<source src="img/video1.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</body>
</html>