diff --git a/portalcautivo/css/estilos.css b/portalcautivo/css/estilos.css
index 42c80f4..7f2f240 100644
--- a/portalcautivo/css/estilos.css
+++ b/portalcautivo/css/estilos.css
@@ -1,190 +1,237 @@
-body{
-  background: url(captiveportal-imagen_central.jpg);
-  background-position: center;
-background-repeat: no-repeat;
-background-size: cover;
-}
-  .register {
-    background: -webkit-linear-gradient(left, #3931afb5, #00c6ff);
-    margin-top: 3%;
-    padding: 3%;
-  }
-
-  .register-left {
-    text-align: center;
-    color: #fff;
-    margin-top: 4%;
-  }
-
-  .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%;
-  }
-
-  .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: #0062cc;
-    border-radius: 1.5rem;
-    width: 40%;
-    float: right;
-  }
-
-  .register .nav-tabs .nav-link {
-    padding: 2%;
-    height: 34px;
-    font-weight: 600;
-    color: #fff;
-    border-top-right-radius: 1.5rem;
-    border-bottom-right-radius: 1.5rem;
-  }
-
-  .register .nav-tabs .nav-link:hover {
-    border: none;
-  }
-
-  .register .nav-tabs .nav-link.active {
-    width: 100%;
-    color: #0062cc;
-    border: 2px solid #0062cc;
-    border-top-left-radius: 1.5rem;
-    border-bottom-left-radius: 1.5rem;
-  }
-
-  .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, #3931af, #00c6ff) !important;
-  }
-
-  .tab-content {
-    padding-top: 1em;
-  }
-
-.boton_entrar{
-margin-left: auto !important;
-margin-right: auto !important;
+html {
+  height: 100%
 }
 
-  .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;
+body {
+  background: url("") no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background-color: white;
+  height: 100%
+}
+
+.jumbotron {
+  background-size: cover;
+}
+
+h3 {
+  margin-top: 0px !important;
+}
+
+#redes {
+  color: white;
+  font-size: 2em;
+  padding: 0.4em;
+}
+
+.boton_chat>.btn-lg {
+  padding: 15px 30px;
+  font-size: 20px;
+  border-radius: 30px;
+}
+
+.boton_chat {
+  font-size: 2em;
+  padding-bottom: 2em;
+}
+
+.lead {
+  letter-spacing: 0.06em;
+}
+
+#logo_cabecera {
+  width: 100%;
+  left: 40px;
+  background-color: white;
+}
+
+.alert-info {
+  padding-left: 2em;
+  padding-right: 2em;
+  color: #341208;
+  background-image: url("");
+}
+
+#cabezote {
+  padding-top: 6em;
+  background: url(https://i.ytimg.com/vi/a-8PUFLnFgc/maxresdefault.jpg) fixed center no-repeat;
+  background-size: cover;
+  text-shadow: 0px 2px 3px rgb(0, 0, 0);
+  color: white;
+}
+
+.linea_botones {
+  display: inline-block;
+  text-align: center;
+  margin: 1em;
+}
+
+.texto_botones {
+  font-size: 2em;
+}
+
+.btn-circle.btn-xl {
+  width: 4em;
+  height: 4em;
+  padding: 1.5em;
+  font-size: 2em;
+  line-height: 1.33;
+  border-radius: 5em;
+  display: inline-flex;
+}
+
+.franja {
+  color: white;
+  background: -webkit-linear-gradient(left, #3931af, #00c6ff);
+  margin-bottom: 2em;
+}
+
+.navbar {
+  background: -webkit-linear-gradient(left, #121312, #1db36e);
+  color: white;
+  margin-bottom: 0px !important;
+}
+
+.navbar-header>p {
+  font-size: 20px;
+  color: white;
+  font-family: "Open Sans", sans-serif;
+  font-weight: normal;
+  display: inline
+}
+
+.navbar-header>a {
+  font-size: 20px;
+  color: white;
+  font-family: "Open Sans", sans-serif;
+  font-weight: normal;
+  display: inline
+}
+
+.navbar-header>strong {
+  font-size: 20px;
+  color: white;
+  font-weight: normal;
+  font-family: "Open Sans", sans-serif;
+  display: inline
+}
+
+/*.navbar-header {width: 50%;}*/
+
+.div_aplicacion {
+  background-color: #f0eee1 !important;
+}
+
+.div_aplicacion:hover {
+  -webkit-animation: animatedBackground 1s ease-out 1;
+  -moz-animation: animatedBackground 1s ease-out 1;
+  animation: animatedBackground 1s ease-out 1;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  z-index: 10000;
+}
+
+#creditos {
+  column-count: 4;
+  column-gap: 1em;
+}
+
+.img_creditos {
+  background-color: white;
+  display: inline-block;
+  margin: 0 0 1em;
+  width: 100%;
+}
+
+.img_grad {
+  max-width: 15em;
+}
+
+/* Masonry on large screens */
+
+@media only screen and (min-width: 1024px) {
+  #creditos {
+    column-count: 4;
   }
+}
 
-  .circle_button:hover {
-    color: #ffffff;
-    background-color: #226093;
-    text-decoration: none;
-    border-color: #c7d400;
+/* Masonry on medium-sized screens */
 
+@media only screen and (max-width: 1023px) and (min-width: 768px) {
+  #creditos {
+    column-count: 3;
   }
+}
 
-  .circle_button:visited {
-    color: #ffffff;
-    background-color: #c7d400;
-    text-decoration: none;
+/* Masonry on small screens */
 
+@media only screen and (max-width: 767px) and (min-width: 540px) {
+  #creditos {
+    column-count: 2;
   }
+}
 
-  .circle-link-greater-than {
-    font-size: 1em;
+@media max-width: 540px {
+  #creditos {
+    column-count: 1;
   }
-
-@media screen and (max-width:990px) {
-.register .nav-tabs {
-  width: 90%;
 }
 
+@-webkit-keyframes animatedBackground {
+  0% {
+    -webkit-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1)
+  }
+  100% {
+    -webkit-transform: scale(1.1, 1.1);
+    -moz-transform: scale(1.1, 1.1);
+    -ms-transform: scale(1.1, 1.1);
+    -o-transform: scale(1.1, 1.1);
+    transform: scale(1.1, 1.1)
+  }
 }
 
-@media screen and (max-width:768px) {
-.register-left  {
-  margin-top: 0px;
+@-moz-keyframes animatedBackground {
+  0% {
+    -webkit-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1)
+  }
+  100% {
+    -webkit-transform: scale(1.1, 1.1);
+    -moz-transform: scale(1.1, 1.1);
+    -ms-transform: scale(1.1, 1.1);
+    -o-transform: scale(1.1, 1.1);
+    transform: scale(1.1, 1.1)
+  }
 }
-.register-left p {
-  font-weight: lighter;
-  padding: 0px;
-  margin-top: 0px;
-}
-.register-heading{
-  font-size: 21px;
+
+@keyframes animatedBackground {
+  0% {
+    -webkit-transform: scale(1, 1);
+    -moz-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1)
+  }
+  100% {
+    -webkit-transform: scale(1.1, 1.1);
+    -moz-transform: scale(1.1, 1.1);
+    -ms-transform: scale(1.1, 1.1);
+    -o-transform: scale(1.1, 1.1);
+    transform: scale(1.1, 1.1)
+  }
 }
+
+.pie {
+  padding-bottom: 1em;
+  padding-top: 2em;
+  font-size: 1.5em;
 }
diff --git a/portalcautivo/css/signin.css b/portalcautivo/css/signin.css
index f238f54..b8f1219 100755
--- a/portalcautivo/css/signin.css
+++ b/portalcautivo/css/signin.css
@@ -1,5 +1,4 @@
 body {
-  padding-top: 40px;
   padding-bottom: 40px;
   background-color: #eee;
 }
diff --git a/portalcautivo/images/logoNRwhite.png b/portalcautivo/images/logoNRwhite.png
new file mode 100644
index 0000000..ba8968d
Binary files /dev/null and b/portalcautivo/images/logoNRwhite.png differ
diff --git a/portalcautivo/index.html b/portalcautivo/index.html
new file mode 100644
index 0000000..d24ebd3
--- /dev/null
+++ b/portalcautivo/index.html
@@ -0,0 +1,465 @@
+<!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>
+  <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">
+                    <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>
+
+  <!-- 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>
+</body>
+
+</html>
diff --git a/portalcautivo/index_content.html b/portalcautivo/index_content.html
new file mode 100644
index 0000000..ff04037
--- /dev/null
+++ b/portalcautivo/index_content.html
@@ -0,0 +1,259 @@
+<!doctype html>
+<html>
+    <head>
+
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+        <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></title>
+        <!-- Bootstrap -->
+        <link href="css/bootstrap.min.css" rel="stylesheet">
+        <link href="css/signin.css" rel="stylesheet">
+        <link href="css/estilos.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>
+    </head>
+    <body>
+      <nav class="navbar navbar-inverse navbar-fixed-top">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">NuestraRED.org</a>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
+      <form class="navbar-form navbar-right">
+        <div class="form-group">
+          <input type="text" placeholder="Email" class="form-control">
+        </div>
+        <div class="form-group">
+          <input type="password" placeholder="Password" class="form-control">
+        </div>
+        <button type="submit" class="btn btn-success">Sign in</button>
+      </form>
+    </div><!--/.navbar-collapse -->
+  </div>
+</nav>
+
+<!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron " id="cabezote">
+      <div class="container text-center">
+        <h1>NuestraRED</h1>
+        <p>Red Comunitaria</p>
+            <img class="img img-responsive center-block" src="images/logoNR.png" height="48" width="200">
+      </div>
+    </div>
+    <div class='container' >
+  <div class="col-lg-10 col-lg-push-1 text-center">
+    <span class="linea_botones"> <a class='btn btn-block btn-default btn-circle btn-xl' href="https://wikipedia.redinc.org/wikipedia_es_all_novid?"><i class="fab fa-wikipedia-w"></i></a> <br><a class="texto_botones" href="https://wikipedia.redinc.org/wikipedia_es_all_novid.html">Wikipedia</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-primary btn-circle btn-xl' href= "https://wikipedia.redinc.org/wiktionary_es_all_novid?"><i class="fas fa-sort-alpha-down"></i></a><br><a class="texto_botones" href= "https://wikipedia.redinc.org/wiktionary_es_all_novid?">Diccionario</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-success btn-circle btn-xl' href="https://wikipedia.redinc.org/wikibooks_es_all_novid?"><i class="fas fa-atlas"></i></i></a><br><a class="texto_botones" href="https://wikipedia.redinc.org/wikibooks_es_all_novid?">Biblioteca</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-warning btn-circle btn-xl' href="https://wikipedia.redinc.org/wikivoyage_es_all_novid?"><i class="fas fa-globe"></i></a><br><a class="texto_botones" href="https://wikipedia.redinc.org/wikivoyage_es_all_novid?" >Viajar</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-danger btn-circle btn-xl' href="https://wikipedia.redinc.org/vikidia_es_all/"><i class="fas fa-child"></i></a><br><a class="texto_botones" href="https://wikipedia.redinc.org/vikidia_es_all/"    >Niños</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-default btn-circle btn-xl' href="https://wikipedia.redinc.org/wikiquote_es_all_novid?"><i class="fas fa-broadcast-tower"></i></a><br><a class="texto_botones" href="https://wikipedia.redinc.org/wikiquote_es_all_novid?">Frases</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-info btn-circle btn-xl' href="https://wikipedia.redinc.org/wikisource_es_all_novid?"><i class="fas fa-book-reader"></i></a><br><a class="texto_botones" href="https://wikipedia.redinc.org/wikisource_es_all_novid?">Documentos</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-success btn-circle btn-xl' href="https://wikipedia.redinc.org/wikiversity_es_all_novid?"><i class="fas fa-user-graduate"></i></a><br><a class="texto_botones" href="https://wikipedia.redinc.org/wikiversity_es_all_novid?">Universidad</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-warning btn-circle btn-xl' href="https://wikipedia.redinc.org/wikinews_es_all_novid?"><i class="fab fa-readme"></i></a><br><a class="texto_botones" href="https://wikipedia.redinc.org/wikinews_es_all_novid?">Prensa</a></span>
+    <span class="linea_botones"><a class='btn btn-block btn-warning btn-circle btn-xl' href="https://redinc.org/es.stackoverflow.com_es_all/?"><i class="fab fa-stack-overflow"></i></a><br><a class="texto_botones" href="https://wikipedia.redinc.org/wikinews_es_all_novid?">Stack Overflow</a></span>
+
+  </div>
+</div>
+
+        <main class="page-content col-sm-6 col-sm-push-3">
+          <div class='container alert alert-success col-sm-8 col-sm-push-3 button'>
+
+     NuestraRed.org ofrece acceso a diferentes contenidos locales a los que puedes acceder sin Interntet o datos en tu celular escribe en tu navegador o da clic: <a href="http://nuestrared.org" class="btn btn-success" target="_blank">NuestraRed.org</a><i class="icon-hand-up"></i>
+
+    </div>
+    <div class='container alert alert-danger col-sm-8 col-sm-push-3 button'>
+      Si quieres acceso a Internet responde la siguiente <a href="" target="_blank" class="btn btn-danger"> encuesta</a>
+
+     </div>
+
+    <div class='container alert alert-info col-sm-8 col-sm-push-3'>
+
+    NuestraRed.org es un proyecto libre y colaborativo de naturaleza comunitaria que utiliza el espectro electromagnético en las frecuencias 2.4 y 5.2 Mhz
+	   y por lo tanto no requiere permisos adicionales para su operación según Resolución 0689 / 2004 mintic.
+
+    </div>
+          <!-- 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>
+        </main>
+
+        <!-- bootstrap script -->
+        <script src="js/bootstrap.min.js"></script>
+    </body>
+</html>