Skip to content

Instantly share code, notes, and snippets.

@mohamm6d
Created April 11, 2021 15:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mohamm6d/ca7b15ee4fdb035208162cf7b6334f66 to your computer and use it in GitHub Desktop.
Save mohamm6d/ca7b15ee4fdb035208162cf7b6334f66 to your computer and use it in GitHub Desktop.
Campaign container with cookie-based password
<!--- Starting april 2021 campaign container -->
<div id="campaign-container">
<img src="http://s.mmgo.io/t/CAm7" alt="motionmailapp.com" />
<div class="form-container">
Enter password for early-access to this campaign
<input type="password" placeholder="Enter password here" name="" id="campaign_password">
<button id="campaign_button">Let me in</button>
</div>
</div>
<style>
#campaign-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
background-image: url(content/img/april-21-campaign-bg.jpeg);
background-size: cover;
justify-content: center;
text-align: center;
padding-top: 30vh;
background-position: center center;
background-repeat: no-repeat;
}
input#campaign_password {
display: block;
width: 100%;
padding: 1rem;
box-sizing: border-box;
margin: 1rem auto;
border-radius: 4px;
border: 1px solid #999;
}
button#campaign_button {
display: block;
box-sizing: border-box;
width: 100%;
padding: 1rem;
font-weight: bold;
background: #000;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
text-transform: uppercase;
}
#campaign-container .form-container {
background: #fff;
max-width: 350px;
margin: 1rem auto;
padding: 3rem;
box-shadow: 0 1px 10px rgb(0 0 0 / 20%);
border-radius: 10px;
display:none; /** Set this to display:block; to display the form **/
}
</style>
<script>
let validToPass = TopBarGetCookie('campaign_password_valid');
let campaignContainerId = 'campaign-container';
const campaignPassword = 'LetMeInNow!';
if (validToPass) {
//Hide campaign container
//document.getElementById(id).style.display = 'block';
document.getElementById(campaignContainerId).style.display = 'none';
}
document.getElementById('campaign_button').onclick = function() {
if(document.getElementById('campaign_password').value === campaignPassword){
TopBarSetCookie('campaign_password_valid', 1);
document.getElementById(campaignContainerId).style.display = 'none';
} else {
alert('This is not correct password. Please wait until campaign starts ...')
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment