Spaces:
Running
Running
create an adult sex toys ecommerce website under the name leisure empire that will be just listing products and people will place an order which will be stored on the database as an order to be followed up. There will be no payment function on this site - Follow Up Deployment
Browse files- index.html +70 -14
index.html
CHANGED
@@ -49,7 +49,7 @@
|
|
49 |
<div class="flex justify-between h-16">
|
50 |
<div class="flex items-center space-x-6">
|
51 |
<a href="#" class="text-xl font-bold text-indigo-600 flex items-center">
|
52 |
-
<i class="fas fa-
|
53 |
</a>
|
54 |
<div class="hidden md:flex space-x-6">
|
55 |
<a href="#" class="text-gray-700 hover:text-indigo-600">Home</a>
|
@@ -78,13 +78,68 @@
|
|
78 |
<!-- Hero Section -->
|
79 |
<div class="bg-indigo-700 text-white py-12">
|
80 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
81 |
-
<h1 class="text-4xl font-bold mb-4">
|
82 |
-
<p class="text-xl mb-8">
|
83 |
</div>
|
84 |
</div>
|
85 |
|
86 |
<!-- Main Content -->
|
87 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
88 |
<!-- Order Form (Initially Hidden) -->
|
89 |
<section id="order-form" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4">
|
90 |
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
|
@@ -140,8 +195,8 @@
|
|
140 |
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
|
141 |
<i class="fas fa-check text-green-600 text-xl"></i>
|
142 |
</div>
|
143 |
-
<h3 class="text-lg font-medium text-gray-900 mb-2">Order
|
144 |
-
<p class="text-sm text-gray-500 mb-6">Thank you for your order. We'll contact you
|
145 |
<button id="close-success" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition duration-150">
|
146 |
Continue Shopping
|
147 |
</button>
|
@@ -154,8 +209,8 @@
|
|
154 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
155 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
156 |
<div>
|
157 |
-
<h3 class="text-lg font-semibold mb-4">
|
158 |
-
<p class="text-gray-400">
|
159 |
</div>
|
160 |
<div>
|
161 |
<div>
|
@@ -173,9 +228,9 @@
|
|
173 |
</div>
|
174 |
<h3 class="text-lg font-semibold mb-4">Contact Us</h3>
|
175 |
<ul class="space-y-2 text-gray-400">
|
176 |
-
<li><i class="fas fa-map-marker-alt mr-2"></i>
|
177 |
-
<li><i class="fas fa-phone mr-2"></i>
|
178 |
-
<li><i class="fas fa-envelope mr-2"></i>
|
179 |
</ul>
|
180 |
</div>
|
181 |
</div>
|
@@ -255,11 +310,12 @@
|
|
255 |
date: new Date().toISOString()
|
256 |
};
|
257 |
|
258 |
-
//
|
259 |
-
|
|
|
260 |
|
261 |
-
//
|
262 |
-
|
263 |
|
264 |
// Show success message
|
265 |
orderForm.classList.add('hidden');
|
|
|
49 |
<div class="flex justify-between h-16">
|
50 |
<div class="flex items-center space-x-6">
|
51 |
<a href="#" class="text-xl font-bold text-indigo-600 flex items-center">
|
52 |
+
<i class="fas fa-crown mr-2"></i>Leisure Empire
|
53 |
</a>
|
54 |
<div class="hidden md:flex space-x-6">
|
55 |
<a href="#" class="text-gray-700 hover:text-indigo-600">Home</a>
|
|
|
78 |
<!-- Hero Section -->
|
79 |
<div class="bg-indigo-700 text-white py-12">
|
80 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
81 |
+
<h1 class="text-4xl font-bold mb-4">Leisure Empire Adult Toys</h1>
|
82 |
+
<p class="text-xl mb-8">Premium selection - Order now for discreet delivery</p>
|
83 |
</div>
|
84 |
</div>
|
85 |
|
86 |
<!-- Main Content -->
|
87 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
88 |
+
<!-- Featured Products by Category -->
|
89 |
+
<section class="mb-12">
|
90 |
+
<h2 class="text-2xl font-bold mb-6">Featured Adult Toys</h2>
|
91 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
92 |
+
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden">
|
93 |
+
<img src="https://via.placeholder.com/300x300" alt="Product" class="w-full h-48 object-cover">
|
94 |
+
<div class="p-4">
|
95 |
+
<h3 class="font-semibold text-lg mb-1">Premium Vibrator</h3>
|
96 |
+
<p class="text-gray-600 text-sm mb-2">Multi-speed, waterproof design</p>
|
97 |
+
<div class="flex justify-between items-center">
|
98 |
+
<span class="font-bold text-indigo-600">KES 2,500</span>
|
99 |
+
<button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">Add to Cart</button>
|
100 |
+
</div>
|
101 |
+
</div>
|
102 |
+
</div>
|
103 |
+
<!-- Repeat similar product cards for other featured adult toys -->
|
104 |
+
</div>
|
105 |
+
</section>
|
106 |
+
|
107 |
+
<section class="mb-12">
|
108 |
+
<h2 class="text-2xl font-bold mb-6">Featured Vibrators</h2>
|
109 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
110 |
+
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden">
|
111 |
+
<img src="https://via.placeholder.com/300x300" alt="Product" class="w-full h-48 object-cover">
|
112 |
+
<div class="p-4">
|
113 |
+
<h3 class="font-semibold text-lg mb-1">Rabbit Vibrator</h3>
|
114 |
+
<p class="text-gray-600 text-sm mb-2">Dual stimulation, 10 patterns</p>
|
115 |
+
<div class="flex justify-between items-center">
|
116 |
+
<span class="font-bold text-indigo-600">KES 3,200</span>
|
117 |
+
<button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">Add to Cart</button>
|
118 |
+
</div>
|
119 |
+
</div>
|
120 |
+
</div>
|
121 |
+
<!-- Repeat similar product cards for other featured vibrators -->
|
122 |
+
</div>
|
123 |
+
</section>
|
124 |
+
|
125 |
+
<section class="mb-12">
|
126 |
+
<h2 class="text-2xl font-bold mb-6">Featured Dildos</h2>
|
127 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
128 |
+
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden">
|
129 |
+
<img src="https://via.placeholder.com/300x300" alt="Product" class="w-full h-48 object-cover">
|
130 |
+
<div class="p-4">
|
131 |
+
<h3 class="font-semibold text-lg mb-1">Realistic Dildo</h3>
|
132 |
+
<p class="text-gray-600 text-sm mb-2">Life-like texture, suction base</p>
|
133 |
+
<div class="flex justify-between items-center">
|
134 |
+
<span class="font-bold text-indigo-600">KES 2,800</span>
|
135 |
+
<button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">Add to Cart</button>
|
136 |
+
</div>
|
137 |
+
</div>
|
138 |
+
</div>
|
139 |
+
<!-- Repeat similar product cards for other featured dildos -->
|
140 |
+
</div>
|
141 |
+
</section>
|
142 |
+
|
143 |
<!-- Order Form (Initially Hidden) -->
|
144 |
<section id="order-form" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4">
|
145 |
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
|
|
|
195 |
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
|
196 |
<i class="fas fa-check text-green-600 text-xl"></i>
|
197 |
</div>
|
198 |
+
<h3 class="text-lg font-medium text-gray-900 mb-2">Order Received!</h3>
|
199 |
+
<p class="text-sm text-gray-500 mb-6">Thank you for your order. We'll contact you within 24 hours to confirm availability and arrange payment & delivery.</p>
|
200 |
<button id="close-success" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition duration-150">
|
201 |
Continue Shopping
|
202 |
</button>
|
|
|
209 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
210 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
211 |
<div>
|
212 |
+
<h3 class="text-lg font-semibold mb-4">Leisure Empire</h3>
|
213 |
+
<p class="text-gray-400">Premium adult toys for your intimate leisure.</p>
|
214 |
</div>
|
215 |
<div>
|
216 |
<div>
|
|
|
228 |
</div>
|
229 |
<h3 class="text-lg font-semibold mb-4">Contact Us</h3>
|
230 |
<ul class="space-y-2 text-gray-400">
|
231 |
+
<li><i class="fas fa-map-marker-alt mr-2"></i> Nairobi</li>
|
232 |
+
<li><i class="fas fa-phone mr-2"></i> +2540715841575</li>
|
233 |
+
<li><i class="fas fa-envelope mr-2"></i> pleasurehaven@gmail.com</li>
|
234 |
</ul>
|
235 |
</div>
|
236 |
</div>
|
|
|
310 |
date: new Date().toISOString()
|
311 |
};
|
312 |
|
313 |
+
// Store order in localStorage (replace with your database storage)
|
314 |
+
const orderId = 'order_' + Date.now();
|
315 |
+
localStorage.setItem(orderId, JSON.stringify(formData));
|
316 |
|
317 |
+
// In a real app, you would send to your backend here
|
318 |
+
console.log('Order submitted for follow-up:', orderId, formData);
|
319 |
|
320 |
// Show success message
|
321 |
orderForm.classList.add('hidden');
|