/
index.html
128 lines (114 loc) · 7.23 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/png" sizes="32x32" href="https://www.tampadevs.com/_assets/img/favicon/favicon-32x32.png">
<title>Tampa Devs Newsletter Signup</title>
<meta property="og:title" content="Tampa Devs">
<meta property="og:description" content="Tampa Devs is the fastest-growing education and technology community for software developers in Tampa Bay.">
<meta property="og:image" content="https://www.tampadevs.com/_assets/img/4032x1948.webp">
<script src="https://cdn.tailwindcss.com"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VV1YTRRM50"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-VV1YTRRM50');
</script>
</head>
<body class="bg-[#4e5569] flex flex-col min-h-screen">
<nav class="bg-[#4e5569] text-white p-5">
<div class="max-w-6xl mx-auto flex justify-center">
<a href="https://www.tampadevs.com/">
<img src="https://www.tampadevs.com/_assets/misc/logos/tampa-devs.svg" alt="Tampa Devs logo" class="h-8 md:h-12">
</a>
</div>
</nav>
<div class="flex-grow bg-red-500 text-white py-8">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-lg md:text-2xl font-bold flex items-center">
<img src="https://www.tampadevs.com/_assets/misc/icons/mail-send.svg" alt="Paper Airplane" class="h-6 mr-2"> Keep in touch
</h2>
<p class="mt-2">Stay informed with local tech news, upcoming events, job opportunities, and more from Tampa Devs.</p>
<form action="https://newsletter.api.tampa.dev/subscribe" method="post" class="mt-8" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-black">
<!-- Visible fields -->
<div class="form-group">
<input type="text" name="firstname" placeholder="First name" autocomplete="off" class="w-full p-2 rounded-md border border-gray-300">
</div>
<div class="form-group">
<input type="text" name="lastname" placeholder="Last name" autocomplete="off" class="w-full p-2 rounded-md border border-gray-300">
</div>
<div class="form-group">
<input type="email" name="email" placeholder="Email Address" required autocomplete="off" class="w-full p-2 rounded-md border border-gray-300">
</div>
<div aria-hidden="true" class="hidden">
<input name="phone" class="required phone" id="mce-phone" value="(813) 555-0199" placeholder="Phone" autocomplete="off">
<input type="email" value name="verify_email" class="required email" id="mce-EMAIL-verify" placeholder="Verify Email Address" autocomplete="off">
</div>
</div>
<div class="mt-4 flex justify-center md:justify-start">
<input type="submit" id="mc-embedded-subscribe" value="Subscribe" name="subscribe" class="cursor-pointer bg-white text-gray-800 font-bold py-2 px-4 rounded-md hover:bg-gray-100">
</div>
</form>
<p class="mt-16 text-xs" id="website-link">Visit <a class="underline" href="https://www.tampadevs.com/">our website</a> to learn more about Tampa Devs' charitable mission.</p>
</div>
</div>
<div class="bg-cover bg-center w-full" style="background-image: url('https://www.tampadevs.com/_assets/img/tadhack-group.webp'); height: 50vh;">
<video id="looping-video" autoplay="" muted="" playsinline="" loop="loop" poster="https://www.tampadevs.com/_assets/img/tampa-devs-v2.webp" class="object-cover h-full w-full">
<source type="video/webm" src="https://www.tampadevs.com/_assets/misc/TD_output_720_30p.webm">
<source type="video/mp4" src="https://www.tampadevs.com/_assets/misc/TD_output_720_30p.mp4">
</video>
</div>
<script>
function resetMailForm() {
document.getElementById("mc-embedded-subscribe-form").reset();
document.getElementById("mc-embedded-subscribe").value = "Subscribe";
document.getElementById("mc-embedded-subscribe").style.backgroundColor = "#fff";
document.getElementById("mc-embedded-subscribe").style.textTransform = "uppercase";
document.getElementById("mc-embedded-subscribe").style.color = "#566075";
}
function formSubmit(e) {
var req = new XMLHttpRequest();
req.open('POST', "https://newsletter.api.tampa.dev/subscribe", true);
req.onload = function() {
document.getElementById("mc-embedded-subscribe-form").reset();
document.getElementById("mc-embedded-subscribe").value = "Subscribed ✔️";
document.getElementById("mc-embedded-subscribe").style.backgroundColor = "#B5E0B8";
setTimeout(resetMailForm, 2000);
console.log(req.responseText);
};
req.onerror = function() {
document.getElementById("mc-embedded-subscribe-form").reset();
document.getElementById("mc-embedded-subscribe").value = "Something Broke 😔";
document.getElementById("mc-embedded-subscribe").style.color = "#fff";
document.getElementById("mc-embedded-subscribe").style.textTransform = "none";
document.getElementById("mc-embedded-subscribe").style.backgroundColor = "#4e5569";
setTimeout(resetMailForm, 2000);
console.log("Newsletter subscription failed.");
};
req.send(new FormData(e.target));
e.preventDefault();
}
document.getElementById("mc-embedded-subscribe-form").addEventListener("submit", formSubmit);
document.addEventListener('DOMContentLoaded', function() {
const queryParams = new URLSearchParams(window.location.search);
if (queryParams.has('nolinks')) {
const calloutElement = document.getElementById('website-link');
if (calloutElement) {
calloutElement.style.display = 'none';
}
}
if (queryParams.has('novideo')) {
const videoElement = document.getElementById('looping-video');
if (videoElement) {
videoElement.style.display = 'none';
}
}
});
</script>
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "dcfc639f8f774af58c7cc6a347d43ee2"}'></script>
</body>
</html>