Commit 768cbb6f authored by Shivanthi Fernando's avatar Shivanthi Fernando

Merge branch 'home_page_ui_edit' into 'master'

Changes in login and home page interface

See merge request !6
parents 1b2a8ffc efca2338
...@@ -48,7 +48,7 @@ ROOT_URLCONF = 'ServiceStation_2022.urls' ...@@ -48,7 +48,7 @@ ROOT_URLCONF = 'ServiceStation_2022.urls'
TEMPLATES = [ TEMPLATES = [
{ {
'BACKEND': 'django.template.backends.django.DjangoTemplates', 'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR,], 'DIRS': [TEMPLATE_DIR],
'APP_DIRS': True, 'APP_DIRS': True,
'OPTIONS': { 'OPTIONS': {
'context_processors': [ 'context_processors': [
......
from django.contrib import admin from django.contrib import admin
from django.urls import path,include from django.urls import path, include
from django.contrib.auth.views import LogoutView,LoginView from django.contrib.auth.views import LogoutView,LoginView
urlpatterns = [ urlpatterns = [
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
path('Admin/',include('User.urls')), path('Admin/', include('User.urls')),
] ]
...@@ -6,11 +6,20 @@ ...@@ -6,11 +6,20 @@
<!-- Font special for pages--> <!-- Font special for pages-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<!-- Main CSS--> <!-- ChartJs CDN-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<link href="{% static "css/main.css" %}"rel="stylesheet" media="all"> <link href="{% static "css/main.css" %}"rel="stylesheet" media="all">
</head> </head>
<div class="> <style>
.my-card:hover{
transform: scale(1.1);
transition: 0.2s ease-in-out;
}
</style>
<!-- <div class=">
<div class="wrapper wrapper"> <div class="wrapper wrapper">
<div style="margin-left: 0px;" class="card card-5"> <div style="margin-left: 0px;" class="card card-5">
...@@ -21,9 +30,9 @@ ...@@ -21,9 +30,9 @@
<li {% if message.tags %} class=" {{ message.tags }} " {% endif %}> {{ message }} </li> <li {% if message.tags %} class=" {{ message.tags }} " {% endif %}> {{ message }} </li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %} -->
<div class="card-heading"> <!--<div class="card-heading">
<h2 class="title"> SERVPORT</h2> <h2 class="title"> SERVPORT</h2>
</div> </div>
<div class="card-body"> <div class="card-body">
...@@ -34,9 +43,102 @@ ...@@ -34,9 +43,102 @@
<br> <br>
</div>
</div> -->
<div class="container">
<div class="row" style="margin-top: 70px;">
<div class="col-md-12">
<div class="card">
<div class="card-header bg-secondary text-white">
Statistics
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<a class="text-decoration-none text-dark">
<div class="card my-card shadow text-center p-3">
<h4>Service Bookings <i class="fas fa-car"></i> </h4>
<h3>500</h3>
</div>
</a>
</div>
<div class="col-md-4">
<a class="text-decoration-none text-dark">
<div class="card my-card shadow text-center p-3">
<h4>Employees <i class="fas fa-user"></i></i> </h4>
<h3>5</h3>
</div>
</a>
</div>
<div class="col-md-4">
<a class="text-decoration-none text-dark">
<div class="card my-card shadow text-center p-3">
<h4>Stock Quantity <i class="fas fa-shipping-fast"></i></i> </h4>
<h3>60</h3>
</div>
</a>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div class="container">
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<canvas id="myChart" height="100px"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'],
datasets: [{
label: 'Number of Service bookings',
data: [6, 15, 8, 5, 10, 6, 12, 9, 15],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(54, 162, 235, 2)',
'rgba(54, 162, 235, 2)',
'rgba(54, 162, 235, 2)',
'rgba(54, 162, 235, 2)',
'rgba(54, 162, 235, 2)',
'rgba(54, 162, 235, 2)',
'rgba(54, 162, 235, 2)',
'rgba(54, 162, 235, 2)',
'rgba(54, 162, 235, 2)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</div>
</div> </div>
</div> </div>
</div><div class="alert alert-primary" role="alert" > © SERVPORT 2022 </div>
<div class="alert alert-primary fixed-bottom mb-0 text-center" style="background: #747578; border: none; color: white;" role="alert" > © SERVPORT 2022 </div>
</div> </div>
{% endblock content %} {% endblock content %}
...@@ -22,54 +22,85 @@ ...@@ -22,54 +22,85 @@
<style> <style>
body body
{ {
background-image:url('{% static 'image/Sales-forecast.png'%}'); background-image:url('{% static 'image/vehicle_service.jpg'%}');
background-repeat:no-repeat; background-repeat:no-repeat;
background-size:100%; background-size:100%;
} }
</style> .login_form
{
width: 400px;
height: 400px;
<body> background: #CFD8DC;
color: #000;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 25px;
}
.login_text
{
margin-top: 75px;
text-align: center;
margin-bottom: 30px;
font-weight: bold;
color: #02111f;
}
.logo
{
height: 150px;
width: 150px;
position: absolute;
top: -20%;
left: calc(42% - 42px);
}
.login_btn
{
margin-left: 12%;
margin-right:12%;
margin-top: 7%;
background: #02111f;
color: #fff;
width: 300px;
border-radius: 25px;
text-align: center;
}
</style>
<div >
<div class="wrapper wrapper--w790">
<br><br><br>
<div class="card card-12">
<div class="card-heading">
<h2 class="title"> SERVPORT : LOGIN</h2>
</div>
<div class="card-body">
<body>
<div class="login_form">
<img src="/static/image/logo.png" class="logo">
<h1 class="login_text">LOGIN</h1>
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
<table class="table table "> <table class="table table ">
{{form.as_table}} {{form.as_table}}
</table>
</table> <input type="submit" value="LOGIN" class="btn login_btn"/>
<input type="submit" value="LOGIN" class="btn btn--radius-2 btn-success"/>
<br/><br/> <br/><br/>
{% if messages %} {% if messages %}
<div class="alert alert-danger" role="alert"> <div class="alert alert-danger" role="alert">
{% for message in messages %} {% for message in messages %}
{% if message.tags %} {% endif %} {{ message }} {% if message.tags %} {% endif %} {{ message }}
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
</form> </form>
</div>
</div>
</div> </div>
</div>
</div>
</div> </div>
......
...@@ -51,7 +51,7 @@ body{ ...@@ -51,7 +51,7 @@ body{
background-color: #f3f5f9; background-color: #f3f5f9;
} }
.bg-danger { .bg-danger {
background-color: #0062cc !important; background-color: #747578 !important;
} }
...@@ -63,7 +63,7 @@ body{ ...@@ -63,7 +63,7 @@ body{
.wrapper .sidebar{ .wrapper .sidebar{
width: 200px; width: 200px;
height: 100%; height: 100%;
background: #178530; background: #747578;
padding: 30px 0px; padding: 30px 0px;
position: fixed; position: fixed;
} }
...@@ -92,7 +92,7 @@ body{ ...@@ -92,7 +92,7 @@ body{
} }
.wrapper .sidebar ul li:hover{ .wrapper .sidebar ul li:hover{
background-color: #7a7a7a; background-color: #02111f;
} }
.wrapper .sidebar ul li:hover a{ .wrapper .sidebar ul li:hover a{
...@@ -157,9 +157,11 @@ body{ ...@@ -157,9 +157,11 @@ body{
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-danger"> <nav class="navbar navbar-expand-lg navbar-light fixed-top bg-danger">
<a style="color:white;" class="navbar-brand" href="#"> &nbsp;<font face = "Comic sans MS" size ="5">SERVPORT </font></a> <a style="color:white;" class="navbar-brand" href="#">
<img src="/static/image/logo.png" width="40" height="40" alt="">
<font face = "Comic sans MS" size ="5" class="">ServPort </font>
</a>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2"> <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item"> <li class="nav-item">
...@@ -176,15 +178,13 @@ body{ ...@@ -176,15 +178,13 @@ body{
<ul> <ul>
<li><a style="text-decoration:none;" href="/Admin/AdminHome/"><i class="fas fa-desktop"></i>Home</a></li> <li><a style="text-decoration:none;" href="/Admin/AdminHome/"><i class="fas fa-desktop"></i>Home</a></li>
<li><a style="text-decoration:none;" href="#"><i class="fas fa-barcode"></i> Employee Efficiency </a>
<li><a style="text-decoration:none;" href="#"><i class="fas fa-barcode"></i> Employee Efficiency </a> <li><a style="text-decoration:none;" href="/Admin/Employee_Data/"><i class="fas fa-paper-plane "></i> Employee Data </a>
<li><a style="text-decoration:none;" href="/Admin/EmployeeStatus_Update/"><i class="fas fa-upload"></i> Assign Employee </a>
<li><a style="text-decoration:none;" href="/Admin/Employee_Data/"><i class="fas fa-paper-plane "></i> Employee Data </a> </li>
<li><a style="text-decoration:none;" href="/Admin/EmployeeStatus_Update/"><i class="fas fa-upload"></i> Assign Employee </a>
</li>
<li><a style="text-decoration:none;" href="/Admin/Forecasting/"><i class="fas fa-bullseye "></i> Demand Forecasting </a> <li><a style="text-decoration:none;" href="/Admin/Forecasting/"><i class="fas fa-bullseye "></i> Demand Forecasting </a>
<li><a style="text-decoration:none;" href="/Admin/PurchaseHistory/"><i class="fas fa-cubes"></i> Purchase History </a>
<li><a style="text-decoration:none;" href="/Admin/PurchaseHistory/"><i class="fas fa-cubes"></i> Purchase History </a>
</ul> </ul>
......
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