Merge pull request #29 from Newtbot/t

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

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>

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));
}

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>

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));
}

Binary file not shown.

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>

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>

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}`);
});

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>

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));
}

View File

@ -1,11 +1,11 @@
<!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 -->
@ -13,66 +13,41 @@
<!-- 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">
<!-- 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="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
</div>
</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>
</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="contact.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>
<!-- full Title -->
<div class="full-title">
@ -84,8 +59,8 @@
</div>
</div>
<!-- Page Content -->
<div class="container">
<!-- Page Content -->
<div class="container">
<div class="breadcrumb-main">
<ol class="breadcrumb">
<li class="breadcrumb-item">
@ -101,40 +76,39 @@
<img class="img-fluid" src="images/404.png" alt="" />
</div>
<p>We cant 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>
<!-- /.jumbotron -->
</div>
<!-- /.container -->
</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">
<!--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 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> 9878/25 sec 9 rohini 35 </p>
<p><i class="fa fa-phone"></i> +91-9999878398 </p>
<p><i class="fa fa fa-envelope"></i> info@example.com </p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col">
<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-twitter fleft padding-right"></i> </a>
<p>Lorem Ipsum is simply dummy printing...<a href="#">https://www.lipsum.com/</a></p>
<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>
<p>Lorem Ipsum is simply dummy printing...<a href="#">https://www.lipsum.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>
<a href="#">https://twitter.com/</a></p>
</li>
</ul>
<!--footer_ul2_amrc ends here-->
@ -143,17 +117,14 @@
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="#">Default Version</a></li>
<li><a href="#">Boxed Version</a></li>
<li><a href="#">Our Team </a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Get In Touch</a></li>
<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>
<h5 class="headin5_amrc col_white_amrc pt2">News</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li class="media">
@ -161,53 +132,43 @@
<img class="img-fluid" src="images/post-img-01.jpg" alt="" />
</div>
<div class="media-body">
<p>How to find best dog food?</p>
<span>22 Sep 2018</span>
<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>
</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>
<!--footer_ul_amrc ends here-->
</div>
</div>
</div>
<div class="container">
<div class="footer-logo">
<a href="#"><img src="images/footer-logo.png" alt="" /></a>
</div>
<!--foote_bottom_ul_amrc ends here-->
<p class="copyright text-center">All Rights Reserved. &copy; 2018 <a href="#">N & LW Lawn Care</a> Design By :
<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>
<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>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</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>

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>

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;
}

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;
}

View File

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

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;
}

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;
}

View File

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

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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 495 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

View File

@ -36,16 +36,20 @@
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
<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>
<header class="slider-main">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
@ -98,10 +102,10 @@
<div class="card">
<h4 class="card-header">Humidity</h4>
<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 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>
@ -109,10 +113,10 @@
<div class="card">
<h4 class="card-header">Air Quality Index</h4>
<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 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>
@ -120,10 +124,10 @@
<div class="card">
<h4 class="card-header">Temperature</h4>
<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 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>

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);
}
});
});

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('');
});

View File

@ -1,5 +1,5 @@
function validateForm() {
var username = document.getElementById('email').value;
function validateFormLogin() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Perform basic validation
@ -8,7 +8,6 @@ function validateForm() {
return;
}
// If validation passes, send data to the server
sendDataToServer(email, password);
}

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));
}

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>

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;
?>

View File

@ -36,11 +36,14 @@
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
<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>
@ -74,9 +77,12 @@
<div class="card mb-4">
<img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog" />
<div class="card-body">
<h2 class="card-title">Singapore's air quality hits unhealthy range, 'slightly hazy' conditions forecast for Saturday</h2>
<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>
<h2 class="card-title">Singapore's air quality hits unhealthy range, 'slightly hazy' conditions
forecast for Saturday</h2>
<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 class="card-footer text-muted">
Posted on October 6, 2023 by
@ -88,8 +94,13 @@
<img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog">
<div class="card-body">
<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 Governments 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>
<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 Governments 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 class="card-footer text-muted">
Posted on September 29, 2023 by
@ -100,9 +111,12 @@
<div class="card mb-4">
<img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog">
<div class="card-body">
<h2 class="card-title">High risk of severe transboundary haze in 2023, public advised to be prepared: Singapore institute</h2>
<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>
<h2 class="card-title">High risk of severe transboundary haze in 2023, public advised to be
prepared: Singapore institute</h2>
<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 class="card-footer text-muted">
Posted on June 22, 2023 by
@ -197,24 +211,24 @@
</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">
<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 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>

View File

@ -36,11 +36,14 @@
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
<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>
@ -89,7 +92,8 @@
class="form-control" placeholder="re enter password" value=""></div>
</div>
<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 class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Save
Profile</button></div>

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>

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>