diff --git a/create_db.sql b/create_db.sql
index b7f310020b84e12f2af0fd43e80334ba897ec2f9..9cba9c5ab8c5e0c08f1870f6d74f34f8ac64ba15 100644
--- a/create_db.sql
+++ b/create_db.sql
@@ -1,8 +1,9 @@
CREATE DATABASE store;
USE store;
-CREATE TABLE items (id INT AUTO_INCREMENT,name VARCHAR(50),price DECIMAL(5, 2) unsigned,PRIMARY KEY(id));
-CREATE USER 'appuser'@'localhost' IDENTIFIED WITH mysql_native_password BY 'app2027';
-GRANT ALL PRIVILEGES ON myBookshop.* TO 'appuser'@'localhost';
-
-CREATE TABLE userdata (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50), firstname VARCHAR(50), lastname VARCHAR(50),email VARCHAR(255) NOT NULL UNIQUE,hashedPassword VARCHAR(255) UNIQUE);
-INSERT INTO userdata (username, firstname,lastname,email,hashedPassword)VALUES('james007',"James","Bond","james007@gmail.com","*%$&23cf£^13!&!*" );
+CREATE TABLE items (product_id INT AUTO_INCREMENT,name VARCHAR(50),price DECIMAL(5, 2),
+ imageURL VARCHAR(255),title VARCHAR(50), username VARCHAR(50) unsigned,PRIMARY KEY(id));
+CREATE TABLE userdata (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50),
+ firstname VARCHAR(50), lastname VARCHAR(50),email VARCHAR(255) NOT NULL UNIQUE,
+ hashedPassword VARCHAR(255) UNIQUE);
+INSERT INTO userdata (username, firstname,lastname,email,hashedPassword)
+ VALUES('james007',"James","Bond","james007@gmail.com","*%$&23cf£^13!&!*" );
diff --git a/index.js b/index.js
index c7dab998d81d3d173ca8dc04161a31f2133a3d7b..94307da160a13687c368f8dc4613c6d9e4ef8ddb 100644
--- a/index.js
+++ b/index.js
@@ -17,6 +17,7 @@ const port = 8000
app.use(expressSanitizer());
app.use(bodyParser.urlencoded({ extended: true }))
+
// Create a session
app.use(session({
secret: 'somerandomstuff',
@@ -28,7 +29,13 @@ app.use(session({
}));
// Set up css
-app.use(express.static(__dirname + '/public'));
+app.use('/public', express.static(__dirname + "/public"));
+
+app.use(express.static(__dirname + "/public"));
+
+app.use(express.static(__dirname + "/js"));
+
+
// Define the database connection
const db = mysql.createConnection ({
@@ -37,6 +44,7 @@ const db = mysql.createConnection ({
password: 'app2027',
database: 'mybookshop'
});
+
// Connect to the database
db.connect((err) => {
if (err) {
@@ -51,6 +59,7 @@ global.db = db;
// __dirname will get the current directory
app.set('views', __dirname + '/views');
+
// EJS as the templating engine
app.set('view engine', 'ejs');
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e7e461677a054ed4576da4e5f591ac6b04a58da
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,8 @@
+function myFunction() {
+ var x = document.getElementById("navbar");
+ if (x.className === "navbar") {
+ x.className += " responsive";
+ } else {
+ x.className = "navbar";
+ }
+ }
\ No newline at end of file
diff --git a/public/background.jpg b/public/background.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cf041d9332cf96f6128ad2b91e7f7b94e506b8bb
Binary files /dev/null and b/public/background.jpg differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..befc31906e5f413316b3470e52e14218361c8424
Binary files /dev/null and b/public/logo.png differ
diff --git a/public/main.css b/public/main.css
index 9733fefd03d15ef9f5d14300f90fe4faa48d9bd5..6937478bd53851b2d481cfe9225c8a8835ce3f82 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,59 +1,147 @@
-body{
- background-color: rgb(107, 106, 106);
-}
-
-.topnav {
+/* Styling the whole universal page */
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
- background-color: #333;
- overflow: hidden;
}
-.topnav a:link {
- color: rgb(255, 255, 255);
- text-decoration: none;
- float: left;
- color: #f2f2f2;
- text-align: center;
- padding: 14px 16px;
- font-size: 17px;
- }
-
- /* visited link */
- .topnav a:visited {
- color: rgb(255, 255, 255);
- padding:5px;
- }
- /* Change the color of links on hover */
-.topnav a:hover {
- background-color: #ddd;
- color: black;
+h1 {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 50px;
+ line-height: 64px;
+ color: rgb(0, 0, 0);
}
-/* Add a color to the active/current link */
-.topnav a.active {
- background-color: #04AA6D;
- color: white;
+h2 {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 46px;
+ line-height: 54px;
+ color: rgb(0, 0, 0);
}
-.topnav-right{
- float: right;
+h4 {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 19px;
+ color: rgb(0, 0, 0);
}
-h1 {
+h6 {
font-family: Arial, Helvetica, sans-serif;
- font-size: 20px;
- color: rgb(253, 248, 255);
- padding:5px;
+ font-weight: 700;
+ font-size: 12px;
}
-h2 {
+p{
font-family: Arial, Helvetica, sans-serif;
- font-size: 20px;
- color: rgb(255, 255, 255);
+ font-size: 19px;
+ color: rgb(247, 246, 246);
+ margin: 15px 0 20px 0;
}
-p,li {
- font-family: Arial, Helvetica, sans-serif;
+.section-p1{
+ padding: 40px 80px;
+}
+
+.section-m1{
+ padding: 40px 0px;
}
+
+.body{
+ width: 100%;
+}
+
+.logo{
+ max-width: 20%;
+
+}
+
+
+/* Styling the header */
+
+#header{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 70px;
+ background-color: #d4cadf;
+ box-shadow: 0 5px 15px rgb(0, 0,0,0.06 );
+ z-index: 999;
+ position: sticky;
+ top: 0;
+ left: 0;
+
+}
+
+/* Alines nav bar to center */
+#navbar{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+}
+
+/* Get rid of the bullet points and */
+#navbar li{
+ list-style: none;
+ padding: 0 20px;
+
+}
+
+#navbar li a {
+ text-decoration: none;
+ font-size: 16px;
+ font-weight: 600;
+ color: rgb(0, 0, 0);
+ transition: 0.3s ease;
+
+}
+
+#navbar li a:hover {
+ color: #e0fcfa;
+}
+
+
+
+/* Styling the home page */
+#hero{
+ background-image: url("background.jpg");
+ height: 90vh;
+ width: 100%;
+ background-repeat: no-repeat ;
+ background-position: top 25% right 0;
+ background-size: cover;
+ padding: 0 80px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+}
+
+
+#hero h1{
+ color: #e0fcfa;
+}
+#hero h4{
+ padding-bottom: 15px;
+}
+
+#hero button{
+
+ border: none;
+ display: block;
+ cursor: pointer;
+ text-transform: uppercase;
+ outline: none;
+ overflow: hidden;
+ color: #ffffff;
+ font-weight: 600;
+ font-size: 15px;
+ background-color: #89a53a;
+ padding: 15px 40px;
+
+}
+
+
diff --git a/views/index.ejs b/views/index.ejs
index 0611b487db439e919c4a14db700da9d5e0c34407..57069f7c72c2778d590d63ffeaaa7dde9c9b317f 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -5,17 +5,40 @@
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
- <div class ="topnav">
- <p><a href="/."><%=shopName%></a></p>
- <p><a href="about">About <%=shopName%></a></p>
- <p><a href="search">Search for items</a></p>
- <p><a href="register">Register with us</a></p>
- <div class ="topnav-right">
- <p><a href="login">Login</a></p>
- <p><a href="logout">Logout</a></p>
- </div>
+
+ <section id = "header">
+ <a href="/."> <img src = "/public/logo.png"class ="logo" alt = ""> </a>
+ <div>
+ <ul id="navbar">
+ <li><a href="about">About <%=shopName%></a></li>
+ <li><a href="search">Search for items</a></li>
+ <li><a href="register">Register with us</a></li>
+ <li><a href="login">Login</a></li>
+ <li><a href="logout">Logout</a></li>
+ </ul>
</div>
+ </section>
+
+ <section id ="hero">
+ <h4> Have unwanted items or clothing collecting dust</h4>
+
+ <h2> Let it find a new home </h2>
+
+ <h1> Users only pay for the delivery </h1>
+
+ <p> For a more sustainable future</p>
+
+ <button> Explore now</button>
+
+ </section>
+
+
+
+
+
</body>
+ <script src="/js/app.js"></script>
+
</html>