custom1/sign_up.html

199 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</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">Radiance Jewels</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_catalog.html">Product Catalog</a></li><li><a href="shopping_cart.html">Shopping Cart</a></li><li><a href="checkout.html">Checkout</a></li><li><a href="login.html">Login</a></li><li><a href="dashboard.html">Dashboard</a></li><li><a href="order_history.html">Order History</a></li><li><a href="user_profile.html">User Profile</a></li><li><a href="sign_up.html">Sign Up</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<section id="registration-form" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Register Your Account</h2>
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<form action="#" method="POST" class="p-4 border rounded shadow-sm">
<div class="form-group mb-3">
<label for="reg-fullname" class="form-label">Full Name</label>
<input type="text" id="reg-fullname" name="fullname" class="form-control" placeholder="Enter your full name" required="" aria-label="Full Name">
</div>
<div class="form-group mb-3">
<label for="reg-email" class="form-label">Email Address</label>
<input type="email" id="reg-email" name="email" class="form-control" placeholder="your@example.com" required="" aria-label="Email Address">
</div>
<div class="form-group mb-3">
<label for="reg-password" class="form-label">Password</label>
<input type="password" id="reg-password" name="password" class="form-control" placeholder="Minimum 8 characters" required="" aria-label="Password">
</div>
<div class="form-group mb-4">
<label for="reg-confirm-password" class="form-label">Confirm Password</label>
<input type="password" id="reg-confirm-password" name="confirm_password" class="form-control" placeholder="Re-enter your password" required="" aria-label="Confirm Password">
</div>
<button type="submit" class="btn btn-primary w-100">Register</button>
<p class="text-center mt-3 mb-0">
Already have an account? <a href="/login.html" class="text-decoration-none">Log In</a>
</p>
</form>
</div>
</div>
</div>
</section>
<section class="password-policy-guidelines">
<div class="container">
<h2>Password Policy Guidelines</h2>
<p class="intro-text">
To ensure the highest level of security for your account and personal data, please adhere to our strict password policy. Following these guidelines helps protect your information from unauthorized access.
</p>
<div class="policy-section">
<h3>Minimum Requirements</h3>
<ul>
<li>Must be at least 12 characters long.</li>
<li>Must include a combination of uppercase letters (A-Z), lowercase letters (a-z), numbers (0-9), and special characters (e.g., !, @, #, $, %, ^, &amp;, *).</li>
<li>Cannot contain more than two consecutive identical characters.</li>
</ul>
</div>
<div class="policy-section">
<h3>Password Complexity &amp; Strength</h3>
<ul>
<li>Avoid using easily guessable information such as your name, birthdate, common words, or simple sequences (e.g., "123456", "password").</li>
<li>Ensure your password is unique and not reused from other websites or services.</li>
<li>Consider using a passphrase (a sequence of random words) for greater strength and memorability.</li>
</ul>
</div>
<div class="policy-section">
<h3>Prohibited Passwords</h3>
<ul>
<li>Passwords found in common breach lists.</li>
<li>Passwords that are too similar to your username or email address.</li>
<li>Common dictionary words or simple substitutions (e.g., "p@ssword").</li>
</ul>
</div>
<div class="policy-section">
<h3>Account Security &amp; Management</h3>
<ul>
<li>We recommend using a reputable password manager to generate and store strong, unique passwords.</li>
<li>Do not share your password with anyone, including our support staff.</li>
<li>Regularly update your password, ideally every 90 days.</li>
<li>After several failed login attempts, your account may be temporarily locked for security. Follow the "Forgot Password" link to regain access.</li>
</ul>
</div>
<p class="security-note">
Your security is our top priority. Adhering to these guidelines significantly enhances the protection of your account.
</p>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terms &amp; Privacy Checkbox</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<section class="terms-privacy-section" aria-labelledby="terms-privacy-heading">
<h2 id="terms-privacy-heading" class="terms-privacy-section__heading">Your Consent Matters</h2>
<div class="terms-privacy-section__content">
<div class="checkbox-group">
<input type="checkbox" id="terms-checkbox" name="terms_agreement" required="">
<label for="terms-checkbox">
I agree to the <a href="/terms-of-service" target="_blank" rel="noopener noreferrer">Terms of Service</a>
</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="privacy-checkbox" name="privacy_agreement" required="">
<label for="privacy-checkbox">
I have read and understood the <a href="/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="newsletter-checkbox" name="newsletter_consent">
<label for="newsletter-checkbox">
Subscribe me to exclusive offers and updates (optional)
</label>
</div>
</div>
<p class="terms-privacy-section__note">
By proceeding, you acknowledge and accept our policies.
</p>
<button type="submit" class="terms-privacy-section__button">
Confirm &amp; Continue
</button>
</section>
<section class="signup-call-to-action">
<div class="container signup-content-wrapper">
<h2 class="signup-title">Join Our Exquisite World</h2>
<p class="signup-description">
Sign up to unlock exclusive collections, personalized recommendations, and a seamless shopping experience.
</p>
<div class="signup-button-wrapper">
<a href="#" class="btn btn-primary signup-btn">Sign Up Now</a>
</div>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Existing User Prompt</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<section class="existing-user-prompt">
<h2 id="promptHeading">Welcome Back!</h2>
<p id="promptMessage">It looks like you already have an account with us. Please log in to continue your secure shopping experience.</p>
<div class="prompt-actions">
<a href="/login" class="btn btn-primary" aria-labelledby="promptHeading promptMessage">Log In to Your Account</a>
<a href="/register?new_user=true" class="btn btn-secondary" aria-labelledby="promptHeading promptMessage">Not You? Create a New Account</a>
</div>
</section>
<section class="social-signup-section">
<div class="social-signup-container">
<h2 class="social-signup-heading">Sign Up Quickly</h2>
<p class="social-signup-intro">Or continue with:</p>
<div class="social-buttons-wrapper">
<a href="#" class="social-button social-button-google" aria-label="Sign up with Google">
<span class="social-icon google-icon"></span>
<span class="button-text">Sign up with Google</span>
</a>
<a href="#" class="social-button social-button-facebook" aria-label="Sign up with Facebook">
<span class="social-icon facebook-icon"></span>
<span class="button-text">Sign up with Facebook</span>
</a>
<a href="#" class="social-button social-button-apple" aria-label="Sign up with Apple">
<span class="social-icon apple-icon"></span>
<span class="button-text">Sign up with Apple</span>
</a>
</div>
<div class="signup-terms">
<p>By signing up, you agree to our <a href="#" class="terms-link">Terms of Service</a> and <a href="#" class="privacy-link">Privacy Policy</a>.</p>
</div>
</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">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"><button class="footer-1-subscribe-btn">Shine With Us</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="rings.html">Rings</a></li><li><a href="necklaces.html">Necklaces</a></li><li><a href="bangles.html">Bangles</a></li><li><a href="earrings.html">Earrings</a></li><li><a href="new_arrivals.html">New Arrivals</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="about_us.html">About Us</a></li><li><a href="contact_us.html">Contact Us</a></li><li><a href="faq.html">FAQ</a></li><li><a href="shipping_returns.html">Shipping &amp; Returns</a></li><li><a href="customer_dashboard.html">Customer Dashboard</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow 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</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>© 2025 Gleam Jewels. All rights reserved.</p><ul class="footer-1-links"><li><a href="product_detail.html">Product Detail</a></li><li><a href="order_confirmation.html">Order Confirmation</a></li><li><a href="admin_login.html">Admin Login</a></li><li><a href="admin_dashboard.html">Admin Dashboard</a></li><li><a href="admin_product_management.html">Admin Product Management</a></li><li><a href="admin_add_product.html">Admin Add Product</a></li><li><a href="admin_edit_product.html">Admin Edit Product</a></li><li><a href="admin_order_management.html">Admin Order Management</a></li><li><a href="admin_user_management.html">Admin User Management</a></li></ul></div></section></div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terms &amp; Privacy Checkbox</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Existing User Prompt</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html>