wmantly/mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #29 from Newtbot/t

Browse Source 
T
This commit is contained in:
noot 2024-01-17 17:30:08 +08:00 committed by GitHub
commit 36b9531b2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
71 changed files with 1155 additions and 754 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Vivian/login.html
View File

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<script src="login.js" defer></script>
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="button" onclick="validateForm()">Login</button>
</form>
</body>
</html>

37
Vivian/login.js
View File

@ -1,37 +0,0 @@
function validateForm() {
var username = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Perform basic validation
if (!email || !password) {
alert('Please enter both email and password');
return;
}
// If validation passes, send data to the server
sendDataToServer(email, password);
}
function sendDataToServer(email, password) {
// Use AJAX or fetch to send data to the server
// Example using fetch:
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
})
.then(response => response.json())
.then(data => {
// Handle the response from the server
console.log(data);
if (data.success) {
// Redirect or perform other actions for successful login
alert('Login successful');
} else {
alert('Login failed. Please check your credentials.');
}
})
.catch(error => console.error('Error:', error));
}

24
Vivian/signup.html
View File

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup Page</title>
<script src="signup.js" defer></script>
</head>
<body>
<h2>Signup</h2>
<form id="signupForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<button type="button" onclick="validateForm()">Sign Up</button>
</form>
</body>
</html>

35
Vivian/signup.js
View File

@ -1,35 +0,0 @@
function validateForm() {
var userid = document.getElementById('user_id').value;
var username = document.getElementById('user_name').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
var email = document.getElementById('email').value;
// Perform basic validation
if (password !== confirmPassword) {
alert('Passwords do not match');
return;
}
// If validation passes, send data to the server
sendDataToServer(username, email, password);
}
function sendDataToServer(username, password) {
// Use AJAX or fetch to send data to the server
// Example using fetch:
fetch('/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, email, password }),
})
.then(response => response.json())
.then(data => {
// Handle the response from the server
console.log(data);
})
.catch(error => console.error('Error:', error));
}

BIN
consumerWebsite/Vivian/eco saver.mwb
View File

Binary file not shown.

22
consumerWebsite/Vivian/index.php
View File

@ -1,22 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

21
consumerWebsite/Vivian/login.html
View File

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<script src="login.js" defer></script>
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="button" onclick="validateForm()">Login</button>
</form>
</body>
</html>

44
consumerWebsite/Vivian/server.js
View File

@ -1,44 +0,0 @@
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
const port = 3000;
app.use(bodyParser.json());
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'your_mysql_password',
database: 'your_database_name',
});
db.connect(err => {
if (err) {
console.error('Error connecting to MySQL:', err);
} else {
console.log('Connected to MySQL');
}
});
app.post('/signup', (req, res) => {
const { username, password } = req.body;
// Perform server-side validation if needed
const sql = 'INSERT INTO users (username, password) VALUES (?, ?)';
db.query(sql, [username, password], (err, result) => {
if (err) {
console.error('Error executing SQL query:', err);
res.status(500).json({ success: false, message: 'Internal Server Error' });
} else {
console.log('User signed up successfully');
res.json({ success: true, message: 'User signed up successfully' });
}
});
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});

24
consumerWebsite/Vivian/signup.html
View File

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup Page</title>
<script src="signup.js" defer></script>
</head>
<body>
<h2>Signup</h2>
<form id="signupForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<button type="button" onclick="validateForm()">Sign Up</button>
</form>
</body>
</html>

35
consumerWebsite/Vivian/signup.js
View File

@ -1,35 +0,0 @@
function validateForm() {
var userid = document.getElementById('user_id').value;
var username = document.getElementById('user_name').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
var email = document.getElementById('email').value;
// Perform basic validation
if (password !== confirmPassword) {
alert('Passwords do not match');
return;
}
// If validation passes, send data to the server
sendDataToServer(username, email, password);
}
function sendDataToServer(username, password) {
// Use AJAX or fetch to send data to the server
// Example using fetch:
fetch('/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, email, password }),
})
.then(response => response.json())
.then(data => {
// Handle the response from the server
console.log(data);
})
.catch(error => console.error('Error:', error));
}

227
consumerWebsite/public/404.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<title>N & LW Lawn Care - Landscaping Bootstrap4 HTML5 Responsive Template </title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Fontawesome CSS --> <!-- Fontawesome CSS -->
@ -13,67 +13,42 @@
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
</head> </head>
<body> <body>
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-light top-nav fixed-top"> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-light top-nav fixed-top">
<div class="container"> <div class="container">
<a class="navbar-brand" href="index.html"> <a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="logo" /> <img src="images/logo.png" alt="logo" />
</a> </a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="fas fa-bars"></span> <span class="fas fa-bars"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarResponsive"> <div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="index.html">Home</a> <a class="nav-link active" href="index.html">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="about.html">About</a> <a class="nav-link" href="news.html">News</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="services.html">Services</a> <a class="nav-link" href="contact.html">Contact</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <!--<img src="images/profile-logo.png" alt="Profile Logo" class="profile-logo"> -->
Portfolio <a class="nav-link" href="profile.html">Profile</a>
</a> </li>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio"> <li class="nav-item">
<a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a> <a class="nav-link" href="signuplogin.html">Logout</a>
<a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a> </li>
<a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a> </ul>
<a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a> </div>
<a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a> </div>
</div> </nav>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- full Title --> <!-- full Title -->
<div class="full-title"> <div class="full-title">
<div class="container"> <div class="container">
@ -84,8 +59,8 @@
</div> </div>
</div> </div>
<!-- Page Content --> <!-- Page Content -->
<div class="container"> <div class="container">
<div class="breadcrumb-main"> <div class="breadcrumb-main">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
@ -101,40 +76,39 @@
<img class="img-fluid" src="images/404.png" alt="" /> <img class="img-fluid" src="images/404.png" alt="" />
</div> </div>
<p>We can’t find the page your are looking for. You can check out our <a href="#">Homepage</a>.</p> <p>We can’t find the page your are looking for. You can check out our <a href="#">Homepage</a>.</p>
<a class="btn btn-primary" href="#"> Back To Homepage </a> <a class="btn btn-primary" href="index.html"> Back To Homepage </a>
</div> </div>
<!-- /.jumbotron --> <!-- /.jumbotron -->
</div> </div>
<!-- /.container --> <!-- /.container -->
<!--footer starts from here--> <!--footer starts from here-->
<footer class="footer"> <footer class="footer">
<div class="container bottom_border"> <div class="container bottom_border">
<div class="row"> <div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col"> <div class="col-lg-3 col-md-6 col-sm-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Find us</h5> <h5 class="headin5_amrc col_white_amrc pt2">Find us</h5>
<!--headin5_amrc--> <!--headin5_amrc-->
<p class="mb10">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <p><i class="fa fa-location-arrow"></i> Blk 645 Jalan Tenaga</p>
<p><i class="fa fa-location-arrow"></i> 9878/25 sec 9 rohini 35 </p> <p><i class="fa fa-phone"></i> +65 90064959</p>
<p><i class="fa fa-phone"></i> +91-9999878398 </p> <p><i class="fa fa fa-envelope"></i> Leongdingxuan@gmail.com </p>
<p><i class="fa fa fa-envelope"></i> info@example.com </p> </div>
</div> <div class="col-lg-3 col-md-6 col-sm-6 col">
<div class="col-lg-3 col-md-6 col-sm-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Follow us</h5> <h5 class="headin5_amrc col_white_amrc pt2">Follow us</h5>
<!--headin5_amrc ends here--> <!--headin5_amrc ends here-->
<ul class="footer_ul2_amrc"> <ul class="footer_ul2_amrc">
<li> <li>
<a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a> <a href="#"><i class="fab fa-facebook-f fleft padding-right"></i> </a>
<p>Lorem Ipsum is simply dummy printing...<a href="#">https://www.lipsum.com/</a></p> <a href="#">https://www.facebook.com/</a></p>
</li>
<li>
<a href="#"><i class="fab fa-instagram fleft padding-right"></i> </a>
<a href="#">https://www.instagram.com/</a></p>
</li> </li>
<li> <li>
<a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a> <a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a>
<p>Lorem Ipsum is simply dummy printing...<a href="#">https://www.lipsum.com/</a></p> <a href="#">https://twitter.com/</a></p>
</li>
<li>
<a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a>
<p>Lorem Ipsum is simply dummy printing...<a href="#">https://www.lipsum.com/</a></p>
</li> </li>
</ul> </ul>
<!--footer_ul2_amrc ends here--> <!--footer_ul2_amrc ends here-->
@ -143,17 +117,14 @@
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5> <h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc--> <!--headin5_amrc-->
<ul class="footer_ul_amrc"> <ul class="footer_ul_amrc">
<li><a href="#">Default Version</a></li> <li><a href="#">Home</a></li>
<li><a href="#">Boxed Version</a></li> <li><a href="#">News</a></li>
<li><a href="#">Our Team </a></li> <li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Get In Touch</a></li>
</ul> </ul>
<!--footer_ul_amrc ends here--> <!--footer_ul_amrc ends here-->
</div> </div>
<div class="col-lg-3 col-md-6 col-sm-6 "> <div class="col-lg-3 col-md-6 col-sm-6 ">
<h5 class="headin5_amrc col_white_amrc pt2">Recent posts</h5> <h5 class="headin5_amrc col_white_amrc pt2">News</h5>
<!--headin5_amrc--> <!--headin5_amrc-->
<ul class="footer_ul_amrc"> <ul class="footer_ul_amrc">
<li class="media"> <li class="media">
@ -161,53 +132,43 @@
<img class="img-fluid" src="images/post-img-01.jpg" alt="" /> <img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div> </div>
<div class="media-body"> <div class="media-body">
<p>How to find best dog food?</p> <p>Singapore's air quality ...</p>
<span>22 Sep 2018</span> <span>7 oct 2023</span>
</div>
</ul>
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>Singapore Government ...</p>
<span>29 Sep 2023</span>
</div>
</ul>
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>High risk of severe ...</p>
<span>22 Jun 2023</span>
</div> </div>
</li>
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-02.jpg" alt="" />
</div>
<div class="media-body">
<p>How to find best dog food?</p>
<span>34 Sep 2018</span>
</div>
</li>
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-03.jpg" alt="" />
</div>
<div class="media-body">
<p>How to find best dog food?</p>
<span>30 Sep 2018</span>
</div>
</li>
</ul> </ul>
<!--footer_ul_amrc ends here-->
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <div class="container text-center">
<div class="footer-logo"> <br>
<a href="#"><img src="images/footer-logo.png" alt="" /></a> <p>All Rights Reserved. &copy; 2023 <a href="#">EcoSaver</a>
</div> </p>
<!--foote_bottom_ul_amrc ends here--> </div>
<p class="copyright text-center">All Rights Reserved. &copy; 2018 <a href="#">N & LW Lawn Care</a> Design By : </footer>
<a href="https://html.design/">html design</a>
</p>
<ul class="social_footer_ul">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
<!--social_footer_ul ends here-->
</div>
</footer>
<!-- Bootstrap core JavaScript --> <!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html>
</html>

217
consumerWebsite/public/contact.html
View File

@ -1,217 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>N & LW Lawn Care - Landscaping Bootstrap4 HTML5 Responsive Template </title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Fontawesome CSS -->
<link href="css/all.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-light top-nav fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="logo" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.html">Profile</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- full Title -->
<div class="full-title">
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">Contact
</h1>
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="breadcrumb-main">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item active">Contact</li>
</ol>
</div>
<!-- Content Row -->
<div class="row">
<!-- Map Column -->
<div class="col-lg-8 mb-4">
<!-- Embedded Google Map -->
<iframe width="100%" height="300px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;q=Singapore+410645&amp;t=m&amp;z=15&amp;output=embed"></iframe>
</div>
<!-- Contact Details Column -->
<div class="col-lg-4 mb-4 contact-right">
<h3>Contact Details</h3>
<p>
Blk 645 Jalan Tenaga
<br>S(410645)
<br>
</p>
<p>
<abbr title="Phone">P</abbr>: (+65) 90064959
</p>
<p>
<abbr title="Email">E</abbr>:
<a href="mailto:name@example.com">leongdingxuan@gmail.com
</a>
</p>
<p>
<abbr title="Hours">H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM
</p>
</div>
</div>
<!-- /.row -->
<!-- Contact Form -->
<!-- In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
<div class="row">
<div class="col-lg-8 mb-4 contact-left">
<h3>Send us a Message</h3>
<form name="sentMessage" id="contactForm" novalidate>
<div class="control-group form-group">
<div class="controls">
<label>Full Name:</label>
<input type="text" class="form-control" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Phone Number:</label>
<input type="tel" class="form-control" id="phone" required data-validation-required-message="Please enter your phone number.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Email Address:</label>
<input type="email" class="form-control" id="email" required data-validation-required-message="Please enter your email address.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Message:</label>
<textarea rows="5" cols="100" class="form-control" id="message" required data-validation-required-message="Please enter your message" maxlength="999" style="resize:none"></textarea>
</div>
</div>
<div id="success"></div>
<!-- For success/fail messages -->
<button type="submit" class="btn btn-primary" id="sendMessageButton">Send Message</button>
</form>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!--footer starts from here-->
<footer class="footer">
<div class="container bottom_border">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Find us</h5>
<p><i class="fa fa-location-arrow"></i> Blk 645 Jalan Tenaga</p>
<p><i class="fa fa-phone"></i> +65 90064959</p>
<p><i class="fa fa fa-envelope"></i> Leongdingxuan@gmail.com </p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Follow us</h5>
<!--headin5_amrc ends here-->
<ul class="footer_ul2_amrc">
<li>
<a href="#"><i class="fab fa-facebook-f fleft padding-right"></i> </a>
<a href="#">https://www.facebook.com/</a></p>
</li>
<li>
<a href="#"><i class="fab fa-instagram fleft padding-right"></i> </a>
<a href="#">https://www.instagram.com/</a></p>
</li>
<li>
<a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a>
<a href="#">https://twitter.com/</a></p>
</li>
</ul>
<!--footer_ul2_amrc ends here-->
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class="col-lg-3 col-md-6 col-sm-6 ">
<h5 class="headin5_amrc col_white_amrc pt2">Recent posts</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>Singapore Government ...</p>
<span>29 Sep 2023</span>
</div>
</ul>
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>High risk of severe ...</p>
<span>22 Jun 2023</span>
</div>
</ul>
</div>
</div>
</div>
<div class="container text-center">
<br>
<p>All Rights Reserved. &copy; 2023 <a href="#">EcoSaver</a>
</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
</body>
</html>

224
consumerWebsite/public/contactform.html Normal file
View File

@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Fontawesome CSS -->
<link href="css/all.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/contact.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-light top-nav fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="logo" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactform.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.html">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signuplogin.html">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- full Title -->
<div class="full-title">
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">Contact
</h1>
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="breadcrumb-main">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item active">Contact</li>
</ol>
</div>
<!-- Content Row -->
<div class="row">
<!-- Map Column -->
<div class="col-lg-8 mb-4">
<!-- Embedded Google Map -->
<iframe width="100%" height="300px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;q=Singapore+408866&amp;t=m&amp;z=15&amp;output=embed"></iframe>
</div>
<!-- Contact Details Column -->
<div class="col-lg-4 mb-4 contact-right">
<h3>Contact Details</h3>
<p>
50 Ubi Ave 3
<br>S(408866)
<br>
</p>
<p>
<abbr title="Phone">P</abbr>: (+65) 90064959
</p>
<p>
<abbr title="Email">E</abbr>:
<a href="mailto:name@example.com">leongdingxuan@gmail.com
</a>
</p>
<p>
<abbr title="Hours">H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM
</p>
</div>
</div>
<!-- /.row -->
<!-- Contact Form -->
<!-- In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
<div class="row">
<div class="col-lg-8 mb-4 contact-left">
<h3>Send us a Message</h3>
<form id="form">
<input type="hidden" name="access_key" value="">
<div class="mb-3">
<label for="name">Full Name</label>
<input type="text" name="name" id="name" required>
</div>
<div class="mb-3">
<label for="email">Email address</label>
<input type="email" name="email" id="email" required>
</div>
<div class="mb-3">
<label for="message">Message</label>
<textarea name="message" id="message" rows="3" required></textarea>
</div>
<button type="submit">Submit Form</button>
</form>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!--footer starts from here-->
<footer class="footer">
<div class="container bottom_border">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Find us</h5>
<p><i class="fa fa-location-arrow"></i> Blk 645 Jalan Tenaga</p>
<p><i class="fa fa-phone"></i> +65 90064959</p>
<p><i class="fa fa fa-envelope"></i> Leongdingxuan@gmail.com </p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Follow us</h5>
<!--headin5_amrc ends here-->
<ul class="footer_ul2_amrc">
<li>
<a href="#"><i class="fab fa-facebook-f fleft padding-right"></i> </a>
<a href="#">https://www.facebook.com/</a></p>
</li>
<li>
<a href="#"><i class="fab fa-instagram fleft padding-right"></i> </a>
<a href="#">https://www.instagram.com/</a></p>
</li>
<li>
<a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a>
<a href="#">https://twitter.com/</a></p>
</li>
</ul>
<!--footer_ul2_amrc ends here-->
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class="col-lg-3 col-md-6 col-sm-6 ">
<h5 class="headin5_amrc col_white_amrc pt2">Recent posts</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>Singapore's air quality ...</p>
<span>7 oct 2023</span>
</div>
</ul>
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>Singapore Government ...</p>
<span>29 Sep 2023</span>
</div>
</ul>
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>High risk of severe ...</p>
<span>22 Jun 2023</span>
</div>
</ul>
</div>
</div>
</div>
<div class="container text-center">
<br>
<p>All Rights Reserved. &copy; 2023 <a href="#">EcoSaver</a>
</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact.js"></script>
</body>
</html>

34
consumerWebsite/public/css/contact.css Normal file
View File

@ -0,0 +1,34 @@
.contact-left {
width: 100%; /* Make the form take the whole width */
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input,
textarea,
button {
width: 100%;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
button {
background-color: #007bff;
color: #fff;
cursor: pointer;
max-width: 150px;
margin-left: auto;
}
button:hover {
background-color: #0056b3;
}

83
consumerWebsite/public/css/forgot.css Normal file
View File

@ -0,0 +1,83 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins",
sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f0faff;
}
.wrapper {
position: relative;
max-width: 470px;
width: 100%;
border-radius: 12px;
padding: 20px 30px 120px;
background: #fff;
box-shadow: 0 5px 10px rgba(0,
0,
0,
0.1);
overflow: hidden;
}
.form header {
font-size: 30px;
text-align: center;
color: #333;
font-weight: 600;
cursor: pointer;
}
.wrapper.active .form.login header {
opacity: 1;
}
.wrapper.active .signup header {
opacity: 0.6;
}
.wrapper form {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
}
form a {
color: #333;
text-decoration: none;
}
form input {
height: 60px;
outline: none;
border: none;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #333;
border-radius: 8px;
background: #fff;
border: 1px solid #aaa;
}
form input[type="submit"] {
margin-top: 15px;
padding: none;
font-size: 18px;
font-weight: 500;
cursor: pointer;
background: #4070f4;
color: #fff;
}

6
consumerWebsite/public/css/learnmore.css Normal file
View File

@ -0,0 +1,6 @@
img {
display: block;
margin: auto;
max-width: 100%;
max-height: 100vh;
}

80
consumerWebsite/public/css/reset.css Normal file
View File

@ -0,0 +1,80 @@
@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
background-color: #f9f9f9;
color: #000000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
table {
border-collapse: collapse;
margin: 0 auto;
width: 600px;
}
td {
padding: 15px;
}
.main-header {
background-color: #4070f4;
}
.main-header img {
width: 10%;
vertical-align: middle; /* Center the image vertically */
}
.main-header h1 {
color: #ffffff;
font-size: 28px;
text-align: center;
}
.content-section {
background-color: #ffffff;
padding: 40px;
}
.content-section h2 {
font-size: 18px;
line-height: 25.2px;
color: #666666;
}
.footer {
background-color: #1c103b;
text-align: center;
}
.footer p {
font-size: 14px;
color: #ffffff;
}
.wrapper {
position: relative;
max-width: 470px;
width: 100%;
border-radius: 12px;
padding: 20px
30px
120px;
background: #4070f4;
box-shadow: 0
5px
10px
rgba(
0,
0,
0,
0.1
);
overflow: hidden;
}

204
consumerWebsite/public/css/sp.css Normal file
View File

@ -0,0 +1,204 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins",
sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f0faff;
}
.wrapper {
position: relative;
max-width: 470px;
width: 100%;
border-radius: 12px;
padding: 20px
30px
120px;
background: #4070f4;
box-shadow: 0
5px
10px
rgba(
0,
0,
0,
0.1
);
overflow: hidden;
}
.form.login {
position: absolute;
left: 50%;
bottom: -86%;
transform: translateX(
-50%
);
width: calc(
100% +
220px
);
padding: 20px
140px;
border-radius: 50%;
height: 100%;
background: #fff;
transition: all
0.6s
ease;
}
.wrapper.active
.form.login {
bottom: -12%;
border-radius: 35%;
box-shadow: 0 -5px
10px rgba(0, 0, 0, 0.1);
}
.form
header {
font-size: 30px;
text-align: center;
color: #fff;
font-weight: 600;
cursor: pointer;
}
.form.login
header {
color: #333;
opacity: 0.6;
}
.wrapper.active
.form.login
header {
opacity: 1;
}
.wrapper.active
.signup
header {
opacity: 0.6;
}
.wrapper
form {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
}
form
input {
height: 60px;
outline: none;
border: none;
padding: 0
15px;
font-size: 16px;
font-weight: 400;
color: #333;
border-radius: 8px;
background: #fff;
}
.form.login
input {
border: 1px
solid
#aaa;
}
.form.login
input:focus {
box-shadow: 0
1px 0
#ddd;
}
form
.checkbox {
display: flex;
align-items: center;
gap: 10px;
}
.checkbox
input[type="checkbox"] {
height: 16px;
width: 16px;
accent-color: #fff;
cursor: pointer;
}
form
.checkbox
label {
cursor: pointer;
color: #fff;
}
form a {
color: #333;
text-decoration: none;
}
form
a:hover {
text-decoration: underline;
}
form
input[type="submit"] {
margin-top: 15px;
padding: none;
font-size: 18px;
font-weight: 500;
cursor: pointer;
}
.form.login
input[type="submit"] {
background: #4070f4;
color: #fff;
border: none;
}
.form.login .forgot-password-section {
display: none;
margin-top: 20px;
}
.form.login .forgot-password-section p {
color: #333;
font-size: 16px;
margin-bottom: 10px;
}
.form.login .forgot-password-section input[type="text"],
.form.login .forgot-password-section input[type="submit"] {
width: 100%;
height: 50px;
outline: none;
border: 1px solid #aaa;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #333;
border-radius: 8px;
margin-bottom: 15px;
}
.form.login .forgot-password-section input[type="submit"] {
background: #4070f4;
color: #fff;
border: none;
cursor: pointer;
}
.form.login .back-to-login {
display: block;
color: #4070f4;
text-decoration: none;
font-size: 14px;
cursor: pointer;
}
.form.login .back-to-login:hover {
text-decoration: underline;
}

1
consumerWebsite/public/css/style.css
View File

@ -577,7 +577,6 @@ footer p {
text-align: center; text-align: center;
} }
.pricing-box{ .pricing-box{
padding: 30px 0px; padding: 30px 0px;
} }

0
Vivian/eco saver.mwb → consumerWebsite/public/eco saver.mwb
View File

27
consumerWebsite/public/forgotpassword.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/forgot.css" />
</head>
<body>
<section class="wrapper">
<div class="form">
<header>Reset Password</header>
<form action="resetpassword.html">
<input type="text" id="email" placeholder="Email" required />
<input type="password" id="password" placeholder="Password" required />
<input type="password" id="confirmPassword" placeholder="Confirm Password" required />
<input type="submit" onclick="validateReset()" value="Reset Password" />
</form>
<br>
<a>Dont have an account?</a> <a href="signuplogin.html">Sign Up</a>
</div>
</section>
</body>
</html>

BIN
consumerWebsite/public/images/blog-img-01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
consumerWebsite/public/images/blog-img-02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

BIN
consumerWebsite/public/images/blog-img-03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 88 KiB

BIN
consumerWebsite/public/images/blog-img-04.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB

BIN
consumerWebsite/public/images/blog-item-01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 148 KiB

BIN
consumerWebsite/public/images/logo_01.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
consumerWebsite/public/images/logo_02.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
consumerWebsite/public/images/logo_03.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
consumerWebsite/public/images/logo_04.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 KiB

BIN
consumerWebsite/public/images/logo_05.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
consumerWebsite/public/images/logo_06.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
consumerWebsite/public/images/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 KiB

BIN
consumerWebsite/public/images/passwordreset.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
consumerWebsite/public/images/portfolio-big-01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
consumerWebsite/public/images/portfolio-big-02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
consumerWebsite/public/images/portfolio-big-03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
consumerWebsite/public/images/portfolio-big-04.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

BIN
consumerWebsite/public/images/portfolio-big-05.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
consumerWebsite/public/images/portfolio-big-Item.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 72 KiB

BIN
consumerWebsite/public/images/portfolio-img-01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
consumerWebsite/public/images/portfolio-img-02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
consumerWebsite/public/images/portfolio-img-03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 71 KiB

BIN
consumerWebsite/public/images/portfolio-img-04.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
consumerWebsite/public/images/portfolio-img-05.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
consumerWebsite/public/images/post-img-02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
consumerWebsite/public/images/post-img-03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
consumerWebsite/public/images/services-big.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 130 KiB

BIN
consumerWebsite/public/images/services-img-01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
consumerWebsite/public/images/services-img-02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
consumerWebsite/public/images/services-img-03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
consumerWebsite/public/images/team_01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

BIN
consumerWebsite/public/images/team_02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 55 KiB

BIN
consumerWebsite/public/images/team_03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
consumerWebsite/public/images/testi_01.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
consumerWebsite/public/images/testi_02.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
consumerWebsite/public/images/testi_03.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

18
consumerWebsite/public/index.html
View File

@ -36,16 +36,20 @@
<a class="nav-link" href="news.html">News</a> <a class="nav-link" href="news.html">News</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a> <a class="nav-link" href="contactform.html">Contact</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<!--<img src="images/profile-logo.png" alt="Profile Logo" class="profile-logo"> --> <!--<img src="images/profile-logo.png" alt="Profile Logo" class="profile-logo"> -->
<a class="nav-link" href="profile.html">Profile</a> <a class="nav-link" href="profile.html">Profile</a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="signuplogin.html">Logout</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
<header class="slider-main"> <header class="slider-main">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
@ -98,10 +102,10 @@
<div class="card"> <div class="card">
<h4 class="card-header">Humidity</h4> <h4 class="card-header">Humidity</h4>
<div class="card-body text-center"> <div class="card-body text-center">
<p class="card-text display-3"> 75% </p> <p class="card-text display-4"> 70% - 75% </p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a> <a href="learnmore.html" class="btn btn-primary">Learn More</a>
</div> </div>
</div> </div>
</div> </div>
@ -109,10 +113,10 @@
<div class="card"> <div class="card">
<h4 class="card-header">Air Quality Index</h4> <h4 class="card-header">Air Quality Index</h4>
<div class="card-body text-center"> <div class="card-body text-center">
<p class="card-text display-3"> 18 PSI </p> <p class="card-text display-4"> 15 - 18 PSI </p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a> <a href="learnmore.html" class="btn btn-primary">Learn More</a>
</div> </div>
</div> </div>
</div> </div>
@ -120,10 +124,10 @@
<div class="card"> <div class="card">
<h4 class="card-header">Temperature</h4> <h4 class="card-header">Temperature</h4>
<div class="card-body text-center"> <div class="card-body text-center">
<p class="card-text display-3"> 30&deg; </p> <p class="card-text display-4"> 30&deg; - 37&deg; </p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a> <a href="learnmore.html" class="btn btn-primary">Learn More</a>
</div> </div>
</div> </div>
</div> </div>

42
consumerWebsite/public/js/contact.js Normal file
View File

@ -0,0 +1,42 @@
const newAccessKey = '7f7ce777-6a56-4e5e-bfac-3b83c6453e65';
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('form');
// Set the new value for the access_key input field
form.querySelector('input[name="access_key"]').value = newAccessKey;
form.addEventListener('submit', async (event) => {
event.preventDefault(); // Prevent default form submission
// Create a FormData object to include the key
const formData = new FormData(form);
// Submit the form using fetch API
try {
const response = await fetch('https://api.web3forms.com/submit', {
method: 'POST',
body: formData
});
const result = await response.json();
// Handle the API response
//console.log(result);
if (result.success) {
// Form submitted successfully, display notification
alert('Form submitted successfully!');
location.reload()
// You can replace the alert with your custom notification logic
} else {
// Form submission failed, display error notification
alert('Form submission failed. Please try again.');
// You can replace the alert with your custom error notification logic
}
} catch (error) {
//console.error('Error:', error);
}
});
});

75
consumerWebsite/public/js/contact_me.js
View File

@ -1,75 +0,0 @@
$(function() {
$("#contactForm input,#contactForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$this = $("#sendMessageButton");
$this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
$.ajax({
url: "././mail/contact_me.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
message: message
},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
.append("</button>");
$('#success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
complete: function() {
setTimeout(function() {
$this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
}, 1000);
}
});
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});

7
consumerWebsite/Vivian/login.js → consumerWebsite/public/js/login.js
View File

@ -1,14 +1,13 @@
function validateForm() { function validateFormLogin() {
var username = document.getElementById('email').value; var email = document.getElementById('email').value;
var password = document.getElementById('password').value; var password = document.getElementById('password').value;
// Perform basic validation // Perform basic validation
if (!email || !password) { if (!email || !password) {
alert('Please enter both email and password'); alert('Please enter both email and password');
return; return;
} }
// If validation passes, send data to the server
sendDataToServer(email, password); sendDataToServer(email, password);
} }

0
consumerWebsite/public/js/resetpassword.js Normal file
View File

0
Vivian/server.js → consumerWebsite/public/js/server.js
View File

53
consumerWebsite/public/js/signup.js Normal file
View File

@ -0,0 +1,53 @@
function validateFormSignup() {
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
if (!/^[a-zA-Z0-9]+$/.test(username)) {
alert("Username can only contain letters and numbers.");
return false;
}
if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
alert("Enter a valid email address.");
return false;
}
if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(password)) {
alert("Password must be more than 8 characters and contain at least 1 upper and lower case letter and 1 special character.");
return false;
}
if (password !== confirmPassword) {
alert('Passwords do not match');
return;
}
if (!signupCheck.checked) {
alert("Please accept the terms & conditions to proceed.");
return false;
}
// If validation passes, send data to the server
sendDataToServer(username, email, password);
}
function sendDataToServer(username, password) {
// Use AJAX or fetch to send data to the server
// Example using fetch:
fetch('/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, email, password }),
})
.then(response => response.json())
.then(data => {
// Handle the response from the server
console.log(data);
})
.catch(error => console.error('Error:', error));
}

153
consumerWebsite/public/learnmore.html Normal file
View File

@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>EcoSaver</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Fontawesome CSS -->
<link href="css/all.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/learnmore.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-light top-nav fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="logo" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactform.html">Contact</a>
</li>
<li class="nav-item">
<!--<img src="images/profile-logo.png" alt="Profile Logo" class="profile-logo"> -->
<a class="nav-link" href="profile.html">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signuplogin.html">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<br>
<div class="map">
<img src="images/map.png" alt="Map Image">
</div>
<br>
<br>
<!--footer starts from here-->
<footer class="footer">
<div class="container bottom_border">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Find us</h5>
<!--headin5_amrc-->
<p><i class="fa fa-location-arrow"></i> Blk 645 Jalan Tenaga</p>
<p><i class="fa fa-phone"></i> +65 90064959</p>
<p><i class="fa fa fa-envelope"></i> Leongdingxuan@gmail.com </p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Follow us</h5>
<!--headin5_amrc ends here-->
<ul class="footer_ul2_amrc">
<li>
<a href="#"><i class="fab fa-facebook-f fleft padding-right"></i> </a>
<a href="#">https://www.facebook.com/</a></p>
</li>
<li>
<a href="#"><i class="fab fa-instagram fleft padding-right"></i> </a>
<a href="#">https://www.instagram.com/</a></p>
</li>
<li>
<a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a>
<a href="#">https://twitter.com/</a></p>
</li>
</ul>
<!--footer_ul2_amrc ends here-->
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class="col-lg-3 col-md-6 col-sm-6 ">
<h5 class="headin5_amrc col_white_amrc pt2">News</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>Singapore's air quality ...</p>
<span>7 oct 2023</span>
</div>
</ul>
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>Singapore Government ...</p>
<span>29 Sep 2023</span>
</div>
</ul>
<ul class="footer_ul_amrc">
<li class="media">
<div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>High risk of severe ...</p>
<span>22 Jun 2023</span>
</div>
</ul>
</div>
</div>
</div>
<div class="container text-center">
<br>
<p>All Rights Reserved. &copy; 2023 <a href="#">EcoSaver</a>
</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

26
consumerWebsite/public/mail/contact_me.php
View File

@ -1,26 +0,0 @@
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['phone']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));
// Create the email and send the message
$to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>

66
consumerWebsite/public/news.html
View File

@ -36,11 +36,14 @@
<a class="nav-link" href="news.html">News</a> <a class="nav-link" href="news.html">News</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a> <a class="nav-link" href="contactform.html">Contact</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="profile.html">Profile</a> <a class="nav-link" href="profile.html">Profile</a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="signuplogin.html">Logout</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -74,9 +77,12 @@
<div class="card mb-4"> <div class="card mb-4">
<img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog" /> <img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog" />
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Singapore's air quality hits unhealthy range, 'slightly hazy' conditions forecast for Saturday</h2> <h2 class="card-title">Singapore's air quality hits unhealthy range, 'slightly hazy' conditions
<p class="card-text">he National Environment Agency said there has been a "significant increase" in the number of hotspots in Sumatra.</p> forecast for Saturday</h2>
<a href="https://www.channelnewsasia.com/singapore/haze-psi-unhealthy-range-daily-advisory-pm-2-5-indonesia-hotspot-fires-nea-3827106" class="btn btn-primary">Read More &rarr;</a> <p class="card-text">he National Environment Agency said there has been a "significant increase"
in the number of hotspots in Sumatra.</p>
<a href="https://www.channelnewsasia.com/singapore/haze-psi-unhealthy-range-daily-advisory-pm-2-5-indonesia-hotspot-fires-nea-3827106"
class="btn btn-primary">Read More &rarr;</a>
</div> </div>
<div class="card-footer text-muted"> <div class="card-footer text-muted">
Posted on October 6, 2023 by Posted on October 6, 2023 by
@ -88,8 +94,13 @@
<img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog"> <img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog">
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Singapore Government Agencies Stand Ready To Mitigate Impact Of Haze</h2> <h2 class="card-title">Singapore Government Agencies Stand Ready To Mitigate Impact Of Haze</h2>
<p class="card-text">As of 29 September 2023, 3pm, the 24-hr Pollutant Standards Index (PSI) is 81 (Moderate range) in the East region of Singapore. Accordingly, the 28 public agencies that make up the Government’s Haze Task Force (HTF), are ready to roll out their respective haze action plans should the air quality deteriorate into the Unhealthy range (24-hour PSI above 100). </p> <p class="card-text">As of 29 September 2023, 3pm, the 24-hr Pollutant Standards Index (PSI) is
<a href="https://www.nea.gov.sg/media/news/news/index/singapore-government-agencies-stand-ready-to-mitigate-impact-of-haze" class="btn btn-primary">Read More &rarr;</a> 81 (Moderate range) in the East region of Singapore. Accordingly, the 28 public agencies
that make up the Government’s Haze Task Force (HTF), are ready to roll out their respective
haze action plans should the air quality deteriorate into the Unhealthy range (24-hour PSI
above 100). </p>
<a href="https://www.nea.gov.sg/media/news/news/index/singapore-government-agencies-stand-ready-to-mitigate-impact-of-haze"
class="btn btn-primary">Read More &rarr;</a>
</div> </div>
<div class="card-footer text-muted"> <div class="card-footer text-muted">
Posted on September 29, 2023 by Posted on September 29, 2023 by
@ -100,9 +111,12 @@
<div class="card mb-4"> <div class="card mb-4">
<img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog"> <img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog">
<div class="card-body"> <div class="card-body">
<h2 class="card-title">High risk of severe transboundary haze in 2023, public advised to be prepared: Singapore institute</h2> <h2 class="card-title">High risk of severe transboundary haze in 2023, public advised to be
<p class="card-text">A latest report predicts a high risk of severe haze occurring in Southeast Asia, though not as severe as in 2015</p> prepared: Singapore institute</h2>
<a href="https://www.channelnewsasia.com/singapore/high-risk-severe-transboundary-haze-2023-public-advised-be-prepared-singapore-institute-3579081" class="btn btn-primary">Read More &rarr;</a> <p class="card-text">A latest report predicts a high risk of severe haze occurring in Southeast
Asia, though not as severe as in 2015</p>
<a href="https://www.channelnewsasia.com/singapore/high-risk-severe-transboundary-haze-2023-public-advised-be-prepared-singapore-institute-3579081"
class="btn btn-primary">Read More &rarr;</a>
</div> </div>
<div class="card-footer text-muted"> <div class="card-footer text-muted">
Posted on June 22, 2023 by Posted on June 22, 2023 by
@ -197,24 +211,24 @@
</ul> </ul>
<ul class="footer_ul_amrc"> <ul class="footer_ul_amrc">
<li class="media"> <li class="media">
<div class="media-left"> <div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" /> <img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div> </div>
<div class="media-body"> <div class="media-body">
<p>Singapore Government ...</p> <p>Singapore Government ...</p>
<span>29 Sep 2023</span> <span>29 Sep 2023</span>
</div> </div>
</ul> </ul>
<ul class="footer_ul_amrc"> <ul class="footer_ul_amrc">
<li class="media"> <li class="media">
<div class="media-left"> <div class="media-left">
<img class="img-fluid" src="images/post-img-01.jpg" alt="" /> <img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div> </div>
<div class="media-body"> <div class="media-body">
<p>High risk of severe ...</p> <p>High risk of severe ...</p>
<span>22 Jun 2023</span> <span>22 Jun 2023</span>
</div> </div>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>

0
Vivian/index.php → consumerWebsite/public/php/index.php
View File

8
consumerWebsite/public/profile.html
View File

@ -36,11 +36,14 @@
<a class="nav-link" href="news.html">News</a> <a class="nav-link" href="news.html">News</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a> <a class="nav-link" href="contactform.html">Contact</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="profile.html">Profile</a> <a class="nav-link" href="profile.html">Profile</a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="signuplogin.html">Logout</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -89,7 +92,8 @@
class="form-control" placeholder="re enter password" value=""></div> class="form-control" placeholder="re enter password" value=""></div>
</div> </div>
<div class="mt-2 text-center"> <div class="mt-2 text-center">
<button class="btn btn-sm btn-secondary change-password-button" type="button">Change Password</button> <button class="btn btn-sm btn-secondary change-password-button" type="button">Change
Password</button>
</div> </div>
<div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Save <div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Save
Profile</button></div> Profile</button></div>

39
consumerWebsite/public/resetpassword.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Your password has been resetted</title>
<link href="css/reset.css" rel="stylesheet">
</head>
<body>
<table class="main-header">
<tr>
<td style="text-align: center;">
<img src="images/passwordreset.png" alt="Image">
<h1>Your password has been resetted</h1>
</td>
</tr>
</table>
<table class="content-section">
<tr>
<td>
<p>Hello,</p>
<p>Please check your email to reset your password.</p>
</td>
</tr>
</table>
<table class="footer">
<tr>
<td>
<p>&copy; 2023 EcoSaver</p>
</td>
</tr>
</table>
</body>
</html>

56
consumerWebsite/public/signuplogin.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login & Signup Form</title>
<link rel="stylesheet" href="css/sp.css" />
</head>
<body>
<section class="wrapper">
<div class="form signup">
<header>Signup</header>
<form action="user.js" method="get">
<input type="text" id="username" placeholder="Username" required />
<input type="text" id="email" placeholder="Email" required />
<input type="password" id="password" placeholder="Password" required />
<input type="password" id="confirmPassword" placeholder="Confirm Password" required />
<div class="checkbox">
<input type="checkbox" id="signupCheck" />
<label for="signupCheck">I accept all terms & conditions</label>
</div>
<input type="submit" onclick="validateFormSignup()" value="Signup" />
</form>
</div>
<div class="form login">
<header>Login</header>
<form action="#">
<input type="text" id="email" placeholder="Email address" required />
<input type="password" id="password" placeholder="Password" required />
<a href="forgotpassword.html">Forgot password?</a>
<input type="submit" onclick="validateFormLogin()" value="Login" />
</form>
</div>
<script>
const wrapper = document.querySelector(".wrapper"),
signupHeader = document.querySelector(".signup header"),
loginHeader = document.querySelector(".login header");
loginHeader.addEventListener("click", () => {
wrapper.classList.add("active");
});
signupHeader.addEventListener("click", () => {
wrapper.classList.remove("active");
});
</script>
</section>
<script src="js/signup.js"></script>
<script src="js/login.js"></script>
</body>
</html>