h4ckypurpl3/redcomani.org
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ajustes responsive

Browse Source
This commit is contained in:
Hacky Purple 2019-04-25 22:19:06 -05:00
parent 528b8717f6
commit f1901a26c9
4 changed files with 464 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

257
portalcautivo/login.html
View File

@ -21,40 +21,45 @@
<![endif]--> <![endif]-->
<style> <style>
html, body{ html,
height:100%; body {
} height: 100%;
body{ }
background: url(captiveportal-imagen_central.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
textarea,input,select { body {
background-color: #FDFBFB; background: url(captiveportal-imagen_central.jpg)no-repeat center center fixed;
border: 1px solid #BBBBBB; -webkit-background-size: cover;
padding: 2px; -moz-background-size: cover;
margin: 1px; -o-background-size: cover;
font-size: 14px; background-size: cover;
color: #808080; }
border-radius: 4px;
}
td{ textarea,
font-weight: bolder; input,
} select {
background-color: #FDFBFB;
border: 1px solid #ffffff;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
border-radius: 4px;
margin-bottom: 6px;
}
input[type="submit"] { td {
background: -webkit-linear-gradient(left, #8eb932, #c7a010) !important; font-weight: bolder;
border: none; }
padding: 5px 20px 5px 20px;
color: white; input[type="submit"] {
font-weight: 600; background: -webkit-linear-gradient(left, #8eb932, #c7a010) !important;
border-radius: 30px; border: none;
margin-top: 1em; padding: 5px 20px 5px 20px;
} color: white;
font-weight: 600;
border-radius: 30px;
margin-top: 1em;
}
.register { .register {
background: -webkit-linear-gradient(left, #7f9e3cd9, #e3a432ad); background: -webkit-linear-gradient(left, #7f9e3cd9, #e3a432ad);
@ -182,10 +187,10 @@ input[type="submit"] {
padding-top: 1em; padding-top: 1em;
} }
.boton_entrar{ .boton_entrar {
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
} }
.circle_button { .circle_button {
box-shadow: 2px 4px 0 2px rgba(0, 0, 0, 0.1); box-shadow: 2px 4px 0 2px rgba(0, 0, 0, 0.1);
@ -221,38 +226,41 @@ input[type="submit"] {
} }
@media screen and (max-width:990px) { @media screen and (max-width:990px) {
.register .nav-tabs { .register .nav-tabs {
width: 80%; width: 90%;
} }
} }
@media screen and (max-width:768px) { @media screen and (max-width:768px) {
.register-left { .register-left {
margin-top: 0px; margin-top: 0px;
} }
.register-left p { .register-left p {
font-weight: lighter; font-weight: lighter;
padding: 0px; padding: 0px;
margin-top: 0px; margin-top: 0px;
} }
.register-heading{ .register-heading {
font-size: 1em; font-size: 1em;
margin-left: 25px; margin-left: -3px;
} margin-right: 3px;
padding: 4px;
}
} }
@media only screen and (max-width: 425px) {
.register-right { @media only screen and (max-width: 425px) {
border-top-left-radius: 0% 50%; .register-right {
border-bottom-left-radius: 0% 50%; border-top-left-radius: 0% 50%;
background:#f8f9fad4 border-bottom-left-radius: 0% 50%;
} background: #f8f9fad4
.register-left img { }
width: 100%; .register-left img {
} width: 100%;
} }
}
</style> </style>
</head> </head>
@ -278,67 +286,70 @@ input[type="submit"] {
<h3 class="register-heading">Entrar con Internet</h3> <h3 class="register-heading">Entrar con Internet</h3>
<div class="row register-form"> <div class="row register-form">
<div class="col-md-12"> <div class="col-md-12">
<p> <strong>Si tienes un código de acceso, ingrésalo aquí:</strong></p> <p> <strong>Si tienes un código de acceso, ingrésalo aquí:</strong></p>
$(if chap-id) $(if chap-id)
<form name="sendin" action="$(link-login-only)" method="post"> <form name="sendin" action="$(link-login-only)" method="post">
<input type="hidden" name="username" /> <input type="hidden" name="username" />
<input type="hidden" name="password" /> <input type="hidden" name="password" />
<input type="hidden" name="dst" value="$(link-orig)" /> <input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" /> <input type="hidden" name="popup" value="true" />
</form> </form>
<script type="text/javascript" src="/md5.js"></script> <script type="text/javascript" src="/md5.js"></script>
<script type="text/javascript"> <script type="text/javascript">
<!--
function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
document.sendin.submit();
return false;
}
//-->
</script>
$(endif)
<table>
<tr>
<td align="center" valign="middle">
<table>
<tr>
<td align="center" valign="bottom" colspan="2">
<form name="login" action="$(link-login-only)" method="post"
$(if chap-id) onSubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<table width="100%">
<tr><td align="right">Usuario: </td>
<td><input style="width: 100%" name="username" type="text" value="$(username)"/></td>
</tr>
<tr><td align="right">Contraseña: </td>
<td><input style="width: 100%" name="password" type="password"/></td>
</tr>
<tr><td>&nbsp;</td>
<td><input type="submit" value="Ingresar" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
</td>
</tr>
</table>
<script type="text/javascript">
<!-- <!--
document.login.username.focus(); function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
document.sendin.submit();
return false;
}
//--> //-->
</script> </script>
$(endif)
<table>
<tr>
<td align="center" valign="middle">
<table>
<tr>
<td align="center" valign="bottom" colspan="2">
<form name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<table width="100%">
<tr>
<td align="right">Identificador: </td>
<td><input style="width: 100%" name="username" type="text" value="$(username)" /></td>
</tr>
<tr>
<td align="right">Clave: </td>
<td><input style="width: 100%" name="password" type="password" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Ingresar" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
$(if error)<br />
<div style="color: #ff4b00; font-size: 1em">$(error)</div>$(endif)
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</form> </form>
</div> </div>
@ -346,7 +357,7 @@ input[type="submit"] {
</div> </div>
</div> </div>
<div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h3 class="register-heading">Ver contenidos Locales sin Internet</h3> <h3 class="register-heading">Ver contenidos locales sin Internet</h3>
<div class="row register-form"> <div class="row register-form">
<div class="boton_entrar"> <div class="boton_entrar">
<div class="container boton_entrar"> <div class="container boton_entrar">

271
portalcautivo/status.html
View File

@ -1,144 +1,185 @@
<html> <html>
<head> <head>
<title>RedINC> estado</title> <title>RedCoMani> estado</title>
$(if refresh-timeout) $(if refresh-timeout)
<meta http-equiv="refresh" content="$(refresh-timeout-secs)"> <meta http-equiv="refresh" content="$(refresh-timeout-secs)"> $(endif)
$(endif) <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="-1">
<meta http-equiv="expires" content="-1"> <style type="text/css">
<style type="text/css"> < !-- textarea,
<!-- input,
textarea,input,select { select {
background-color: #FDFBFB; background-color: #FDFBFB;
border: 1px #BBBBBB solid; border: 1px #ffffff solid;
padding: 2px; padding: 2px;
margin: 1px; margin: 1px;
font-size: 14px; font-size: 14px;
color: #808080; color: #808080;
} margin-bottom: 6px;
}
table { table {
width: 90%; width: 80%;
} display: table-cell;
img { }
width: 50%;
}
td { img {
font-size: 2em !important; width: 50%;
padding: 4px; }
}
input[type="submit"]{ td {
background: -webkit-linear-gradient(left, #7F9E3C, #E4A42F) !important;; font-size: 2em !important;
border: none; padding: 4px;
padding: 5px 20px 5px 20px; }
color: white;
font-weight: 600; input[type="submit"] {
border-radius: 30px; background: -webkit-linear-gradient(left, #7F9E3C, #E4A42F) !important;
margin-top: 1em; ;
border: none;
padding: 5px 20px 5px 20px;
color: white;
font-weight: 600;
border-radius: 30px;
margin-top: 1em;
font-size: 1em; font-size: 1em;
width: 24%; width: 24%;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {}
.tabula {
border-width: 1px;
border-collapse: collapse;
border-color: #c1c1c1;
background-color: transparent;
font-family: verdana;
font-size: 11px;
}
} body {
color: #737373;
font-size: 12px;
font-family: verdana;
}
.tabula{ a,
a:link,
a:visited,
a:active {
color: #AAAAAA;
text-decoration: none;
font-size: 12px;
}
border-width: 1px; a:hover {
border-collapse: collapse; border-bottom: 1px dotted #c1c1c1;
border-color: #c1c1c1; color: #AAAAAA;
background-color: transparent; }
font-family: verdana;
font-size: 11px;
}
body{ color: #737373; font-size: 12px; font-family: verdana; } img {
border: none;
}
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 12px; } td {
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; } font-size: 12px;
img {border: none;} padding: 4px;
td { font-size: 12px; padding: 4px;} }
--> -->
</style> </style>
<script language="JavaScript"> <script language="JavaScript">
<!-- <!--
$(if advert-pending == 'yes') $(
var popup = ''; if advert - pending == 'yes')
function focusAdvert() { var popup = '';
if (window.focus) popup.focus();
} function focusAdvert() {
function openAdvert() { if (window.focus) popup.focus();
popup = open('$(link-advert)', 'hotspot_advert', ''); }
setTimeout("focusAdvert()", 1000);
} function openAdvert() {
$(endif) popup = open('$(link-advert)', 'hotspot_advert', '');
function openLogout() { setTimeout("focusAdvert()", 1000);
if (window.name != 'hotspot_status') return true; }
open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250'); $(endif)
window.close();
return false; function openLogout() {
} if (window.name != 'hotspot_status') return true;
//--> open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250');
</script> window.close();
return false;
}
//-->
</script>
</head> </head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0"
$(if advert-pending == 'yes') <body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" $(if advert-pending=='yes' ) onLoad="openAdvert()" $(endif)>
onLoad="openAdvert()"
$(endif)
>
<table width="100%" height="100%"> <table width="100%" height="100%">
<tr> <tr>
<td align="center" valign="middle"> <td align="center" valign="middle">
<img src="captiveportal-logoRedCoMani.png" alt="" width="15%" /> <img src="captiveportal-logoRedCoMani.png" alt="" width="15%" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td align="center" valign="middle"> <td align="center" valign="middle">
<form action="$(link-logout)" name="logout" onSubmit="return openLogout()"> <form action="$(link-logout)" name="logout" onSubmit="return openLogout()">
<table border="1" class="tabula"> <table border="1" class="tabula">
$(if login-by == 'trial') $(if login-by == 'trial')
<br><div style="text-align: center;">BienvenidX!</div><br> <br>
$(elif login-by != 'mac') <div style="text-align: center;">BienvenidX!</div><br> $(elif login-by != 'mac')
<br><div style="text-align: center;">BienvenidX! $(username)!</div><br> <br>
$(endif) <div style="text-align: center;">BienvenidX! $(username)!</div><br> $(endif)
<tr><td align="right">IP address:</td><td>$(ip)</td></tr> <tr>
<tr><td align="right">bytes subida/descarga:</td><td>$(bytes-in-nice) / $(bytes-out-nice)</td></tr> <td align="right">IP address:</td>
$(if session-time-left) <td>$(ip)</td>
<tr><td align="right">conectado / left:</td><td>$(uptime) / $(session-time-left)</td></tr> </tr>
$(else) <tr>
<tr><td align="right">conectado:</td><td>$(uptime)</td></tr> <td align="right">bytes subida/descarga:</td>
$(endif) <td>$(bytes-in-nice) / $(bytes-out-nice)</td>
$(if blocked == 'yes') </tr>
<tr><td align="right">status:</td><td><div style="color: #FF8080"> $(if session-time-left)
<a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div></td> <tr>
$(elif refresh-timeout) <td align="right">conectado / left:</td>
<tr><td align="right">status refresh:</td><td>$(refresh-timeout)</td> <td>$(uptime) / $(session-time-left)</td>
$(endif) </tr>
$(else)
<tr>
<td align="right">conectado:</td>
<td>$(uptime)</td>
</tr>
$(endif) $(if blocked == 'yes')
<tr>
<td align="right">status:</td>
<td>
<div style="color: green">
<a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div>
</td>
$(elif refresh-timeout)
<tr>
<td align="right">status refresh:</td>
<td>$(refresh-timeout)</td>
$(endif)
</table> </table>
$(if login-by-mac != 'yes') $(if login-by-mac != 'yes')
<br> <br>
<!-- user manager link. if user manager resides on other router, replace $(hostname) by its address <!-- user manager link. if user manager resides on other router, replace $(hostname) by its address
<button onclick="document.location='http://$(hostname)/user?subs='; return false;">status</button> <button onclick="document.location='http://$(hostname)/user?subs='; return false;">status</button>
<!-- end of user manager link --> <!-- end of user manager link -->
<input type="submit" value="Salir"> <input type="submit" value="Salir"> $(endif)
$(endif) </form>
</form>
</td> </td>
</table> </table>
</body> </body>
</html> </html>

3
weblocal/libs/css/master.css
View File

@ -23,8 +23,9 @@ h3 {
} }
.btn-default { .btn-default {
border-color: #cccccc2b; border-color: #cccccc2b;
} }
.boton_chat>.btn-lg { .boton_chat>.btn-lg {
padding: 15px 30px; padding: 15px 30px;
font-size: 20px; font-size: 20px;

331
weblocal/libs/css/style.css
View File

@ -3,47 +3,48 @@
padding: 0; padding: 0;
} }
*/ */
fieldset.fieldset-borde {
border: 2px solid #EDEDED !important; fieldset.fieldset-borde {
border-radius:3px; border: 2px solid #EDEDED !important;
padding: 0 1.4em 1.4em 1.4em !important; border-radius: 3px;
margin: 0 0 1.5em 0 !important; padding: 0 1.4em 1.4em 1.4em !important;
-webkit-box-shadow: 0px 0px 0px 0px #000; margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000; -webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.legend-area {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
} }
legend.legend-area {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0 10px;
border-bottom:none;
}
body { body {
background: #222; background: #222;
font-family: Georgia, serif; font-family: Georgia, serif;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }
#dates a { #dates a {
color: gray; color: gray;
text-decoration: none; text-decoration: none;
-webkit-transition: 0.5s; -webkit-transition: 0.5s;
-moz-transition: 0.5s; -moz-transition: 0.5s;
-o-transition: 0.5s; -o-transition: 0.5s;
-ms-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; transition: 0.5s;
font-size: 12px; font-size: 12px;
} }
#dates a:hover,
#dates a.selected { #dates a:hover, #dates a.selected {
color: red; color: red;
font-size: 18px; font-size: 18px;
} }
/* /*
h1,h2,h4,h5,h6 { h1,h2,h4,h5,h6 {
text-align: center; text-align: center;
@ -62,130 +63,142 @@ h1,h2,h4,h5,h6 {
margin-bottom: 20px; margin-bottom: 20px;
} }
*/ */
#timeline {
width: 95%;
height: 500px;
overflow: hidden;
margin: 100px auto;
position: relative;
} #timeline {
#dates { width: 95%;
width: 800px; height: 500px;
height: 60px; overflow: hidden;
overflow: hidden; margin: 100px auto;
background: url('timeline/dot.gif') left 45px repeat-x; position: relative;
} }
#dates li {
list-style: none; #dates {
float: left; width: 800px;
width: 100px; height: 60px;
height: 50px; overflow: hidden;
font-size: 24px; background: url('timeline/dot.gif') left 45px repeat-x;
text-align: center; }
background: url('timeline/biggerdot.png') center bottom no-repeat;
} #dates li {
#dates a { list-style: none;
line-height: 18px; float: left;
padding-bottom: 10px; width: 100px;
} height: 50px;
#dates .selected { font-size: 24px;
font-size: 18px; text-align: center;
} background: url('timeline/biggerdot.png') center bottom no-repeat;
}
#issues {
width: 800px; #dates a {
height: 500px; line-height: 18px;
overflow: hidden; padding-bottom: 10px;
} }
#issues li {
width: 900px; #dates .selected {
height: 500px; font-size: 18px;
list-style: none; }
float: left;
} #issues {
#issues li.selected img { width: 800px;
-webkit-transform: scale(1.1,1.1); height: 500px;
-moz-transform: scale(1.1,1.1); overflow: hidden;
-o-transform: scale(1.1,1.1); }
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1); #issues li {
} width: 900px;
#issues li img { height: 500px;
float: left; list-style: none;
margin: 10px 30px 10px 50px; float: left;
background: transparent; }
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */ #issues li.selected img {
zoom: 1; -webkit-transform: scale(1.1, 1.1);
-webkit-transition: all 2s ease-in-out; -moz-transform: scale(1.1, 1.1);
-moz-transition: all 2s ease-in-out; -o-transform: scale(1.1, 1.1);
-o-transition: all 2s ease-in-out; -ms-transform: scale(1.1, 1.1);
-ms-transition: all 2s ease-in-out; transform: scale(1.1, 1.1);
transition: all 2s ease-in-out; }
-webkit-transform: scale(0.7,0.7);
-moz-transform: scale(0.7,0.7); #issues li img {
-o-transform: scale(0.7,0.7); float: left;
-ms-transform: scale(0.7,0.7); margin: 10px 30px 10px 50px;
transform: scale(0.7,0.7); background: transparent;
} -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
#issues li h1 { /* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
font-size: 48px; /* IE 6 & 7 */
margin: 20px 0; zoom: 1;
color: red; -webkit-transition: all 2s ease-in-out;
/*text-shadow: #000 1px 1px 2px;*/ -moz-transition: all 2s ease-in-out;
} -o-transition: all 2s ease-in-out;
#issues li p { -ms-transition: all 2s ease-in-out;
font-size: 14px; transition: all 2s ease-in-out;
margin-right: 70px; -webkit-transform: scale(0.7, 0.7);
font-weight: normal; -moz-transform: scale(0.7, 0.7);
line-height: 22px; -o-transform: scale(0.7, 0.7);
/* text-shadow: #000 1px 1px 2px;*/ -ms-transform: scale(0.7, 0.7);
} transform: scale(0.7, 0.7);
}
#grad_left,
#grad_right { #issues li h1 {
width: 100px; font-size: 48px;
height: 500px; margin: 20px 0;
position: absolute; color: red;
top: 0; /*text-shadow: #000 1px 1px 2px;*/
} }
#grad_left {
left: 0; #issues li p {
/* background: url('timeline/grad_left.png') repeat-y;*/ font-size: 14px;
} margin-right: 70px;
#grad_right { font-weight: normal;
right: 0; line-height: 22px;
/* background: url('timeline/grad_right.png') repeat-y;*/ /* text-shadow: #000 1px 1px 2px;*/
} }
#next, #grad_left, #grad_right {
#prev { width: 100px;
position: absolute; height: 500px;
top: 0; position: absolute;
font-size: 70px; top: 0;
top: 170px; }
width: 22px;
height: 38px; #grad_left {
background-position: 0 0; left: 0;
background-repeat: no-repeat; /* background: url('timeline/grad_left.png') repeat-y;*/
text-indent: -9999px; }
overflow: hidden;
} #grad_right {
#next:hover, right: 0;
#prev:hover { /* background: url('timeline/grad_right.png') repeat-y;*/
background-position: 0 -76px; }
}
#next { #next, #prev {
right: 0; position: absolute;
background-image: url('timeline/next.png'); top: 0;
} font-size: 70px;
#prev { top: 170px;
left: 0; width: 22px;
background-image: url('timeline/prev.png'); height: 38px;
} background-position: 0 0;
#next.disabled, background-repeat: no-repeat;
#prev.disabled { text-indent: -9999px;
opacity: 0.2; overflow: hidden;
} }
#next:hover, #prev:hover {
background-position: 0 -76px;
}
#next {
right: 0;
background-image: url('timeline/next.png');
}
#prev {
left: 0;
background-image: url('timeline/prev.png');
}
#next.disabled, #prev.disabled {
opacity: 0.2;
}