Compare commits
No commits in common. "main" and "test23_july" have entirely different histories.
main
...
test23_jul
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
Dockerfile
|
||||
266
add_new_address_page.html
Normal file
266
add_new_address_page.html
Normal file
@ -0,0 +1,266 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Add New Address Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section style="padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); max-width: 800px; margin: 20px auto; font-family: Arial, sans-serif;">
|
||||
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 20px; color: #333333; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px;">Add a New Address</h2>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 15px;">
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="fullName" style="display: block; font-size: 14px; color: #555555; margin-bottom: 5px;">Full Name <span style="color: #e44d26;">*</span></label>
|
||||
<input type="text" id="fullName" name="fullName" placeholder="Full Name (Required)*" required="" style="width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; font-size: 16px; outline: none; transition: border-color 0.2s;">
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="mobileNumber" style="display: block; font-size: 14px; color: #555555; margin-bottom: 5px;">10-digit Mobile Number <span style="color: #e44d26;">*</span></label>
|
||||
<input type="tel" id="mobileNumber" name="mobileNumber" placeholder="10-digit mobile number" pattern="[0-9]{10}" required="" style="width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; font-size: 16px; outline: none; transition: border-color 0.2s;">
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
|
||||
<div style="flex: 1 1 calc(50% - 7.5px); min-width: 250px; margin-bottom: 10px;">
|
||||
<label for="pincode" style="display: block; font-size: 14px; color: #555555; margin-bottom: 5px;">Pincode <span style="color: #e44d26;">*</span></label>
|
||||
<input type="text" id="pincode" name="pincode" placeholder="Pincode" pattern="[0-9]{6}" required="" style="width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; font-size: 16px; outline: none; transition: border-color 0.2s;">
|
||||
</div>
|
||||
|
||||
<div style="flex: 1 1 calc(50% - 7.5px); min-width: 250px; margin-bottom: 10px;">
|
||||
<label for="locality" style="display: block; font-size: 14px; color: #555555; margin-bottom: 5px;">Locality <span style="color: #e44d26;">*</span></label>
|
||||
<input type="text" id="locality" name="locality" placeholder="Locality" required="" style="width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; font-size: 16px; outline: none; transition: border-color 0.2s;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="addressDetails" style="display: block; font-size: 14px; color: #555555; margin-bottom: 5px;">Address (Area and Street) <span style="color: #e44d26;">*</span></label>
|
||||
<textarea id="addressDetails" name="addressDetails" placeholder="Address (Area and Street)" rows="4" required="" style="width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; font-size: 16px; resize: vertical; outline: none; transition: border-color 0.2s;"></textarea>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
|
||||
<div style="flex: 1 1 calc(50% - 7.5px); min-width: 250px; margin-bottom: 10px;">
|
||||
<label for="city" style="display: block; font-size: 14px; color: #555555; margin-bottom: 5px;">City/District/Town <span style="color: #e44d26;">*</span></label>
|
||||
<input type="text" id="city" name="city" placeholder="City/District/Town" required="" style="width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; font-size: 16px; outline: none; transition: border-color 0.2s;">
|
||||
</div>
|
||||
|
||||
<div style="flex: 1 1 calc(50% - 7.5px); min-width: 250px; margin-bottom: 10px;">
|
||||
<label for="state" style="display: block; font-size: 14px; color: #555555; margin-bottom: 5px;">State <span style="color: #e44d26;">*</span></label>
|
||||
<select id="state" name="state" required="" style="width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; font-size: 16px; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%204%205%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M2%200L0%202h4L2%200zm0%205L0%203h4L2%205z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 8px 10px; outline: none; transition: border-color 0.2s;">
|
||||
<option value="">-- Select State --</option>
|
||||
<option value="AP">Andhra Pradesh</option>
|
||||
<option value="AR">Arunachal Pradesh</option>
|
||||
<option value="AS">Assam</option>
|
||||
<option value="BR">Bihar</option>
|
||||
<option value="CT">Chhattisgarh</option>
|
||||
<option value="GA">Goa</option>
|
||||
<option value="GJ">Gujarat</option>
|
||||
<option value="HR">Haryana</option>
|
||||
<option value="HP">Himachal Pradesh</option>
|
||||
<option value="JH">Jharkhand</option>
|
||||
<option value="KA">Karnataka</option>
|
||||
<option value="KL">Kerala</option>
|
||||
<option value="MP">Madhya Pradesh</option>
|
||||
<option value="MH">Maharashtra</option>
|
||||
<option value="MN">Manipur</option>
|
||||
<option value="ML">Meghalaya</option>
|
||||
<option value="MZ">Mizoram</option>
|
||||
<option value="NL">Nagaland</option>
|
||||
<option value="OD">Odisha</option>
|
||||
<option value="PB">Punjab</option>
|
||||
<option value="RJ">Rajasthan</option>
|
||||
<option value="SK">Sikkim</option>
|
||||
<option value="TN">Tamil Nadu</option>
|
||||
<option value="TS">Telangana</option>
|
||||
<option value="TR">Tripura</option>
|
||||
<option value="UP">Uttar Pradesh</option>
|
||||
<option value="UK">Uttarakhand</option>
|
||||
<option value="WB">West Bengal</option>
|
||||
<option value="AN">Andaman and Nicobar Islands</option>
|
||||
<option value="CH">Chandigarh</option>
|
||||
<option value="DN">Dadra and Nagar Haveli and Daman and Diu</option>
|
||||
<option value="DL">Delhi</option>
|
||||
<option value="JK">Jammu and Kashmir</option>
|
||||
<option value="LA">Ladakh</option>
|
||||
<option value="LD">Lakshadweep</option>
|
||||
<option value="PY">Puducherry</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="landmark" style="display: block; font-size: 14px; color: #555555; margin-bottom: 5px;">Landmark (Optional)</label>
|
||||
<input type="text" id="landmark" name="landmark" placeholder="Landmark (Optional)" style="width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; font-size: 16px; outline: none; transition: border-color 0.2s;">
|
||||
</div>
|
||||
|
||||
<fieldset style="border: none; padding: 0; margin-bottom: 20px;">
|
||||
<legend style="font-size: 14px; color: #555555; margin-bottom: 10px; font-weight: bold;">Address Type</legend>
|
||||
<div style="display: flex; gap: 30px;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<input type="radio" id="addressTypeHome" name="addressType" value="home" checked="" style="margin-right: 8px; transform: scale(1.2);">
|
||||
<label for="addressTypeHome" style="font-size: 16px; color: #333333;">Home <span style="font-size: 12px; color: #777777;">(All day delivery)</span></label>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<input type="radio" id="addressTypeWork" name="addressType" value="work" style="margin-right: 8px; transform: scale(1.2);">
|
||||
<label for="addressTypeWork" style="font-size: 16px; color: #333333;">Work <span style="font-size: 12px; color: #777777;">(Delivery between 10 AM - 5 PM)</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div style="display: flex; gap: 15px; flex-wrap: wrap; margin-top: 10px;">
|
||||
<button type="submit" style="background-color: #fb641b; color: #ffffff; border: none; padding: 14px 25px; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 600; flex: 1; min-width: 200px; text-transform: uppercase; letter-spacing: 0.5px; transition: background-color 0.2s;">SAVE AND DELIVER HERE</button>
|
||||
<button type="button" style="background-color: #ffffff; color: #2874f0; border: 1px solid #2874f0; padding: 14px 25px; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 600; flex: 1; min-width: 120px; text-transform: uppercase; letter-spacing: 0.5px; transition: background-color 0.2s, color 0.2s;">CANCEL</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section id="map-integration" class="map-section">
|
||||
<div class="section-container">
|
||||
<h2 class="section-heading">Map Integration (Optional)</h2>
|
||||
<p class="section-description">Visually display our primary store location or service area to help customers find us easily.</p>
|
||||
|
||||
<div class="map-and-details-wrapper">
|
||||
<div class="map-placeholder">
|
||||
<p class="placeholder-text">Interactive Map Placeholder</p>
|
||||
<p class="placeholder-subtext">Drag to explore or click for full map view.</p>
|
||||
</div>
|
||||
<div class="location-info">
|
||||
<h3 class="location-heading">Our Location</h3>
|
||||
<address class="address-details">
|
||||
123 E-commerce Street<br>
|
||||
Digital City, DC 98765<br>
|
||||
India
|
||||
</address>
|
||||
<div class="contact-links">
|
||||
<a href="#" class="button get-directions-button">Get Directions</a>
|
||||
<a href="tel:+1234567890" class="contact-button">Call Us: +1 (234) 567-890</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="address-section">
|
||||
<div class="address-card">
|
||||
<h2 class="address-card-title">Add New Address</h2>
|
||||
|
||||
<form class="address-details-form">
|
||||
<div class="form-group">
|
||||
<label for="fullName" class="form-label">Full Name</label>
|
||||
<input type="text" id="fullName" class="form-input" placeholder="John Doe" aria-label="Full Name">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="mobileNumber" class="form-label">Mobile Number</label>
|
||||
<input type="tel" id="mobileNumber" class="form-input" placeholder="9876543210" aria-label="Mobile Number">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pincode" class="form-label">Pincode</label>
|
||||
<input type="text" id="pincode" class="form-input" placeholder="123456" aria-label="Pincode">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="addressText" class="form-label">Address (House No., Building, Street, Area)</label>
|
||||
<textarea id="addressText" class="form-textarea" rows="3" placeholder="123, ABC Apartments, Near XYZ Road, Example Area" aria-label="Address Line 1"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="cityTown" class="form-label">City/District/Town</label>
|
||||
<input type="text" id="cityTown" class="form-input" placeholder="Bangalore" aria-label="City/District/Town">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="state" class="form-label">State</label>
|
||||
<input type="text" id="state" class="form-input" placeholder="Karnataka" aria-label="State">
|
||||
</div>
|
||||
|
||||
<div class="form-actions-bar">
|
||||
<button type="submit" class="button-primary save-address-button">Save Address</button>
|
||||
<button type="button" class="button-secondary cancel-button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section class="address-type-selector">
|
||||
<h2 class="section-title">Select Address Type</h2>
|
||||
<div class="address-types-container">
|
||||
<div class="address-type-card">
|
||||
<input type="radio" id="addressTypeHome" name="addressType" value="home" checked="" class="address-type-radio sr-only">
|
||||
<label for="addressTypeHome" class="address-type-label">
|
||||
<div class="type-icon-wrapper">
|
||||
<span class="type-icon">🏠</span>
|
||||
</div>
|
||||
<div class="type-content">
|
||||
<span class="type-name">Home</span>
|
||||
<span class="type-description">Delivery to your residence</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="address-type-card">
|
||||
<input type="radio" id="addressTypeWork" name="addressType" value="work" class="address-type-radio sr-only">
|
||||
<label for="addressTypeWork" class="address-type-label">
|
||||
<div class="type-icon-wrapper">
|
||||
<span class="type-icon">🏢</span>
|
||||
</div>
|
||||
<div class="type-content">
|
||||
<span class="type-name">Work</span>
|
||||
<span class="type-description">Delivery to your office/business</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="address-type-card">
|
||||
<input type="radio" id="addressTypeOther" name="addressType" value="other" class="address-type-radio sr-only">
|
||||
<label for="addressTypeOther" class="address-type-label">
|
||||
<div class="type-icon-wrapper">
|
||||
<span class="type-icon">📍</span>
|
||||
</div>
|
||||
<div class="type-content">
|
||||
<span class="type-name">Other</span>
|
||||
<span class="type-description">A different address (e.g., friend's house)</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="delivery-notes-section">
|
||||
<div class="delivery-notes-container">
|
||||
<h2 class="section-header">Important Delivery Notes</h2>
|
||||
<p class="section-description">Please read carefully to ensure a smooth and successful delivery of your order.</p>
|
||||
|
||||
<div class="note-items-wrapper">
|
||||
<div class="note-item">
|
||||
<h3 class="note-title">Delivery Timings</h3>
|
||||
<p class="note-content">Standard deliveries are made between <strong>9:00 AM - 7:00 PM</strong> on business days. Specific time slot requests cannot always be accommodated.</p>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<h3 class="note-title">Recipient Availability</h3>
|
||||
<p class="note-content">Ensure someone is present at the delivery address to receive and sign for the package. Undeliverable items may result in re-delivery charges.</p>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<h3 class="note-title">Package Inspection</h3>
|
||||
<p class="note-content">Please inspect all items immediately upon delivery. Report any damages, missing items, or discrepancies to customer support within <strong>24 hours</strong> of receipt.</p>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<h3 class="note-title">Access for Large Items</h3>
|
||||
<p class="note-content">For large appliances or furniture, ensure clear and unobstructed access to the delivery point. Our team does not perform structural modifications.</p>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<h3 class="note-title">Delivery Attempts</h3>
|
||||
<p class="note-content">We will attempt delivery a maximum of <strong>2 times</strong>. After two unsuccessful attempts, the order may be cancelled, potentially incurring a re-stocking fee.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
282
cart_page.html
Normal file
282
cart_page.html
Normal file
@ -0,0 +1,282 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cart Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section class="cart-items-section">
|
||||
<div class="container">
|
||||
<h2>My Shopping Cart (2 Items)</h2>
|
||||
<div class="cart-layout">
|
||||
<div class="cart-items-list">
|
||||
|
||||
<!-- Cart Item 1 -->
|
||||
<article class="cart-item">
|
||||
<a href="#product-detail-link-1" class="cart-item__image-link">
|
||||
<img src="https://via.placeholder.com/120x120?text=Product+A" alt="Wireless Bluetooth Headphones" class="cart-item__image">
|
||||
</a>
|
||||
<div class="cart-item__main-info">
|
||||
<div class="cart-item__details">
|
||||
<h3 class="cart-item__name">
|
||||
<a href="#product-detail-link-1">Premium Wireless Bluetooth Headphones with ANC</a>
|
||||
</h3>
|
||||
<p class="cart-item__seller">Sold by: TechGadget Solutions</p>
|
||||
<div class="cart-item__price-info">
|
||||
<span class="cart-item__original-price">₹12,999</span>
|
||||
<span class="cart-item__current-price">₹5,499</span>
|
||||
<span class="cart-item__discount-percent">57% Off</span>
|
||||
</div>
|
||||
<p class="cart-item__delivery">Delivery by <strong>Wed, 24th July</strong></p>
|
||||
</div>
|
||||
<div class="cart-item__actions">
|
||||
<div class="cart-item__quantity-selector">
|
||||
<button class="quantity-btn quantity-btn--minus">-</button>
|
||||
<input type="number" value="1" min="1" max="5" class="quantity-input" aria-label="Quantity">
|
||||
<button class="quantity-btn quantity-btn--plus">+</button>
|
||||
</div>
|
||||
<div class="cart-item__action-buttons">
|
||||
<button class="action-btn action-btn--remove">Remove</button>
|
||||
<button class="action-btn action-btn--move-to-wishlist">Move to Wishlist</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Cart Item 2 -->
|
||||
<article class="cart-item">
|
||||
<a href="#product-detail-link-2" class="cart-item__image-link">
|
||||
<img src="https://via.placeholder.com/120x120?text=Product+B" alt="Smartwatch Fitness Tracker" class="cart-item__image">
|
||||
</a>
|
||||
<div class="cart-item__main-info">
|
||||
<div class="cart-item__details">
|
||||
<h3 class="cart-item__name">
|
||||
<a href="#product-detail-link-2">Smartwatch with Heart Rate Monitor & GPS</a>
|
||||
</h3>
|
||||
<p class="cart-item__seller">Sold by: FutureWearables Inc.</p>
|
||||
<div class="cart-item__price-info">
|
||||
<span class="cart-item__original-price">₹7,999</span>
|
||||
<span class="cart-item__current-price">₹3,799</span>
|
||||
<span class="cart-item__discount-percent">52% Off</span>
|
||||
</div>
|
||||
<p class="cart-item__delivery">Delivery by <strong>Thu, 25th July</strong></p>
|
||||
</div>
|
||||
<div class="cart-item__actions">
|
||||
<div class="cart-item__quantity-selector">
|
||||
<button class="quantity-btn quantity-btn--minus">-</button>
|
||||
<input type="number" value="1" min="1" max="5" class="quantity-input" aria-label="Quantity">
|
||||
<button class="quantity-btn quantity-btn--plus">+</button>
|
||||
</div>
|
||||
<div class="cart-item__action-buttons">
|
||||
<button class="action-btn action-btn--remove">Remove</button>
|
||||
<button class="action-btn action-btn--move-to-wishlist">Move to Wishlist</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Placeholder for empty cart or more items -->
|
||||
<div class="cart-item-placeholder">
|
||||
<p>Thinking of adding more items? <a href="#shop-more">Continue Shopping</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Optional: Price Details/Summary section can be placed here -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="order-summary-panel">
|
||||
<h2 class="order-summary-title">Order Summary</h2>
|
||||
|
||||
<div class="order-summary-items">
|
||||
<ul class="item-list">
|
||||
<li class="item">
|
||||
<div class="item-description">
|
||||
<span class="item-name">Placeholder Product Name A (Example with longer title)</span>
|
||||
<span class="item-quantity">Qty: 1</span>
|
||||
</div>
|
||||
<span class="item-price">₹1,299.00</span>
|
||||
</li>
|
||||
<li class="item">
|
||||
<div class="item-description">
|
||||
<span class="item-name">Placeholder Product B</span>
|
||||
<span class="item-quantity">Qty: 2</span>
|
||||
</div>
|
||||
<span class="item-price">₹598.00</span>
|
||||
</li>
|
||||
<li class="item">
|
||||
<div class="item-description">
|
||||
<span class="item-name">Placeholder Product C</span>
|
||||
<span class="item-quantity">Qty: 1</span>
|
||||
</div>
|
||||
<span class="item-price">₹350.00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="order-summary-calculations">
|
||||
<dl class="calculation-list">
|
||||
<dt>Subtotal</dt>
|
||||
<dd>₹2,247.00</dd>
|
||||
|
||||
<dt>Shipping Fee</dt>
|
||||
<dd>₹49.00</dd>
|
||||
|
||||
<dt>Taxes & Charges</dt>
|
||||
<dd>₹150.00</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="order-total">
|
||||
<span class="total-label">Order Total</span>
|
||||
<span class="total-amount">₹2,446.00</span>
|
||||
</div>
|
||||
|
||||
<div class="order-actions">
|
||||
<button class="proceed-to-checkout-btn">Proceed to Checkout</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="cta-section">
|
||||
<div class="cta-content-wrapper">
|
||||
<h2 class="cta-heading">Ready to Discover Your Next Favorite Product?</h2>
|
||||
<p class="cta-description">Browse through thousands of items, find exclusive deals, and enjoy a seamless shopping experience from the comfort of your home.</p>
|
||||
<a href="#" class="cta-button">Shop Now ></a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="wishlist-section" class="wishlist-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">My Saved Items</h2>
|
||||
|
||||
<div id="wishlist-empty-state" class="wishlist-empty-state" style="display: none;">
|
||||
<p class="empty-message">Your wishlist is empty. Start adding items you love!</p>
|
||||
<a href="/products" class="button primary-button">Continue Shopping</a>
|
||||
</div>
|
||||
|
||||
<div class="wishlist-grid">
|
||||
<!-- Wishlist Item 1 -->
|
||||
<article class="wishlist-item">
|
||||
<div class="wishlist-item-header">
|
||||
<button class="remove-button" aria-label="Remove item">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="/product-details/1" class="wishlist-item-link">
|
||||
<div class="wishlist-item-image">
|
||||
<img src="https://via.placeholder.com/150x150?text=Product+Image+1" alt="[Product Name 1 - Example Smart TV]">
|
||||
</div>
|
||||
<div class="wishlist-item-details">
|
||||
<h3 class="wishlist-item-title">[Product Name 1 - e.g., Smart 4K UHD LED TV 55 inch]</h3>
|
||||
<div class="wishlist-item-price">
|
||||
<span class="current-price">₹45,999</span>
|
||||
<span class="original-price">₹55,000</span>
|
||||
<span class="discount">(16% off)</span>
|
||||
</div>
|
||||
<p class="wishlist-item-status in-stock">In Stock</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="wishlist-item-actions">
|
||||
<button class="button primary-button">Move to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Wishlist Item 2 -->
|
||||
<article class="wishlist-item">
|
||||
<div class="wishlist-item-header">
|
||||
<button class="remove-button" aria-label="Remove item">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="/product-details/2" class="wishlist-item-link">
|
||||
<div class="wishlist-item-image">
|
||||
<img src="https://via.placeholder.com/150x150?text=Product+Image+2" alt="[Product Name 2 - Example Laptop]">
|
||||
</div>
|
||||
<div class="wishlist-item-details">
|
||||
<h3 class="wishlist-item-title">[Product Name 2 - e.g., UltraBook 13-inch Core i5, 8GB RAM]</h3>
|
||||
<div class="wishlist-item-price">
|
||||
<span class="current-price">₹62,500</span>
|
||||
<span class="original-price">₹70,000</span>
|
||||
<span class="discount">(10% off)</span>
|
||||
</div>
|
||||
<p class="wishlist-item-status out-of-stock">Out of Stock</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="wishlist-item-actions">
|
||||
<button class="button primary-button" disabled="">Move to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Wishlist Item 3 -->
|
||||
<article class="wishlist-item">
|
||||
<div class="wishlist-item-header">
|
||||
<button class="remove-button" aria-label="Remove item">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="/product-details/3" class="wishlist-item-link">
|
||||
<div class="wishlist-item-image">
|
||||
<img src="https://via.placeholder.com/150x150?text=Product+Image+3" alt="[Product Name 3 - Example Headphones]">
|
||||
</div>
|
||||
<div class="wishlist-item-details">
|
||||
<h3 class="wishlist-item-title">[Product Name 3 - e.g., Noise Cancelling Headphones v2]</h3>
|
||||
<div class="wishlist-item-price">
|
||||
<span class="current-price">₹7,999</span>
|
||||
</div>
|
||||
<p class="wishlist-item-status in-stock">In Stock</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="wishlist-item-actions">
|
||||
<button class="button primary-button">Move to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Wishlist Item 4 -->
|
||||
<article class="wishlist-item">
|
||||
<div class="wishlist-item-header">
|
||||
<button class="remove-button" aria-label="Remove item">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="/product-details/4" class="wishlist-item-link">
|
||||
<div class="wishlist-item-image">
|
||||
<img src="https://via.placeholder.com/150x150?text=Product+Image+4" alt="[Product Name 4 - Example Smartwatch]">
|
||||
</div>
|
||||
<div class="wishlist-item-details">
|
||||
<h3 class="wishlist-item-title">[Product Name 4 - e.g., Smartwatch Pro Series 5]</h3>
|
||||
<div class="wishlist-item-price">
|
||||
<span class="current-price">₹14,999</span>
|
||||
<span class="original-price">₹17,500</span>
|
||||
<span class="discount">(14% off)</span>
|
||||
</div>
|
||||
<p class="wishlist-item-status in-stock">In Stock</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="wishlist-item-actions">
|
||||
<button class="button primary-button">Move to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div> <!-- /wishlist-grid -->
|
||||
|
||||
</div> <!-- /container -->
|
||||
</section>
|
||||
<section class="continue-shopping-section">
|
||||
<div class="continue-shopping-container">
|
||||
<a href="/products" class="continue-shopping-link">
|
||||
← Continue Shopping
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
449
checkout_page.html
Normal file
449
checkout_page.html
Normal 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>Checkout Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section class="shipping-address-section">
|
||||
<div class="shipping-address-header">
|
||||
<h2>Shipping Address</h2>
|
||||
<button type="button" class="add-new-address-btn">Add New Address</button>
|
||||
</div>
|
||||
|
||||
<div class="address-list">
|
||||
<!-- Placeholder for existing addresses - these would typically be dynamically loaded -->
|
||||
<div class="address-card selected">
|
||||
<input type="radio" name="selected-address" id="address1" value="addr_id_123" class="address-radio-input" checked="">
|
||||
<label for="address1" class="address-details-label">
|
||||
<h3 class="address-name">John Doe</h3>
|
||||
<p class="address-line">123, Main Street, Apt 4B, Near Park</p>
|
||||
<p class="address-city-state-pin">Springfield, Illinois - 62704</p>
|
||||
<p class="address-phone">Phone: 9876543210</p>
|
||||
</label>
|
||||
<div class="address-actions">
|
||||
<button type="button" class="edit-address-btn">Edit</button>
|
||||
<button type="button" class="remove-address-btn">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="address-card">
|
||||
<input type="radio" name="selected-address" id="address2" value="addr_id_456" class="address-radio-input">
|
||||
<label for="address2" class="address-details-label">
|
||||
<h3 class="address-name">Jane Smith</h3>
|
||||
<p class="address-line">456, Oak Avenue, Building C, Block D</p>
|
||||
<p class="address-city-state-pin">Metropolis, New York - 10001</p>
|
||||
<p class="address-phone">Phone: 1234567890</p>
|
||||
</label>
|
||||
<div class="address-actions">
|
||||
<button type="button" class="edit-address-btn">Edit</button>
|
||||
<button type="button" class="remove-address-btn">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form for adding/editing address - can be toggled visible/hidden via CSS/JS -->
|
||||
<div class="add-edit-address-form-container">
|
||||
<h3>Add a New Address</h3>
|
||||
<form class="address-form">
|
||||
<div class="form-group">
|
||||
<label for="full-name">Full Name</label>
|
||||
<input type="text" id="full-name" name="full_name" placeholder="Enter your full name" required="">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="phone-number">Phone Number</label>
|
||||
<input type="tel" id="phone-number" name="phone_number" placeholder="10-digit mobile number" pattern="[0-9]{10}" required="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pincode">Pincode</label>
|
||||
<input type="text" id="pincode" name="pincode" placeholder="6-digit Pincode" pattern="[0-9]{6}" required="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="address-line1">Address (House No., Building, Street, Area)</label>
|
||||
<input type="text" id="address-line1" name="address_line1" placeholder="Address Line 1" required="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="address-line2">Locality / Town (Optional)</label>
|
||||
<input type="text" id="address-line2" name="address_line2" placeholder="Address Line 2 (Optional)">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="landmark">Landmark (Optional)</label>
|
||||
<input type="text" id="landmark" name="landmark" placeholder="E.g. Near Apollo Hospital (Optional)">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
<input type="text" id="city" name="city" placeholder="City" required="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="state">State</label>
|
||||
<select id="state" name="state" required="">
|
||||
<option value="">Select State</option>
|
||||
<option value="AP">Andhra Pradesh</option>
|
||||
<option value="KA">Karnataka</option>
|
||||
<option value="MH">Maharashtra</option>
|
||||
<option value="DL">Delhi</option>
|
||||
<option value="TN">Tamil Nadu</option>
|
||||
<option value="UP">Uttar Pradesh</option>
|
||||
<option value="WB">West Bengal</option>
|
||||
<!-- Add more states as needed -->
|
||||
<option value="OT">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<input type="checkbox" id="default-address" name="default_address">
|
||||
<label for="default-address">Make this my default address</label>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="save-address-btn">Save and Deliver Here</button>
|
||||
<button type="button" class="cancel-btn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section class="payment-selection-section">
|
||||
<h2 class="section-title">Select a Payment Option</h2>
|
||||
|
||||
<div class="payment-options-container">
|
||||
<div class="payment-methods-sidebar">
|
||||
<ul class="method-list">
|
||||
<li class="method-item active">
|
||||
<a href="#cards" class="method-link" aria-controls="cards">Cards (Credit/Debit)</a>
|
||||
</li>
|
||||
<li class="method-item">
|
||||
<a href="#upi" class="method-link" aria-controls="upi">UPI</a>
|
||||
</li>
|
||||
<li class="method-item">
|
||||
<a href="#wallets" class="method-link" aria-controls="wallets">Wallets</a>
|
||||
</li>
|
||||
<li class="method-item">
|
||||
<a href="#netbanking" class="method-link" aria-controls="netbanking">Net Banking</a>
|
||||
</li>
|
||||
<li class="method-item">
|
||||
<a href="#emi" class="method-link" aria-controls="emi">EMI</a>
|
||||
</li>
|
||||
<li class="method-item">
|
||||
<a href="#cod" class="method-link" aria-controls="cod">Cash on Delivery</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="payment-details-content">
|
||||
|
||||
<div id="cards" class="payment-option-card active-option" role="tabpanel" aria-labelledby="cards">
|
||||
<h3 class="option-title">Credit / Debit Card</h3>
|
||||
<form class="card-form">
|
||||
<div class="form-group">
|
||||
<label for="cardNumber">Card Number</label>
|
||||
<input type="text" id="cardNumber" placeholder="•••• •••• •••• ••••" aria-label="Card Number" pattern="[0-9]{13,19}" inputmode="numeric">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cardName">Name on Card</label>
|
||||
<input type="text" id="cardName" placeholder="John Doe" aria-label="Name on Card" autocomplete="cc-name">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group expiration-date">
|
||||
<label for="expiryMonth">Expiry Date</label>
|
||||
<div class="expiry-inputs">
|
||||
<input type="text" id="expiryMonth" placeholder="MM" maxlength="2" aria-label="Expiry Month" pattern="(0[1-9]|1[0-2])" inputmode="numeric">
|
||||
<span>/</span>
|
||||
<input type="text" id="expiryYear" placeholder="YY" maxlength="2" aria-label="Expiry Year" pattern="[0-9]{2}" inputmode="numeric">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group cvv">
|
||||
<label for="cvv">CVV</label>
|
||||
<input type="password" id="cvv" placeholder="•••" maxlength="3" aria-label="CVV" pattern="[0-9]{3,4}" inputmode="numeric">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Pay securely</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="upi" class="payment-option-upi" role="tabpanel" aria-labelledby="upi" hidden="">
|
||||
<h3 class="option-title">Pay with UPI</h3>
|
||||
<p class="description">You will be asked to enter your UPI ID. A payment request will be sent to your UPI app.</p>
|
||||
<form class="upi-form">
|
||||
<div class="form-group">
|
||||
<label for="upiId">Enter UPI ID</label>
|
||||
<input type="text" id="upiId" placeholder="username@bank" aria-label="UPI ID">
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Verify & Pay</button>
|
||||
</form>
|
||||
<div class="upi-apps-placeholder">
|
||||
<h4>Other UPI Options:</h4>
|
||||
<p>Google Pay, PhonePe, Paytm, BHIM UPI (placeholder for app icons/buttons)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="wallets" class="payment-option-wallets" role="tabpanel" aria-labelledby="wallets" hidden="">
|
||||
<h3 class="option-title">Wallets</h3>
|
||||
<div class="wallet-list">
|
||||
<div class="wallet-item">
|
||||
<input type="radio" id="paytmWallet" name="walletOption" value="paytm">
|
||||
<label for="paytmWallet">Paytm Wallet</label>
|
||||
<span class="wallet-balance-info">Balance: ₹XXX (Placeholder)</span>
|
||||
</div>
|
||||
<div class="wallet-item">
|
||||
<input type="radio" id="phonepeWallet" name="walletOption" value="phonepe">
|
||||
<label for="phonepeWallet">PhonePe Wallet</label>
|
||||
</div>
|
||||
<div class="wallet-item">
|
||||
<input type="radio" id="mobikwikWallet" name="walletOption" value="mobikwik">
|
||||
<label for="mobikwikWallet">MobiKwik Wallet</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn-primary mt-medium">Continue to Pay</button>
|
||||
</div>
|
||||
|
||||
<div id="netbanking" class="payment-option-netbanking" role="tabpanel" aria-labelledby="netbanking" hidden="">
|
||||
<h3 class="option-title">Net Banking</h3>
|
||||
<p class="description">Choose from a wide range of banks.</p>
|
||||
<form class="netbanking-form">
|
||||
<div class="form-group">
|
||||
<label for="selectBank">Select your Bank</label>
|
||||
<select id="selectBank" aria-label="Select your Bank">
|
||||
<option value="">Select Bank</option>
|
||||
<option value="sbi">State Bank of India</option>
|
||||
<option value="icici">ICICI Bank</option>
|
||||
<option value="hdfc">HDFC Bank</option>
|
||||
<option value="axis">Axis Bank</option>
|
||||
<option value="other">Other Banks...</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Pay Now</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="emi" class="payment-option-emi" role="tabpanel" aria-labelledby="emi" hidden="">
|
||||
<h3 class="option-title">EMI (Easy Monthly Instalments)</h3>
|
||||
<p class="description">Available on Credit Cards and Debit Cards for selected banks.</p>
|
||||
<div class="emi-options-placeholder">
|
||||
<h4>EMI Plans:</h4>
|
||||
<p>No Cost EMI available (placeholder)</p>
|
||||
<p>Standard EMI (placeholder)</p>
|
||||
<p>Select your card type and bank to see eligible EMI plans.</p>
|
||||
</div>
|
||||
<button type="button" class="btn-primary">View EMI Options</button>
|
||||
</div>
|
||||
|
||||
<div id="cod" class="payment-option-cod" role="tabpanel" aria-labelledby="cod" hidden="">
|
||||
<h3 class="option-title">Cash on Delivery (COD)</h3>
|
||||
<p class="description">Pay with cash when your order is delivered to your doorstep.</p>
|
||||
<div class="cod-info-box">
|
||||
<p><strong>Note:</strong> COD might not be available for all pin codes or order values.</p>
|
||||
<p>Maximum allowed COD value is ₹X,XXX (Placeholder)</p>
|
||||
</div>
|
||||
<button type="button" class="btn-primary">Place Order & Pay on Delivery</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="order-review-section">
|
||||
<div class="container">
|
||||
<h1 class="section-title">Order Review & Confirmation</h1>
|
||||
|
||||
<div class="order-layout">
|
||||
<div class="order-details-col">
|
||||
<article class="card shipping-address-card">
|
||||
<h2 class="card-title">Shipping Address</h2>
|
||||
<address class="address-content">
|
||||
<p class="address-name">Placeholder Name</p>
|
||||
<p class="address-line">123, Example Street</p>
|
||||
<p class="address-line">Apt. 42, Mockville</p>
|
||||
<p class="address-line">State, ZIP 00000</p>
|
||||
<p class="address-phone">Phone: +1 (555) 123-4567</p>
|
||||
</address>
|
||||
<a href="#" class="change-link">Change Address</a>
|
||||
</article>
|
||||
|
||||
<article class="card payment-method-card">
|
||||
<h2 class="card-title">Payment Method</h2>
|
||||
<div class="payment-content">
|
||||
<p class="payment-type">Credit Card (Visa)</p>
|
||||
<p class="payment-detail">**** **** **** 1234</p>
|
||||
</div>
|
||||
<a href="#" class="change-link">Change Method</a>
|
||||
</article>
|
||||
|
||||
<article class="card order-items-card">
|
||||
<h2 class="card-title">Items in Your Order</h2>
|
||||
<div class="order-item-list">
|
||||
<div class="order-item">
|
||||
<div class="item-thumbnail"></div>
|
||||
<div class="item-info">
|
||||
<h3 class="item-name">Placeholder Product A - Color, Size</h3>
|
||||
<p class="item-qty">Qty: 1</p>
|
||||
<p class="item-price">$XX.XX</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<div class="item-thumbnail"></div>
|
||||
<div class="item-info">
|
||||
<h3 class="item-name">Placeholder Product B - Variant</h3>
|
||||
<p class="item-qty">Qty: 2</p>
|
||||
<p class="item-price">$YY.YY</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<div class="item-thumbnail"></div>
|
||||
<div class="item-info">
|
||||
<h3 class="item-name">Placeholder Product C</h3>
|
||||
<p class="item-qty">Qty: 1</p>
|
||||
<p class="item-price">$ZZ.ZZ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="view-cart-link">View Full Cart</a>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<aside class="order-summary-col">
|
||||
<article class="card price-details-card">
|
||||
<h2 class="card-title">Price Details</h2>
|
||||
<dl class="price-list">
|
||||
<div class="price-item">
|
||||
<dt>Subtotal</dt>
|
||||
<dd>$AAA.AA</dd>
|
||||
</div>
|
||||
<div class="price-item">
|
||||
<dt>Discount</dt>
|
||||
<dd class="discount">-$BB.BB</dd>
|
||||
</div>
|
||||
<div class="price-item">
|
||||
<dt>Delivery Charges</dt>
|
||||
<dd>$CC.CC</dd>
|
||||
</div>
|
||||
<div class="price-item total-price">
|
||||
<dt>Total Payable</dt>
|
||||
<dd>$DDD.DD</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<div class="place-order-actions">
|
||||
<button class="btn btn-primary place-order-btn">Place Order</button>
|
||||
<p class="policy-text">By placing your order, you agree to our <a href="#">Terms & Conditions</a>.</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="promo-code-section">
|
||||
<div class="promo-code-wrapper">
|
||||
<h3 class="promo-code-title">Have a Promo Code?</h3>
|
||||
<form class="promo-code-form">
|
||||
<div class="promo-input-group">
|
||||
<label for="promoCodeInput" class="visually-hidden">Enter promo code</label>
|
||||
<input type="text" id="promoCodeInput" class="promo-code-input" placeholder="Enter code here">
|
||||
<button type="submit" class="apply-button">Apply</button>
|
||||
</div>
|
||||
<p class="promo-message-area">
|
||||
<a href="#" class="view-offers-link">View all available offers</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section class="delivery-slot-section">
|
||||
<h2 class="section-title">Delivery Slot Selection <span class="optional-text">(Optional)</span></h2>
|
||||
|
||||
<div class="slot-options-container">
|
||||
|
||||
<div class="slot-group">
|
||||
<h3 class="slot-group-title">Today</h3>
|
||||
<div class="slot-item">
|
||||
<input type="radio" id="slot-today-morning" name="delivery-slot" value="today-morning" class="radio-input">
|
||||
<label for="slot-today-morning" class="slot-details">
|
||||
<span class="slot-date">Today, 10th Jan</span>
|
||||
<span class="slot-time">9:00 AM - 12:00 PM</span>
|
||||
<span class="slot-availability">Available</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="slot-item">
|
||||
<input type="radio" id="slot-today-afternoon" name="delivery-slot" value="today-afternoon" class="radio-input">
|
||||
<label for="slot-today-afternoon" class="slot-details">
|
||||
<span class="slot-date">Today, 10th Jan</span>
|
||||
<span class="slot-time">1:00 PM - 4:00 PM</span>
|
||||
<span class="slot-availability">Available</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="slot-item disabled">
|
||||
<input type="radio" id="slot-today-evening" name="delivery-slot" value="today-evening" class="radio-input" disabled="">
|
||||
<label for="slot-today-evening" class="slot-details">
|
||||
<span class="slot-date">Today, 10th Jan</span>
|
||||
<span class="slot-time">6:00 PM - 9:00 PM</span>
|
||||
<span class="slot-availability">Fully Booked</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slot-group">
|
||||
<h3 class="slot-group-title">Tomorrow</h3>
|
||||
<div class="slot-item">
|
||||
<input type="radio" id="slot-tomorrow-morning" name="delivery-slot" value="tomorrow-morning" class="radio-input">
|
||||
<label for="slot-tomorrow-morning" class="slot-details">
|
||||
<span class="slot-date">Tomorrow, 11th Jan</span>
|
||||
<span class="slot-time">9:00 AM - 12:00 PM</span>
|
||||
<span class="slot-availability">Available</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="slot-item">
|
||||
<input type="radio" id="slot-tomorrow-afternoon" name="delivery-slot" value="tomorrow-afternoon" class="radio-input">
|
||||
<label for="slot-tomorrow-afternoon" class="slot-details">
|
||||
<span class="slot-date">Tomorrow, 11th Jan</span>
|
||||
<span class="slot-time">1:00 PM - 4:00 PM</span>
|
||||
<span class="slot-availability">Available</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slot-group">
|
||||
<h3 class="slot-group-title">Other Dates</h3>
|
||||
<div class="slot-item">
|
||||
<input type="radio" id="slot-jan12-any" name="delivery-slot" value="jan12-any" class="radio-input">
|
||||
<label for="slot-jan12-any" class="slot-details">
|
||||
<span class="slot-date">Sat, 12th Jan</span>
|
||||
<span class="slot-time">Any Slot (Standard Delivery)</span>
|
||||
<span class="slot-availability">Available</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="slot-item">
|
||||
<input type="radio" id="slot-jan13-morning" name="delivery-slot" value="jan13-morning" class="radio-input">
|
||||
<label for="slot-jan13-morning" class="slot-details">
|
||||
<span class="slot-date">Sun, 13th Jan</span>
|
||||
<span class="slot-time">9:00 AM - 12:00 PM</span>
|
||||
<span class="slot-availability">Available</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-slot-selected-message">
|
||||
<p>No preferred slot selected. We'll deliver using our standard delivery method.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
423
dashboard_page.html
Normal file
423
dashboard_page.html
Normal file
@ -0,0 +1,423 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section class="user-profile-card-section">
|
||||
<div class="profile-card-header">
|
||||
<div class="profile-avatar-wrapper">
|
||||
<img src="https://via.placeholder.com/120x120?text=Profile" alt="User Profile Picture" class="profile-avatar">
|
||||
</div>
|
||||
<h3 class="profile-username">John Doe</h3>
|
||||
<p class="profile-email-text">john.doe@example.com</p>
|
||||
</div>
|
||||
|
||||
<nav class="profile-card-navigation">
|
||||
<ul class="profile-nav-list">
|
||||
<li class="profile-nav-item">
|
||||
<a href="#my-orders" class="profile-nav-link current">
|
||||
<span class="nav-icon-placeholder">📦</span> My Orders
|
||||
</a>
|
||||
</li>
|
||||
<li class="profile-nav-item">
|
||||
<a href="#wishlist" class="profile-nav-link">
|
||||
<span class="nav-icon-placeholder">❤️</span> Wishlist
|
||||
</a>
|
||||
</li>
|
||||
<li class="profile-nav-item">
|
||||
<a href="#addresses" class="profile-nav-link">
|
||||
<span class="nav-icon-placeholder">🏠</span> My Addresses
|
||||
</a>
|
||||
</li>
|
||||
<li class="profile-nav-item">
|
||||
<a href="#payment-methods" class="profile-nav-link">
|
||||
<span class="nav-icon-placeholder">💳</span> Payment Methods
|
||||
</a>
|
||||
</li>
|
||||
<li class="profile-nav-item">
|
||||
<a href="#account-settings" class="profile-nav-link">
|
||||
<span class="nav-icon-placeholder">⚙️</span> Account Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="profile-card-actions">
|
||||
<button class="profile-action-button primary">Edit Profile</button>
|
||||
<button class="profile-action-button secondary">Logout</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="order-history-section">
|
||||
<div class="container">
|
||||
<header class="order-history-header">
|
||||
<h2 class="order-history-title">Your Order History</h2>
|
||||
<p class="order-history-subtitle">Track your past orders and their details.</p>
|
||||
</header>
|
||||
|
||||
<div class="order-history-filters-sort">
|
||||
<div class="filter-group">
|
||||
<label for="order-status-filter" class="filter-label">Filter by Status:</label>
|
||||
<select id="order-status-filter" class="filter-select">
|
||||
<option value="all">All Orders</option>
|
||||
<option value="delivered">Delivered</option>
|
||||
<option value="shipped">Shipped</option>
|
||||
<option value="processing">Processing</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
<option value="returned">Returned</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="order-time-filter" class="filter-label">Order placed in:</label>
|
||||
<select id="order-time-filter" class="filter-select">
|
||||
<option value="last-3-months">Last 3 Months</option>
|
||||
<option value="2023">2023</option>
|
||||
<option value="2022">2022</option>
|
||||
<option value="all-time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-history-table-responsive">
|
||||
<table class="order-history-table">
|
||||
<caption class="sr-only">List of your past orders</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Order ID</th>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Total</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Order ID" class="order-id">#ORD123456789</td>
|
||||
<td data-label="Date" class="order-date"><time datetime="2023-10-26">Oct 26, 2023</time></td>
|
||||
<td data-label="Total" class="order-total">$125.00</td>
|
||||
<td data-label="Status" class="order-status status-delivered">Delivered</td>
|
||||
<td data-label="Actions" class="order-actions"><a href="/orders/ORD123456789" class="btn btn-primary view-details-btn">View Details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Order ID" class="order-id">#ORD987654321</td>
|
||||
<td data-label="Date" class="order-date"><time datetime="2023-10-20">Oct 20, 2023</time></td>
|
||||
<td data-label="Total" class="order-total">$75.50</td>
|
||||
<td data-label="Status" class="order-status status-shipped">Shipped</td>
|
||||
<td data-label="Actions" class="order-actions"><a href="/orders/ORD987654321" class="btn btn-primary view-details-btn">View Details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Order ID" class="order-id">#ORD112233445</td>
|
||||
<td data-label="Date" class="order-date"><time datetime="2023-10-15">Oct 15, 2023</time></td>
|
||||
<td data-label="Total" class="order-total">$200.00</td>
|
||||
<td data-label="Status" class="order-status status-processing">Processing</td>
|
||||
<td data-label="Actions" class="order-actions"><a href="/orders/ORD112233445" class="btn btn-primary view-details-btn">View Details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Order ID" class="order-id">#ORD554433221</td>
|
||||
<td data-label="Date" class="order-date"><time datetime="2023-09-30">Sep 30, 2023</time></td>
|
||||
<td data-label="Total" class="order-total">$45.99</td>
|
||||
<td data-label="Status" class="order-status status-delivered">Delivered</td>
|
||||
<td data-label="Actions" class="order-actions"><a href="/orders/ORD554433221" class="btn btn-primary view-details-btn">View Details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Order ID" class="order-id">#ORD678901234</td>
|
||||
<td data-label="Date" class="order-date"><time datetime="2023-09-25">Sep 25, 2023</time></td>
|
||||
<td data-label="Total" class="order-total">$30.00</td>
|
||||
<td data-label="Status" class="order-status status-cancelled">Cancelled</td>
|
||||
<td data-label="Actions" class="order-actions"><a href="/orders/ORD678901234" class="btn btn-primary view-details-btn">View Details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Order ID" class="order-id">#ORD001122334</td>
|
||||
<td data-label="Date" class="order-date"><time datetime="2023-09-10">Sep 10, 2023</time></td>
|
||||
<td data-label="Total" class="order-total">$88.25</td>
|
||||
<td data-label="Status" class="order-status status-returned">Returned</td>
|
||||
<td data-label="Actions" class="order-actions"><a href="/orders/ORD001122334" class="btn btn-primary view-details-btn">View Details</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<nav class="order-history-pagination" aria-label="Order history pagination">
|
||||
<a href="#" class="pagination-link pagination-prev" aria-label="Previous page">Previous</a>
|
||||
<span class="pagination-item pagination-current">1</span>
|
||||
<a href="#" class="pagination-link">2</a>
|
||||
<a href="#" class="pagination-link">3</a>
|
||||
<span class="pagination-item pagination-ellipsis">...</span>
|
||||
<a href="#" class="pagination-link">10</a>
|
||||
<a href="#" class="pagination-link pagination-next" aria-label="Next page">Next</a>
|
||||
</nav>
|
||||
|
||||
<div class="no-orders-message" style="display: none;">
|
||||
<p>You haven't placed any orders yet. Start shopping to see your history here!</p>
|
||||
<a href="/shop" class="btn btn-primary start-shopping-btn">Browse Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="wishlist-section">
|
||||
<div class="container">
|
||||
<h2>Wishlist / Saved Items (<span class="item-count">3</span> items)</h2>
|
||||
|
||||
<div class="wishlist-items-grid">
|
||||
<article class="wishlist-item-card">
|
||||
<div class="item-image">
|
||||
<img src="https://via.placeholder.com/150x150?text=Product+Image" alt="Placeholder Product Image">
|
||||
</div>
|
||||
<div class="item-details">
|
||||
<h3>Product Name Placeholder 1</h3>
|
||||
<p class="item-price">₹1,299</p>
|
||||
<p class="item-original-price">₹2,500 <span class="discount">(48% off)</span></p>
|
||||
<p class="item-delivery">Delivery by Thu, May 30</p>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<button class="action-button move-to-cart">Move to Cart</button>
|
||||
<button class="action-button remove-item">Remove</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="wishlist-item-card">
|
||||
<div class="item-image">
|
||||
<img src="https://via.placeholder.com/150x150?text=Product+Image" alt="Placeholder Product Image">
|
||||
</div>
|
||||
<div class="item-details">
|
||||
<h3>Product Name Placeholder 2 - A Slightly Longer Title For Context</h3>
|
||||
<p class="item-price">₹499</p>
|
||||
<p class="item-original-price">₹999 <span class="discount">(50% off)</span></p>
|
||||
<p class="item-delivery">Delivery by Mon, May 27</p>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<button class="action-button move-to-cart">Move to Cart</button>
|
||||
<button class="action-button remove-item">Remove</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="wishlist-item-card">
|
||||
<div class="item-image">
|
||||
<img src="https://via.placeholder.com/150x150?text=Product+Image" alt="Placeholder Product Image">
|
||||
</div>
|
||||
<div class="item-details">
|
||||
<h3>Product Name Placeholder 3</h3>
|
||||
<p class="item-price">₹7,999</p>
|
||||
<p class="item-original-price">₹10,000 <span class="discount">(20% off)</span></p>
|
||||
<p class="item-delivery">Delivery by Fri, May 31</p>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<button class="action-button move-to-cart">Move to Cart</button>
|
||||
<button class="action-button remove-item">Remove</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="empty-wishlist-message">
|
||||
<p>Your Wishlist is empty!</p>
|
||||
<p>Add items you like to keep them saved here.</p>
|
||||
<a href="#" class="continue-shopping-button">Continue Shopping</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="address-management-section">
|
||||
<div class="address-management-header">
|
||||
<h2 class="section-title">My Addresses</h2>
|
||||
<button class="add-address-button">+ Add New Address</button>
|
||||
</div>
|
||||
|
||||
<div class="address-list-container">
|
||||
<div class="address-card">
|
||||
<div class="address-meta">
|
||||
<h3 class="address-name">John Doe</h3>
|
||||
<span class="address-type">Home</span>
|
||||
</div>
|
||||
<address class="address-details">
|
||||
123 Main Street<br>
|
||||
Apt 4B<br>
|
||||
Anytown, CA 90210<br>
|
||||
USA
|
||||
</address>
|
||||
<p class="address-phone">Phone: +1 (555) 123-4567</p>
|
||||
<div class="address-actions">
|
||||
<button class="action-button edit-button">Edit</button>
|
||||
<button class="action-button delete-button">Delete</button>
|
||||
<button class="action-button default-button is-default">Default</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="address-card">
|
||||
<div class="address-meta">
|
||||
<h3 class="address-name">Jane Smith</h3>
|
||||
<span class="address-type">Work</span>
|
||||
</div>
|
||||
<address class="address-details">
|
||||
456 Business Avenue<br>
|
||||
Suite 100<br>
|
||||
Metropolis, NY 10001<br>
|
||||
USA
|
||||
</address>
|
||||
<p class="address-phone">Phone: +1 (555) 987-6543</p>
|
||||
<div class="address-actions">
|
||||
<button class="action-button edit-button">Edit</button>
|
||||
<button class="action-button delete-button">Delete</button>
|
||||
<button class="action-button default-button">Set as Default</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-addresses-message" style="display: none;">
|
||||
<p>You have no saved addresses yet. Click "Add New Address" to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Account Settings</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<div class="container">
|
||||
<aside class="sidebar" role="navigation" aria-label="Account Navigation">
|
||||
<div class="sidebar-header">
|
||||
<img src="https://via.placeholder.com/48/CCCCCC/FFFFFF?text=P" alt="User Profile Picture">
|
||||
<div>
|
||||
<p>Hello,</p>
|
||||
<strong>[User Name]</strong>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#orders">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 18H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2zM5 8v8h14V8H5zm8 4h3v2h-3v-2zm-5 0h3v2H8v-2z"></path></svg>
|
||||
My Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#account-settings" class="active">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.38 0 2.5 1.12 2.5 2.5S13.38 10 12 10 9.5 8.88 9.5 7.5 10.62 5 12 5zm0 14.2c-2.67 0-5.26-1.55-6.52-4.1C6.71 12.06 9.2 11.2 12 11.2s5.29.86 6.52 2.9C17.26 15.65 14.67 17.2 12 17.2z"></path></svg>
|
||||
Account Settings
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#wishlist">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
|
||||
Wishlist
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#notifications">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V9c0-3.07-1.63-5.64-4.5-6.32V2.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.18C7.64 3.36 6 5.93 6 9v7l-2 2v1h16v-1l-2-2zm-2 1H8v-7c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v7z"></path></svg>
|
||||
Notifications
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#payments">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"></path></svg>
|
||||
Payments
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#logout">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"></path></svg>
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="main-content" role="main">
|
||||
<h1 id="account-settings">Account Settings</h1>
|
||||
|
||||
<section id="profile-information">
|
||||
<h2>Profile Information</h2>
|
||||
<div class="grid">
|
||||
<div class="form-group">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" id="firstName" name="firstName" value="[Current First Name]" placeholder="Enter your first name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" id="lastName" name="lastName" value="[Current Last Name]" placeholder="Enter your last name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" name="email" value="[Current Email]" placeholder="Enter your email address">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="mobile">Mobile Number</label>
|
||||
<input type="tel" id="mobile" name="mobile" value="[Current Mobile]" placeholder="Enter your mobile number">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit">Save Changes</button>
|
||||
<div class="info-box">
|
||||
<ul>
|
||||
<li><strong>Note:</strong> Email and mobile can be updated.</li>
|
||||
<li><strong>Verification:</strong> A verification link/OTP will be sent to the new contact details.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="password-management">
|
||||
<h2>Password Management</h2>
|
||||
<div class="grid">
|
||||
<div class="form-group">
|
||||
<label for="currentPassword">Current Password</label>
|
||||
<input type="password" id="currentPassword" name="currentPassword" placeholder="Enter current password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newPassword">New Password</label>
|
||||
<input type="password" id="newPassword" name="newPassword" placeholder="Enter new password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmPassword">Confirm New Password</label>
|
||||
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm new password">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit">Change Password</button>
|
||||
<a href="#" class="action-link">Forgot Password?</a>
|
||||
</section>
|
||||
|
||||
<section id="address-management">
|
||||
<h2>Address Management</h2>
|
||||
<p>Manage your saved delivery addresses.</p>
|
||||
<button type="button">View/Manage Addresses</button>
|
||||
<div class="info-box">
|
||||
<ul>
|
||||
<li><strong>Default Address:</strong> [Placeholder for default address]</li>
|
||||
<li><strong>Saved Addresses:</strong> [Number of saved addresses] addresses.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="preferences">
|
||||
<h2>Preferences</h2>
|
||||
<div class="form-group">
|
||||
<label for="notification-pref">Email Notification Preferences:</label>
|
||||
<input type="checkbox" id="notification-pref" name="notification-pref" checked=""> Receive marketing emails and updates
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sms-pref">SMS Notification Preferences:</label>
|
||||
<input type="checkbox" id="sms-pref" name="sms-pref"> Receive SMS updates and offers
|
||||
</div>
|
||||
<button type="submit">Update Preferences</button>
|
||||
</section>
|
||||
|
||||
<section id="deactivate-account">
|
||||
<h2>Deactivate Account</h2>
|
||||
<p>If you wish to temporarily deactivate your account, you can do so here.</p>
|
||||
<button type="button" style="background-color: #f44336;">Deactivate Account</button>
|
||||
<div class="info-box">
|
||||
<p><strong>Warning:</strong> Deactivating your account will hide your profile and activity. You can reactivate it by logging back in.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
27
index.html
Normal file
27
index.html
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
<!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">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<div class="hero-1-wrapper"><section class="hero-1-two-column"><div class="hero-1-content"><h2 class="hero-1-heading"><a href="" id="ib498e">Your One-Stop Shop for Electronics, Fashion, Home & More!</a></h2><p class="hero-1-description">Discover millions of products from trusted brands, enjoy fast delivery, and experience seamless shopping with secure payments. Your ultimate online shopping destination is here.</p><div class="hero-1-button-group"><button class="hero-1-btn hero-1-solid">Shop Now</button><button class="hero-1-btn hero-1-outline">Browse Categories</button></div></div><div class="hero-1-image"><img src="https://images.unsplash.com/photo-1657812159103-1b2a52a7f5e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxlLWNvbW1lcmNlJTJDJTI1MjBvbmxpbmUlMjUyMHNob3BwaW5nJTJDJTI1MjBkZWFscyUyQyUyNTIwcHJvZHVjdHMlMkMlMjUyMGVsZWN0cm9uaWNzJTJDJTI1MjBmYXNoaW9uJTJDJTI1MjBob21lJTI1MjBnb29kcyUyQyUyNTIwY29udmVuaWVuY2V8ZW58MHx8fHwxNzUzMjQ5MTQ5fDA&ixlib=rb-4.1.0&q=80&w=1080" class="hero-1-placeholder"></div></section></div>
|
||||
<div class="feature-7-wrapper"><section class="feature-7-section"><div class="feature-7-left"><p class="feature-7-tagline">Your Daily Dose of Deals & Delights</p><h2 class="feature-7-heading"><a href="" id="i3etis">Unbeatable Deals, Endless Choices, Delivered to Your Door</a></h2><p class="feature-7-description">Discover millions of products across categories, from electronics to fashion, home essentials to books. Enjoy seamless navigation, secure payments, and lightning-fast delivery for an unparalleled online shopping experience.</p><div class="feature-7-button-group"><button class="feature-7-btn feature-7-outline">Browse Categories</button><button class="feature-7-btn feature-7-arrow">Start Shopping Now →</button></div></div><div class="feature-7-right"><div class="feature-7-image"><img src="https://images.unsplash.com/photo-1583167727779-915662aef3a8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxzaG9wcGluZyUyQyUyNTIwZS1jb21tZXJjZSUyQyUyNTIwcHJvZHVjdHMlMkMlMjUyMGRlYWxzJTJDJTI1MjBkZWxpdmVyeXxlbnwwfHx8fDE3NTMyNDkxNTd8MA&ixlib=rb-4.1.0&q=80&w=1080" class="feature-7-placeholder"></div></div></section></div>
|
||||
<div class="testimonial-1-wrapper"><div class="testimonial-1-container"><img src="io8-logo.svg" alt="Io8" class="testimonial-1-logo"><p class="testimonial-1-text">The shopping experience on this platform is truly unparalleled. From a vast selection of products to incredibly fast delivery and responsive customer support, every interaction has been smooth and satisfying. This is my go-to for all online needs!</p><div class="testimonial-1-author"><img src="author-avatar.jpg" alt="Author Avatar" class="testimonial-1-author-image"><div class="testimonial-1-author-info"><p class="testimonial-1-author-name">Priya Sharma</p><p class="testimonial-1-author-position">Verified Buyer</p></div></div></div></div>
|
||||
<section class="logo-section"><div class="container"><h2 class="section-title">Our Trusted Network & Accolades</h2><div class="logo-grid"><div class="logo-item">Leading Brand Partnerships</div><div class="logo-item">Secure Payment Processors</div><div class="logo-item">Nationwide Logistics Alliance</div><div class="logo-item">Industry Innovation Award</div><div class="logo-item">Customer Choice Recognition</div><div class="logo-item">Sustainable Business Certified</div></div></div></section>
|
||||
<div class="pricing-2-wrapper"><section class="pricing-2-section"><p class="pricing-2-tagline">Choose Your Perfect Selling Journey</p><h2 class="pricing-2-heading">Seller Plans Tailored for Your Growth</h2><p class="pricing-2-subheading">Unlock powerful tools and reach millions of customers. Find the plan that best fits your business needs, whether you're just starting or scaling big.</p><div class="pricing-2-toggle"><button class="pricing-2-btn pricing-2-btn-active">Monthly billing</button><button class="pricing-2-btn">Annual billing</button></div><div class="pricing-2-grid"><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Starter Seller</h3><p class="pricing-2-plan-subtitle">Ideal for new businesses and small-scale operations.</p><p class="pricing-2-price">$49/mo</p><hr class="pricing-2-divider"><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ Unlimited Product Listings</li><li>✓ Basic Sales Analytics</li><li>✓ Secure Payment Processing</li><li>✓ Standard Customer Support</li><li>✓ Access to Seller Dashboard</li><li>✓ Marketing Tool Access</li></ul><button class="pricing-2-cta">Start Selling Today</button></div><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Pro Seller</h3><p class="pricing-2-plan-subtitle">Perfect for growing businesses seeking advanced features and support.</p><p class="pricing-2-price">$99/mo</p><hr class="pricing-2-divider"><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ All Starter Seller Features</li><li>✓ Advanced Analytics & Reports</li><li>✓ Priority Customer Support</li><li>✓ Dedicated Account Manager</li><li>✓ API Access & Integrations</li><li>✓ Premium Marketing & Promotions</li></ul><button class="pricing-2-cta">Upgrade Your Business</button></div></div></section></div>
|
||||
<div class="cta-3-wrapper"><section class="cta-3-section"><h2 class="cta-3-heading">Unbeatable Deals, Endless Choices!</h2><p class="cta-3-description">Discover millions of products across electronics, fashion, home essentials, and more. Enjoy amazing prices, fast delivery, and a seamless shopping experience. Your next great find is just a click away!</p><div class="cta-3-button-group"><button class="cta-3-btn cta-3-solid">Shop Now</button><button class="cta-3-btn cta-3-outline">Explore Categories</button></div></section></div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
155
login_page.html
Normal file
155
login_page.html
Normal file
@ -0,0 +1,155 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section class="login-section">
|
||||
<div class="login-container">
|
||||
<div class="login-promo-panel">
|
||||
<h2>Login</h2>
|
||||
<p>Get access to your Orders, Wishlist and Recommendations</p>
|
||||
<div class="promo-graphic-placeholder">
|
||||
<!-- Placeholder for a marketing image or graphic -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form-panel">
|
||||
<form class="login-form">
|
||||
<div class="input-group">
|
||||
<input type="text" id="emailOrPhone" placeholder="Enter Email/Mobile number" required="" aria-label="Enter Email or Mobile number">
|
||||
<hr class="input-underline">
|
||||
</div>
|
||||
<div class="input-group password-group">
|
||||
<input type="password" id="password" placeholder="Enter Password" required="" aria-label="Enter Password">
|
||||
<a href="#" class="forgot-password-link">Forgot?</a>
|
||||
<hr class="input-underline">
|
||||
</div>
|
||||
<p class="terms-policy-text">By continuing, you agree to Flipkart's <a href="#" class="link">Terms of Use</a> and <a href="#" class="link">Privacy Policy</a>.</p>
|
||||
<button type="submit" class="login-button">Login</button>
|
||||
<div class="or-separator">OR</div>
|
||||
<button type="button" class="otp-button">Request OTP</button>
|
||||
</form>
|
||||
<div class="create-account-wrapper">
|
||||
<a href="#" class="create-account-link">New to Flipkart? Create an account</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="social-login-options">
|
||||
<h2 class="social-login-heading">Or log in with</h2>
|
||||
<div class="social-login-buttons">
|
||||
<a href="#" class="social-button social-button-google" aria-label="Login with Google">
|
||||
<span class="social-icon">Google Icon Placeholder</span>
|
||||
<span class="social-text">Google</span>
|
||||
</a>
|
||||
<a href="#" class="social-button social-button-facebook" aria-label="Login with Facebook">
|
||||
<span class="social-icon">Facebook Icon Placeholder</span>
|
||||
<span class="social-text">Facebook</span>
|
||||
</a>
|
||||
<a href="#" class="social-button social-button-apple" aria-label="Login with Apple">
|
||||
<span class="social-icon">Apple Icon Placeholder</span>
|
||||
<span class="social-text">Apple</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<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" />
|
||||
<section class="forgot-password-container">
|
||||
<h2>Forgot Password?</h2>
|
||||
<p>Enter the email address associated with your account, and we'll send you a link to reset your password.</p>
|
||||
|
||||
<form action="#" 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="">
|
||||
</div>
|
||||
<button type="submit" class="submit-button">Send Reset Link</button>
|
||||
</form>
|
||||
|
||||
<div class="back-to-login">
|
||||
<a href="#">Back to Login</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="login-benefits-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Benefits of Logging In</h2>
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon-placeholder">🛒</span>
|
||||
</div>
|
||||
<h3 class="benefit-title">Faster Checkout</h3>
|
||||
<p class="benefit-description">Save your details and speed through purchases with pre-filled forms.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon-placeholder">🌟</span>
|
||||
</div>
|
||||
<h3 class="benefit-title">Personalized Experience</h3>
|
||||
<p class="benefit-description">Get tailored recommendations based on your preferences and browsing history.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon-placeholder">📦</span>
|
||||
</div>
|
||||
<h3 class="benefit-title">Easy Order Tracking</h3>
|
||||
<p class="benefit-description">View your order history, track shipments, and manage returns effortlessly.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon-placeholder">🏷️</span>
|
||||
</div>
|
||||
<h3 class="benefit-title">Exclusive Offers</h3>
|
||||
<p class="benefit-description">Access members-only discounts, special promotions, and early sale access.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon-placeholder">❤️</span>
|
||||
</div>
|
||||
<h3 class="benefit-title">Wishlist & Favorites</h3>
|
||||
<p class="benefit-description">Save items for later, create wishlists, and easily revisit products you love.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon-placeholder">🔔</span>
|
||||
</div>
|
||||
<h3 class="benefit-title">Notifications & Alerts</h3>
|
||||
<p class="benefit-description">Receive updates on price drops, stock availability, and new arrivals.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="signup-prompt">
|
||||
<div class="signup-prompt-container">
|
||||
<div class="signup-prompt-text-content">
|
||||
<h2 class="signup-prompt-heading">Unlock a World of Opportunities</h2>
|
||||
<p class="signup-prompt-description">Sign up today to access exclusive deals, personalize your experience, and enjoy a seamless journey.</p>
|
||||
<ul class="signup-prompt-features">
|
||||
<li>Exclusive Member Discounts</li>
|
||||
<li>Personalized Product Recommendations</li>
|
||||
<li>Faster & Secure Checkout</li>
|
||||
</ul>
|
||||
<a href="#signup" class="signup-prompt-cta-button">Create Your Free Account</a>
|
||||
</div>
|
||||
<div class="signup-prompt-image-area">
|
||||
<img src="path/to/placeholder-illustration.png" alt="Illustration of a person happily shopping online with various products.">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
203
order_confirmation_page.html
Normal file
203
order_confirmation_page.html
Normal file
@ -0,0 +1,203 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Order Confirmation Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section class="success-message-section">
|
||||
<div class="success-message-container">
|
||||
<div class="success-icon-placeholder">
|
||||
<!-- Placeholder for a checkmark or success icon -->
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-8.98"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="success-heading">Order Placed Successfully!</h2>
|
||||
<p class="success-text">Your order <strong class="order-id-placeholder">#123456</strong> has been confirmed and will be shipped soon. You will receive an email confirmation shortly.</p>
|
||||
<div class="success-actions">
|
||||
<a href="#" class="button primary-button">View Order Details</a>
|
||||
<a href="#" class="button secondary-button">Continue Shopping</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="order-details-section">
|
||||
<div class="container">
|
||||
<div class="order-details-card">
|
||||
<header class="order-header">
|
||||
<div class="order-id-status">
|
||||
<h2 class="order-id">Order ID: <strong>#ORD123456789</strong></h2>
|
||||
<p class="order-status">Status: <span class="status-delivered">Delivered</span></p>
|
||||
</div>
|
||||
<p class="order-date">Ordered on: Jan 15, 2024</p>
|
||||
</header>
|
||||
|
||||
<div class="order-summary">
|
||||
<div class="summary-block">
|
||||
<h3>Delivery Address</h3>
|
||||
<p><strong>[Customer Name]</strong></p>
|
||||
<p>[Street Address Line 1]</p>
|
||||
<p>[Street Address Line 2 (Optional)]</p>
|
||||
<p>[City], [State] - [Pincode]</p>
|
||||
<p>Phone: [Mobile Number]</p>
|
||||
</div>
|
||||
<div class="summary-block">
|
||||
<h3>Payment Information</h3>
|
||||
<p><strong>Payment Method:</strong> Cash on Delivery (COD)</p>
|
||||
<p><strong>Total Amount:</strong> ₹12,999.00</p>
|
||||
<p><strong>Payment Status:</strong> Paid</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-items">
|
||||
<h3>Items in Your Order</h3>
|
||||
<div class="order-item">
|
||||
<div class="item-image">
|
||||
<img src="https://via.placeholder.com/80" alt="Product 1 Placeholder">
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<h4>[Product Name 1]</h4>
|
||||
<p>Quantity: 1</p>
|
||||
<p>Seller: [Seller Name 1]</p>
|
||||
</div>
|
||||
<div class="item-price-qty">
|
||||
<p class="item-price">₹7,999.00</p>
|
||||
<p class="item-delivery-status">Delivered on Jan 20, 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-item">
|
||||
<div class="item-image">
|
||||
<img src="https://via.placeholder.com/80" alt="Product 2 Placeholder">
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<h4>[Product Name 2 with Longer Title]</h4>
|
||||
<p>Quantity: 2</p>
|
||||
<p>Seller: [Seller Name 2]</p>
|
||||
</div>
|
||||
<div class="item-price-qty">
|
||||
<p class="item-price">₹2,500.00 x 2 = ₹5,000.00</p>
|
||||
<p class="item-delivery-status">Delivered on Jan 20, 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="order-actions">
|
||||
<a href="#" class="btn btn-primary">Download Invoice</a>
|
||||
<a href="#" class="btn btn-secondary">Need Help?</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="order-track-section">
|
||||
<div class="order-track-container">
|
||||
<h2 class="order-track-title">Track Your Order</h2>
|
||||
<p class="order-track-description">
|
||||
Quickly check the status of your recent order. Enter your Order ID below or explore your complete order history.
|
||||
</p>
|
||||
<div class="order-track-form-group">
|
||||
<label for="order-id-input" class="sr-only">Order ID</label>
|
||||
<input type="text" id="order-id-input" placeholder="e.g., FLP123456789" aria-label="Enter your Order ID" class="order-track-input">
|
||||
<button type="submit" class="order-track-button">Track Now</button>
|
||||
</div>
|
||||
<div class="order-track-history-link-wrapper">
|
||||
<p>Looking for older orders? <a href="/my-orders" class="order-track-history-link">View Order History</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="customer-support-info" class="customer-support-section">
|
||||
<div class="container">
|
||||
<h1 class="section-title">Customer Support & Help Center</h1>
|
||||
|
||||
<div class="search-help-container">
|
||||
<form action="#" method="get" class="search-help-form">
|
||||
<input type="search" placeholder="Search for help topics, orders, or FAQs..." aria-label="Search help topics">
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="help-topics-grid">
|
||||
<div class="topic-card">
|
||||
<h2 class="card-title">Order & Delivery</h2>
|
||||
<p class="card-description">Track your order, modify delivery details, or report missing items.</p>
|
||||
<a href="#" class="card-link">Manage Orders</a>
|
||||
</div>
|
||||
<div class="topic-card">
|
||||
<h2 class="card-title">Returns & Refunds</h2>
|
||||
<p class="card-description">Initiate a return, check refund status, or understand our policy.</p>
|
||||
<a href="#" class="card-link">View Policy</a>
|
||||
</div>
|
||||
<div class="topic-card">
|
||||
<h2 class="card-title">Payments & Wallet</h2>
|
||||
<p class="card-description">Issues with payment methods, transactions, or digital wallet top-ups.</p>
|
||||
<a href="#" class="card-link">Payment Help</a>
|
||||
</div>
|
||||
<div class="topic-card">
|
||||
<h2 class="card-title">Cancellations</h2>
|
||||
<p class="card-description">How to cancel an order or specific items from your purchase.</p>
|
||||
<a href="#" class="card-link">Cancel Order</a>
|
||||
</div>
|
||||
<div class="topic-card">
|
||||
<h2 class="card-title">Product Issues</h2>
|
||||
<p class="card-description">Report a defective, damaged, or incorrect product received.</p>
|
||||
<a href="#" class="card-link">Report Issue</a>
|
||||
</div>
|
||||
<div class="topic-card">
|
||||
<h2 class="card-title">Account & Login</h2>
|
||||
<p class="card-description">Help with account settings, password resets, or security concerns.</p>
|
||||
<a href="#" class="card-link">Account Help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="additional-support-section">
|
||||
<h2 class="subsection-title">Need more help?</h2>
|
||||
<div class="contact-options-list">
|
||||
<div class="contact-option-item">
|
||||
<h3 class="option-title">FAQs & Self-Help</h3>
|
||||
<p class="option-description">Browse our comprehensive list of frequently asked questions.</p>
|
||||
<a href="#" class="option-link">Explore FAQs</a>
|
||||
</div>
|
||||
<div class="contact-option-item">
|
||||
<h3 class="option-title">Contact Us Directly</h3>
|
||||
<p class="option-description">Speak to our support team via chat, email, or phone call.</p>
|
||||
<a href="#" class="option-link">Get in Touch</a>
|
||||
</div>
|
||||
<div class="contact-option-item">
|
||||
<h3 class="option-title">Service Centers</h3>
|
||||
<p class="option-description">Locate authorized service centers for product repairs and support.</p>
|
||||
<a href="#" class="option-link">Find Nearest</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="delivery-section">
|
||||
<div class="delivery-header">
|
||||
<h4 class="delivery-title">Estimated Delivery</h4>
|
||||
</div>
|
||||
<div class="delivery-details">
|
||||
<div class="delivery-date-container">
|
||||
<span class="delivery-icon-placeholder">📦</span> <!-- Placeholder for a package icon -->
|
||||
<p class="delivery-date">
|
||||
<strong class="date-range">DD MMM - DD MMM</strong>
|
||||
</p>
|
||||
</div>
|
||||
<p class="delivery-note">Usually delivered in <span class="delivery-days">X-Y days</span>.</p>
|
||||
<!-- Further details could go here, e.g., "Cash on Delivery available" -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
453
product_detail_page.html
Normal file
453
product_detail_page.html
Normal file
@ -0,0 +1,453 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Detail Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section class="product-gallery">
|
||||
<div class="gallery-main-image">
|
||||
<figure>
|
||||
<img src="#" alt="Main Product Image - Placeholder" class="main-product-image">
|
||||
<figcaption class="sr-only">Main image of the product.</figcaption>
|
||||
</figure>
|
||||
<div class="zoom-indicator">
|
||||
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-thumbnails">
|
||||
<button class="thumbnail-nav-button prev-button" aria-label="Previous thumbnail">
|
||||
<
|
||||
</button>
|
||||
<div class="thumbnail-list-wrapper">
|
||||
<ul class="thumbnail-list">
|
||||
<li class="thumbnail-item active">
|
||||
<button class="thumbnail-button" aria-label="View product image 1">
|
||||
<img src="#" alt="Product Thumbnail 1 - Placeholder">
|
||||
</button>
|
||||
</li>
|
||||
<li class="thumbnail-item">
|
||||
<button class="thumbnail-button" aria-label="View product image 2">
|
||||
<img src="#" alt="Product Thumbnail 2 - Placeholder">
|
||||
</button>
|
||||
</li>
|
||||
<li class="thumbnail-item">
|
||||
<button class="thumbnail-button" aria-label="View product image 3">
|
||||
<img src="#" alt="Product Thumbnail 3 - Placeholder">
|
||||
</button>
|
||||
</li>
|
||||
<li class="thumbnail-item">
|
||||
<button class="thumbnail-button" aria-label="View product image 4">
|
||||
<img src="#" alt="Product Thumbnail 4 - Placeholder">
|
||||
</button>
|
||||
</li>
|
||||
<li class="thumbnail-item">
|
||||
<button class="thumbnail-button" aria-label="View product image 5">
|
||||
<img src="#" alt="Product Thumbnail 5 - Placeholder">
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="thumbnail-nav-button next-button" aria-label="Next thumbnail">
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="product-info-section">
|
||||
<div class="product-details-container">
|
||||
|
||||
<h1 class="product-title">Product Title Placeholder - High-Quality Gadget (XYZ Model)</h1>
|
||||
|
||||
<div class="product-rating-reviews">
|
||||
<span class="stars" aria-label="4 out of 5 stars">★★★★☆</span>
|
||||
<span class="rating-count">1,234 Ratings</span>
|
||||
<span class="review-count">& 456 Reviews</span>
|
||||
</div>
|
||||
|
||||
<div class="product-divider"></div>
|
||||
|
||||
<div class="product-price-block">
|
||||
<div class="current-price">
|
||||
<span class="price-currency">₹</span>
|
||||
<span class="price-value">8,999</span>
|
||||
</div>
|
||||
<div class="mrp-price">
|
||||
<span class="mrp-label">M.R.P.:</span>
|
||||
<span class="strike-through">₹14,999</span>
|
||||
</div>
|
||||
<div class="discount-info">
|
||||
<span class="discount-percentage">40% off</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-availability">
|
||||
<span class="availability-status">In Stock</span>
|
||||
<span class="delivery-estimate">Delivery by Sun, DD Month</span>
|
||||
</div>
|
||||
|
||||
<div class="product-divider"></div>
|
||||
|
||||
<div class="product-highlights">
|
||||
<h2 class="highlights-title">Product Highlights</h2>
|
||||
<ul class="highlights-list">
|
||||
<li>Placeholder Feature 1: High-resolution Full HD Display</li>
|
||||
<li>Placeholder Feature 2: Long-lasting 5000 mAh Battery</li>
|
||||
<li>Placeholder Feature 3: Powerful Octa-core Processor for Seamless Performance</li>
|
||||
<li>Placeholder Feature 4: Sleek and Lightweight Design with Premium Finish</li>
|
||||
<li>Placeholder Feature 5: Advanced Camera System with AI Enhancements</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="product-divider"></div>
|
||||
|
||||
<div class="product-actions">
|
||||
<button class="action-button add-to-cart-button">ADD TO CART</button>
|
||||
<button class="action-button buy-now-button">BUY NOW</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="product-actions-section">
|
||||
<div class="product-details-summary">
|
||||
<h2 class="product-title">Product Name Placeholder</h2>
|
||||
<div class="price-display">
|
||||
<span class="current-price">₹X,XXX</span>
|
||||
<span class="mrp-price">M.R.P.: <del>₹Y,YYY</del></span>
|
||||
<span class="discount-percentage">ZZ% off</span>
|
||||
</div>
|
||||
<div class="rating-reviews">
|
||||
<span class="stars" aria-label="4.5 out of 5 stars">★★★★☆</span>
|
||||
<span class="review-count">(X,XXX Ratings & YYY Reviews)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quantity-selection-group">
|
||||
<label for="product-quantity" class="quantity-label">Quantity:</label>
|
||||
<div class="quantity-control">
|
||||
<button type="button" class="quantity-btn quantity-btn--decrease" aria-label="Decrease quantity">-</button>
|
||||
<input type="number" id="product-quantity" value="1" min="1" max="99" class="quantity-input" aria-label="Select product quantity">
|
||||
<button type="button" class="quantity-btn quantity-btn--increase" aria-label="Increase quantity">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-action-buttons">
|
||||
<button type="button" class="btn btn-add-to-cart">
|
||||
<span class="icon-placeholder">🛒</span> Add to Cart
|
||||
</button>
|
||||
<button type="button" class="btn btn-buy-now">
|
||||
<span class="icon-placeholder">⚡</span> Buy Now
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="delivery-info-section">
|
||||
<h3 class="delivery-heading">Delivery Details</h3>
|
||||
<div class="pincode-check-group">
|
||||
<input type="text" class="pincode-input" placeholder="Enter Delivery Pincode" aria-label="Enter delivery pincode">
|
||||
<button type="button" class="btn btn-check-pincode">Check</button>
|
||||
</div>
|
||||
<p class="delivery-message">Enter your pincode to get estimated delivery date and options.</p>
|
||||
<p class="delivery-status">Typically delivered in <strong>2-3 days</strong>.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="product-section">
|
||||
<div class="product-section-container">
|
||||
|
||||
<div class="product-description-block">
|
||||
<h2 class="section-title">Product Description</h2>
|
||||
<p class="description-text">
|
||||
[Placeholder: This is a wireframe-friendly placeholder for the main product description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.]
|
||||
</p>
|
||||
<h3 class="subsection-title">Key Features</h3>
|
||||
<ul class="feature-list">
|
||||
<li>[Placeholder: Feature 1 - High-performance processor for seamless multitasking.]</li>
|
||||
<li>[Placeholder: Feature 2 - Stunning edge-to-edge display with vibrant colors.]</li>
|
||||
<li>[Placeholder: Feature 3 - Long-lasting battery life for all-day usage.]</li>
|
||||
<li>[Placeholder: Feature 4 - Advanced camera system for professional-grade photos and videos.]</li>
|
||||
<li>[Placeholder: Feature 5 - Durable design with premium materials.]</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="product-specifications-block">
|
||||
<h2 class="section-title">Specifications</h2>
|
||||
<table class="specifications-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="spec-category">General</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="spec-name">Model Name</td>
|
||||
<td class="spec-value">[Placeholder: SuperGadget X]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="spec-name">Color</td>
|
||||
<td class="spec-value">[Placeholder: Lunar Silver]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="spec-name">Operating System</td>
|
||||
<td class="spec-value">[Placeholder: Android 14]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="spec-category">Display Features</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="spec-name">Display Size</td>
|
||||
<td class="spec-value">[Placeholder: 6.8 inch]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="spec-name">Resolution</td>
|
||||
<td class="spec-value">[Placeholder: 3200 x 1440 Pixels]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="spec-name">Display Type</td>
|
||||
<td class="spec-value">[Placeholder: Dynamic AMOLED 2X]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="spec-category">Memory & Storage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="spec-name">Internal Storage</td>
|
||||
<td class="spec-value">[Placeholder: 256 GB]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="spec-name">RAM</td>
|
||||
<td class="spec-value">[Placeholder: 12 GB]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="spec-name">Expandable Storage</td>
|
||||
<td class="spec-value">[Placeholder: Up to 1 TB]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" class="spec-category">Camera Features</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="spec-name">Primary Camera</td>
|
||||
<td class="spec-value">[Placeholder: 200MP + 12MP + 10MP]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="spec-name">Secondary Camera</td>
|
||||
<td class="spec-value">[Placeholder: 40MP]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="spec-name">Flash</td>
|
||||
<td class="spec-value">[Placeholder: Yes, LED Flash]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="customer-reviews-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Customer Reviews</h2>
|
||||
|
||||
<div class="review-summary">
|
||||
<div class="average-rating-display">
|
||||
<span class="rating-value">4.5</span>
|
||||
<div class="star-rating" role="img" aria-label="Average rating of 4.5 out of 5 stars">
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star half">★</span>
|
||||
</div>
|
||||
<span class="total-reviews-count">(1,234 Ratings & 456 Reviews)</span>
|
||||
</div>
|
||||
<button class="write-review-button">Write a Review</button>
|
||||
</div>
|
||||
|
||||
<div class="reviews-grid">
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="star-rating" role="img" aria-label="Rated 5 out of 5 stars">
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
</div>
|
||||
<h3 class="review-title">Excellent Product!</h3>
|
||||
</div>
|
||||
<p class="review-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
<div class="reviewer-info">
|
||||
<span class="reviewer-name">John D.</span>
|
||||
<span class="review-date">Reviewed on Jan 15, 2023</span>
|
||||
</div>
|
||||
<div class="review-actions">
|
||||
<button class="action-button helpful-button">Helpful (12)</button>
|
||||
<button class="action-button report-button">Report Abuse</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="star-rating" role="img" aria-label="Rated 4 out of 5 stars">
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star empty">★</span>
|
||||
</div>
|
||||
<h3 class="review-title">Good Value for Money</h3>
|
||||
</div>
|
||||
<p class="review-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div class="reviewer-info">
|
||||
<span class="reviewer-name">Jane S.</span>
|
||||
<span class="review-date">Reviewed on Jan 10, 2023</span>
|
||||
</div>
|
||||
<div class="review-actions">
|
||||
<button class="action-button helpful-button">Helpful (5)</button>
|
||||
<button class="action-button report-button">Report Abuse</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="star-rating" role="img" aria-label="Rated 3 out of 5 stars">
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star filled">★</span>
|
||||
<span class="star empty">★</span>
|
||||
<span class="star empty">★</span>
|
||||
</div>
|
||||
<h3 class="review-title">Could be Better</h3>
|
||||
</div>
|
||||
<p class="review-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
<div class="reviewer-info">
|
||||
<span class="reviewer-name">Robert B.</span>
|
||||
<span class="review-date">Reviewed on Dec 28, 2022</span>
|
||||
</div>
|
||||
<div class="review-actions">
|
||||
<button class="action-button helpful-button">Helpful (2)</button>
|
||||
<button class="action-button report-button">Report Abuse</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="pagination-controls">
|
||||
<button class="load-more-button">LOAD MORE REVIEWS</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="related-products-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Related Products</h2>
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image-wrapper">
|
||||
<img src="https://via.placeholder.com/200x200?text=Product+Image+1" alt="Placeholder Product 1" class="product-image">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">Product Name One</h3>
|
||||
<div class="product-price">
|
||||
<span class="current-price">$129.99</span>
|
||||
<span class="original-price">$199.99</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image-wrapper">
|
||||
<img src="https://via.placeholder.com/200x200?text=Product+Image+2" alt="Placeholder Product 2" class="product-image">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">Product Name Two with Longer Description</h3>
|
||||
<div class="product-price">
|
||||
<span class="current-price">$85.50</span>
|
||||
<span class="original-price">$100.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image-wrapper">
|
||||
<img src="https://via.placeholder.com/200x200?text=Product+Image+3" alt="Placeholder Product 3" class="product-image">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">Product Name Three</h3>
|
||||
<div class="product-price">
|
||||
<span class="current-price">$249.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image-wrapper">
|
||||
<img src="https://via.placeholder.com/200x200?text=Product+Image+4" alt="Placeholder Product 4" class="product-image">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">Product Name Four</h3>
|
||||
<div class="product-price">
|
||||
<span class="current-price">$49.95</span>
|
||||
<span class="original-price">$60.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image-wrapper">
|
||||
<img src="https://via.placeholder.com/200x200?text=Product+Image+5" alt="Placeholder Product 5" class="product-image">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">Product Name Five</h3>
|
||||
<div class="product-price">
|
||||
<span class="current-price">$75.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image-wrapper">
|
||||
<img src="https://via.placeholder.com/200x200?text=Product+Image+6" alt="Placeholder Product 6" class="product-image">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">Product Name Six</h3>
|
||||
<div class="product-price">
|
||||
<span class="current-price">$310.00</span>
|
||||
<span class="original-price">$350.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
335
product_listing_page.html
Normal file
335
product_listing_page.html
Normal file
@ -0,0 +1,335 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Listing Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section class="category-header">
|
||||
<div class="container">
|
||||
<nav aria-label="Breadcrumb" class="breadcrumbs">
|
||||
<ol>
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#parent-category">Parent Category Name</a></li>
|
||||
<li><span aria-current="page">Current Category Title</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="category-title">Main Category Title Placeholder</h1>
|
||||
<p class="category-description">This paragraph serves as a brief introduction or description for the category, providing context and an overview of the content or products within this section.</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="filter-sort-container">
|
||||
<div class="sort-options-bar">
|
||||
<h2 class="sort-heading">Sort By</h2>
|
||||
<ul class="sort-list">
|
||||
<li class="sort-item active"><a href="#">Relevance</a></li>
|
||||
<li class="sort-item"><a href="#">Popularity</a></li>
|
||||
<li class="sort-item"><a href="#">Price -- Low to High</a></li>
|
||||
<li class="sort-item"><a href="#">Price -- High to Low</a></li>
|
||||
<li class="sort-item"><a href="#">Newest First</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<aside class="filter-sidebar">
|
||||
<div class="filter-header">
|
||||
<h3 class="filter-heading">Filters</h3>
|
||||
<button type="button" class="clear-all-filters">Clear All</button>
|
||||
</div>
|
||||
|
||||
<section class="filter-group">
|
||||
<h4 class="filter-group-heading">Categories</h4>
|
||||
<ul class="filter-list">
|
||||
<li class="filter-item">
|
||||
<input type="checkbox" id="category1" name="category" value="category1">
|
||||
<label for="category1">Category Name 1 (123)</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="checkbox" id="category2" name="category" value="category2">
|
||||
<label for="category2">Category Name 2 (45)</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="checkbox" id="category3" name="category" value="category3">
|
||||
<label for="category3">Category Name 3 (78)</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="checkbox" id="category4" name="category" value="category4">
|
||||
<label for="category4">Category Name 4 (90)</label>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="filter-group">
|
||||
<h4 class="filter-group-heading">Price</h4>
|
||||
<div class="price-range">
|
||||
<select class="price-min">
|
||||
<option value="min">Min</option>
|
||||
<option value="100">₹100</option>
|
||||
<option value="500">₹500</option>
|
||||
<option value="1000">₹1000</option>
|
||||
</select>
|
||||
<span>to</span>
|
||||
<select class="price-max">
|
||||
<option value="max">Max</option>
|
||||
<option value="1000">₹1000</option>
|
||||
<option value="5000">₹5000</option>
|
||||
<option value="10000">₹10000</option>
|
||||
<option value="20000">₹20000+</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="filter-group">
|
||||
<h4 class="filter-group-heading">Brand</h4>
|
||||
<div class="brand-search-placeholder">
|
||||
<input type="search" placeholder="Search Brand...">
|
||||
</div>
|
||||
<ul class="filter-list">
|
||||
<li class="filter-item">
|
||||
<input type="checkbox" id="brand1" name="brand" value="brand1">
|
||||
<label for="brand1">Brand A (56)</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="checkbox" id="brand2" name="brand" value="brand2">
|
||||
<label for="brand2">Brand B (34)</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="checkbox" id="brand3" name="brand" value="brand3">
|
||||
<label for="brand3">Brand C (78)</label>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="view-more-brands">View 10 more</a>
|
||||
</section>
|
||||
|
||||
<section class="filter-group">
|
||||
<h4 class="filter-group-heading">Customer Ratings</h4>
|
||||
<ul class="filter-list">
|
||||
<li class="filter-item">
|
||||
<input type="radio" id="rating5" name="rating" value="5">
|
||||
<label for="rating5">5 ★ & above</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="radio" id="rating4" name="rating" value="4">
|
||||
<label for="rating4">4 ★ & above</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="radio" id="rating3" name="rating" value="3">
|
||||
<label for="rating3">3 ★ & above</label>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="filter-group">
|
||||
<h4 class="filter-group-heading">Discount</h4>
|
||||
<ul class="filter-list">
|
||||
<li class="filter-item">
|
||||
<input type="radio" id="discount50" name="discount" value="50">
|
||||
<label for="discount50">50% or more</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="radio" id="discount40" name="discount" value="40">
|
||||
<label for="discount40">40% or more</label>
|
||||
</li>
|
||||
<li class="filter-item">
|
||||
<input type="radio" id="discount30" name="discount" value="30">
|
||||
<label for="discount30">30% or more</label>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
<section class="product-grid-section">
|
||||
<h2 class="product-grid-section__heading">Top Deals on Electronics</h2>
|
||||
<div class="product-grid-container">
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-card__link">
|
||||
<div class="product-card__image-container">
|
||||
<img src="https://via.placeholder.com/200x200?text=Laptop" alt="Laptop Pro X15" class="product-card__image">
|
||||
</div>
|
||||
<div class="product-card__details">
|
||||
<h3 class="product-card__title">Laptop Pro X15 with i7 Processor</h3>
|
||||
<div class="product-card__price">
|
||||
<span class="product-card__current-price">₹74,999</span>
|
||||
<span class="product-card__original-price">₹99,999</span>
|
||||
<span class="product-card__discount">25% off</span>
|
||||
</div>
|
||||
<div class="product-card__rating">
|
||||
<span class="product-card__stars">★★★★☆</span>
|
||||
<span class="product-card__reviews">(4,500 ratings)</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-card__add-to-cart">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-card__link">
|
||||
<div class="product-card__image-container">
|
||||
<img src="https://via.placeholder.com/200x200?text=Smartphone" alt="Smartphone Ultra 5G" class="product-card__image">
|
||||
</div>
|
||||
<div class="product-card__details">
|
||||
<h3 class="product-card__title">Smartphone Ultra 5G, 128GB Storage</h3>
|
||||
<div class="product-card__price">
|
||||
<span class="product-card__current-price">₹29,999</span>
|
||||
<span class="product-card__original-price">₹35,000</span>
|
||||
<span class="product-card__discount">14% off</span>
|
||||
</div>
|
||||
<div class="product-card__rating">
|
||||
<span class="product-card__stars">★★★★★</span>
|
||||
<span class="product-card__reviews">(12,345 ratings)</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-card__add-to-cart">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-card__link">
|
||||
<div class="product-card__image-container">
|
||||
<img src="https://via.placeholder.com/200x200?text=Headphones" alt="Noise Cancelling Headphones" class="product-card__image">
|
||||
</div>
|
||||
<div class="product-card__details">
|
||||
<h3 class="product-card__title">Noise Cancelling Headphones X300</h3>
|
||||
<div class="product-card__price">
|
||||
<span class="product-card__current-price">₹4,499</span>
|
||||
<span class="product-card__original-price">₹6,000</span>
|
||||
<span class="product-card__discount">25% off</span>
|
||||
</div>
|
||||
<div class="product-card__rating">
|
||||
<span class="product-card__stars">★★★★☆</span>
|
||||
<span class="product-card__reviews">(8,900 ratings)</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-card__add-to-cart">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-card__link">
|
||||
<div class="product-card__image-container">
|
||||
<img src="https://via.placeholder.com/200x200?text=Smartwatch" alt="Smartwatch Series 7" class="product-card__image">
|
||||
</div>
|
||||
<div class="product-card__details">
|
||||
<h3 class="product-card__title">Smartwatch Series 7 with ECG</h3>
|
||||
<div class="product-card__price">
|
||||
<span class="product-card__current-price">₹11,999</span>
|
||||
<span class="product-card__original-price">₹15,000</span>
|
||||
<span class="product-card__discount">20% off</span>
|
||||
</div>
|
||||
<div class="product-card__rating">
|
||||
<span class="product-card__stars">★★★★☆</span>
|
||||
<span class="product-card__reviews">(5,200 ratings)</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-card__add-to-cart">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-card__link">
|
||||
<div class="product-card__image-container">
|
||||
<img src="https://via.placeholder.com/200x200?text=Tablet" alt="Tablet Air 10" class="product-card__image">
|
||||
</div>
|
||||
<div class="product-card__details">
|
||||
<h3 class="product-card__title">Tablet Air 10.2 inch Display</h3>
|
||||
<div class="product-card__price">
|
||||
<span class="product-card__current-price">₹19,999</span>
|
||||
<span class="product-card__original-price">₹24,000</span>
|
||||
<span class="product-card__discount">17% off</span>
|
||||
</div>
|
||||
<div class="product-card__rating">
|
||||
<span class="product-card__stars">★★★★☆</span>
|
||||
<span class="product-card__reviews">(3,800 ratings)</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-card__add-to-cart">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<a href="#" class="product-card__link">
|
||||
<div class="product-card__image-container">
|
||||
<img src="https://via.placeholder.com/200x200?text=Camera" alt="Mirrorless Camera" class="product-card__image">
|
||||
</div>
|
||||
<div class="product-card__details">
|
||||
<h3 class="product-card__title">Professional Mirrorless Camera 4K</h3>
|
||||
<div class="product-card__price">
|
||||
<span class="product-card__current-price">₹54,999</span>
|
||||
<span class="product-card__original-price">₹65,000</span>
|
||||
<span class="product-card__discount">15% off</span>
|
||||
</div>
|
||||
<div class="product-card__rating">
|
||||
<span class="product-card__stars">★★★★☆</span>
|
||||
<span class="product-card__reviews">(1,100 ratings)</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-card__add-to-cart">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="brand-showcase-section">
|
||||
<div class="container">
|
||||
<header class="section-header">
|
||||
<h2 class="section-title">Explore Top Brands</h2>
|
||||
<a href="#" class="view-all-link">View All Brands</a>
|
||||
</header>
|
||||
<div class="brand-grid">
|
||||
<a href="#" class="brand-item">
|
||||
<div class="brand-logo-wrapper">
|
||||
<img src="https://via.placeholder.com/150x80?text=Brand+A" alt="Brand A Logo" class="brand-logo">
|
||||
</div>
|
||||
<h3 class="brand-name">Brand A</h3>
|
||||
<p class="brand-tagline">Up to 40% Off</p>
|
||||
</a>
|
||||
<a href="#" class="brand-item">
|
||||
<div class="brand-logo-wrapper">
|
||||
<img src="https://via.placeholder.com/150x80?text=Brand+B" alt="Brand B Logo" class="brand-logo">
|
||||
</div>
|
||||
<h3 class="brand-name">Brand B</h3>
|
||||
<p class="brand-tagline">New Arrivals</p>
|
||||
</a>
|
||||
<a href="#" class="brand-item">
|
||||
<div class="brand-logo-wrapper">
|
||||
<img src="https://via.placeholder.com/150x80?text=Brand+C" alt="Brand C Logo" class="brand-logo">
|
||||
</div>
|
||||
<h3 class="brand-name">Brand C</h3>
|
||||
<p class="brand-tagline">Exclusive Deals</p>
|
||||
</a>
|
||||
<a href="#" class="brand-item">
|
||||
<div class="brand-logo-wrapper">
|
||||
<img src="https://via.placeholder.com/150x80?text=Brand+D" alt="Brand D Logo" class="brand-logo">
|
||||
</div>
|
||||
<h3 class="brand-name">Brand D</h3>
|
||||
<p class="brand-tagline">Best Sellers</p>
|
||||
</a>
|
||||
<a href="#" class="brand-item">
|
||||
<div class="brand-logo-wrapper">
|
||||
<img src="https://via.placeholder.com/150x80?text=Brand+E" alt="Brand E Logo" class="brand-logo">
|
||||
</div>
|
||||
<h3 class="brand-name">Brand E</h3>
|
||||
<p class="brand-tagline">Shop Now</p>
|
||||
</a>
|
||||
<a href="#" class="brand-item">
|
||||
<div class="brand-logo-wrapper">
|
||||
<img src="https://via.placeholder.com/150x80?text=Brand+F" alt="Brand F Logo" class="brand-logo">
|
||||
</div>
|
||||
<h3 class="brand-name">Brand F</h3>
|
||||
<p class="brand-tagline">Limited Stock</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
279
search_results.html
Normal file
279
search_results.html
Normal file
@ -0,0 +1,279 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Search Results</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<aside class="search-filter-sidebar">
|
||||
<div class="filter-header">
|
||||
<h3>Filters</h3>
|
||||
<button type="button" class="clear-all-filters">Clear All</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<h4>Price</h4>
|
||||
<div class="price-range">
|
||||
<input type="text" placeholder="Min" class="price-input">
|
||||
<span>to</span>
|
||||
<input type="text" placeholder="Max" class="price-input">
|
||||
<button type="button" class="go-button">Go</button>
|
||||
</div>
|
||||
<ul class="filter-options">
|
||||
<li><label><input type="checkbox" name="price-range" value="0-500"> Below Placeholder 500</label></li>
|
||||
<li><label><input type="checkbox" name="price-range" value="500-1000"> Placeholder 500 - 1000</label></li>
|
||||
<li><label><input type="checkbox" name="price-range" value="1000-2000"> Placeholder 1000 - 2000</label></li>
|
||||
<li><label><input type="checkbox" name="price-range" value="2000+"> Placeholder 2000 & Above</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<h4>Brand</h4>
|
||||
<div class="search-box">
|
||||
<input type="text" placeholder="Search for Brands" class="brand-search-input">
|
||||
</div>
|
||||
<ul class="filter-options scrollable-options">
|
||||
<li><label><input type="checkbox" name="brand" value="brand-a"> Placeholder Brand A (123)</label></li>
|
||||
<li><label><input type="checkbox" name="brand" value="brand-b"> Placeholder Brand B (45)</label></li>
|
||||
<li><label><input type="checkbox" name="brand" value="brand-c"> Placeholder Brand C (89)</label></li>
|
||||
<li><label><input type="checkbox" name="brand" value="brand-d"> Placeholder Brand D (201)</label></li>
|
||||
<li><label><input type="checkbox" name="brand" value="brand-e"> Placeholder Brand E (67)</label></li>
|
||||
<li><label><input type="checkbox" name="brand" value="brand-f"> Placeholder Brand F (15)</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<h4>Customer Ratings</h4>
|
||||
<ul class="filter-options">
|
||||
<li><label><input type="checkbox" name="rating" value="4-star-plus"> 4<span class="star-icon">★</span> & above</label></li>
|
||||
<li><label><input type="checkbox" name="rating" value="3-star-plus"> 3<span class="star-icon">★</span> & above</label></li>
|
||||
<li><label><input type="checkbox" name="rating" value="2-star-plus"> 2<span class="star-icon">★</span> & above</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<h4>Discount</h4>
|
||||
<ul class="filter-options">
|
||||
<li><label><input type="checkbox" name="discount" value="50-percent-plus"> 50% or more</label></li>
|
||||
<li><label><input type="checkbox" name="discount" value="40-percent-plus"> 40% or more</label></li>
|
||||
<li><label><input type="checkbox" name="discount" value="30-percent-plus"> 30% or more</label></li>
|
||||
<li><label><input type="checkbox" name="discount" value="20-percent-plus"> 20% or more</label></li>
|
||||
<li><label><input type="checkbox" name="discount" value="10-percent-plus"> 10% or more</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<h4>Availability</h4>
|
||||
<ul class="filter-options">
|
||||
<li><label><input type="checkbox" name="availability" value="include-oos"> Include Out of Stock</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Grid</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<main class="container">
|
||||
<section class="product-grid-section">
|
||||
<header class="product-grid-header">
|
||||
<h2>Top Deals on Electronics</h2>
|
||||
<a href="#" class="view-all-btn">VIEW ALL</a>
|
||||
</header>
|
||||
<div class="product-grid">
|
||||
<!-- Product Card 1 -->
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+1" alt="Product Name 1" class="product-card-image">
|
||||
<div class="product-card-details">
|
||||
<h3 class="product-card-title">Smartphone X Pro (128GB, Blue)</h3>
|
||||
<div class="product-card-price-info">
|
||||
<span class="product-card-price">₹19,999</span>
|
||||
<span class="product-card-original-price">₹25,000</span>
|
||||
<span class="product-card-discount">20% off</span>
|
||||
</div>
|
||||
<p class="product-card-desc">Grab the latest smartphone with amazing features.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 2 -->
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+2" alt="Product Name 2" class="product-card-image">
|
||||
<div class="product-card-details">
|
||||
<h3 class="product-card-title">Noise Cancelling Headphones (Black)</h3>
|
||||
<div class="product-card-price-info">
|
||||
<span class="product-card-price">₹4,499</span>
|
||||
<span class="product-card-original-price">₹6,000</span>
|
||||
<span class="product-card-discount">25% off</span>
|
||||
</div>
|
||||
<p class="product-card-desc">Immerse yourself in pure sound with these headphones.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 3 -->
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+3" alt="Product Name 3" class="product-card-image">
|
||||
<div class="product-card-details">
|
||||
<h3 class="product-card-title">Smartwatch Series 5 (Sport Band)</h3>
|
||||
<div class="product-card-price-info">
|
||||
<span class="product-card-price">₹9,999</span>
|
||||
<span class="product-card-original-price">₹12,500</span>
|
||||
<span class="product-card-discount">20% off</span>
|
||||
</div>
|
||||
<p class="product-card-desc">Track your fitness and stay connected on the go.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 4 -->
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+4" alt="Product Name 4" class="product-card-image">
|
||||
<div class="product-card-details">
|
||||
<h3 class="product-card-title">Laptop Ultrabook (i7, 16GB RAM)</h3>
|
||||
<div class="product-card-price-info">
|
||||
<span class="product-card-price">₹54,999</span>
|
||||
<span class="product-card-original-price">₹65,000</span>
|
||||
<span class="product-card-discount">15% off</span>
|
||||
</div>
|
||||
<p class="product-card-desc">Powerful and portable for all your computing needs.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 5 -->
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+5" alt="Product Name 5" class="product-card-image">
|
||||
<div class="product-card-details">
|
||||
<h3 class="product-card-title">Portable Bluetooth Speaker (Waterproof)</h3>
|
||||
<div class="product-card-price-info">
|
||||
<span class="product-card-price">₹1,799</span>
|
||||
<span class="product-card-original-price">₹2,500</span>
|
||||
<span class="product-card-discount">28% off</span>
|
||||
</div>
|
||||
<p class="product-card-desc">Take your music anywhere with crystal-clear sound.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 6 -->
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+6" alt="Product Name 6" class="product-card-image">
|
||||
<div class="product-card-details">
|
||||
<h3 class="product-card-title">Gaming Monitor 27-inch (144Hz, QHD)</h3>
|
||||
<div class="product-card-price-info">
|
||||
<span class="product-card-price">₹18,500</span>
|
||||
<span class="product-card-original-price">₹23,000</span>
|
||||
<span class="product-card-discount">19% off</span>
|
||||
</div>
|
||||
<p class="product-card-desc">Experience immersive gaming with high refresh rates.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 7 -->
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+7" alt="Product Name 7" class="product-card-image">
|
||||
<div class="product-card-details">
|
||||
<h3 class="product-card-title">DSLR Camera Kit with 2 Lenses</h3>
|
||||
<div class="product-card-price-info">
|
||||
<span class="product-card-price">₹34,999</span>
|
||||
<span class="product-card-original-price">₹40,000</span>
|
||||
<span class="product-card-discount">12% off</span>
|
||||
</div>
|
||||
<p class="product-card-desc">Capture stunning photos with this professional camera.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 8 -->
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+8" alt="Product Name 8" class="product-card-image">
|
||||
<div class="product-card-details">
|
||||
<h3 class="product-card-title">External SSD 1TB (USB 3.2 Gen 2)</h3>
|
||||
<div class="product-card-price-info">
|
||||
<span class="product-card-price">₹6,999</span>
|
||||
<span class="product-card-original-price">₹9,500</span>
|
||||
<span class="product-card-discount">26% off</span>
|
||||
</div>
|
||||
<p class="product-card-desc">Fast and reliable storage for all your data.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<nav aria-label="Pagination Navigation">
|
||||
<ul class="pagination-controls">
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link pagination-link--prev" aria-label="Previous Page">
|
||||
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" width="18" height="18">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link" aria-label="Page 1">1</a>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link pagination-link--active" aria-current="page" aria-label="Current Page, Page 2">2</a>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link" aria-label="Page 3">3</a>
|
||||
</li>
|
||||
<li class="pagination-item pagination-item--ellipsis">
|
||||
<span class="pagination-ellipsis">...</span>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link" aria-label="Page 10">10</a>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link pagination-link--next" aria-label="Next Page">
|
||||
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" width="18" height="18">
|
||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="popular-searches-section">
|
||||
<h2 class="section-title">Popular Searches Suggestions</h2>
|
||||
<div class="search-suggestions-container">
|
||||
<ul class="search-suggestions-list">
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Latest Smartphones</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Men's Fashion New Arrivals</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Home & Kitchen Appliances</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Best-Selling Laptops</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Kids Toys & Games</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Fitness Trackers</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Books & Literature</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Beauty & Personal Care</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Travel Accessories</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Electronics Gadgets</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Furniture & Decor</a></li>
|
||||
<li class="suggestion-item"><a href="#" class="suggestion-link">Sports Equipment</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
121
signup_page.html
Normal file
121
signup_page.html
Normal file
@ -0,0 +1,121 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Signup Page</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
||||
<section id="registration-form" class="registration-section">
|
||||
<div class="container">
|
||||
<div class="registration-card">
|
||||
<h2 class="registration-heading">Create Your Account</h2>
|
||||
<form action="#" method="POST" class="registration-form-content">
|
||||
<div class="form-group">
|
||||
<label for="fullName" class="form-label">Full Name</label>
|
||||
<input type="text" id="fullName" name="fullName" placeholder="Enter your full name" required="" class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input type="email" id="email" name="email" placeholder="Enter your email address" required="" class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" id="password" name="password" placeholder="Create a password" required="" class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmPassword" class="form-label">Confirm Password</label>
|
||||
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm your password" required="" class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="mobile" class="form-label">Mobile Number (Optional)</label>
|
||||
<input type="tel" id="mobile" name="mobile" placeholder="Enter your mobile number" class="form-input">
|
||||
</div>
|
||||
<button type="submit" class="register-button">Register Account</button>
|
||||
</form>
|
||||
<div class="login-link-container">
|
||||
<p>Already have an account? <a href="#" class="login-link">Log In here</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="terms-conditions-section">
|
||||
<div class="terms-conditions-container">
|
||||
<h2 class="terms-conditions-heading">Review Terms and Conditions</h2>
|
||||
|
||||
<div class="terms-content-wrapper">
|
||||
<h3 class="terms-content-title">Website Usage Agreement</h3>
|
||||
<p class="terms-content-paragraph">Welcome to [Your Website Name]. By accessing or using our website, you agree to be bound by these Terms and Conditions and our Privacy Policy. Please read them carefully.</p>
|
||||
<h4 class="terms-content-subtitle">1. Acceptance of Terms</h4>
|
||||
<p class="terms-content-paragraph">By accessing and using this website ([Your Website Name]), you accept and agree to be bound by the terms and provisions of this agreement. If you do not agree to abide by the above, please do not use this website.</p>
|
||||
<h4 class="terms-content-subtitle">2. Intellectual Property</h4>
|
||||
<p class="terms-content-paragraph">All content on this website, including text, graphics, logos, images, and software, is the property of [Your Company Name] or its content suppliers and is protected by international copyright laws.</p>
|
||||
<h4 class="terms-content-subtitle">3. User Conduct</h4>
|
||||
<p class="terms-content-paragraph">You agree to use this website only for lawful purposes and in a way that does not infringe the rights of, restrict or inhibit anyone else's use and enjoyment of the website. Prohibited behavior includes harassing or causing distress or inconvenience to any other user, transmitting obscene or offensive content, or disrupting the normal flow of dialogue within this website.</p>
|
||||
<h4 class="terms-content-subtitle">4. Disclaimer of Warranties</h4>
|
||||
<p class="terms-content-paragraph">This website and its content are provided "as is" without any representations or warranties, express or implied. [Your Company Name] makes no representations or warranties in relation to this website or the information and materials provided on this website.</p>
|
||||
<h4 class="terms-content-subtitle">5. Limitation of Liability</h4>
|
||||
<p class="terms-content-paragraph">In no event will [Your Company Name] be liable for any incidental, direct, indirect, consequential, special, or exemplary damages of any kind, including, without limitation, those resulting from loss of profit, loss of contracts, goodwill, data, information, income, anticipated savings or business relationships, whether or not advised of the possibility of such damage, arising out of or in connection with the use of this website or any linked websites.</p>
|
||||
<h4 class="terms-content-subtitle">6. Changes to Terms</h4>
|
||||
<p class="terms-content-paragraph">We reserve the right to revise these Terms and Conditions at any time by updating this posting. You should visit this page periodically to review the current Terms and Conditions.</p>
|
||||
<h4 class="terms-content-subtitle">7. Governing Law</h4>
|
||||
<p class="terms-content-paragraph">These Terms and Conditions are governed by and construed in accordance with the laws of [Your Country/State] and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
|
||||
</div>
|
||||
|
||||
<div class="terms-agree-checkbox-group">
|
||||
<input type="checkbox" id="terms-agree" name="terms-agree" class="terms-agree-checkbox">
|
||||
<label for="terms-agree" class="terms-agree-label">
|
||||
I have read and agree to the <a href="#terms-content-wrapper" class="terms-link" aria-label="Read full Terms and Conditions">Terms and Conditions</a>.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p class="terms-validation-message" aria-live="polite" aria-atomic="true">Please accept the Terms and Conditions to proceed.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="signup-section">
|
||||
<div class="signup-container">
|
||||
<div class="signup-content">
|
||||
<h2 class="signup-heading">Join Our Community Today!</h2>
|
||||
<p class="signup-description">Sign up for free to access exclusive deals, track your orders, and personalize your shopping experience.</p>
|
||||
<a href="#signup" class="signup-button">Sign Up Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="social-signup-options">
|
||||
<h2 class="social-signup-title">Sign up with your social account</h2>
|
||||
<div class="social-options-container">
|
||||
<a href="#" class="social-option social-option-google">
|
||||
<span class="social-icon social-icon-google"></span>
|
||||
<span class="social-text">Continue with Google</span>
|
||||
</a>
|
||||
<a href="#" class="social-option social-option-facebook">
|
||||
<span class="social-icon social-icon-facebook"></span>
|
||||
<span class="social-text">Continue with Facebook</span>
|
||||
</a>
|
||||
<a href="#" class="social-option social-option-apple">
|
||||
<span class="social-icon social-icon-apple"></span>
|
||||
<span class="social-text">Continue with Apple</span>
|
||||
</a>
|
||||
<a href="#" class="social-option social-option-twitter">
|
||||
<span class="social-icon social-icon-twitter"></span>
|
||||
<span class="social-text">Continue with Twitter</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<div class="account-prompt-section">
|
||||
<p class="account-prompt-text">Already have an account?</p>
|
||||
<a href="/login" class="account-prompt-link">Login</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user