Skip to content

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

Base html done. Working on Record List html.

parent cbd6c349
Show whitespace changes
Inline Side-by-side
Showing with 413 additions and 55 deletions
IPSystemTOPC/EmployeeProdDB/static/css/base.css
View file @ b47b6807
@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 @ b47b6807
@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
View file @ b47b6807
...@@ -46,8 +46,6 @@ body { ...@@ -46,8 +46,6 @@ body {
} }
.login-input-align input { .login-input-align input {
/* float: right; */
/* margin-top: 10px; */
border-radius: 8px; border-radius: 8px;
border: 1px solid black; border: 1px solid black;
padding: 5px 10px; padding: 5px 10px;
...@@ -80,19 +78,3 @@ body { ...@@ -80,19 +78,3 @@ body {
background-color: white; background-color: white;
border: 1px solid black; border: 1px solid black;
} }
\ No newline at end of file
.base-logo {
width: 50px;
height: auto;
}
.base-logo img {
width: 50px;
height: auto;
}
.left-align-cont {
margin: auto;
display: flex;
justify-content: left;
}
\ No newline at end of file
IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/base.html
View file @ b47b6807
<!DOCTYPE html>
{% load static %} {% load static %}
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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/style.css' %}"/> <link rel="stylesheet" href="{% static 'css/base.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> <title>{% block title %}{% endblock %}</title>
<div class="loginheader centercont"> </head>
<div class="headertextcontainer">
<body>
<div class="base-header">
<div class="base-header-align">
<div class="base-logo"> <div class="base-logo">
<a href="#"><img src="{% static 'images/topc_logo.jpg' %}" class="img logo rounded-circle"></a> <a href="#"
><img
src="{% static 'images/topc_logo.jpg' %}"
class="img logo rounded-circle"
/></a>
</div> </div>
<div class="base-name-align">
<span>Thousand Oaks Packaging Corporation</span> <span>Thousand Oaks Packaging Corporation</span>
<h2>Employee Performance</h2> <h2>Employee Performance</h2>
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script> <div class="user-identifier">
</body> <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> <footer>
<p>Copyright &copy;<script>document.write(new Date().getFullYear());</script></p> <p class="footer">
</footer> Copyright &copy;
<script>
document.write(new Date().getFullYear());
</script>
</p>
</footer>
</body>
</html> </html>
IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/home.html
View file @ b47b6807
{% extends 'EmployeeProdDB/base.html' %} {% extends 'EmployeeProdDB/base.html' %} {% load static %} {% block content %}
{% load static %}
{% block content %}
<head> <head>
<title>Login</title> <title>Login</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}"/> <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
<link rel="stylesheet" href="{% static 'css/loginpage.css' %}"> rel="stylesheet"
<title> Home Page </title> 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> </head>
<body> <body>
<!-- <div class="">
<h1>TOPC</h1>
<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>
<div><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></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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body> </body>
{% endblock %} {% endblock %}
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