custom1/admin_login.html

230 lines
14 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login - Jewelry Store</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<main class="admin-login-container" role="main">
<header>
<h1>Admin Login</h1>
<p>Access the secure administration panel to manage products, orders, and user accounts.</p>
</header>
<section class="admin-login-form" aria-labelledby="adminLoginFormHeading">
<h2 id="adminLoginFormHeading" class="visually-hidden">Admin Login Form</h2>
<form action="/admin/login" method="POST">
<div class="form-group">
<label for="admin-username">Username</label>
<input type="text" id="admin-username" name="username" placeholder="Enter your admin username" required="" autocomplete="username">
</div>
<div class="form-group">
<label for="admin-password">Password</label>
<input type="password" id="admin-password" name="password" placeholder="Enter your password" required="" autocomplete="current-password">
</div>
<div class="checkbox-group">
<input type="checkbox" id="remember-admin" name="remember_me">
<label for="remember-admin">Remember me</label>
</div>
<button type="submit">Log In</button>
</form>
<div class="message error" role="alert" aria-live="polite" style="display: none;">
Invalid username or password. Please try again.
</div>
<!-- Optional: Link for forgotten password, if applicable for admin -->
<!-- <a href="#" class="forgot-password-link">Forgot Password?</a> -->
</section>
</main>
<section class="security-warning-section">
<div class="container">
<div class="security-warning-content">
<div class="security-warning-icon" aria-hidden="true">
<!-- Placeholder for a security-related icon (e.g., shield, lock) -->
🔒 <!-- Unicode for a locked padlock -->
</div>
<h2 class="security-warning-header">Security Warning &amp; Account Protection</h2>
<p class="security-warning-message">
Your online safety is our highest priority. Please be vigilant and follow these essential guidelines to protect your account and personal information while using our website.
</p>
<div class="security-warning-tips">
<h3 class="security-warning-subheader">Key Security Practices:</h3>
<ul>
<li><strong>Use Strong Passwords:</strong> Create unique, complex passwords and avoid reusing them across different sites.</li>
<li><strong>Beware of Phishing:</strong> Always verify the sender of emails and never click suspicious links or attachments. We will never ask for your password via email or phone.</li>
<li><strong>Secure Connection:</strong> Ensure the website URL begins with "https://" and displays a padlock icon in your browser, confirming a secure connection.</li>
<li><strong>Log Out After Use:</strong> Always log out of your account, especially when using shared or public computers.</li>
<li><strong>Monitor Account Activity:</strong> Regularly review your order history and account details for any unauthorized transactions.</li>
</ul>
</div>
<div class="security-warning-action">
<p>For more comprehensive information on our security measures and how to stay safe online:</p>
<a href="#" class="security-warning-link">View Our Full Security Policy</a>
</div>
</div>
</div>
</section>
<section class="system-status-section">
<div class="container">
<h2 class="section-title">System Status</h2>
<p class="section-description">Real-time operational status of our core services.</p>
<div class="system-status-grid">
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">Database Connectivity</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">Payment Gateway</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-degraded">
<div class="status-indicator"></div>
<h3 class="status-name">Inventory Service</h3>
<span class="status-text">Degraded Performance</span>
</div>
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">Shipping API</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">User Authentication</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">Product Image CDN</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-offline">
<div class="status-indicator"></div>
<h3 class="status-name">Promotional Emails</h3>
<span class="status-text">Under Maintenance</span>
</div>
</div>
</div>
</section>
<section id="admin-support-contact">
<div class="container">
<h2>Admin Support &amp; Contact</h2>
<p>For assistance with your orders, account management, or any administrative inquiries, please use the contact methods below. Our team is dedicated to providing prompt and helpful support.</p>
<div class="contact-grid">
<div class="contact-option">
<h3>Email Support</h3>
<p>For general questions, order modifications, or technical issues, email us directly:</p>
<p><a href="mailto:admin@luxejewels.com">admin@luxejewels.com</a></p>
<p class="note">Expected response time: 1-2 business days.</p>
</div>
<div class="contact-option">
<h3>Phone Assistance</h3>
<p>For urgent matters or immediate support, please call us:</p>
<p><a href="tel:+18001234567">1-800-123-4567</a></p>
<p class="note">Available: Monday - Friday, 9 AM - 6 PM EST.</p>
</div>
<div class="contact-option">
<h3>Help Center &amp; FAQs</h3>
<p>Explore our comprehensive help center for quick answers to common questions:</p>
<p><a href="/help-center-link">Visit Our Help Center</a></p>
<p class="note">Includes troubleshooting guides and detailed information.</p>
</div>
</div>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MFA Setup - Jewelry Store</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<main class="mfa-container" aria-labelledby="mfa-heading">
<h1 id="mfa-heading">Enhance Your Account Security</h1>
<p>
For added protection, we recommend setting up Multi-Factor Authentication (MFA). Choose your preferred method below.
</p>
<form action="#" method="POST">
<fieldset class="mfa-options">
<legend class="visually-hidden">Choose your MFA method</legend>
<label for="mfa-app" class="mfa-option">
<input type="radio" id="mfa-app" name="mfa_method" value="authenticator_app" checked="">
<div class="mfa-option-content">
<h3>Authenticator App</h3>
<p>Use an app like Google Authenticator or Authy to generate codes.</p>
</div>
</label>
<label for="mfa-sms" class="mfa-option">
<input type="radio" id="mfa-sms" name="mfa_method" value="sms">
<div class="mfa-option-content">
<h3>SMS Verification</h3>
<p>Receive a verification code via text message to your registered phone number.</p>
</div>
</label>
<label for="mfa-security-key" class="mfa-option">
<input type="radio" id="mfa-security-key" name="mfa_method" value="security_key">
<div class="mfa-option-content">
<h3>Security Key (e.g., YubiKey)</h3>
<p>Use a physical security key for the strongest protection.</p>
</div>
</label>
</fieldset>
<div class="mfa-button-group">
<button type="submit" class="mfa-button">Set Up MFA</button>
<a href="/dashboard" class="mfa-link-alt">Skip for now</a>
</div>
</form>
</main>
<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>Admin Login - Jewelry Store</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<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>MFA Setup - Jewelry Store</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<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>