p-form
Tue Nov 14 2023 09:52:54 GMT+0000 (Coordinated Universal Time)
Saved by @naunie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Overlay styling */
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* More transparent background */
z-index: 1;
}
/* Popup container styling */
#popup-container {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
z-index: 2;
border-radius: 10px; /* Rounded corners */
background-color: #fff; /* White background */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
}
/* Close button styling */
#close-button {
color: #000;
background-color: transparent;
position: absolute;
font-size: 18px;
right: 15px;
top: 15px;
cursor: pointer;
z-index: 3;
}
/* Form styles */
#popup-form {
text-align: center;
}
/* Additional styles for form elements */
#form-heading {
font-size: 48px;
color: #bc1d29;
margin-bottom: 10px;
}
#form-subheading {
font-size: 16px;
margin-bottom: 20px;
font-weight: bold;
}
#form-text {
font-size: 12px;
margin-bottom: 20px;
}
#voucher-input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
#getVoucherBtn {
padding: 14px;
margin: 5px;
cursor: pointer;
background-color: #bc1d29;
color: #fff;
font-size: 14px;
font-weight: bold;
border: none;
width: 100%;
}
#noThanksBtn {
padding: 14px;
margin: 5px;
cursor: pointer;
background-color: #ccc;
color: #000;
font-size: 14px;
font-weight: bold;
border: none;
width: 100%;
}
/* Show-popup container styling */
#show-popup-container {
position: fixed;
bottom: 140px;
left: 20px;
z-index: 4; /* Ensure the button is above the popup */
}
/* Show-popup button styling */
#show-popup {
cursor: pointer;
width: auto;
height: 60px;
background-color: #bc1d29;
color: #fff;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 0;
transform: rotate(270deg);
transform-origin: left center;
}
#show-popup:hover {
background-color: #a0141f; /* Darker color on hover */
}
/* Responsive styles 912px */
@media (max-width: 840px) {
#popup-container {
padding: 40px; /* Adjust padding for smaller screens */
top: 55%; /* Center vertically */
left: 38%;
transform: translate(-50%, -50%); /* Center the container */
}
#show-popup-container {
bottom: 170px; /* Adjust top position for smaller screens */
left: 29px; /* Adjust left position for smaller screens */
}
#show-popup {
font-size: 29px; /* Adjust font size for smaller screens */
background-color: #bc1d29;
}
#show-popup:hover {
background-color: #a0141f; /* Darker color on hover */
}
}
/* Responsive styles 790px */
@media only screen and (max-width: 790px) {
#popup-container {
padding: 10px; /* Adjust padding for smaller screens */
top: 55%; /* Center vertically */
left: 40%;
transform: translate(-50%, -50%); /* Center the container */
}
#show-popup-container {
bottom: 130px; /* Adjust top position for smaller screens */
left: 22px; /* Adjust left position for smaller screens */
}
#show-popup {
font-size: 23px; /* Adjust font size for smaller screens */
background-color: #bc1d29;
position: fixed; /* Add this line to fix the button position */
}
#show-popup:hover {
background-color: #a0141f; /* Darker color on hover */
}
}
/* Responsive styles 430px */
@media (max-width: 430px) {
#popup-container {
padding: 10px; /* Adjust padding for smaller screens */
top: 60%; /* Center vertically */
left: 57%;
transform: translate(-50%, -65%); /* Center the container */
z-index:1;
}
#show-popup-container {
bottom: 150px; /* Adjust top position for smaller screens */
left: 20px; /* Adjust left position for smaller screens */
}
#show-popup {
font-size: 18px; /* Adjust font size for smaller screens */
background-color: #bc1d29;
}
#show-popup:hover {
background-color: #a0141f; /* Darker color on hover */
}
/* Additional styles for form elements in the media query */
#popup-form {
text-align: center;
box-sizing: content-box;
margin-right: 10px;
}
#form-heading {
font-size: 38px;
color: #bc1d29;
margin-bottom: 10px;
}
#form-subheading {
font-size: 14px;
margin-bottom: 20px;
font-weight: bold;
}
#form-text {
font-size: 12px;
margin-bottom: 20px;
}
#voucher-input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
#getVoucherBtn {
padding: 14px;
margin: 5px;
cursor: pointer;
background-color: #bc1d29;
color: #fff;
font-size: 14px;
font-weight: bold;
border: none;
width: 100%;
}
#noThanksBtn {
padding: 14px;
margin: 5px;
cursor: pointer;
background-color: #ccc;
color: #000;
font-size: 14px;
font-weight: bold;
border: none;
width: 100%;
}
}
</style>
</head>
<body>
<div id="show-popup-container">
<button id="show-popup" onclick="togglePopup()">GET $6 COUPON </button>
</div>
<div id="overlay" onclick="closePopup()"></div>
<div id="popup-container">
<div id="close-button" onclick="closePopup()">X</div>
<!-- Form content -->
<div id="popup-form">
<h1 id="form-heading">First-time here?</h1>
<p id="form-subheading">Sign up now and get RM5 OFF your first purchase</p>
<input type="text" id="voucher-input" placeholder="Email Address">
<button id="getVoucherBtn" onclick="getVoucher()">Get Your Voucher Code Now</button>
<button id="noThanksBtn" onclick="closePopup()">No Thanks</button>
<p id="form-text">You are signing up to receive communication via email and can unsubscribe at any time</p>
</div>
</div>
<script>
function togglePopup() {
document.getElementById("overlay").style.display = "block";
document.getElementById("popup-container").style.display = "block";
}
function closePopup() {
document.getElementById("overlay").style.display = "none";
document.getElementById("popup-container").style.display = "none";
}
function getVoucher() {
// Signup link
var voucherLink = "https://account.easyparcel.com/register?client_id=c575e8cd-aa46-46db-8308-e18d25bb76c6&redirect_uri=https%3A%2F%2Fapp.easyparcel.com%2Feasyaccount%2Fcallback&state=eyJjbGllbnRfaWQiOiI1M2FmYmQzMS05OGI2LTQ3ODctOWYzOC1kMDY5ZGRkN2RiM2QiLCJyZWRpcmVjdF91cmkiOiJodHRwczovL2FwcC5lYXN5cGFyY2VsLmNvbS9sb2dpbi9vYXV0aC9jYWxsYmFjayIsInN0YXRlIjoie1wicmVmZXJyZXJfY29kZVwiOlwiZDVhZmIyM2RkNTY5MWNiYjAzNDMwMTU5Y2UzODNjZjFRWGd4RDIyOEJIdWt6WUxwZDc5eElnPT1cIn0iLCJjb3VudHJ5IjoibXkiLCJsYW5nIjoiZW4ifQ%3D%3D&country=my";
// Open the link in a new tab
window.open(voucherLink, '_blank');
// Close the form popup after handling the click
closePopup();
}
</script>
</body>
</html>
Comments