266 lines
18 KiB
HTML
266 lines
18 KiB
HTML
|
|
<!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> |