<?php
	include('views/_header_r.tpl.php');
	
	if (isset($msg)) {
		//echo "<center><b>$msg</b></center><br /><br />";
		$msg = htmlentities(strip_tags($msg));
	}

	if (isset($_GET['reg_ok'])) {
		$msg = 'Registration Successful. <a href="/auth/login" style="color:#00a0ff;">Login...</a>';
	}

	if (isset($_GET['msg'])) {
		$msg = htmlentities(strip_tags($_GET['msg']));
	}
	
	if (isset($_GET['grp'])) {
		$group_id = htmlentities(strip_tags($_GET['grp']));
		$list_group = $group_info['groupname'];
	}
	
	// If the user is logged in and a group ID is in their link
	if (isset($_SESSION['user']['id'])) {
		$hidesignup = "display:none;";
		
		if ($notvalid !=1) {
			if (isset($_GET['grp'])) {
				$message = "
				<img src='/static/client/voicetrivia_logo_h.png' alt='Home'
			style='max-height: 100px; max-width:600px; width:80%; padding:0 10px;'>
			<br />
			<div style='margin:0 15px;'><div class='groupinvite'
			style='border:0px dashed #fff; padding:10px 10px; max-width:600px; margin:0 auto; font-size:17px;
			line-height:27px;'>You were invited to the
			group <span style='font-weight:600'>" . $list_group . "</span> by <strong>" . $referrer_name . "</strong> - Accept
			their invite...<br /><br />
			<a href='/group/acceptInvite/" . $group_id . "/" . $_SESSION['user']['id'] . "'
			style=''>Accept Invite &raquo;</a></div></div><div style='display:none; border-bottom:1px solid #fff; width:200px; margin:0 auto;'>&nbsp;</div>";
				//echo "Logged in";
			} else {
				$message = "
				<img src='/static/client/voicetrivia_logo_h.png' alt='Home'
			style='max-height: 100px; max-width:600px; width:80%; padding:0 10px;'>
			<br />
			<div style='margin:0 15px;'><div class='groupinvite'
			style='border:0px dashed #fff; padding:10px 10px; max-width:550px; margin:0 auto; font-size:17px;
			line-height:27px;'>You were referred by <strong>" . $referrer_name . "</strong> - Accept their invite...<br /><br />
			<a href='/group/acceptInvite/" . $referrer_all_id . "/" . $_SESSION['user']['id'] . "'
			style=''>Accept Invite &raquo;</a></div></div>";
			}
		} else {
			// NOT A VALID REFERRAL CODE 
			$message = "
			<img src='/static/client/voicetrivia_logo_h.png' alt='Home'
			style='max-height: 100px; max-width:600px; width:80%; padding:0 10px;'>
			<br />
			<div style='margin:0 15px;'><div class='groupinvite'
			style='border:0px dashed #fff; padding:10px 10px; max-width:600px; margin:0 auto; font-size:17px;
			line-height:27px;'>
				Ooooops, that Referral Code is no longer valid.<br /><br />
				<a href='/auth/register?clear' style='' title='Ok'>Ok, got it &raquo;</a>
			</div></div><div style='display:none; border-bottom:1px solid #fff; width:200px; margin:0 auto;'>&nbsp;</div>";
		}	
	} else {
		// UNLOGGED - we should have a GET['ref']
//		if (isset($_GET['msg']) && $_GET['msg'] = "Oooops") {
//			$not_valid;
//		}
		
		if (getReferralFromCookie()) {
			$message = "<div style='margin:0 15px;'><div class='groupinvite'
			style='border:0px dashed #fff; padding:10px 10px 0; max-width:550px; margin:0 auto; font-size:17px; 
			line-height:27px; text-align:center'>You were referred
			by <strong>" . $referrer_name . "</strong>.<br />
			<center><a href='/auth/login?r=" . getReferralFromCookie() ."&grp=" . $referrer_all_id . "' style='min-width:120px'>Login &raquo;</a></center>
			</div></div>";
			
			$mobile_message = "<div style='margin:0px; background:#f11303; color:#fff; border:1px solid #fff;
			border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;'>
			<div class='cleanlink' style='border:0px dashed #fff; padding:10px; 
			max-width:550px; margin:0 auto; font-size:19px;
			line-height:27px; font-weight:500; text-align:center'>
				<span style='color:rgba(255,255,255,.5);'>You were referred by</span><br />
				<div style='font-size:22px; margin-top:7px;'>
				<strong><a href='/profile/". getReferralFromCookie() ."' style='background:none; padding:0;'>" . getReferralFromCookie() . "</a></strong>
				</div>
				<div style='margin-top:7px; font-size:16px; line-height:24px; color:rgba(255,255,255,.5);'>
					Scroll down to sign up access more lessons + create your own...
				</div>
			</div></div>";	
			
			$desktop_message = "<div style='margin:0px; background:#f11303; color:#fff; border:1px solid #fff;
			border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;'>
			<div class='cleanlink' style='border:0px dashed #fff; padding:10px;
			max-width:550px; margin:0 auto; font-size:19px;
			line-height:27px; font-weight:500; text-align:center'>
				<span style='color:rgba(255,255,255,.5);'>You were referred by</span><br />
				<div style='font-size:22px; margin-top:7px;'>
				<strong><a href='/profile/". getReferralFromCookie() ."' style='background:none; padding:0;'>" . getReferralFromCookie() . "</a></strong>
				</div>
				<div style='margin-top:7px; font-size:16px; line-height:24px; color:rgba(255,255,255,.5);'>
					Sign up to access more lessons + create your own...
				</div>
			</div></div>";	
		} 
		
		//else { 
		//	echo "Oooops, that referral code is not valid any more.";
		//}
	}	
?>

<style type="text/css">
	html {
		background:#000 url('/static/images/lbstartup.jpg') no-repeat center center !important;
		background-size: 500px !important;
		background-color: #232323 !important;
		overflow:hidden !important;
		height:100%;
	}
	body { background:#000; height:100vh; overflow:hidden; }
	.groupinvite a {
		color:#000; text-shadow:1px 1px 1px rgba(0,0,0,.4);
		background:#00cf0f;
		border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
		padding:5px 15px;
		font-size:14px;
		font-weight:600;
		display:inline-block;
		margin:15px 0 10px;
		text-align:center;
	}
/*	.groupinvite a:hover {
		background:red;
	}*/
    input[type="text"], input[type="password"] {
		margin-top:7px;
        /*border:1px solid rgba(255,255,255,.3) !important;*/
		border:1px solid #eee !important;
		background:#fff;
		color:#222;
		border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
    }	
    input[type='checkbox'] {
		transform: scale(1.5);
	} 
	label {
		font-size: 12px;
	}
	a, a:active, a:visited, a:link { 
		color:#3698d7; /* 2778ff */
	}
	a:hover {
		color: #40b6ff;
	}
	input[type="submit"] { 
		color:#eee;
		background:#2778ff;
		border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}
	input[type="submit"]:hover {
		background:#2493fe;
	}	
	::placeholder {
		/* Chrome, Firefox, Opera, Safari 10.1+ */
		color: #bbb;
		opacity: 1; /* Firefox */
	}

	:-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: #bbb;
	}

	::-ms-input-placeholder {
		/* Microsoft Edge */
		color: #bbb;
	}
	.cleanlink a, .cleanlink a:active, .cleanlink a:visited {
		text-shadow:0px 1px 0px rgba(0,0,0,.4);
		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important;
		-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important;
		-moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important;		
	}
	#errordiv a,
	#errordiv a:active,
	#errordiv a:visited {
		background: #21bb29;
		color: #eee;
		border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
		padding: 3px 10px;
		font-weight: 800;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}

	#errordiv a:hover {
		color: #fff;
		background: #26e12f;
	}	
	
	.clearref a,
	.clearref a:active,
	.clearref a:visited {
		display:block;
		max-width:100px;
		margin:0 auto;
		font-size:12px;
		background:#eee;
		padding:5px 15px;
		border:1px solid #ddd;
		border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}
	.clearref a:hover {
		background:#2778ff;
		color:#fff;
	}
	
	h1 {
		font-size: 22px;
		line-height:27px;
		font-weight:600;
		border-bottom:0px solid #ccc;
		padding-bottom:10px;
		letter-spacing: 2px;
	}
	.simpletext {
		max-width:85%;
		font-size:19px; line-height:27px;	
	}
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 0px;
		height: 0;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.desktop_ref {
		display:block;
	}
	.mobile_ref {
		display: none;
	}
		
/* ########################################################################## */
/*                               MOBILE STYLES                                */
/* ########################################################################## */

/******************************************************************************/ 
/***************        LARGE DESKTOP DISPLAY SCREENS         *****************/
/******************************************************************************/ 
/* So, iMac is 2554 */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 2554px) and (max-width: 3200px) {
	.container_12 {
		width:100%;
		max-width:1700px; margin:0 auto;
	}
}	

/******************************************************************************/ 
/***************      VERY LARGE DESKTOP DISPLAY SCREENS      *****************/
/******************************************************************************/ 
/* This is the 2nd screen connected to the iMac */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1922px) and (max-width: 2553px) {
	.container_12 {
		width:100%;
		max-width:1700px; margin:0 auto;
	}
}	

/******************************************************************************/ 
/***************      VERY LARGE DESKTOP DISPLAY SCREENS      *****************/
/******************************************************************************/ 
/* This is the 2nd screen connected to the iMac */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1920px) and (max-width: 1921px) {
	.container_12 {
		width:100%;
		max-width:1700px; margin:0 auto;
	}
}	
	
/******************************************************************************/ 
/***************        LARGE DESKTOP DISPLAY SCREENS         *****************/
/******************************************************************************/ 

/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1441px) and (max-width: 1919px) {
	.container_12 {
		width:100%;
		max-width:1700px; margin:0 auto;
	}
}		

/******************************************************************************/ 
/***************        MACBOOK AIR DISPLAY SCREENS         *****************/
/******************************************************************************/ 

/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1367px) and (max-width: 1440px) {
	.container_12 {
		width:100%;
		max-width:1500px; margin:0 auto;
	}
}	

/******************************************************************************/ 
/***************      SMALLER THAN FULL SCREEN MACBOOK        *****************/
/******************************************************************************/ 

@media (min-width: 1364px) and (max-width: 1366px) {

}	
	
/******************************************************************************/ 
/***************       MACBOOK AIR SCREENS AND 1280 X 800     *****************/
/******************************************************************************/ 

@media (min-width: 1280px) and (max-width: 1363px) {

}		

/******************************************************************************/ 
/********************             Larger iPads           **********************/
/******************************************************************************/ 

@media (min-width: 1024px) and (max-width: 1279px) {

}
	

	/* Landscape tablet to iPads */
	@media (min-width: 980px) and (max-width: 1023px) {

	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {
		.blockit {
			display:block;
			width: 100%;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
			border-right:0px;
			padding:0 !important;
		}
		.grid_4 {
			margin: 0 !important; padding:0 !important; border-left:0px;
		}

	}

	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {
		.blockit {
			display:block;
			width: 100%;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
			border-right:0px;
			padding:0 !important;
		}
		.grid_4 {
			margin: 0 !important; padding:0 !important; border-left:0px;
		}		
	}

	/* Landscape phones and down */
	@media (max-width: 586px) {
		.simpletext { 
			max-width:100%;
			padding:0 15px;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
		}
		.desktop_ref {
			display:none;
		}
		.mobile_ref {
			display: block;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.groupinvite a {
			color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.4);
			background:#00cf0f;
			border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
			padding:5px 25px;
			font-size:18px;
			height:40px;
			line-height:40px;
			font-weight:600;
			display:inline-block;
			margin:10px 0;
			text-align:center;
		}
	}	

	/* Older phones with super small screens */
	@media (max-width: 320px) {

	}		
</style>

<img src="<?php if (!empty($website_options['mobile_background'])) : ?>/<?= $website_options['mobile_background'] ?><?php else : ?>/static/images/mobbg.jpg<?php endif; ?>" style="position:absolute; background:cover; object-fit:cover; top:0;
left:0; bottom:0; right:0; min-height:100%; height:100vh; width: auto; min-width:100%; padding-top:0px !important; padding-bottom:0px !important; margin-bottom:0px !important; z-index:-999;" alt="BG" />

 <div class="home-feature-category" style="background:#f0f0f0; border:none; overflow:hidden;">
	 <div class="container_12 clearfix" style="<?= $hidesignup ?>" style="">
	
		<br /><br />
		<div class="titletext" style="line-height:50px; text-align:center; color:#222; margin:20px 0;">
			 
			 <div style="position:absolute; left: 15px;"><a href="/" style="color:#bbb; float:left">
			 <i class="fa fa-angle-left" aria-hidden="true"></i></a></div>
			 
<!--				 <div id="player-overlay" style="margin-top:-67px; margin-bottom:-30px;">
				 	<video playsinline="" autoplay="" loop="" muted="" preload="auto" poster="static/client/sayabcs_logo.png" id="videobcgx" class="XXfullscreen-bg__video" style="width:85%; max-width:600px;">
				 		<source src="static/client/sayabcs_logo.mp4">
				 		<source src="static/client/sayabcs_logo.webm" type="video/webm">--&gt;Sorry, your browser does not support HTML5 video.
				 	</video>
				 </div>-->
			 
			<a href="/"><img src="/static/client/voicetrivia_logo_h.png" alt="Voice Trivia"
			style="max-width:750px; width:75%; padding:0 10px; margin-bottom:0px"></a>
			<!--<br />
			<img src="/static/client/logoslogan.png" alt="Voice-activated trivia - for every topic" 
			style="width:65%; max-width:450px; margin-top:-40px; margin-bottom:15px;">-->
<!--			<?php if (!empty($website_options['mobile_logo'])) : ?>
				<h1>
					<a href="/"><img src="/<?= $website_options['mobile_logo'] ?>"
					style="width: auto; max-width: 170px; height: 50px; margin-top:3px;" alt="ChattrBox" 
					align="absmiddle" /></a> Join free!
				</h1>
	        <?php endif; ?>-->
		</div>
		<div class="grid_8 blockit" style="min-height:95vh; line-height:29px; color:#222;
			text-shadow:0px 1px 0px rgba(255,255,255,.5); text-align:left; padding-top:10px">
			<!--<br />-->
			
			<div class="simpletext" style="padding:0 15px; margin:0 auto;">
				
				<div class="mobile_ref">
					<?php
					if (isset($mobile_message)) {
						echo "<div id='errordiv' style='line-height:25px; text-align:left; 
						background:none; color:#222; padding:0px 15px 5px;
						margin:0px 5px 10px 5px; font-weight:300; font-size:15px;'>
							$mobile_message
						</div>";
					}
					?>
				</div>	
				
				<div class="desktop_ref">
					<?php
				if (isset($desktop_message)) {
					echo "<div id='errordiv' style='line-height:25px; text-align:left;
						background:none; color:#222; padding:0px 15px 5px;
						margin:0px 5px 10px 5px; font-weight:300; font-size:15px;'>
							$desktop_message
						</div>";
				}
				?>
				</div>
				
				<h2 style="font-weight:400; font-size:32px; line-height:38px; margin-bottom:15px; 
					text-align:center; font-family:Montserrat,Raleway,Helvetica,Verdana, sans-serif;">
					TRIVIA RE-INVENTED
					<!-- MAKE MONEY CREATING YOUR OWN LΞSSONS -->
					<!--<span style="color:#00D315; font-weight:400">57</span> SECONDS-->
				</h2>
				
				<div style="background:#fff; padding:15px; text-align:center; font-size:19px; line-height:29px;
					border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;">
					
					<br />
					Create your own Trivia Sets and earn cash for hosting your own Trivia Challenges 
					made up of either your own questions or questions created by other members.
					
					<br /><br />
					You get to set the entry price for users to play, as well as receive 10-20% of 
					the prize pool. And, you earn 10% of the winnings of every member you refer.
					
					<!--Say ABCs uses cutting-edge voice-recognition technology to help your kids
					learn and memorize almost anything 10Xs faster than every other traditional 
					method. 
					<br /><br />
					Our Founder built it to help his kids learn their emergency information
					(parents first and last names, phone numbers and home address), as well as 
					other core learning basics - like the ABCs, Numbers (up to 100), differentiating
					Vowels, Numbers in Tens (ie. 10, 20, 30, etc) - in a way that they could easily
					do it themselves <i>and</i> be tracked - since he and his wife were so busy
					all the time.
					<br /><br />
					He then realized they were always bribing their kids with toys to just do
					basic things, which didn't equal out. So he built in an easy-to-use, universal
					Rewards System based around none other than - Gold Stars. And, the tech is 
					insane...try it.-->
					
					
					<!--Hi. I'm Ken. Me and my wife (yeah, I know that's not correct English) have been
					getting our butts kicked by toddlers - and now a soon to be kindergartener - 
					for the last couple of years to the point where we can hardly even think
					straight half the time.
					
					<br /><br />
					Over the last year, Lori started to say to me how bad of parents she feels like
					we are - and I'm like "Speak for yourself, don't put me in that. I'm awesome." Jk.
					
					<br /><br />
					What I did say was "I can fix this" (being a tech guy) to which she was like 
					"Yeah, whatever".
					
					<br /><br />
					Well, our two little gremlins kept kicking our butts and one day I just put my foot
					down during a holiday weekend and built this thing.
					
					<br /><br />
					
					My first mission was to urgently help my daughter with memorizing emergency contact
					info, which we realized she didn't know - and that made us immediately panic and paranoid.
					
					<br /><br />
					
					Mommy (and Daddy's) phone numbers - her home address. Our last names, heck, our first
					names. She went through this period of calling me "Ken" (emphatically) and I
					would roll my eyes and feel like now I have 2 of them doing that (her mom being the other).
					Thank goodness that stopped.
					
					<br /><br />
					Then, all this other stuff was coming up, like her numbers - up to 100. Numbers in 10s (ie
					10, 20, 30, etc)
					
					You can create awesome lessons, exercises, Say ABCs collections and more,
					then earn cash by sharing them with others.-->
					
					<!--The first 10,000 Members who sign up will receive 10% of the company (ie. 
					250 complimentary Equity Shares in LLC).--> <!--<a href="/founding" 
						title="Founding Members - 10% Members Club" style="font-weight:600;">Learn more
						<i class="fa fa-angle-right" aria-hidden="true"></i></a>-->
					<br /><br />
					<!--In addition, we&rsquo;ll soon be launching a daily prize giveaway program
					for our VIPs and Premium Members (who pay monthly to enjoy zero DealHacks fees).-->
					<!--And, if you&rsquo;re interested in owning a bigger piece of the tech pie, 
					we&rsquo;ve reserved 75% of the company for our Members. Check out our <a href="/ownership"
					title="VIP DevShares Ownership" style="font-weight:600;">VIP Ownership Program
					<i class="fa fa-angle-right" aria-hidden="true"></i></a>-->
				</div>
				
				<!--Save thousands on all your Development, Design and Freelancer needs by co-funding
				projects, job positions and more with others who have similar needs.
				<br /><br />
				DevShares was created on the idea that sometimes projects have so many similarities
				and similar features that if you could just find those other people - you could
				co-fund your project (or shared job position) thereby cutting your costs in half or more. 
				<br /><br /> 
				In addition, you can get a variety of affordable, <a href="/managed-services" 
				title="Managed Service Requests" style="font-weight:600;">on-demand 
				services and tech support</a> performed as low as 
				<span style="font-weight:600;">$4.99 per task</span>.-->
				<!--So many people are out there talking like AI is going to replace humans soon - 
				well, if that&rsquo;s the case then it means that the <i>things</i> humans create
				are replicatable enough for that to even happen. 
				<br /><br />
				As far as technology goes, DevShares is actually rooted in the notion that <i>most</i> 
				of technology is built around many of the same fundamental features and functions.
				We call it modular engineering and development. With that in mind, we&rsquo;ve
				seen tons of Clients with such similar needs that an average of about 50-70% of 
				most types of projects tend to be nearly the exact same as others.
				<br /><br />
				So, we created DevShares so people could find others with similar projects and needs
				- and combine their budgets to get hand-curated Developers, Engineers, Designers
				and Freelancers to carry out the work for the whole group, simultaneously. Thus,
				reducing the budget (and time) required from any one individual or business, while at the same
				time expanding the budget for the Freelancer(s) or Provider(s) peforming your work. 
				<br /><br />
				This also leaves additional budget for DevShares to optionally assist you with 
				on-demand, in-house Project Management, as well as QA Testing - not to mention
				vetting and interviewing Freelancers and Providers until we think we&rsquo;ve
				found one or two who you&rsquo;d think are a perfect fit.
				<br /><br />
				Development Projects and Freelancing might soon be totally automated by AI, 
				but until then DevShare it and we&rsquo;ll make the process the smoothest 
				thing you&rsquo;ve ever seen.-->
			</div>
			<br />
			<div style="border-top:2px solid #ccc; width:175px; margin:0 auto;">&nbsp;</div>
			
			<div style="display:none; letter-spacing: 2px; font-size:14px; 
			font-family:Montserrat,'Open Sans', Raleway,sans-serif; text-align:center; margin-bottom:-20px;">
			
				<a href="/how-it-works" style="color:#000; font-weight:300;">SAY ABCs IN 38 SECONDS</a>
			</div> 
			<div class="clear"></div>
			<br />
			
			<div style="height:625px; width:320px; position:relative; margin:0 auto">
				<div style="background:url('/static/iphonex_graphic_bg.png') no-repeat;
					    background-size: 320px 625px; height:625px; width:320px; z-index:999999;
					    position:absolute; top:0;
					    right:0; bottom:0; left:0"></div>

				<video id="myVideo" width="260" height="560" controls playsinline muted loop="true"
						autoplay="autoplay" style="margin:30px 30px;">
					<source src="/static/client/voicetriviapreview.mp4" type="video/mp4">
					Your browser does not support the video tag.
				</video>

			</div>
			<div class="clear"></div>
			
			<center> 
				<!-- MY VERSION 8NPvZ-RyN60 FlipMob https://youtu.be/85KMvXTFecY 
				DevShares https://www.youtube.com/embed/uPYB3F2QMIQ -->
				<div class="videoWrapper" style="display:none;
				text-align:center; max-width:560px; max-height:315px; overflow:hidden;">
					<iframe width="560" height="315" src="https://www.youtube.com/embed/85KMvXTFecY"
					title="FlipMob Video Promo" frameborder="0"
		            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
					style="border:1px solid #ddd; padding:10px; -webkit-box-sizing: border-box;
					-moz-box-sizing: border-box; max-height:315px; background:#fff;
					box-sizing: border-box;" class="videoiframe"
		            allowfullscreen></iframe>
				</div>
			</center> 
			
			<!--<center><a href="/how-it-works"><img alt="Jolly Dispatch Pictorial" 
			src="/static/client/pictorial.png"
			style="max-width:900px; margin:0 auto; width:100%; margin:0 auto;"></a></center>-->
		</div>
		<div class="grid_4 blockit" style="background:none; border-left:1px solid #ccc; 
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
	
		<!-- removed id="form" | but might need to add this: action="" enctype="multipart/form-data" -->
		<form method="post" id="signup-form" action="" enctype="multipart/form-data" 
			action="" enctype="multipart/form-data"
			style="color:#000; text-align:center; width:98%; 
			max-width:390px; margin:0 auto !important; -webkit-box-sizing: border-box; 
			-moz-box-sizing: border-box; box-sizing: border-box;">
					
				<h1>Sign Up free!</h1>	
				
				<div style="display:none; font-size:17px; line-height:20px; margin-bottom:5px;">
					<!--<i class="fa fa-paper-plane" aria-hidden="true"></i> --><!--Create 1 Listing free-->
					Create your own lessons free now!
				</div>
				<!--<br />-->
				
				<!--<?php print_r(getReferralFromCookie()); ?>-->
					
				<?php if (!$_GET['ref']) : ?>
					<div style="font-size:16px; margin-bottom:7px;">
						<?php if(getReferralFromCookie()){
							echo "You were referred by: ";	
						} else {
							echo "Enter referral code (optional)";
						} ?>
					</div>
											
					<input type="text" id="userefcode" name="refby" value="<?php echo getReferralFromCookie(); ?>" 
					placeholder="Enter referral code (optional)" style="width:75%;" maxlength="23" />
				<?php elseif ($_GET['ref']) : ?>	
					<span style="font-size:14px;">Referred eh? Their code is loaded below:</span><br />
					<input type="text" id="userefcode" name="refby" value="<?= $_GET['ref'] ?>" maxlength="23"
					placeholder="Enter referral code (optional)" style="width:75%;" />
				<?php endif; ?>		
							
				<br />
				
				<a href='/auth/join?clearref' style='font-size:12px; color:#777'>Clear Referral</a>
				<br />
				
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; margin-bottom:5px;"></div>
				<div style="display:inline-block; width:50px; font-size:13px;">&nbsp;</div>
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; margin-bottom:5px;"></div>
				<br />
				
				<span style="font-size:15px">Choose a unique @username:</span><br />
				<input name="refcode" id="ref" class="noSpacesField" maxlength="23"
				type="text" placeholder="Type username (without @)" 
				style="margin-top:7px; width:75%;" />
				<br />
				<!-- removed: text-shadow:0px -1px 1px rgba(0,0,0,.5) -->
				<div id="username_availability_result"
				style="height:25px; line-height:25px; font-size:15px; margin-bottom:5px;"></div>
				
				<input name="usertype" id="" type="hidden" placeholder="Consumer" value="Consumer" 
				style="width:75%;" />
				
				<input name="list_group" id="" type="hidden" placeholder="ListGroup (Optional)" 
				style="width:75%;" value="<?php if (isset($_GET['grp'])) { echo $list_group; } ?>" />
				
				<input name="group_id" id="" type="hidden" placeholder="" 
				style="width:75%;" value="<?php if (isset($_GET['grp'])) { echo $_GET['grp']; } ?>" />
				
				<!--<input name="owner" id="" type="hiddenxxx" placeholder="" 
				style="width:75%;" value="<?php if (isset($_GET['ref'])) { echo $_GET['grp']; } ?>" />-->

				<label>Business Name (optional):</label>
				<input name="occupation_at" id="" type="text" placeholder="Business Name" style="width:75%;" />
				<br /><br />
				
				<!--<label>Business Type:</label><br />-->
				<select name="bus_type" id="" class="txt" style="width:100%; max-width:314px;
				height: 48px; font-size:15px; font-weight:300;
				border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
				line-height: 35px; padding: 5px; border: 1px solid #eee; background: #fff;">				
					<option value="">Select Business Type (optional)</option>
					<option value="LLC">LLC</option>
					<option value="Corp">Corporation</option>
					<option value="SCorp">S Corp</option>
					<option value="SoleProp">Sole Proprietor</option>
					<option value="Other">Other</option>		
				</select>
				<br /><br />
				
				<select name="acct_type" id="" class="txt" style="width:100%; max-width:314px;
				height: 48px; font-size:15px; font-weight:300;
				border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
				line-height: 35px; padding: 5px; border: 1px solid #eee; background: #fff;">
					<option value="">Select Account Type (optional)</option>
					<option value="Artist">Artist</option>
					<option value="MusicianBand">Musician/Band</option>
					<option value="Blogger">Blogger</option>
					<option value="ClothingBrand">Clothing/Brand</option>
					<option value="Community">Community</option>
					<option value="Digital Creator">Digital Creator</option>
					<option value="Education">Education</option>
					<option value="Entrepreneur">Entrepreneur</option>
					<option value="HealthBeauty">Health/Beauty</option>
					<option value="Editor">Editor</option>
					<option value="Writer">Writer</option>
					<option value="Personal Blog">Personal Blog</option>
					<option value="Product/Service">Product/Service</option>
					<option value="Gamer">Gamer</option>
					<option value="Restaurant">Restaurant</option>
					<option value="BeautyCosmetic">Beauty, Cosmetic & Personal Care</option>
					<option value="Grocery Store">Grocery Store</option>
					<option value="Photographer">Photographer</option>
					<option value="Shopping & Retail">Shopping & Retail</option>
					<option value="Video Creator">Video Creator</option>
					<option value="Dance Studio">Dance Studio</option>
					<option value="Gymnastics">Gymnastics</option>
					<option value="Default">Other</option>
					<!--<option value="Default">Default</option>-->
				</select>
				<br /><br />
				
				<!--movementandsounddance
				Movement & Sound Dance, LLC-->
					
				<label>First or Full Name:</label>
				<input name="name" id="txt_name" type="text" placeholder="full name" style="width:75%;" />
				<br /><br />
				<input type="text" name="email" placeholder="your email" id="email" style="width:75%;" />
				<br /><br />
				<input type="text" name="phone" placeholder="phone (optional): ###-###-####" id="phone" maxlength="12"
				 onblur="formatPhoneNumber()" style="width:75%;" />
				 <br /><br />
				<input type="password" name="password" placeholder="password" id="password" 
				style="width:75%; margin-left:22px" />
				
				<img src="/static/system/eye_icon_closed.png" id="eye" alt="Show" 
				align="right" style="height:15px; width:25px; margin-top:25px; margin-left:-12px; margin-right:10px" 
				onclick="myFunction()" />
				
				<br /><br />
                       <!--<input type="hidden" name="account_type" value="Person" />-->
                       <span style="text-align:left; font-size:14px;">
                       	<!-- removed name="check_terms" -->
						<input id="check_terms" class="txt" type="checkbox" style="width:25px; margin-bottom:1px" />
						I Agree to the <a href="/terms" style="">Terms</a>.
						</span>
				<br /><br />			
				<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
				<input type="submit" value="Register" id="signup-submit" class="btn-o register-trigger"
				style="width:80%; padding-left:10px; padding-right:10px; margin:7px 0;" />
				
				<br /><br />
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; margin-bottom:5px;"></div>  
				<div style="display:inline-block; width:50px; font-size:13px;"> <i>or</i> </div>
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; margin-bottom:5px;"></div>
				<!--<br />
                <a href="/auth/loginFacebook" class="btn btn-fb connect-fb" 
				style="width:70%; font-family:'Open Sans',sans-serif; font-size:15px; 
				margin-top:7px; font-weight:300;"><i class="fa fa-facebook"></i> &nbsp;&nbsp;Register with Facebook</a>-->
                <br /><br />
				<span style="font-size:18px;">Already have an account?</span> <a href='/auth/login' 
				style='font-size:18px;'>Login &raquo;</a>
				<br /><br />
				<a href="/" style='font-size:17px;'>&laquo; Back to Home</a>
				<br /><br /><br /><br /><br />
			</form>
			
		</div><!-- GRID 4 -->
		<div class="clear"></div>
		<br />
	</div><!-- CONTAINER 12 -->
</div><!-- HOME FEATURE -->

<!-- ////////////////////////////////////////////////////////////// -->
<script>
	$(document).ready(function() {
		
		$(function() {
			$('.noSpacesField').bind('input', function() {
				$(this).val(function(_, v) {
					return v.replace(/\s+/g, '');
				});
			});
		});	
	}); 
	
	function myFunction() {
	  //alert(window.document.eye.src);
	  var x = document.getElementById("password");
	  var eye = document.getElementById("eye");	
	  if (x.type === "password") {
	    x.type = "text";
		eye.src = "https://voicetrivia.com/static/system/eye_icon_open.png";
	  } else {
	    x.type = "password";
		eye.src = "https://voicetrivia.com/static/system/eye_icon_closed.png";
	  }
	};
	
	// DOCUMENT READY ENDS		
	///////////////////////////////////////////////////////////
		
	function validateEmail($email){
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		return emailReg.test( $email );
	}		
	
	// SIMPLER PHONE FORMATTING // USE maxlength="12" in the input tag
	$('#phone').keydown(function(e){
	             var key = e.charCode || e.keyCode || 0;
	             $text = $(this); 
	             if (key !== 8 && key !== 9) {
	                 if ($text.val().length === 3) {
	                     $text.val($text.val() + '-');
	                 }
	                 if ($text.val().length === 7) {
	                     $text.val($text.val() + '-');
	                 }
	             }
	             return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
	});

	// FORMAT PHONE NUMBERS
	function formatPhoneNumber() {
	  	var phone = $("#phone").val();
		var cleaned = ('' + phone).replace(/\D/g, ''); // 3125551234
		//alert(cleaned.length);

		if(cleaned.length < 10) {
	        alert('Looks like you entered ' + cleaned.length + ' digits, instead of 10. Please enter your phone number like ###-###-####');
	    } 
		return null;
	}	
	
	//IF THE USER ENTERS A REFERRAL CODE
	var code = $("#userefcode").val();
	
	// if there's already a referral code in the input field
	if (code) {
		check_org();
	}

	$('form').on('keyup', '#userefcode', function(){	  
		//e.preventDefault();
		check_org();
	});

	// once the user starts entering something, do this
	function check_org(){
		var code = $("#userefcode").val();
		
		//alert('Code: ' + code);
		
//		var ref_length = $("#userefcode").val().length;
//		if (ref_length === 0) {
//			$("#userefcode").css("background", "rgba(0,0,0,.4);");
//		} 
		//alert('Length: ' + ref_length);

		$.ajax({
		  url: "/auth/validatePC",
		  type: "POST",
		  data: {c: code},
		  success: function(d) {
				//alert('Typing..');
				//alert(d);
				if (d > 0) {
				  //alert('We found your Referral Code!');	
				  $("#userefcode").val(code); 
				  $("#userefcode").css("background", "#27C427");
				  //$("#refmsg").html("Your Organization Name looks valid!");
				  //$('#username_availability_result').html('<span style="color:#29CE29; font-weight:bold;">' + ref + '</span>' + ' is Available!');
				} else {
					//alert('No');
				  //alert('Ooops we could not find that Organization.');
				  $("#userefcode").css("background", "#cd1000");
				  //$("#refmsg").html("Continue typing until the background turns green, which indicates your Company Name is valid.");
				} 
				return false;
		  }// success
		}); // ajax
		return false;
    }
	
	// NOW, LET'S CHECK TO SEE IF THE USER'S CUSTOM REFERRAL CODE ALREADY EXISTS
	//when button is clicked or keyup
	$("#ref").keyup(function(){  
		var user_slug = $("#ref").val().toLowerCase().replace(/[^a-zA-Z0-9 _]/g,'');

//		var user_slug = $('input[name="refcode"]').val();
//		user_slug = user_slug.toLowerCase().replace(/[^a-zA-Z0-9 _]/g,'');
		$('input[name="refcode"]').val(user_slug);	
		
		//the min chars for ref
		var min_chars = 3;

		//result texts
		var characters_error = 'Minimum amount of chars is 3';
		var checking_html = 'Checking...';

		// $('#check_username_availability').click(function(){  
		//run the character number check  
		if($('#ref').val().length < min_chars){  
			//if it's bellow the minimum show characters_error text '  
			$('#username_availability_result').html(characters_error);  
		}else{  
			if ($('#ref').val().length > 23) {
				alert('Oooops, 23 characters is the limit. Keep it short and sweet!');
			}
			//else show the cheking_text and run the function to check  
			$('#username_availability_result').html(checking_html);  
			check_availability();  
		}  
	});  

	// CHECK TO SEE IF THE CUSTOM REF IS AVAILABLE
	//function to check ref availability  
	function check_availability(){  
		//get the ref  
		var ref = $("#ref").val().toLowerCase().replace(/[^a-zA-Z0-9 _]/g,''); 
		//var ref1 = isValidEmailAddress(reffield); 
		
		if(ref) {
			$.ajax({
			  url: "/auth/checkRef",
			  type: "POST",
			  data: {ref: ref},
			  success: function(result) {
				if (result == 1) {
					$('#username_availability_result').html('<span style="color:#29CE29; font-weight:bold;">' + ref + '</span>' + ' is Available!');  	
				}
				else {
					$('#username_availability_result').html('Sorry, <span style="color:#ff0000; font-weight:bold;">' + ref + '</span>' + ' is not Available');
				}
				return false;
			  }
			});
			return false;
		}			
  
		//use ajax to run the check  
		//$.post("check_username.php", { username: username },  
		//	function(result){  
				//if the result is 1  
		//		if(result == 1){  
					//show that the username is available  
		//			$('#username_availability_result').html(username + ' is Available!');  
		//		}else{  
					//show that the username is NOT available  
		//			$('#username_availability_result').html(username + ' is not Available');  
		//		}  
		//});  
	  
	}   		
</script>

<!--<script src="https://www.google.com/recaptcha/api.js"></script>-->
<script src="https://www.google.com/recaptcha/api.js?render=6LczIiAqAAAAAKj5ZaJ8rHmoKFeg5d8JQIJZERPG"> </script>

<script>

	window.onload = function() {
		$('#signup-submitXXX').click(function ($event) {
			$event.preventDefault();
			//alert('Sign up submit...Click detected...');
			
			if (! $("#txt_name").val().length) {
				$event.preventDefault();
				alert('You must enter your first name or full name.');
				return false;
			}	
			
			//$('#signup-form').submit();
		});
		
		$('#check_terms').click(function () {
			//alert('Terms checked!');
			grecaptcha.ready(function() {
				grecaptcha.execute('6LczIiAqAAAAAKj5ZaJ8rHmoKFeg5d8JQIJZERPG', {action: 'submit'}).then(function(token) {
					$('#g-recaptcha-response').val(token);
					//$('#signup-form').submit();
				});
			});
		});
		$('#signup-submit').click(function (e) {
			//alert('Sign up submit...Click detected... captcha version');
			//$('#signup-form').submit();
			//alert('Signup form submitted');
			//alert('Submit button clicked...');
//			if (!document.getElementById('signup-form').checkValidity()) {
//				alert('Not valid...');
//				//return;
//			} else {
//				alert('Valid');
//			}

			e.preventDefault();
			
			if (! $("#ref").val().length) {
				e.preventDefault();
				alert('You must enter a username.');
				return false;
			}
			
			if (! $("#txt_name").val().length) {
				e.preventDefault();
				alert('You must enter your first name or full name.');
				return false;
			}

			if (! $("#email").val().length) {
				e.preventDefault();
				alert('You must enter an email addressssss.');
				return false;
			}

			var email = $("#email").val();
			//alert("Email: " + email);

			if ( !validateEmail(email)) {
				alert(email + ' does not appear to be a valid Email Address. Please double-check it...');
				return false;
			} else {
				if (/\.(com|net)\/?$/i.test(email)) {
					//alert('Email entered: ' + email);
				} else {
					alert('FYI - Your email did not end in .com. If your email is correct, ignore this message.');
				}
			}

			if (! $("#password").val().length) {
				e.preventDefault();
				alert('You must enter a password.');
				return false;
			}

			if ($("#password").val().length < 7) {
				e.preventDefault();
				alert('You must enter a password that is at least 7 characters or more.');
				return false;
			}

			if (! $("#check_terms").is(":checked")) {
				e.preventDefault();
				var confirm_box = confirm('You must check the Terms checkbox.');
				return false;
			}
			//return true;

			grecaptcha.ready(function() {
				grecaptcha.execute('6LczIiAqAAAAAKj5ZaJ8rHmoKFeg5d8JQIJZERPG', {action: 'submit'}).then(function(token) {
					// add token value to form
					//document.getElementById('g-recaptcha-response').value = token;
					$('#g-recaptcha-response').val(token);
					
					$('.loader').show();
				 
					$('#signup-form').submit();
				});
			});
		});
	}
 </script>

<?php
include('views/_footer_landing.tpl.php');
?>