Skip to content

S
SkuciSe
Commit 1d7914a5 by Milovan Samardzic
Options

LoginRegister

parent 43d42692
Showing with 398 additions and 7 deletions
SkuciSe/src/main/resources/static/css/style.css
body{
font-family: 'Jost', serif;font-size: 22px;
background-color: #d8dde0;
overflow-x: hidden;
}
header{
width: 100%;
......@@ -91,3 +92,172 @@ header #navbar-login ul li button{
color:#367588;
font-size:60px;
}
.container-fluid{
overflow:hidden;
margin-top: 250px ;
background:#262626 ;
color: #627482 !important;
margin-bottom: 0 ;
padding-bottom:0 ;
}
small{
font-size: calc(12px + (15 - 12) * ((100vw - 360px) / (1600 - 360))) !important;
}
.bold-text{
color: #989c9e !important;
}
.mt-55{
margin-top: calc(50px + (60 - 50) * ((100vw - 360px) / (1600 - 360))) !important;
}
h3{
font-size: calc(34px + (40 - 34) * ((100vw - 360px) / (1600 - 360))) !important;
}
.social{
font-size: 21px !important;
}
.rights{
font-size: calc(10px + (12 - 10) * ((100vw - 360px) / (1600 - 360))) !important;
}
.form-body{
height: 600px;
}
.form-holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
.form-holder .form-content {
position: relative;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
padding: 60px;
}
.form-content .form-items {
border: 3px solid #fff;
padding: 40px;
display: inline-block;
width: 100%;
min-width: 540px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: left;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.form-content h3 {
color: #fff;
text-align: left;
font-size: 28px;
font-weight: 600;
margin-bottom: 5px;
}
.form-content h3.form-title {
margin-bottom: 30px;
}
.form-content p {
color: #fff;
text-align: left;
font-size: 17px;
font-weight: 300;
line-height: 20px;
margin-bottom: 30px;
}
.form-content label, .was-validated .form-check-input:invalid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label{
color: #fff;
}
.form-content input[type=text], .form-content input[type=password], .form-content input[type=email], .form-content select {
width: 100%;
padding: 9px 20px;
text-align: left;
border: 0;
outline: 0;
border-radius: 6px;
background-color: #fff;
font-size: 15px;
font-weight: 300;
color: #8D8D8D;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-top: 16px;
}
.btn-primary{
background-color: #6C757D;
outline: none;
border: 0px;
box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
background-color: #495056;
outline: none !important;
border: none !important;
box-shadow: none;
}
.form-content textarea {
position: static !important;
width: 100%;
padding: 8px 20px;
border-radius: 6px;
text-align: left;
background-color: #fff;
border: 0;
font-size: 15px;
font-weight: 300;
color: #8D8D8D;
outline: none;
resize: none;
height: 120px;
-webkit-transition: none;
transition: none;
margin-bottom: 14px;
}
.form-content textarea:hover, .form-content textarea:focus {
border: 0;
background-color: #ebeff8;
color: #8D8D8D;
}
.mv-up{
margin-top: -9px !important;
margin-bottom: 8px !important;
}
.invalid-feedback{
color: #ff606e;
}
.valid-feedback{
color: #2acc80;
}
\ No newline at end of file
SkuciSe/src/main/resources/static/js/main.js 0 → 100644
(function () {
'use strict'
const forms = document.querySelectorAll('.requires-validation')
Array.from(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
\ No newline at end of file
SkuciSe/src/main/resources/templates/index.html
......@@ -23,7 +23,7 @@
<header>
<nav>
<ul>
<li><a href="#">Pocetna</a></li>
<li><a href="index.html">Pocetna</a></li>
<li><a href="#">Kategorije</a></li>
<li><a href="#">O nama</a></li>
</ul>
......@@ -31,8 +31,8 @@
<!--<img src="../static/images/logo.png" alt="Logo">-->
<div id="navbar-login">
<ul>
<li><a href="#"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Uloguj se</span></a></li>
<li><a href="#"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li>
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Uloguj se</span></a></li>
<li><a href="register.html"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li>
<li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i> Postavite novi oglas</button></li>
</ul>
</div>
......@@ -51,7 +51,6 @@
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="../static/js/main.js"></script>
</body>
</html>
SkuciSe/src/main/resources/templates/login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Small Business - Start Bootstrap Template</title>
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="../static/css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Pocetna</a></li>
<li><a href="#">Kategorije</a></li>
<li><a href="#">O nama</a></li>
</ul>
</nav>
<!--<img src="../static/images/logo.png" alt="Logo">-->
<div id="navbar-login">
<ul>
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Uloguj se</span></a></li>
<li><a href="register.html"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li>
<li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i> Postavite novi oglas</button></li>
</ul>
</div>
</header>
<div class="form-body">
<div class="row">
<div class="form-holder">
<div class="form-content">
<div class="form-items">
<h3>Prijavi se</h3>
<form class="requires-validation" novalidate>
<div class="col-md-12">
<input class="form-control" type="text" name="email" placeholder="Email" required>
<div class="invalid-feedback">Email ne sme biti prazan!</div>
</div>
<div class="col-md-12">
<input class="form-control" type="text" name="password" placeholder="Sifra" required>
<div class="invalid-feedback">Sifra ne sme biti prazna!</div>
</div>
<div class="form-button mt-3">
<button id="submit" type="submit" class="btn btn-primary">Prijavi se</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pb-0 mb-0 justify-content-center text-light ">
<footer>
<div class="row my-5 justify-content-center py-5">
<div class="col-11">
<div class="row ">
<div class="col-xl-8 col-md-4 col-sm-4 col-12 my-auto mx-auto a"><h3 class="text-muted mb-md-0 mb-5 bold-text">Pepper.</h3></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 bold-text "><b>MENU</b></h6><ul class="list-unstyled"><li>Home</li><li>About</li><li>Blog</li><li>Portfolio</li></ul></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 text-muted bold-text mt-sm-0 mt-5"><b>ADDRESS</b></h6><p class="mb-1">605, RATAN ICON BUILDING</p><p>SEAWOODS SECTOR</p> </div>
</div>
<div class="row ">
<div class="col-xl-8 col-md-4 col-sm-4 col-auto my-md-0 mt-5 order-sm-1 order-3 align-self-end"><p class="social text-muted mb-0 pb-0 bold-text"> <span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-linkedin-square" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span> </p><small class="rights"><span>&#174;</span> Pepper All Rights Reserved.</small></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-auto order-1 align-self-end "><h6 class="mt-55 mt-2 text-muted bold-text"><b>ANIRUDH SINGLA</b></h6><small> <span><i class="fa fa-envelope" aria-hidden="true"></i></span> anirudh@gmail.com</small></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-auto order-2 align-self-end mt-3 "><h6 class="text-muted bold-text"><b>RISHABH SHEKHAR</b></h6><small><span><i class="fa fa-envelope" aria-hidden="true"></i></span> rishab@gmail.com</small></div>
</div>
</div>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="../static/js/main.js"></script>
</body>
</html>
SkuciSe/src/main/resources/templates/register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Small Business - Start Bootstrap Template</title>
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="../static/css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Pocetna</a></li>
<li><a href="#">Kategorije</a></li>
<li><a href="#">O nama</a></li>
</ul>
</nav>
<!--<img src="../static/images/logo.png" alt="Logo">-->
<div id="navbar-login">
<ul>
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Uloguj se</span></a></li>
<li><a href="register.html"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li>
<li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i> Postavite novi oglas</button></li>
</ul>
</div>
</header>
<div class="form-body">
<div class="row">
<div class="form-holder">
<div class="form-content">
<div class="form-items">
<h3>Registrujte se</h3>
<p>Popunite podatke ispod.</p>
<form class="requires-validation" novalidate>
<div class="col-md-12">
<input class="form-control" type="text" name="name" placeholder="Ime" required>
<div class="valid-feedback">Dobro ime!</div>
<div class="invalid-feedback">Ime ne sme biti prazno!</div>
</div>
<div class="col-md-12">
<input class="form-control" type="text" name="surname" placeholder="Prezime" required>
<div class="valid-feedback">Dobro prezime!</div>
<div class="invalid-feedback">Prezime ne sme biti prazno!</div>
</div>
<div class="col-md-12">
<input class="form-control" type="text" name="phone" placeholder="Broj telefona" required>
<div class="valid-feedback">Dobar broj!</div>
<div class="invalid-feedback">Broj telefona ne sme biti prazan!</div>
</div>
<div class="col-md-12">
<input class="form-control" type="email" name="email" placeholder="E-mail Adresa" required>
<div class="valid-feedback">Dobar email!</div>
<div class="invalid-feedback">Email ne sme biti prazan!</div>
</div>
<div class="col-md-12">
<input class="form-control" type="password" name="password" placeholder="Sifra" required>
<div class="valid-feedback">Dobra sifra!</div>
<div class="invalid-feedback">Sifra ne sme biti prazna!</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label">Potvrdjujem da su svi podaci tacni</label>
<div class="invalid-feedback">Molim vas da potvrdite da su svi podaci tacni!</div>
</div>
<div class="form-button mt-3">
<button id="submit" type="submit" class="btn btn-primary">Registruj se</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pb-0 mb-0 justify-content-center text-light ">
<footer>
<div class="row my-5 justify-content-center py-5">
<div class="col-11">
<div class="row ">
<div class="col-xl-8 col-md-4 col-sm-4 col-12 my-auto mx-auto a"><h3 class="text-muted mb-md-0 mb-5 bold-text">Pepper.</h3></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 bold-text "><b>MENU</b></h6><ul class="list-unstyled"><li>Home</li><li>About</li><li>Blog</li><li>Portfolio</li></ul></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 text-muted bold-text mt-sm-0 mt-5"><b>ADDRESS</b></h6><p class="mb-1">605, RATAN ICON BUILDING</p><p>SEAWOODS SECTOR</p> </div>
</div>
<div class="row ">
<div class="col-xl-8 col-md-4 col-sm-4 col-auto my-md-0 mt-5 order-sm-1 order-3 align-self-end"><p class="social text-muted mb-0 pb-0 bold-text"> <span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-linkedin-square" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span> </p><small class="rights"><span>&#174;</span> Pepper All Rights Reserved.</small></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-auto order-1 align-self-end "><h6 class="mt-55 mt-2 text-muted bold-text"><b>ANIRUDH SINGLA</b></h6><small> <span><i class="fa fa-envelope" aria-hidden="true"></i></span> anirudh@gmail.com</small></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-auto order-2 align-self-end mt-3 "><h6 class="text-muted bold-text"><b>RISHABH SHEKHAR</b></h6><small><span><i class="fa fa-envelope" aria-hidden="true"></i></span> rishab@gmail.com</small></div>
</div>
</div>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="../static/js/main.js"></script>
<!-- Core theme JS-->
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment