Front End Age Gate

Size
5,806 Kb
Views
38,456

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 Previews

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 } }); });
//]]>
Front End Age Gate - Script Codes
Front End Age Gate - Script Codes
Home Page Home
Developer Alex Rodrigues
Username alex_rodrigues
Uploaded August 13, 2022
Rating 3
Size 5,806 Kb
Views 38,456
Do you need developer help for Front End Age Gate?

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!

Alex Rodrigues (alex_rodrigues) Script Codes
Create amazing art & images with AI!

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!