Hugging Face's logo

Spaces:
07alpha
/
dialup
Running

App Files Community
07alpha commited on
Commit
3a0fb72
·
verified ·
1 Parent(s): 8bfeb5d

can not see the image - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +734 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dialup
3
- emoji: 🌖
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: dialup
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,734 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dialup - Premium Watches Collection</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for elements that need more styling */
11
+ .watch-card:hover {
12
+ transform: translateY(-5px);
13
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
14
+ }
15
+
16
+ .hero-section {
17
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80');
18
+ background-size: cover;
19
+ background-position: center;
20
+ }
21
+
22
+ .cart-sidebar {
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .cart-open {
27
+ right: 0;
28
+ }
29
+
30
+ .cart-closed {
31
+ right: -100%;
32
+ }
33
+
34
+ @keyframes pulse {
35
+ 0% { transform: scale(1); }
36
+ 50% { transform: scale(1.05); }
37
+ 100% { transform: scale(1); }
38
+ }
39
+
40
+ .pulse-animation {
41
+ animation: pulse 2s infinite;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="font-sans bg-gray-50">
46
+ <!-- Header/Navigation -->
47
+ <header class="bg-white shadow-md sticky top-0 z-50">
48
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
49
+ <div class="flex items-center">
50
+ <a href="#" class="text-2xl font-bold text-gray-800 flex items-center">
51
+ <i class="fas fa-clock mr-2 text-blue-600"></i>
52
+ <span>DIALUP</span>
53
+ </a>
54
+ </div>
55
+
56
+ <nav class="hidden md:flex space-x-8">
57
+ <a href="#" class="text-gray-800 hover:text-blue-600 font-medium">Home</a>
58
+ <a href="#shop" class="text-gray-800 hover:text-blue-600 font-medium">Shop</a>
59
+ <a href="#collections" class="text-gray-800 hover:text-blue-600 font-medium">Collections</a>
60
+ <a href="#about" class="text-gray-800 hover:text-blue-600 font-medium">About</a>
61
+ <a href="#contact" class="text-gray-800 hover:text-blue-600 font-medium">Contact</a>
62
+ </nav>
63
+
64
+ <div class="flex items-center space-x-4">
65
+ <button id="search-btn" class="text-gray-600 hover:text-blue-600">
66
+ <i class="fas fa-search"></i>
67
+ </button>
68
+ <button id="cart-btn" class="text-gray-600 hover:text-blue-600 relative">
69
+ <i class="fas fa-shopping-cart"></i>
70
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
71
+ </button>
72
+ <button id="mobile-menu-btn" class="md:hidden text-gray-600 hover:text-blue-600">
73
+ <i class="fas fa-bars text-xl"></i>
74
+ </button>
75
+ </div>
76
+ </div>
77
+
78
+ <!-- Mobile Menu -->
79
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg">
80
+ <a href="#" class="block py-2 text-gray-800 hover:text-blue-600">Home</a>
81
+ <a href="#shop" class="block py-2 text-gray-800 hover:text-blue-600">Shop</a>
82
+ <a href="#collections" class="block py-2 text-gray-800 hover:text-blue-600">Collections</a>
83
+ <a href="#about" class="block py-2 text-gray-800 hover:text-blue-600">About</a>
84
+ <a href="#contact" class="block py-2 text-gray-800 hover:text-blue-600">Contact</a>
85
+ </div>
86
+
87
+ <!-- Search Bar -->
88
+ <div id="search-bar" class="hidden bg-white py-3 px-4 shadow-md">
89
+ <div class="container mx-auto flex">
90
+ <input type="text" placeholder="Search for watches..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500">
91
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-r hover:bg-blue-700">
92
+ <i class="fas fa-search"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </header>
97
+
98
+ <!-- Hero Section -->
99
+ <section class="hero-section text-white py-20 md:py-32 flex items-center">
100
+ <div class="container mx-auto px-4 text-center">
101
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Timeless Elegance</h1>
102
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Discover our exquisite collection of premium watches that blend craftsmanship with modern design</p>
103
+ <a href="#shop" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300 transform hover:scale-105 pulse-animation">
104
+ Shop Now
105
+ </a>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Featured Collections -->
110
+ <section id="collections" class="py-16 bg-white">
111
+ <div class="container mx-auto px-4">
112
+ <h2 class="text-3xl font-bold text-center mb-12">Our Collections</h2>
113
+
114
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
115
+ <!-- Collection 1 -->
116
+ <div class="relative rounded-lg overflow-hidden shadow-lg group">
117
+ <img src="https://images.unsplash.com/photo-1524592094714-0f0654e20314?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1492&q=80" alt="Luxury Collection" class="w-full h-64 object-cover">
118
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
119
+ <a href="#" class="text-white text-xl font-bold bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full">Explore</a>
120
+ </div>
121
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
122
+ <h3 class="text-white text-xl font-bold">Luxury Series</h3>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Collection 2 -->
127
+ <div class="relative rounded-lg overflow-hidden shadow-lg group">
128
+ <img src="https://images.unsplash.com/photo-1542496658-e33a6d0d50f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sports Collection" class="w-full h-64 object-cover">
129
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
130
+ <a href="#" class="text-white text-xl font-bold bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full">Explore</a>
131
+ </div>
132
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
133
+ <h3 class="text-white text-xl font-bold">Sports Series</h3>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Collection 3 -->
138
+ <div class="relative rounded-lg overflow-hidden shadow-lg group">
139
+ <img src="https://images.unsplash.com/photo-1551818255-e6e10975bc17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Classic Collection" class="w-full h-64 object-cover">
140
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
141
+ <a href="#" class="text-white text-xl font-bold bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full">Explore</a>
142
+ </div>
143
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
144
+ <h3 class="text-white text-xl font-bold">Classic Series</h3>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </section>
150
+
151
+ <!-- Shop Section -->
152
+ <section id="shop" class="py-16 bg-gray-50">
153
+ <div class="container mx-auto px-4">
154
+ <h2 class="text-3xl font-bold text-center mb-4">Our Watches</h2>
155
+ <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Browse our carefully curated selection of premium timepieces</p>
156
+
157
+ <div class="flex justify-center mb-8">
158
+ <div class="inline-flex rounded-md shadow-sm">
159
+ <button class="px-4 py-2 text-sm font-medium rounded-l-lg bg-blue-600 text-white">All</button>
160
+ <button class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-100">Luxury</button>
161
+ <button class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-100">Sports</button>
162
+ <button class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-100">Classic</button>
163
+ <button class="px-4 py-2 text-sm font-medium rounded-r-lg bg-white text-gray-700 hover:bg-gray-100">Smart</button>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
168
+ <!-- Watch 1 -->
169
+ <div class="bg-white rounded-lg shadow-md overflow-hidden watch-card transition duration-300">
170
+ <div class="relative">
171
+ <img src="https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Rolex Watch" class="w-full h-64 object-contain p-4">
172
+ <div class="absolute top-2 right-2">
173
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
174
+ </div>
175
+ </div>
176
+ <div class="p-4">
177
+ <h3 class="text-lg font-bold text-gray-800 mb-1">ROLEX</h3>
178
+ <p class="text-gray-600 text-sm mb-2">Premium stainless steel with leather strap</p>
179
+ <div class="flex justify-between items-center">
180
+ <span class="text-lg font-bold text-blue-600">3799/-</span>
181
+ <button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm" data-id="1" data-name="Chronograph Pro" data-price="3799">
182
+ <i class="fas fa-cart-plus mr-1"></i> Add
183
+ </button>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Watch 2 -->
189
+ <div class="bg-white rounded-lg shadow-md overflow-hidden watch-card transition duration-300">
190
+ <div class="relative">
191
+ <img src="https://images.unsplash.com/photo-1557531365-e8b2d0866eaf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Hublot Watch" class="w-full h-64 object-contain p-4">
192
+ </div>
193
+ <div class="p-4">
194
+ <h3 class="text-lg font-bold text-gray-800 mb-1">HUBLOT</h3>
195
+ <p class="text-gray-600 text-sm mb-2">Water resistant up to 300m</p>
196
+ <div class="flex justify-between items-center">
197
+ <span class="text-lg font-bold text-blue-600">3799/-</span>
198
+ <button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm" data-id="2" data-name="Ocean Diver 300" data-price="3799">
199
+ <i class="fas fa-cart-plus mr-1"></i> Add
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Watch 3 -->
206
+ <div class="bg-white rounded-lg shadow-md overflow-hidden watch-card transition duration-300">
207
+ <div class="relative">
208
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tissot Watch" class="w-full h-64 object-contain p-4">
209
+ <div class="absolute top-2 right-2">
210
+ <span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">BESTSELLER</span>
211
+ </div>
212
+ </div>
213
+ <div class="p-4">
214
+ <h3 class="text-lg font-bold text-gray-800 mb-1">TISSOT</h3>
215
+ <p class="text-gray-600 text-sm mb-2">Advanced health tracking features</p>
216
+ <div class="flex justify-between items-center">
217
+ <span class="text-lg font-bold text-blue-600">3799</span>
218
+ <button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm" data-id="3" data-name="TISSOT" data-price="199.99">
219
+ <i class="fas fa-cart-plus mr-1"></i> Add
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Watch 4 -->
226
+ <div class="bg-white rounded-lg shadow-md overflow-hidden watch-card transition duration-300">
227
+ <div class="relative">
228
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Classic Watch" class="w-full h-64 object-contain p-4">
229
+ </div>
230
+ <div class="p-4">
231
+ <h3 class="text-lg font-bold text-gray-800 mb-1">Vintage Classic</h3>
232
+ <p class="text-gray-600 text-sm mb-2">Handcrafted leather with sapphire glass</p>
233
+ <div class="flex justify-between items-center">
234
+ <span class="text-lg font-bold text-blue-600">2799/-</span>
235
+ <button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm" data-id="4" data-name="Vintage Classic" data-price="2799">
236
+ <i class="fas fa-cart-plus mr-1"></i> Add
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="text-center mt-12">
244
+ <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 font-bold py-2 px-8 rounded-full hover:bg-blue-600 hover:text-white transition duration-300">
245
+ View All Watches
246
+ </a>
247
+ </div>
248
+ </div>
249
+ </section>
250
+
251
+ <!-- Features Section -->
252
+ <section class="py-16 bg-white">
253
+ <div class="container mx-auto px-4">
254
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
255
+ <div class="text-center p-6">
256
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
257
+ <i class="fas fa-truck text-blue-600 text-xl"></i>
258
+ </div>
259
+ <h3 class="text-xl font-bold mb-2">Free Shipping</h3>
260
+ <p class="text-gray-600">Free worldwide shipping on all orders over $100</p>
261
+ </div>
262
+
263
+ <div class="text-center p-6">
264
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
265
+ <i class="fas fa-undo text-blue-600 text-xl"></i>
266
+ </div>
267
+ <h3 class="text-xl font-bold mb-2">30-Day Returns</h3>
268
+ <p class="text-gray-600">Not satisfied? Return within 30 days for a full refund</p>
269
+ </div>
270
+
271
+ <div class="text-center p-6">
272
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
273
+ <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
274
+ </div>
275
+ <h3 class="text-xl font-bold mb-2">2-Year Warranty</h3>
276
+ <p class="text-gray-600">All our watches come with a 2-year manufacturer warranty</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- About Section -->
283
+ <section id="about" class="py-16 bg-gray-100">
284
+ <div class="container mx-auto px-4">
285
+ <div class="flex flex-col md:flex-row items-center">
286
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
287
+ <img src="https://images.unsplash.com/photo-1524592714635-d77511a4834d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Dialup" class="rounded-lg shadow-lg w-full">
288
+ </div>
289
+ <div class="md:w-1/2">
290
+ <h2 class="text-3xl font-bold mb-6">About Dialup</h2>
291
+ <p class="text-gray-700 mb-4">Founded in 2010, Dialup has been at the forefront of watch design and innovation, combining traditional craftsmanship with modern aesthetics.</p>
292
+ <p class="text-gray-700 mb-6">Our mission is to create timepieces that not only tell time but also tell a story - your story. Each watch is meticulously crafted to perfection, ensuring quality and durability that lasts generations.</p>
293
+ <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded transition duration-300">
294
+ Learn More
295
+ </a>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <!-- Testimonials -->
302
+ <section class="py-16 bg-white">
303
+ <div class="container mx-auto px-4">
304
+ <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
305
+
306
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
307
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
308
+ <div class="flex items-center mb-4">
309
+ <div class="text-yellow-400 mr-2">
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ <i class="fas fa-star"></i>
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ </div>
316
+ </div>
317
+ <p class="text-gray-700 mb-4">"The Chronograph Pro exceeded my expectations. The craftsmanship is impeccable and it looks even better in person."</p>
318
+ <div class="flex items-center">
319
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
320
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer" class="w-full h-full object-cover">
321
+ </div>
322
+ <div>
323
+ <h4 class="font-bold">Michael T.</h4>
324
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
330
+ <div class="flex items-center mb-4">
331
+ <div class="text-yellow-400 mr-2">
332
+ <i class="fas fa-star"></i>
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ </div>
338
+ </div>
339
+ <p class="text-gray-700 mb-4">"I've been wearing my Ocean Diver daily for 6 months now and it still looks brand new. The quality is outstanding!"</p>
340
+ <div class="flex items-center">
341
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
342
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer" class="w-full h-full object-cover">
343
+ </div>
344
+ <div>
345
+ <h4 class="font-bold">Sarah J.</h4>
346
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
352
+ <div class="flex items-center mb-4">
353
+ <div class="text-yellow-400 mr-2">
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star-half-alt"></i>
359
+ </div>
360
+ </div>
361
+ <p class="text-gray-700 mb-4">"Excellent customer service and fast shipping. The watch arrived beautifully packaged and exactly as described."</p>
362
+ <div class="flex items-center">
363
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
364
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Customer" class="w-full h-full object-cover">
365
+ </div>
366
+ <div>
367
+ <h4 class="font-bold">David R.</h4>
368
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </section>
375
+
376
+ <!-- Newsletter -->
377
+ <section class="py-16 bg-blue-600 text-white">
378
+ <div class="container mx-auto px-4 text-center">
379
+ <h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
380
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for exclusive offers, new arrivals, and watch care tips</p>
381
+
382
+ <div class="max-w-md mx-auto flex">
383
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l focus:outline-none text-gray-800">
384
+ <button class="bg-gray-900 hover:bg-gray-800 px-6 py-3 rounded-r font-bold transition duration-300">
385
+ Subscribe
386
+ </button>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Contact Section -->
392
+ <section id="contact" class="py-16 bg-white">
393
+ <div class="container mx-auto px-4">
394
+ <h2 class="text-3xl font-bold text-center mb-12">Contact Us</h2>
395
+
396
+ <div class="flex flex-col md:flex-row">
397
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
398
+ <h3 class="text-xl font-bold mb-4">Get in Touch</h3>
399
+ <p class="text-gray-700 mb-6">Have questions about our products or need assistance with your order? Our customer service team is here to help.</p>
400
+
401
+ <div class="space-y-4">
402
+ <div class="flex items-start">
403
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
404
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
405
+ </div>
406
+ <div>
407
+ <h4 class="font-bold">Address</h4>
408
+ <p class="text-gray-600">123 Watch Street, Time Square, NY 10001</p>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="flex items-start">
413
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
414
+ <i class="fas fa-phone-alt text-blue-600"></i>
415
+ </div>
416
+ <div>
417
+ <h4 class="font-bold">Phone</h4>
418
+ <p class="text-gray-600">+1 (555) 123-4567</p>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="flex items-start">
423
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
424
+ <i class="fas fa-envelope text-blue-600"></i>
425
+ </div>
426
+ <div>
427
+ <h4 class="font-bold">Email</h4>
428
+ <p class="text-gray-600">[email protected]</p>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="md:w-1/2">
435
+ <form class="bg-gray-50 p-6 rounded-lg shadow-sm">
436
+ <div class="mb-4">
437
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
438
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
439
+ </div>
440
+
441
+ <div class="mb-4">
442
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
443
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
444
+ </div>
445
+
446
+ <div class="mb-4">
447
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
448
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
449
+ </div>
450
+
451
+ <div class="mb-4">
452
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
453
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
454
+ </div>
455
+
456
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded transition duration-300 w-full">
457
+ Send Message
458
+ </button>
459
+ </form>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </section>
464
+
465
+ <!-- Footer -->
466
+ <footer class="bg-gray-900 text-white py-12">
467
+ <div class="container mx-auto px-4">
468
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
469
+ <div>
470
+ <h3 class="text-xl font-bold mb-4 flex items-center">
471
+ <i class="fas fa-clock mr-2 text-blue-400"></i>
472
+ <span>DIALUP</span>
473
+ </h3>
474
+ <p class="text-gray-400">Premium watches for those who appreciate timeless elegance and precision engineering.</p>
475
+ <div class="flex space-x-4 mt-4">
476
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
477
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
478
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
479
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a>
480
+ </div>
481
+ </div>
482
+
483
+ <div>
484
+ <h4 class="text-lg font-bold mb-4">Shop</h4>
485
+ <ul class="space-y-2">
486
+ <li><a href="#" class="text-gray-400 hover:text-white">All Watches</a></li>
487
+ <li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li>
488
+ <li><a href="#" class="text-gray-400 hover:text-white">Best Sellers</a></li>
489
+ <li><a href="#" class="text-gray-400 hover:text-white">Special Offers</a></li>
490
+ <li><a href="#" class="text-gray-400 hover:text-white">Gift Cards</a></li>
491
+ </ul>
492
+ </div>
493
+
494
+ <div>
495
+ <h4 class="text-lg font-bold mb-4">Customer Service</h4>
496
+ <ul class="space-y-2">
497
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
498
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
499
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping & Returns</a></li>
500
+ <li><a href="#" class="text-gray-400 hover:text-white">Product Care</a></li>
501
+ <li><a href="#" class="text-gray-400 hover:text-white">Warranty</a></li>
502
+ </ul>
503
+ </div>
504
+
505
+ <div>
506
+ <h4 class="text-lg font-bold mb-4">About</h4>
507
+ <ul class="space-y-2">
508
+ <li><a href="#" class="text-gray-400 hover:text-white">Our Story</a></li>
509
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
510
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
511
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
512
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
513
+ </ul>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
518
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Dialup Watches. All rights reserved.</p>
519
+ <div class="flex space-x-6">
520
+ <img src="https://cdn.worldvectorlogo.com/logos/visa.svg" alt="Visa" class="h-8">
521
+ <img src="https://cdn.worldvectorlogo.com/logos/mastercard.svg" alt="Mastercard" class="h-8">
522
+ <img src="https://cdn.worldvectorlogo.com/logos/paypal.svg" alt="PayPal" class="h-8">
523
+ <img src="https://cdn.worldvectorlogo.com/logos/apple-pay.svg" alt="Apple Pay" class="h-8">
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </footer>
528
+
529
+ <!-- Shopping Cart Sidebar -->
530
+ <div id="cart-sidebar" class="cart-sidebar fixed top-0 right-0 h-full w-full md:w-1/3 lg:w-1/4 bg-white shadow-xl z-50 overflow-y-auto hidden">
531
+ <div class="p-6">
532
+ <div class="flex justify-between items-center mb-6">
533
+ <h3 class="text-xl font-bold">Your Cart</h3>
534
+ <button id="close-cart" class="text-gray-500 hover:text-gray-700">
535
+ <i class="fas fa-times"></i>
536
+ </button>
537
+ </div>
538
+
539
+ <div id="cart-items" class="mb-6">
540
+ <!-- Cart items will be added here dynamically -->
541
+ <div class="text-center py-8 text-gray-500">
542
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
543
+ <p>Your cart is empty</p>
544
+ </div>
545
+ </div>
546
+
547
+ <div class="border-t border-gray-200 pt-4 mb-4">
548
+ <div class="flex justify-between mb-2">
549
+ <span class="text-gray-600">Subtotal</span>
550
+ <span id="cart-subtotal" class="font-bold">0/-</span>
551
+ </div>
552
+ <div class="flex justify-between mb-2">
553
+ <span class="text-gray-600">Shipping</span>
554
+ <span class="font-bold">Free</span>
555
+ </div>
556
+ <div class="flex justify-between text-lg font-bold">
557
+ <span>Total</span>
558
+ <span id="cart-total">0/-</span>
559
+ </div>
560
+ </div>
561
+
562
+ <button id="checkout-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition duration-300 mb-4">
563
+ Proceed to Checkout
564
+ </button>
565
+
566
+ <a href="#" class="block text-center text-blue-600 hover:text-blue-800 font-medium">
567
+ Continue Shopping
568
+ </a>
569
+ </div>
570
+ </div>
571
+
572
+ <!-- Overlay for cart/mobile menu -->
573
+ <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
574
+
575
+ <script>
576
+ // Mobile Menu Toggle
577
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
578
+ const mobileMenu = document.getElementById('mobile-menu');
579
+ const overlay = document.getElementById('overlay');
580
+
581
+ mobileMenuBtn.addEventListener('click', () => {
582
+ mobileMenu.classList.toggle('hidden');
583
+ overlay.classList.toggle('hidden');
584
+ });
585
+
586
+ // Search Bar Toggle
587
+ const searchBtn = document.getElementById('search-btn');
588
+ const searchBar = document.getElementById('search-bar');
589
+
590
+ searchBtn.addEventListener('click', () => {
591
+ searchBar.classList.toggle('hidden');
592
+ });
593
+
594
+ // Cart Toggle
595
+ const cartBtn = document.getElementById('cart-btn');
596
+ const cartSidebar = document.getElementById('cart-sidebar');
597
+ const closeCart = document.getElementById('close-cart');
598
+
599
+ cartBtn.addEventListener('click', () => {
600
+ cartSidebar.classList.remove('hidden');
601
+ overlay.classList.remove('hidden');
602
+ });
603
+
604
+ closeCart.addEventListener('click', () => {
605
+ cartSidebar.classList.add('hidden');
606
+ overlay.classList.add('hidden');
607
+ });
608
+
609
+ overlay.addEventListener('click', () => {
610
+ mobileMenu.classList.add('hidden');
611
+ cartSidebar.classList.add('hidden');
612
+ overlay.classList.add('hidden');
613
+ });
614
+
615
+ // Shopping Cart Functionality
616
+ let cart = [];
617
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
618
+ const cartItemsContainer = document.getElementById('cart-items');
619
+ const cartSubtotal = document.getElementById('cart-subtotal');
620
+ const cartTotal = document.getElementById('cart-total');
621
+ const cartCount = document.getElementById('cart-count');
622
+
623
+ addToCartButtons.forEach(button => {
624
+ button.addEventListener('click', () => {
625
+ const id = button.getAttribute('data-id');
626
+ const name = button.getAttribute('data-name');
627
+ const price = parseFloat(button.getAttribute('data-price'));
628
+
629
+ // Check if item already exists in cart
630
+ const existingItem = cart.find(item => item.id === id);
631
+
632
+ if (existingItem) {
633
+ existingItem.quantity += 1;
634
+ } else {
635
+ cart.push({
636
+ id,
637
+ name,
638
+ price,
639
+ quantity: 1
640
+ });
641
+ }
642
+
643
+ updateCart();
644
+
645
+ // Show cart sidebar
646
+ cartSidebar.classList.remove('hidden');
647
+ overlay.classList.remove('hidden');
648
+ });
649
+ });
650
+
651
+ function updateCart() {
652
+ // Update cart items display
653
+ if (cart.length === 0) {
654
+ cartItemsContainer.innerHTML = `
655
+ <div class="text-center py-8 text-gray-500">
656
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
657
+ <p>Your cart is empty</p>
658
+ </div>
659
+ `;
660
+ } else {
661
+ cartItemsContainer.innerHTML = '';
662
+
663
+ cart.forEach(item => {
664
+ const cartItem = document.createElement('div');
665
+ cartItem.className = 'flex justify-between items-center mb-4 pb-4 border-b border-gray-200';
666
+ cartItem.innerHTML = `
667
+ <div>
668
+ <h4 class="font-medium">${item.name}</h4>
669
+ <p class="text-gray-600 text-sm">$${item.price.toFixed(2)} x ${item.quantity}</p>
670
+ </div>
671
+ <div class="flex items-center">
672
+ <span class="font-bold mr-4">${(item.price * item.quantity).toFixed(0)}/-</span>
673
+ <button class="remove-item text-red-500 hover:text-red-700" data-id="${item.id}">
674
+ <i class="fas fa-trash"></i>
675
+ </button>
676
+ </div>
677
+ `;
678
+ cartItemsContainer.appendChild(cartItem);
679
+ });
680
+
681
+ // Add event listeners to remove buttons
682
+ document.querySelectorAll('.remove-item').forEach(button => {
683
+ button.addEventListener('click', () => {
684
+ const id = button.getAttribute('data-id');
685
+ cart = cart.filter(item => item.id !== id);
686
+ updateCart();
687
+ });
688
+ });
689
+ }
690
+
691
+ // Calculate subtotal and total
692
+ const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
693
+ cartSubtotal.textContent = `${subtotal.toFixed(0)}/-`;
694
+ cartTotal.textContent = `${subtotal.toFixed(0)}/-`;
695
+
696
+ // Update cart count
697
+ const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
698
+ if (totalItems > 0) {
699
+ cartCount.textContent = totalItems;
700
+ cartCount.classList.remove('hidden');
701
+ } else {
702
+ cartCount.classList.add('hidden');
703
+ }
704
+ }
705
+
706
+ // Checkout button
707
+ const checkoutBtn = document.getElementById('checkout-btn');
708
+ checkoutBtn.addEventListener('click', () => {
709
+ if (cart.length > 0) {
710
+ alert('Proceeding to checkout! In a real implementation, this would redirect to a checkout page.');
711
+ // Here you would typically redirect to a checkout page
712
+ // window.location.href = '/checkout';
713
+ } else {
714
+ alert('Your cart is empty. Please add some items before checking out.');
715
+ }
716
+ });
717
+
718
+ // Smooth scrolling for anchor links
719
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
720
+ anchor.addEventListener('click', function (e) {
721
+ e.preventDefault();
722
+
723
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
724
+ behavior: 'smooth'
725
+ });
726
+
727
+ // Close mobile menu if open
728
+ mobileMenu.classList.add('hidden');
729
+ overlay.classList.add('hidden');
730
+ });
731
+ });
732
+ </script>
733
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=07alpha/dialup" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
734
+ </html>