From f51459212c49598bdfb50c74e06097632953f405 Mon Sep 17 00:00:00 2001
From: h4ckypurpl3 <h4ckypurpl3@gmail.com>
Date: Sat, 10 Nov 2018 18:43:04 -0500
Subject: [PATCH] pruebas

---
 portalcautivo/index.html        | 403 ++++++++++++++-------------
 portalcautivo/index_prueba.html | 480 ++++++++++++++++++++++++++++++++
 2 files changed, 689 insertions(+), 194 deletions(-)
 create mode 100644 portalcautivo/index_prueba.html

diff --git a/portalcautivo/index.html b/portalcautivo/index.html
index d24ebd3..72a420d 100644
--- a/portalcautivo/index.html
+++ b/portalcautivo/index.html
@@ -246,220 +246,235 @@
     }
   </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;
+    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");
-           });
-
+    $(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>
-  <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" id="internet" role="tabpanel" aria-labelledby="internet-tab">
-            <h3 class="register-heading">Entrar con Internet</h3>
-            <div class="row register-form">
-                <!-- 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">&times;</span></button>
-                    <span id="errorMSGtext"></span>
-                </div>
-            </div>
-          </div>
-          <div class="tab-pane fade show active in" 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">
+  <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">&times;</span></button>
+                    <span id="errorMSGtext"></span>
                   </div>
                 </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>
+    <!-- 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>
diff --git a/portalcautivo/index_prueba.html b/portalcautivo/index_prueba.html
new file mode 100644
index 0000000..f669787
--- /dev/null
+++ b/portalcautivo/index_prueba.html
@@ -0,0 +1,480 @@
+<!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">
+
+  <meta name="robots" content="noindex, nofollow, noodp, noydir" />
+  <meta name="keywords" content="" />
+  <meta name="description" content="" />
+  <meta name="copyright" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+
+  <title>Ingreso Usuarios</title>
+  <!-- Bootstrap -->
+  <link href="css/bootstrap.min.css" rel="stylesheet">
+  <link href="css/signin.css" rel="stylesheet">
+
+  <!-- static zone info -->
+  <script src="js/zone.js"></script>
+
+  <script src="js/jquery-1.11.2.min.js"></script>
+  <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>
+  <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>
+</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="captiveportal-logoRedINC.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">
+              <a class="nav-link " id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">Con Internet</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Sin Internet</a>
+            </li>
+          </ul>
+          <div class="tab-content" id="myTabContent">
+            <div class="tab-pane fade show" id="home" role="tabpanel" aria-labelledby="home-tab">
+              <h3 class="register-heading">Entrar con Internet</h3>
+              <div class="row register-form">
+                <!-- 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  autocapitalize="none" >
+                    <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">&times;</span></button>
+                  <span id="errorMSGtext"></span>
+                </div>
+              </div>
+              <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-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://redinc.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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- bootstrap script -->
+  <script src="js/bootstrap.min.js"></script>
+</body>
+
+</html>