Skip to content

S
SkuciSe
Commit 0a842f57 by Milovan Samardzic
Options

NoviHeader

parent b4e26dd9
Showing with 348 additions and 230 deletions
SkuciSe/src/main/resources/static/css/style.css
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
body{ body{
font-family: 'Jost', serif;font-size: 22px; font-family: 'Jost', serif;font-size: 22px;
background-color: #d8dde0; background-color: #d8dde0;
overflow-x: hidden; overflow-x: hidden;
} }
header{ .navbar a{
width: 100%;
height: 120px;
background: white;
display: flex;
flex-flow: row;
}
header img{
margin-left:15%;
}
header nav{
width: 50%;
}
header nav ul{
height: 120px;
display: flex;
justify-content: start;
}
header nav ul li{
text-decoration: none; text-decoration: none;
color:#495056;
} }
header nav ul li{ .navbar-icon-top .navbar-nav .nav-link > .fa {
float:left;
list-style-type: none;
padding:50px;
}
header nav ul li a{
text-decoration: none;
color:#333333;
transition: width 2s;
display: inline-block;
position: relative; position: relative;
width: 36px;
font-size: 24px;
} }
header nav ul li a:after {
content: ''; .navbar-icon-top .navbar-nav .nav-link > .fa > .badge {
font-size: 0.75rem;
position: absolute; position: absolute;
width: 100%; right: 0;
transform: scaleX(0); font-family: sans-serif;
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
} }
header nav ul li a:hover:after { .navbar-icon-top .navbar-nav .nav-link > .fa {
transform: scaleX(1); top: 3px;
transform-origin: bottom left; line-height: 12px;
} }
header #navbar-login{
margin-top:1%; .navbar-icon-top .navbar-nav .nav-link > .fa > .badge {
margin-right:2%; top: -10px;
width: 50%;
height: 120px;
} }
header #navbar-login{
display:flex; @media (min-width: 576px) {
justify-content: end; .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link {
align-items: center; text-align: center;
display: table-cell;
height: 70px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}
.navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link > .fa {
display: block;
width: 48px;
margin: 2px auto 4px auto;
top: 0;
line-height: 24px;
}
.navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link > .fa > .badge {
top: -7px;
}
} }
header #navbar-login ul li{
float:left; @media (min-width: 768px) {
padding:20px; .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link {
list-style-type: none; text-align: center;
display: table-cell;
height: 70px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}
.navbar-icon-top.navbar-expand-md .navbar-nav .nav-link > .fa {
display: block;
width: 48px;
margin: 2px auto 4px auto;
top: 0;
line-height: 24px;
}
.navbar-icon-top.navbar-expand-md .navbar-nav .nav-link > .fa > .badge {
top: -7px;
}
} }
header #navbar-login ul li a{
text-decoration: none; @media (min-width: 992px) {
color: #3b3a37; .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link {
text-align: center;
display: table-cell;
height: 70px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}
.navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > .fa {
display: block;
width: 48px;
margin: 2px auto 4px auto;
top: 0;
line-height: 24px;
}
.navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > .fa > .badge {
top: -7px;
}
} }
header #navbar-login ul li button{
background-color: #3b3a37; @media (min-width: 1200px) {
border:0px; .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link {
border-radius: 20px; text-align: center;
display: table-cell;
height: 70px;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
}
.navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link > .fa {
display: block;
width: 48px;
margin: 2px auto 4px auto;
top: 0;
line-height: 24px;
}
.navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link > .fa > .badge {
top: -7px;
}
} }
#pozadina{ #pozadina{
width: 100%; width: 100%;
...@@ -129,7 +173,7 @@ h3{ ...@@ -129,7 +173,7 @@ h3{
font-size: calc(10px + (12 - 10) * ((100vw - 360px) / (1600 - 360))) !important; font-size: calc(10px + (12 - 10) * ((100vw - 360px) / (1600 - 360))) !important;
} }
.form-body{ .form-body{
height: 600px; height: 650px;
} }
.form-holder { .form-holder {
display: flex; display: flex;
...@@ -142,7 +186,7 @@ h3{ ...@@ -142,7 +186,7 @@ h3{
.form-holder .form-content { .form-holder .form-content {
position: relative; position: relative;
bottom:150px; bottom:100px;
text-align: center; text-align: center;
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
...@@ -154,6 +198,7 @@ h3{ ...@@ -154,6 +198,7 @@ h3{
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
padding: 60px; padding: 60px;
height: 700px;
} }
.form-content .form-items { .form-content .form-items {
...@@ -362,22 +407,3 @@ img { ...@@ -362,22 +407,3 @@ img {
width: 50%; width: 50%;
text-align: center; text-align: center;
} }
\ No newline at end of file
/*the fade animations*/
@keyframes fade-out {
from {
opacity: 100%;
}
to {
opacity: 0%;
}
}
@keyframes fade-in {
from {
opacity: 0%;
}
to {
opacity: 100%;
}
}
\ No newline at end of file
SkuciSe/src/main/resources/static/js/main.js
...@@ -27,27 +27,3 @@ function proveraLogin(){ ...@@ -27,27 +27,3 @@ function proveraLogin(){
document.getElementById("losaSifra").style.display = "none"; document.getElementById("losaSifra").style.display = "none";
} }
} }
//toggle var
var fade_state = true;
//on btn click
function fade() {
//get the button and div
let div = document.getElementById("fadeDiv");
let btn = document.getElementById("fade");
//if faded in or out
if (fade_state == true) {
//trigers animation
div.style.animation = "fade-out 2s forwards";
//sets the text
btn.innerHTML = "fade-in";
//sets fade_state
fade_state = false;
} else if (fade_state == false) {
//trigers animation
div.style.animation = "fade-in 2s forwards";
//sets the text
btn.innerHTML = "fade-out";
//sets fade_state
fade_state = true;
}
}
\ No newline at end of file
SkuciSe/src/main/resources/templates/index.html
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<title>SkuciSe</title> <title>SkuciSe</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.ico" /> <link rel="shortcut icon" type="image/x-icon" href="/images/logo.ico" />
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!-- Favicon--> <!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
...@@ -21,30 +22,42 @@ ...@@ -21,30 +22,42 @@
</head> </head>
<body th:object="${loggedUser}"> <body th:object="${loggedUser}">
<header>
<nav> <nav class="navbar navbar-icon-top navbar-expand-lg p-3" style="background-color: white;">
<ul> <a class="navbar-brand" href="#"> </a>
<li><a th:href="@{/index}">Pocetna</a></li> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<li><a href="">Kategorije</a></li> <span class="navbar-toggler-icon"></span>
<li><a href="#">O nama</a></li> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="@{/index}">
<i class="fa fa-home"></i>
Pocetna
<span class="sr-only">(current)</span>
</a>
</li>
</ul> </ul>
</nav> <form class="form-inline my-2 my-lg-0" th:if="${loggedUser != null}">
<div id="navbar-login" class="ml-10"> <button type="button" class="btn btn-primary btn-md mr-2"><i class="fa-solid fa-plus"></i> Postavite
<ul>
<li th:if="${loggedUser == null}"><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span
style="padding:5px;">Prijavi se</span></a></li>
<li th:if="${loggedUser == null}"><a th:href="@{/register}"><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 novi oglas
</button> </button>
</form>
<ul class="navbar-nav">
<li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/login}"><i class="fas fa-sign-in-alt" style="color:#495056"></i><span
style="padding:10px;color:#495056">Prijavi se</span></a>
</li>
<li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/register}"><i class="fa-solid fa-circle-user" style="color:#495056"></i><span
style="padding:10px;color:#495056">Registruj se</span></a>
</li> </li>
<li th:if="${loggedUser != null}"> <li th:if="${loggedUser != null}">
<div class="dropdown"> <div class="dropdown mr-4">
<button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton" <button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-circle-user"></i><span style="padding:5px;" <i class="fa-solid fa-circle-user"></i><span style="padding:10px;"
th:text="${loggedUser.getKorisnik().getIme()}"></span> th:text="${loggedUser.getKorisnik().getIme()}"></span>
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
...@@ -62,7 +75,7 @@ ...@@ -62,7 +75,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</header> </nav>
<div id="pozadina"> <div id="pozadina">
</div> </div>
...@@ -85,6 +98,8 @@ ...@@ -85,6 +98,8 @@
</footer> </footer>
</div> </div>
<!-- JavaScript Bundle with Popper --> <!-- JavaScript Bundle with Popper -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
......
SkuciSe/src/main/resources/templates/lista-korisnika-delete.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content=""/> <meta name="description" content="" />
<meta name="author" content=""/> <meta name="author" content="" />
<title>SkuciSe</title> <title>SkuciSe</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.ico"/> <link rel="shortcut icon" type="image/x-icon" href="/images/logo.ico" />
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!-- Favicon--> <!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"/> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- CSS only --> <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" <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">
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Core theme CSS (includes Bootstrap)--> <!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/style.css" rel="stylesheet"/> <link href="/css/style.css" rel="stylesheet" />
</head> </head>
<body th:object="${loggedUser}"> <body th:object="${loggedUser}">
<header> <nav class="navbar navbar-icon-top navbar-expand-lg p-3" style="background-color: white;">
<nav> <a class="navbar-brand" href="#"> </a>
<ul> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<li><a th:href="@{/index}">Pocetna</a></li> <span class="navbar-toggler-icon"></span>
<li><a href="">Kategorije</a></li> </button>
<li><a href="#">O nama</a></li>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="@{/index}">
<i class="fa fa-home"></i>
Pocetna
<span class="sr-only">(current)</span>
</a>
</li>
</ul> </ul>
</nav> <form class="form-inline my-2 my-lg-0" th:if="${loggedUser != null}">
<div id="navbar-login" class="ml-10"> <button type="button" class="btn btn-primary btn-md mr-2"><i class="fa-solid fa-plus"></i> Postavite
<ul>
<li th:if="${loggedUser == null}"><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span
style="padding:5px;">Prijavi se</span></a></li>
<li th:if="${loggedUser == null}"><a th:href="@{/register}"><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 novi oglas
</button> </button>
</form>
<ul class="navbar-nav">
<li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/login}"><i class="fas fa-sign-in-alt" style="color:#495056"></i><span
style="padding:10px;color:#495056">Prijavi se</span></a>
</li>
<li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/register}"><i class="fa-solid fa-circle-user" style="color:#495056"></i><span
style="padding:10px;color:#495056">Registruj se</span></a>
</li> </li>
<li th:if="${loggedUser != null}"> <li th:if="${loggedUser != null}">
<div class="dropdown"> <div class="dropdown mr-4">
<button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton" <button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-circle-user"></i><span style="padding:5px;" <i class="fa-solid fa-circle-user"></i><span style="padding:10px;"
th:text="${loggedUser.getKorisnik().getIme()}"></span> th:text="${loggedUser.getKorisnik().getIme()}"></span>
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
...@@ -63,7 +74,7 @@ ...@@ -63,7 +74,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</header> </nav>
<div class="container d-flex align-items-center justify-content-center flex flex-column h-50"> <div class="container d-flex align-items-center justify-content-center flex flex-column h-50">
<h1>Spisak korisnika</h1> <h1>Spisak korisnika</h1>
...@@ -153,15 +164,11 @@ ...@@ -153,15 +164,11 @@
</footer> </footer>
</div> </div>
<!-- JavaScript Bundle with Popper --> <!-- JavaScript Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
......
SkuciSe/src/main/resources/templates/lista-korisnika.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content=""/> <meta name="description" content="" />
<meta name="author" content=""/> <meta name="author" content="" />
<title>SkuciSe</title> <title>SkuciSe</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.ico"/> <link rel="shortcut icon" type="image/x-icon" href="/images/logo.ico" />
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!-- Favicon--> <!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"/> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- CSS only --> <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" <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">
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Core theme CSS (includes Bootstrap)--> <!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/style.css" rel="stylesheet"/> <link href="/css/style.css" rel="stylesheet" />
</head> </head>
<body th:object="${loggedUser}"> <body th:object="${loggedUser}">
<header> <nav class="navbar navbar-icon-top navbar-expand-lg p-3" style="background-color: white;">
<nav> <a class="navbar-brand" href="#"> </a>
<ul> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<li><a th:href="@{/index}">Pocetna</a></li> <span class="navbar-toggler-icon"></span>
<li><a href="">Kategorije</a></li> </button>
<li><a href="#">O nama</a></li>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="@{/index}">
<i class="fa fa-home"></i>
Pocetna
<span class="sr-only">(current)</span>
</a>
</li>
</ul> </ul>
</nav> <form class="form-inline my-2 my-lg-0" th:if="${loggedUser != null}">
<div id="navbar-login" class="ml-10"> <button type="button" class="btn btn-primary btn-md mr-2"><i class="fa-solid fa-plus"></i> Postavite
<ul>
<li th:if="${loggedUser == null}"><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span
style="padding:5px;">Prijavi se</span></a></li>
<li th:if="${loggedUser == null}"><a th:href="@{/register}"><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 novi oglas
</button> </button>
</form>
<ul class="navbar-nav">
<li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/login}"><i class="fas fa-sign-in-alt" style="color:#495056"></i><span
style="padding:10px;color:#495056">Prijavi se</span></a>
</li>
<li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/register}"><i class="fa-solid fa-circle-user" style="color:#495056"></i><span
style="padding:10px;color:#495056">Registruj se</span></a>
</li> </li>
<li th:if="${loggedUser != null}"> <li th:if="${loggedUser != null}">
<div class="dropdown"> <div class="dropdown mr-4">
<button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton" <button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-circle-user"></i><span style="padding:5px;" <i class="fa-solid fa-circle-user"></i><span style="padding:10px;"
th:text="${loggedUser.getKorisnik().getIme()}"></span> th:text="${loggedUser.getKorisnik().getIme()}"></span>
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
...@@ -63,7 +74,7 @@ ...@@ -63,7 +74,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</header> </nav>
<div class="container d-flex align-items-center justify-content-center flex flex-column h-50"> <div class="container d-flex align-items-center justify-content-center flex flex-column h-50">
<h1>Spisak korisnika</h1> <h1>Spisak korisnika</h1>
...@@ -147,15 +158,11 @@ ...@@ -147,15 +158,11 @@
</footer> </footer>
</div> </div>
<!-- JavaScript Bundle with Popper --> <!-- JavaScript Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
......
SkuciSe/src/main/resources/templates/login.html
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
<meta name="description" content="" /> <meta name="description" content="" />
<meta name="author" content="" /> <meta name="author" content="" />
<title>SkuciSe</title> <title>SkuciSe</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.ico" />
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!-- Favicon--> <!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
...@@ -20,23 +22,59 @@ ...@@ -20,23 +22,59 @@
</head> </head>
<body> <body>
<header> <nav class="navbar navbar-icon-top navbar-expand-lg p-3" style="background-color: white;">
<nav> <a class="navbar-brand" href="#"> </a>
<ul> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<li><a th:href="@{/index}">Pocetna</a></li> <span class="navbar-toggler-icon"></span>
<li><a href="#">Kategorije</a></li> </button>
<li><a href="#">O nama</a></li>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="@{/index}">
<i class="fa fa-home"></i>
Pocetna
<span class="sr-only">(current)</span>
</a>
</li>
</ul> </ul>
</nav> <form class="form-inline my-2 my-lg-0" th:if="${loggedUser != null}">
<!--<img src="../static/images/logo.png" alt="Logo">--> <button type="button" class="btn btn-primary btn-md mr-2"><i class="fa-solid fa-plus"></i> Postavite
<div id="navbar-login"> novi oglas
<ul> </button>
<li><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Uloguj se</span></a></li> </form>
<li><a th:href="@{/register}"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li> <ul class="navbar-nav">
<li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i> Postavite novi oglas</button></li> <li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/login}"><i class="fas fa-sign-in-alt" style="color:#495056"></i><span
style="padding:10px;color:#495056">Prijavi se</span></a>
</li>
<li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/register}"><i class="fa-solid fa-circle-user" style="color:#495056"></i><span
style="padding:10px;color:#495056">Registruj se</span></a>
</li>
<li th:if="${loggedUser != null}">
<div class="dropdown mr-4">
<button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-circle-user"></i><span style="padding:10px;"
th:text="${loggedUser.getKorisnik().getIme()}"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" th:href="@{/profile}">Moj Profil</a>
<a class="dropdown-item" th:href="@{/mojioglasi}">Moji Oglasi</a>
<a class="dropdown-item" th:href="@{/mojizahtevi}">Moji Zahtevi</a>
<a th:if="${loggedUser.getKorisnik().getTipId() == 2}" class="dropdown-item"
th:href="@{/lista-korisnika}">Lista Profila</a>
<form th:action="@{/logout}" method="post" id="my_form" class="dropdown-item">
<a href="#" onclick="document.getElementById('my_form').submit(); return false;"><i
class="fas fa-sign-in-alt"></i><span style="padding:5px;">Odjavi se</span></a>
</form>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</header> </nav>
<div class="form-body"> <div class="form-body">
<div class="row"> <div class="row">
...@@ -87,7 +125,13 @@ ...@@ -87,7 +125,13 @@
</div> </div>
</footer> </footer>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- JavaScript Bundle with Popper -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>
......
SkuciSe/src/main/resources/templates/register.html
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
<meta name="description" content="" /> <meta name="description" content="" />
<meta name="author" content="" /> <meta name="author" content="" />
<title>SkuciSe</title> <title>SkuciSe</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.ico" />
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!-- Favicon--> <!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
...@@ -20,25 +22,61 @@ ...@@ -20,25 +22,61 @@
</head> </head>
<body> <body>
<header> <nav class="navbar navbar-icon-top navbar-expand-lg p-3" style="background-color: white;">
<nav> <a class="navbar-brand" href="#"> </a>
<ul> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<li><a th:href="@{/index}">Pocetna</a></li> <span class="navbar-toggler-icon"></span>
<li><a href="#">Kategorije</a></li> </button>
<li><a href="#">O nama</a></li>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="@{/index}">
<i class="fa fa-home"></i>
Pocetna
<span class="sr-only">(current)</span>
</a>
</li>
</ul> </ul>
</nav> <form class="form-inline my-2 my-lg-0" th:if="${loggedUser != null}">
<!--<img src="../static/images/logo.png" alt="Logo">--> <button type="button" class="btn btn-primary btn-md mr-2"><i class="fa-solid fa-plus"></i> Postavite
<div id="navbar-login"> novi oglas
<ul> </button>
<li><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Prijavi se</span></a></li> </form>
<li><a th:href="@{/register}"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li> <ul class="navbar-nav">
<li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i> Postavite novi oglas</button></li> <li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/login}"><i class="fas fa-sign-in-alt" style="color:#495056"></i><span
style="padding:10px;color:#495056">Prijavi se</span></a>
</li>
<li class="nav-item" th:if="${loggedUser == null}">
<a th:href="@{/register}"><i class="fa-solid fa-circle-user" style="color:#495056"></i><span
style="padding:10px;color:#495056">Registruj se</span></a>
</li>
<li th:if="${loggedUser != null}">
<div class="dropdown mr-4">
<button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-circle-user"></i><span style="padding:10px;"
th:text="${loggedUser.getKorisnik().getIme()}"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" th:href="@{/profile}">Moj Profil</a>
<a class="dropdown-item" th:href="@{/mojioglasi}">Moji Oglasi</a>
<a class="dropdown-item" th:href="@{/mojizahtevi}">Moji Zahtevi</a>
<a th:if="${loggedUser.getKorisnik().getTipId() == 2}" class="dropdown-item"
th:href="@{/lista-korisnika}">Lista Profila</a>
<form th:action="@{/logout}" method="post" id="my_form" class="dropdown-item">
<a href="#" onclick="document.getElementById('my_form').submit(); return false;"><i
class="fas fa-sign-in-alt"></i><span style="padding:5px;">Odjavi se</span></a>
</form>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</header> </nav>
<div class="form-body"> <div class="form-body d-flex justify-content-center w-100 mt-5">
<div class="row"> <div class="row">
<div class="form-holder"> <div class="form-holder">
<div class="form-content" style="bottom:50px;"> <div class="form-content" style="bottom:50px;">
...@@ -127,7 +165,13 @@ ...@@ -127,7 +165,13 @@
</div> </div>
</footer> </footer>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- JavaScript Bundle with Popper -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
<!-- Core theme JS--> <!-- Core theme JS-->
......
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