<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Acceso a la red comunitaria</title> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style> body { background-color: transparent !important; } html { background: url(http://www.hdfondos.eu/pictures/2013/1216/1/nature-flower-garden-white-dandelion-green-hd-wallpaper-205690.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .register { background: -webkit-linear-gradient(left, #12131291, #089406c4); margin-top: 3%; padding: 3%; } .register-left { text-align: center; color: #fff; margin-top: 4%; letter-spacing: 1px; } .register-left input { border: none; border-radius: 1.5rem; padding: 2%; width: 60%; background: #f8f9fa; font-weight: bold; color: #383d41; margin-top: 30%; margin-bottom: 3%; cursor: pointer; } .register-right { background: #f8f9fa; border-top-left-radius: 20% 50%; border-bottom-left-radius: 20% 50%; } #sininternet-tab { color: #54b303; } .register-left img { margin-top: 15%; margin-bottom: 5%; width: 25%; -webkit-animation: mover 2s infinite alternate; animation: mover 1s infinite alternate; } @-webkit-keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } @keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } .register-left p { font-weight: lighter; padding: 12%; margin-top: -9%; } .register .register-form { padding: 10%; margin-top: 10%; } .btnRegister { float: right; margin-top: 10%; border: none; border-radius: 1.5rem; padding: 2%; background: #0062cc; color: #fff; font-weight: 600; width: 50%; cursor: pointer; } .register .nav-tabs { margin-top: 3%; border: none; background: #244c03; border-radius: 1.5rem; width: 40%; float: right; } .register .nav-tabs .nav-link { padding: 1%; height: 34px; font-weight: 600; color: #fff; border-radius: 1.5rem; border: 3px solid #244c03 !important; font-size: 1.3em; } .register .nav-tabs .nav-link:hover { border: none; } .register .nav-tabs .nav-link.active { width: 100%; color: white; border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; border: 2px solid #244c03 !important; } .register-heading { text-shadow: rgb(0, 0, 0) 0px 2px 3px; color: white; text-align: center; margin-left: 10px; margin-top: 10%; margin-bottom: -15%; border-top-left-radius: 35px; background: -webkit-linear-gradient(left, #121312, #1db36e) !important; } .tab-content { padding-top: 1em; } .boton_entrar { margin-left: auto; margin-right: auto; width: 8px; } .circle_button { box-shadow: 2px 4px 0 2px rgba(0, 0, 0, 0.1); border: .5em solid #c7d400; font-size: 1em; line-height: 1.1em; color: #ffffff; background-color: #76be4e; margin: auto; border-radius: 50%; height: 7em; width: 7em; position: relative; } .circle_button:hover { color: #ffffff; background-color: #226093; text-decoration: none; border-color: #c7d400; } .circle_button:visited { color: #ffffff; background-color: #c7d400; text-decoration: none; } .circle-link-greater-than { font-size: 1em; } @media screen and (max-width:990px) { .register .nav-tabs { width: 90%; } } @media screen and (max-width:768px) { .register-left { margin-top: 0px; } .register-left p { font-weight: lighter; padding: 0px; margin-top: 0px; } .register-left h3 { margin-top: 0px; } .register-heading { font-size: 21px; margin-top: 4em } .boton_entrar { margin-left: auto; margin-right: auto; width: 0px; padding-right: 8em; } .register-left img { margin-top: 5%; margin-bottom: 0%; width: 43%; } } @media screen and (max-width: 440px) { .register-left { margin-top: 0px; padding-left: 3em; } } </style> <script> function getURLparams() { 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; } $(document).ready(function() { /** * logon action */ $("#signin").click(function(event) { event.preventDefault(); // hide alerts $("#alertMSG").addClass("hidden"); // try to login $.ajax({ type: "POST", url: "/api/captiveportal/access/logon/" + zoneid + "/", dataType: "json", data: { user: $("#inputUsername").val(), password: $("#inputPassword").val() } }).done(function(data) { // redirect on successful login if (data['clientState'] == 'AUTHORIZED') { if (getURLparams()['redirurl'] != undefined) { window.location = 'http://' + getURLparams()['redirurl'] + '?refresh'; } else { // no target, reload page window.location.reload(); } } else { $("#inputUsername").val(""); $("#inputPassword").val(""); $("#errorMSGtext").html("authentication failed"); $("#alertMSG").removeClass("hidden"); } }).fail(function() { $("#errorMSGtext").html("unable to connect to authentication server"); $("#alertMSG").removeClass("hidden"); }); }); /** * login anonymous, only applicable when server is configured without authentication */ $("#signin_anon").click(function(event) { event.preventDefault(); // hide alerts $("#alertMSG").addClass("hidden"); // try to login $.ajax({ type: "POST", url: "/api/captiveportal/access/logon/" + zoneid + "/", dataType: "json", data: { user: '', password: '' } }).done(function(data) { // redirect on successful login if (data['clientState'] == 'AUTHORIZED') { if (getURLparams()['redirurl'] != undefined) { window.location = 'http://' + getURLparams()['redirurl'] + '?refresh'; } else { window.location.reload(); } } else { $("#inputUsername").val(""); $("#inputPassword").val(""); $("#errorMSGtext").html("login failed"); $("#alertMSG").removeClass("hidden"); } }).fail(function() { $("#errorMSGtext").html("unable to connect to authentication server"); $("#alertMSG").removeClass("hidden"); }); }); /** * logoff action */ $("#logoff").click(function(event) { event.preventDefault(); // hide alerts $("#alertMSG").addClass("hidden"); // try to login $.ajax({ type: "POST", url: "/api/captiveportal/access/logoff/" + zoneid + "/", dataType: "json", data: { user: '', password: '' } }).done(function(data) { // refresh page window.location.reload(); }).fail(function() { $("#errorMSGtext").html("unable to connect to authentication server"); $("#alertMSG").removeClass("hidden"); }); }); /** * close / hide error message */ $("#btnCloseError").click(function() { $("#alertMSG").addClass("hidden"); }); /** * execute after pageload */ $.ajax({ type: "POST", url: "/api/captiveportal/access/status/" + zoneid + "/", dataType: "json", data: { user: $("#inputUsername").val(), password: $("#inputPassword").val() } }).done(function(data) { if (data['clientState'] == 'AUTHORIZED') { $("#logout_frm").removeClass('hidden'); } else if (data['authType'] == 'none') { $("#login_none").removeClass('hidden'); } else { $("#login_password").removeClass('hidden'); } }).fail(function() { $("#errorMSGtext").html("unable to connect to authentication server"); $("#alertMSG").removeClass("hidden"); }); }); </script> </head> <body> <main class="page-content col-sm-6 col-sm-push-3"> <div class="container register"> <div class="row"> <div class="col-md-3 register-left"> <img src="images/logoNRwhite.png" alt="" /> <h3>¡Bienvenid@!</h3> <p>¡Estás muy cerca de entrar al mundo Web!</p> </div> <div class="col-md-9 register-right"> <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <li class="nav-item active"> <a class="nav-link" id="sininternet-tab" data-toggle="tab" href="#sininternet" role="tab" aria-controls="sininternet" aria-selected="true">Sin Internet</a> </li> <li class="nav-item"> <a class="nav-link " id="internet-tab" data-toggle="tab" href="#internet" role="tab" aria-controls="internet" aria-selected="false">Con Internet</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="sininternet" role="tabpanel" aria-labelledby="sininternet-tab"> <h3 class="register-heading">Ver contenidos sin Internet</h3> <div class="row register-form"> <div class="boton_entrar"> <div class="container boton_entrar"> <div class="col-md-12 "> <a href="https://nuestrared.org"> <button class="btn btn-default circle_button" > <strong style="font-size: 25px">Entrar</strong> <span class="circle-greater-than"></span></button> </a> </div> </div> </div> </div> </div> <div class="tab-pane fade show" id="internet" role="tabpanel" aria-labelledby="internet-tab"> <h3 class="register-heading">Entrar con Internet</h3> <div class="row register-form"> <div class="col-md-12"> <!-- User option 1: login needed with name and password --> <div id="login_password" class="hidden"> <form class="form-signin"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputUsername" class="sr-only">Username</label> <input type="text" id="inputUsername" class="form-control" placeholder="Username" required autofocus autocomplete="none" autocapitalize="none" autocorrect="off"> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> <button class="btn btn-primary btn-block" id="signin" type="button">Sign in</button> </form> </div> <!-- User option 2: login needed, without username, password --> <div id="login_none" class="hidden"> <form class="form-signin"> <button class="btn btn-primary btn-block" id="signin_anon" type="button">Sign in</button> </form> </div> <!-- User option 3: Already logged in, show logout button --> <div id="logout_frm" class="hidden"> <form class="form-signin"> <button class="btn btn-primary btn-block" id="logoff" type="button">Logout</button> </form> </div> <!-- Message dialog --> <div class="alert alert-danger alert-dismissible hidden" role="alert" id="alertMSG"> <button type="button" class="close" id="btnCloseError" aria-label="Close"><span aria-hidden="true">×</span></button> <span id="errorMSGtext"></span> </div> </div> </div> </div> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.2.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </main> </body> </html>