diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..0c246b24b3f3bbd1d82e27b675d31a3c5ec57a13
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,21 @@
+# Use the official Python 3.8 slim image as the base image
+FROM python:3.8-slim
+
+# Set the working directory within the container
+WORKDIR /api-flask
+
+# Copy the necessary files and directories into the container
+COPY resources/ static/ util/ .env application.py requirements.txt /api-flask/
+COPY resources/ /api-flask/resources/
+COPY static/ /api-flask/static/
+COPY util/ /api-flask/util/
+COPY .env application.py requirements.txt /api-flask/
+
+# Upgrade pip and install Python dependencies
+RUN pip3 install --upgrade pip && pip install --no-cache-dir -r requirements.txt
+
+# Expose port 5000 for the Flask application
+EXPOSE 5000
+
+# Define the command to run the Flask application using Gunicorn
+CMD ["gunicorn", "application:app", "-b", "0.0.0.0:5000", "-w", "4"]
\ No newline at end of file
diff --git a/app/static/base.css b/app/static/base.css
index d38e6129a5a7720b79665dd0bc3c573def5bf65b..5d8707bdc9e571fe37d09a8be32563636ae510e1 100644
--- a/app/static/base.css
+++ b/app/static/base.css
@@ -1,25 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');
+
+/* NAVIGATION BAR CSS */
.navigation img {
height: 70px;
margin-left: 35px;
+ align-self: center;
}
-
+
.navigation .navbar ul li {
list-style-type: none;
display: inherit;
flex-direction: row;
padding: 5px 0;
- color: #EBC815;
+}
+
+.nav_list_item a {
+ color: #FBE9D0;
+ font-size: 35px;
+ text-decoration: none;
+ padding: 10px;
}
.nav_list_item:hover {
- background-color: black;
+ background-color: #90AEAD;
+ padding: 5px;
}
.navigation .navbar {
display: flex;
align-items: center;
justify-content: center;
- height:70px;
+ height: 100px; /* Fix nav bar height */
width:100%;
}
@@ -27,10 +38,64 @@
display: flex;
justify-content: space-evenly;
width:100%;
- font-style: ;
+ /* font-style: ; */
}
.navigation {
display: flex;
- background-color: #AEEB15;
+ background-color: #244855;
+}
+
+/** FOOTER CSS */
+
+.footer {
+ text-align: center;
+ background-color: #222222;
+ color: #FBE9D0;
+ margin-top: 40px;
+ padding: 20px 0;
+
+}
+.footer_column {
+ float: left;
+ width: 33.33%;
+ justify-content: center;
+}
+
+.footer .copyright {
+ padding-top: 30px;
+}
+
+
+/* MAIN CONTENT CSS */
+.main_content {
+ min-height:100vh;
+ display:flex;
+ flex-direction:column;
+ justify-content:space-between;
+}
+
+.content {
+ flex: 1; /* Allows content to expand */
+}
+
+/*
+ Remove default padding which occurs around the nav bar on some browsers such as Edge and setup default font.
+ This should be changed where required on inherited elements
+*/
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Afacad Flux", sans-serif;
+ font-weight: 100;
}
+
+/* HEX codes for colours used through out website don't delete */
+
+/* Colour pallete taken from https://visme.co/blog/website-color-schemes/
+244855 Dark Blue
+E64833 Red
+874F41 Brown
+90AEAD Light Blue
+FBE9D0 Cream
+*/
\ No newline at end of file
diff --git a/app/templates/base.html b/app/templates/base.html
index 12c034ec6e70eaa013dd7fd0ffa361d2b361fbb5..015645e9dcbde2b193e6e3e2e610a13a6e252689 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -4,32 +4,46 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='base.css')}}">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Horizon Travels</title>
</head>
<body>
- {% block navigation %}
- <div class="navigation">
- <!-- https://images.ctfassets.net/hrltx12pl8hq/7JnR6tVVwDyUM8Cbci3GtJ/bf74366cff2ba271471725d0b0ef418c/shutterstock_376532611-og.jpg -->
- <img src="{{ url_for('static', filename='images/nav_icon.jpeg')}}">
- <nav class="navbar">
- <ul>
- <li class="nav_list_item"><a href="#">Home</a></li>
- <li class="nav_list_item"><a href="#">About</a></li>
- <li class="nav_list_item"><a href="#">Pricing</a></li>
- <li class="nav_list_item"><a href="#">Terms of use</a></li>
- <li class="nav_list_item"><a href="#">Contact</a></li>
- </ul>
- </nav>
- </div>
- {% endblock %}
+ <div class="main_content">
+ <div class="wrapper">
+ {% block navigation %}
+ <div class="navigation">
+ <!-- https://images.ctfassets.net/hrltx12pl8hq/7JnR6tVVwDyUM8Cbci3GtJ/bf74366cff2ba271471725d0b0ef418c/shutterstock_376532611-og.jpg -->
+ <img src="{{ url_for('static', filename='images/nav_icon.jpeg')}}">
+ <nav class="navbar">
+ <ul>
+ <li class="nav_list_item"><a href="#">Home</a></li>
+ <li class="nav_list_item"><a href="#">About</a></li>
+ <li class="nav_list_item"><a href="#">Pricing</a></li>
+ <li class="nav_list_item"><a href="#">Terms of use</a></li>
+ <li class="nav_list_item"><a href="#">Contact</a></li>
+ </ul>
+ </nav>
+ </div>
+ {% endblock %}
- <div class="content">
- {% block content %} {% endblock %}
- </div>
-
- {% block footer %}
- <div class="footer">
- <h3>Footer content</h3>
- </div>
- {% endblock %}
+ <div class="content">
+ {% block content %} {% endblock %}
+ </div>
+ </div>
+ {% block footer %}
+ <footer>
+ <div class="footer">
+ <div class="row">
+ <div class="footer_column">About Us</div>
+ <div class="footer_column">Contact</div>
+ <div class="footer_column">Login</div>
+ </div>
+ <div class="copyright">
+ <p>© 2024-2025 Horizon Travels</p>
+ </div>
+ </div>
+ </footer>
+ {% endblock %}
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/app/templates/bookings/index.html b/app/templates/bookings/index.html
index 9942207230c2dda46d6f2e1050ef8770e077f063..547f91650053f49756483c7a3af2ffa536ec230e 100644
--- a/app/templates/bookings/index.html
+++ b/app/templates/bookings/index.html
@@ -1,4 +1,4 @@
-{% extends 'navigation.html' %}
+{% extends 'base.html' %}
{% block content %}
<div class="content">
diff --git a/app/templates/index.html b/app/templates/index.html
index 5678f1f6171e76308c589b337efb1e62dc38b75b..7969692404be1133610cccc86cf723a8904351d9 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -9,7 +9,5 @@
<div>
<h3>Guarantees</h3>
</div>
- <div>
- <h3>Example Pricing</h3>
- </div>
+
{% endblock %}
\ No newline at end of file