134 lines
9.2 KiB
HTML
134 lines
9.2 KiB
HTML
SafeValue must use [property]=binding:
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Authentication</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login - EcoConnect</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="login-section" aria-labelledby="login-heading">
|
|
<h1 id="login-heading">Welcome Back!</h1>
|
|
<p>Log in to track your eco-friendly activities, earn badges, and see your collective impact.</p>
|
|
|
|
<form action="/login" method="POST">
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" placeholder="your.email@example.com" required="" autocomplete="email">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" placeholder="Enter your password" required="" autocomplete="current-password">
|
|
</div>
|
|
|
|
<div class="form-options">
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="remember-me" name="remember-me">
|
|
<label for="remember-me">Remember me</label>
|
|
</div>
|
|
<a href="/forgot-password">Forgot password?</a>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary">Log In</button>
|
|
</form>
|
|
|
|
<p class="register-link">Don't have an account yet? <a href="/register">Sign Up</a></p>
|
|
</section>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sign Up - EcoTracker</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section id="signup" class="signup-container">
|
|
<h2>Join EcoTracker Today!</h2>
|
|
<p>Start logging your eco-friendly activities, earn badges, and contribute to a greener planet. Whether you're an individual or a company, every action counts!</p>
|
|
|
|
<form class="signup-form" aria-labelledby="signup-heading">
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" placeholder="Choose a unique username" required="">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" placeholder="your.email@example.com" required="">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" placeholder="Min. 8 characters" required="">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="confirm-password">Confirm Password</label>
|
|
<input type="password" id="confirm-password" name="confirm_password" placeholder="Re-enter your password" required="">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="account-type">Account Type</label>
|
|
<select id="account-type" name="account_type">
|
|
<option value="individual">Individual Eco-Warrior</option>
|
|
<option value="company">Company / Organization</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="text-align: center;">
|
|
<input type="checkbox" id="terms-agree" name="terms_agree" required="">
|
|
<label for="terms-agree" class="checkbox-label">I agree to the <a href="#terms">Terms of Service</a> and <a href="#privacy">Privacy Policy</a></label>
|
|
</div>
|
|
|
|
<button type="submit">Create My Account</button>
|
|
</form>
|
|
|
|
<p class="login-link">
|
|
Already have an account? <a href="#login">Log In Here</a>
|
|
</p>
|
|
</section>
|
|
<div class="app-form"><h1>Enroll to Make a Difference</h1><h2>Your Profile for Impact</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></div></div><div class="form-group full-width"><label>Email Address</label><input id="email" type="email" placeholder="Your email for eco-updates"></div><h2>Connect With Us</h2><div class="form-group full-width"><label>Phone Number</label><input id="phone" type="tel" placeholder="Your contact number"></div><h2>Tell Us About Your Green Journey</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share your passion for environmental action and how you envision contributing to our vibrant eco-community!"></textarea></div><button type="submit">Start Your Green Impact!</button></div>
|
|
<section class="password-recovery-prompt">
|
|
<div class="container">
|
|
<header class="prompt-header">
|
|
<h1 class="prompt-title">Forgot Your Password?</h1>
|
|
<p class="prompt-description">
|
|
Enter the email address associated with your EcoTrack account and we'll send you a link to reset your password.
|
|
</p>
|
|
</header>
|
|
|
|
<form action="#" method="POST" class="recovery-form">
|
|
<div class="form-group">
|
|
<label for="recoveryEmail" class="sr-only">Email Address</label>
|
|
<input type="email" id="recoveryEmail" name="email" placeholder="Your registered email address" required="" autocomplete="email" class="form-input">
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="button button-primary">Send Reset Link</button>
|
|
</div>
|
|
</form>
|
|
|
|
<footer class="prompt-footer">
|
|
<p class="prompt-link-text">
|
|
<a href="#" class="link-secondary">Remembered your password? Log in here.</a>
|
|
</p>
|
|
<p class="prompt-link-text">
|
|
<a href="#" class="link-secondary">Need help? Contact support.</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">EcoTrack</h3><p class="footer-1-newsletter-text">Join our newsletter to get the latest updates on environmental initiatives and community achievements.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"><button class="footer-1-subscribe-btn">Stay Informed</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive impactful updates and eco-tips from our community.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Quick Links</h4><ul><li><a href="#">About EcoTrack</a></li><li><a href="#">How It Works</a></li><li><a href="#">Impact Map</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Community Forum</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="#">Help Center</a></li><li><a href="#">FAQs</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Partnerships</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 EcoTrack. All rights reserved. Empowering a greener future.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> (see https://g.co/ng/security#xss) |