login.pt
4.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en"
tal:define="home request._host;">
<head>
<title>This is a Bootstrap example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--? <link rel="stylesheet" type="text/css" media="screen" href="${home}/static/v3/css/bootstrap.min.css">-->
<!--? <script type="text/javascript" src="${home}/deform_static/scripts/jquery-2.0.3.min.js"></script>-->
<!--? <script type="text/javascript" src="${home}/deform_static/scripts/bootstrap.min.js"></script>-->
</head>
<style media="screen">
html,
body {
height: 100%;
}
.div-1 {
background-color: #0071b5;
}
.div-2 {
background-color: #3c8ebc;
}
h3 {
color: white;
font-weight: bolder;
text-align: center;
}
.form-control, .form-control:hover, .form-control:focus {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #ffffff;
background-color: #fff0;
background-clip: padding-box;
border: 1px solid #ced4da00;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
border-bottom: 2px solid white;
}
.text-muted {
color: #ccc3c3 !important;
}
.btn-login, .btn-login:hover {
background-color: #0353a4;
border-color: #0353a4;
width: 30%;
}
.btn-sign-up, .btn-sign-up:hover {
background-color: #ea7f04;
border-color: #ea7f04;
width: 30%;
}
label {
color: white;
}
input {
margin-top: 0.5rem;
border-bottom: 5px solid white;
}
input::placeholder {
color: white !important;
}
</style>
<body>
<div class="container-fluid h-100 ">
<div class="row justify-content-center h-100">
<div class="col-sm-6 hidden-md-down div-1 justify-content-center d-flex align-items-center">
<img src="pbb.monitoring:static/img/logo.png" alt="">
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 div-2 justify-content-center d-flex align-items-center">
<form method="post">
<h3>Eksekutif Information System</h3>
<small class="form-text text-muted text-center">Welcome back! Please login to your account.</small>
<br>
<div tal:condition="request.session.peek_flash()">
<div class="alert alert-success" tal:repeat="message request.session.pop_flash()"><i
class="fa fa-fw fa-lg fa-check-circle"></i> ${message}
</div>
</div>
<div tal:condition="request.session.peek_flash('error')">
<div class="alert alert-danger" tal:repeat="message request.session.pop_flash('error')"><i
class="fa fa-fw fa-lg fa-times-circle"></i> ${message}
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="username"
placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
</div>
<br>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember me</label>
<a href="#" class="form-forgot" style="text-align: right;float: right;color:white">Forgot Password</a>
</div>
<div class="text-center">
<button type="submit" class="btn-login btn btn-sm btn-success" name="login">Login</button>
<button class="btn-sign-up btn btn-sm btn-success">Sign Up</button>
</div>
<section>
<div tal:condition="'csrf_token' in form">
<div tal:define="field form['csrf_token']" style="display: none;">
${structure:field.serialize()}
</div>
</div>
</section>
</form>
</div>
</div>
</div>
</body>
</html>