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>© 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>© 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>© 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>© 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>© 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>© 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>© 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