ajustes responsive

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

View File

@ -21,10 +21,12 @@
<![endif]--> <![endif]-->
<style> <style>
html, body{ html,
height:100%; body {
height: 100%;
} }
body{
body {
background: url(captiveportal-imagen_central.jpg)no-repeat center center fixed; background: url(captiveportal-imagen_central.jpg)no-repeat center center fixed;
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
@ -32,21 +34,24 @@
background-size: cover; background-size: cover;
} }
textarea,input,select { textarea,
background-color: #FDFBFB; input,
border: 1px solid #BBBBBB; select {
padding: 2px; background-color: #FDFBFB;
margin: 1px; border: 1px solid #ffffff;
font-size: 14px; padding: 2px;
color: #808080; margin: 1px;
border-radius: 4px; font-size: 14px;
} color: #808080;
border-radius: 4px;
margin-bottom: 6px;
}
td{ td {
font-weight: bolder; font-weight: bolder;
} }
input[type="submit"] { input[type="submit"] {
background: -webkit-linear-gradient(left, #8eb932, #c7a010) !important; background: -webkit-linear-gradient(left, #8eb932, #c7a010) !important;
border: none; border: none;
padding: 5px 20px 5px 20px; padding: 5px 20px 5px 20px;
@ -54,7 +59,7 @@ input[type="submit"] {
font-weight: 600; font-weight: 600;
border-radius: 30px; border-radius: 30px;
margin-top: 1em; 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,14 +226,14 @@ 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;
} }
@ -237,22 +242,25 @@ input[type="submit"] {
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) {
@media only screen and (max-width: 425px) {
.register-right { .register-right {
border-top-left-radius: 0% 50%; border-top-left-radius: 0% 50%;
border-bottom-left-radius: 0% 50%; border-bottom-left-radius: 0% 50%;
background:#f8f9fad4 background: #f8f9fad4
} }
.register-left img { .register-left img {
width: 100%; width: 100%;
} }
} }
</style> </style>
</head> </head>
@ -306,19 +314,21 @@ input[type="submit"] {
<table> <table>
<tr> <tr>
<td align="center" valign="bottom" colspan="2"> <td align="center" valign="bottom" colspan="2">
<form name="login" action="$(link-login-only)" method="post" <form name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
$(if chap-id) onSubmit="return doLogin()" $(endif)>
<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" />
<table width="100%"> <table width="100%">
<tr><td align="right">Usuario: </td> <tr>
<td><input style="width: 100%" name="username" type="text" value="$(username)"/></td> <td align="right">Identificador: </td>
<td><input style="width: 100%" name="username" type="text" value="$(username)" /></td>
</tr> </tr>
<tr><td align="right">Contraseña: </td> <tr>
<td><input style="width: 100%" name="password" type="password"/></td> <td align="right">Clave: </td>
<td><input style="width: 100%" name="password" type="password" /></td>
</tr> </tr>
<tr><td>&nbsp;</td> <tr>
<td>&nbsp;</td>
<td><input type="submit" value="Ingresar" /></td> <td><input type="submit" value="Ingresar" /></td>
</tr> </tr>
</table> </table>
@ -329,7 +339,8 @@ input[type="submit"] {
</table> </table>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif) $(if error)<br />
<div style="color: #ff4b00; font-size: 1em">$(error)</div>$(endif)
</td> </td>
</tr> </tr>
</table> </table>
@ -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">

View File

@ -1,37 +1,42 @@
<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 { }
img {
width: 50%; width: 50%;
} }
td { td {
font-size: 2em !important; font-size: 2em !important;
padding: 4px; padding: 4px;
} }
input[type="submit"]{ input[type="submit"] {
background: -webkit-linear-gradient(left, #7F9E3C, #E4A42F) !important;; background: -webkit-linear-gradient(left, #7F9E3C, #E4A42F) !important;
;
border: none; border: none;
padding: 5px 20px 5px 20px; padding: 5px 20px 5px 20px;
color: white; color: white;
@ -40,105 +45,141 @@ input[type="submit"]{
margin-top: 1em; 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') $(
if advert - pending == 'yes')
var popup = ''; var popup = '';
function focusAdvert() { function focusAdvert() {
if (window.focus) popup.focus(); if (window.focus) popup.focus();
} }
function openAdvert() { function openAdvert() {
popup = open('$(link-advert)', 'hotspot_advert', ''); popup = open('$(link-advert)', 'hotspot_advert', '');
setTimeout("focusAdvert()", 1000); setTimeout("focusAdvert()", 1000);
} }
$(endif) $(endif)
function openLogout() { function openLogout() {
if (window.name != 'hotspot_status') return true; 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'); open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250');
window.close(); window.close();
return false; return false;
} }
//--> //-->
</script> </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>

View File

@ -25,6 +25,7 @@ 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;

View File

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