<!DOCTYPE html>
<html lang="en">
<head>

	<title>8balls - Rede de Entretenimento</title>

	<!-- Required meta tags always come first -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<!--script src="https://cdn.lr-ingest.io/LogRocket.min.js" crossorigin="anonymous"></script>
	<script>window.LogRocket && window.LogRocket.init('qbqlwn/8balls-alpha');</script!-->
	<!-- Main Font -->
	<script src="js/webfontloader.min.js"></script>
			<!-- Required meta tags always come first -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="theme-color" content="#20212b" />
		<link rel="apple-touch-icon" sizes="180x180" href="https://8balls.com.br/assets/icons/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="https://8balls.com.br/assets/icons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="194x194" href="https://8balls.com.br/assets/icons/favicon-194x194.png">
		<link rel="icon" type="image/png" sizes="192x192" href="https://8balls.com.br/assets/icons/android-chrome-192x192.png">
		<link rel="icon" type="image/png" sizes="16x16" href="https://8balls.com.br/assets/icons/favicon-16x16.png">
		<link rel="manifest" href="https://8balls.com.br/assets/icons/manifest.json">
		<link rel="mask-icon" href="https://8balls.com.br/assets/icons/safari-pinned-tab.svg" color="#5bbad5">
		<link rel="shortcut icon" href="https://8balls.com.br/assets/icons/favicon.ico">
		<meta name="apple-mobile-web-app-title" content="8balls">
		<meta name="application-name" content="8balls">
		<meta name="msapplication-TileColor" content="#20212b">
		<meta name="msapplication-config" content="https://8balls.com.br/assets/icons/browserconfig.php?cor=#20212b">
		<meta property="og:title" content="8balls - Agora fora do facebook" />
		<meta property="og:type" content="website" />
		<meta property="og:image" content="https://midia.8balls.com.br/timeline/111020/ccc75afb7bbd7f93d2143ca402d2e0d7.jpg" />
		<meta property="og:site_name" content="8balls" />
		<meta property="og:url" content="https://8balls.com.br/login.html?pagina=b"/>
		<meta property="og:description" content="Agora o 8balls está fora do facebook. Faça parte de uma rede social livre de política e ideologias."/>
		<script src="/js/webfontloader.min.js"></script>
		<script src="/sw.js"></script>
		<script>
			WebFont.load({
				google: {
					families: ['Roboto:300,400,500,700:latin']
				}
			});
		</script>
		<meta name="theme-color" content="#405b7c" />
		<link rel="apple-touch-icon" sizes="180x180" href="https://8balls.com.br/assets/icons/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="https://8balls.com.br/assets/icons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="194x194" href="https://8balls.com.br/assets/icons/favicon-194x194.png">
		<link rel="icon" type="image/png" sizes="192x192" href="https://8balls.com.br/assets/icons/android-chrome-192x192.png">
		<link rel="icon" type="image/png" sizes="16x16" href="https://8balls.com.br/assets/icons/favicon-16x16.png">
		<link rel="manifest" href="https://8balls.com.br/assets/icons/site.webmanifest">
		<link rel="mask-icon" href="https://8balls.com.br/assets/icons/safari-pinned-tab.svg" color="#5bbad5">
		<link rel="shortcut icon" href="https://8balls.com.br/assets/icons/favicon.ico">
		<meta name="apple-mobile-web-app-title" content="8balls">
		<meta name="application-name" content="8balls">
		<meta name="msapplication-TileColor" content="#405b7c">
		<meta name="msapplication-config" content="https://8balls.com.br/assets/icons/browserconfig.php?cor=#405b7c">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
		<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

		<!-- Theme Styles CSS -->
		<link rel="stylesheet" type="text/css" href="css/theme-styles.css">
		<link rel="stylesheet" type="text/css" href="css/blocks.css">
		<link rel="stylesheet" type="text/css" href="css/fonts.css">

		<!-- Styles for plugins -->
		<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
		<link rel="stylesheet" type="text/css" href="css/daterangepicker.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css">


	</head>

	<body class="landing-page">

		<div class="content-bg-wrap">
			<div class="content-bg"></div>
		</div>


		<!-- Landing Header -->

		<div class="container">
			<div class="row">
				<div class="col-xl-12 col-lg-12 col-md-12">
					<div id="site-header-landing" class="header-landing">
						<a href="02-ProfilePage.html" class="logo">
							<img src="img/logo.png" alt="8balls">
							<h5 class="logo-title">8balls</h5>
						</a>


					</div>
				</div>
			</div>
		</div>

		<!-- ... end Landing Header -->

		<!-- Login-Registration Form  -->

		<div class="container">
			<div class="row display-flex">
				<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
					<div class="landing-content">
						<h1>O 8balls agora está fora do facebook e você?</h1>
						<p>O nosso App, é feito por ballers, para ballers. Cada aspecto do seu desenvolvimento, foi pensado na melhor experiência possível para os membros. Faça parte de uma rede de entretenimento neutra, sem política e sem ideologias.
						</p>
						<!--a href="#" class="btn btn-md btn-border c-white">Registre-se Agora!</a-->
					</div>
				</div>

				<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-xs-12">
					<div class="registration-login-form">
						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li class="nav-item">
								<a class="nav-link active" data-toggle="tab" href="#home" role="tab">
									<span class="material-icons">person_add_alt_1</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="tab" href="#profile" role="tab">
									<span class="material-icons">login</span>
								</a>
							</li>
						</ul>

						<!-- Tab panes -->

						<div class="tab-content">
							<div class="tab-pane active" id="home" role="tabpanel" data-mh="log-tab">
								<div class="title h6">Registre-se agora!</div>
								<form class="content" method="POST" action="login.php?acao=registro" id="registro">
									<div class="row">
										<div class="col-lg-12 col-md-12">
											<div class="form-group label-floating is-empty">
												<label class="control-label">Nome Completo</label>
												<input class="form-control" placeholder="" type="text" id="cadastro_nome">
											</div>
										</div>
										<div class="col-xl-12 col-lg-12 col-md-12">
											<div class="form-group label-floating is-empty">
												<label class="control-label">Seu Email</label>
												<input class="form-control" placeholder="" type="email" id="cadastro_email">
											</div>
											<div class="form-group label-floating is-empty">
												<label class="control-label">Sua Senha</label>
												<input class="form-control" placeholder="" type="password" id="cadastro_senha">
											</div>

											<div class="form-group date-time-picker label-floating">
												<label class="control-label">Data de Nascimento</label>
												<input name="datetimepicker" value="01/01/1990" id="cadastro_data"/>
												<span class="input-group-addon">
													<span class="material-icons">calendar_today</span>
												</span>
											</div>

											<div class="form-group label-floating is-select">
												<label class="control-label">Diga algo sobre você</label>
												<input class="form-control" placeholder="" type="text" id="cadastro_desc">
											</div>

											<div class="remember">
												<div class="checkbox">
													<label>
														<input name="optionsCheckboxes" type="checkbox">
														Eu aceito os <a href="#">Termos e condições de uso</a>.
													</label>
												</div>
											</div>

											<a href="javascript:;" class="btn btn-8balls btn-lg full-width"  id="registroBtn" onclick="cadastroEmail()">Completar registro</a>
											<div id="erro_cadastro"></div>
										</div>
									</div>
								</form>
							</div>

							<div class="tab-pane" id="profile" role="tabpanel" data-mh="log-tab">
								<div class="title h6">Entre com sua Conta</div>

								<form class="content"  method="POST" action="login.php?acao=login" id="login">

									<div class="row">
										<div class="col-xl-12 col-lg-12 col-md-12">
											<div class="form-group label-floating is-empty">
												<label class="control-label">Seu Email</label>
												<input class="form-control" placeholder="" type="email" name="email_login" id="email_login">
											</div>
											<div class="form-group label-floating is-empty">
												<label class="control-label">Sua Senha</label>
												<input class="form-control" placeholder="" type="password" name="email_senha" id="email_senha">
											</div>

											<div class="remember">

											<!--div class="checkbox">
												<label>
													<input name="optionsCheckboxes" type="checkbox">
													Permanecer Logado
												</label>
											</div!-->
											<a href="javascript:;" class="forgot" data-toggle="modal" data-target="#restore-password">Esqueci minha Senha</a>
										</div>

										<a href="javascript:;" id="loginBtn" class="btn btn-lg btn-primary full-width" onclick="loginEmail()">Entrar</a>
										<div id="erro_login"></div>
										<!--div class="or"></div-->

										<!--a href="#" class="btn btn-lg bg-facebook full-width btn-icon-left" onclick="loginFacebook()"><i class="fa fa-facebook" aria-hidden="true" ></i>Entrar com Facebook</a-->



										<!--p>Ainda não tem uma conta? <a href="#" role="tablist">Registre-se agora!</a> Em menos de um minuto, você já terá acesso a nossa rede!</p-->
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- ... end Login-Registration Form  -->

	<!-- Window-popup Restore Password -->
	<div class="modal fade" id="senhaEnviada" tabindex="-1" role="dialog" aria-labelledby="senhaEnviada" aria-hidden="true">
		<div class="modal-dialog window-popup restore-password-popup" role="document">
			<div class="modal-content">
				<a href="#" class="close icon-close" data-dismiss="modal" aria-label="Close">
					<svg class="olymp-close-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use></svg>
				</a>

				<div class="modal-header">
					<h6 class="title">Verifique seu email</h6>
				</div>

				<div class="modal-body">

					<p>Se o endereço de email informado estiver correto, você receberá instruções para recuperar sua conta.
					</p>
					

				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="restore-password" tabindex="-1" role="dialog" aria-labelledby="restore-password" aria-hidden="true">
		<div class="modal-dialog  modal-dialog-centered window-popup restore-password-popup" role="document">
			<div class="modal-content">
				<a href="#" class="close icon-close" data-dismiss="modal" aria-label="Close">
					<svg class="olymp-close-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use></svg>
				</a>

				<div class="modal-header">
					<h6 class="title">Recuperar conta</h6>
				</div>

				<div class="modal-body">

					<p>Digite seu email cadastrado no 8balls para receber um link de recuperação de senha.
					</p>
					<div class="form-group label-floating">
						<label class="control-label">Seu Email</label>
						<input class="form-control" placeholder="" type="email" id="emailRecuperar" >
					</div>
					<button class="btn btn-lg btn-primary full-width" onclick="recuperarConta()">Recuperar conta</button>


				</div>
			</div>
		</div>
	</div>



	<!-- jQuery first, then Other JS. -->
	<script src="js/jquery-3.2.0.min.js"></script>
	<!-- Js effects for material design. + Tooltips -->
	<script src="js/material.min.js"></script>
	<!-- Helper scripts (Tabs, Equal height, Scrollbar, etc) -->
	<script src="js/theme-plugins.js"></script>
	<!-- Init functions -->
	<script src="js/main.js"></script>

	<!-- Select / Sorting script -->
	<script src="js/selectize.min.js"></script>

	<!-- Swiper / Sliders -->
	<script src="js/swiper.jquery.min.js"></script>

	<!-- Datepicker input field script-->
	<script src="js/moment.min.js"></script>
	<!--script src="js/daterangepicker.min.js"></script-->

	<script src="js/mediaelement-and-player.min.js"></script>
	<script src="js/mediaelement-playlist-plugin.min.js"></script>

	<script>
		function recuperarConta() {
			var emailAddress = document.getElementById('emailRecuperar').value;
			$.post("https://8balls.com.br/api/recuperar",
				{ email: emailAddress}).done(function(r){ 
					$('#restore-password').modal('hide');
					$('#senhaEnviada').modal('show');
				});
			}

			function postToken(t,f) {
				$.post("header_module.php", {t : t, f: f}).done(function( data )
				{
					console.log(data);
					if(data == 'r') {

												window.location.replace("/b");
					}
				});

			}
						function loginEmail() {
				$('#loginBtn').attr('disabled','disabled');
				$('#loginBtn').text('Entrando...');
				var l = document.getElementById("email_login").value;
				var s = document.getElementById("email_senha").value;
				$.post("/sass/firebase/login.php",
					{ usuario: l,senha: s}).done(function(r){ 


						$.post("https://8balls.com.br/api/login",r).done(function(r2){ 
							postToken(r2.token,r2.uid); 
						})
						.fail(function(xhr, status, error) {
							document.getElementById("erro_login").innerHTML = xhr.responseJSON.erro;
							$('#loginBtn').removeAttr('disabled'); 
							$('#loginBtn').text('Entrar');
						});
					})
					.fail(function(xhr, status, error) {
						document.getElementById("erro_login").innerHTML = xhr.responseJSON.mensagem;
						$('#loginBtn').removeAttr('disabled'); 
						$('#loginBtn').text('Entrar');
					});
				}
				function cadastroEmail() {
					$('#registroBtn').attr('disabled','disabled');
					$('#registroBtn').text('Criando conta...');
					var n = document.getElementById("cadastro_nome").value;
					var e = document.getElementById("cadastro_email").value;
					var s = document.getElementById("cadastro_senha").value;
					var t = document.getElementById("cadastro_data").value;
					var d = document.getElementById("cadastro_desc").value;
					$.post("/sass/firebase/registro.php",
						{ usuario: e,senha: s,nome: n, data: t, desc: d}).done(function(r){ 


							$.post("https://8balls.com.br/api/login",r).done(function(r2){ 
								postToken(r2.token,r2.uid); 
							})
							.fail(function(xhr, status, error) {
								document.getElementById("erro_login").innerHTML = xhr.responseJSON.erro;
								$('#registroBtn').removeAttr('disabled'); 
								$('#registroBtn').text('Tentar completar o registro');
							});



						}).fail(function(xhr, status, error) {
							console.log(xhr.responseJSON.erro);
							document.getElementById("erro_cadastro").innerHTML = xhr.responseJSON.mensagem;
							$('#registroBtn').removeAttr('disabled'); 
							$('#registroBtn').text('Tentar completar o registro');
						});


					}


					var i1 = document.getElementById("registro");
					var i2 = document.getElementById("login");

					i1.addEventListener("keyup", function(event) {
						if (event.keyCode === 13) {
							event.preventDefault();
							cadastroEmail();
						}
					});
					i2.addEventListener("keyup", function(event) {
						if (event.keyCode === 13) {
							event.preventDefault();
							loginEmail();
						}
					});

				</script>
			</body>
			</html>