Commit f8f46fa6 authored by Matthew Dizon's avatar Matthew Dizon

design changes

parent 645ee339
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&display=swap');
html * {
font-family: Raleway;
color: white;
}
.footer { .footer {
background-color: #23272B;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: center;
}
.card-header {
background-color: #c7baff;
color:black;
}
.card {
max-width:100%;
}
select {
background-color: rgb(206, 206, 253);
max-width: 200px;
margin-right: 75px;
font-weight: 700;
border-radius: .5em;
border: 1px solid #aaa;
}
.navbar{
background-color: #23272B;
}
.nav-item{
color:#9179FA;
}
.nav-link {
color: white; color: white;
width: 80%;
}
.nav-link:hover {
color:#9179FA;
background: linear-gradient(to left, #23272B 50%, white 50%) right;
background-size: 200%;
transition: background 0.8s ease-out;
}
.active {
color: #9179FA;
background: #23272B;
}
label {
color: #23272B;
font-weight: 700;
}
.btn-grabgrub {
background-color: #9179FA;
}
.jumbotron {
background-color: #9179FA;
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
text-align: center;
background-color: #aa96ff;
}
.table-striped > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
text-align: center; text-align: center;
background-color: #9e89fa;
}
.table-striped > thead {
text-align: center;
background-color: #c7baff;
}
.list-group-item > span {
color: #23272B;
font-weight: 700;
}
.list-group-item {
background-color: #9e89fa;
}
.card {
background-color: #9e89fa;
} }
\ No newline at end of file
.navbar-custom {
background-color: #800020;
}
\ No newline at end of file
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<input type="hidden" name="message" value="Food created successfully"> <input type="hidden" name="message" value="Food created successfully">
<a href="{% url 'add_food' %}"><button type="submit" class="mt-3 btn btn-primary" >Add Food</button></a> <a href="{% url 'add_food' %}"><button type="submit" class="btn btn-primary" >Add Food</button></a>
</form> </form>
</div> </div>
......
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
</select> </select>
</div> </div>
<a href="{% url 'add_order' %}"><button type="submit" class="mt-3 btn btn-primary">Add Order</button></a> <a href="{% url 'add_order' %}"><button type="submit" class="btn btn-primary">Add Order</button></a>
</form> </form>
</div> </div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>Inventory System</title> <title>GrabGrub</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="{% static '/bootstrap/css/bootstrap.css' %}"> <link rel="stylesheet" href="{% static '/bootstrap/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static '/bootstrap/css/custom.css' %}"> <link rel="stylesheet" href="{% static '/bootstrap/css/custom.css' %}">
...@@ -13,42 +13,9 @@ ...@@ -13,42 +13,9 @@
</head> </head>
<style>
.card-header {
background-color: #8AB4F8;
color:black;
}
.card {
max-width:100%;
}
select {
background-color: rgb(206, 206, 253);
max-width: 200px;
margin-right: 75px;
font-weight: 700;
border-radius: .5em;
border: 1px solid #aaa;
}
a:hover {
color:#23272B;
}
.active {
color: #23272B;
}
label {
color: #8AB4F8;
font-weight:bold;
}
</style>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3 sticky-top"> <nav class="navbar navbar-expand-lg navbar-light sticky-top">
<a class="navbar-brand mb-0" href="/">GrabGrub</a> <a class="navbar-brand mb-0" href="/"><span style="color: #9179FA;">GrabGrub</span></a>
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item mx-2"> <li class="nav-item mx-2">
Miguel Bandelaria | 190518 Miguel Bandelaria | 190518
...@@ -62,9 +29,8 @@ ...@@ -62,9 +29,8 @@
</ul> </ul>
</nav> </nav>
<div class="container-fluid"> <div class="container-fluid pt-3" style="background-color: #23272B; height: 100%;">
<div class="row"> <div class="row">
{% if request.path != "/" and request.path != "/signup" %} {% if request.path != "/" and request.path != "/signup" %}
<div class ="col-2 justify-content-left"> <div class ="col-2 justify-content-left">
<ul class="nav flex-column"> <ul class="nav flex-column">
...@@ -90,9 +56,9 @@ ...@@ -90,9 +56,9 @@
</div> </div>
</div> </div>
<footer class="footer bg-light" style="position: fixed;"> <footer class="footer" style="position: fixed;">
<div class="container" style="color: black">M7L Final Project</div> <div class="container" style="color: #9179FA">M7L Final Project</div>
</footer> </footer>
......
{% extends 'Kiosk/base.html' %} {% extends 'Kiosk/base.html' %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="w-50" style="margin-left: 35%"> <div class="w-50" style="margin-left: 35%; margin-top: 5%;">
<form class="form-signin" method="POST" action="{% url 'login' %}"> <form class="form-signin" method="POST" action="{% url 'login' %}">
{% csrf_token %} {% csrf_token %}
<div class="text-center mb-4"> <div class="text-center mb-4">
<div class="h3 mb-3 font-weight-normal">Enter User Details:</div> <div class="h3 mb-3 font-weight-normal">Enter User Details:</div>
<p>Login to GrabGrub</p> <p>Login to <span style="color: #9179FA;">GrabGrub</span></p>
</div> </div>
<div class="form-label-group mt-3"> <div class="form-label-group mt-3">
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
<input name ="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required=""> <input name ="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
</div> </div>
<button class="btn btn-lg btn-primary btn-block mt-3" type="submit">Login</button> <button class="btn btn-lg btn-grabgrub btn-block mt-3" type="submit">Login</button>
</form> </form>
<a href="{% url 'signup' %}"><button class="btn btn-lg btn-primary btn-block mt-3">Sign Up</button></a> <div class="text-center mt-4">Not a member? <a href="{% url 'signup' %}" style="color: #0069D9">Register</a></div>
{% if message == "Account created successfully" %} {% if message == "Account created successfully" %}
<p class="mt-3 alert alert-success"> {{message}}</p> <p class="mt-3 alert alert-success"> {{message}}</p>
{% elif message == "Account deleted successfully" %} {% elif message == "Account deleted successfully" %}
...@@ -28,5 +28,5 @@ ...@@ -28,5 +28,5 @@
{% elif message %} {% elif message %}
<p class="mt-3 alert alert-danger"> {{message}}</p> <p class="mt-3 alert alert-danger"> {{message}}</p>
{% endif %} {% endif %}
</div> </div>
{% endblock %} {% endblock %}
\ No newline at end of file \ No newline at end of file
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="w-50" style="margin-left: 35%"> <div class="w-50" style="margin-left: 35%; margin-top: 5%;">
<form class="form-signin" method="POST" action="{% url 'signup' %}"> <form class="form-signin" method="POST" action="{% url 'signup' %}">
{% csrf_token %} {% csrf_token %}
<div class="text-center mb-4"> <div class="text-center mb-4">
<div class="h3 mb-3 font-weight-normal">Enter User Details:</div> <div class="h3 mb-3 font-weight-normal">Enter User Details:</div>
<p>Signup to GrabGrub</p> <p>Signup to <span style="color: #9179FA;">GrabGrub</span></p>
</div> </div>
<div class="form-label-group mt-3"> <div class="form-label-group mt-3">
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
</div> </div>
<input type="hidden" name="message" value="Account created successfully"> <input type="hidden" name="message" value="Account created successfully">
<button class="btn btn-lg btn-primary btn-block mt-3" type="submit">Sign Up</button> <button class="btn btn-lg btn-grabgrub btn-block mt-3" type="submit">Sign Up</button>
</form> </form>
<a href="{% url 'login' %}"><button class="btn btn-lg btn-primary btn-block mt-3">Login</button></a> <div class="text-center mt-4">Already have an account? <a href="{% url 'login' %}" style="color: #0069D9">Login</a></div>
{% if message == "Account created successfully" %} {% if message == "Account created successfully" %}
<p class="mt-3 alert alert-success"> {{message}}</p> <p class="mt-3 alert alert-success"> {{message}}</p>
{% elif message == "Account deleted successfully" %} {% elif message == "Account deleted successfully" %}
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<label for="name"> City: </label> <label for="name"> City: </label>
<input type="text" class="form-control" id="city" name="city" value="{{customer.city}}" required> <input type="text" class="form-control" id="city" name="city" value="{{customer.city}}" required>
</div> </div>
<a href="{% url 'update_customer' customer.pk %}"><button type="submit" class="mt-3 btn btn-primary">Update Customer</button></a> <a href="{% url 'update_customer' customer.pk %}"><button type="submit" class="btn btn-primary">Update Customer</button></a>
</form> </form>
</div> </div>
<br> <br>
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<input type="datetime-local" class="form-control" id="date" name="date" value="{{food.created_at|date:'Y-m-d'}}T{{food.created_at|date:'H:i'}}" required> <input type="datetime-local" class="form-control" id="date" name="date" value="{{food.created_at|date:'Y-m-d'}}T{{food.created_at|date:'H:i'}}" required>
</div> </div>
<a href="{% url 'update_food' food.pk %}"><button type="submit" class="mt-3 btn btn-primary">Update Food</button></a> <a href="{% url 'update_food' food.pk %}"><button type="submit" class="btn btn-primary">Update Food</button></a>
</form> </form>
</div> </div>
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</select> </select>
</div> </div>
<a href="{% url 'update_order' order.pk %}"><button type="submit" class="mt-3 btn btn-primary">Update Order</button></a> <a href="{% url 'update_order' order.pk %}"><button type="submit" class="btn btn-primary">Update Order</button></a>
</form> </form>
</div> </div>
......
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
Customer Details: Customer Details:
</div> </div>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Customer Name: </span> {{customer.name}}</li> <li class="list-group-item"><span>Customer Name: </span> {{customer.name}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Address: </span> {{customer.address}}</li> <li class="list-group-item"><span>Address: </span> {{customer.address}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">City: </span> {{customer.city}}</li> <li class="list-group-item"><span>City: </span> {{customer.city}}</li>
</ul> </ul>
</div> </div>
......
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
Food Details: Food Details:
</div> </div>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Food: </span> {{food.name}}</li> <li class="list-group-item"><span>Food: </span> {{food.name}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Quantity: </span> {{food.description}}</li> <li class="list-group-item"><span>Quantity: </span> {{food.description}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Date of Order: </span> {{food.price}}</li> <li class="list-group-item"><span>Date of Order: </span> {{food.price}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Customer: </span> {{food.created_at}}</li> <li class="list-group-item"><span>Customer: </span> {{food.created_at}}</li>
</ul> </ul>
</div> </div>
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<thead> <thead>
<th scope="col"> Name </th> <th scope="col"> Name </th>
<th scope="col"> Description </th> <th scope="col"> Description </th>
<th scope="col"> Price </th> <th scope="col"> Price (₱) </th>
<th scope="col"> Date Created </th> <th scope="col"> Date Created </th>
<th scope="col"></th> <th scope="col"></th>
</thead> </thead>
......
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
Order Details: Order Details:
</div> </div>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Food: </span> {{order.food.getName}}</li> <li class="list-group-item"><span>Food: </span> {{order.food.getName}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Quantity: </span> {{order.qty}}</li> <li class="list-group-item"><span>Quantity: </span> {{order.qty}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Date of Order: </span> {{order.ordered_at}}</li> <li class="list-group-item"><span>Date of Order: </span> {{order.ordered_at}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Customer: </span> {{order.cust_order.getName}}</li> <li class="list-group-item"><span>Customer: </span> {{order.cust_order.getName}}</li>
<li class="list-group-item"><span style="color: #8AB4F8; font-weight:bold">Mode of Payment: </span> {{order.payment_mode}}</li> <li class="list-group-item"><span>Mode of Payment: </span> {{order.payment_mode}}</li>
</ul> </ul>
</div> </div>
......
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