www/src/layouts/partials/mobile-ctas.html
2023-02-08 11:29:33 -05:00

106 lines
3.3 KiB
HTML

<!-- Mobile CTA's -->
<div class="row mt-5 gx-3 mobile-ctas">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
<button class="mbtn hbtn hb-fill-right" id="email-btn" style="width:100%;"><i class="icon-email-icon-www" style="position:relative; top:2px;"></i>Subscribe</button>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
<button class="mbtn hbtn-light hb-light-fill-right mb-4" id="follow-button" style="width:100%; text-transform:uppercase;"><i class="icon-twitter" style="position:relative;top:2px;"></i>Follow Us</button>
</div>
</div>
<div class="mb-4 subscribe-collapse">
<div class="col">
<form id="subscribeForm">
<div class="mb-3">
<input class="p-3 text-center" placeholder="Enter your email" type="email" id="email" required>
</div>
<button class="hbtn hb-fill-right" style="width:100%;" id="subscribe-submit-btn" type="submit">Subscribe</button>
</form>
<div id="formResponse"></div>
</div>
</div>
<style>
.subscribe-collapse{
display:none;
}
#email{
width:100%;
height: 60px;
background-color: #1a1a1a;
border: 1.5px solid #949494;
color: white;
font-family: "inter", sans-serif;
text-transform: uppercase;
border-radius: 0px !important;
}
#email-btn{
text-transform: uppercase;
}
</style>
<script>
const emailBtn = document.getElementById("email-btn");
const subscribeCollapse = document.querySelector(".subscribe-collapse");
emailBtn.addEventListener("click", function() {
if (subscribeCollapse.style.display === "none") {
subscribeCollapse.style.display = "block";
} else {
subscribeCollapse.style.display = "none";
}
});
const subscribeForm = document.getElementById("subscribeForm");
const formResponse = document.getElementById("formResponse");
subscribeForm.addEventListener("submit", event => {
event.preventDefault();
const email = document.getElementById("email").value;
if (!email) {
formResponse.innerHTML =
'<p style="color: red">Please enter a valid email address.</p>';
return;
}
fetch("https://manage.klaviyo.com/api/v1/list/R2UVm3/members", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
email: email,
api_key: "pk_231a258e61a40283566192ee59310c7af4"
})
})
.then(response => {
if (!response.ok) {
throw new Error("Failed to subscribe");
}
formResponse.innerHTML =
'<p style="color: green">Form submitted!</p>';
})
.catch(error => {
formResponse.innerHTML =
'<p style="color: red">An error occurred. Please try again later.</p>';
});
});
</script>
<!-- Deep-linking script for Twitter follow button -->
<script>
document.getElementById("follow-button").addEventListener("click", function() {
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
window.location.href = "twitter://user?screen_name=teaxyz";
} else if (navigator.userAgent.match(/Android/i)) {
window.location.href = "twitter://user?screen_name=teaxyz";
} else {
window.location.href = "https://twitter.com/teaxyz";
}
});
</script>