From c64a84a422530764b90cc9cc18028a5ac3e83a68 Mon Sep 17 00:00:00 2001
From: James <james2.burt@live.uwe.ac.uk>
Date: Sun, 30 Mar 2025 20:20:03 +0100
Subject: [PATCH] frontend changes
---
.../templates/modelForms/deleteRecord.html | 65 +++++++++--
.../templates/modelForms/deleteUsers.html | 73 ++++++++++--
.../templates/modelForms/genBillings.html | 70 ++++++++++-
.../templates/modelForms/interactionView.html | 98 +++++++++++++---
.../templates/modelForms/manageUsers.html | 110 ++++++++++++++++--
.../templates/modelForms/mlUpload.html | 67 ++++++++++-
.../templates/modelForms/updateUsers.html | 88 +++++++++++++-
.../templates/modelForms/userUpload.html | 90 ++++++++++++--
8 files changed, 593 insertions(+), 68 deletions(-)
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html b/ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html
index 9dcaffb..803a8b9 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/deleteRecord.html
@@ -1,18 +1,69 @@
<!DOCTYPE html>
<html>
<head>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ }
+ .container {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ width: 300px;
+ }
+
+ p {
+ font-size: 16px;
+ margin-bottom: 20px;
+ }
+
+ a {
+ text-decoration: none;
+ color: #333;
+ font-weight: bold;
+ margin-right: 15px;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ input[type="submit"] {
+ background: #333;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 5px;
+ }
+
+ input[type="submit"]:hover {
+ background: #555;
+ }
+ </style>
</head>
<body>
- <p> Are you sure you want to delete this record? </p>
-
-<form action="{% url 'deleteRecord' record.id %}" method="POST">
- {% csrf_token %}
- <p><a href="{% url 'interactionView' %}">Go Back</a></p>
- <input type="submit" name="confirm">
+ <div class="container">
+ <p>Are you sure you want to delete this record?</p>
-</form>
+ <form action="{% url 'deleteRecord' record.id %}" method="POST">
+ {% csrf_token %}
+ <a href="{% url 'interactionView' %}">Go Back</a>
+ <input type="submit" name="confirm" value="Delete">
+ </form>
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/deleteUsers.html b/ActualProjectCode/DjangoProject/templates/modelForms/deleteUsers.html
index c4bf0e8..602e5fc 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/deleteUsers.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/deleteUsers.html
@@ -1,19 +1,74 @@
<!DOCTYPE html>
<html>
<head>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ }
-</head>
-<body>
+ .container {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ width: 350px;
+ }
+
+ p {
+ font-size: 16px;
+ margin-bottom: 20px;
+ }
+
+ a {
+ text-decoration: none;
+ color: #333;
+ font-weight: bold;
+ margin-right: 15px;
+ padding: 8px 12px;
+ border-radius: 5px;
+ border: 1px solid #333;
+ display: inline-block;
+ }
-<p> Are you sure you want to delete the account named "{{user.user}}"? </p>
+ a:hover {
+ background: #333;
+ color: white;
+ }
-<form action="{% url 'deleteUsers' user.user_id %}" method="POST">
- {% csrf_token %}
+ input[type="submit"] {
+ background: #c0392b;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 5px;
+ }
+
+ input[type="submit"]:hover {
+ background: #a93226;
+ }
+ </style>
+</head>
+<body>
- <a href="{% url 'manageUsers' %}">Cancel</a>
+ <div class="container">
+ <p>Are you sure you want to delete the account named "<strong>{{ user.user }}</strong>"?</p>
- <input type="submit" name="confirm">
-</form>
+ <form action="{% url 'deleteUsers' user.user_id %}" method="POST">
+ {% csrf_token %}
+ <a href="{% url 'manageUsers' %}">Cancel</a>
+ <input type="submit" name="confirm" value="Delete">
+ </form>
+ </div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/genBillings.html b/ActualProjectCode/DjangoProject/templates/modelForms/genBillings.html
index c121bf6..03759d5 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/genBillings.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/genBillings.html
@@ -2,16 +2,74 @@
<html>
<head>
<title>Billing Page</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ }
+
+ .container {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ width: 400px;
+ }
+
+ form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ input[type="text"],
+ input[type="email"],
+ input[type="number"],
+ select,
+ textarea {
+ width: 100%;
+ padding: 8px;
+ margin: 10px 0;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 14px;
+ }
+
+ input[type="submit"] {
+ background: #333;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 5px;
+ margin-top: 10px;
+ }
+
+ input[type="submit"]:hover {
+ background: #555;
+ }
+ </style>
</head>
<body>
- <form action="" method="POST">
- {% csrf_token %}
- {{ form }}
- <input type="submit">
- </form>
+ <div class="container">
+ <h2>Billing Form</h2>
+ <form action="" method="POST">
+ {% csrf_token %}
+ {{ form.as_p }}
+ <input type="submit" value="Generate Bill">
+ </form>
+ </div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/interactionView.html b/ActualProjectCode/DjangoProject/templates/modelForms/interactionView.html
index 2d1fd96..ec750cd 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/interactionView.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/interactionView.html
@@ -1,25 +1,93 @@
<!DOCTYPE html>
<html>
<head>
+ <title>Interaction Records</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ min-height: 100vh;
+ margin: 0;
+ }
-</head>
-<body>
- <p><a href="{% url 'profile' %}">Return to profile</a></p>
- <br>
+ .container {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ width: 60%;
+ max-width: 600px;
+ text-align: center;
+ }
+
+ a {
+ text-decoration: none;
+ color: #333;
+ font-weight: bold;
+ }
+
+ a:hover {
+ color: #555;
+ }
+
+ .record {
+ background: #fff;
+ padding: 15px;
+ margin: 15px 0;
+ border-radius: 5px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ text-align: left;
+ }
- <!-- for i in Records -->
+ .record p {
+ margin: 5px 0;
+ }
- {% for record in interactions %}
+ .delete-btn {
+ display: inline-block;
+ margin-top: 10px;
+ padding: 8px 12px;
+ background: #ff4d4d;
+ color: white;
+ border-radius: 5px;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ .delete-btn:hover {
+ background: #cc0000;
+ }
+
+ hr {
+ border: 0;
+ height: 1px;
+ background: #ccc;
+ margin: 15px 0;
+ }
+ </style>
+</head>
+<body>
- <p> Record ID: {{ record.id }}</p>
- <p> Name: {{ record.username }} </p>
- <p> File Path: {{ record.uploadedFile }} </p>
- <p> ML Model Selected: {{ record.chosenML }} </p>
- <p> Response: {{ record.responseByML }} </p>
- <p><a href="{% url 'deleteRecord' record.id %}">Delete Record</a></p>
- <h1>------------------------------------</h1>
+ <div class="container">
+ <p><a href="{% url 'profile' %}">Return to Profile</a></p>
- {% endfor %}
+ {% for record in interactions %}
+ <div class="record">
+ <p><strong>Record ID:</strong> {{ record.id }}</p>
+ <p><strong>Name:</strong> {{ record.username }}</p>
+ <p><strong>File Path:</strong> {{ record.uploadedFile }}</p>
+ <p><strong>ML Model Selected:</strong> {{ record.chosenML }}</p>
+ <p><strong>Response:</strong> {{ record.responseByML }}</p>
+ <a href="{% url 'deleteRecord' record.id %}" class="delete-btn">Delete Record</a>
+ </div>
+ <hr>
+ {% endfor %}
+ </div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/manageUsers.html b/ActualProjectCode/DjangoProject/templates/modelForms/manageUsers.html
index 8f162aa..01770e8 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/manageUsers.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/manageUsers.html
@@ -1,21 +1,109 @@
<!DOCTYPE html>
<html>
<head>
+ <title>Manage Users</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ min-height: 100vh;
+ margin: 0;
+ }
+ .container {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ width: 60%;
+ max-width: 600px;
+ text-align: center;
+ }
+
+ a {
+ text-decoration: none;
+ color: #333;
+ font-weight: bold;
+ }
+
+ a:hover {
+ color: #555;
+ }
+
+ .user-card {
+ background: #fff;
+ padding: 15px;
+ margin: 15px 0;
+ border-radius: 5px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ text-align: left;
+ }
+
+ .user-card p {
+ margin: 5px 0;
+ }
+
+ .action-buttons {
+ margin-top: 10px;
+ }
+
+ .update-btn, .delete-btn {
+ display: inline-block;
+ margin: 5px;
+ padding: 8px 12px;
+ border-radius: 5px;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ .update-btn {
+ background: #4CAF50;
+ color: white;
+ }
+
+ .update-btn:hover {
+ background: #388E3C;
+ }
+
+ .delete-btn {
+ background: #ff4d4d;
+ color: white;
+ }
+
+ .delete-btn:hover {
+ background: #cc0000;
+ }
+
+ hr {
+ border: 0;
+ height: 1px;
+ background: #ccc;
+ margin: 15px 0;
+ }
+ </style>
</head>
<body>
- <br>
- <p><a href="{% url 'profile' %}">Return to admin profile</a></p>
- <br>
- <br>
- {% for p in profile %}
- <p> Username -- {{ p.user }} </p>
- <p> Role -- {{ p.role }} </p>
- <p><a href="{% url 'updateUsers' p.id %}"> Update </a></p>
- <p><a href="{% url 'deleteUsers' p.user_id %}">Delete </a></p>
- <h1>-------------------------------------------------</h1>
+ <div class="container">
+ <p><a href="{% url 'profile' %}">Return to Admin Profile</a></p>
+
+ {% for p in profile %}
+ <div class="user-card">
+ <p><strong>Username:</strong> {{ p.user }}</p>
+ <p><strong>Role:</strong> {{ p.role }}</p>
+ <div class="action-buttons">
+ <a href="{% url 'updateUsers' p.id %}" class="update-btn">Update</a>
+ <a href="{% url 'deleteUsers' p.user_id %}" class="delete-btn">Delete</a>
+ </div>
+ </div>
+ <hr>
{% endfor %}
+ </div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/mlUpload.html b/ActualProjectCode/DjangoProject/templates/modelForms/mlUpload.html
index 260d0f3..4af875b 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/mlUpload.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/mlUpload.html
@@ -2,14 +2,69 @@
<html>
<head>
<title>Upload ML Model</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ margin: 0;
+ }
+
+ .container {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ width: 50%;
+ max-width: 500px;
+ text-align: center;
+ }
+
+ h2 {
+ margin-bottom: 15px;
+ }
+
+ form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ input[type="file"] {
+ margin: 10px 0;
+ padding: 5px;
+ }
+
+ input[type="submit"] {
+ background: #333;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ margin-top: 10px;
+ }
+
+ input[type="submit"]:hover {
+ background: #555;
+ }
+ </style>
</head>
<body>
-<form action="" method="post" enctype="multipart/form-data">
- {% csrf_token %}
- {{form.as_p}}
- <input type="submit">
-</form>
+ <div class="container">
+ <h2>Upload Machine Learning Model</h2>
+ <form action="" method="post" enctype="multipart/form-data">
+ {% csrf_token %}
+ {{ form.as_p }}
+ <input type="submit" value="Upload">
+ </form>
+ </div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/updateUsers.html b/ActualProjectCode/DjangoProject/templates/modelForms/updateUsers.html
index 417f73e..482c097 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/updateUsers.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/updateUsers.html
@@ -1,15 +1,91 @@
<!DOCTYPE html>
<html>
<head>
+ <title>Form Page</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ margin: 0;
+ padding: 0;
+ }
+ .container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ padding: 20px;
+ }
+
+ form {
+ background-color: white;
+ padding: 30px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 400px;
+ text-align: center;
+ }
+
+ h2 {
+ margin-bottom: 20px;
+ font-size: 24px;
+ color: #333;
+ }
+
+ input[type="submit"] {
+ background-color: #333;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-top: 20px;
+ width: 100%;
+ }
+
+ input[type="submit"]:hover {
+ background-color: #555;
+ }
+
+ .form-group {
+ margin-bottom: 15px;
+ }
+
+ label {
+ display: block;
+ text-align: left;
+ font-weight: bold;
+ margin-bottom: 5px;
+ }
+
+ input[type="text"], input[type="email"], input[type="password"], select {
+ width: 100%;
+ padding: 10px;
+ margin-top: 5px;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ font-size: 16px;
+ }
+
+ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus {
+ border-color: #333;
+ }
+ </style>
</head>
<body>
- <form action="" method="POST">
- {% csrf_token %}
- {{ form.as_p }}
- <input type="submit">
- </form>
+ <div class="container">
+ <form action="" method="POST">
+ <h2>Form Submission</h2>
+ {% csrf_token %}
+ {{ form.as_p }}
+ <input type="submit" value="Submit">
+ </form>
+ </div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/ActualProjectCode/DjangoProject/templates/modelForms/userUpload.html b/ActualProjectCode/DjangoProject/templates/modelForms/userUpload.html
index e680805..942b14f 100644
--- a/ActualProjectCode/DjangoProject/templates/modelForms/userUpload.html
+++ b/ActualProjectCode/DjangoProject/templates/modelForms/userUpload.html
@@ -2,16 +2,90 @@
<html>
<head>
<title>User Upload</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f9f9f9;
+ color: #333;
+ margin: 0;
+ padding: 0;
+ }
+
+ .container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ padding: 20px;
+ }
+
+ form {
+ background-color: white;
+ padding: 30px;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 500px;
+ text-align: center;
+ }
+
+ h2 {
+ margin-bottom: 20px;
+ font-size: 24px;
+ color: #333;
+ }
+
+ input[type="submit"] {
+ background-color: #333;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-top: 20px;
+ width: 100%;
+ }
+
+ input[type="submit"]:hover {
+ background-color: #555;
+ }
+
+ .form-group {
+ margin-bottom: 15px;
+ }
+
+ label {
+ display: block;
+ text-align: left;
+ font-weight: bold;
+ margin-bottom: 5px;
+ }
+
+ input[type="file"], input[type="text"], input[type="email"], input[type="password"], select {
+ width: 100%;
+ padding: 10px;
+ margin-top: 5px;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ font-size: 16px;
+ }
+
+ input[type="file"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus {
+ border-color: #333;
+ }
+ </style>
</head>
<body>
- <form action="" method="POST" enctype="multipart/form-data">
- {% csrf_token %}
- {{ form.as_p }}
-
- <!-- eventually, this will connect to ML container and fill in responsebyML to an actual response -->
- <input type="submit">
- </form>
+ <div class="container">
+ <form action="" method="POST" enctype="multipart/form-data">
+ <h2>Upload Your ML Model</h2>
+ {% csrf_token %}
+ {{ form.as_p }}
+ <input type="submit" value="Submit">
+ </form>
+ </div>
</body>
-</html>
\ No newline at end of file
+</html>
--
GitLab