diff --git a/Admin.html b/Administration.html
similarity index 55%
rename from Admin.html
rename to Administration.html
index 34134effa7673fa5fb3d711904400fcaa0a5d76f..4dece9990291b290124374ffc68494314a6814cf 100644
--- a/Admin.html
+++ b/Administration.html
@@ -14,23 +14,23 @@
</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='CarbonLevels.html'" href="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='PlanTrips.html'" href="#plantrips">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>
+ <a onclick="document.location='Administration.html'" href="#admin">Administration</a>
</div>
<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 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>
+ <a class="admin1" onclick="document.location='Authorisation.html'">Authorisation</a>
+ <a class="admin2" onclick="document.location='Manage Users.html'">Manage Users</a>
+ <a class="admin3" onclick="document.location='Company info.html'">Company Information</a>
+ <a class="admin4" onclick="document.location='Contact.html'">Contact Us</a>
</body>
diff --git a/Authorisation.html b/Authorisation.html
index 95bcec743680b78ead02f8148fb55f3606c90c19..3620125f9aee0743e02dfe4bbcdecf7c0d166c09 100644
--- a/Authorisation.html
+++ b/Authorisation.html
@@ -14,15 +14,14 @@
<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="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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='Administration.html'" href="#admin">Administration</a>
</div>
<h2>Authorisation</h2> <!--Page Title-->
diff --git a/Carbon Levels.html b/Carbon Levels.html
index 7b9cffec81db51cb949f710ca3f8922e39c55e51..4027c296723a990641aa2e4d3d136e376fb8a9d5 100644
--- a/Carbon Levels.html
+++ b/Carbon Levels.html
@@ -15,19 +15,32 @@
</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='Carbon Levels.html'" href="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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>
+ <a onclick="document.location='Administration.html'" href="#admin">Administration</a>
</div>
- <h2>Carbon Footprint</h2> <!--Page heading-->
+ <script> //This script is used to display the data that the user has inputted
+ function testVariable() {
+ var result= document.getElementById("carbon").value;
+ document.getElementById('carbondata').textContent = result;
+ }
+ </script>
+
+ <h2 class="carbonhead">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>
+ <span class="dot" id="carbondata"> <!--The data entered by the user is displayed in the circle -->
+ 56
+ </span>
+ <form action="/action_page.php" class="carbonform"> <!--The form for the user to enter the data and submit-->
+ <label for="carbon">Update Carbon Emissions:</label><br>
+ <input type="text" id="carbon" name="carbon" required><br><br>
+ <button onclick="testVariable()">Submit</button>
+ </form>
diff --git a/Company info.html b/Company info.html
new file mode 100644
index 0000000000000000000000000000000000000000..da0c53f22fcc9936a1f1d3fc69693c90929ac329
--- /dev/null
+++ b/Company info.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, intial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="style/main.css">
+ <title>Travel Elect</title>
+</head>
+
+<body>
+
+ <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="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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='Administration.html'" href="#admin">Administration</a>
+ </div>
+
+
+ <h1>Company Information</h1>
+
+ <table class="companytable"> <!--Table is set up to display the companies employee's data-->
+ <tr>
+ <th>Company Name</th>
+ <td></td>
+ </tr>
+
+ <tr>
+ <th>Company Address</th>
+ <td></td>
+ </tr>
+
+ <tr>
+ <th>Postcode</th>
+ <td></td>
+ </tr>
+
+ <tr>
+ <th>Country/Region</th>
+ <td></td>
+ </tr>
+
+ <tr>
+ <th>Email Address</th>
+ <td></td>
+ </tr>
+
+ <tr>
+ <th>Contact Number</th>
+ <td></td>
+ </tr>
+
+ </table>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Contact.html b/Contact.html
index 43644b4804315f87e35c8079765e7c67b547972f..8f37ca37dc905b20a85c9c9d43597885c6ef669e 100644
--- a/Contact.html
+++ b/Contact.html
@@ -15,13 +15,13 @@
</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='Carbon Levels.html'" href="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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>
+ <a onclick="document.location='Administration.html'" href="#admin">Administration</a>
</div>
<form action="/action_page.php"> <!--For is set up to collect user information when they are making an inquiry-->
@@ -34,26 +34,24 @@
<div class="contact">
<label for="name">Name:</label><br>
- <input type="text" id="name" name="name"><br><br>
+ <input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
- <input type="email" id="email" name="email"><br><br>
+ <input type="email" id="email" name="email" required><br><br>
<label for="number">Contact Number:</label><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="company">Organisation:</label><br>
+ <input type="text" id="company" name="company" required><br><br>
<label for="role">Role with in the organisation:</label><br>
- <input type="text" id="role" name="role"><br><br>
+ <input type="text" id="role" name="role" required><br><br>
<label for="location">Location:</label><br>
- <input type="text" id="location" name="location"><br><br>
- <label for="type">Type of Inquiry:</label><br>
- <input type="text" id="type" name="type"><br><br>
+ <input type="text" id="location" name="location" required><br><br>
<label for="subject">Subject:</label><br>
- <input type="text" id="subject" name="subject"><br><br>
+ <input type="text" id="subject" name="subject" required><br><br>
<label for="details">Details:</label><br>
- <input type="text" id="details" name="details"><br><br>
+ <input type="text" id="details" name="details" required><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>
+ <input class="login" type="submit" value="Submit">
</div>
diff --git a/Homepage.html b/Homepage.html
index d1a4344f9ccd0fe38d1961c8753cf34c2f7d005a..7981c021b6474f9eb6e3462135d2d166c73b8296 100644
--- a/Homepage.html
+++ b/Homepage.html
@@ -10,15 +10,20 @@
<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>
+ <!--Buttons are created for the login or register pages-->
<button class="btn" onclick="document.location='Login.html'">Login</button>
<button class="btn1" onclick="document.location='Register.html'">Register</button>
- <section class="about">
- <p1>
+ <section class="img">
+ <!--Imports an image onto the webpage-->
+ <img class="homeimg" src="Websiteimage.jpg" alt="homeImg" height="800" width="800">
+ </section>
+
+ <section class="about"> <!--This section display information about this software-->
Travel Elect is a software designed to help companies lower their carbon
footprint and save money. You are able to plan business trips efficiently
and save your company money by only taking trips that are necessary.
@@ -26,20 +31,24 @@
Some of the reasons for these business trips can be done using technology
developed to help companies for these reasons such as conducting a conferencing over
video conferencing rather than traveling abroad.
- </p1>
</section>
- <section class="about1">
- <p2>
+ <section class="about1"> <!--This section display information about this software-->
Travel Elect can help these companies decide which trips are necessary
and which ones are not and help the company to keep
track of their carbon footprint and remain on budget.
Help your company go carbon neutral and save our planet. Our software helps
your company go carbon nuetral by stopping unnecessary travels. And displays your
companies carbon footprint overall.
- </p2>
</section>
+ <!--This button will take the user to the register page-->
<button class="btn2" onclick="document.location='Register.html'">Start Planning</button>
+
+ <!--The links at the bottom of the homepage-->
+ <a class="feedback" onclick="document.location='Contact.html'">Contact Us</a>
+ <a class="contactus" onclick="document.location='Contact.html'">Contact Us</a>
+ <p class="privacyterms">Privacy Terms</p>
+ <p class="terms">Terms and Conditions</p>
</body>
</html>
\ No newline at end of file
diff --git a/Login.html b/Login.html
index 53f01305f3ce532e2effaeb4189e2872b7bfe0f0..20b091a38424eb3054ef63a23d60838be378dba7 100644
--- a/Login.html
+++ b/Login.html
@@ -9,27 +9,31 @@
</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>
- <form action="/action_page.php">
+
+ <form action="/action_page.php"> <!--The form is set up to allow the user to login-->
<div class=user>
- <h2><label for="uname">Username</label><br></h2>
+ <h2><label>Username</label><br></h2>
<input type="text" placeholder="Enter Username" name="uname" required>
</div>
<div class=psw>
- <h2><label for="password">Password</label><br></h2>
+ <h2><label>Password</label><br></h2>
<input type="text" placeholder="Enter Password" name="psw" required>
</div>
- <button class="login" type="submit">Login</button>
+ <!--Once the user has entered their information they can submit it-->
+ <input class="login" type="submit" value="Login">
+
+ <!--The user can decide whether they want the site to remember their login for them-->
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
- <div class="container">
- <button type="button" class="cancelbtn">Cancel</button>
+ <div class="cancel"> <!--The user can cancel the login or reset their password-->
+ <button type="button" class="cancelbtn" onclick="document.location='Homepage.html'">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
diff --git a/Manage Employees.html b/Manage Employees.html
deleted file mode 100644
index a660c1af3dfba11ce34fa4d6efcd7e0e00c157d5..0000000000000000000000000000000000000000
--- a/Manage Employees.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, intial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="style/main.css">
- <title>Travel Elect</title>
-</head>
-
-<body>
-
- <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">
-
- <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>
-
-
-
-</body>
-</html>
\ No newline at end of file
diff --git a/Manage Trips.html b/Manage Trips.html
deleted file mode 100644
index 6d2c7be6c8683fccce5c50003ad7434e0f482a88..0000000000000000000000000000000000000000
--- a/Manage Trips.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, intial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="style/main.css">
- <title>Travel Elect</title>
-</head>
-
-<body>
-
- <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>
-
- <h2>Manage Employees</h2>
-
-
-
-
-</body>
-</html>
\ No newline at end of file
diff --git a/Manage Users.html b/Manage Users.html
index 11affd8a4d8e5643946f0d463bdb83c01fac67b3..4135326f4bd1ecfe42993769a141fd8dd0c93c5a 100644
--- a/Manage Users.html
+++ b/Manage Users.html
@@ -15,19 +15,69 @@
</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='Carbon Levels.html'" href="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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>
+ <a onclick="document.location='Administration.html'" href="#admin">Administration</a>
</div>
<h2>Manage Users</h2>
-
+ <table class="table"> <!--Table is set up to display the companies employee's data-->
+ <tr>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ <th>Password</th>
+
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+
+ </table>
+
+ <!--The button to open up the form document-->
+ <button class="open-button" onclick="openForm()">Open Form</button>
+
+ <div class="form-popup" id="addUser">
+ <!--The form to collect new user information-->
+ <form action="/action_page.php" class="form-container">
+ <h1>Add User</h1>
+
+ <label><b>First Name</b></label>
+ <input type="text" name="fname" required>
+
+ <label><b>Last Name</b></label>
+ <input type="text" name="lname" required>
+
+ <label><b>Username</b></label>
+ <input type="text" name="username" required>
+
+ <label><b>Password</b></label>
+ <input type="password" name="psw" required>
+
+ <!--Once the user has completed the form the data can be submitted-->
+ <button type="submit" class="btn">Add</button>
+ <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
+ </form>
+ </div>
+
+ <script> //Allows the form to be opened and close on request
+ function openForm() {
+ document.getElementById("addUser").style.display = "block";
+ }
+ function closeForm() {
+ document.getElementById("addUser").style.display = "none";
+ }
+ </script>
</body>
</html>
\ No newline at end of file
diff --git a/Notes.html b/Notes.html
index 74887b81e5f63499cc9bb728ad8b25163e7fb8d9..bcdf7f3812b73486cc25519f9feefce67f332614 100644
--- a/Notes.html
+++ b/Notes.html
@@ -15,31 +15,31 @@
</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='Carbon Levels.html'" href="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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>
+ <a onclick="document.location='Administration.html'" href="#admin">Administration</a>
</div>
<form action="/action_page.php"> <!--A form is set up to collect users notes-->
<fieldset>
- <legend>Notes</legend>
+ <legend>Notes</legend> <!--Title of the form-->
<div class="plan">
<label for="task">Tasks:</label><br>
- <input type="text" id="task" name="task"><br><br>
+ <input type="text" id="task" name="task" required><br><br>
<label for="location">Location:</label><br>
- <input type="text" id="location" name="location"><br><br>
- <label for="date">Date (dd/mm/yyyy):</label><br>
- <input type="text" id="date" name="date"><br><br>
+ <input type="text" id="location" name="location" required><br><br>
+ <label for="date">Date:</label><br>
+ <input type="date" class="date" id="date" name="date" required><br><br>
<label for="note">Notes:</label><br>
- <input class="note" type="text" id="note" name="note"><br><br>
+ <input class="note" type="text" id="note" name="note" required><br><br>
<!--Once the user has completed the for then they are able to submit it-->
<button type="submit">Add Note</button>
diff --git a/Payment.html b/Payment.html
index 3d4055b94ca377a84d002e82714222c1c6e36f2c..86a05abb8c5219f69f34f3ab05ec01a95e171bec 100644
--- a/Payment.html
+++ b/Payment.html
@@ -8,57 +8,63 @@
<title>Travel Elect</title>
</head>
-<body>
<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>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--This form is to collect the company payment details-->
<fieldset>
- <legend>Payment Details</legend>
+ <legend>Payment Details</legend> <!--The title of the page-->
<div class="payment">
- <label for="c/r">Country/Region:</label><br>
- <select>
+ <label>Card Type:</label><br>
+ <select required>
+ <option value="" selected>Select Option</option>
<option value=“opt1”>Visa Debit/Visa/Visa Electron</option>
- <option value=“opt2” selected>Mastercard</option>
- <option value=“opt3” selected>Discover</option>
- <option value=“opt4” selected>Maestro</option>
- <option value=“opt5” selected>American Express</option>
- <option value="opt6" selected>Select Option</option>
+ <option value=“opt2”>Mastercard</option>
+ <option value=“opt3”>Discover</option>
+ <option value=“opt4”>Maestro</option>
+ <option value=“opt5”>American Express</option>
</select><br><br>
- <label for="type">Card Type:</label><br>
- <select>
+
+ <label>Country/Region:</label><br>
+ <select required>
+ <option value="" selected>Select Option</option>
<option value=“opt1”>Canada</option>
- <option value=“opt2” selected>Cayman Islands</option>
- <option value=“opt3” selected>Russia</option>
- <option value=“opt4” selected>United Kingdom</option>
- <option value=“opt5” selected>United States</option>
- <option value="opt6" selected>Select Option</option>
+ <option value=“opt2”>Cayman Islands</option>
+ <option value=“opt3”>Russia</option>
+ <option value=“opt4”>United Kingdom</option>
+ <option value=“opt5”>United States</option>
</select><br><br>
+
<label for="name">Cardholder Name:</label><br>
- <input type="text" id="name" name="name"><br><br>
+ <input type="text" id="name" name="name" required><br><br>
+
<label for="cnumber">Card Number:</label><br>
- <input type="text" id="cnumber" name="cnumber"><br><br>
+ <input type="number" id="cnumber" name="cnumber" required><br><br>
+
<label for="exdate">Expiry Date:</label><br>
- <input type="text" id="exdate" name="exdate"><br><br>
+ <input type="date" id="exdate" name="exdate" required><br><br>
+
<label for="code">Security Code:</label><br>
- <input type="text" id="code" name="cody"><br><br>
- <legend>Billing Address</legend>
+ <input type="number" id="code" name="cody" required><br><br>
+
+ <h2>Billing Address</h2>
<label for="address">Address:</label><br>
- <input type="text" id="address" name="address"><br><br>
- <input type="text" id="address" name="address"><br><br>
- <input type="text" id="address" name="address"><br><br>
- <label for="t/c">Town/City:</label><br>
- <input type="text" id="t/c" name="t/c"><br><br>
+ <input type="text" id="address" name="address" required><br><br>
+
+ <label>Town/City:</label><br>
+ <input type="text" id="t/c" name="t/c" required><br><br>
+
<label for="pcode">Postcode:</label><br>
- <input type="text" id="pcode" name="pcode"><br><br>
+ <input type="text" id="pcode" name="pcode" required><br><br>
- <input class="submit" type="submit" value="Submit">
+ <!--Once the user has completed the form the user can submit it-->
+ <input class="login" type="submit" value="Submit">
</div>
@@ -67,5 +73,4 @@
</form>
</body>
-</body>
</html>
\ No newline at end of file
diff --git a/Plan Trips.html b/Plan Trips.html
index 58653f8638a6d6b8f9f77d547fb908d0f762d2d4..940ee0793426b03344476d4d75ba2b42b863c20d 100644
--- a/Plan Trips.html
+++ b/Plan Trips.html
@@ -14,50 +14,97 @@
</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='Carbon Levels.html'" href="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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>
+ <a onclick="document.location='Administration.html'" href="#admin">Administration</a>
</div>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--The form is set to collect business trip planning information-->
<fieldset>
- <legend>Plan Trip</legend>
+ <legend>Plan Trip</legend> <!--Title of the form-->
<div class="plan">
<label for="id">Employee ID:</label><br>
- <input type="text" id="id" name="id"><br><br>
+ <input type="text" id="id" name="id" required><br><br>
+
<label for="fname">First Name:</label><br>
- <input type="text" id="fname" name="fname"><br><br>
+ <input type="text" id="fname" name="fname" required><br><br>
+
<label for="lname">Last Name:</label><br>
- <input type="text" id="lname" name="lname"><br><br>
+ <input type="text" id="lname" name="lname" required><br><br>
+
+ <label>Purpose:</label><br>
+ <select required>
+ <option value="" selected>Select Option</option>
+ <option value=“opt1”>Networking</option>
+ <option value=“opt2”>Closing Deal</option>
+ <option value=“opt3”>Visiting customer/supplier</option>
+ <option value=“opt4”>Meetings at company branch</option>
+ <option value=“opt5”>Check at other branches</option>
+ <option value=“opt6”>Market product</option>
+ <option value=“opt7”>Visit product site</option>
+ <option value=“opt8”>Project work for customer</option>
+ <option value=“opt9”>Building new partnerships</option>
+ <option value=“opt10”>Identify trends/new trends</option>
+ </select><br><br>
+
+ <label>Country:</label><br>
+ <select required>
+ <option value="" selected>Select Option</option>
+ <option value=“opt1”>Canada</option>
+ <option value=“opt2”>Cayman Islands</option>
+ <option value=“opt3”>Russia</option>
+ <option value=“opt4”>United Kingdom</option>
+ <option value=“opt5”>United States</option>
+ </select><br><br>
+
+ <label>Method of Travel:</label><br>
+ <select required>
+ <option value="" selected>Select Option</option>
+ <option value=“opt1” onclick="myFunction()">Plane</option>
+ <option value=“opt2” onclick="optFunction()">Train</option>
+ <option value=“opt3” onclick="optFunction()">Bus</option>
+ <option value=“opt4” onclick="optFunction()">Petrol Car</option>
+ <option value=“opt5”>Electric Car</option>
+ <option value=“opt6” onclick="optFunction()">Coach</option>
+ </select><br><br>
+
<label for="fnumber">Flight Number:</label><br>
- <input type="text" id="fnumber" name="fnumber"><br><br>
+ <input type="text" id="fnumber" name="fnumber" required><br><br>
+
<label for="airline">Airline:</label><br>
- <input type="text" id="airline" name="airline"><br><br>
+ <input type="text" id="airline" name="airline" required><br><br>
+
<label for="leave">Leaving Date:</label><br>
- <input type="text" id="leave" name="leave"><br><br>
+ <input type="date" class="date" id="leave" name="leave" required><br><br>
+
<label for="depart">Departure Time:</label><br>
- <input type="text" id="depart" name="depart"><br><br>
+ <input type="time" class="time" id="depart" name="depart" required><br><br>
+
<label for="arrive">Arrival Time:</label><br>
- <input type="text" id="arrive" name="arrive"><br><br>
+ <input type="time" class="time" id="arrive" name="arrive" required><br><br>
+
<label for="return">Returning Date:</label><br>
- <input type="text" id="return" name="return"><br><br>
+ <input type="date" class="date" id="return" name="return" required><br><br>
+
<label for="depart">Departure Time:</label><br>
- <input type="text" id="depart" name="depart"><br><br>
+ <input type="time" class="time" name="depart" required><br><br>
+
<label for="arrive">Arrival Time:</label><br>
- <input type="text" id="arrive" name="arrive"><br><br>
+ <input type="time" class="time" name="arrive" required><br><br>
+
<label for="carbon">Total Carbon Emission:</label><br>
- <input type="text" id="carbon" name="carbon"><br><br>
+ <input type="text" id="carbon" name="carbon" required><br><br>
-
- <button onclick="document.location='Upcoming Trips.html'">Submit</button>
+ <!--Once the user has completed the form the user can submit it and move on to the trips page-->
+ <input class="login" onclick="document.location='Trips.html'" type="submit" value="Submit">
</div>
@@ -65,6 +112,19 @@
</form>
+ <script> //If the user selects a certain option this message is displayed
+ function myFunction() {
+ alert("Would a different method of travel be possible or try video or web conference? If not, take a direct route and try flying commercial.");
+ }
+ </script>
+
+ <script> //If the user selects a certain option this message is displayed
+ function optFunction() {
+ alert("Would web or video conferencing be possible?");
+ }
+ </script>
+ <!--Method of calculation for carbon levels is imported-->
+ <iframe width="500" height="1300" frameborder="0" scrolling="no" src="https://calculator.carbonfootprint.com/calculator.aspx"></iframe>
</body>
</html>
\ No newline at end of file
diff --git a/Profile.html b/Profile.html
index 64e5f4435fd8eacf45544fc83171640d96e5dd84..154e8d5a008eb5a2c9375d7dca3288ac6938d172 100644
--- a/Profile.html
+++ b/Profile.html
@@ -15,13 +15,13 @@
</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='Carbon Levels.html'" href="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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>
+ <a onclick="document.location='Administration.html'" href="#admin">Administration</a>
</div>
<h2 class="subhead">Employee Profiles</h2> <!--Page Heading-->
diff --git a/Register.html b/Register.html
index ab625583e04e4fe2c9305881b3863d4fd60db32b..51bfd2651fe36def474bddb15b8990f83f0cd1ef 100644
--- a/Register.html
+++ b/Register.html
@@ -9,45 +9,47 @@
</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>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--Form set up to register the company to the software -->
<fieldset>
- <legend>Register</legend>
+ <legend>Register</legend> <!--The title of the form-->
- <div class="register">
+ <div>
<label for="cname">Company Name:</label><br>
- <input type="text" id="cname" name="cname"><br><br>
+ <input type="text" id="cname" name="cname" required><br><br>
<label for="address">Address:</label><br>
- <input type="text" id="address" name="address"><br><br>
- <input type="text" id="address" name="address"><br><br>
- <input type="text" id="address" name="address"><br><br>
+ <input type="text" id="address" name="address" required><br><br>
<label for="pcode">Postcode:</label><br>
- <input type="text" id="pcode" name="pcode"><br><br>
+ <input type="text" id="pcode" name="pcode" required><br><br>
<label for="region">Country/Region:</label><br>
- <input type="text" id="region" name="region"><br><br>
+ <input type="text" id="region" name="region" required><br><br>
<label for="email">Email Address:</label><br>
- <input type="text" id="email" name="email"><br><br>
+ <input type="email" id="email" name="email" required><br><br>
<label for="contact">Contact Number:</label><br>
- <input type="text" id="contact" name="contact"><br><br>
- <label>
- <input class="regcheck" type="checkbox" name="t/c"> Agree with Terms & Conditions
+ <input type="text" id="contact" name="contact" required><br><br>
+
+ <!--The user agrees to the conditions of the site-->
+ <label class="regcheck">
+ <input type="checkbox" name="t/c"> Agree with Terms & Conditions
</label>
- <label>
- <input class="regcheck" type="checkbox" name="privacy"> Agree with Privacy Terms
+ <label class="regcheck">
+ <input type="checkbox" name="privacy"> Agree with Privacy Terms
</label>
- <button onclick="document.location='Subscription.html'">Next</button>
+ <!--Once the user has completed the form they can submit and move on to the next stage of the registering-->
+ <button type="submit" onclick="document.location='Subscription.html'">Next</button>
</div>
</fieldset>
</form>
+
</body>
</html>
\ No newline at end of file
diff --git a/Reports.html b/Reports.html
index 2f896f57853fec24425a7e945d2899f6a55fbe2d..b8803b72875d7a12dca24ba0332f0bda5819788e 100644
--- a/Reports.html
+++ b/Reports.html
@@ -9,22 +9,53 @@
</head>
<body>
- <header>
+ <header> <!--The side navigation is set up and the locations are set-->
<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="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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='Administration.html'" href="#admin">Administration</a>
</div>
-
+ <h1>Reports</h1>
+
+ <!--The button to reveal the information-->
+ <button type="button" class="report">Trip ID - Carbon Level</button>
+ <!--The content of the drop down-->
+ <div class="content">
+ <p>Employee ID</p>
+ <p>First Name Last Name</p>
+ <p>Department</p>
+ <p>Purpose - Duration - Country</p>
+ <p>Departure Date - Return Date</p>
+ <p>Success</p>
+ <p>Total Spent - Carbon Emission</p>
+ <p>Tasks - Notes</p>
+ </div>
+
+<script> //The script that allows the drop down to work on command
+var report = document.getElementsByClassName("report");
+var i;
+
+for (i = 0; i < report.length; i++) {
+ report[i].addEventListener("click", function() {
+ this.classList.toggle("active");
+ var content = this.nextElementSibling;
+ if (content.style.display === "block") {
+ content.style.display = "none";
+ } else {
+ content.style.display = "block";
+ }
+ });
+}
+</script>
</body>
diff --git a/Style/main.css b/Style/main.css
index 7e1602018dedc8add60bdb1b4aac639944a36e45..0e3036fe817098cc5907fc55d8afe2659cfc59d9 100644
--- a/Style/main.css
+++ b/Style/main.css
@@ -48,40 +48,41 @@
}
- /*Homepage*/
+/*Homepage*/
- .btn {
+ .btn { /*This block of code styles and positions the login button*/
border: none;
background-color: inherit;
padding: 14px 28px;
- font-size: 20px;
+ font-size: 25px;
cursor: pointer;
display: inline-block;
width: 50%;
+ height: 50%;
grid-column: 1/3;
- grid-row: 3;
+ grid-row: 2;
color: darkblue;
}
- .btn:hover {
+ .btn:hover { /*This code styles the hover colour for the login button*/
background: #eee;
}
- .btn1 {
+ .btn1 { /*This block of code styles and postions the register button*/
border: none;
background-color: white;
padding: 14px 28px;
- font-size: 20px;
+ font-size: 25px;
cursor: pointer;
display: inline-block;
width: 50%;
grid-column: 1/3;
- grid-row: 4;
+ grid-row: 3;
color: darkblue;
}
- .btn1:hover {
+ .btn1:hover { /*This code styles the hover colour for the register button*/
background: #eee;
}
- .about {
+ .about { /*The first paragraph is styled and positioned*/
grid-column: 1/6;
grid-row: 5;
font-size: 20px;
@@ -91,15 +92,15 @@
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 {
+ .about1 { /*The second paragraph is styled and position*/
+ grid-column: 1/6;
+ grid-row: 6;
+ font-size: 20px;
+ text-align: center;
+ padding-top: 100px;
+ padding-bottom: 100px;
+ }
+ .btn2 { /*The button is styled and position*/
border: none;
background-color: white;
padding: 14px 28px;
@@ -108,16 +109,41 @@
cursor: pointer;
display: inline-block;
width: 100%;
- grid-column: 2/4;
+ grid-column: 2/5;
grid-row: 7;
color:darkblue;
+ }
+ .btn2:hover { /*Sets the hover colour for the button*/
+ background: white;
}
- .btn2:hover {
- background: white;
- }
-
+ .feedback { /*Align the text at the bottom of the page*/
+ grid-column: 1;
+ grid-row: 8;
+ text-align: center;
+ }
+ .contactus { /*Align the text at the bottom of the page*/
+ grid-row: 8;
+ grid-column: 2/3;
+ text-align: right;
+ }
+ .privacyterms { /*Align the text at the bottom of the page*/
+ grid-row: 8;
+ grid-column: 3/5;
+ text-align: center;
+ }
+ .terms { /*Align the text at the bottom of the page*/
+ grid-row: 8;
+ grid-column: 5;
+ text-align: left;
+ }
+ .img { /*resizes and positions the image*/
+ grid-column: 3/6;
+ height: 100%;
+ width: 100%;
+ }
+
/*Login*/
- .login {
+ .login { /*Style the login button*/
background-color: darkblue;
color: white;
padding: 14px 20px;
@@ -126,17 +152,15 @@
cursor: pointer;
width: 100%;
}
-
- button:hover {
+ button:hover { /*The hover colour for the login button*/
background-color: #4CAF50;
}
-
- .cancelbtn {
+ .cancelbtn { /*Style for the cancel button*/
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
- input[type=text], input[type=password] {
+ input[type=text], input[type=password] { /*The styling for the input area*/
width: 100%;
padding: 12px 20px;
margin: 8px 0;
@@ -144,21 +168,17 @@
border: 1px solid #ccc;
box-sizing: content-box;
}
- span.psw {
+ span.psw { /*The styling for the forgot password link*/
float: right;
padding-top: 16px;
}
- .container {
+ .cancel { /*Styling for cancel button and password link*/
padding: 16px;
}
-/*Register, Payment, Notes & Plan Trips*/
+/*Register, Payment, Notes, Contact & Plan Trips forms*/
- .register {
- grid-template-columns: 1/3;
- grid-template-rows: 2;
- }
- input[type=text], select {
+ input { /*Styling for the input part of the form*/
width: 100%;
padding: 12px 100px;
margin: 8px 0;
@@ -167,31 +187,45 @@
box-sizing: content-box;
font-size: 20px;
}
- label {
+ select { /*Style the select sections for the form*/
+ width: 50%;
+ padding: 12px 100px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ box-sizing: content-box;
+ font-size: 20px;
+ }
+ .date, .time { /*Style the date and time section of the forms*/
+ width: 30%;
+ padding: 12px 100px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ box-sizing: content-box;
+ font-size: 20px;
+ }
+ label { /*Style the labels of the form*/
float: left;
width: 100%;
text-align: left;
padding: 5px 1px 1px 1px;
font-size: 20px;
+ user-select: none;
}
- fieldset {
- max-width: 40px;
+ fieldset { /*Style the border around the forms*/
+ max-width: 100%;
padding: 20px;
margin: 2px auto;
border: 0 none;
}
- legend {
+ legend { /*Style the title of the form*/
font-size: 30px;
width: 100%;
border-bottom: 5px dotted darkblue;
color: darkblue;
}
- label {
- box-sizing: border-box;
- user-select: none;
- cursor: pointer;
- }
- button {
+ button { /*Style the buttons for the forms*/
background-color: darkblue;
color: white;
padding: 14px 20px;
@@ -200,7 +234,7 @@
cursor: pointer;
width: 100%;
}
- .note {
+ .note { /*Style the boxing size for the notes*/
width: 100%;
height: 150px;
padding: 12px 20px;
@@ -208,51 +242,95 @@
border: 2px solid #ccc;
resize: none;
}
+ .regcheck { /*Styling for the conditions checkbox*/
+ width: 100%;
+ grid-column: 1/6;
+ float: left;
+ display: block;
+ }
+
+/*Plan Trips*/
+
+ iframe { /*Position the carbon calculator*/
+ grid-column: 4/6;
+ grid-row: 2;
+ }
/*Subscription*/
- .week {
+ .week { /*Styling for the weekly plan section*/
border: 3px solid #0ed145;
- grid-column: 1/2;
+ grid-column: 2/3;
grid-row: 3;
font-size: 20px;
text-align: center;
background-color: white;
}
- .month {
+ .month { /*Styling for the monthly plan section*/
border: 3px solid #0ed145;
- grid-column: 2/4;
+ grid-column: 3/4;
grid-row: 3;
font-size: 20px;
text-align: center;
background-color: white;
}
- .year {
+ .year { /*Styling for the yearly plan section*/
border: 3px solid #0ed145;
- grid-column: 4/6;
+ grid-column: 4/5;
grid-row: 3;
font-size: 20px;
text-align: center;
background-color: white;
}
- .bg {
+ .bg { /*Change the background colour of the page*/
background-color: darkblue;
}
- .title {
+ .title { /*Change the title colour*/
color: white;
}
- .buy {
+ .buy { /*Style the button for payment*/
font-size: 20px;
font-style: bold;
}
-/*Administartion*/
+/*Administration*/
- .admin {
+ .admin1 { /*Style and position the button on the page*/
+ grid-column: 2/5;
grid-row: 3;
+ color: black;
+ font-size: 20px;
+ cursor: pointer;
+ display: inline-block;
+ padding-bottom: 5px;
+ }
+ .admin2 { /*Style and position the button on the page*/
+ grid-column: 2/5;
+ grid-row: 4;
+ color: black;
+ font-size: 20px;
+ cursor: pointer;
+ display: inline-block;
+ padding-bottom: 5px;
+ }
+ .admin3 { /*Style and position the button on the page*/
+ grid-column: 2/5;
+ grid-row: 5;
+ color: black;
+ font-size: 20px;
+ cursor: pointer;
+ display: inline-block;
+ }
+ .admin4 { /*Style and position the button on the page*/
+ grid-column: 2/5;
+ grid-row: 6;
+ color: black;
+ font-size: 20px;
+ cursor: pointer;
+ display: inline-block;
}
-/*Upcoming Trips*/
+/*Trips*/
.split { /*This code splits the page*/
height: 100%;
@@ -265,12 +343,12 @@
.left { /*This code styles the left side*/
left: 20%;
- background-color: cyan;
+ border: 3px solid darkblue;
}
.right { /*This code styles the right side*/
right: 0;
- background-color: green;
+ border: 3px solid darkblue;
}
.centre { /*This code centres the text on both sides*/
@@ -279,7 +357,9 @@
text-align: center;
}
-/*Profile*/
+/*Profile, Authorisation & Manage Users*/
+
+
.table { /*This code styles the table*/
width:100%;
grid-row: 3;
@@ -294,4 +374,119 @@
text-align: left;
border: 1px solid black;
}
-
\ No newline at end of file
+
+/*Company*/
+
+ .companytable { /*Style for the company information table*/
+ width:100%;
+ grid-row: 3;
+ grid-column: 2/6;
+ font-size: 20px;
+ float: left;
+ border: 1px solid black;
+ border-collapse: collapse;
+ }
+
+/*Carbon Levels*/
+
+ .carbonhead{ /*Positioning of the page title*/
+ width: 100%;
+ font-size: 35px;
+ grid-column: 2/6;
+ grid-row: 2;
+ margin-left: 10px;
+ }
+ .dot { /*Styling the circle on the page*/
+ height: 500px;
+ width: 500px;
+ background-color: darkblue;
+ border-radius: 50%;
+ display: inline-block;
+ grid-row: 3;
+ grid-column: 3/4;
+
+ }
+ .dot { /*Position of the where the data would be and the colour of the text*/
+ color: white;
+ font-size: 50px;
+ text-align: center;
+ }
+ .carbonform { /*Positioning of the form*/
+ grid-row: 4;
+ grid-column: 3/4;
+ }
+
+/*Manage Users*/
+
+/*Style the button that opens the form*/
+.open-button {
+ background-color: darkblue;
+ color: white;
+ padding: 16px 20px;
+ border: none;
+ cursor: pointer;
+ grid-row: 2;
+ grid-column: 5/6;
+ bottom: 23px;
+ right: 28px;
+ width: 280px;
+}
+/*Styling for the form that pop up when the button is pressed*/
+.form-popup {
+ display: none;
+ position: absolute;
+ border: 3px solid #f1f1f1;
+ z-index: 9;
+}
+/*Add style to the form when it opens*/
+.form-container {
+ width: 50%;
+ background-color: #0ed145;
+}
+/*Style the input fields*/
+.form-container input[type=text], .form-container input[type=password] {
+ width: 50%;
+ padding: 15px;
+ margin: 5px 0 22px 0;
+ border: none;
+}
+/*The style for the submit button in the form container*/
+.form-container .btn {
+ background-color: darkblue;
+ color: white;
+ padding: 16px 20px;
+ border: none;
+ cursor: pointer;
+ width: 100%;
+ margin-bottom:10px;
+}
+/*Style the cancel button in the form container*/
+.form-container .cancel {
+ background-color: red;
+}
+
+/*Reports*/
+
+.report { /*Styling the title bar button*/
+ background-color: darkblue;
+ color: white;
+ cursor: pointer;
+ height: 20%;
+ width: 100%;
+ border: none;
+ text-align: left;
+ outline: none;
+ font-size: 15px;
+ grid-row: 3;
+ grid-column: 2/6;
+}
+.active, .report:hover { /*Hover and active colour styled to green*/
+ background-color: #0ed145;
+}
+.content { /*The data is styled within the drop down*/
+ padding: 0 18px;
+ display: none;
+ overflow: hidden;
+ background-color: #f1f1f1;
+ grid-column: 2/6;
+}
diff --git a/Subscription.html b/Subscription.html
index 1306a7b185ca1c7a524b96c39589bb8e27bf4c51..204bb7971eb57127f547257874c16ffd945e7d26 100644
--- a/Subscription.html
+++ b/Subscription.html
@@ -10,13 +10,13 @@
<body class="bg">
- <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>
- <h1 class="title">Subscription</h1>
+ <h1 class="title">Subscription</h1> <!--The title of the page-->
- <section class="week">
+ <section class="week"> <!--Weekly plan information-->
<h2>Weekly Plan</h2>
<h3>For occasional travels</h3>
<p>Track Carbon Emissions</p>
@@ -27,7 +27,7 @@
<p>£10</p>
</section>
- <section class="month">
+ <section class="month"> <!--Monthly plan information-->
<h2>Monthly Plan</h2>
<h3>For consistent travels </h3>
<p>Track Carbon Emissions</p>
@@ -38,7 +38,7 @@
<p>£35</p>
</section>
- <section class="year">
+ <section class="year"> <!--Yearly plan information-->
<h2>Yearly Plan</h2>
<h3>For frequent travels</h3>
<p>Track Carbon Emissions</p>
diff --git a/Upcoming Trips.html b/Trips.html
similarity index 82%
rename from Upcoming Trips.html
rename to Trips.html
index 376488639101e2381710004230cc31c339ec5fa1..f66a8a1055542e7931dd7e4a13a765b74f90d05c 100644
--- a/Upcoming Trips.html
+++ b/Trips.html
@@ -15,13 +15,13 @@
</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='Carbon Levels.html'" href="#carbonLevels">Carbon Levels</a>
+ <a onclick="document.location='Profile.html'" href="#employeeinformation">Profile</a>
+ <a onclick="document.location='Trips.html'" href="#trips">Trips</a>
+ <a onclick="document.location='Plan Trips.html'" href="#plantrips">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>
+ <a onclick="document.location='Administration.html'" href="#admin">Administration</a>
</div>
<div class="split left"> <!--The left split of the page to display upcoming trips-->
diff --git a/Websiteimage.jpg b/Websiteimage.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..276e2e3ccc72507e8116a26ca1b85a48e01ddfe6
Binary files /dev/null and b/Websiteimage.jpg differ