Edit Snippet ‹ EasyParcel — WordPress
Thu Nov 16 2023 04:22:23 GMT+0000 (Coordinated Universal Time)
Saved by @naunie #undefined
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> 8 /* Overlay styling */ #overlay { display: none; position: fixed; top: 0; left: 0; width: %; 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: %; 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; } 50 /* 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%; } 100 /* Show-popup container styling */ #show-popup-container { position: fixed; bottom: px; 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(deg); transform-origin: left center; } #show-popup:hover { background-color: #a0f; /* 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: px; /* Adjust top position for smaller screens */ left: 29px; /* Adjust left position for smaller screens */ } 140 141 #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 */ } 170 #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 --> 270 <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