Skip to content

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

updated sign-in/login page

parent cfdbe91e
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 17 deletions
IPSystemTOPC/EmployeeProdDB/static/css/loginpage.css 0 → 100644
View file @ ff93298f
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 {
/* float: right; */
/* margin-top: 10px; */
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;
}
IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/base.html
View file @ ff93298f
......@@ -7,19 +7,27 @@
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</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">
<div id="topbar-text" >
<h4>Thousand Oaks Packaging Corporation</h4>
<h2>Employee Performance</h2>
</div>
<button type="button" class="btn btn-primary">Primary</button>
</div>
<!-- Page Content -->
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
<footer>
<p>Copyright &copy;<script>document.write(new Date().getFullYear());</script></p>
......
IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/loginpage.html
View file @ ff93298f
......@@ -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">
<!-- <a href="#"><img src="{% static 'images/topc_logo.jpg' %}" class="img logo rounded-circle mb-5" style="height: 50px; width: 50px;"></a> -->
<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>
<div class="form-group has-feedback">
<input type="password" name="password" id="password" placeholder="Enter Password">
</div>
</div>
<br>
<div>
<label for="password">Password: </label>
<input type="password" name="password" id="password">
<!-- <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>
</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