Skip to content

J
JARVIS
Commit 966a3a04 authored by Jacob Dylan D. Vitug's avatar Jacob Dylan D. Vitug
Browse files
Options

Merge branch 'espedido' into '205450' 

Merging frontend changes to backend

See merge request !4
parents 352b080b b47b6807
Show whitespace changes
Inline Side-by-side
Showing with 530 additions and 49 deletions
IPSystemTOPC/EmployeeProdDB/static/css/base.css 0 → 100644
View file @ 966a3a04
@import url('https://unpkg.com/css.gg@2.0.0/icons/css/list.css');
@import url('https://unpkg.com/css.gg@2.0.0/icons/css/user-add.css');
@import url('https://unpkg.com/css.gg@2.0.0/icons/css/import.css');
@import url('https://unpkg.com/css.gg@2.0.0/icons/css/log-out.css');
body {
font-family: Helvetica ;
}
.left-align-cont {
flex-direction: column;
align-items: left;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
.base-logo {
width: 60px;
height: auto;
display: flex;
align-items: center;
padding-bottom: 5px;
}
.base-logo img {
width: 100%;
height: auto;
}
.left-align-cont {
flex-direction: column;
align-items: left;
}
.base-header {
background-color: #00802B;
color: white;
text-transform: uppercase;
font-family: Helvetica, Arial, sans-serif;
padding: 16px 16px 16px;
display: flex;
justify-content: space-between;
}
/* NOT WORKING */
.logo-padding {
/* padding-right: 10px; */
margin-right: 10px;
}
.user-identifier {
font-size: 18px;
text-transform:none;
align-items: center;
display: flex;
margin-right: 20px;
}
.user-identifier p {
margin-bottom: unset;
}
.user-identifier b {
text-transform: capitalize;
}
.column-direction {
flex-direction: column;
align-items: center;
}
.base-header-align {
display: flex;
margin-left: 5px;
}
.base-name-align {
display: flex;
flex-direction: column;
margin-left: 10px;
}
.base-name-align h2 {
display: inline;
}
.sidebar {
height: 100%;
width: 85px;
position: fixed;
top: 102.4;
left: 0;
background-color: #461E0A;
color: white;
z-index: 1;
overflow-x: hidden;
}
.sidebar-button {
padding: 8px;
font-size: 24px;
display: flex;
justify-content: center;
flex-direction: column;
}
.sidebar p {
font-size: 12px;
text-align: center;
}
.sidebar-icon-placing {
display: flex;
justify-content: space-between;
height: 82%;
}
.sidebar a {
text-decoration: none;
color: white;
}
.sidebar-hover:hover {
background-color: #2C1206;
color: white;
}
.icon-align {
width: 100%;
align-items: center;
}
.main {
margin-left: 85px;
}
.search-and-add-cont {
margin: 30px 50px 0px;
display: flex;
/* flex-direction: column; */
justify-content: space-between;
}
.search-and-add-cont button {
border-radius: 4px;
border: 1px solid black;
padding: 5px 10px;
}
.searchbar {
width: 78%;
}
.searchbar input {
border-radius: 4px;
border: 1px solid black;
padding: 5px 10px;
margin-right: 20px;
width: 100%;
height: 100%;
}
.login-borders {
border-radius: 4px;
}
.add-profile-button {
width: 200px;
height: 50px;
background-color: #00802B;
color: white;
}
\ No newline at end of file
IPSystemTOPC/EmployeeProdDB/static/css/home.css 0 → 100644
View file @ 966a3a04
@import url('https://unpkg.com/css.gg@2.0.0/icons/css/search.css');
body {
font-family: Helvetica ;
}
.search-and-add-cont {
margin: 30px 50px 0px;
display: flex;
/* flex-direction: column; */
justify-content: space-between;
}
.search-and-add-cont button {
border-radius: 4px;
border: 1px solid black;
padding: 5px 10px;
}
.searchbar {
width: 78%;
}
.searchbar input {
border-radius: 4px;
border: 1px solid black;
padding: 5px 10px;
margin-right: 20px;
width: 100%;
height: 100%;
}
.login-borders {
border-radius: 4px;
}
.add-button {
}
.add-profile-button {
width: 200px;
height: 50px;
background-color: #00802B;
color: white;
border: none;
}
#employee {
width: 91.5%;
margin-top: 30px;
margin-left: 50px;
/* display: flex;
/* flex-direction: column; */
/* justify-content: space-between; */
}
#employee th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00802D;
color: white;
}
#employee td, #employee th {
border: 1px solid #ddd;
padding: 8px;
}
#employee tr:nth-child(even){
background-color: #f2f2f2;
}
#employee tr:hover {
background-color: #ddd;
}
\ No newline at end of file
IPSystemTOPC/EmployeeProdDB/static/css/loginpage.css 0 → 100644
View file @ 966a3a04
body {
font-family: Helvetica ;
}
.centercont {
margin: auto;
display: flex;
justify-content: center;
}
.loginheader {
background-color: #00802B;
color: white;
text-transform: uppercase;
font-family: Helvetica, Arial, sans-serif;
}
.loginheader span {
font-size: 14px;
}
.headertextcontainer {
margin-top: 16px;
}
.login-logo {
margin: 20px;
}
.login-logo img {
width: 150px;
height: auto;
}
.column-direction {
flex-direction: column;
align-items: center;
}
.column-direction b {
font-size: 24px;
}
.login-input-align {
margin: 5px;
}
.login-input-align input {
border-radius: 8px;
border: 1px solid black;
padding: 5px 10px;
margin: 5px;
}
.login-box {
width: 350px;
}
.login-button {
width: 200px;
border: 1px solid white;
padding: 5px 10px;
margin-top: 10px;
font-weight: bold;
}
.login-borders {
border-radius: 4px;
}
.button-login {
background-color: #00802B;
color: white;
}
.button-cancel {
background-color: white;
border: 1px solid black;
}
\ No newline at end of file
IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/base.html
View file @ 966a3a04
{% load static %}
<!doctype html>
<head>
<!-- <title> Base Template </title> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="icon" href="{% static 'images/topc_logo.png' %}" sizes="9x16">
</head>
<body>
<div id="topbar">
<a href="#"><img src="{% static 'images/topc_logo.jpg' %}" class="img logo rounded-circle mb-5" style="height: 50px; width: 50px;"></a>
<div id="topbar-text">
<h4>Thousand Oaks Packaging Corporation</h4>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="{% static 'css/base.css' %}" />
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="base-header">
<div class="base-header-align">
<div class="base-logo">
<a href="#"
><img
src="{% static 'images/topc_logo.jpg' %}"
class="img logo rounded-circle"
/></a>
</div>
<div class="base-name-align">
<span>Thousand Oaks Packaging Corporation</span>
<h2>Employee Performance</h2>
</div>
</div>
<!-- Page Content -->
{% block content %}
{% endblock %}
</body>
<footer>
<p>Copyright &copy;<script>document.write(new Date().getFullYear());</script></p>
</footer>
<div class="user-identifier">
<p>
Signed in as:
<b
>test user
<!-- PUT INFO HERE --></b
>
</p>
</div>
</div>
<div class="sidebar">
<div class="sidebar-icon-placing sidebar-button">
<div>
<div class="sidebar-hover">
<a href="">
<div class="icon-align sidebar-button">
<i class="gg-list"></i>
</div>
<p>Record List</p>
</a>
</div>
<div class="sidebar-hover">
<a href="">
<div class="icon-align sidebar-button">
<i class="gg-user-add"></i>
</div>
<p>Add Profile</p>
</a>
</div>
<div class="sidebar-hover">
<a href="">
<div class="icon-align sidebar-button">
<i class="gg-import"></i>
</div>
<p>Import Data</p>
</a>
</div>
</div>
<div class="sidebar-hover">
<a href="">
<div class="icon-align sidebar-button">
<i class="gg-log-out"></i>
</div>
<p>Log Out</p>
</a>
</div>
</div>
</div>
<div class="main">{% block content %}{% endblock %}</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"
></script>
<footer>
<p class="footer">
Copyright &copy;
<script>
document.write(new Date().getFullYear());
</script>
</p>
</footer>
</body>
</html>
IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/home.html
View file @ 966a3a04
{% extends 'EmployeeProdDB/base.html' %}
{% load static %}
{% block content %}
{% extends 'EmployeeProdDB/base.html' %} {% load static %} {% block content %}
<head>
<title> Home Page </title>
<title>Login</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="{% static 'css/home.css' %}" />
<title>Home Page</title>
</head>
<body>
<div style="width:100%">
<h1>TOPC</h1>
<form>
<a href="{% url 'upload_csv' %}"><button type="button" class="btn btn-danger" style="font-family:'Poppins'; position:absolute; right:2%; top:5%;">Import File</button></a>
</form>
<div class="search-and-add-cont">
<div class="searchbar">
<input placeholder='&#xf002 Search Name' />
</div>
<div class="add-button">
<button type="submit" class="login-borders add-profile-button">
Add Profile
</button>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"
></script>
<!-- TABLE -->
<table id="employee">
<tr>
<th>ID</th>
<th>Employee Name</th>
<th>Last Record Update</th>
<th>Position</th>
<th>Team</th>
</tr>
<tr><td>1</td>
<td>Juan Dela Cruz</td>
<td>Jan 12, 2022</td>
<td>Packager</td>
<td>Juan Dela Paz</td>
</tr>
<tr>
<td>2</td>
<td>Jacob Vitug</td>
<td>Jan 12, 2022</td>
<td>Packager</td>
<td>Marc Chua</td>
</tr>
</table>
</body>
{% endblock %}
IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/loginpage.html
View file @ 966a3a04
......@@ -4,33 +4,49 @@
<head>
<title>Login</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/loginpage.css' %}">
</head>
<body>
{% block content %}
<div class="login-box">
<div class="loginheader centercont">
<div class="headertextcontainer">
<span>Thousand Oaks Packaging Corporation</span>
<h2>Employee Performance</h2>
</div>
</div>
<!-- {% block content %} -->
<div class="centercont column-direction">
<div class="login-logo">
<b>Individual Productivity System TOPC</b>
<a href="#"><img src="{% static 'images/topc_logo.jpg' %}" class="img logo rounded-circle"></a>
</div>
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<b>Sign In</b>
<div class="login-box centercont">
<form method="POST" action="{% url 'loginpage' %}">{% csrf_token %}
<div class="form-group has-feedback"></div>
<label for="username">Username: </label>
<input type="text" name="username" id="username">
<div class="login-input-align">
<div class="form-group has-feedback">
<input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<br>
<div>
<label for="password">Password: </label>
<input type="password" name="password" id="password">
<div class="form-group has-feedback">
<input type="password" name="password" id="password" placeholder="Enter Password">
</div>
</div>
<!-- <input type="submit"> -->
<div class="centercont column-direction">
<button type="submit" class="login-button login-borders button-login">Log In</button>
<button type="submit" class="login-button login-borders button-cancel">Cancel</button>
</div>
<br>
<input type="submit">
</form>
</form>
</div>
</div>
{% endblock content %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
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