11 changed files with 390 additions and 320 deletions
-
8pom.xml
-
4src/main/resources/application.properties
-
BINsrc/main/resources/static/assets/img/img/logocp.png
-
BINsrc/main/resources/static/assets/img/img/meadiaquriy2.jpg
-
BINsrc/main/resources/static/assets/img/img/meadiaquriymob.jpg
-
BINsrc/main/resources/static/assets/img/img/mediaqurey.jpg
-
BINsrc/main/resources/static/assets/img/img/todaybgbaner.jpg
-
25src/main/resources/templates/fragment/Head.html
-
12src/main/resources/templates/fragment/Header.html
-
20src/main/resources/templates/fragment/Js.html
-
247src/main/resources/templates/login.html
|
After Width: 328 | Height: 438 | Size: 188 KiB |
|
After Width: 1750 | Height: 750 | Size: 890 KiB |
|
After Width: 1200 | Height: 1200 | Size: 754 KiB |
|
After Width: 7291 | Height: 3125 | Size: 6.2 MiB |
|
After Width: 1600 | Height: 685 | Size: 113 KiB |
@ -1,139 +1,208 @@ |
|||
<!DOCTYPE html> |
|||
<html xmlns:th="https://www.thymeleaf.org"> |
|||
|
|||
<!-- head tag --> |
|||
<div th:replace="fragment/Head.html::head"></div> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>LoginPage</title> |
|||
<link href="../asset/css/style.css" rel="stylesheet"> |
|||
<!-- Bootstrap CSS --> |
|||
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"> |
|||
<!-- Custom CSS --> |
|||
|
|||
<style> |
|||
body { |
|||
font-family: "Open Sans", sans-serif; |
|||
/* background: #405d97; */ |
|||
background: url("../../assets/img/Loop-twinkle.gif"); |
|||
color: #444444; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
/* background-image: url('../../assets/img/greater-chennai-corporation.jpg'); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; */ |
|||
} |
|||
|
|||
.bg { |
|||
background-image: url('../../assets/img/greater-chennai-corporation.png'); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
|
|||
|
|||
.card { |
|||
width: 350px; |
|||
margin: 0 auto; |
|||
margin-top: 50px; |
|||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); |
|||
border-radius: 5px; |
|||
align-items: center; |
|||
/* display: flex; */ |
|||
padding: 20px; |
|||
text-align: center; |
|||
background-color: rgba(255, 255, 255, 0.9); |
|||
opacity: 0.9; |
|||
|
|||
|
|||
} |
|||
|
|||
.login-span { |
|||
position: relative; |
|||
bottom: 40px; |
|||
right: 370px; |
|||
.card-header { |
|||
font-weight: bold; |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.login-span2 { |
|||
position: relative; |
|||
bottom: 102px; |
|||
left: 280px; |
|||
.form-group { |
|||
margin-bottom: 20px; |
|||
|
|||
} |
|||
|
|||
input[type=text], input[type=password] { |
|||
width: 100%; |
|||
padding: 12px 20px; |
|||
margin: 8px 0; |
|||
display: inline-block; |
|||
border: 1px solid #ccc; |
|||
border-radius: 4px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.logo-span3 { |
|||
button { |
|||
background-color: #007bff; |
|||
color: white; |
|||
padding: 17px 109px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
button:hover { |
|||
background-color: #0069d9; |
|||
} |
|||
|
|||
.text-muted { |
|||
font-size: 14px; |
|||
} |
|||
.main-section { |
|||
width: 100%; |
|||
/* float: left; */ |
|||
padding: 40px; |
|||
/* margin: 0 auto; */ |
|||
position: relative; |
|||
bottom: 100px; |
|||
left: 285px; |
|||
display: flex; |
|||
|
|||
|
|||
} |
|||
.main-section .left-side-contant { |
|||
float: left; |
|||
width: 50%; |
|||
padding-right: 10px; |
|||
|
|||
} |
|||
.main-section .right-side-contant { |
|||
float: left; |
|||
width: 55%; |
|||
|
|||
.login-logo { |
|||
|
|||
} |
|||
h4 { |
|||
position: relative; |
|||
margin-left: 74px; |
|||
text-align: center; |
|||
font-weight: bold; |
|||
|
|||
} |
|||
.container-fluid { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.card { |
|||
position: relative; |
|||
bottom: 35px; |
|||
right: 380px; |
|||
align-items: center; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
.bgbanner{ |
|||
background-image: url('../assets/img/img/mediaqurey.jpg'); |
|||
width: 100%; |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
background-size: 100%; |
|||
height: 100vh; |
|||
background-position: center; |
|||
/* margin-bottom: 30px; */ |
|||
background-size: cover; |
|||
} |
|||
.left-side-contant img{ |
|||
width: 35px; |
|||
margin-left: -40px; |
|||
float: left; |
|||
margin-top: -15px; |
|||
position: absolute; |
|||
margin-left: 20px; |
|||
} |
|||
.left-side-contant h4{ |
|||
line-height: 40px; |
|||
position: relative; |
|||
/* position: absolute; */ |
|||
margin-left: 20px; |
|||
} |
|||
.main-section{ |
|||
padding: 55px 40px; |
|||
} |
|||
|
|||
@media only screen and (max-width: 768px) { |
|||
.cardbody { |
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
</style> |
|||
|
|||
</style> |
|||
<body> |
|||
<div class="bg"> |
|||
<main class="container"> |
|||
<div class="container"> |
|||
|
|||
<section |
|||
class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4"> |
|||
<!-- <div class="container"> --> |
|||
<div class="row justify-content-center"> |
|||
<div class="d-flex justify-content-center py-1"> |
|||
<a class="logo d-flex align-items-center w-auto" href="#"> |
|||
<img alt="" class="login-logo" src="../../assets/img/logo.png" style="max-height: 80px;"> |
|||
<span class="d-none d-lg-block login-span" style="color: #ffffff; font-size: 28px;">GREATER CHENNAI CORPORATION</span> |
|||
</a> |
|||
</div><!-- End Logo --> |
|||
<div class="d-flex justify-content-center py-1"> |
|||
<a class="logo d-flex align-items-center w-auto" href="#"> |
|||
<span class="d-none d-lg-block login-span2" style="color: #ffffff; font-size: 28px;">SMART GOVERNANCE</span> |
|||
</a> |
|||
</div><!-- End Logo --> |
|||
<div class="d-flex justify-content-center py-1"> |
|||
<a class="logo d-flex align-items-center w-auto" href="#"> |
|||
<span class="d-none d-lg-block logo-span3" style="color: #ffffff; font-size: 28px;">CITIZEN FEEDBACK USING QR</span> |
|||
</a> |
|||
</div><!-- End Logo --> |
|||
<div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center"> |
|||
|
|||
<div class="card mb-3" style="opacity: 0.90;"> |
|||
<div class="bgbanner"> |
|||
|
|||
<div class="card-body"> |
|||
<div class="container-fluid"> |
|||
|
|||
<div class="pt-4 pb-2"> |
|||
<h5 class="card-title text-center pb-0 fs-4">Login to Your Account</h5> |
|||
<p class="text-center small">Enter your username & password to login</p> |
|||
<span style="color: red;" th:text="${errorMsg}"></span> |
|||
<header class="main-section"> |
|||
|
|||
</div> |
|||
<section class="left-side-contant"> |
|||
<img alt="chennai-logo" src="../assets/img/img/logocp.png" style="width: 65px;"> |
|||
<h4 style="color: #f5f5f5; font-size: 25px;">GREATER CHENNAI CORPORATION</h4> |
|||
</section> |
|||
<section class="right-side-contant"> |
|||
<h4 style="color: #ffffff; font-size: 25px;">SMART GOVERNANCE<br>CITIZEN FEEDBACK USING QR</h4> |
|||
</section> |
|||
</header> |
|||
<div class="card"> |
|||
<div class="card-header" style="color:rgb(47, 163, 235); font-size: 20px;">Login to Your Account</div> |
|||
<div class="card-body"> |
|||
|
|||
<form class="row g-3 needs-validation" method="POST" |
|||
name='loginForm' th:action="@{/qr-feedback/dashboard}"> |
|||
|
|||
|
|||
<div class="col-12"> |
|||
<label class="form-label" for="yourUsername">Username</label> |
|||
<div class="input-group has-validation"> |
|||
<!-- <span class="input-group-text" id="inputGroupPrepend">@</span> --> |
|||
<input class="form-control" id="yourUsername" name="username" required |
|||
<input class="form-control" id="yourUsername" name="username" placeholder="Username" required |
|||
type="text"> |
|||
<div class="invalid-feedback">Please enter your username.</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-12"> |
|||
<label class="form-label" for="yourPassword">Password</label> |
|||
<input class="form-control" id="yourPassword" name="password" required |
|||
type="password"> |
|||
<input class="form-control" id="yourPassword" name="password" placeholder="Password" |
|||
required type="password"> |
|||
<div class="invalid-feedback">Please enter your password!</div> |
|||
</div> |
|||
|
|||
<div class="col-12"> |
|||
<!-- <div class="form-check"> |
|||
<input class="form-check-input" type="checkbox" name="remember" value="true" id="rememberMe"> |
|||
<label class="form-check-label" for="rememberMe">Remember me</label> |
|||
</div> --> |
|||
</div> |
|||
<div class="col-12"> |
|||
<button class="btn btn-primary w-100" type="submit">Login</button> |
|||
</div> |
|||
<!-- <div class="col-12"> |
|||
<p class="small mb-0">Don't have account? <a href="pages-register.html">Create an account</a></p> |
|||
</div> --> |
|||
</form> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- </div> --> |
|||
|
|||
</section> |
|||
|
|||
<!-- Bootstrap JS --> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> |
|||
</div> |
|||
</main><!-- End #main --> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue