From 156cdfe9f815d11ff2fa8cf2f1ce1db2cf257337 Mon Sep 17 00:00:00 2001
From: James <james2.burt@live.uwe.ac.uk>
Date: Wed, 19 Mar 2025 15:44:33 +0000
Subject: [PATCH] frontend updates
---
.../DjangoProject/static/styles.css | 214 ++++++------------
.../DjangoProject/templates/index.html | 32 ++-
2 files changed, 93 insertions(+), 153 deletions(-)
diff --git a/ActualProjectCode/DjangoProject/static/styles.css b/ActualProjectCode/DjangoProject/static/styles.css
index 8106da0f..8635440d 100644
--- a/ActualProjectCode/DjangoProject/static/styles.css
+++ b/ActualProjectCode/DjangoProject/static/styles.css
@@ -1,179 +1,103 @@
-/* Reset some default styles */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
+/* Global Styles */
body {
font-family: Arial, sans-serif;
- background-color: #f4f7f6;
- color: #333;
- padding: 20px;
-}
-
-h1, h2 {
- color: #2c3e50;
- margin-bottom: 20px;
-}
-
-/* Navbar Styles */
-nav {
- background-color: #2c3e50;
- padding: 10px;
- margin-bottom: 30px;
- border-radius: 5px;
-}
-
-nav ul {
- list-style-type: none;
- text-align: right;
-}
-
-nav ul li {
- display: inline;
- margin-left: 20px;
-}
-
-nav ul li a {
- color: #ecf0f1;
- text-decoration: none;
- font-weight: bold;
+ margin: 0;
+ padding: 0;
+ background-color: #f9f9f9;
}
-nav ul li a:hover {
- text-decoration: underline;
+/* Navigation Styles */
+header {
+ background-color: #333;
+ padding: 10px 0;
}
-/* Form Styles */
-form {
- background-color: #fff;
- padding: 20px;
- border-radius: 5px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.nav-container {
+ max-width: 1200px;
margin: 0 auto;
- max-width: 400px;
-}
-
-input[type="text"], input[type="password"], input[type="email"], select {
- width: 100%;
- padding: 12px;
- margin: 10px 0 20px 0;
- border: 1px solid #ccc;
- border-radius: 5px;
- box-sizing: border-box;
-}
-
-button {
- background-color: #3498db;
- color: white;
- border: none;
- padding: 15px 20px;
- width: 100%;
- border-radius: 5px;
- cursor: pointer;
- font-size: 16px;
-}
-
-button:hover {
- background-color: #2980b9;
-}
-
-/* Error message */
-.error-message {
- color: red;
- margin-bottom: 20px;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 20px;
}
-/* Profile Page Styles */
-.profile-container {
- max-width: 1000px;
- margin: 0 auto;
- padding: 20px;
- background-color: white;
- border-radius: 5px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.logo h1 {
+ color: #fff;
+ margin: 0;
+ font-size: 24px;
}
-.profile-header {
+.auth-links {
display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
}
-.profile-header h1 {
- font-size: 28px;
+.auth-links a {
+ color: #fff;
+ background-color: #007BFF;
+ padding: 10px 20px;
+ margin-left: 10px;
+ text-decoration: none;
+ border-radius: 5px;
+ transition: background-color 0.3s ease;
}
-.profile-header a {
- color: #3498db;
- text-decoration: none;
+.auth-links a:hover {
+ background-color: #0056b3;
}
-.profile-header a:hover {
- text-decoration: underline;
+/* Main Section (Centered Content) */
+main {
+ text-align: center;
+ padding: 50px 20px;
}
-.profile-info {
- margin-bottom: 30px;
+.intro h1 {
+ font-size: 36px;
+ color: #333;
}
-.profile-info p {
+.intro p {
font-size: 18px;
- margin: 10px 0;
+ color: #666;
}
-button.logout {
- width: auto;
- padding: 10px 20px;
- margin-top: 20px;
- background-color: #e74c3c;
- color: white;
- border: none;
- border-radius: 5px;
- cursor: pointer;
+/* Footer Styles */
+footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #333;
+ color: #fff;
}
-button.logout:hover {
- background-color: #c0392b;
-}
+/* Responsive Design */
+@media (max-width: 768px) {
+ .nav-container {
+ flex-direction: column;
+ align-items: flex-start;
+ }
-/* Dashboard specific */
-.dashboard-section {
- padding: 20px;
- background-color: #ecf0f1;
- border-radius: 5px;
- margin-bottom: 20px;
-}
+ .logo h1 {
+ margin-bottom: 10px;
+ }
-.dashboard-section h2 {
- font-size: 24px;
- margin-bottom: 15px;
-}
+ .auth-links {
+ margin-top: 10px;
+ align-self: flex-end;
+ }
-.dashboard-section p {
- font-size: 16px;
- line-height: 1.5;
-}
+ .auth-links a {
+ margin-left: 0;
+ margin-right: 10px;
+ }
-.dashboard-section .button-container {
- display: flex;
- justify-content: flex-start;
- gap: 15px;
-}
+ main {
+ padding: 30px 20px;
+ }
-.dashboard-section .button-container button {
- width: auto;
- padding: 10px 20px;
- font-size: 16px;
- background-color: #3498db;
- color: white;
- border: none;
- border-radius: 5px;
- cursor: pointer;
-}
+ .intro h1 {
+ font-size: 28px;
+ }
-.dashboard-section .button-container button:hover {
- background-color: #2980b9;
+ .intro p {
+ font-size: 16px;
+ }
}
diff --git a/ActualProjectCode/DjangoProject/templates/index.html b/ActualProjectCode/DjangoProject/templates/index.html
index 5833b773..4ccdcdcf 100644
--- a/ActualProjectCode/DjangoProject/templates/index.html
+++ b/ActualProjectCode/DjangoProject/templates/index.html
@@ -6,14 +6,30 @@
<link rel="stylesheet" href="{% static 'styles.css' %}">
</head>
<body>
- <nav>
- <ul>
- <li><a href="{% url 'login' %}">Login</a></li>
- <li><a href="{% url 'register' %}">Register</a></li>
- </ul>
- </nav>
- <h1>Welcome to ShallowSink</h1>
- <p>Your trusted platform for making better tech decisions.</p>
+ <header>
+ <nav>
+ <div class="nav-container">
+ <div class="logo">
+ <h1>ShallowSink</h1>
+ </div>
+ <div class="auth-links">
+ <a href="{% url 'login' %}" class="btn">Login</a>
+ <a href="{% url 'register' %}" class="btn">Register</a>
+ </div>
+ </div>
+ </nav>
+ </header>
+
+ <main>
+ <section class="intro">
+ <h1>Welcome to ShallowSink</h1>
+ <p>Your trusted platform for making better tech decisions.</p>
+ </section>
+ </main>
+
+ <footer>
+ <p>© 2025 ShallowSink</p>
+ </footer>
{% block content %}
{% endblock %}
</body>
--
GitLab