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,9 +21,11 @@
<![endif]--> <![endif]-->
<style> <style>
html, body{ html,
body {
height: 100%; 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;
@ -32,14 +34,17 @@
background-size: cover; background-size: cover;
} }
textarea,input,select { textarea,
input,
select {
background-color: #FDFBFB; background-color: #FDFBFB;
border: 1px solid #BBBBBB; border: 1px solid #ffffff;
padding: 2px; padding: 2px;
margin: 1px; margin: 1px;
font-size: 14px; font-size: 14px;
color: #808080; color: #808080;
border-radius: 4px; border-radius: 4px;
margin-bottom: 6px;
} }
td { td {
@ -223,7 +228,7 @@ 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%;
} }
} }
@ -239,10 +244,13 @@ input[type="submit"] {
} }
.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%;
@ -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 align="right">Identificador: </td>
<td><input style="width: 100%" name="username" type="text" value="$(username)" /></td> <td><input style="width: 100%" name="username" type="text" value="$(username)" /></td>
</tr> </tr>
<tr><td align="right">Contraseña: </td> <tr>
<td align="right">Clave: </td>
<td><input style="width: 100%" name="password" type="password" /></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,26 +1,30 @@
<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,
textarea,input,select { input,
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%;
} }
@ -31,7 +35,8 @@ td {
} }
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;
@ -42,11 +47,7 @@ input[type="submit"]{
width: 24%; width: 24%;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {}
}
.tabula { .tabula {
@ -58,27 +59,53 @@ font-family: verdana;
font-size: 11px; font-size: 11px;
} }
body{ color: #737373; font-size: 12px; font-family: verdana; } body {
color: #737373;
font-size: 12px;
font-family: verdana;
}
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 12px; } a,
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; } a:link,
img {border: none;} a:visited,
td { font-size: 12px; padding: 4px;} a:active {
color: #AAAAAA;
text-decoration: none;
font-size: 12px;
}
a:hover {
border-bottom: 1px dotted #c1c1c1;
color: #AAAAAA;
}
img {
border: none;
}
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');
@ -88,11 +115,8 @@ $(endif)
//--> //-->
</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)
>
@ -110,22 +134,39 @@ $(endif)
<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>
<td>$(ip)</td>
</tr>
<tr>
<td align="right">bytes subida/descarga:</td>
<td>$(bytes-in-nice) / $(bytes-out-nice)</td>
</tr>
$(if session-time-left) $(if session-time-left)
<tr><td align="right">conectado / left:</td><td>$(uptime) / $(session-time-left)</td></tr> <tr>
<td align="right">conectado / left:</td>
<td>$(uptime) / $(session-time-left)</td>
</tr>
$(else) $(else)
<tr><td align="right">conectado:</td><td>$(uptime)</td></tr> <tr>
$(endif) <td align="right">conectado:</td>
$(if blocked == 'yes') <td>$(uptime)</td>
<tr><td align="right">status:</td><td><div style="color: #FF8080"> </tr>
<a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div></td> $(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) $(elif refresh-timeout)
<tr><td align="right">status refresh:</td><td>$(refresh-timeout)</td> <tr>
<td align="right">status refresh:</td>
<td>$(refresh-timeout)</td>
$(endif) $(endif)
</table> </table>
@ -134,11 +175,11 @@ $(if login-by-mac != 'yes')
<!-- 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,8 +3,8 @@
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;
@ -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,20 +63,22 @@ 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;
@ -85,10 +88,12 @@ h1,h2,h4,h5,h6 {
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 { #dates .selected {
font-size: 18px; font-size: 18px;
} }
@ -98,12 +103,14 @@ h1,h2,h4,h5,h6 {
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 { #issues li.selected img {
-webkit-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1);
@ -111,12 +118,15 @@ h1,h2,h4,h5,h6 {
-ms-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1);
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;
@ -129,13 +139,14 @@ h1,h2,h4,h5,h6 {
-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;
@ -144,24 +155,24 @@ h1,h2,h4,h5,h6 {
/* 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;
@ -173,19 +184,21 @@ h1,h2,h4,h5,h6 {
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;
} }