From 2de772ab64a2ec2c198dbae071bcb6c6b02fddc2 Mon Sep 17 00:00:00 2001
From: r2-witter <randa2.witter@live.uwe.ac.uk>
Date: Mon, 4 May 2020 16:52:08 +0100
Subject: [PATCH] 04/05/2020 update
---
Admin.html | 29 +++--
Authorisation.html | 21 +++-
Carbon Levels.html | 27 +++--
Contact.html | 32 +++---
Manage Employees.html | 48 ++++++--
Manage Trips.html | 21 ++--
Manage Users.html | 21 ++--
Notes.html | 25 +++--
Payment.html | 2 +-
Plan Trips.html | 22 ++--
Profile.html | 64 ++++++-----
Register.html | 3 +-
Reports.html | 2 +-
Style/main.css | 256 ++++++++++++++++++++++++------------------
Upcoming Trips.html | 48 ++++----
15 files changed, 351 insertions(+), 270 deletions(-)
diff --git a/Admin.html b/Admin.html
index 92cd7d4..34134ef 100644
--- a/Admin.html
+++ b/Admin.html
@@ -9,29 +9,28 @@
</head>
<body>
-
- <header>
+ <header> <!--The image is inserted onto the page before the name of the site-->
<h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
-
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
+ </header>
+ <div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
</div>
+
- <h2>Administration</h2>
+ <h2>Administration</h2> <!--Title of the Page-->
+ <!--These are the buttons that leads to other pages managed by the administrator-->
<button class="admin" onclick="document.location='Authorisation.html'">Authorisation</button>
- <button class="admin" onclick="document.location='Manage Employees.html'">Manage Employees</button>
<button class="admin" onclick="document.location='Manage Users.html'">Manage Users</button>
<button class="admin" onclick="document.location='Manage Trips.html'">Manage Trips</button>
-
+ <button class="admin" onclick="document.location='Contact.html'">Contact Us</button>
</body>
diff --git a/Authorisation.html b/Authorisation.html
index dc561af..95bcec7 100644
--- a/Authorisation.html
+++ b/Authorisation.html
@@ -25,9 +25,24 @@
</div>
- <h2>Authorisation</h2>
-
-
+ <h2>Authorisation</h2> <!--Page Title-->
+
+ <table class="table"> <!--Table is set up to display the users that have more access-->
+ <tr>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Department</th>
+ <th>Contact Number</th>
+ <th>Email</th>
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+
+ </table>
</body>
diff --git a/Carbon Levels.html b/Carbon Levels.html
index 9460dac..7b9cffe 100644
--- a/Carbon Levels.html
+++ b/Carbon Levels.html
@@ -10,24 +10,23 @@
<body>
- <header>
+ <header> <!--The image is inserted onto the page before the name of the site-->
<h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
-
- <div class="sidenav">
-
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
-
+ </header>
+
+ <div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
</div>
- <h2>Carbon Footprint</h2>
+ <h2>Carbon Footprint</h2> <!--Page heading-->
+ <!--Method of calculation for carbon levels is imported-->
<iframe width="710" height="1300" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" src="https://calculator.carbonfootprint.com/calculator.aspx"></iframe>
diff --git a/Contact.html b/Contact.html
index b4a8717..43644b4 100644
--- a/Contact.html
+++ b/Contact.html
@@ -10,26 +10,25 @@
<body>
- <header>
+ <header> <!--The image is inserted onto the page before the name of the site-->
<h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
+ </header>
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
-
- </div>
+ <div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
+ </div>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--For is set up to collect user information when they are making an inquiry-->
<fieldset>
- <legend>Your Inquires & Comments</legend>
+ <legend>Your Inquires & Comments</legend> <!--Page title-->
<p>Please give the necessary details to help us get back to you</p>
<div class="contact">
@@ -37,9 +36,9 @@
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
- <input type="text" id="email" name="email"><br><br>
+ <input type="email" id="email" name="email"><br><br>
<label for="number">Contact Number:</label><br>
- <input type="text" id="number" name="number"><br><br>
+ <input type="tel" id="number" name="number"><br><br>
<label for="company">Organisations:</label><br>
<input type="text" id="company" name="company"><br><br>
<label for="role">Role with in the organisation:</label><br>
@@ -53,6 +52,7 @@
<label for="details">Details:</label><br>
<input type="text" id="details" name="details"><br><br>
+ <!--Once the user has completed the form they are able to submit the data-->
<button class="next" onclick="document.location='Subscription.html'">Next</button>
</div>
diff --git a/Manage Employees.html b/Manage Employees.html
index 227f858..a660c1a 100644
--- a/Manage Employees.html
+++ b/Manage Employees.html
@@ -10,22 +10,48 @@
<body>
- <header>
+ <header> <!--The image is inserted onto the page before the name of the site-->
<h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
</header>
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
-
+ <div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
</div>
- <h2>Administration</h2>
+ <form action="/action_page.php">
+
+ <fieldset>
+
+ <legend>Plan Trip</legend> <!--The title of the page-->
+
+ <div class="plan">
+ <!--The form is set up for the user to insert the required data-->
+ <label for="id">Employee ID:</label><br>
+ <input type="text" id="id" name="id"><br><br>
+ <label for="fname">First Name:</label><br>
+ <input type="text" id="fname" name="fname"><br><br>
+ <label for="lname">Last Name:</label><br>
+ <input type="text" id="lname" name="lname"><br><br>
+ <label for="department">Department:</label><br>
+ <input type="text" id="department" name="department"><br><br>
+ <label for="average">Average Spent:</label><br>
+ <input type="number" id="average" name="average"><br><br>
+ <label for="contact">Contact Number:</label><br>
+ <input type="tel" id="contact" name="contact"><br><br>
+ <label for="email">Email:</label><br>
+ <input type="email" id="email" name="email"><br><br>
+
+ <!--Once the form is completed the user can submit the data-->
+ <input class="submit" type="submit" value="Submit">
+ </div>
+
+ </fieldset>
diff --git a/Manage Trips.html b/Manage Trips.html
index 4517fca..6d2c7be 100644
--- a/Manage Trips.html
+++ b/Manage Trips.html
@@ -10,19 +10,18 @@
<body>
- <header>
+ <header> <!--The image is inserted onto the page before the name of the site-->
<h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
-
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
+ </header>
+ <div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
</div>
<h2>Manage Employees</h2>
diff --git a/Manage Users.html b/Manage Users.html
index a2ca36d..11affd8 100644
--- a/Manage Users.html
+++ b/Manage Users.html
@@ -10,19 +10,18 @@
<body>
- <header>
+ <header> <!--The image is inserted onto the page before the name of the site-->
<h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
-
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
+ </header>
+ <div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
</div>
<h2>Manage Users</h2>
diff --git a/Notes.html b/Notes.html
index 552249f..74887b8 100644
--- a/Notes.html
+++ b/Notes.html
@@ -9,22 +9,22 @@
</head>
<body>
- <header>
- <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
+ <header> <!--The image is inserted onto the page before the name of the site-->
+ <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
+ </header>
+ <div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
</div>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--A form is set up to collect users notes-->
<fieldset>
@@ -41,6 +41,7 @@
<label for="note">Notes:</label><br>
<input class="note" type="text" id="note" name="note"><br><br>
+ <!--Once the user has completed the for then they are able to submit it-->
<button type="submit">Add Note</button>
</div>
diff --git a/Payment.html b/Payment.html
index bf8a478..3d4055b 100644
--- a/Payment.html
+++ b/Payment.html
@@ -58,7 +58,7 @@
<label for="pcode">Postcode:</label><br>
<input type="text" id="pcode" name="pcode"><br><br>
- <button type="submit">Register</button>
+ <input class="submit" type="submit" value="Submit">
</div>
diff --git a/Plan Trips.html b/Plan Trips.html
index a4dbc7b..58653f8 100644
--- a/Plan Trips.html
+++ b/Plan Trips.html
@@ -9,19 +9,18 @@
</head>
<body>
- <header>
+ <header> <!--The image is inserted onto the page before the name of the site-->
<h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
-
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
+ </header>
+ <div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
</div>
<form action="/action_page.php">
@@ -66,7 +65,6 @@
</form>
-
</body>
</html>
\ No newline at end of file
diff --git a/Profile.html b/Profile.html
index 1540928..64e5f44 100644
--- a/Profile.html
+++ b/Profile.html
@@ -10,32 +10,44 @@
<body>
- <header>
- <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
-
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
-
- </div>
+ <header> <!--The image is inserted onto the page before the name of the site-->
+ <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
+ </header>
- <h2>Employee Profiles</h2>
-
- <p>Employee ID</p>
- <p>First Name</p>
- <p>Last Name</p>
- <p>Occupation</p>
- <p>Department</p>
- <p>Number of Trips</p>
- <p>Averge Money Spent</p>
- <p>Contact Number</p>
- <p>Email</p>
+<div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
+</div>
+
+ <h2 class="subhead">Employee Profiles</h2> <!--Page Heading-->
+
+ <table class="table"> <!--Table is set up to display the companies employee's data-->
+ <tr>
+ <th>Employee ID</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Department</th>
+ <th>Averge Spent</th>
+ <th>Contact Number</th>
+ <th>Email</th>
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+
+ </table>
+
+ </body>
-</body>
</html>
\ No newline at end of file
diff --git a/Register.html b/Register.html
index 9ee7a7d..ab62558 100644
--- a/Register.html
+++ b/Register.html
@@ -42,8 +42,7 @@
<input class="regcheck" type="checkbox" name="privacy"> Agree with Privacy Terms
</label>
- <button class="next" onclick="document.location='Subscription.html'">Next</button>
-
+ <button onclick="document.location='Subscription.html'">Next</button>
</div>
</fieldset>
diff --git a/Reports.html b/Reports.html
index 49b5136..2f896f5 100644
--- a/Reports.html
+++ b/Reports.html
@@ -23,7 +23,7 @@
<button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
</div>
-
+
diff --git a/Style/main.css b/Style/main.css
index 875d185..7e16020 100644
--- a/Style/main.css
+++ b/Style/main.css
@@ -1,117 +1,105 @@
/*Global*/
-body {
- display:grid;
- grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
- grid-template-rows: auto auto 1fr 1fr 1fr 1fr 1fr;
- }
+ body { /*The grid format and font is set up for the whole website*/
+ display:grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+ grid-template-rows: auto auto 1fr 1fr 1fr 1fr 1fr;
+ font-family: Arial, Helvetica, sans-serif;
+ }
-header{
- grid-column: 1/6;
- grid-row: 1;
- color: darkblue;
- font-size: 25px;
- position: relative;
- background-color: white;
- }
-.logo{
- width: 70px;
- height: 70px;
- grid-row: 1;
- grid-column: 1/6;
- float: left;
- }
-.sidenav {
- width: 230px;
- z-index: 1;
- top: 20px;
- left: 10px;
- background: darkblue;
- overflow-x: hidden;
- padding: 8px 0px;
- grid-column: 1/2;
- grid-row: 2/4;
+ header{ /*The website name is formatted*/
+ grid-column: 1/6;
+ grid-row: 1;
+ color: darkblue;
+ font-size: 25px;
+ position: relative;
+ background-color: white;
+ }
+ .logo{ /*The logo is positioned and formated*/
+ width: 70px;
+ height: 70px;
+ grid-row: 1;
+ grid-column: 1/6;
+ float: left;
+ }
+ .sidenav { /*The side navigation bar is styled*/
+ width: 230px;
+ z-index: 1;
+ top: 20px;
+ left: 10px;
+ background: darkblue;
+ overflow-x: hidden;
+ padding: 20px 0px;
+ grid-column: 1/2;
+ grid-row: 2/4;
+ }
+
+ .sidenav a { /*The content within the navigation bar in styled*/
+ padding: 6px 8px 30px 16px;
+ text-decoration: none;
+ font-size: 25px;
+ color: white;
+ display: block;
+ text-align: center;
+ }
+
+ .sidenav a:hover { /*When the curser hovers over a button on the sidenav it changes colour*/
+ background-color: #0ed145;
+ }
+
- }
-
-.sidenav a {
- padding: 6px 8px 6px 16px;
- text-decoration: none;
- font-size: 20px;
- color: white;
- display: block;
- }
-
-.sidenav a:hover {
- color: #0ed145;
- }
-
- .bttn:hover {
- background: rgb(1, 62, 143);
- color: black;
- }
- .bttn {
- border: none;
- background-color: darkblue;
- padding: 14px 28px;
- font-size: 16px;
- cursor: pointer;
- display: inline-block;
- width: 100%;
- }
+ /*Homepage*/
- /*Homepage*/
-
- .btn {
- border: none;
- background-color: inherit;
- padding: 14px 28px;
- font-size: 20px;
- cursor: pointer;
- display: inline-block;
- width: 50%;
- grid-column: 1/3;
- grid-row: 3;
- color: darkblue;
- }
- .btn:hover {
- background: #eee;
- }
- .btn1 {
- border: none;
- background-color: white;
- padding: 14px 28px;
- font-size: 20px;
- cursor: pointer;
- display: inline-block;
- width: 50%;
- grid-column: 1/3;
- grid-row: 4;
- color: darkblue;
- }
- .btn1:hover {
- background: #eee;
- }
-
- .about {
+ .btn {
+ border: none;
+ background-color: inherit;
+ padding: 14px 28px;
+ font-size: 20px;
+ cursor: pointer;
+ display: inline-block;
+ width: 50%;
+ grid-column: 1/3;
+ grid-row: 3;
+ color: darkblue;
+ }
+ .btn:hover {
+ background: #eee;
+ }
+ .btn1 {
+ border: none;
+ background-color: white;
+ padding: 14px 28px;
+ font-size: 20px;
+ cursor: pointer;
+ display: inline-block;
+ width: 50%;
+ grid-column: 1/3;
+ grid-row: 4;
+ color: darkblue;
+ }
+ .btn1:hover {
+ background: #eee;
+ }
+
+ .about {
+ grid-column: 1/6;
+ grid-row: 5;
+ font-size: 20px;
+ text-align: center;
+ background-color: darkblue;
+ color: white;
+ padding-top: 100px;
+ padding-bottom: 100px;
+ }
+ .about1 {
grid-column: 1/6;
- grid-row: 5;
+ grid-row: 6;
font-size: 20px;
text-align: center;
- background-color: darkblue;
- color: white;
padding-top: 100px;
padding-bottom: 100px;
}
- .about1 {
- grid-column: 1/6;
- grid-row: 6;
- font-size: 20px;
- text-align: center;
- padding-top: 100px;
- padding-bottom: 100px;
- }
- .btn2 {
+ .btn2 {
border: none;
background-color: white;
padding: 14px 28px;
@@ -123,12 +111,12 @@ header{
grid-column: 2/4;
grid-row: 7;
color:darkblue;
- }
- .btn2:hover {
- background: white;
- }
+ }
+ .btn2:hover {
+ background: white;
+ }
- /*Login*/
+/*Login*/
.login {
background-color: darkblue;
color: white;
@@ -164,7 +152,7 @@ header{
padding: 16px;
}
- /*Register, Payment, Notes & Plan Trips*/
+/*Register, Payment, Notes & Plan Trips*/
.register {
grid-template-columns: 1/3;
@@ -221,7 +209,7 @@ header{
resize: none;
}
- /*Subscription*/
+/*Subscription*/
.week {
border: 3px solid #0ed145;
@@ -258,4 +246,52 @@ header{
font-style: bold;
}
+/*Administartion*/
+
+ .admin {
+ grid-row: 3;
+ }
+
+/*Upcoming Trips*/
+
+ .split { /*This code splits the page*/
+ height: 100%;
+ width: 39%;
+ position: fixed;
+ z-index: 1;
+ top: 20%;
+ overflow-x: hidden;
+ }
+
+ .left { /*This code styles the left side*/
+ left: 20%;
+ background-color: cyan;
+ }
+
+ .right { /*This code styles the right side*/
+ right: 0;
+ background-color: green;
+ }
+
+ .centre { /*This code centres the text on both sides*/
+ position: absolute;
+ left: 35%;
+ text-align: center;
+ }
+
+/*Profile*/
+ .table { /*This code styles the table*/
+ width:100%;
+ grid-row: 3;
+ grid-column: 2/6;
+ font-size: 20px;
+ float: left;
+ border: 1px solid black;
+ border-collapse: collapse;
+ }
+ th, td { /*Styling for the contents of the table*/
+ padding: 5px;
+ text-align: left;
+ border: 1px solid black;
+ }
\ No newline at end of file
diff --git a/Upcoming Trips.html b/Upcoming Trips.html
index 3ac8075..3764886 100644
--- a/Upcoming Trips.html
+++ b/Upcoming Trips.html
@@ -10,33 +10,31 @@
<body>
- <header>
- <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
-
- <div class="sidenav">
- <button class="bttn" onclick="document.location='Carbon Levels.html'"><a href="#carbon Levels">Carbon Levels</a></button>
- <button class="bttn" onclick="document.location='Profile.html'"><a href="#employee information">Profile</a></button>
- <button class="bttn" onclick="document.location='Upcoming Trips.html'"><a href="#past and upcoming trips">Past and Upcoming Trips</a></button>
- <button class="bttn" onclick="document.location='Plan Trips.html'"><a href="#plan trips">Plan Trips</a></button>
- <button class="bttn" onclick="document.location='Reports.html'"><a href="#reports">Reports</a></button>
- <button class="bttn" onclick="document.location='Notes.html'"><a href="#Notes">Notes</a></button>
- <button class="bttn" onclick="document.location='Admin.html'"><a href="#admin">Admin</a></button>
-
- </div>
-
- <form action="/action_page.php">
-
- <fieldset>
-
- <legend>Upcoming Trips</legend>
-
- <legend>Past Trips</legend>
-
- </fieldset>
+ <header> <!--The image is inserted onto the page before the name of the site-->
+ <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
+ </header>
- </form>
+<div class="sidenav"> <!--The side navigation is set up and the locations are set-->
+ <a onclick="document.location='Carbon Levels.html'" href="#carbon Levels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employee information">Profile</a>
+ <a onclick="document.location='Upcoming Trips.html'" href="#past and upcoming trips">Past and Upcoming Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plan trips">Plan Trips</a>
+ <a onclick="document.location='Reports.html'" href="#reports">Reports</a>
+ <a onclick="document.location='Notes.html'" href="#Notes">Notes</a>
+ <a onclick="document.location='Admin.html'" href="#admin">Admin</a>
+</div>
+ <div class="split left"> <!--The left split of the page to display upcoming trips-->
+ <div class="centre">
+ <h2>Upcoming Trips</h2>
+ </div>
+ </div>
+
+ <div class="split right"> <!--The right split of the page is set up to display the past trips-->
+ <div class="centre">
+ <h2>Past Trips</h2>
+ </div>
+ </div>
</body>
</html>
\ No newline at end of file
--
GitLab