risadmin_prod/custom1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Automated commit to kiran_test from Docker container

Browse Source
This commit is contained in:
risadmin_prod 2025-07-01 07:13:15 +00:00
commit 77cd0412d2
12 changed files with 2946 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
Dockerfile

455
checkout.html Normal file
View File

@ -0,0 +1,455 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>checkout</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
<section class="checkout-progress" aria-label="Checkout Progress Indicator">
<h2 class="sr-only">Checkout Progress</h2>
<ol class="progress-steps">
<li class="progress-step completed">
<div class="step-marker">
<span class="step-number">1</span>
<span class="step-icon" aria-hidden="true">&#10003;</span>
</div>
<span class="step-name">Cart</span>
</li>
<li class="progress-step active">
<div class="step-marker">
<span class="step-number">2</span>
</div>
<span class="step-name">Shipping</span>
</li>
<li class="progress-step">
<div class="step-marker">
<span class="step-number">3</span>
</div>
<span class="step-name">Payment</span>
</li>
<li class="progress-step">
<div class="step-marker">
<span class="step-number">4</span>
</div>
<span class="step-name">Review &amp; Pay</span>
</li>
</ol>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipping Address Form</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="shipping-address-section" aria-labelledby="shipping-address-heading">
<h2 id="shipping-address-heading">Shipping Address</h2>
<form action="#" method="POST">
<div class="form-row">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" placeholder="John" required>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" placeholder="Doe" required>
</div>
</div>
<div class="form-group">
<label for="addressLine1">Address Line 1</label>
<input type="text" id="addressLine1" name="addressLine1" placeholder="123 Main St" required>
</div>
<div class="form-group">
<label for="addressLine2">Address Line 2 (Optional)</label>
<input type="text" id="addressLine2" name="addressLine2" placeholder="Apt, Suite, Bldg (optional)">
</div>
<div class="form-row">
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="Anytown" required>
</div>
<div class="form-group">
<label for="state">State / Province</label>
<select id="state" name="state" required>
<option value="">Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="TX">Texas</option>
<option value="NY">New York</option>
<!-- Add more states/provinces as needed -->
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="zipCode">Zip / Postal Code</label>
<input type="text" id="zipCode" name="zipCode" placeholder="12345" required>
</div>
<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">Select Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
<option value="IN">India</option>
<!-- Add more countries as needed -->
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phoneNumber">Phone Number</label>
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="+1 (555) 123-4567" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="john.doe@example.com" required>
</div>
</div>
<div class="button-group">
<button type="submit">Save Address</button>
</div>
</form>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Method</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="payment-section" aria-labelledby="payment-section-title">
<h2 id="payment-section-title">Choose Your Payment Method</h2>
<div class="payment-options">
<div class="payment-option-card" data-payment-method="card">
<input type="radio" id="pay-card" name="payment-method" value="card" checked aria-labelledby="label-pay-card">
<label for="pay-card" id="label-pay-card">
<strong>Credit or Debit Card</strong>
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=Visa" alt="Visa Logo" class="payment-logo">
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=MC" alt="MasterCard Logo" class="payment-logo">
</label>
</div>
<div class="payment-option-card" data-payment-method="paypal">
<input type="radio" id="pay-paypal" name="payment-method" value="paypal" aria-labelledby="label-pay-paypal">
<label for="pay-paypal" id="label-pay-paypal">
<strong>PayPal</strong>
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=PayPal" alt="PayPal Logo" class="payment-logo">
</label>
</div>
<div class="payment-option-card" data-payment-method="razorpay">
<input type="radio" id="pay-razorpay" name="payment-method" value="razorpay" aria-labelledby="label-pay-razorpay">
<label for="pay-razorpay" id="label-pay-razorpay">
<strong>Razorpay</strong>
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=Razorpay" alt="Razorpay Logo" class="payment-logo">
</label>
</div>
<div class="payment-option-card" data-payment-method="stripe">
<input type="radio" id="pay-stripe" name="payment-method" value="stripe" aria-labelledby="label-pay-stripe">
<label for="pay-stripe" id="label-pay-stripe">
<strong>Stripe</strong>
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=Stripe" alt="Stripe Logo" class="payment-logo">
</label>
</div>
</div>
<div id="payment-details-card" class="payment-details active">
<h3>Card Details</h3>
<form>
<div class="form-group">
<label for="card-number">Card Number</label>
<input type="text" id="card-number" name="cardNumber" placeholder="•••• •••• •••• ••••" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" required>
</div>
<div class="form-group">
<label for="card-name">Name on Card</label>
<input type="text" id="card-name" name="cardName" placeholder="John Doe" autocomplete="cc-name" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="expiry-date">Expiry Date</label>
<input type="text" id="expiry-date" name="expiryDate" placeholder="MM/YY" pattern="(0[1-9]|1[0-2])\/([0-9]{2})" required>
</div>
<div class="form-group">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="123" inputmode="numeric" pattern="\d{3,4}" required>
</div>
</div>
</form>
</div>
<div id="payment-details-paypal" class="payment-details">
<h3>PayPal Details</h3>
<p>You will be redirected to PayPal to complete your purchase securely.</p>
<div class="form-group">
<label for="paypal-email">PayPal Account Email (Optional)</label>
<input type="email" id="paypal-email" name="paypalEmail" placeholder="your.email@example.com" autocomplete="email">
</div>
</div>
<div id="payment-details-razorpay" class="payment-details">
<h3>Razorpay Details</h3>
<p>Upon clicking "Continue to Payment", you will be prompted by Razorpay to complete your transaction.</p>
<p>Ensure your mobile number and email are up-to-date for a smooth experience.</p>
<div class="form-group">
<label for="razorpay-phone">Mobile Number (for OTP verification)</label>
<input type="tel" id="razorpay-phone" name="razorpayPhone" placeholder="+91 XXXXX XXXXX" pattern="[0-9]{10}" autocomplete="tel" required>
</div>
</div>
<div id="payment-details-stripe" class="payment-details">
<h3>Stripe Details</h3>
<p>You will be securely redirected to Stripe's payment portal to finalize your payment.</p>
<p>Stripe supports various payment methods including cards, Apple Pay, Google Pay, etc.</p>
<div class="form-group">
<label for="stripe-promo">Promo Code (Optional)</label>
<input type="text" id="stripe-promo" name="stripePromo" placeholder="ENTERCODE">
</div>
</div>
<button type="submit" class="btn-continue">Continue to Payment</button>
<p class="payment-gateway-info">
Your payment information is secured by industry-leading encryption and processed via trusted payment gateways.
</p>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const paymentOptionCards = document.querySelectorAll('.payment-option-card');
const paymentDetailsSections = document.querySelectorAll('.payment-details');
// Function to update active states
function updatePaymentSelection() {
paymentOptionCards.forEach(card => {
const radio = card.querySelector('input[type="radio"]');
const paymentMethod = card.dataset.paymentMethod;
const correspondingDetails = document.getElementById(`payment-details-${paymentMethod}`);
if (radio.checked) {
card.classList.add('selected');
if (correspondingDetails) {
correspondingDetails.classList.add('active');
// Focus on the first input of the active form
const firstInput = correspondingDetails.querySelector('input, select');
if (firstInput) {
firstInput.focus();
}
}
} else {
card.classList.remove('selected');
if (correspondingDetails) {
correspondingDetails.classList.remove('active');
}
}
});
}
// Add event listeners to radio buttons inside cards
paymentOptionCards.forEach(card => {
const radio = card.querySelector('input[type="radio"]');
radio.addEventListener('change', updatePaymentSelection);
// Also make the whole card clickable
card.addEventListener('click', () => {
radio.checked = true;
updatePaymentSelection();
});
});
// Initial selection on page load
updatePaymentSelection();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Review Summary</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="order-review-summary" role="main" aria-labelledby="orderSummaryTitle">
<h2 id="orderSummaryTitle" class="section-title">Order Review Summary</h2>
<section class="order-items" aria-label="Items in your order">
<header>
<!-- This header could contain a title like "Your Items" if desired,
but for a clean look, we'll let the items speak for themselves. -->
</header>
<div class="order-item">
<div class="item-image">
<img src="https://via.placeholder.com/80x80/E0E0E0/888888?text=Craft+1" alt="Placeholder image of product Craft Item 1">
</div>
<div class="item-details">
<h3>Hand-Painted Ceramic Mug</h3>
<p>Qty: 1 | Color: Blue | Size: Standard</p>
</div>
<div class="item-price">$24.99</div>
</div>
<div class="order-item">
<div class="item-image">
<img src="https://via.placeholder.com/80x80/E0E0E0/888888?text=Craft+2" alt="Placeholder image of product Craft Item 2">
</div>
<div class="item-details">
<h3>Custom Engraved Leather Wallet</h3>
<p>Qty: 1 | Initials: JD | Material: Full-Grain Leather</p>
</div>
<div class="item-price">$59.99</div>
</div>
<div class="order-item">
<div class="item-image">
<img src="https://via.placeholder.com/80x80/E0E0E0/888888?text=Craft+3" alt="Placeholder image of product Craft Item 3">
</div>
<div class="item-details">
<h3>Hand-Knitted Wool Scarf</h3>
<p>Qty: 2 | Color: Grey Mix | Length: Long</p>
</div>
<div class="item-price">$39.99</div>
</div>
</section>
<section class="order-summary-details" aria-label="Order cost breakdown">
<div class="summary-row">
<span>Subtotal:</span>
<span>$164.96</span>
</div>
<div class="summary-row">
<span>Shipping:</span>
<span>$7.50</span>
</div>
<div class="summary-row">
<span>Tax (8%):</span>
<span>$13.20</span>
</div>
<div class="summary-row total">
<span>Order Total:</span>
<span>$185.66</span>
</div>
</section>
<section class="shipping-address" aria-label="Shipping address">
<h3>Shipping Address</h3>
<div class="address-details">
<p><strong>[Customer Name Placeholder]</strong></p>
<p>[Street Address Placeholder]</p>
<p>[City, State, Zip Code Placeholder]</p>
<p>[Country Placeholder]</p>
<p>[Phone Number Placeholder]</p>
</div>
<div class="action-buttons">
<a href="#" class="button secondary" aria-label="Change shipping address">Change Address</a>
</div>
</section>
<section class="payment-method" aria-label="Payment method">
<h3>Payment Method</h3>
<div class="payment-details">
<p>Card Type: <strong>[Payment Gateway / Card Type Placeholder]</strong></p>
<p>Card Number: <strong>**** **** **** [Last 4 Digits Placeholder]</strong></p>
<p>Billing Address: Same as shipping</p>
</div>
<div class="action-buttons">
<a href="#" class="button secondary" aria-label="Change payment method">Change Payment</a>
</div>
</section>
<div class="action-buttons full-width">
<a href="#" class="button secondary" aria-label="Go back to shopping cart">Back to Cart</a>
<button type="submit" class="button primary" aria-label="Confirm and place order">Confirm & Place Order</button>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Place Order Section</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="place-order-section" aria-labelledby="placeOrderTitle">
<h2 id="placeOrderTitle">Complete Your Purchase</h2>
<div class="order-summary-details">
<p><span>Subtotal:</span> <strong>$XXX.XX</strong></p>
<p><span>Shipping:</span> <strong>$YY.YY</strong></p>
<p class="total-amount"><span>Total:</span> <strong>$ZZZ.ZZ</strong></p>
</div>
<div class="payment-gateway-info">
<p>By clicking "Place Order", you will be redirected to a secure <span>Razorpay / Stripe / PayPal</span> page to complete your payment.</p>
</div>
<button type="submit" class="place-order-button">
Place Order
</button>
</section>
</body>
</html>
<section class="security-assurance">
<div class="security-assurance__container">
<h2 class="security-assurance__heading">Your Security & Privacy: Our Top Priority</h2>
<p class="security-assurance__intro">
At [Your Store Name], we understand the importance of safeguarding your personal information and ensuring a secure shopping experience. We are committed to protecting your data every step of the way, from browsing to checkout.
</p>
<div class="security-assurance__features">
<h3 class="security-assurance__feature-heading">How We Protect You</h3>
<ul class="security-assurance__feature-list">
<li class="security-assurance__feature-item">
<strong>Secure Data Encryption (SSL/TLS):</strong> All data transmitted between your browser and our website is encrypted using industry-standard SSL/TLS technology. This ensures your personal details, login credentials, and payment information remain private and secure.
</li>
<li class="security-assurance__feature-item">
<strong>PCI DSS Compliant Payment Gateways:</strong> Your payments are processed through trusted and secure third-party payment gateways (e.g., Razorpay, Stripe, PayPal) that are fully PCI DSS compliant. We do not store your credit card details on our servers.
</li>
<li class="security-assurance__feature-item">
<strong>Strict Privacy Policy:</strong> We adhere to a strict privacy policy that outlines how we collect, use, and protect your information. Your data is never sold or shared with unauthorized third parties.
</li>
<li class="security-assurance__feature-item">
<strong>Account Security:</strong> We implement robust security measures for your account, including secure password hashing and protection against unauthorized access. We encourage you to use strong, unique passwords.
</li>
<li class="security-assurance__feature-item">
<strong>Regular Security Audits:</strong> Our systems undergo regular security audits and updates to identify and mitigate potential vulnerabilities, ensuring a continuously secure environment.
</li>
</ul>
</div>
<p class="security-assurance__conclusion">
Shop with confidence knowing that your security is our unwavering commitment. If you have any questions or concerns regarding your data privacy or site security, please do not hesitate to <a href="/contact" class="security-assurance__link">contact our support team</a> or review our full <a href="/privacy-policy" class="security-assurance__link">Privacy Policy</a>.
</p>
</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">Crafted Wonders</h3><p class="footer-1-newsletter-text">Be the first to discover new handcrafted treasures and exclusive offers!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Sign Up</button></div><p class="footer-1-privacy-note"><span>By signing up, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive marketing emails.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Shop All Crafts</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Featured Collections</a></li><li><a href="#">Gift Ideas</a></li><li><a href="#">Our Artisans</a></li></ul></div><div class="footer-1-column"><h4>Customer Care</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Shipping Information</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Order Tracking</a></li><li><a href="#">FAQs</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</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>© 2024 Crafted Wonders. All rights reserved.</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>
</body>
</html>

209
edit_profile.html Normal file
View File

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>edit_profile</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Handcrafted with Heart</p><h2 class="text-2-heading">Unearth Authentic Handmade Treasures</h2><p class="text-2-description">Explore a curated collection of unique, handcrafted goods made with passion and precision. From charming decor to personalized gifts, find pieces that tell a story and add warmth to your life.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Explore Our Collections</button><button class="text-2-btn text-2-outline">Discover Our Story</button></div></section></div>
<div class="app-form"><h1>Become a Valued Artisan Partner</h1><h2>Your Crafting Journey Starts Here</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="First Name"></input></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Last Name"></input></div></div><div class="form-group full-width"><label>Email Address</label><input id="email" type="email" placeholder="Email"></input></div><h2>Direct Contact Information</h2><div class="form-group full-width"><label>Phone Number</label><input id="phone" type="tel" placeholder="Phone Number"></input></div><h2>Tell Us About Your Creations</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Write your cover letter here..."></textarea></div><button type="submit">Submit Artisan Partnership Application</button></div>
<div class="app-form"><h1>Become a Valued Artisan Partner</h1><h2>Your Crafting Journey Starts Here</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="First Name"></input></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Last Name"></input></div></div><div class="form-group full-width"><label>Email Address</label><input id="email" type="email" placeholder="Email"></input></div><h2>Direct Contact Information</h2><div class="form-group full-width"><label>Phone Number</label><input id="phone" type="tel" placeholder="Phone Number"></input></div><h2>Tell Us About Your Creations</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Write your cover letter here..."></textarea></div><button type="submit">Submit Artisan Partnership Application</button></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Address Management</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>
<h1>Manage Your Addresses</h1>
</header>
<section class="address-section" aria-labelledby="saved-addresses-heading">
<h2 id="saved-addresses-heading">Your Saved Addresses</h2>
<div class="address-list">
<article class="address-card default" aria-label="Default Address">
<p class="label">Default Address</p>
<p><strong>John Doe</strong></p>
<p>123 Crafting Lane</p>
<p>Artisan Village</p>
<p>Springfield, IL 62701</p>
<p>United States</p>
<p>Phone: +1 (555) 123-4567</p>
<div class="address-card-actions">
<button class="btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button>
</div>
</article>
<article class="address-card" aria-label="Work Address">
<p><strong>Jane Smith</strong></p>
<p>456 Workshop Alley</p>
<p>Creative Hub</p>
<p>Shelbyville, KY 40065</p>
<p>United States</p>
<p>Phone: +1 (555) 987-6543</p>
<div class="address-card-actions">
<button class="btn btn-primary">Edit</button>
<button class="btn btn-secondary">Set as Default</button>
<button class="btn btn-danger">Delete</button>
</div>
</article>
<article class="address-card" aria-label="Alternate Address">
<p><strong>Customer Name</strong></p>
<p>789 Artistic Boulevard</p>
<p>Imagination City</p>
<p>Capital City, CA 90210</p>
<p>United States</p>
<p>Phone: +1 (555) 111-2222</p>
<div class="address-card-actions">
<button class="btn btn-primary">Edit</button>
<button class="btn btn-secondary">Set as Default</button>
<button class="btn btn-danger">Delete</button>
</div>
</article>
</div>
<button class="btn btn-outline">Add New Address</button>
</section>
<section class="add-address-form" aria-labelledby="add-new-address-heading">
<h3 id="add-new-address-heading">Add a New Address</h3>
<form action="#" method="POST">
<div class="form-group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" placeholder="e.g., John Doe" required>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="e.g., +1 (555) 123-4567" required>
</div>
<div class="form-group">
<label for="addressLine1">Address Line 1:</label>
<input type="text" id="addressLine1" name="addressLine1" placeholder="Street number and name" required>
</div>
<div class="form-group">
<label for="addressLine2">Address Line 2 (Optional):</label>
<input type="text" id="addressLine2" name="addressLine2" placeholder="Apartment, suite, unit, building, floor, etc.">
</div>
<div class="form-group">
<label for="city">City:</label>
<input type="text" id="city" name="city" placeholder="City name" required>
</div>
<div class="form-group">
<label for="state">State / Province / Region:</label>
<input type="text" id="state" name="state" placeholder="State/Province" required>
</div>
<div class="form-group">
<label for="zipCode">Zip / Postal Code:</label>
<input type="text" id="zipCode" name="zipCode" placeholder="e.g., 12345" required>
</div>
<div class="form-group">
<label for="country">Country:</label>
<input type="text" id="country" name="country" value="United States" placeholder="Country" required>
</div>
<div class="form-group">
<input type="checkbox" id="setDefault" name="setDefault">
<label for="setDefault">Set as default address</label>
</div>
<div class="form-actions">
<button type="reset" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Save Address</button>
</div>
</form>
</section>
</div>
</body>
</html>
<section class="form-actions">
<div class="button-group">
<button type="submit" class="button button-primary">Save Changes</button>
<button type="button" class="button button-secondary">Cancel</button>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Deactivation</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="account-deactivation-section" aria-labelledby="deactivation-heading">
<header>
<h2 id="deactivation-heading">Account Deactivation Options</h2>
<p class="subtitle">Manage your account preferences and deactivation settings.</p>
</header>
<div class="deactivation-content">
<h3>Why are you considering deactivating your account?</h3>
<p>We're sorry to see you go! Before you proceed, please understand the implications of deactivating your account.</p>
<p>Your online store account allows you to:</p>
<ul>
<li>Browse and purchase unique handmade crafts.</li>
<li>View your order history and tracking information.</li>
<li>Manage your profile, shipping addresses, and payment methods.</li>
<li>Receive updates on new products and exclusive offers.</li>
</ul>
<p>Deactivating your account will lead to the following:</p>
<ul>
<li>You will no longer be able to log in to this account.</li>
<li>Your profile information will be made inaccessible.</li>
<li>Your order history will be archived but not deleted, for record-keeping purposes.</li>
<li>Any pending orders or active subscriptions (if applicable) will be canceled.</li>
</ul>
<p>If you wish to simply stop receiving marketing emails, you can update your communication preferences in your <a href="#profile-settings" class="btn-link">Profile Settings</a> instead.</p>
</div>
<form action="/api/account/deactivate" method="POST">
<div class="deactivation-options">
<p>Please confirm your understanding and intent:</p>
<label for="confirm-understand">
<input type="checkbox" id="confirm-understand" name="confirm_understand" required aria-describedby="understand-desc">
I understand that deactivating my account is a permanent action and I will lose access to my account.
</label>
<label for="confirm-order-history">
<input type="checkbox" id="confirm-order-history" name="confirm_order_history" required aria-describedby="order-history-desc">
I acknowledge that my order history will be archived for legal and record-keeping purposes.
</label>
<label for="confirm-no-refunds">
<input type="checkbox" id="confirm-no-refunds" name="confirm_no_refunds" required aria-describedby="refunds-desc">
I confirm that I have no pending orders or outstanding issues requiring support or refunds.
</label>
</div>
<div class="deactivation-actions">
<button type="submit" class="btn btn-danger" aria-controls="deactivation-status">Deactivate My Account Permanently</button>
<a href="#profile-settings" class="btn btn-secondary">Go Back to Profile Settings</a>
</div>
<p class="note" id="deactivation-status" role="status">
<strong>Important Note:</strong> This action cannot be undone. If you change your mind later, you will need to create a new account.
</p>
</form>
</section>
</body>
</html>
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Handmade Haven</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Craft Lane, Artisan City NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1-800-CRAFTS-U</span><br></br><a href="mailto:info@relume.io">support@handmadehaven.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Shop All</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Best Sellers</a></li><li><a href="#">About Us</a></li><li><a href="#">Gift Cards</a></li></ul><ul><li><a href="#">Help & FAQs</a></li><li><a href="#">Custom Creations</a></li><li><a href="#">Our Blog</a></li><li><a href="#">Become a Seller</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Handmade Haven. All rights reserved.</p><ul class="footer-2-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>
</body>
</html>

314
index.html Normal file
View File

@ -0,0 +1,314 @@
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>Home</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-wrapper">
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <header id="navbarSection_1751353158139">
<nav class="navbar">
<div class="navbar-brand">
<a href="#" aria-label="Craftopia Home">
<img src="placeholder-logo.png" alt="Craftopia Logo" class="logo">
<span class="site-name">Craftopia</span>
</a>
</div>
<div class="navbar-toggle" aria-label="Toggle navigation" role="button" aria-expanded="false">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar-links">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">Shop <span class="arrow-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#">All Products</a></li>
<li><a href="#">Ceramics</a></li>
<li><a href="#">Jewelry</a></li>
<li><a href="#">Textiles</a></li>
<li><a href="#">Woodwork</a></li>
<li><a href="#">Unique Gifts</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="navbar-actions">
<div class="search-box">
<input type="search" placeholder="Search products..." aria-label="Search products">
<button type="submit" aria-label="Search"><i class="icon-search"></i></button>
</div>
<a href="#" class="icon-link" aria-label="Shopping Cart">
<i class="icon-cart"></i>
<span class="cart-count">0</span>
</a>
<a href="#" class="btn-primary" aria-label="Sign In or Register">Sign In</a>
<!-- Or, if user is logged in: -->
<!-- <a href="#" class="btn-secondary" aria-label="My Account">My Account</a> -->
</div>
</nav>
</header> (see https://g.co/ng/security#xss)
<link rel="stylesheet" href="style.css" />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>Footer Section</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<footer class="footerSection_1751353209628">
<div class="footer-container">
<div class="footer-column">
<div class="placeholder-logo">Your Logo</div>
<p>Curating unique, handmade crafts for your home and lifestyle. Discover the art of tradition and creativity.</p>
<br>
<div class="social-links">
<a href="#" aria-label="Facebook"><span class="placeholder-social-icon"></span></a>
<a href="#" aria-label="Instagram"><span class="placeholder-social-icon"></span></a>
<a href="#" aria-label="Pinterest"><span class="placeholder-social-icon"></span></a>
<a href="#" aria-label="Twitter"><span class="placeholder-social-icon"></span></a>
</div>
</div>
<div class="footer-column">
<h3>Shop</h3>
<ul>
<li><a href="#">Placeholder Link 1</a></li>
<li><a href="#">Placeholder Link 2</a></li>
<li><a href="#">Placeholder Link 3</a></li>
<li><a href="#">Placeholder Link 4</a></li>
<li><a href="#">Placeholder Link 5</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Customer Service</h3>
<ul>
<li><a href="#">Placeholder Link A</a></li>
<li><a href="#">Placeholder Link B</a></li>
<li><a href="#">Placeholder Link C</a></li>
<li><a href="#">Placeholder Link D</a></li>
<li><a href="#">Placeholder Link E</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact Us</h3>
<div class="footer-contact-info">
<a href="mailto:info@example.com">info@example.com</a>
<a href="tel:+1234567890">+1 (234) 567-890</a>
<p>123 Craft Lane, Artisan City, CA 90210</p>
</div>
<br>
<h3>Payments</h3>
<p>Integrated with:</p>
<div style="display: flex; gap: 10px; margin-top: 5px;">
<span class="placeholder-text-small" style="width: 60px;"></span>
<span class="placeholder-text-small" style="width: 60px;"></span>
<span class="placeholder-text-small" style="width: 60px;"></span>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 Your Craft Store. All rights reserved.</p>
</div>
</footer>
</body>
</html> (see https://g.co/ng/security#xss)
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <nav id="navbarSection_1751353233286" class="navbar">
<div class="navbar__container">
<a href="#" class="navbar__brand">CraftStore</a>
<button class="navbar__toggler" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar__toggler-icon"></span>
<span class="navbar__toggler-icon"></span>
<span class="navbar__toggler-icon"></span>
</button>
<div class="navbar__collapse" id="navbar-menu">
<ul class="navbar__nav navbar__nav--main">
<li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
<li class="navbar__item"><a href="#" class="navbar__link">Shop</a></li>
<li class="navbar__item"><a href="#" class="navbar__link">Categories</a></li>
<li class="navbar__item"><a href="#" class="navbar__link">About Us</a></li>
<li class="navbar__item"><a href="#" class="navbar__link">Contact</a></li>
</ul>
<ul class="navbar__nav navbar__nav--utility">
<li class="navbar__item navbar__item--search">
<a href="#" class="navbar__link" aria-label="Search">
<span class="icon-placeholder">🔍</span> Search
</a>
</li>
<li class="navbar__item navbar__item--cart">
<a href="#" class="navbar__link" aria-label="Shopping Cart">
<span class="icon-placeholder">🛒</span> Cart (0)
</a>
</li>
<li class="navbar__item navbar__item--dropdown">
<a href="#" class="navbar__link navbar__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
<span class="icon-placeholder">👤</span> Account
</a>
<div class="navbar__dropdown-menu">
<a href="#" class="navbar__dropdown-item">Sign Up / Log In</a>
<a href="#" class="navbar__dropdown-item">My Profile</a>
<a href="#" class="navbar__dropdown-item">Order History</a>
<a href="#" class="navbar__dropdown-item">Sign Out</a>
</div>
</li>
</ul>
</div>
</div>
</nav> (see https://g.co/ng/security#xss)
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <nav id="navbarSection_1751353251844" class="navbar">
<div class="navbar-container">
<div class="navbar-brand">
<a href="#" aria-label="Crafty Delights Homepage">
<span class="logo-text-placeholder">Crafty Delights</span>
</a>
</div>
<button class="navbar-toggler" aria-label="Toggle navigation menu">
<span class="toggler-icon-bar"></span>
<span class="toggler-icon-bar"></span>
<span class="toggler-icon-bar"></span>
</button>
<div class="navbar-links-main">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Shop All</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Categories</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
<div class="navbar-actions">
<a href="#" class="action-item search-icon" aria-label="Search products">
<span class="icon-placeholder">Search</span>
</a>
<a href="#" class="action-item user-account" aria-label="My Account or Login/Signup">
<span class="icon-placeholder">Account</span>
</a>
<a href="#" class="action-item shopping-cart" aria-label="View shopping cart">
<span class="icon-placeholder">Cart (0)</span>
</a>
<a href="#" class="action-item action-button login-btn">Login</a>
<a href="#" class="action-item action-button signup-btn">Sign Up</a>
</div>
</div>
</nav> (see https://g.co/ng/security#xss)
<link rel="stylesheet" href="style.css" />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>Navbar Section</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="navbarSection_1751353253489" role="banner">
<nav class="navbar-container" aria-label="Main Navigation">
<div class="navbar-logo">
<a href="/" aria-label="Home - [Store Name]">CraftStore</a>
</div>
<button class="navbar-toggle" aria-expanded="false" aria-controls="main-menu" aria-label="Toggle navigation">
&#9776; <!-- Hamburger icon -->
</button>
<ul class="navbar-menu" id="main-menu" role="menubar">
<li role="none"><a href="/products" role="menuitem">Products</a></li>
<li role="none"><a href="/categories" role="menuitem">Categories</a></li>
<li role="none"><a href="/about" role="menuitem">About Us</a></li>
<li role="none"><a href="/contact" role="menuitem">Contact</a></li>
</ul>
<div class="navbar-actions">
<a href="/login" class="action-link" aria-label="Login to your account">Login</a>
<a href="/signup" class="action-link" aria-label="Sign Up for a new account">Sign Up</a>
<a href="/cart" class="cart-button" aria-label="View shopping cart with 3 items">
<span class="cart-icon" aria-hidden="true"></span>
Cart
<span class="cart-count" aria-live="polite" aria-atomic="true">3</span>
</a>
</div>
</nav>
</header>
<!-- Wireframe-friendly placeholder content for demonstration -->
<main style="padding: 2rem; background-color: #f8f8f8;">
<p>This is placeholder content to show the navbar's position.</p>
<div style="height: 1000px; background-color: #eee; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #aaa;">
Content Area
</div>
</main>
<script>
// Basic JavaScript for mobile toggle functionality
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.querySelector('.navbar-toggle');
const navMenu = document.querySelector('.navbar-menu');
const navActions = document.querySelector('.navbar-actions');
if (toggleButton && navMenu && navActions) {
toggleButton.addEventListener('click', function () {
const isExpanded = this.getAttribute('aria-expanded') === 'true' || false;
this.setAttribute('aria-expanded', !isExpanded);
navMenu.classList.toggle('is-active');
navActions.classList.toggle('is-active');
});
}
});
</script>
</body>
</html> (see https://g.co/ng/security#xss)
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <section id="heroSection_1751353426925" class="hero-section">
<div class="hero-content-wrapper">
<div class="hero-text-container">
<h1>Discover Unique Handmade Crafts</h1>
<p>Browse our exquisite collection of artisanal products, crafted with love and passion. Find the perfect unique gift or a special treat for yourself.</p>
<div class="hero-actions">
<a href="#products" class="btn btn-primary">Shop Now</a>
<a href="#about-us" class="btn btn-secondary">Learn More</a>
</div>
</div>
<div class="hero-image-container">
<!-- Placeholder for a captivating image of handmade crafts -->
<div class="placeholder-image"></div>
</div>
</div>
</section> (see https://g.co/ng/security#xss)
</div>
<script>
// Simple script to ensure styles are applied
document.addEventListener('DOMContentLoaded', function() {
// Force a repaint to ensure styles are applied
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html> (see https://g.co/ng/security#xss)

111
login.html Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
<div class="app-form"><h1>Become a Valued Artisan Partner</h1><h2>Your Crafting Journey Starts Here</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="First Name"></input></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Last Name"></input></div></div><div class="form-group full-width"><label>Email Address</label><input id="email" type="email" placeholder="Email"></input></div><h2>Direct Contact Information</h2><div class="form-group full-width"><label>Phone Number</label><input id="phone" type="tel" placeholder="Phone Number"></input></div><h2>Tell Us About Your Creations</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Write your cover letter here..."></textarea></div><button type="submit">Submit Artisan Partnership Application</button></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forgot Password</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>
<h1>Forgot Your Password?</h1>
</header>
<main>
<p class="info-text">
Enter your email address below and we'll send you a link to reset your password.
</p>
<form action="/password/reset" 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>
<button type="submit">Send Reset Link</button>
</form>
<a href="/login" class="back-to-login">Back to Log In</a>
</main>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Login Options</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="social-login-section">
<h2>Sign In / Sign Up</h2>
<p>Or continue with your social account</p>
<div class="social-buttons">
<a href="#" class="social-button google" aria-label="Sign in with Google">
<img src="https://www.google.com/favicon.ico" alt="Google icon">
<span>Continue with Google</span>
</a>
<a href="#" class="social-button facebook" aria-label="Sign in with Facebook">
<img src="https://static.xx.fbcdn.net/rsrc.php/yv/r/SOG6kF2gPne.ico" alt="Facebook icon">
<span>Continue with Facebook</span>
</a>
<a href="#" class="social-button apple" aria-label="Sign in with Apple">
<img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LncyLm9nLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTYuMiAxMi4yYzAuMy0wLjYgMC40LTEuMiAwLjQtMS45IDAtMS44LTAuOC0yLjktMi4xLTMuNi0xLjEtMC42LTIuNS0wLjctMy45LTAuMi0wLjUgMC4xLTEgMC4zLTEuNSAwLjYtMS40LTAuNy0yLjYtMC44LTMuNC0wLjMtMC43IDAuNS0xLjIgMS4yLTEuMiAyLjIgMCAxLjkgMC41IDMuMiAxLjcgNC43IDEuMSAxLjQgMi42IDIuMyA0LjUgMi4zIDEuMiAwIDEuOC0wLjQgMi40LTAuOSAwLjYtMC41IDEuMi0xLjIgMS41LTEuNyAwLjMtMC43IDAuNS0xLjQgMC41LTIuMSAtdjAtMC4xem0tMS45LTYuNGMwLjUtMC44IDAuNy0xLjcgMC42LTIuNyAwLjEtMC44LTAuMi0xLjQtMC43LTEuNy0wLjUtMC4zLTEuMy0wLjMgLTIuMSAwLjEtMC42IDAuMy0xLjEgMS0xLjEgMi4yIDAgMS42IDAuNSAyLjYgMS4zIDMuOSAwLjEgMC4xIDAuMiAwLjMgMC40IDAuMyAwLjEgMCAwLjItMC4xIDAuMy0wLjJzMC4xLTAuMiAwLjEtMC40Yy0wLjEtMC40LTAuNC0xLjItMC42LTIuMXoiLz48L3N2Zz4=" alt="Apple icon">
<span>Continue with Apple</span>
</a>
<!-- Potentially more social options can be added here -->
</div>
</section>
</body>
</html>
<section class="welcome-back-section">
<div class="welcome-back-container">
<h2 class="welcome-back-heading">Welcome Back, [User Name]!</h2>
<p class="welcome-back-message">
We've missed you! Explore our latest handmade treasures or pick up right where you left off.
</p>
<div class="welcome-back-actions">
<a href="#new-arrivals" class="welcome-back-btn welcome-back-btn-primary">Browse New Arrivals</a>
<a href="#cart" class="welcome-back-btn welcome-back-btn-secondary">View Your Cart</a>
<a href="#orders" class="welcome-back-btn">Track Recent Orders</a>
<a href="#profile" class="welcome-back-btn">Update Your Profile</a>
</div>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Prompt - Handmade Crafts Store</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="sign-up-prompt" aria-labelledby="signupPromptHeading">
<h2 id="signupPromptHeading">Unlock a World of Handmade Crafts!</h2>
<p>Sign up now to discover unique products, manage your orders, and enjoy exclusive deals from our artisans.</p>
<div class="cta-buttons">
<a href="/signup" class="btn btn-primary" aria-label="Create a new account">Create Account</a>
<a href="/login" class="btn btn-secondary" aria-label="Log in to your existing account">Log In</a>
</div>
<p class="alt-login">
New here? <a href="/signup">Join our community</a> or <a href="/login">sign in</a> if you're already a member.
</p>
</section>
</body>
</html>
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Handmade Haven</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Craft Lane, Artisan City NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1-800-CRAFTS-U</span><br></br><a href="mailto:info@relume.io">support@handmadehaven.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Shop All</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Best Sellers</a></li><li><a href="#">About Us</a></li><li><a href="#">Gift Cards</a></li></ul><ul><li><a href="#">Help & FAQs</a></li><li><a href="#">Custom Creations</a></li><li><a href="#">Our Blog</a></li><li><a href="#">Become a Seller</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Handmade Haven. All rights reserved.</p><ul class="footer-2-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>
</body>
</html>

377
order_history.html Normal file
View File

@ -0,0 +1,377 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>order_history</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
<div class="text-1-wrapper"><section class="text-1-section"><p class="text-1-tagline">Crafted with Passion</p><h2 class="text-1-heading">Discover Unique Handmade Treasures</h2><p class="text-1-description">Explore a curated collection of handcrafted goods made by talented artisans. From intricate jewelry to bespoke home decor, find one-of-a-kind items that tell a story and add a personal touch to your life.</p><div class="text-1-button-group"><button class="text-1-btn text-1-solid">Shop Now</button><button class="text-1-btn text-1-outline">Browse Categories</button></div></section></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order History</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Your Order History</h1>
<!-- Placeholder for header or navigation if applicable -->
<!-- <nav class="breadcrumbs">
<a href="#">Home</a> &gt; <a href="#">My Account</a> &gt; <span>Order History</span>
</nav> -->
<div class="order-list-header">
<div>Order ID</div>
<div>Order Date</div>
<div>Total</div>
<div>Status</div>
</div>
<!-- Sample Order Item 1 - Delivered -->
<article class="order-item">
<div class="order-summary" onclick="this.parentNode.classList.toggle('expanded')">
<div class="order-summary-left">
<h3>#1234567890</h3>
<p>Order Placed: January 15, 2024</p>
</div>
<div class="order-summary-right">
<span>Total: ₹2,499.00</span>
</div>
</div>
<div class="order-details">
<ul>
<li>
<span class="item-name">Handmade Ceramic Mug - Blue Ocean</span>
<span class="item-quantity">Qty: 2</span>
<span class="item-price">₹999.00</span>
</li>
<li>
<span class="item-name">Artisanal Leather Journal - A5</span>
<span class="item-quantity">Qty: 1</span>
<span class="item-price">₹1,500.00</span>
</li>
<!-- Add more items as needed -->
</ul>
</div>
<div class="order-footer">
<div>Payment Method: Credit Card (Stripe)</div>
<div class="status delivered">Status: Delivered</div>
</div>
</article>
<!-- Sample Order Item 2 - Pending -->
<article class="order-item">
<div class="order-summary" onclick="this.parentNode.classList.toggle('expanded')">
<div class="order-summary-left">
<h3>#0987654321</h3>
<p>Order Placed: February 28, 2024</p>
</div>
<div class="order-summary-right">
<span>Total: ₹850.00</span>
</div>
</div>
<div class="order-details">
<ul>
<li>
<span class="item-name">Hand-painted Silk Scarf - Floral</span>
<span class="item-quantity">Qty: 1</span>
<span class="item-price">₹850.00</span>
</li>
</ul>
</div>
<div class="order-footer">
<div>Payment Method: UPI (Razorpay)</div>
<div class="status">Status: Pending</div>
</div>
</article>
<!-- Sample Order Item 3 - Cancelled -->
<article class="order-item">
<div class="order-summary" onclick="this.parentNode.classList.toggle('expanded')">
<div class="order-summary-left">
<h3>#5678901234</h3>
<p>Order Placed: March 10, 2024</p>
</div>
<div class="order-summary-right">
<span>Total: ₹1,200.00</span>
</div>
</div>
<div class="order-details">
<ul>
<li>
<span class="item-name">Wooden Coasters Set - 4 pcs</span>
<span class="item-quantity">Qty: 1</span>
<span class="item-price">₹1,200.00</span>
</li>
</ul>
</div>
<div class="order-footer">
<div>Payment Method: Net Banking</div>
<div class="status cancelled">Status: Cancelled</div>
</div>
</article>
<!-- Example of an empty state for when there are no orders -->
<!-- Uncomment to see empty state -->
<!--
<div class="empty-state">
<h2>No Orders Yet!</h2>
<p>It looks like you haven't placed any orders with us. Start exploring our beautiful handmade crafts!</p>
<a href="/products">Shop Now</a>
</div>
-->
</div>
<script>
// Optional JavaScript for expanding/collapsing order details
// The inline onclick in order-summary already handles this for basic toggle.
// For more complex interactions, an event listener approach is better.
document.addEventListener('DOMContentLoaded', () => {
const orderSummaries = document.querySelectorAll('.order-summary');
orderSummaries.forEach(summary => {
summary.addEventListener('click', () => {
const orderItem = summary.closest('.order-item');
orderItem.classList.toggle('expanded');
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Filtering</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="order-filtering-container">
<h2>Your Order History</h2>
<aside class="order-filters">
<h3>Filter Orders</h3>
<div class="filter-group">
<label for="order-status">Order Status:</label>
<select id="order-status" name="order_status">
<option value="">All Statuses</option>
<option value="pending">Pending</option>
<option value="shipped">Shipped</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
<div class="filter-group">
<label for="date-from">Order Date From:</label>
<input type="date" id="date-from" name="date_from">
</div>
<div class="filter-group">
<label for="date-to">Order Date To:</label>
<input type="date" id="date-to" name="date_to">
</div>
<div class="filter-group">
<label for="order-id-search">Search by Order ID:</label>
<input type="text" id="order-id-search" name="order_id_search" placeholder="e.g., #ORD12345">
</div>
<div class="filter-group">
<label>Price Range:</label>
<input type="range" id="price-range" name="price_range" min="0" max="1000" value="1000">
<p>Up to: <span id="price-display">$1000</span></p>
</div>
<div class="filter-group">
<button type="submit">Apply Filters</button>
<button type="reset" style="background-color: #6c757d; margin-top: 5px;">Clear Filters</button>
</div>
</aside>
<section class="order-list">
<h3>Your Recent Orders</h3>
<article class="order-card">
<h4>
Order #ORD10001
<span class="status completed">Completed</span>
</h4>
<p><strong>Order Date:</strong> October 26, 2023</p>
<p><strong>Total Amount:</strong> $75.00</p>
<p><strong>Payment Method:</strong> Stripe</p>
<div class="order-items-summary">
Items: Craft Kit (x1), Watercolor Set (x1)
</div>
<div class="order-actions">
<a href="/order/ORD10001">View Details</a>
</div>
</article>
<article class="order-card">
<h4>
Order #ORD10002
<span class="status shipped">Shipped</span>
</h4>
<p><strong>Order Date:</strong> October 20, 2023</p>
<p><strong>Total Amount:</strong> $45.50</p>
<p><strong>Payment Method:</strong> Razorpay</p>
<div class="order-items-summary">
Items: Hand-painted Mug (x2)
</div>
<div class="order-actions">
<a href="/order/ORD10002">Track Order</a>
</div>
</article>
<article class="order-card">
<h4>
Order #ORD10003
<span class="status pending">Pending</span>
</h4>
<p><strong>Order Date:</strong> October 15, 2023</p>
<p><strong>Total Amount:</strong> $120.00</p>
<p><strong>Payment Method:</strong> PayPal</p>
<div class="order-items-summary">
Items: Custom Engraved Sign (x1)
</div>
<div class="order-actions">
<a href="/order/ORD10003">View Details</a>
</div>
</article>
<article class="order-card">
<h4>
Order #ORD10004
<span class="status cancelled">Cancelled</span>
</h4>
<p><strong>Order Date:</strong> September 28, 2023</p>
<p><strong>Total Amount:</strong> $30.00</p>
<p><strong>Payment Method:</strong> Stripe</p>
<div class="order-items-summary">
Items: Macrame Wall Hanging (x1)
</div>
<div class="order-actions">
<a href="/order/ORD10004">View Details</a>
</div>
</article>
<nav class="pagination" aria-label="Order History Pagination">
<a href="#" aria-label="Previous Page">&laquo;</a>
<a href="#" class="active" aria-current="page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#" aria-label="Next Page">&raquo;</a>
</nav>
</section>
</main>
<script>
// JavaScript for price range display (optional, for interactivity)
const priceRangeInput = document.getElementById('price-range');
const priceDisplaySpan = document.getElementById('price-display');
if (priceRangeInput && priceDisplaySpan) {
priceRangeInput.addEventListener('input', () => {
priceDisplaySpan.textContent = `$${priceRangeInput.value}`;
});
}
</script>
</body>
</html>
<section class="order-history-section">
<div class="container">
<h2 class="section-title">Your Recent Orders</h2>
<ul class="order-list">
<li class="order-item">
<div class="order-info">
<span class="order-id">#ORD-20231026-A1B2</span>
<span class="order-date">Placed on Oct 26, 2023</span>
<span class="order-total">Total: $<span class="placeholder-value">75.00</span></span>
</div>
<a href="/my-account/orders/ORD-20231026-A1B2" class="button view-details-link">View Details</a>
</li>
<li class="order-item">
<div class="order-info">
<span class="order-id">#ORD-20231020-C3D4</span>
<span class="order-date">Placed on Oct 20, 2023</span>
<span class="order-total">Total: $<span class="placeholder-value">120.50</span></span>
</div>
<a href="/my-account/orders/ORD-20231020-C3D4" class="button view-details-link">View Details</a>
</li>
<li class="order-item">
<div class="order-info">
<span class="order-id">#ORD-20231015-E5F6</span>
<span class="order-date">Placed on Oct 15, 2023</span>
<span class="order-total">Total: $<span class="placeholder-value">45.00</span></span>
</div>
<a href="/my-account/orders/ORD-20231015-E5F6" class="button view-details-link">View Details</a>
</li>
<!-- More order items can be added dynamically here -->
</ul>
<div class="all-orders-link-wrapper">
<a href="/my-account/orders" class="button primary-button">View All Order History</a>
</div>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Section</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="pagination-section" aria-label="Product Page Navigation">
<nav class="pagination-nav" role="navigation">
<ul class="pagination-list">
<li class="pagination-item disabled">
<a href="#" class="pagination-link" aria-label="Previous Page">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="pagination-item active" aria-current="page">
<a href="#" class="pagination-link">1</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">2</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">3</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">4</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">5</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link" aria-label="Next Page">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
<div class="pagination-info">
Showing <span class="current-items">1-20</span> of <span class="total-items">100</span> products
</div>
</section>
</body>
</html>
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Handmade Haven</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Craft Lane, Artisan City NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1-800-CRAFTS-U</span><br></br><a href="mailto:info@relume.io">support@handmadehaven.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Shop All</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Best Sellers</a></li><li><a href="#">About Us</a></li><li><a href="#">Gift Cards</a></li></ul><ul><li><a href="#">Help & FAQs</a></li><li><a href="#">Custom Creations</a></li><li><a href="#">Our Blog</a></li><li><a href="#">Become a Seller</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Handmade Haven. All rights reserved.</p><ul class="footer-2-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>
</body>
</html>

449
product_detail.html Normal file
View File

@ -0,0 +1,449 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>product_detail</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
<section class="product-gallery">
<div class="gallery-main">
<figure>
<img src="#" alt="Main image of handcrafted wooden bowl, showcasing its unique grain and finish." class="gallery-current-image">
<figcaption class="sr-only">Currently displayed image of the handcrafted wooden bowl.</figcaption>
</figure>
</div>
<div class="gallery-thumbnails">
<button class="thumbnail-button active" aria-label="View image 1 of handcrafted wooden bowl">
<img src="#" alt="Thumbnail 1: Front view of the wooden bowl.">
</button>
<button class="thumbnail-button" aria-label="View image 2 of handcrafted wooden bowl">
<img src="#" alt="Thumbnail 2: Side profile of the wooden bowl.">
</button>
<button class="thumbnail-button" aria-label="View image 3 of handcrafted wooden bowl">
<img src="#" alt="Thumbnail 3: Interior view of the wooden bowl.">
</button>
<button class="thumbnail-button" aria-label="View image 4 of handcrafted wooden bowl">
<img src="#" alt="Thumbnail 4: Detail of the wooden bowl's craftsmanship.">
</button>
<button class="thumbnail-button" aria-label="View image 5 of handcrafted wooden bowl">
<img src="#" alt="Thumbnail 5: Wooden bowl displayed in a natural setting.">
</button>
<!-- Add more thumbnail buttons as needed -->
</div>
</section>
<section class="product-info-section">
<div class="product-details-container">
<div class="product-image-gallery">
<div class="main-image">
<img src="[Main Product Image URL]" alt="[Product Title Placeholder] Main Image">
</div>
<div class="thumbnail-images">
<img src="[Thumbnail 1 URL]" alt="[Product Title Placeholder] Thumbnail 1">
<img src="[Thumbnail 2 URL]" alt="[Product Title Placeholder] Thumbnail 2">
<img src="[Thumbnail 3 URL]" alt="[Product Title Placeholder] Thumbnail 3">
</div>
</div>
<div class="product-overview">
<h1 class="product-title">[Handmade Craft Product Title]</h1>
<p class="product-category">[Category: e.g., Pottery, Jewelry, Textiles]</p>
<div class="product-price">
<span class="current-price">[Price: e.g., $49.99]</span>
<!-- Optional: <span class="original-price">[Original Price: e.g., $59.99]</span> -->
</div>
<div class="product-rating">
<span class="stars">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
<span class="review-count">(XX Reviews)</span>
</div>
<p class="product-short-description">[Short, engaging description of the handmade craft, highlighting key features or unique selling points. For example: "A beautifully handcrafted ceramic mug, perfect for your morning coffee, made with love and attention to detail."]</p>
<form class="product-options-form">
<div class="option-group">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" value="1" min="1" max="100">
</div>
<div class="option-group">
<label for="color">Color/Material:</label>
<select id="color" name="color">
<option value="default">[Select Option]</option>
<option value="blue">Ocean Blue</option>
<option value="green">Forest Green</option>
<option value="red">Ruby Red</option>
</select>
</div>
<!-- Add more options as needed for crafts, e.g., Size, Personalization input -->
<button type="submit" class="add-to-cart-button">Add to Cart</button>
<button type="button" class="buy-now-button">Buy Now</button>
</form>
<div class="delivery-info">
<p>Estimated Delivery: [X-Y Business Days]</p>
<p>Free Shipping on orders over [Amount]</p>
</div>
</div>
</div>
<div class="product-extra-details">
<div class="tabs">
<button class="tab-button active" data-tab="description">Description</button>
<button class="tab-button" data-tab="specs">Specifications</button>
<button class="tab-button" data-tab="shipping">Shipping & Returns</button>
<button class="tab-button" data-tab="reviews">Reviews</button>
</div>
<div id="description" class="tab-content active">
<h2>Product Description</h2>
<p>[Detailed description of the handmade craft. Talk about the inspiration, the process, the materials used, the story behind it, and its unique qualities. For example: "This exquisite piece is meticulously hand-painted by local artisans, using traditional techniques passed down through generations. Each stroke tells a story, making every item truly unique. Made from sustainable [material], it embodies both beauty and responsible craftsmanship."]</p>
<ul>
<li>Handmade with [Specific Material]</li>
<li>Unique, one-of-a-kind design</li>
<li>Dimensions: [e.g., 10cm H x 8cm W]</li>
<li>Weight: [e.g., 250g]</li>
<li>Care Instructions: [e.g., Hand-wash only]</li>
</ul>
</div>
<div id="specs" class="tab-content">
<h2>Specifications</h2>
<table>
<tr>
<td>Craft Type</td>
<td>[e.g., Ceramic Ware]</td>
</tr>
<tr>
<td>Material</td>
<td>[e.g., High-fired Clay, Glaze]</td>
</tr>
<tr>
<td>Dimensions</td>
<td>[e.g., 10 cm (Height) x 8 cm (Diameter)]</td>
</tr>
<tr>
<td>Weight</td>
<td>[e.g., 0.25 kg]</td>
</tr>
<tr>
<td>Origin</td>
<td>[e.g., Handcrafted in India]</td>
</tr>
<tr>
<td>SKU</td>
<td>[Product SKU e.g., HCMUG001]</td>
</tr>
</table>
</div>
<div id="shipping" class="tab-content">
<h2>Shipping & Returns</h2>
<h3>Shipping Information:</h3>
<p>All orders are processed within [1-2] business days. Shipping times vary based on location:</p>
<ul>
<li>Domestic: [3-7] business days</li>
<li>International: [7-20] business days</li>
</ul>
<p>Tracking information will be provided once your order ships.</p>
<h3>Returns Policy:</h3>
<p>We want you to be completely satisfied with your purchase. If you are not, you may return new, unused items within [14] days of delivery for a full refund. Custom or personalized items may not be eligible for return unless defective.</p>
<p>Please contact our support team to initiate a return.</p>
</div>
<div id="reviews" class="tab-content">
<h2>Customer Reviews</h2>
<div class="review-summary">
<span class="avg-rating">[4.5/5 Stars]</span>
<span class="total-reviews">(Based on XX reviews)</span>
</div>
<div class="review-list">
<div class="customer-review">
<div class="review-header">
<span class="reviewer-name">[Customer Name 1]</span>
<span class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<span class="review-date">[Date: e.g., January 15, 2023]</span>
</div>
<p class="review-title">[Review Title: e.g., Absolutely Stunning!]</p>
<p class="review-text">[Review text: "The craftsmanship is superb, and it looks even better in person. So happy with this unique piece!"]</p>
</div>
<div class="customer-review">
<div class="review-header">
<span class="reviewer-name">[Customer Name 2]</span>
<span class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
<span class="review-date">[Date: e.g., February 2, 2023]</span>
</div>
<p class="review-title">[Review Title: e.g., Great Gift Idea]</p>
<p class="review-text">[Review text: "Bought this as a gift, and my friend loved it. The quality is excellent for a handmade item."]</p>
</div>
</div>
<button class="write-review-button">Write a Review</button>
</div>
</div>
<aside class="related-products">
<h2>You might also like...</h2>
<div class="product-carousel">
<div class="related-product-item">
<img src="[Related Product 1 Image URL]" alt="[Related Product 1 Title]">
<h3><a href="#">[Related Product 1 Title]</a></h3>
<p class="price">[Price]</p>
</div>
<div class="related-product-item">
<img src="[Related Product 2 Image URL]" alt="[Related Product 2 Title]">
<h3><a href="#">[Related Product 2 Title]</a></h3>
<p class="price">[Price]</p>
</div>
<div class="related-product-item">
<img src="[Related Product 3 Image URL]" alt="[Related Product 3 Title]">
<h3><a href="#">[Related Product 3 Title]</a></h3>
<p class="price">[Price]</p>
</div>
<!-- More related products -->
</div>
</aside>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add to Cart Section</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="product-add-to-cart-section" aria-labelledby="productTitle">
<h1 id="productTitle">Hand-Carved Wooden Owl Figurine</h1>
<p class="product-price" aria-live="polite" aria-atomic="true">$29.99</p>
<form action="/add-to-cart" method="post">
<div class="product-options">
<div class="product-option-group">
<label for="material-option">Material:</label>
<select id="material-option" name="material" aria-required="true">
<option value="">Select Material</option>
<option value="oak">Oak</option>
<option value="maple">Maple</option>
<option value="walnut">Walnut</option>
</select>
</div>
<div class="product-option-group">
<label for="finish-option">Finish:</label>
<select id="finish-option" name="finish">
<option value="">Select Finish</option>
<option value="natural">Natural</option>
<option value="glossy">Glossy</option>
<option value="matte">Matte</option>
</select>
</div>
</div>
<div class="quantity-selector">
<label for="quantity">Quantity:</label>
<div class="quantity-input-wrapper">
<button type="button" class="quantity-button" aria-label="Decrease quantity">-</button>
<input type="number" id="quantity" name="quantity" value="1" min="1" max="99" aria-label="Product quantity" inputmode="numeric">
<button type="button" class="quantity-button" aria-label="Increase quantity">+</button>
</div>
</div>
<p class="availability-message in-stock" aria-live="polite">In Stock</p>
<!-- Example for other states:
<p class="availability-message low-stock" aria-live="polite">Low Stock! Only 3 left.</p>
<p class="availability-message out-of-stock" aria-live="polite">Out of Stock</p>
-->
<button type="submit" class="add-to-cart-button">Add to Cart</button>
</form>
</section>
<script>
// Basic JavaScript for quantity buttons (for demonstration)
document.addEventListener('DOMContentLoaded', () => {
const quantityInput = document.getElementById('quantity');
const decreaseBtn = quantityInput.previousElementSibling;
const increaseBtn = quantityInput.nextElementSibling;
decreaseBtn.addEventListener('click', () => {
let currentValue = parseInt(quantityInput.value);
if (currentValue > parseInt(quantityInput.min)) {
quantityInput.value = currentValue - 1;
}
});
increaseBtn.addEventListener('click', () => {
let currentValue = parseInt(quantityInput.value);
if (currentValue < parseInt(quantityInput.max)) {
quantityInput.value = currentValue + 1;
}
});
// Ensure quantity input always has a valid number
quantityInput.addEventListener('change', () => {
let val = parseInt(quantityInput.value);
if (isNaN(val) || val < parseInt(quantityInput.min)) {
quantityInput.value = quantityInput.min;
} else if (val > parseInt(quantityInput.max)) {
quantityInput.value = quantityInput.max;
}
});
});
</script>
</body>
</html>
<section class="related-products">
<h2>You might also like</h2>
<div class="product-grid">
<a href="#" class="product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250?text=Product+Image" alt="Handmade Clay Pottery">
</div>
<div class="product-details">
<h3 class="product-name">Rustic Clay Vase</h3>
<p class="product-price">$45.00</p>
<button class="view-product-button">View Product</button>
</div>
</a>
<a href="#" class="product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250?text=Product+Image" alt="Knitted Wool Blanket">
</div>
<div class="product-details">
<h3 class="product-name">Cozy Knitted Throw</h3>
<p class="product-price">$79.99</p>
<button class="view-product-button">View Product</button>
</div>
</a>
<a href="#" class="product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250?text=Product+Image" alt="Artisan Leather Wallet">
</div>
<div class="product-details">
<h3 class="product-name">Hand-Stitched Wallet</h3>
<p class="product-price">$55.50</p>
<button class="view-product-button">View Product</button>
</div>
</a>
<a href="#" class="product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250?text=Product+Image" alt="Custom Engraved Jewelry">
</div>
<div class="product-details">
<h3 class="product-name">Personalized Pendant</h3>
<p class="product-price">$30.00</p>
<button class="view-product-button">View Product</button>
</div>
</a>
</div>
</section>
<section id="customer-reviews" class="customer-reviews-section">
<div class="container">
<h2 class="section-title">What Our Customers Are Saying</h2>
<div class="reviews-summary">
<div class="overall-rating">
<span class="rating-value">4.8</span> out of 5 stars
<div class="stars" role="img" aria-label="Overall rating of 4.8 out of 5 stars">
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-half-filled"></span>
</div>
<p class="review-count">(Based on 750+ reviews)</p>
</div>
<a href="#leave-review-form" class="button primary-button">Leave a Review</a>
</div>
<div class="reviews-grid">
<article class="review-card">
<div class="review-header">
<div class="stars" role="img" aria-label="Rated 5 out of 5 stars">
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
</div>
<span class="review-date">January 15, 2024</span>
</div>
<h3 class="review-title">Absolutely Stunning Craftsmanship!</h3>
<p class="review-text">I ordered the handcrafted wooden jewelry box, and it exceeded all my expectations. The detail is incredible, and it feels so sturdy and well-made. Highly recommend this store for unique, quality items!</p>
<div class="review-author">
<span class="author-name">Sarah L.</span>
<span class="verified-buyer">Verified Buyer</span>
</div>
<p class="product-reviewed"><a href="#product-rustic-charm-necklace">Product: Rustic Charm Necklace</a></p>
</article>
<article class="review-card">
<div class="review-header">
<div class="stars" role="img" aria-label="Rated 4 out of 5 stars">
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-empty"></span>
</div>
<span class="review-date">January 08, 2024</span>
</div>
<h3 class="review-title">Beautiful Product, Fast Shipping</h3>
<p class="review-text">My custom-painted ceramic mug arrived quickly and was even more vibrant in person. The packaging was secure. Minor detail: the color was slightly different than on screen, but still lovely. Very happy overall!</p>
<div class="review-author">
<span class="author-name">Mark T.</span>
<span class="verified-buyer">Verified Buyer</span>
</div>
<p class="product-reviewed"><a href="#product-hand-painted-ceramic-mug">Product: Hand-Painted Ceramic Mug</a></p>
</article>
<article class="review-card">
<div class="review-header">
<div class="stars" role="img" aria-label="Rated 5 out of 5 stars">
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
</div>
<span class="review-date">December 28, 2023</span>
</div>
<h3 class="review-title">Perfect Gift Idea!</h3>
<p class="review-text">I bought a custom leather journal for my friend, and she absolutely adores it. The quality of the leather is premium, and the engraving was flawless. Will definitely purchase from here again for unique gifts.</p>
<div class="review-author">
<span class="author-name">Jessica R.</span>
<span class="verified-buyer">Verified Buyer</span>
</div>
<p class="product-reviewed"><a href="#product-personalized-leather-journal">Product: Personalized Leather Journal</a></p>
</article>
<article class="review-card">
<div class="review-header">
<div class="stars" role="img" aria-label="Rated 4 out of 5 stars">
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-filled"></span>
<span class="star star-empty"></span>
</div>
<span class="review-date">December 20, 2023</span>
</div>
<h3 class="review-title">Good Quality, Minor Shipping Delay</h3>
<p class="review-text">The handmade soap set smells wonderful and feels great on the skin. The packaging was lovely. There was a slight delay in shipping, but customer service was responsive and helpful.</p>
<div class="review-author">
<span class="author-name">Chris P.</span>
<span class="verified-buyer">Verified Buyer</span>
</div>
<p class="product-reviewed"><a href="#product-artisan-soap-collection">Product: Artisan Soap Collection</a></p>
</article>
</div>
<div class="view-more">
<a href="#all-reviews" class="button secondary-button">View All Reviews</a>
</div>
</div>
</section>
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Handmade Haven</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Craft Lane, Artisan City NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1-800-CRAFTS-U</span><br></br><a href="mailto:info@relume.io">support@handmadehaven.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Shop All</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Best Sellers</a></li><li><a href="#">About Us</a></li><li><a href="#">Gift Cards</a></li></ul><ul><li><a href="#">Help & FAQs</a></li><li><a href="#">Custom Creations</a></li><li><a href="#">Our Blog</a></li><li><a href="#">Become a Seller</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Handmade Haven. All rights reserved.</p><ul class="footer-2-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>
</body>
</html>

448
product_listing.html Normal file
View File

@ -0,0 +1,448 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>product_listing</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF_8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Category Filters</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<aside class="category-filters-section" aria-label="Product Category and Price Filters">
<h2>Filters</h2>
<div class="filter-group open" id="category-filter">
<h3 aria-controls="category-list" aria-expanded="true" tabindex="0">
Categories
</h3>
<div class="filter-group-content" id="category-list" role="group">
<ul class="filter-list">
<li>
<label for="filter-jewelry">
<input type="checkbox" id="filter-jewelry" name="category" value="jewelry">
<span>Jewelry</span>
</label>
</li>
<li>
<label for="filter-home-decor">
<input type="checkbox" id="filter-home-decor" name="category" value="home-decor">
<span>Home Decor</span>
</label>
</li>
<li>
<label for="filter-textiles">
<input type="checkbox" id="filter-textiles" name="category" value="textiles">
<span>Textiles</span>
</label>
</li>
<li>
<label for="filter-pottery">
<input type="checkbox" id="filter-pottery" name="category" value="pottery">
<span>Pottery</span>
</label>
</li>
<li>
<label for="filter-art">
<input type="checkbox" id="filter-art" name="category" value="art">
<span>Art & Paintings</span>
</label>
</li>
<li>
<label for="filter-accessories">
<input type="checkbox" id="filter-accessories" name="category" value="accessories">
<span>Accessories</span>
</label>
</li>
<li>
<label for="filter-custom-orders">
<input type="checkbox" id="filter-custom-orders" name="category" value="custom-orders">
<span>Custom Orders</span>
</label>
</li>
<li>
<label for="filter-gifts">
<input type="checkbox" id="filter-gifts" name="category" value="gifts">
<span>Gifts & Novelties</span>
</label>
</li>
</ul>
</div>
</div>
<div class="filter-group" id="price-filter">
<h3 aria-controls="price-range-content" aria-expanded="false" tabindex="0">
Price Range
</h3>
<div class="filter-group-content" id="price-range-content" role="group">
<div class="price-range-inputs">
<label for="price-min" class="sr-only">Minimum Price</label>
<input type="number" id="price-min" name="min_price" value="0" min="0" placeholder="Min">
<span>—</span>
<label for="price-max" class="sr-only">Maximum Price</label>
<input type="number" id="price-max" name="max_price" value="500" min="0" placeholder="Max">
</div>
</div>
</div>
<button type="submit" class="apply-filters-button">Apply Filters</button>
</aside>
<script>
// JavaScript for toggling filter groups
document.querySelectorAll('.filter-group h3').forEach(header => {
header.addEventListener('click', () => {
const group = header.closest('.filter-group');
const content = group.querySelector('.filter-group-content');
const isExpanded = header.getAttribute('aria-expanded') === 'true';
group.classList.toggle('open');
header.setAttribute('aria-expanded', !isExpanded);
// Simple toggle for display, max-height transition handled by CSS
});
});
// Initialize first filter group as open
document.addEventListener('DOMContentLoaded', () => {
const firstGroup = document.querySelector('.filter-group.open');
if (firstGroup) {
const header = firstGroup.querySelector('h3');
header.setAttribute('aria-expanded', 'true');
// Ensure content max-height is set correctly on load if open class is present
// This is mostly handled by the CSS max-height transition on display,
// but can be refined with JS if dynamic height calculation is needed.
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Bar - Handmade Crafts Store</title>
<link rel="stylesheet" href="style.css" />
<!-- FontAwesome for search icon (optional, for visual fidelity in wireframe) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section class="search-section" aria-labelledby="search-section-title">
<h2 id="search-section-title">Discover Unique Handmade Crafts</h2>
<div class="search-bar-container">
<div class="search-bar">
<label for="product-search" class="sr-only">Search for products</label>
<input type="search" id="product-search" name="q" placeholder="Search for products, materials, or ideas..." aria-label="Search products" autocomplete="off">
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
<button type="submit" class="search-button">Search</button>
</div>
<div class="filters-container">
<div class="filter-group">
<label for="category-filter">Category</label>
<select id="category-filter" name="category" aria-label="Filter by category">
<option value="">All Categories</option>
<option value="jewelry">Jewelry</option>
<option value="home-decor">Home Decor</option>
<option value="textiles">Textiles</option>
<option value="pottery">Pottery</option>
<option value="art">Art & Prints</option>
<option value="accessories">Accessories</option>
<option value="other">Other Crafts</option>
</select>
</div>
<div class="filter-group">
<label for="price-min">Price Range</label>
<div class="price-range">
<input type="number" id="price-min" name="price_min" placeholder="Min" min="0" aria-label="Minimum price">
<input type="number" id="price-max" name="price_max" placeholder="Max" min="0" aria-label="Maximum price">
</div>
</div>
<div class="filter-group">
<label for="sort-by">Sort By</label>
<select id="sort-by" name="sort" aria-label="Sort search results by">
<option value="relevance">Relevance</option>
<option value="newest">Newest Arrivals</option>
<option value="price-asc">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
<option value="popularity">Most Popular</option>
</select>
</div>
</div>
<!-- Wireframe Placeholder for Search Results -->
<div class="placeholder-image">
<p>Placeholder: Illustrative Product Display Area</p>
</div>
<div class="placeholder-text">
<p>Placeholder: This section would dynamically display search results, potentially with product cards showing image, title, price, and add-to-cart button. Results would update based on search query and filter selections.</p>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Grid Display</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="product-grid-section" aria-labelledby="productGridTitle">
<header class="product-grid-section__header">
<h2 id="productGridTitle" class="product-grid-section__title">Our Handmade Crafts</h2>
<p class="product-grid-section__description">Discover unique, handcrafted items made with passion. Explore our diverse collection, from intricate jewelry to bespoke home decor.</p>
</header>
<div class="product-grid-controls">
<div class="product-grid-controls__filter-group">
<label for="category-filter" class="product-grid-controls__label">Category:</label>
<select id="category-filter" class="product-grid-controls__select" aria-label="Filter products by category">
<option value="all">All Crafts</option>
<option value="jewelry">Jewelry</option>
<option value="home-decor">Home Decor</option>
<option value="art">Art & Prints</option>
<option value="textiles">Textiles</option>
<option value="ceramics">Ceramics</option>
<option value="woodwork">Woodwork</option>
</select>
</div>
<div class="product-grid-controls__filter-group">
<label for="price-filter" class="product-grid-controls__label">Price Range:</label>
<select id="price-filter" class="product-grid-controls__select" aria-label="Filter products by price range">
<option value="all">All Prices</option>
<option value="under-25">Under $25</option>
<option value="25-50">$25 - $50</option>
<option value="50-100">$50 - $100</option>
<option value="over-100">Over $100</option>
</select>
</div>
<div class="product-grid-controls__sort-group">
<label for="sort-by" class="product-grid-controls__label">Sort By:</label>
<select id="sort-by" class="product-grid-controls__select" aria-label="Sort products by attribute">
<option value="featured">Featured</option>
<option value="newest">Newest Arrivals</option>
<option value="price-asc">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
</select>
</div>
</div>
<div class="product-grid">
<!-- Product Card 1 -->
<article class="product-card">
<a href="#product-detail-1" aria-label="View details for Hand-painted Ceramic Vase" class="product-card__image-wrapper">
<img src="https://via.placeholder.com/300x300/e0e0e0/555555?text=Ceramic+Vase" alt="Hand-painted Ceramic Vase with abstract patterns" class="product-card__image">
</a>
<div class="product-card__content">
<div>
<h3 class="product-card__title">Hand-painted Ceramic Vase</h3>
<span class="product-card__category">Category: Home Decor</span>
</div>
<span class="product-card__price">$49.99</span>
<button class="product-card__add-to-cart" aria-label="Add Hand-painted Ceramic Vase to cart">Add to Cart</button>
</div>
</article>
<!-- Product Card 2 -->
<article class="product-card">
<a href="#product-detail-2" aria-label="View details for Artisan Leather Wallet" class="product-card__image-wrapper">
<img src="https://via.placeholder.com/300x300/d0d0d0/444444?text=Leather+Wallet" alt="Dark brown artisan leather wallet with stitching details" class="product-card__image">
</a>
<div class="product-card__content">
<div>
<h3 class="product-card__title">Artisan Leather Wallet</h3>
<span class="product-card__category">Category: Accessories</span>
</div>
<span class="product-card__price">$75.00</span>
<button class="product-card__add-to-cart" aria-label="Add Artisan Leather Wallet to cart">Add to Cart</button>
</div>
</article>
<!-- Product Card 3 -->
<article class="product-card">
<a href="#product-detail-3" aria-label="View details for Sterling Silver Leaf Necklace" class="product-card__image-wrapper">
<img src="https://via.placeholder.com/300x300/f0f0f0/666666?text=Leaf+Necklace" alt="Delicate sterling silver necklace with a small leaf pendant" class="product-card__image">
</a>
<div class="product-card__content">
<div>
<h3 class="product-card__title">Sterling Silver Leaf Necklace</h3>
<span class="product-card__category">Category: Jewelry</span>
</div>
<span class="product-card__price">$35.50</span>
<button class="product-card__add-to-cart" aria-label="Add Sterling Silver Leaf Necklace to cart">Add to Cart</button>
</div>
</article>
<!-- Product Card 4 -->
<article class="product-card">
<a href="#product-detail-4" aria-label="View details for Hand-knitted Wool Scarf" class="product-card__image-wrapper">
<img src="https://via.placeholder.com/300x300/c0c0c0/333333?text=Wool+Scarf" alt="Cozy hand-knitted wool scarf in a warm grey color" class="product-card__image">
</a>
<div class="product-card__content">
<div>
<h3 class="product-card__title">Hand-knitted Wool Scarf</h3>
<span class="product-card__category">Category: Textiles</span>
</div>
<span class="product-card__price">$62.00</span>
<button class="product-card__add-to-cart" aria-label="Add Hand-knitted Wool Scarf to cart">Add to Cart</button>
</div>
</article>
<!-- Product Card 5 -->
<article class="product-card">
<a href="#product-detail-5" aria-label="View details for Abstract Canvas Painting" class="product-card__image-wrapper">
<img src="https://via.placeholder.com/300x300/e5e5e5/777777?text=Abstract+Art" alt="Vibrant abstract canvas painting with blue and orange hues" class="product-card__image">
</a>
<div class="product-card__content">
<div>
<h3 class="product-card__title">Abstract Canvas Painting</h3>
<span class="product-card__category">Category: Art & Prints</span>
</div>
<span class="product-card__price">$120.00</span>
<button class="product-card__add-to-cart" aria-label="Add Abstract Canvas Painting to cart">Add to Cart</button>
</div>
</article>
<!-- Product Card 6 -->
<article class="product-card">
<a href="#product-detail-6" aria-label="View details for Custom Engraved Wooden Coasters" class="product-card__image-wrapper">
<img src="https://via.placeholder.com/300x300/f5f5f5/888888?text=Wooden+Coasters" alt="Set of four custom engraved wooden coasters with a minimalist design" class="product-card__image">
</a>
<div class="product-card__content">
<div>
<h3 class="product-card__title">Custom Engraved Wooden Coasters</h3>
<span class="product-card__category">Category: Home Decor</span>
</div>
<span class="product-card__price">$28.99</span>
<button class="product-card__add-to-cart" aria-label="Add Custom Engraved Wooden Coasters to cart">Add to Cart</button>
</div>
</article>
<!-- Product Card 7 -->
<article class="product-card">
<a href="#product-detail-7" aria-label="View details for Hand-Poured Soy Candle" class="product-card__image-wrapper">
<img src="https://via.placeholder.com/300x300/e0e0e0/555555?text=Soy+Candle" alt="Hand-poured soy candle in a decorative glass jar with a wooden lid" class="product-card__image">
</a>
<div class="product-card__content">
<div>
<h3 class="product-card__title">Hand-Poured Soy Candle</h3>
<span class="product-card__category">Category: Home Decor</span>
</div>
<span class="product-card__price">$19.50</span>
<button class="product-card__add-to-cart" aria-label="Add Hand-Poured Soy Candle to cart">Add to Cart</button>
</div>
</article>
<!-- Product Card 8 -->
<article class="product-card">
<a href="#product-detail-8" aria-label="View details for Unique Ceramic Mug" class="product-card__image-wrapper">
<img src="https://via.placeholder.com/300x300/d0d0d0/444444?text=Ceramic+Mug" alt="Unique handmade ceramic mug with a speckled glaze and comfortable handle" class="product-card__image">
</a>
<div class="product-card__content">
<div>
<h3 class="product-card__title">Unique Ceramic Mug</h3>
<span class="product-card__category">Category: Ceramics</span>
</div>
<span class="product-card__price">$24.00</span>
<button class="product-card__add-to-cart" aria-label="Add Unique Ceramic Mug to cart">Add to Cart</button>
</div>
</article>
</div>
<nav class="product-grid-pagination" aria-label="Product Pagination">
<a href="#" class="pagination-link" aria-label="Go to previous page">&laquo;</a>
<a href="#" class="pagination-link is-active" aria-current="page" aria-label="Current page, page 1">1</a>
<a href="#" class="pagination-link" aria-label="Go to page 2">2</a>
<a href="#" class="pagination-link" aria-label="Go to page 3">3</a>
<span class="pagination-link" aria-hidden="true">...</span>
<a href="#" class="pagination-link" aria-label="Go to page 10">10</a>
<a href="#" class="pagination-link" aria-label="Go to next page">&raquo;</a>
</nav>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Range Filter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<aside class="filter-section" aria-labelledby="price-filter-heading">
<h3 id="price-filter-heading">Price Range</h3>
<div class="price-inputs">
<div class="price-input-group">
<label for="min-price">Min Price</label>
<input type="number" id="min-price" name="min_price" value="50" min="0" placeholder="Min" aria-label="Minimum Price">
</div>
<span class="price-range-separator">-</span>
<div class="price-input-group">
<label for="max-price">Max Price</label>
<input type="number" id="max-price" name="max_price" value="500" min="0" placeholder="Max" aria-label="Maximum Price">
</div>
</div>
<div class="range-slider-container">
<!-- Placeholder for a more advanced dual-thumb slider, or a single range input -->
<input type="range" class="range-slider" min="0" max="1000" value="50" id="price-range-start" aria-label="Price Range Start">
<input type="range" class="range-slider" min="0" max="1000" value="500" id="price-range-end" aria-label="Price Range End">
<!-- In a real implementation, these would likely be combined into one complex JS slider or two linked inputs -->
<!-- For wireframe, two simple sliders represent the concept of a range selection mechanism -->
</div>
<button type="button" class="apply-filter-button" aria-controls="product-list">Apply Filters</button>
</aside>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sort Options - Online Store</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section aria-labelledby="sortOptionsHeading" class="sort-options-section">
<h2 id="sortOptionsHeading">Sort Products</h2>
<div class="sort-control">
<label for="sort-by">Sort by:</label>
<select id="sort-by" name="sort-by">
<option value="relevance">Relevance</option>
<option value="price-asc">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
<option value="newest">Newest Arrivals</option>
<option value="popularity">Popularity</option>
<option value="rating">Average Customer Review</option>
</select>
</div>
</section>
</body>
</html>
<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">Crafted Wonders</h3><p class="footer-1-newsletter-text">Be the first to discover new handcrafted treasures and exclusive offers!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Sign Up</button></div><p class="footer-1-privacy-note"><span>By signing up, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive marketing emails.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Shop All Crafts</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Featured Collections</a></li><li><a href="#">Gift Ideas</a></li><li><a href="#">Our Artisans</a></li></ul></div><div class="footer-1-column"><h4>Customer Care</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Shipping Information</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Order Tracking</a></li><li><a href="#">FAQs</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</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>© 2024 Crafted Wonders. All rights reserved.</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>
</body>
</html>

281
shopping_cart.html Normal file
View File

@ -0,0 +1,281 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shopping_cart</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Handcrafted with Heart</p><h2 class="text-2-heading">Unearth Authentic Handmade Treasures</h2><p class="text-2-description">Explore a curated collection of unique, handcrafted goods made with passion and precision. From charming decor to personalized gifts, find pieces that tell a story and add warmth to your life.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Explore Our Collections</button><button class="text-2-btn text-2-outline">Discover Our Story</button></div></section></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Item List</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="cart-section" aria-labelledby="cart-heading">
<h2 id="cart-heading">Your Shopping Cart</h2>
<div class="cart-item-list">
<!-- Cart Item 1 -->
<article class="cart-item" aria-label="Craft item: Rustic Wooden Clock">
<img src="https://via.placeholder.com/100x100/f3f4f6/555555?text=Product+Image" alt="Rustic Wooden Clock" class="cart-item-image">
<div class="cart-item-details">
<h3>Rustic Wooden Clock</h3>
<p>Hand-carved, natural finish</p>
</div>
<div class="cart-item-actions">
<div class="quantity-control">
<button type="button" aria-label="Decrease quantity of Rustic Wooden Clock">-</button>
<span aria-live="polite" aria-atomic="true">1</span>
<button type="button" aria-label="Increase quantity of Rustic Wooden Clock">+</button>
</div>
</div>
<div class="cart-item-price" aria-label="Price: $49.99">$49.99</div>
<button type="button" class="remove-item-button" aria-label="Remove Rustic Wooden Clock from cart">
&#x2715; <!-- Unicode for multiplication sign (X) -->
</button>
</article>
<!-- Cart Item 2 -->
<article class="cart-item" aria-label="Craft item: Ceramic Coffee Mug Set">
<img src="https://via.placeholder.com/100x100/e0e0e0/333333?text=Product+Image" alt="Ceramic Coffee Mug Set" class="cart-item-image">
<div class="cart-item-details">
<h3>Ceramic Coffee Mug Set (Set of 2)</h3>
<p>Hand-painted, microwave safe</p>
</div>
<div class="cart-item-actions">
<div class="quantity-control">
<button type="button" aria-label="Decrease quantity of Ceramic Coffee Mug Set">-</button>
<span aria-live="polite" aria-atomic="true">1</span>
<button type="button" aria-label="Increase quantity of Ceramic Coffee Mug Set">+</button>
</div>
</div>
<div class="cart-item-price" aria-label="Price: $29.50">$29.50</div>
<button type="button" class="remove-item-button" aria-label="Remove Ceramic Coffee Mug Set from cart">
&#x2715;
</button>
</article>
<!-- Cart Item 3 -->
<article class="cart-item" aria-label="Craft item: Artisan Leather Wallet">
<img src="https://via.placeholder.com/100x100/d5d5d5/222222?text=Product+Image" alt="Artisan Leather Wallet" class="cart-item-image">
<div class="cart-item-details">
<h3>Artisan Leather Wallet</h3>
<p>Genuine leather, handcrafted stitching</p>
</div>
<div class="cart-item-actions">
<div class="quantity-control">
<button type="button" aria-label="Decrease quantity of Artisan Leather Wallet">-</button>
<span aria-live="polite" aria-atomic="true">2</span>
<button type="button" aria-label="Increase quantity of Artisan Leather Wallet">+</button>
</div>
</div>
<div class="cart-item-price" aria-label="Price: $70.00">$70.00</div>
<button type="button" class="remove-item-button" aria-label="Remove Artisan Leather Wallet from cart">
&#x2715;
</button>
</article>
<!-- Example of an empty cart message (uncomment to see) -->
<!--
<div class="empty-cart-message" role="status">
Your cart is currently empty. Start browsing our beautiful crafts!
</div>
-->
</div>
<aside class="cart-summary" aria-labelledby="summary-heading">
<h3 id="summary-heading" style="display: none;">Order Summary</h3> <!-- Hidden, used for accessibility -->
<div class="summary-row">
<span>Subtotal:</span>
<span>$219.49</span> <!-- (49.99 + 29.50 + 70.00*2) - Update dynamically -->
</div>
<div class="summary-row">
<span>Shipping:</span>
<span>$10.00</span>
</div>
<div class="summary-row">
<span>Tax (GST):</span>
<span>$8.78</span>
</div>
<div class="summary-row total">
<span>Order Total:</span>
<span>$238.27</span>
</div>
<button type="button" class="checkout-button">Proceed to Checkout</button>
</aside>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Summary</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="cart-summary" aria-labelledby="cart-summary-heading">
<h2 id="cart-summary-heading">Your Cart Summary</h2>
<div class="cart-items">
<!-- Cart Item 1 -->
<article class="cart-item" aria-labelledby="item-name-1">
<div class="item-image">
<!-- Placeholder for product image -->
<img src="https://via.placeholder.com/100x100/FFC107/FFFFFF?text=Craft+Item+1" alt="Handmade Ceramic Mug">
</div>
<div class="item-details">
<h3 id="item-name-1">Handmade Ceramic Mug</h3>
<p>SKU: CMUG001</p>
<p>Color: Ocean Blue</p>
</div>
<div class="item-actions">
<div class="item-quantity">
<label for="qty-1" class="sr-only">Quantity for Handmade Ceramic Mug</label>
<input type="number" id="qty-1" value="1" min="1" aria-label="Quantity">
</div>
<div class="item-price" aria-label="Price">$18.99</div>
<button class="remove-item" aria-label="Remove Handmade Ceramic Mug from cart">Remove</button>
</div>
</article>
<!-- Cart Item 2 -->
<article class="cart-item" aria-labelledby="item-name-2">
<div class="item-image">
<!-- Placeholder for product image -->
<img src="https://via.placeholder.com/100x100/5C6BC0/FFFFFF?text=Craft+Item+2" alt="Artisanal Leather Journal">
</div>
<div class="item-details">
<h3 id="item-name-2">Artisanal Leather Journal</h3>
<p>SKU: LJO005</p>
<p>Size: A5</p>
</div>
<div class="item-actions">
<div class="item-quantity">
<label for="qty-2" class="sr-only">Quantity for Artisanal Leather Journal</label>
<input type="number" id="qty-2" value="2" min="1" aria-label="Quantity">
</div>
<div class="item-price" aria-label="Price">$35.00</div>
<button class="remove-item" aria-label="Remove Artisanal Leather Journal from cart">Remove</button>
</div>
</article>
<!-- Cart Item 3 (Example: more items, or remove some for testing empty state) -->
<article class="cart-item" aria-labelledby="item-name-3">
<div class="item-image">
<!-- Placeholder for product image -->
<img src="https://via.placeholder.com/100x100/4CAF50/FFFFFF?text=Craft+Item+3" alt="Hand-knitted Wool Scarf">
</div>
<div class="item-details">
<h3 id="item-name-3">Hand-knitted Wool Scarf</h3>
<p>SKU: KNIT010</p>
<p>Material: Merino Wool</p>
</div>
<div class="item-actions">
<div class="item-quantity">
<label for="qty-3" class="sr-only">Quantity for Hand-knitted Wool Scarf</label>
<input type="number" id="qty-3" value="1" min="1" aria-label="Quantity">
</div>
<div class="item-price" aria-label="Price">$25.50</div>
<button class="remove-item" aria-label="Remove Hand-knitted Wool Scarf from cart">Remove</button>
</div>
</article>
</div>
<div class="cart-summary-totals">
<div>
<span>Subtotal:</span>
<span id="cart-subtotal">$94.49</span>
</div>
<div>
<span>Shipping:</span>
<span id="cart-shipping">$5.00</span>
</div>
<div>
<span>Tax (5%):</span>
<span id="cart-tax">$4.72</span>
</div>
<div class="total-amount">
<span>Total:</span>
<span id="cart-total">$104.21</span>
</div>
</div>
<div class="cart-actions">
<a href="#" class="button button-secondary" role="button" aria-label="Continue shopping">Continue Shopping</a>
<a href="#" class="button button-primary" role="button" aria-label="Proceed to checkout">Proceed to Checkout</a>
</div>
<!-- Optional: Example of an empty cart state (uncomment to see) -->
<!--
<div class="cart-empty">
<p>Your cart is currently empty.</p>
<a href="#" class="button button-primary">Start Shopping</a>
</div>
-->
</section>
</body>
</html>
<section class="checkout-section">
<div class="checkout-summary">
<p class="summary-line subtotal">
<span class="summary-label">Subtotal:</span>
<span class="summary-value">$[Cart Subtotal Placeholder]</span>
</p>
<p class="summary-line total">
<span class="summary-label">Total:</span>
<span class="summary-value">$[Final Total Placeholder]</span>
</p>
</div>
<div class="checkout-actions">
<button type="button" class="proceed-to-checkout-button">Proceed to Checkout</button>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Continue Shopping</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="continue-shopping-section" aria-labelledby="continueShoppingHeading">
<h2 id="continueShoppingHeading">Shopping Cart Updated!</h2>
<p>Your cart has been successfully updated. Ready to explore more unique crafts?</p>
<a href="/products" class="continue-shopping-link" aria-label="Continue shopping and browse more products">
Browse More Products
</a>
</section>
</body>
</html>
<section class="empty-cart-message" aria-labelledby="emptyCartHeading">
<div class="empty-cart-container">
<div class="empty-cart-icon-wrapper">
<!-- Placeholder for an empty cart icon -->
<span class="empty-cart-icon" aria-hidden="true">&#x1F6D2;</span>
</div>
<h2 id="emptyCartHeading" class="empty-cart-title">Your Cart is Empty</h2>
<p class="empty-cart-description">
Looks like you haven't added any beautiful handmade crafts yet.
Let's find something special for you!
</p>
<a href="/products" class="empty-cart-button">Start Shopping</a>
</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">Crafted Wonders</h3><p class="footer-1-newsletter-text">Be the first to discover new handcrafted treasures and exclusive offers!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Sign Up</button></div><p class="footer-1-privacy-note"><span>By signing up, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive marketing emails.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Shop All Crafts</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Featured Collections</a></li><li><a href="#">Gift Ideas</a></li><li><a href="#">Our Artisans</a></li></ul></div><div class="footer-1-column"><h4>Customer Care</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Shipping Information</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Order Tracking</a></li><li><a href="#">FAQs</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</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>© 2024 Crafted Wonders. All rights reserved.</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>
</body>
</html>

25
sign_up.html Normal file
View File

@ -0,0 +1,25 @@
<body id="i9o6"><meta charset="UTF-8" id="ipaj"/><meta name="viewport" content="width=device-width, initial-scale=1.0" id="iquu"/><title id="ibpl">sign_up</title><link rel="stylesheet" href="style.css"/><div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li id="iklft"><a href="home.html">Home</a></li><li id="irymu"><a href="about.html" id="i4xjl">Our Story</a></li><li id="i26sn"><a href="contact.html">Contact</a></li><li><a href="services.html" id="iwvm3">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div><section id="signup-form-section"><div class="signup-container"><h2 id="i8j1n">Create Your Account First</h2><p class="signup-intro-text">Join our community of craft lovers! Sign up to explore unique handmade products.</p><form action="/signup" method="POST" class="signup-form"><div class="form-group"><label for="fullName">Full Name</label><input type="text" id="fullName" name="fullName" placeholder="Enter your full name" required aria-required="true"/></div><div class="form-group"><label for="email">Email Address</label><input type="email" id="email" name="email" placeholder="your.email@example.com" required aria-required="true"/></div><div class="form-group"><label for="password">Password</label><input type="password" id="password" name="password" placeholder="Create a strong password" required aria-required="true" minlength="8"/></div><div class="form-group"><label for="confirmPassword">Confirm Password</label><input type="password" id="confirmPassword" name="confirmPassword" placeholder="Re-enter your password" required aria-required="true" minlength="8"/></div><button type="submit" class="signup-button">Sign Up</button></form><p class="login-prompt">
Already have an account? <a href="/login" class="login-link">Log In</a></p></div></section><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title id="i7y5w">Welcome to Our Store</title><link rel="stylesheet" href="style.css" id="i7utc"/><section class="welcome-section"><div class="welcome-container"><h1 class="welcome-heading"><a href="" id="i9fvmk">Welcome to Our Handmade Crafts Store!</a></h1><p class="welcome-text">Discover a unique collection of handcrafted treasures made with passion and precision. or log in to explore our diverse categories,
manage your profile, track orders, and bring home something special.
</p><div class="welcome-cta-group"><a href="#browse-products" class="welcome-button primary">Browse Products</a><a href="#login-signup" class="welcome-button secondary">Log In / Sign Up</a></div></div></section><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Privacy Policy Link</title><link rel="stylesheet" href="style.css"/><section aria-labelledby="privacyPolicyHeading" class="privacy-policy-section"><div class="container"><h2 id="privacyPolicyHeading">Your Privacy Matters to Us     <a href="" id="iqtqnk"> image</a></h2><p>
At [Your Store Name], we are committed to protecting your personal data and privacy. We only collect the information necessary to provide you with the best shopping experience, process your orders securely, and keep your account safe.
</p><p>
Learn more about how we handle your data, our data collection practices, and your rights regarding your personal information.
</p><div class="privacy-link-wrapper"><a href="/privacy-policy" aria-label="Read our Privacy Policy">View Our Privacy Policy</a></div></div></section><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Terms of Service Checkbox</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/><link rel="stylesheet" href="style.css"/><section aria-labelledby="terms-of-service-heading" class="terms-of-service-container"><h2 id="terms-of-service-heading">Confirm Your Details</h2><form action="#" method="POST"><div class="terms-checkbox-group"><input type="checkbox" id="agreeToTerms" name="agreeToTerms" required aria-required="true"/><label for="agreeToTerms">
I agree to the <a href="#/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> and <a href="#/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> of the Handmade Crafts Store.
</label></div><button type="submit" id="proceedToPaymentButton" class="submit-button">
Proceed to Payment
</button></form></section><script>
// Optional: Simple JS to enable/disable button if checkbox is required
document.addEventListener('DOMContentLoaded', function() {
const checkbox = document.getElementById('agreeToTerms');
const submitButton = document.getElementById('proceedToPaymentButton');
// Set initial state
submitButton.disabled = !checkbox.checked;
checkbox.addEventListener('change', function() {
submitButton.disabled = !this.checked;
});
});
</script><nav aria-label="User authentication links" class="user-auth-nav"><ul class="auth-links-list"><li><a href="#login" class="auth-link login-btn">Login</a></li><li><a href="#signup" class="auth-link signup-btn">Sign Up</a></li></ul></nav><div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Handmade Haven</h3><p><strong>Address:</strong><br/><br/><span>Level 1, 12 Craft Lane, Artisan City NSW 2000</span></p><p><strong>Contact:</strong><br/><br/><span>1-800-CRAFTS-U</span><br/><br/><a href="mailto:info@relume.io">support@handmadehaven.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Shop All</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Best Sellers</a></li><li><a href="#">About Us</a></li><li><a href="#">Gift Cards</a></li></ul><ul><li><a href="#">Help &amp; FAQs</a></li><li><a href="#">Custom Creations</a></li><li><a href="#">Our Blog</a></li><li><a href="#">Become a Seller</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Handmade Haven. All rights reserved.</p><ul class="footer-2-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></body>

0
style.css Normal file
View File

276
user_dashboard.html Normal file
View File

@ -0,0 +1,276 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>user_dashboard</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Handcrafted with Heart</p><h2 class="text-2-heading">Unearth Authentic Handmade Treasures</h2><p class="text-2-description">Explore a curated collection of unique, handcrafted goods made with passion and precision. From charming decor to personalized gifts, find pieces that tell a story and add warmth to your life.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Explore Our Collections</button><button class="text-2-btn text-2-outline">Discover Our Story</button></div></section></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Summary</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="order-summary-container">
<header class="order-summary-header">
<h1>Your Order Summary</h1>
<p>Please review your order before confirming your purchase.</p>
</header>
<section class="order-section order-details">
<h2>Order Details</h2>
<div class="order-items">
<article class="order-item">
<div class="order-item-thumbnail" aria-hidden="true">Image</div>
<div class="order-item-details">
<h3>Hand-painted Ceramic Mug</h3>
<p>Quantity: 1 | Color: Blue | Size: Standard</p>
</div>
<div class="order-item-price">$24.99</div>
</article>
<article class="order-item">
<div class="order-item-thumbnail" aria-hidden="true">Image</div>
<div class="order-item-details">
<h3>Embroidered Tote Bag</h3>
<p>Quantity: 2 | Design: Floral | Material: Canvas</p>
</div>
<div class="order-item-price">$59.98</div>
</article>
<article class="order-item">
<div class="order-item-thumbnail" aria-hidden="true">Image</div>
<div class="order-item-details">
<h3>Artisanal Soap Bar Set</h3>
<p>Quantity: 1 | Scent: Lavender & Rose | Pack: 3</p>
</div>
<div class="order-item-price">$18.50</div>
</article>
</div>
</section>
<section class="order-section order-summary-pricing">
<h2>Pricing Summary</h2>
<div class="summary-row">
<span>Subtotal:</span>
<span>$103.47</span>
</div>
<div class="summary-row">
<span>Shipping:</span>
<span>$7.50</span>
</div>
<div class="summary-row">
<span>Discount:</span>
<span>-$5.00</span>
</div>
<div class="summary-row total">
<span>Order Total:</span>
<span>$105.97</span>
</div>
</section>
<section class="order-section order-info">
<h2>Delivery & Payment</h2>
<div class="shipping-address">
<h3>Shipping Address</h3>
<address>
<p><strong>John Doe</strong></p>
<p>123 Craft Lane</p>
<p>Artisanal City, AC 98765</p>
<p>United States</p>
<p>Phone: (555) 123-4567</p>
</address>
</div>
<div class="payment-method">
<h3>Payment Method</h3>
<p><strong>Credit Card:</strong> **** **** **** 4242</p>
<p><strong>Payment Gateway:</strong> Stripe</p>
</div>
</section>
<footer class="order-actions">
<a href="#" class="btn-checkout">Proceed to Payment ($105.97)</a>
</footer>
</div>
</body>
</html>
<section class="recent-orders-section">
<div class="container">
<h2 class="section-title">Your Recent Orders</h2>
<div class="orders-table-wrapper">
<table class="orders-table">
<thead>
<tr>
<th>Order ID</th>
<th>Date</th>
<th>Total</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Order ID">#ODR78901</td>
<td data-label="Date">2023-10-26</td>
<td data-label="Total">$125.00</td>
<td data-label="Status"><span class="status-badge status-delivered">Delivered</span></td>
<td data-label="Actions"><a href="/orders/ODR78901" class="btn-view-details">View Details</a></td>
</tr>
<tr>
<td data-label="Order ID">#ODR78902</td>
<td data-label="Date">2023-10-25</td>
<td data-label="Total">$50.00</td>
<td data-label="Status"><span class="status-badge status-processing">Processing</span></td>
<td data-label="Actions"><a href="/orders/ODR78902" class="btn-view-details">View Details</a></td>
</tr>
<tr>
<td data-label="Order ID">#ODR78903</td>
<td data-label="Date">2023-10-24</td>
<td data-label="Total">$200.00</td>
<td data-label="Status"><span class="status-badge status-shipped">Shipped</span></td>
<td data-label="Actions"><a href="/orders/ODR78903" class="btn-view-details">View Details</a></td>
</tr>
<tr>
<td data-label="Order ID">#ODR78904</td>
<td data-label="Date">2023-10-23</td>
<td data-label="Total">$75.50</td>
<td data-label="Status"><span class="status-badge status-cancelled">Cancelled</span></td>
<td data-label="Actions"><a href="/orders/ODR78904" class="btn-view-details">View Details</a></td>
</tr>
<!-- Example of a 'No Orders' state, to be toggled by JS/backend logic -->
<!--
<tr>
<td colspan="5" class="no-orders-message">You haven't placed any orders yet. Start browsing our crafts!</td>
</tr>
-->
</tbody>
</table>
</div>
<div class="view-all-orders-link">
<a href="/order-history" class="btn btn-primary">View All Orders History</a>
</div>
</div>
</section>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Crafted Gems</div><ul class="nav-1-nav-links"><li><a href="home.html">Shop Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Get In Touch</a></li><li><a href="services.html">Gift Ideas</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Discover<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">Sign Up</button><button class="nav-1-btn nav-1-solid">Shop Now</button></div></nav></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Settings Overview</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="account-settings-overview">
<header>
<h1>Account Settings Overview</h1>
</header>
<section class="settings-grid" aria-labelledby="settings-sections-heading">
<h2 id="settings-sections-heading" style="clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;">Manage your account details and preferences</h2>
<div class="setting-card" role="group" aria-labelledby="profile-settings-heading">
<h2 id="profile-settings-heading">Profile Information</h2>
<p>Update your personal details like name, email, and shipping address.</p>
<a href="#edit-profile" class="action-link">Edit Profile</a>
</div>
<div class="setting-card" role="group" aria-labelledby="security-settings-heading">
<h2 id="security-settings-heading">Security & Password</h2>
<p>Change your password and manage your account security settings.</p>
<a href="#change-password" class="action-link">Manage Security</a>
</div>
<div class="setting-card" role="group" aria-labelledby="payment-settings-heading">
<h2 id="payment-settings-heading">Payment Methods</h2>
<p>Add, edit, or remove your saved payment methods for faster checkout.</p>
<a href="#manage-payments" class="action-link">Manage Payments</a>
</div>
<div class="setting-card" role="group" aria-labelledby="address-book-heading">
<h2 id="address-book-heading">Address Book</h2>
<p>View and manage your saved shipping and billing addresses.</p>
<a href="#manage-addresses" class="action-link">Manage Addresses</a>
</div>
<div class="setting-card" role="group" aria-labelledby="notifications-heading">
<h2 id="notifications-heading">Notification Preferences</h2>
<p>Control the types of emails and notifications you receive from us.</p>
<a href="#manage-notifications" class="action-link">Manage Preferences</a>
</div>
<div class="setting-card" role="group" aria-labelledby="privacy-settings-heading">
<h2 id="privacy-settings-heading">Privacy Settings</h2>
<p>Review and adjust your privacy settings regarding data usage.</p>
<a href="#manage-privacy" class="action-link">Manage Privacy</a>
</div>
</section>
<section class="order-history" aria-labelledby="order-history-heading">
<h2 id="order-history-heading">Your Recent Orders</h2>
<div class="order-list">
<!-- Example Order Item 1 -->
<div class="order-item">
<div>
<span class="order-id">Order #ABCD12345</span>
<p class="order-date">Placed on: Jan 15, 2024</p>
</div>
<div>
<p class="order-total">Total: $75.50</p>
<span class="order-status completed">Completed</span>
</div>
<a href="#order-details-12345" class="view-details-link">View Details</a>
</div>
<!-- Example Order Item 2 -->
<div class="order-item">
<div>
<span class="order-id">Order #EFGH67890</span>
<p class="order-date">Placed on: Feb 01, 2024</p>
</div>
<div>
<p class="order-total">Total: $42.00</p>
<span class="order-status shipped">Shipped</span>
</div>
<a href="#order-details-67890" class="view-details-link">View Details</a>
</div>
<!-- Example Order Item 3 -->
<div class="order-item">
<div>
<span class="order-id">Order #IJKL11223</span>
<p class="order-date">Placed on: Mar 10, 2024</p>
</div>
<div>
<p class="order-total">Total: $120.99</p>
<span class="order-status pending">Pending</span>
</div>
<a href="#order-details-11223" class="view-details-link">View Details</a>
</div>
<!-- Placeholder for no orders -->
<!--
<div class="no-orders">
<p>You haven't placed any orders yet. Start browsing our <a href="#products">products</a>!</p>
</div>
-->
</div>
</section>
</div>
</body>
</html>
<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">Crafted Wonders</h3><p class="footer-1-newsletter-text">Be the first to discover new handcrafted treasures and exclusive offers!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Sign Up</button></div><p class="footer-1-privacy-note"><span>By signing up, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive marketing emails.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Shop All Crafts</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Featured Collections</a></li><li><a href="#">Gift Ideas</a></li><li><a href="#">Our Artisans</a></li></ul></div><div class="footer-1-column"><h4>Customer Care</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Shipping Information</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Order Tracking</a></li><li><a href="#">FAQs</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</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>© 2024 Crafted Wonders. All rights reserved.</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>
</body>
</html>