From fcfcdaf82a8f4d82367e7f414f37e46936e4edce Mon Sep 17 00:00:00 2001
From: lr2-coleman <lee2.coleman@live.uwe.ac.uk>
Date: Sun, 24 Mar 2024 05:04:56 +0000
Subject: [PATCH] New html pages, navbar as template, updated views.py and
 urls.py. Issues with login and register hopefully fixed tomorrow.

---
 Group_14/static/Group_14/css/styles.css |  6 +++-
 Group_14/templates/about.html           | 32 ++++++++++++++++++
 Group_14/templates/adminaccount.html    | 32 ++++++++++++++++++
 Group_14/templates/home.html            | 28 +++++----------
 Group_14/templates/login.html           | 43 +++++++++++++++++++++++
 Group_14/templates/myaccount.html       | 32 ++++++++++++++++++
 Group_14/templates/navbar.html          | 18 ++++++++++
 Group_14/templates/recipes.html         | 32 ++++++++++++++++++
 Group_14/templates/register.html        | 45 +++++++++++++++++++++++++
 Group_14/urls.py                        |  6 ++++
 Group_14/views.py                       | 21 +++++++++++-
 staticfiles/css/styles.css              | 16 +++++++--
 12 files changed, 287 insertions(+), 24 deletions(-)
 create mode 100644 Group_14/templates/about.html
 create mode 100644 Group_14/templates/adminaccount.html
 create mode 100644 Group_14/templates/login.html
 create mode 100644 Group_14/templates/myaccount.html
 create mode 100644 Group_14/templates/navbar.html
 create mode 100644 Group_14/templates/recipes.html
 create mode 100644 Group_14/templates/register.html

diff --git a/Group_14/static/Group_14/css/styles.css b/Group_14/static/Group_14/css/styles.css
index a337fde..4fcde7a 100644
--- a/Group_14/static/Group_14/css/styles.css
+++ b/Group_14/static/Group_14/css/styles.css
@@ -10,7 +10,7 @@ body {
     font-family: Arial, sans-serif;
     line-height: 1.6;
     background-color: #f7f7f7;
-    color: #333;
+    color: #151515;
 }
 
 .container {
@@ -49,6 +49,10 @@ nav ul li a {
 
 /*make login form on the right!*/
 
+.right-navbar {
+   float:right; 
+}
+
 
 .section1 {
     background-image: url('../img/homepage.jpg');
diff --git a/Group_14/templates/about.html b/Group_14/templates/about.html
new file mode 100644
index 0000000..44489e2
--- /dev/null
+++ b/Group_14/templates/about.html
@@ -0,0 +1,32 @@
+<!--Group_14/templates/recipes.html-->
+<!--This page describes what the system is, how it works, and how it was built.-->
+{% load static%}
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FoodFinder</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{% static 'Group_14/css/styles.css' %}"
+    />
+  </head>
+    <body> 
+        <header>
+            {% include 'navbar.html' %}
+            <div class="content"> {% block content %} </div>
+            {% endblock %}  
+          </header>
+
+        <section class="section1">
+            <p> An about section will be written here (coming soon). </p>
+        </section>
+        <footer>
+            <div class="container">
+            <p>&copy; 2024 Food Finder. All rights reserved.</p>
+            </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/Group_14/templates/adminaccount.html b/Group_14/templates/adminaccount.html
new file mode 100644
index 0000000..2c452bf
--- /dev/null
+++ b/Group_14/templates/adminaccount.html
@@ -0,0 +1,32 @@
+<!--Group_14/templates/recipes.html-->
+<!--This page describes what the system is, how it works, and how it was built.-->
+{% load static%}
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FoodFinder</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{% static 'Group_14/css/styles.css' %}"
+    />
+  </head>
+    <body> 
+        <header>
+            {% include 'navbar.html' %}
+            <div class="content"> {% block content %} </div>
+            {% endblock %}  
+          </header>
+
+        <section class="section1">
+            <p> The admin user dashboard will be here (coming soon). </p>
+        </section>
+        <footer>
+            <div class="container">
+            <p>&copy; 2024 Food Finder. All rights reserved.</p>
+            </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/Group_14/templates/home.html b/Group_14/templates/home.html
index de96063..a1d86fb 100644
--- a/Group_14/templates/home.html
+++ b/Group_14/templates/home.html
@@ -5,7 +5,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Recipe Web App</title>
+    <title>FoodFinder</title>
     <link
       rel="stylesheet"
       type="text/css"
@@ -14,34 +14,23 @@
   </head>
   <body>
     <header>
-      <div class="login-form">
-        <form action="" method="post">
-          {% csrf_token %}
-          <input type="text" name="username" placeholder="Username" />
-          <input type="password" name="password" placeholder="Password" />
-          <button type="submit">Login</button>
-        </form>
-      </div>
-      <h1>Recipe Web App</h1>
-      <nav>
-        <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">Recipes</a></li>
-          <li><a href="#">About</a></li>
-        </ul>
-      </nav>
+      {% include 'navbar.html' %}
+      <div class="content"> {% block content %} </div>
+      {% endblock %}  
     </header>
+
     <section class="section1">
       <div class="container">
-        <h2>Welcome to our Recipe Web App!</h2>
+        <h2>Welcome to FoodFinder!</h2>
         <p>Discover delicious recipes and cooking inspiration.</p>
       </div>
     </section>
+
     <section class="detect-recipe">
       <div class="container">
         <h2>Detect Recipe</h2>
         <p>
-          Use our advanced AI technology to automatically detect ingredients and
+          Use our advanced AI technology to automatically receive ingredients and
           cooking instructions from your images.
         </p>
         <a href="#" class="btn">Open Camera</a>
@@ -55,5 +44,6 @@
         <p>&copy; 2024 Recipe Web App. All rights reserved.</p>
       </div>
     </footer>
+
   </body>
 </html>
diff --git a/Group_14/templates/login.html b/Group_14/templates/login.html
new file mode 100644
index 0000000..101cc32
--- /dev/null
+++ b/Group_14/templates/login.html
@@ -0,0 +1,43 @@
+<!--Group_14/templates/recipes.html-->
+<!--This page lists all the food types that our system recognises.-->
+{% load static%}
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FoodFinder</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{% static 'Group_14/css/styles.css' %}"
+    />
+  </head>
+    <body> 
+        <header>
+            {% include 'navbar.html' %}
+            <div class="content"> {% block content %} </div>
+            {% endblock %}  
+          </header>
+
+        <section class="section1">
+            <p> hello world </p>
+        </section>
+
+        <section class="section2">
+            <div class="login-form">
+                <form action="" method="post">
+                  {% csrf_token %}
+                  <input type="text" name="username" placeholder="Username" />
+                  <input type="password" name="password" placeholder="Password" />
+                  <button type="submit">Login</button>
+                </form>
+        </section>
+
+        <footer>
+            <div class="container">
+            <p>&copy; 2024 Food Finder. All rights reserved.</p>
+            </div>
+        </footer>
+    </body>
+</html>
diff --git a/Group_14/templates/myaccount.html b/Group_14/templates/myaccount.html
new file mode 100644
index 0000000..d83f10f
--- /dev/null
+++ b/Group_14/templates/myaccount.html
@@ -0,0 +1,32 @@
+<!--Group_14/templates/recipes.html-->
+<!--This page describes what the system is, how it works, and how it was built.-->
+{% load static%}
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FoodFinder</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{% static 'Group_14/css/styles.css' %}"
+    />
+  </head>
+    <body> 
+        <header>
+            {% include 'navbar.html' %}
+            <div class="content"> {% block content %} </div>
+            {% endblock %}  
+          </header>
+
+        <section class="section1">
+            <p> The standard user dashboard will be here (coming soon). </p>
+        </section>
+        <footer>
+            <div class="container">
+            <p>&copy; 2024 Food Finder. All rights reserved.</p>
+            </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/Group_14/templates/navbar.html b/Group_14/templates/navbar.html
new file mode 100644
index 0000000..bbac95d
--- /dev/null
+++ b/Group_14/templates/navbar.html
@@ -0,0 +1,18 @@
+<h1>FoodFinder</h1>
+      
+<nav>
+  <div id="left-navbar">
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/recipes">Recipes</a></li>
+      <li><a href="/about">About</a></li>
+    </ul>
+  </div>
+  <div class="right-navbar">
+    {% if 'logged_in' == True %}
+      <li><a href="/myaccount">Account</a></li>
+    {% else %}
+      <li><a href="/login">Account</a></li>
+    {% endif %}
+  </div>
+</nav>
\ No newline at end of file
diff --git a/Group_14/templates/recipes.html b/Group_14/templates/recipes.html
new file mode 100644
index 0000000..71ac0e6
--- /dev/null
+++ b/Group_14/templates/recipes.html
@@ -0,0 +1,32 @@
+<!--Group_14/templates/recipes.html-->
+<!--This page lists all the food types that our system recognises.-->
+{% load static%}
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FoodFinder</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{% static 'Group_14/css/styles.css' %}"
+    />
+  </head>
+  <body> 
+    <header>
+      {% include 'navbar.html' %}
+      <div class="content"> {% block content %} </div>
+      {% endblock %}  
+    </header>
+
+      <section class="section1">
+        <p> Recipes will be listed here (coming soon).</p>
+      </section>
+      <footer>
+          <div class="container">
+          <p>&copy; 2024 Food Finder. All rights reserved.</p>
+          </div>
+      </footer>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Group_14/templates/register.html b/Group_14/templates/register.html
new file mode 100644
index 0000000..37b1cc4
--- /dev/null
+++ b/Group_14/templates/register.html
@@ -0,0 +1,45 @@
+<!--Group_14/templates/recipes.html-->
+<!--This page lists all the food types that our system recognises.-->
+{% load static%}
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FoodFinder</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{% static 'Group_14/css/styles.css' %}"
+    />
+  </head>
+    <body> 
+        <header>
+            {% include 'navbar.html' %}
+            <div class="content"> {% block content %} </div>
+            {% endblock %}  
+          </header>
+
+        <section class="section1">
+            <p> hello world </p>
+        </section>
+
+        <section class="section2">
+            <div class="login-form">
+                <form action="" method="post">
+                  {% csrf_token %}
+                  <input type="text" name="username" placeholder="Username" />
+                  <input type="text" name="email" placeholder="Email Address" />
+                  <input type="password" name="password" placeholder="Password" />
+                  <input type="password" name="password2" placeholder="Confirm Password" />
+                  <button type="submit">Register</button>
+                </form>
+        </section>
+
+        <footer>
+            <div class="container">
+            <p>&copy; 2024 Food Finder. All rights reserved.</p>
+            </div>
+        </footer>
+    </body>
+</html>
diff --git a/Group_14/urls.py b/Group_14/urls.py
index 45f0419..44d1b67 100644
--- a/Group_14/urls.py
+++ b/Group_14/urls.py
@@ -22,6 +22,12 @@ from django.conf.urls.static import static
 
 urlpatterns = [
     path('', views.home, name='home'),  # Map the root URL to the home view
+    path('recipes/', views.recipes, name='recipes'),
+    path('about/', views.about, name='about'),
+    path('login/', views.about, name='login'),
+    path('register/', views.about, name='register'),
+    path('myaccount/', views.myaccount, name='myaccount'),
+    path('adminaccount/', views.adminaccount, name='adminaccount')
 ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 
 
diff --git a/Group_14/views.py b/Group_14/views.py
index e8f395d..29e1362 100644
--- a/Group_14/views.py
+++ b/Group_14/views.py
@@ -1,5 +1,24 @@
 # myapp/views.py
 from django.shortcuts import render
 
-def home(request):
+
+def home(request): #main page with camera/upload buttons
     return render(request, 'home.html')
+
+def about(request): #simple aboutus text page
+    return render(request, 'about.html')
+
+def recipes(request): #page disclosing list of recognised foods
+    return render(request, 'recipes.html')
+
+def login(request): #page for users to log in with existing credentials
+    return render(request, 'login.html')
+
+def register(request): #page for new users to create account
+    return render(request, 'register.html')
+
+def myaccount(request): #standard user dashboard
+    return render(request, 'myaccount.html')
+
+def adminaccount(request): #admin user dashboard
+    return render(request, 'adminaccount.html')
\ No newline at end of file
diff --git a/staticfiles/css/styles.css b/staticfiles/css/styles.css
index 25f2801..4fcde7a 100644
--- a/staticfiles/css/styles.css
+++ b/staticfiles/css/styles.css
@@ -10,7 +10,7 @@ body {
     font-family: Arial, sans-serif;
     line-height: 1.6;
     background-color: #f7f7f7;
-    color: #333;
+    color: #151515;
 }
 
 .container {
@@ -22,6 +22,8 @@ body {
 header {
     background-color: #333;
     color: #fff;
+    display: flex;
+    justify-content: space-between;
     padding: 20px 0;
 }
 
@@ -45,10 +47,18 @@ nav ul li a {
     font-weight: bold;
 }
 
+/*make login form on the right!*/
+
+.right-navbar {
+   float:right; 
+}
+
+
 .section1 {
-    background-image: url('https://placeholder');
+    background-image: url('../img/homepage.jpg');
     background-size: cover;
-    color: #ddd7d7;
+    background-position: center;
+    color: #000000;
     text-align: center;
     padding: 100px 0;
 }
-- 
GitLab