Skip to content
Snippets Groups Projects
Commit 9da99330 authored by j5-burt's avatar j5-burt
Browse files

frontend changes

parent 149e8689
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 589 additions and 90 deletions
ActualProjectCode/DjangoProject/templates/index.html
+ 77
− 0
View file @ 9da99330
......@@ -4,6 +4,83 @@
<title>ShallowSink - Home</title>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}">
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
header {
background-color: #004085;
color: #ffffff;
padding: 15px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Navbar Styles */
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo h1 {
margin: 0;
font-size: 24px;
}
.auth-links {
display: flex;
gap: 10px;
}
.auth-links .btn {
color: #ffffff;
text-decoration: none;
padding: 8px 16px;
border: 2px solid #ffffff;
border-radius: 4px;
font-weight: bold;
transition: 0.3s;
}
.auth-links .btn:hover {
background-color: #ffffff;
color: #004085;
}
/* Main Content */
main {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
text-align: center;
}
.intro h1 {
font-size: 36px;
margin: 20px 0;
color: #004085;
}
.intro p {
font-size: 18px;
line-height: 1.6;
color: #555;
}
/* Footer Styles */
footer {
background-color: #004085;
color: #ffffff;
text-align: center;
padding: 10px 0;
margin-top: 40px;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<header>
......
ActualProjectCode/DjangoProject/templates/login.html
+ 109
− 14
View file @ 9da99330
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<title>ShallowSink - Login</title>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}">
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #004085;
color: #ffffff;
padding: 15px 0;
text-align: center;
}
header h1 {
margin: 0;
}
/* Login Form Styles */
.login-container {
max-width: 400px;
margin: 100px auto;
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #004085;
}
.login-container form {
display: flex;
flex-direction: column;
}
.login-container label {
margin: 10px 0 5px;
font-weight: bold;
}
.login-container input[type="text"],
.login-container input[type="password"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
}
.login-container button {
padding: 12px;
background-color: #004085;
color: #ffffff;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.login-container button:hover {
background-color: #0056b3;
}
.login-container .register-link {
margin-top: 10px;
text-align: center;
}
.login-container .register-link a {
color: #004085;
text-decoration: none;
font-weight: bold;
}
.login-container .register-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Login</h2>
<form method="post">
<header>
<h1>ShallowSink</h1>
</header>
<div class="login-container">
<h2>Login to Your Account</h2>
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<label for="id_username">Username:</label>
<input type="text" name="username" id="id_username" required><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="id_password">Password:</label>
<input type="password" name="password" id="id_password" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
{% block content %}
{% endblock %}
<div class="register-link">
<p>Don't have an account? <a href="{% url 'register' %}">Register here</a></p>
</div>
</div>
</body>
</html>
ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html
+ 93
− 9
View file @ 9da99330
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delete Record</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
line-height: 1.5;
}
.container {
max-width: 600px;
margin: 50px auto;
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #dc3545;
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 16px;
margin-bottom: 20px;
}
/* Warning Box Styles */
.warning-box {
border: 2px solid #dc3545;
background-color: #f8d7da;
color: #721c24;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
/* Button Styles */
.btn {
display: inline-block;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
padding: 10px 16px;
color: #fff;
background-color: #007bff;
border: none;
text-align: center;
cursor: pointer;
font-size: 16px;
margin: 10px 5px;
}
.btn:hover {
background-color: #0056b3;
}
.btn-danger {
background-color: #dc3545;
}
.btn-danger:hover {
background-color: #b21f2d;
}
.btn-secondary {
background-color: #6c757d;
}
.btn-secondary:hover {
background-color: #5a6268;
}
</style>
</head>
<body>
<div class="container">
<h1>Delete Confirmation</h1>
<p> Are you sure you want to delete this record? </p>
<div class="warning-box">
<p>Are you sure you want to delete this record? This action cannot be undone.</p>
</div>
<form action="{% url 'deleteRecord' record.id %}" method="POST">
<!-- Form to handle deletion -->
<form method="post">
{% csrf_token %}
<p><a href="{% url 'interactionView' %}">Go Back</a></p>
<input type="submit" name="confirm">
<button type="submit" class="btn btn-danger">Yes, Delete</button>
<a href="{% url 'back_to_dashboard' %}" class="btn btn-secondary">Cancel</a>
</form>
</div>
</body>
</html>
\ No newline at end of file
ActualProjectCode/DjangoProject/templates/profile.html
+ 192
− 52
View file @ 9da99330
<!DOCTYPE html>
<html>
<head>
<title>Profile</title>
<title>ShallowSink - Dashboard</title>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}">
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #004085;
color: #ffffff;
padding: 15px 0;
text-align: center;
}
header h1 {
margin: 0;
}
/* Main Layout */
.container {
display: flex;
max-width: 1200px;
margin: 20px auto;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Sidebar */
.sidebar {
width: 25%;
background-color: #f8f9fa;
padding: 20px;
border-right: 1px solid #ddd;
}
.sidebar h3 {
color: #004085;
margin-bottom: 15px;
}
.sidebar .profile-section {
margin-bottom: 20px;
font-size: 14px;
}
.sidebar .profile-section .info-label {
font-weight: bold;
color: #333;
}
.sidebar .profile-section .info-value {
color: #555;
}
/* Content Area */
.content {
width: 75%;
padding: 30px 20px;
}
.content h1 {
font-size: 24px;
color: #004085;
}
.content h2 {
font-size: 20px;
color: #004085;
margin-top: 20px;
margin-bottom: 10px;
}
.content p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.content a,
.content h1 a {
color: #004085;
text-decoration: none;
font-weight: bold;
border: 2px solid #004085;
padding: 8px 12px;
border-radius: 5px;
display: inline-block;
margin-top: 10px;
transition: background-color 0.3s, color 0.3s;
}
.content a:hover,
.content h1 a:hover {
background-color: #004085;
color: #ffffff;
}
.content hr {
margin: 30px 0;
border: none;
border-top: 1px solid #ddd;
}
.actions .logout-btn {
text-decoration: none;
display: inline-block;
font-weight: bold;
padding: 10px 16px;
background-color: #dc3545; /* Red background for logout */
color: #ffffff;
border: 2px solid #dc3545;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
margin-left: 10px;
}
.actions .logout-btn:hover {
background-color: #c82333;
color: #ffffff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="{% url 'logout' %}">Logout</a></li>
</ul>
</nav>
<header>
<h1>ShallowSink Dashboard</h1>
</header>
<div class="container">
<!-- Sidebar Section -->
<div class="sidebar">
<h3>Your Profile</h3>
<div class="profile-section">
<p><span class="info-label">Username:</span> <span class="info-value">{{ user.username }}</span></p>
<p><span class="info-label">Email:</span> <span class="info-value">{{ user.email }}</span></p>
<p><span class="info-label">Role:</span> <span class="info-value">{{ user.profile.role }}</span></p>
<p><span class="info-label">Joined:</span> <span class="info-value">{{ user.date_joined|date:"F j, Y" }}</span></p>
</div>
<div class="actions">
<a href="{% url 'logout' %}" class="logout-btn">Logout</a>
</div>
</div>
<!-- Content Section -->
<div class="content">
<!-- Display the dynamic dashboard content -->
<h1>Welcome, {{ user.username }}!</h1>
{% if user.profile.role == 'ai_engineer' %} <!-- AI Dashboard -->
{% if user.profile.role == 'ai_engineer' %}
<!-- AI Engineer Dashboard -->
<h2>AI Engineer Dashboard</h2>
<p>Access AI-related tools and data.</p>
<br>
<hr>
<h1>Upload Dataset</h1>
<h2><a href="{% url 'userUpload' %}">Upload</a></h2>
<h1>Upload new ML Model</h1>
<h2><a href="{% url 'mlUpload' %}">Upload</a></h2>
<br>
<hr>
<h1>Access ML Interactions</h1>
<h2><a href="{% url 'interactionView' %}">All Interactions</a></h2> <!-- TO DO -->
<h2><a href="{% url 'interactionView' %}">All Interactions</a></h2>
{% elif user.profile.role == 'finance' %} <!-- Finance Dashboard -->
{% elif user.profile.role == 'finance' %}
<!-- Finance Dashboard -->
<h2>Finance Dashboard</h2>
<p>View financial reports and tools.</p>
<br>
<hr>
<h1><a href="{% url 'genBillings' %}">Generate Billings</a></h1>
{% elif user.profile.role == 'admin' %} <!-- Admin Dashboard -->
<h2>Admin Page</h2>
<p>View all Activity</p>
<p><a href="{% url 'manageUsers' %}">Manage Users<a></a></p>
<p><a href="{% url 'manageUsers' %}">Manage Users</a></p>
<p><a href=""> View all Activity </a></p>
{% else %} <!-- User Dashboard -->
{% else %}
<!-- User Dashboard -->
<h2>User Dashboard</h2>
<p>Manage your tasks and profile.</p>
<br>
<hr>
<h2>Upload Files to ML</h2>
<h1><a href="{% url 'userUpload' %}">Upload Thing</a></h1>
{% endif %}
{% endif %}
</div>
</div>
</body>
</html>
\ No newline at end of file
ActualProjectCode/DjangoProject/templates/register.html
+ 118
− 15
View file @ 9da99330
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<title>ShallowSink - Register</title>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}">
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #004085;
color: #ffffff;
padding: 15px 0;
text-align: center;
}
header h1 {
margin: 0;
}
/* Register Form Styles */
.register-container {
max-width: 500px;
margin: 50px auto;
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.register-container h2 {
text-align: center;
margin-bottom: 20px;
color: #004085;
}
.register-container form {
display: flex;
flex-direction: column;
}
.register-container label {
margin: 10px 0 5px;
font-weight: bold;
}
.register-container input[type="text"],
.register-container input[type="email"],
.register-container input[type="password"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
}
.register-container button {
padding: 12px;
background-color: #004085;
color: #ffffff;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.register-container button:hover {
background-color: #0056b3;
}
.register-container .login-link {
margin-top: 10px;
text-align: center;
}
.register-container .login-link a {
color: #004085;
text-decoration: none;
font-weight: bold;
}
.register-container .login-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Register</h2>
<form method="post">
<header>
<h1>ShallowSink</h1>
</header>
<div class="register-container">
<h2>Create an Account</h2>
<form method="post" action="{% url 'register' %}">
{% csrf_token %}
{{ form.as_p }}
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="id_role">Role:</label>
<select name="role" id="id_role" required>
<option value="user">User</option>
<option value="ai_engineer">AI Engineer</option>
<option value="finance">Finance Team</option>
</select>
<label for="password1">Password:</label>
<input type="password" id="password1" name="password1" required>
<label for="password2">Confirm Password:</label>
<input type="password" id="password2" name="password2" required>
<button type="submit">Register</button>
</form>
<div class="login-link">
<p>Already have an account? <a href="{% url 'login' %}">Login here</a></p>
</div>
</div>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment