From 9da9933073e58674df4f76a88353a852a02ac0eb Mon Sep 17 00:00:00 2001
From: James <james2.burt@live.uwe.ac.uk>
Date: Sun, 30 Mar 2025 20:06:04 +0100
Subject: [PATCH] frontend changes
---
.../DjangoProject/templates/index.html | 77 ++++++
.../DjangoProject/templates/login.html | 123 ++++++++-
.../templates/modelForms/deleteRecord.html | 102 +++++++-
.../DjangoProject/templates/profile.html | 244 ++++++++++++++----
.../DjangoProject/templates/register.html | 133 ++++++++--
5 files changed, 589 insertions(+), 90 deletions(-)
diff --git a/ActualProjectCode/DjangoProject/templates/index.html b/ActualProjectCode/DjangoProject/templates/index.html
index 4ccdcdcf..642a0c52 100644
--- a/ActualProjectCode/DjangoProject/templates/index.html
+++ b/ActualProjectCode/DjangoProject/templates/index.html
@@ -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>
diff --git a/ActualProjectCode/DjangoProject/templates/login.html b/ActualProjectCode/DjangoProject/templates/login.html
index f861568b..5b0f86d8 100644
--- a/ActualProjectCode/DjangoProject/templates/login.html
+++ b/ActualProjectCode/DjangoProject/templates/login.html
@@ -1,23 +1,118 @@
<!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">
- {% csrf_token %}
- <label for="id_username">Username:</label>
- <input type="text" name="username" id="id_username" required><br>
-
- <label for="id_password">Password:</label>
- <input type="password" name="password" id="id_password" required><br>
-
- <button type="submit">Login</button>
- </form>
- {% block content %}
- {% endblock %}
+ <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="username">Username:</label>
+ <input type="text" id="username" name="username" required>
+
+ <label for="password">Password:</label>
+ <input type="password" id="password" name="password" required>
+
+ <button type="submit">Login</button>
+ </form>
+
+ <div class="register-link">
+ <p>Don't have an account? <a href="{% url 'register' %}">Register here</a></p>
+ </div>
+ </div>
</body>
</html>
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html b/ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html
index 9dcaffb3..63ef5630 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html
@@ -1,18 +1,102 @@
<!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;
+ }
-</head>
-<body>
+ .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;
+ }
- <p> Are you sure you want to delete this record? </p>
+ .btn:hover {
+ background-color: #0056b3;
+ }
-<form action="{% url 'deleteRecord' record.id %}" method="POST">
- {% csrf_token %}
- <p><a href="{% url 'interactionView' %}">Go Back</a></p>
- <input type="submit" name="confirm">
+ .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>
-</form>
+ <div class="warning-box">
+ <p>Are you sure you want to delete this record? This action cannot be undone.</p>
+ </div>
+ <!-- Form to handle deletion -->
+ <form method="post">
+ {% csrf_token %}
+ <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
diff --git a/ActualProjectCode/DjangoProject/templates/profile.html b/ActualProjectCode/DjangoProject/templates/profile.html
index 044041aa..6dce5e3c 100644
--- a/ActualProjectCode/DjangoProject/templates/profile.html
+++ b/ActualProjectCode/DjangoProject/templates/profile.html
@@ -1,58 +1,198 @@
<!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>
- <h1>Welcome, {{ user.username }}!</h1>
- {% if user.profile.role == 'ai_engineer' %} <!-- AI Dashboard -->
- <h2>AI Engineer Dashboard</h2>
- <p>Access AI-related tools and data.</p>
- <br>
- <h1>Upload new ML Model</h1>
- <h2><a href="{% url 'mlUpload' %}">Upload</a></h2>
- <br>
- <h1>Access ML Interactions</h1>
- <h2><a href="{% url 'interactionView' %}">All Interactions</a></h2> <!-- TO DO -->
-
-
-
-
- {% elif user.profile.role == 'finance' %} <!-- Finance Dashboard -->
- <h2>Finance Dashboard</h2>
- <p>View financial reports and tools.</p>
- <br>
- <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=""> View all Activity </a></p>
-
-
-
-
- {% else %} <!-- User Dashboard -->
- <h2>User Dashboard</h2>
- <p>Manage your tasks and profile.</p>
- <br>
- <h2>Upload Files to ML</h2>
-
- <h1><a href="{% url 'userUpload' %}"> Upload Thing </a></h1>
-
-
-
-
- {% endif %}
+ <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 Engineer Dashboard -->
+ <h2>AI Engineer Dashboard</h2>
+ <p>Access AI-related tools and data.</p>
+ <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>
+ <hr>
+ <h1>Access ML Interactions</h1>
+ <h2><a href="{% url 'interactionView' %}">All Interactions</a></h2>
+
+ {% elif user.profile.role == 'finance' %}
+ <!-- Finance Dashboard -->
+ <h2>Finance Dashboard</h2>
+ <p>View financial reports and tools.</p>
+ <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></p>
+
+ <p><a href=""> View all Activity </a></p>
+
+ {% else %}
+ <!-- User Dashboard -->
+ <h2>User Dashboard</h2>
+ <p>Manage your tasks and profile.</p>
+ <hr>
+ <h2>Upload Files to ML</h2>
+ <h1><a href="{% url 'userUpload' %}">Upload Thing</a></h1>
+
+ {% endif %}
+
+
+ </div>
+ </div>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/ActualProjectCode/DjangoProject/templates/register.html b/ActualProjectCode/DjangoProject/templates/register.html
index 7b4fc342..37da8839 100644
--- a/ActualProjectCode/DjangoProject/templates/register.html
+++ b/ActualProjectCode/DjangoProject/templates/register.html
@@ -1,22 +1,125 @@
<!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">
- {% csrf_token %}
- {{ form.as_p }}
-
- <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>
-
- <button type="submit">Register</button>
- </form>
+ <header>
+ <h1>ShallowSink</h1>
+ </header>
+
+ <div class="register-container">
+ <h2>Create an Account</h2>
+ <form method="post" action="{% url 'register' %}">
+ {% csrf_token %}
+ <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="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>
--
GitLab