mirror of
https://github.com/vincentmli/bpfire.git
synced 2026-04-27 03:07:43 +02:00
captive: Import new design
This is the new design of the access page of the captive portal. It is based on the Bootstrap 4 grid system and reboot but does not use anything else from it. It is responsive and customisable. Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
This commit is contained in:
Michael Tremer
@@ -1,76 +1,161 @@
|
||||
h1{
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
background-image: url("internet.png");
|
||||
background-size: cover; /* <------ */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-color: #eceff1;
|
||||
color: #263238;
|
||||
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title{
|
||||
body, input {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 272px 0 48px 0;
|
||||
padding: 0 30px 48px 30px;
|
||||
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #FFF;
|
||||
width: 40em;
|
||||
height: 6em;
|
||||
left: 1em;
|
||||
top: 2em;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-top: 0,5em;
|
||||
opacity: 0.9;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 19px 38px 0 rgba(0, 0, 0, 0.3),
|
||||
0 15px 12px 0 rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.login{
|
||||
.box-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 128px;
|
||||
}
|
||||
|
||||
.box-header h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.box-header {
|
||||
min-height: none;
|
||||
}
|
||||
|
||||
.box-header h1 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-block {
|
||||
padding: 24px 16px 24px 16px;
|
||||
margin: 0 -8px 40px -8px;
|
||||
|
||||
text-align: center;
|
||||
background-color: #b71c1c;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.box-block {
|
||||
padding: 18px 16px 18px 16px;
|
||||
margin: 0 0 48px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.box-block h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 64px;
|
||||
background-color: rgba(84, 110, 122, 0.06); /* #546e7a */
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer .logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
|
||||
color: #263238;
|
||||
background-color: rgba(38, 49, 56, 0,08);
|
||||
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 -2px 0 0 #546e7a;
|
||||
}
|
||||
|
||||
.form-text .error {
|
||||
box-shadow: 0 -2px 0 0 #ff3d00;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
display: inline-block;
|
||||
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
||||
height: 36px;
|
||||
padding: 0 16px 0 16px;
|
||||
margin: 0 8px 0 8px;
|
||||
|
||||
color: #263238;
|
||||
background-color: white;
|
||||
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
0 2px 4px 0 rgba(0, 0, 0, 0.16),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.form-submit:hover {
|
||||
box-shadow:
|
||||
0 3px 6px 0 rgba(0, 0, 0, 0.16),
|
||||
0 3px 6px 0 rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.form-submit:active {
|
||||
background-color: black;
|
||||
opacity: 0.16;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #FFF;
|
||||
width: 40em;
|
||||
left: 1em;
|
||||
top: 2em;
|
||||
margin-top: 0,2em;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-top: 1em;
|
||||
text-align: left;
|
||||
font-family: sans-serif;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
|
||||
display: block;
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.agb{
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #FFF;
|
||||
width: 40em;
|
||||
left: 1em;
|
||||
top: 2em;
|
||||
margin-top: 0,2em;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-top: 1em;
|
||||
text-align: left;
|
||||
font-family: sans-serif;
|
||||
opacity: 0.9;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
|
||||
}
|
||||
.checkbox .form-checkbox {
|
||||
position: absolute;
|
||||
margin-top: 1px;
|
||||
margin-left: -24px;
|
||||
|
||||
#agbtext{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
resize: none;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
background-color: rgba(38, 49, 56, 0.08);
|
||||
|
||||
border: 2px solid #546e7a;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
BIN
html/html/captive/assets/ipfire.png
Normal file
BIN
html/html/captive/assets/ipfire.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
@@ -1 +1,72 @@
|
||||
TEMPLATE GOES HERE
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><TMPL_VAR NAME="TITLE"></title>
|
||||
|
||||
<link rel="stylesheet" href="../assets/bootstrap-reboot.min.css">
|
||||
<link rel="stylesheet" href="../assets/bootstrap-grid.min.css">
|
||||
<link rel="stylesheet" href="../assets/captive.css">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500" rel="stylesheet">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container content">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<h1><TMPL_VAR NAME="TITLE"></h1>
|
||||
</div>
|
||||
|
||||
<div class="box-block">
|
||||
<TMPL_IF NAME="VOUCHER">
|
||||
<h4><TMPL_VAR NAME="L_HEADING_VOUCHER"></h4>
|
||||
<TMPL_ELSE>
|
||||
<h4><TMPL_VAR NAME="L_HEADING_TAC"></h4>
|
||||
</TMPL_IF>
|
||||
|
||||
<form action="" method="POST">
|
||||
<input type="hidden" name="url" value="<TMPL_VAR NAME="URL">">
|
||||
|
||||
<TMPL_IF NAME="VOUCHER">
|
||||
<input class="form-text" type="text" name="VOUCHER">
|
||||
<input class="form-submit" type="submit"
|
||||
value="<TMPL_VAR NAME="L_ACTIVATE">">
|
||||
<TMPL_ELSE>
|
||||
<input class="form-submit" type="submit"
|
||||
value="<TMPL_VAR NAME="L_GAIN_ACCESS">">
|
||||
</TMPL_IF>
|
||||
|
||||
<TMPL_IF NAME="TAC">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input class="form-checkbox" type="checkbox">
|
||||
<TMPL_VAR NAME="L_AGREE_TAC">
|
||||
</label>
|
||||
</div>
|
||||
</TMPL_IF>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<TMPL_IF NAME="TAC">
|
||||
<TMPL_VAR NAME="TAC">
|
||||
</TMPL_IF>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer">
|
||||
<img class="logo" src="../assets/ipfire.png" alt="IPFire Logo">
|
||||
Powered by IPFire
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user