Front End Age Gate
How do I make an front end age gate?
This is a front end age gate that uses jquery and jquery.cookie.. What is a front end age gate? How do you make a front end age gate? This script and codes were developed by Alex Rodrigues on 13 August 2022, Saturday.
Front End Age Gate - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Front End Age Gate</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ageWrap ageGateActive">
<div id="ageGate" style="display: block; opacity: 1; visibility: visible; top: 10px;">
<div class="border_wrap"> <form name="ageGateForm" id="ageGateForm" class="cf"> <input type="hidden" name="requiredAge" id="requiredAge" value="21"> <h4>You must be 21 years of age to enter this site.</h4> <ul> <li><label>Month <span class="format">(MM)</span></label> <input type="tel" class="ageInput" name="birthMonth" id="birthMonth" maxlength="2"></li> <li><label>Day <span class="format">(DD)</span></label> <input type="tel" class="ageInput" name="birthDay" id="birthDay" maxlength="2"></li> <li><label>Year <span class="format">(YYYY)</span></label> <input type="tel" class="ageInput" name="birthYear" id="birthYear" maxlength="4"></li> <li class="errors"></li> </ul> <input type="submit" name="submit" class="btn" value="I Agree"> </form>
</div>
</div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Front End Age Gate - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Montserrat:400,700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
@-webkit-keyframes fadeIn { 0% { opacity: 0; top: -50px; } 100% { opacity: 1; top: 0; }
}
@-moz-keyframes fadeIn { 0% { opacity: 0; top: -50px; } 100% { opacity: 1; top: 0; }
}
@-o-keyframes fadeIn { 0% { opacity: 0; top: -50px; } 100% { opacity: 1; top: 0; }
}
@keyframes fadeIn { 0% { opacity: 0; top: -50px; } 100% { opacity: 1; top: 0; }
}
* { box-sizing: border-box;
}
body { color: #333; -webkit-font-smoothing: antialiased; font-family: "Montserrat", sans-serif;
}
.ageWrap { background: #efefef; width: 100%; height: 100vh; text-align: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: center;
}
#ageGate { background: #fff; margin: 0 auto; width: 40%; padding: 2%; box-shadow: 0 0 25px -5px #bebebe; border-radius: 10px;
}
#ageGateForm h4 { font-size: 1.25em; font-weight: bold; padding: 0 0 1em;
}
#ageGateForm ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
#ageGateForm ul li { flex: 1; flex-basis: 33%; margin: 1em 0;
}
#ageGateForm label { display: block; font-size: .85em; margin-bottom: 1em; color: #676767; text-align: left;
}
#ageGateForm input[type="tel"] { font-size: 16px; padding: .5em; width: 95%; display: block; float: left;
}
#ageGateForm input[type="submit"] { appearance: none; -webkit-appearance: none; background: #6dcff6; border: 0; color: #06455e; font-weight: bold; text-transform: uppercase; font-family: "Montserrat", sans-serif; font-size: .75em; text-align: center; padding: .75em 2.5em; border-radius: 5px; letter-spacing: .025em; cursor: pointer; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
#ageGateForm input[type="submit"]:hover, #ageGateForm input[type="submit"]:active, #ageGateForm input[type="submit"]:focus { outline: 0; background: #b5e7fa; color: #0a7aa6;
}
#ageGateForm .errors { color: #e74c3c; font-weight: bold;
}
.message { font-size: 1.25em; animation: fadeIn;
}
@media only screen and (max-width: 45em) { #ageGate { width: 100%; } #ageGateForm { width: 100%; } #ageGateForm li { width: 100%; }
}
Front End Age Gate - Script Codes JS Codes
// Age Gate Used for front end validation to enter a site. Slightly modified for presentation.
//<![CDATA[
function getUrlVars() { // Find the params in the URL, Used when linking from another site that has already screened for age var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars;
}
$(window).load(function() { // If There is no Age Cookie or Cookie is set to Failed Hide Contents of Page and display Age Gate PopUp
if($.cookie('age_verify') == 'underage') { // SHOW OR HIDE PAGE
} var gateParam = getUrlVars()["agegate"];
// If Cookie is found and True Show Contents of Page and Remove Age Gate modal
if($.cookie('age_verify') == 'legal' || gateParam == 'valid' ) { console.log('TRUE') $.cookie('age_verify' , 'legal' , { expires: 1, path:'/'}); $('.ageWrap').removeClass('ageGateActive'); $('.border_wrap').empty();
}
else {
$('.border_Wrap').html('<p>Congrats.... cookie says you are over 21</p>');
}
});
// Calculate your age based on inputs
$(function(){ var day = $("#birthDay").val(); var month = $("#birthMonth").val(); var year = $("#birthYear").val();
// Disallow Letters into the Age Gate Input Fields
$('#ageGateForm input.ageInput').on('input', function() { this.value = this.value.replace(/[\s\D]/g, '', function(){ }); if ($(this).val().length == $(this).attr('maxlength')) { if($('#birthDay').val() > 31 || $('#birthMonth').val() > 12 || $('#birthYear').val() > 2014) { $(this).val(''); } if($('html').hasClass('no-touch')) { $(this).parent().next().find('input.ageInput').focus();} };
});
// FORM Submit
$("#ageGateForm").submit(function(){ var day = $("#birthDay").val(); var month = $("#birthMonth").val(); var year = $("#birthYear").val(); var age = $("#requiredAge").val(); // If Input Fields are left empty or not Formatted Correctly Display Message if (day == "" || month == "" || year == "" || month.length < 2 || day.length < 2 || year.length < 4){ $('li.errors').html("Please Fill out All Fields with the correct formatting.").slideDown(300); return false } var mydate = new Date(); mydate.setFullYear(year, month-1, day); var currdate = new Date(); currdate.setFullYear(currdate.getFullYear() - age); // If Underage Redirect to Google Homepage if ((currdate - mydate) < 0){ $.cookie('age_verify', 'underage', { expires: 1, path:'/'}); $('#ageGateForm').html("<p class='message'>Sorry, only persons over the age of " + age + " may enter this site</p>"); return false } // If Age is Validated Hide form and show contents else { $.cookie('age_verify' , 'legal' , { expires: 1, path:'/'}); $('#ageGateForm').html("<p class='message'>Congrats you are over 21... you may enter</p>"); return false } }); });
//]]>
Developer | Alex Rodrigues |
Username | alex_rodrigues |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 5,806 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Toying With Flexslider | 5,052 Kb |
Jquery Scroll test | 3,879 Kb |
Responsive Checkout Concept WIP | 6,323 Kb |
SA_testing | 2,188 Kb |
Learning FlexBox | 2,821 Kb |
A Pen by alex rodrigues | 3,920 Kb |
Responsive Table-less Shopping Cart | 6,637 Kb |
Animate delay Sass Mixin | 3,050 Kb |
Animated Bar Graphs | 3,919 Kb |
Playing with Grid | 2,224 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!