redcomani.org/portalcautivo/portal.html
2018-10-14 20:58:49 -05:00

250 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Captive Portal Login Page</title>
<style>
#content,
.login,
.login-card a,
.login-card h1,
.login-help {
text-align: center
}
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
font-family: 'Source Sans Pro', sans-serif;
background-color: #1C1275;
background: linear-gradient(135deg, #1475CF, #2B40B5, #1C1275);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: table-cell;
vertical-align: middle
}
.login-card {
padding: 40px;
width: 280px;
background-color: #F7F7F7;
margin: 100px auto 10px;
border-radius: 2px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
overflow: hidden
}
.login-card h1 {
font-weight: 400;
font-size: 2.3em;
color: #1383c6
}
.login-card h1 span {
color: #f26721
}
.login-card img {
width: 70%;
height: 70%
}
.login-card input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative
}
.login-card input[type=text],
input[type=password] {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid silver;
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box
}
.login-card input[type=text]:hover,
input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
}
.login {
font-size: 14px;
font-family: Arial, sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px
}
.login-submit {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, .1);
background-color: #4d90fe
}
.login-submit:disabled {
opacity: .6
}
.login-submit:hover {
border: 0;
text-shadow: 0 1px rgba(0, 0, 0, .3);
background-color: #357ae8
}
.login-card a {
text-decoration: none;
color: #222;
font-weight: 400;
display: inline-block;
opacity: .6;
transition: opacity ease .5s
}
.login-card a:hover {
opacity: 1
}
.login-help {
width: 100%;
font-size: 12px
}
.list {
list-style-type: none;
padding: 0
}
.list__item {
margin: 0 0 .7rem;
padding: 0
}
label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
font-size: 14px;
}
input[type=checkbox] {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
margin-right: 10px;
float: left
}
@media screen and (max-width:450px) {
.login-card {
width: 70%!important
}
.login-card img {
width: 30%;
height: 30%
}
}
textarea {
width: 66%;
margin: auto;
height: 120px;
max-height: 120px;
background-color: #f7f7f7;
padding: 20px
}
#terms {
display: none;
padding-top: 100px;
padding-bottom: 300px;
}
.auth_source {
border: 1px solid lightgray;
padding: 20px 8px 0px 8px;
margin-top: -2em;
border-radius: 2px;
}
.auth_head {
background-color: #f7f7f7;
display: inline-block;
}
.auth_head_div {
text-align: left;
}
#error-message {
text-align: left;
color: #ff3e3e;
font-style: italic;
}
</style>
</head>
<body>
<div id="content">
<div class="login-card">
<form method="post" action="$PORTAL_ACTION$">
<legend>Ingresa tu Usuario y Contraseña</legend>
<input name="auth_user" type="text" placeholder="Usuario" id="auth_user">
<input name="auth_pass" type="password" placeholder="Contraseña" id="auth_pass">
<legend>Si tienes un codigo de acceso, ingresalo aquí:</legend>
<input name="auth_voucher" type="text" placeholder="Codigo Voucher">
<input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
<input name="zone" type="hidden" value="$PORTAL_ZONE$">
<input name="accept" type="submit" value="Continue">
</form>
</div>
</div>
</body>
</html>