Hugging Face's logo

Spaces:
buddyplease
/
proptech-connect-hub
Running

App Files Community
buddyplease commited on
Commit
19ed353
·
verified ·
1 Parent(s): 6abe322

fix errors and any bugs, Fix Functionality and responsiveness make it full stacked and miulti page. Add colors royal blue.

Browse files
Files changed (5) hide show
  1. dashboard.html +194 -59
  2. index.html +84 -61
  3. login.html +85 -0
  4. properties.html +193 -0
  5. register.html +118 -0
dashboard.html CHANGED
@@ -15,25 +15,27 @@
15
  .sidebar { transition: all 0.3s ease; }
16
  .dashboard-card { transition: all 0.3s ease; }
17
  .dashboard-card:hover { transform: translateY(-2px); }
18
- </style>
 
 
19
  </head>
20
  <body class="bg-gray-100">
21
  <div class="flex h-screen">
22
  <!-- Sidebar -->
23
  <div class="sidebar bg-white w-64 shadow-lg">
24
  <div class="p-6 border-b border-gray-200">
25
- <div class="flex items-center">
26
- <i data-feather="home" class="h-6 w-6 text-indigo-600"></i>
27
- <span class="ml-2 text-xl font-bold">PropTech Connect</span>
28
- </div>
29
  </div>
30
- <nav class="p-4">
31
  <ul class="space-y-2">
32
- <li><a href="dashboard.html" class="flex items-center p-3 bg-indigo-50 text-indigo-600 rounded-lg">
33
  <i data-feather="grid" class="w-5 h-5 mr-3"></i>
34
  Dashboard
35
  </a></li>
36
- <li><a href="properties.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">
37
  <i data-feather="home" class="w-5 h-5 mr-3"></i>
38
  My Properties
39
  </a></li>
@@ -53,8 +55,12 @@
53
  <i data-feather="settings" class="w-5 h-5 mr-3"></i>
54
  Settings
55
  </a></li>
 
 
 
 
56
  </ul>
57
- </nav>
58
  </div>
59
 
60
  <!-- Main Content -->
@@ -82,25 +88,25 @@
82
  <!-- Portfolio Overview -->
83
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
84
  <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
85
- <div class="flex items-center justify-between">
86
- <div>
87
- <p class="text-sm font-medium text-gray-600">Total Portfolio Value</p>
88
- <p class="text-2xl font-bold text-gray-900">$4,750,000</p>
89
- <p class="text-sm text-green-600 mt-1">+12.5% this quarter</p>
90
  </div>
91
- <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
92
- <i data-feather="dollar-sign" class="w-6 h-6 text-green-600"></i>
93
  </div>
94
  </div>
95
- </div>
96
  <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
97
  <div class="flex items-center justify-between">
98
  <div>
99
  <p class="text-sm font-medium text-gray-600">Active Investments</p>
100
  <p class="text-2xl font-bold text-gray-900">8</div>
101
  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
102
- <i data-feather="briefcase" class="w-6 h-6 text-blue-600"></i>
103
- </div>
104
  </div>
105
  </div>
106
  <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
@@ -110,9 +116,9 @@
110
  <p class="text-2xl font-bold text-gray-900">18.2%</p>
111
  <p class="text-sm text-green-600 mt-1">+2.3% vs last period</p>
112
  </div>
113
- <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
114
- <i data-feather="trending-up" class="w-6 h-6 text-purple-600"></i>
115
- </div>
116
  </div>
117
  </div>
118
  <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
@@ -122,9 +128,9 @@
122
  <p class="text-2xl font-bold text-gray-900">12</p>
123
  <p class="text-sm text-gray-600 mt-1">Across 3 countries</p>
124
  </div>
125
- <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
126
- <i data-feather="map-pin" class="w-6 h-6 text-orange-600"></i>
127
- </div>
128
  </div>
129
  </div>
130
  </div>
@@ -147,9 +153,9 @@
147
  <div class="space-y-4">
148
  <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
149
  <div class="flex items-center">
150
- <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center">
151
- <i data-feather="home" class="w-4 h-4 text-indigo-600"></i>
152
- </div>
153
  <div class="ml-4">
154
  <p class="text-sm font-medium text-gray-900">Property Purchase Completed</p>
155
  <p class="text-xs text-gray-600">Luxury Apartment - Dubai Marina</div>
@@ -160,9 +166,9 @@
160
  </div>
161
  <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
162
  <div class="flex items-center">
163
- <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
164
- <i data-feather="trending-up" class="w-4 h-4 text-green-600"></i>
165
- </div>
166
  <div class="ml-4">
167
  <p class="text-sm font-medium text-gray-900">Rental Income Received</p>
168
  <p class="text-xs text-gray-600">Commercial Office - Doha</div>
@@ -174,8 +180,8 @@
174
  <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
175
  <div class="flex items-center">
176
  <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
177
- <i data-feather="file-text" class="w-4 h-4 text-blue-600"></i>
178
- </div>
179
  <div class="ml-4">
180
  <p class="text-sm font-medium text-gray-900">Document Verification</p>
181
  <p class="text-xs text-gray-600">Property in Riyadh</div>
@@ -189,22 +195,22 @@
189
 
190
  <!-- Quick Actions -->
191
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
192
- <button class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300">
193
- <i data-feather="plus" class="w-8 h-8 text-indigo-600 mb-3"></i>
194
- <h4 class="font-semibold text-gray-900 mb-2">Add New Investment</h4>
195
- <p class="text-sm text-gray-600">Explore new property opportunities</p>
196
- </button>
197
- <button class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300">
198
- <i data-feather="search" class="w-8 h-8 text-indigo-600 mb-3"></i>
199
- <h4 class="font-semibold text-gray-900 mb-2">Market Analysis</h2>
200
- <p class="text-sm text-gray-600">Get detailed market insights</p>
201
- </button>
202
- <button class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300">
203
- <i data-feather="download" class="w-8 h-8 text-indigo-600 mb-3"></i>
204
- <h4 class="font-semibold text-gray-900 mb-2">Generate Reports</h4>
205
- <p class="text-sm text-gray-600">Download portfolio performance</p>
206
- </button>
207
- </div>
208
  </main>
209
  </div>
210
  </div>
@@ -213,17 +219,79 @@
213
  document.addEventListener('DOMContentLoaded', function() {
214
  // Performance Chart
215
  const performanceCtx = document.getElementById('performanceChart').getContext('2d');
216
- new Chart(performanceCtx, {
217
- type: 'line',
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
218
  data: {
219
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
220
  datasets: [{
221
- label: 'Portfolio Value ($)',
222
- data: [4200000, 4350000, 4500000, 4600000, 4700000, 4750000],
 
 
 
 
 
 
 
223
  borderColor: '#4f46e5',
224
- backgroundColor: 'rgba(79, 70, 229, 0.1)',
225
- tension: 0.4,
226
- fill: true
227
  }]
228
  },
229
  options: {
@@ -236,14 +304,81 @@
236
  },
237
  scales: {
238
  y: {
239
- beginAtZero: false,
 
240
  ticks: {
241
  callback: function(value) {
242
- return '// Initialize Feather Icons
 
 
 
 
 
 
 
243
  feather.replace();
244
  });
245
  </script>
246
  </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
247
  </html>
248
  + (value / 1000000).toFixed(1) + 'M'
249
  }
 
15
  .sidebar { transition: all 0.3s ease; }
16
  .dashboard-card { transition: all 0.3s ease; }
17
  .dashboard-card:hover { transform: translateY(-2px); }
18
+ .royal-blue-bg { background-color: #1e3a8a; }
19
+ .royal-blue-text { color: #1e3a8a; }
20
+ </style>
21
  </head>
22
  <body class="bg-gray-100">
23
  <div class="flex h-screen">
24
  <!-- Sidebar -->
25
  <div class="sidebar bg-white w-64 shadow-lg">
26
  <div class="p-6 border-b border-gray-200">
27
+ <div class="flex items-center">
28
+ <i data-feather="home" class="h-6 w-6 text-blue-700"></i>
29
+ <span class="ml-2 text-xl font-bold">PropTech Connect</span>
30
+ </div>
31
  </div>
32
+ <nav class="p-4">
33
  <ul class="space-y-2">
34
+ <li><a href="dashboard.html" class="flex items-center p-3 bg-blue-50 text-blue-700 rounded-lg">
35
  <i data-feather="grid" class="w-5 h-5 mr-3"></i>
36
  Dashboard
37
  </a></li>
38
+ <li><a href="my-properties.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">
39
  <i data-feather="home" class="w-5 h-5 mr-3"></i>
40
  My Properties
41
  </a></li>
 
55
  <i data-feather="settings" class="w-5 h-5 mr-3"></i>
56
  Settings
57
  </a></li>
58
+ <li><a href="index.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">
59
+ <i data-feather="arrow-left" class="w-5 h-5 mr-3"></i>
60
+ Back to Home
61
+ </a></li>
62
  </ul>
63
+ </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
 
88
  <!-- Portfolio Overview -->
89
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
90
  <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
91
+ <div class="flex items-center justify-between">
92
+ <div>
93
+ <p class="text-sm font-medium text-gray-600">Total Portfolio Value</p>
94
+ <p class="text-2xl font-bold text-gray-900">$4,750,000</p>
95
+ <p class="text-sm text-green-600 mt-1">+12.5% this quarter</p>
96
  </div>
97
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
98
+ <i data-feather="dollar-sign" class="w-6 h-6 text-blue-700"></i>
99
  </div>
100
  </div>
101
+ </div>
102
  <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
103
  <div class="flex items-center justify-between">
104
  <div>
105
  <p class="text-sm font-medium text-gray-600">Active Investments</p>
106
  <p class="text-2xl font-bold text-gray-900">8</div>
107
  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
108
+ <i data-feather="briefcase" class="w-6 h-6 text-blue-700"></i>
109
+ </div>
110
  </div>
111
  </div>
112
  <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
 
116
  <p class="text-2xl font-bold text-gray-900">18.2%</p>
117
  <p class="text-sm text-green-600 mt-1">+2.3% vs last period</p>
118
  </div>
119
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
120
+ <i data-feather="trending-up" class="w-6 h-6 text-blue-700"></i>
121
+ </div>
122
  </div>
123
  </div>
124
  <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
 
128
  <p class="text-2xl font-bold text-gray-900">12</p>
129
  <p class="text-sm text-gray-600 mt-1">Across 3 countries</p>
130
  </div>
131
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
132
+ <i data-feather="map-pin" class="w-6 h-6 text-blue-700"></i>
133
+ </div>
134
  </div>
135
  </div>
136
  </div>
 
153
  <div class="space-y-4">
154
  <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
155
  <div class="flex items-center">
156
+ <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
157
+ <i data-feather="home" class="w-4 h-4 text-blue-700"></i>
158
+ </div>
159
  <div class="ml-4">
160
  <p class="text-sm font-medium text-gray-900">Property Purchase Completed</p>
161
  <p class="text-xs text-gray-600">Luxury Apartment - Dubai Marina</div>
 
166
  </div>
167
  <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
168
  <div class="flex items-center">
169
+ <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
170
+ <i data-feather="trending-up" class="w-4 h-4 text-blue-700"></i>
171
+ </div>
172
  <div class="ml-4">
173
  <p class="text-sm font-medium text-gray-900">Rental Income Received</p>
174
  <p class="text-xs text-gray-600">Commercial Office - Doha</div>
 
180
  <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
181
  <div class="flex items-center">
182
  <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
183
+ <i data-feather="file-text" class="w-4 h-4 text-blue-700"></i>
184
+ </div>
185
  <div class="ml-4">
186
  <p class="text-sm font-medium text-gray-900">Document Verification</p>
187
  <p class="text-xs text-gray-600">Property in Riyadh</div>
 
195
 
196
  <!-- Quick Actions -->
197
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
198
+ <a href="properties.html" class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300 block">
199
+ <i data-feather="plus" class="w-8 h-8 text-blue-700 mb-3"></i>
200
+ <h4 class="font-semibold text-gray-900 mb-2">Add New Investment</h4>
201
+ <p class="text-sm text-gray-600">Explore new property opportunities</p>
202
+ </a>
203
+ <a href="market.html" class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300 block">
204
+ <i data-feather="search" class="w-8 h-8 text-blue-700 mb-3"></i>
205
+ <h4 class="font-semibold text-gray-900 mb-2">Market Analysis</h4>
206
+ <p class="text-sm text-gray-600">Get detailed market insights</p>
207
+ </a>
208
+ <button class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300" onclick="generateReport()">
209
+ <i data-feather="download" class="w-8 h-8 text-blue-700 mb-3"></i>
210
+ <h4 class="font-semibold text-gray-900 mb-2">Generate Reports</h4>
211
+ <p class="text-sm text-gray-600">Download portfolio performance</p>
212
+ </button>
213
+ </div>
214
  </main>
215
  </div>
216
  </div>
 
219
  document.addEventListener('DOMContentLoaded', function() {
220
  // Performance Chart
221
  const performanceCtx = document.getElementById('performanceChart').getContext('2d');
222
+ // Check if user is logged in
223
+ if (!localStorage.getItem('userLoggedIn')) {
224
+ window.location.href = 'login.html';
225
+ }
226
+
227
+ function generateReport() {
228
+ alert('Portfolio report will be generated and downloaded shortly...');
229
+ // Simulate report generation
230
+ setTimeout(() => {
231
+ const link = document.createElement('a');
232
+ link.download = 'portfolio-report.pdf';
233
+ link.href = '#';
234
+ link.click();
235
+ }, 1000);
236
+ }
237
+
238
+ document.addEventListener('DOMContentLoaded', function() {
239
+ // Performance Chart
240
+ const performanceCtx = document.getElementById('performanceChart');
241
+ if (performanceCtx) {
242
+ new Chart(performanceCtx, {
243
+ type: 'line',
244
+ data: {
245
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
246
+ datasets: [{
247
+ label: 'Portfolio Value ($)',
248
+ data: [4200000, 4350000, 4500000, 4600000, 4700000, 4750000],
249
+ borderColor: '#1e3a8a',
250
+ backgroundColor: 'rgba(30, 58, 138, 0.1)',
251
+ tension: 0.4,
252
+ fill: true
253
+ }]
254
+ },
255
+ options: {
256
+ responsive: true,
257
+ maintainAspectRatio: false,
258
+ plugins: {
259
+ legend: {
260
+ display: false
261
+ }
262
+ },
263
+ scales: {
264
+ y: {
265
+ beginAtZero: false,
266
+ ticks: {
267
+ callback: function(value) {
268
+ return '</script>
269
+ </body>
270
+ </html>
271
+ + (value / 1000000).toFixed(1) + 'M'
272
+ }
273
+ }
274
+ }
275
+ });
276
+
277
+ // Market Trends Chart
278
+ const marketTrendsCtx = document.getElementById('marketTrendsChart').getContext('2d');
279
+ new Chart(marketTrendsCtx, {
280
+ type: 'bar',
281
  data: {
282
+ labels: ['UAE', 'Saudi', 'Qatar', 'Oman', 'Bahrain'],
283
  datasets: [{
284
+ label: 'Market Growth %',
285
+ data: [12.5, 15.2, 8.7, 11.3, 9.8],
286
+ backgroundColor: [
287
+ 'rgba(79, 70, 229, 0.8)',
288
+ 'rgba(79, 70, 229, 0.6)',
289
+ 'rgba(79, 70, 229, 0.4)',
290
+ 'rgba(79, 70, 229, 0.6)',
291
+ 'rgba(79, 70, 229, 0.8)'
292
+ ],
293
  borderColor: '#4f46e5',
294
+ borderWidth: 1
 
 
295
  }]
296
  },
297
  options: {
 
304
  },
305
  scales: {
306
  y: {
307
+ beginAtZero: true,
308
+ max: 20,
309
  ticks: {
310
  callback: function(value) {
311
+ return value + '%';
312
+ }
313
+ }
314
+ }
315
+ }
316
+ }
317
+ });
318
+ // Initialize Feather Icons
319
  feather.replace();
320
  });
321
  </script>
322
  </body>
323
+ </html>
324
+ + (value / 1000000).toFixed(1) + 'M';
325
+ }
326
+ }
327
+ }
328
+ }
329
+ }
330
+ });
331
+ }
332
+
333
+ // Market Trends Chart
334
+ const marketTrendsCtx = document.getElementById('marketTrendsChart');
335
+ if (marketTrendsCtx) {
336
+ new Chart(marketTrendsCtx, {
337
+ type: 'bar',
338
+ data: {
339
+ labels: ['UAE', 'Saudi', 'Qatar', 'Oman', 'Bahrain'],
340
+ datasets: [{
341
+ label: 'Market Growth %',
342
+ data: [12.5, 15.2, 8.7, 11.3, 9.8],
343
+ backgroundColor: [
344
+ 'rgba(30, 58, 138, 0.8)',
345
+ 'rgba(30, 58, 138, 0.6)',
346
+ 'rgba(30, 58, 138, 0.4)',
347
+ 'rgba(30, 58, 138, 0.6)',
348
+ 'rgba(30, 58, 138, 0.8)'
349
+ ],
350
+ borderColor: '#1e3a8a',
351
+ borderWidth: 1
352
+ }]
353
+ },
354
+ options: {
355
+ responsive: true,
356
+ maintainAspectRatio: false,
357
+ plugins: {
358
+ legend: {
359
+ display: false
360
+ }
361
+ },
362
+ scales: {
363
+ y: {
364
+ beginAtZero: true,
365
+ max: 20,
366
+ ticks: {
367
+ callback: function(value) {
368
+ return value + '%';
369
+ }
370
+ }
371
+ }
372
+ }
373
+ }
374
+ });
375
+ }
376
+
377
+ // Initialize Feather Icons
378
+ feather.replace();
379
+ });
380
+ </script>
381
+ </body>
382
  </html>
383
  + (value / 1000000).toFixed(1) + 'M'
384
  }
index.html CHANGED
@@ -13,8 +13,11 @@
13
  <style>
14
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
  body { font-family: 'Inter', sans-serif; }
16
- .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
17
- .property-card { transition: all 0.3s ease; }
 
 
 
18
  .property-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
19
  .stats-counter { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
20
  </style>
@@ -26,27 +29,38 @@
26
  <div class="flex justify-between h-16">
27
  <div class="flex items-center">
28
  <div class="flex-shrink-0 flex items-center">
29
- <i data-feather="home" class="h-8 w-8 text-indigo-600"></i>
30
  <span class="ml-2 text-xl font-bold text-gray-900">PropTech Connect</span>
31
  </div>
32
  </div>
33
  <div class="hidden md:flex items-center space-x-8">
34
- <a href="#features" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Features</a>
35
- <a href="#market" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Market Data</a>
36
- <a href="#properties" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Properties</a>
37
- <a href="#about" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
38
- <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">Get Started</button>
 
39
  </div>
40
  <div class="md:hidden flex items-center">
41
- <button id="mobile-menu-button" class="text-gray-700 hover:text-indigo-600">
42
  <i data-feather="menu"></i>
43
  </button>
44
  </div>
45
  </div>
 
 
 
 
 
 
 
 
 
 
 
46
  </div>
47
  </nav>
48
-
49
- <!-- Hero Section -->
50
  <section class="gradient-bg text-white relative overflow-hidden">
51
  <div id="vanta-bg" class="absolute inset-0 z-0"></div>
52
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
@@ -54,10 +68,10 @@
54
  <h1 class="text-4xl md:text-6xl font-bold mb-6">Revolutionizing Middle East Real Estate</h1>
55
  <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">AI-powered property platform solving the region's most urgent real estate challenges with cutting-edge technology</p>
56
  <div class="flex flex-col sm:flex-row justify-center gap-4">
57
- <button class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">Explore Properties</button>
58
- <button class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition duration-300">Join as Partner</button>
59
  </div>
60
- </div>
61
  </div>
62
  </section>
63
 
@@ -66,22 +80,22 @@
66
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
67
  <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
68
  <div class="p-6">
69
- <div class="text-3xl md:text-4xl font-bold text-indigo-600 stats-counter" data-target="15000">0</div>
70
  <div class="text-gray-600 mt-2">Properties Listed</div>
71
  </div>
72
  <div class="p-6">
73
- <div class="text-3xl md:text-4xl font-bold text-indigo-600 stats-counter" data-target="750">0</div>
74
  <div class="text-gray-600 mt-2">Development Partners</div>
75
  </div>
76
  <div class="p-6">
77
- <div class="text-3xl md:text-4xl font-bold text-indigo-600 stats-counter" data-target="98">0</div>
78
  <div class="text-gray-600 mt-2">Success Rate %</div>
79
  </div>
80
  <div class="p-6">
81
- <div class="text-3xl md:text-4xl font-bold text-indigo-600 stats-counter" data-target="12">0</div>
82
  <div class="text-gray-600 mt-2">Countries Served</div>
83
  </div>
84
- </div>
85
  </div>
86
  </section>
87
 
@@ -94,30 +108,30 @@
94
  </div>
95
  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
96
  <div class="bg-white p-8 rounded-xl shadow-lg property-card">
97
- <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
98
- <i data-feather="x-circle" class="w-6 h-6 text-red-600"></i>
99
- </div>
100
  <h3 class="text-xl font-semibold text-gray-900 mb-3">Unworkable Solutions</h3>
101
  <p class="text-gray-600">Traditional methods are broken. Our AI-driven platform automates property valuation, legal documentation, and transaction processing.</p>
102
  </div>
103
  <div class="bg-white p-8 rounded-xl shadow-lg property-card">
104
- <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
105
- <i data-feather="alert-triangle" class="w-6 h-6 text-yellow-600"></i>
106
- </div>
107
  <h3 class="text-xl font-semibold text-gray-900 mb-3">Unavoidable Complexity</h3>
108
  <p class="text-gray-600">Navigating regional regulations, cultural differences, and market volatility made simple through intelligent algorithms.</p>
109
  </div>
110
  <div class="bg-white p-8 rounded-xl shadow-lg property-card">
111
  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
112
- <i data-feather="clock" class="w-6 h-6 text-blue-600"></i>
113
- </div>
114
  <h3 class="text-xl font-semibold text-gray-900 mb-3">Urgent Market Needs</h3>
115
  <p class="text-gray-600">Rapid urbanization and investment demands require immediate solutions. Our platform delivers real-time market insights.</p>
116
  </div>
117
  <div class="bg-white p-8 rounded-xl shadow-lg property-card">
118
- <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
119
- <i data-feather="users" class="w-6 h-6 text-green-600"></i>
120
- </div>
121
  <h3 class="text-xl font-semibold text-gray-900 mb-3">Underserved Communities</h3>
122
  <p class="text-gray-600">Democratizing access to premium real estate opportunities for both local and international investors.</p>
123
  </div>
@@ -132,8 +146,8 @@
132
  <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Live Middle East Market Intelligence</h2>
133
  <p class="text-xl text-gray-600">Real-time data analytics driving smarter investment decisions</p>
134
  </div>
135
- <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-8 text-white">
136
- <div class="grid md:grid-cols-3 gap-8">
137
  <div class="text-center">
138
  <div class="text-3xl font-bold mb-2">$2.3T</div>
139
  <div class="text-indigo-100">Projected Market Value 2025</div>
@@ -170,10 +184,10 @@
170
  <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Middle East Real Estate?</h2>
171
  <p class="text-xl mb-8">Join the revolution and be part of the region's most innovative property platform</p>
172
  <div class="flex flex-col sm:flex-row justify-center gap-4">
173
- <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition duration-300">Start Investing Today</button>
174
- <button class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-indigo-600 transition duration-300">Partner With Us</button>
175
  </div>
176
- </div>
177
  </section>
178
 
179
  <!-- Footer -->
@@ -182,8 +196,8 @@
182
  <div class="grid md:grid-cols-4 gap-8">
183
  <div>
184
  <div class="flex items-center mb-4">
185
- <i data-feather="home" class="h-6 w-6 text-indigo-400"></i>
186
- <span class="ml-2 text-xl font-bold">PropTech Connect</span>
187
  </div>
188
  <p class="text-gray-400">Revolutionizing real estate through technology and innovation.</p>
189
  </div>
@@ -221,22 +235,23 @@
221
  </footer>
222
 
223
  <script>
224
- // Vanta.js Background
225
- VANTA.GLOBE({
226
- el: "#vanta-bg",
227
- mouseControls: true,
228
- touchControls: true,
229
- gyroControls: false,
230
- minHeight: 200.00,
231
- minWidth: 200.00,
232
- scale: 1.00,
233
- scaleMobile: 1.00,
234
- color: 0x667eea,
235
- backgroundColor: 0x0,
236
- size: 1.00
237
- });
238
-
239
- // Stats Counter Animation
 
240
  document.addEventListener('DOMContentLoaded', function() {
241
  const counters = document.querySelectorAll('.stats-counter');
242
  const speed = 200;
@@ -323,24 +338,32 @@
323
  <div class="p-6">
324
  <div class="flex justify-between items-start mb-2">
325
  <h3 class="text-lg font-semibold text-gray-900">${property.title}</h3>
326
- <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">${property.type}</span>
327
- </div>
328
  <p class="text-gray-600 mb-4 flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-1"></i> ${property.location}</p>
329
  <div class="flex justify-between items-center">
330
- <span class="text-xl font-bold text-indigo-600">${property.price}</span>
331
- <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition duration-300">View Details</button>
332
- </div>
333
  </div>
334
  `;
335
  propertiesGrid.appendChild(propertyCard);
336
  });
337
-
338
  // Mobile Menu Toggle
339
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
340
- alert('Mobile menu would open here in a full implementation');
 
341
  });
342
 
343
- // Smooth scrolling
 
 
 
 
 
 
 
 
344
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
345
  anchor.addEventListener('click', function (e) {
346
  e.preventDefault();
 
13
  <style>
14
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
  body { font-family: 'Inter', sans-serif; }
16
+ .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); }
17
+ .royal-blue-bg { background-color: #1e3a8a; }
18
+ .royal-blue-text { color: #1e3a8a; }
19
+ .royal-blue-border { border-color: #1e3a8a; }
20
+ .property-card { transition: all 0.3s ease; }
21
  .property-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
22
  .stats-counter { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
23
  </style>
 
29
  <div class="flex justify-between h-16">
30
  <div class="flex items-center">
31
  <div class="flex-shrink-0 flex items-center">
32
+ <i data-feather="home" class="h-8 w-8 text-blue-700"></i>
33
  <span class="ml-2 text-xl font-bold text-gray-900">PropTech Connect</span>
34
  </div>
35
  </div>
36
  <div class="hidden md:flex items-center space-x-8">
37
+ <a href="#features" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Features</a>
38
+ <a href="#market" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Market Data</a>
39
+ <a href="#properties" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Properties</a>
40
+ <a href="dashboard.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
41
+ <a href="properties.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Browse</a>
42
+ <a href="login.html" class="bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-800 transition duration-300">Login</a>
43
  </div>
44
  <div class="md:hidden flex items-center">
45
+ <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-700">
46
  <i data-feather="menu"></i>
47
  </button>
48
  </div>
49
  </div>
50
+ <!-- Mobile Menu -->
51
+ <div id="mobile-menu" class="hidden md:hidden">
52
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
53
+ <a href="#features" class="text-gray-700 hover:text-blue-700 block px-3 py-2 rounded-md text-base font-medium">Features</a>
54
+ <a href="#market" class="text-gray-700 hover:text-blue-700 block px-3 py-2 rounded-md text-base font-medium">Market Data</a>
55
+ <a href="#properties" class="text-gray-700 hover:text-blue-700 block px-3 py-2 rounded-md text-base font-medium">Properties</a>
56
+ <a href="dashboard.html" class="text-gray-700 hover:text-blue-700 block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
57
+ <a href="properties.html" class="text-gray-700 hover:text-blue-700 block px-3 py-2 rounded-md text-base font-medium">Browse</a>
58
+ <a href="login.html" class="bg-blue-700 text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-800 transition duration-300">Login</a>
59
+ </div>
60
+ </div>
61
  </div>
62
  </nav>
63
+ <!-- Hero Section -->
 
64
  <section class="gradient-bg text-white relative overflow-hidden">
65
  <div id="vanta-bg" class="absolute inset-0 z-0"></div>
66
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
 
68
  <h1 class="text-4xl md:text-6xl font-bold mb-6">Revolutionizing Middle East Real Estate</h1>
69
  <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">AI-powered property platform solving the region's most urgent real estate challenges with cutting-edge technology</p>
70
  <div class="flex flex-col sm:flex-row justify-center gap-4">
71
+ <a href="properties.html" class="bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300 text-center">Explore Properties</a>
72
+ <a href="register.html" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-700 transition duration-300 text-center">Join as Partner</a>
73
  </div>
74
+ </div>
75
  </div>
76
  </section>
77
 
 
80
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
81
  <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
82
  <div class="p-6">
83
+ <div class="text-3xl md:text-4xl font-bold text-blue-700 stats-counter" data-target="15000">0</div>
84
  <div class="text-gray-600 mt-2">Properties Listed</div>
85
  </div>
86
  <div class="p-6">
87
+ <div class="text-3xl md:text-4xl font-bold text-blue-700 stats-counter" data-target="750">0</div>
88
  <div class="text-gray-600 mt-2">Development Partners</div>
89
  </div>
90
  <div class="p-6">
91
+ <div class="text-3xl md:text-4xl font-bold text-blue-700 stats-counter" data-target="98">0</div>
92
  <div class="text-gray-600 mt-2">Success Rate %</div>
93
  </div>
94
  <div class="p-6">
95
+ <div class="text-3xl md:text-4xl font-bold text-blue-700 stats-counter" data-target="12">0</div>
96
  <div class="text-gray-600 mt-2">Countries Served</div>
97
  </div>
98
+ </div>
99
  </div>
100
  </section>
101
 
 
108
  </div>
109
  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
110
  <div class="bg-white p-8 rounded-xl shadow-lg property-card">
111
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
112
+ <i data-feather="x-circle" class="w-6 h-6 text-blue-700"></i>
113
+ </div>
114
  <h3 class="text-xl font-semibold text-gray-900 mb-3">Unworkable Solutions</h3>
115
  <p class="text-gray-600">Traditional methods are broken. Our AI-driven platform automates property valuation, legal documentation, and transaction processing.</p>
116
  </div>
117
  <div class="bg-white p-8 rounded-xl shadow-lg property-card">
118
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
119
+ <i data-feather="alert-triangle" class="w-6 h-6 text-blue-700"></i>
120
+ </div>
121
  <h3 class="text-xl font-semibold text-gray-900 mb-3">Unavoidable Complexity</h3>
122
  <p class="text-gray-600">Navigating regional regulations, cultural differences, and market volatility made simple through intelligent algorithms.</p>
123
  </div>
124
  <div class="bg-white p-8 rounded-xl shadow-lg property-card">
125
  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
126
+ <i data-feather="clock" class="w-6 h-6 text-blue-700"></i>
127
+ </div>
128
  <h3 class="text-xl font-semibold text-gray-900 mb-3">Urgent Market Needs</h3>
129
  <p class="text-gray-600">Rapid urbanization and investment demands require immediate solutions. Our platform delivers real-time market insights.</p>
130
  </div>
131
  <div class="bg-white p-8 rounded-xl shadow-lg property-card">
132
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
133
+ <i data-feather="users" class="w-6 h-6 text-blue-700"></i>
134
+ </div>
135
  <h3 class="text-xl font-semibold text-gray-900 mb-3">Underserved Communities</h3>
136
  <p class="text-gray-600">Democratizing access to premium real estate opportunities for both local and international investors.</p>
137
  </div>
 
146
  <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Live Middle East Market Intelligence</h2>
147
  <p class="text-xl text-gray-600">Real-time data analytics driving smarter investment decisions</p>
148
  </div>
149
+ <div class="bg-gradient-to-r from-blue-700 to-blue-900 rounded-2xl p-8 text-white">
150
+ <div class="grid md:grid-cols-3 gap-8">
151
  <div class="text-center">
152
  <div class="text-3xl font-bold mb-2">$2.3T</div>
153
  <div class="text-indigo-100">Projected Market Value 2025</div>
 
184
  <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Middle East Real Estate?</h2>
185
  <p class="text-xl mb-8">Join the revolution and be part of the region's most innovative property platform</p>
186
  <div class="flex flex-col sm:flex-row justify-center gap-4">
187
+ <a href="register.html" class="bg-white text-blue-700 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition duration-300 text-center">Start Investing Today</a>
188
+ <a href="partner.html" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-blue-700 transition duration-300 text-center">Partner With Us</a>
189
  </div>
190
+ </div>
191
  </section>
192
 
193
  <!-- Footer -->
 
196
  <div class="grid md:grid-cols-4 gap-8">
197
  <div>
198
  <div class="flex items-center mb-4">
199
+ <i data-feather="home" class="h-6 w-6 text-blue-400"></i>
200
+ <span class="ml-2 text-xl font-bold">PropTech Connect</span>
201
  </div>
202
  <p class="text-gray-400">Revolutionizing real estate through technology and innovation.</p>
203
  </div>
 
235
  </footer>
236
 
237
  <script>
238
+ // Vanta.js Background with royal blue
239
+ if (typeof VANTA !== 'undefined') {
240
+ VANTA.GLOBE({
241
+ el: "#vanta-bg",
242
+ mouseControls: true,
243
+ touchControls: true,
244
+ gyroControls: false,
245
+ minHeight: 200.00,
246
+ minWidth: 200.00,
247
+ scale: 1.00,
248
+ scaleMobile: 1.00,
249
+ color: 0x1e3a8a,
250
+ backgroundColor: 0x0,
251
+ size: 1.00
252
+ });
253
+ }
254
+ // Stats Counter Animation
255
  document.addEventListener('DOMContentLoaded', function() {
256
  const counters = document.querySelectorAll('.stats-counter');
257
  const speed = 200;
 
338
  <div class="p-6">
339
  <div class="flex justify-between items-start mb-2">
340
  <h3 class="text-lg font-semibold text-gray-900">${property.title}</h3>
341
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">${property.type}</span>
342
+ </div>
343
  <p class="text-gray-600 mb-4 flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-1"></i> ${property.location}</p>
344
  <div class="flex justify-between items-center">
345
+ <span class="text-xl font-bold text-blue-700">${property.price}</span>
346
+ <a href="property-details.html" class="bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-800 transition duration-300">View Details</a>
347
+ </div>
348
  </div>
349
  `;
350
  propertiesGrid.appendChild(propertyCard);
351
  });
 
352
  // Mobile Menu Toggle
353
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
354
+ const menu = document.getElementById('mobile-menu');
355
+ menu.classList.toggle('hidden');
356
  });
357
 
358
+ // Close mobile menu when clicking outside
359
+ document.addEventListener('click', function(event) {
360
+ const menu = document.getElementById('mobile-menu');
361
+ const button = document.getElementById('mobile-menu-button');
362
+ if (!menu.contains(event.target) && !button.contains(event.target) && !menu.classList.contains('hidden')) {
363
+ menu.classList.add('hidden');
364
+ }
365
+ });
366
+ // Smooth scrolling
367
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
368
  anchor.addEventListener('click', function (e) {
369
  e.preventDefault();
login.html ADDED
@@ -0,0 +1,85 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Login - PropTech Connect</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body { font-family: 'Inter', sans-serif; }
14
+ .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); }
15
+ </style>
16
+ </head>
17
+ <body class="bg-gray-50 min-h-screen flex items-center justify-center">
18
+ <div class="max-w-md w-full mx-4">
19
+ <div class="bg-white rounded-2xl shadow-xl p-8">
20
+ <div class="text-center mb-8">
21
+ <div class="flex items-center justify-center mb-4">
22
+ <i data-feather="home" class="h-8 w-8 text-blue-700"></i>
23
+ <span class="ml-2 text-2xl font-bold text-gray-900">PropTech Connect</span>
24
+ </div>
25
+ <h2 class="text-2xl font-bold text-gray-900">Welcome Back</h2>
26
+ <p class="text-gray-600">Sign in to your account</p>
27
+ </div>
28
+
29
+ <form id="loginForm" class="space-y-6">
30
+ <div>
31
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
32
+ <input type="email" id="email" name="email" required
33
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700 focus:border-transparent transition duration-300"
34
+ placeholder="Enter your email">
35
+ </div>
36
+
37
+ <div>
38
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
39
+ <input type="password" id="password" name="password" required
40
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700 focus:border-transparent transition duration-300"
41
+ placeholder="Enter your password">
42
+ </div>
43
+
44
+ <div class="flex items-center justify-between">
45
+ <div class="flex items-center">
46
+ <input type="checkbox" id="remember" name="remember"
47
+ class="w-4 h-4 text-blue-700 border-gray-300 rounded focus:ring-blue-700">
48
+ <label for="remember" class="ml-2 text-sm text-gray-600">Remember me</label>
49
+ </div>
50
+ <a href="forgot-password.html" class="text-sm text-blue-700 hover:text-blue-800">Forgot password?</a>
51
+ </div>
52
+
53
+ <button type="submit"
54
+ class="w-full bg-blue-700 text-white py-3 px-4 rounded-lg font-semibold hover:bg-blue-800 transition duration-300">
55
+ Sign In
56
+ </button>
57
+ </form>
58
+
59
+ <div class="mt-6 text-center">
60
+ <p class="text-gray-600">Don't have an account?
61
+ <a href="register.html" class="text-blue-700 font-semibold hover:text-blue-800">Sign up</a>
62
+ </p>
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <script>
68
+ document.getElementById('loginForm').addEventListener('submit', function(e) {
69
+ e.preventDefault();
70
+ // Simulate login process
71
+ const email = document.getElementById('email').value;
72
+ const password = document.getElementById('password').value;
73
+
74
+ if (email && password) {
75
+ // Store user session
76
+ localStorage.setItem('userLoggedIn', 'true');
77
+ localStorage.setItem('userEmail', email);
78
+ window.location.href = 'dashboard.html';
79
+ }
80
+ });
81
+
82
+ feather.replace();
83
+ </script>
84
+ </body>
85
+ </html>
properties.html ADDED
@@ -0,0 +1,193 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Browse Properties - PropTech Connect</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body { font-family: 'Inter', sans-serif; }
14
+ .property-card { transition: all 0.3s ease; }
15
+ .property-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
16
+ </style>
17
+ </head>
18
+ <body class="bg-gray-50">
19
+ <!-- Navigation -->
20
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
21
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
22
+ <div class="flex justify-between h-16">
23
+ <div class="flex items-center">
24
+ <div class="flex-shrink-0 flex items-center">
25
+ <i data-feather="home" class="h-8 w-8 text-blue-700"></i>
26
+ <span class="ml-2 text-xl font-bold text-gray-900">PropTech Connect</span>
27
+ </div>
28
+ </div>
29
+ <div class="hidden md:flex items-center space-x-8">
30
+ <a href="index.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
31
+ <a href="dashboard.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
32
+ <a href="properties.html" class="text-blue-700 px-3 py-2 rounded-md text-sm font-medium border-b-2 border-blue-700">Properties</a>
33
+ <a href="market.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Market Data</a>
34
+ <a href="login.html" class="bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-800 transition duration-300">Login</a>
35
+ </div>
36
+ <div class="md:hidden flex items-center">
37
+ <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-700">
38
+ <i data-feather="menu"></i>
39
+ </button>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ </nav>
44
+
45
+ <!-- Header -->
46
+ <section class="bg-gradient-to-r from-blue-700 to-blue-900 text-white py-16">
47
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
48
+ <div class="text-center">
49
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Browse Properties</h1>
50
+ <p class="text-xl">Discover premium real estate opportunities across the Middle East</p>
51
+ </div>
52
+ </div>
53
+ </section>
54
+
55
+ <!-- Filters -->
56
+ <section class="bg-white py-8 shadow-sm">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
58
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
59
+ <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700">
60
+ <option>All Locations</option>
61
+ <option>Dubai, UAE</option>
62
+ <option>Abu Dhabi, UAE</option>
63
+ <option>Riyadh, Saudi Arabia</option>
64
+ <option>Doha, Qatar</option>
65
+ </select>
66
+ <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700">
67
+ <option>All Types</option>
68
+ <option>Apartment</option>
69
+ <option>Villa</option>
70
+ <option>Commercial</option>
71
+ <option>Penthouse</option>
72
+ </select>
73
+ <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700">
74
+ <option>Any Price</option>
75
+ <option>Under $500,000</option>
76
+ <option>$500,000 - $1M</option>
77
+ <option>$1M - $5M</option>
78
+ <option>Over $5M</option>
79
+ </select>
80
+ <button class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition duration-300">Search</button>
81
+ </div>
82
+ </div>
83
+ </section>
84
+
85
+ <!-- Properties Grid -->
86
+ <section class="py-12">
87
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
88
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="properties-grid">
89
+ <!-- Properties loaded dynamically -->
90
+ </div>
91
+ </div>
92
+ </section>
93
+
94
+ <script>
95
+ const properties = [
96
+ {
97
+ image: 'http://static.photos/cityscape/640x360/1',
98
+ title: 'Luxury Downtown Apartment',
99
+ location: 'Dubai Marina, UAE',
100
+ price: 'AED 2,800,000',
101
+ type: 'Apartment',
102
+ beds: 3,
103
+ baths: 3,
104
+ area: '2,200 sqft'
105
+ },
106
+ {
107
+ image: 'http://static.photos/vintage/640x360/2',
108
+ title: 'Heritage Villa Compound',
109
+ location: 'Riyadh, Saudi Arabia',
110
+ price: 'SAR 12,500,000',
111
+ type: 'Villa',
112
+ beds: 5,
113
+ baths: 6,
114
+ area: '8,500 sqft'
115
+ },
116
+ {
117
+ image: 'http://static.photos/modern/640x360/3',
118
+ title: 'Commercial Office Space',
119
+ location: 'Doha, Qatar',
120
+ price: 'QAR 4,200,000',
121
+ type: 'Commercial',
122
+ beds: 'N/A',
123
+ baths: 'N/A',
124
+ area: '5,000 sqft'
125
+ },
126
+ {
127
+ image: 'http://static.photos/white/640x360/4',
128
+ title: 'Penthouse with Sea View',
129
+ location: 'Abu Dhabi, UAE',
130
+ price: 'AED 5,600,000',
131
+ type: 'Penthouse',
132
+ beds: 4,
133
+ baths: 4,
134
+ area: '3,800 sqft'
135
+ },
136
+ {
137
+ image: 'http://static.photos/gradient/640x360/5',
138
+ title: 'Investment Property Portfolio',
139
+ location: 'Manama, Bahrain',
140
+ price: 'BHD 850,000',
141
+ type: 'Mixed Use',
142
+ beds: 'Multiple',
143
+ baths: 'Multiple',
144
+ area: '15,000 sqft'
145
+ },
146
+ {
147
+ image: 'http://static.photos/blue/640x360/6',
148
+ title: 'Waterfront Development',
149
+ location: 'Muscat, Oman',
150
+ price: 'OMR 1,200,000',
151
+ type: 'Development',
152
+ beds: 'N/A',
153
+ baths: 'N/A',
154
+ area: '25,000 sqft'
155
+ }
156
+ ];
157
+
158
+ function loadProperties() {
159
+ const grid = document.getElementById('properties-grid');
160
+ grid.innerHTML = '';
161
+
162
+ properties.forEach(property => {
163
+ const card = document.createElement('div');
164
+ card.className = 'bg-white rounded-xl shadow-lg overflow-hidden property-card';
165
+ card.innerHTML = `
166
+ <img src="${property.image}" alt="${property.title}" class="w-full h-48 object-cover">
167
+ <div class="p-6">
168
+ <div class="flex justify-between items-start mb-2">
169
+ <h3 class="text-lg font-semibold text-gray-900">${property.title}</h3>
170
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">${property.type}</span>
171
+ </div>
172
+ <p class="text-gray-600 mb-4 flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-1"></i> ${property.location}</p>
173
+ <div class="grid grid-cols-3 gap-4 mb-4 text-center text-sm text-gray-600">
174
+ <div><i data-feather="home" class="w-4 h-4 mx-auto mb-1"></i> ${property.beds}</div>
175
+ <div><i data-feather="droplet" class="w-4 h-4 mx-auto mb-1"></i> ${property.baths}</div>
176
+ <div><i data-feather="maximize" class="w-4 h-4 mx-auto mb-1"></i> ${property.area}</div>
177
+ </div>
178
+ <div class="flex justify-between items-center">
179
+ <span class="text-xl font-bold text-blue-700">${property.price}</span>
180
+ <a href="property-details.html" class="bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-800 transition duration-300">View Details</a>
181
+ </div>
182
+ </div>
183
+ `;
184
+ grid.appendChild(card);
185
+ });
186
+
187
+ feather.replace();
188
+ }
189
+
190
+ document.addEventListener('DOMContentLoaded', loadProperties);
191
+ </script>
192
+ </body>
193
+ </html>
register.html ADDED
@@ -0,0 +1,118 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Register - PropTech Connect</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body { font-family: 'Inter', sans-serif; }
14
+ .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); }
15
+ </style>
16
+ </head>
17
+ <body class="bg-gray-50 min-h-screen flex items-center justify-center py-8">
18
+ <div class="max-w-md w-full mx-4">
19
+ <div class="bg-white rounded-2xl shadow-xl p-8">
20
+ <div class="text-center mb-8">
21
+ <div class="flex items-center justify-center mb-4">
22
+ <i data-feather="home" class="h-8 w-8 text-blue-700"></i>
23
+ <span class="ml-2 text-2xl font-bold text-gray-900">PropTech Connect</span>
24
+ </div>
25
+ <h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
26
+ <p class="text-gray-600">Join the real estate revolution</p>
27
+ </div>
28
+
29
+ <form id="registerForm" class="space-y-6">
30
+ <div class="grid grid-cols-2 gap-4">
31
+ <div>
32
+ <label for="firstName" class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
33
+ <input type="text" id="firstName" name="firstName" required
34
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700 focus:border-transparent transition duration-300"
35
+ placeholder="First name">
36
+ </div>
37
+ <div>
38
+ <label for="lastName" class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
39
+ <input type="text" id="lastName" name="lastName" required
40
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700 focus:border-transparent transition duration-300"
41
+ placeholder="Last name">
42
+ </div>
43
+ </div>
44
+
45
+ <div>
46
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
47
+ <input type="email" id="email" name="email" required
48
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700 focus:border-transparent transition duration-300"
49
+ placeholder="Enter your email">
50
+ </div>
51
+
52
+ <div>
53
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
54
+ <input type="tel" id="phone" name="phone" required
55
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700 focus:border-transparent transition duration-300"
56
+ placeholder="+971 50 123 4567">
57
+ </div>
58
+
59
+ <div>
60
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
61
+ <input type="password" id="password" name="password" required
62
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700 focus:border-transparent transition duration-300"
63
+ placeholder="Create a password">
64
+ </div>
65
+
66
+ <div>
67
+ <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-2">Confirm Password</label>
68
+ <input type="password" id="confirmPassword" name="confirmPassword" required
69
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700 focus:border-transparent transition duration-300"
70
+ placeholder="Confirm your password">
71
+ </div>
72
+
73
+ <div class="flex items-center">
74
+ <input type="checkbox" id="terms" name="terms" required
75
+ class="w-4 h-4 text-blue-700 border-gray-300 rounded focus:ring-blue-700">
76
+ <label for="terms" class="ml-2 text-sm text-gray-600">
77
+ I agree to the <a href="#" class="text-blue-700 hover:text-blue-800">Terms of Service</a> and <a href="#" class="text-blue-700 hover:text-blue-800">Privacy Policy</a>
78
+ </label>
79
+ </div>
80
+
81
+ <button type="submit"
82
+ class="w-full bg-blue-700 text-white py-3 px-4 rounded-lg font-semibold hover:bg-blue-800 transition duration-300">
83
+ Create Account
84
+ </button>
85
+ </form>
86
+
87
+ <div class="mt-6 text-center">
88
+ <p class="text-gray-600">Already have an account?
89
+ <a href="login.html" class="text-blue-700 font-semibold hover:text-blue-800">Sign in</a>
90
+ </p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <script>
96
+ document.getElementById('registerForm').addEventListener('submit', function(e) {
97
+ e.preventDefault();
98
+
99
+ const password = document.getElementById('password').value;
100
+ const confirmPassword = document.getElementById('confirmPassword').value;
101
+
102
+ if (password !== confirmPassword) {
103
+ alert('Passwords do not match');
104
+ return;
105
+ }
106
+
107
+ if (document.getElementById('terms').checked) {
108
+ // Store user session
109
+ localStorage.setItem('userLoggedIn', 'true');
110
+ localStorage.setItem('userEmail', document.getElementById('email').value);
111
+ window.location.href = 'dashboard.html';
112
+ }
113
+ });
114
+
115
+ feather.replace();
116
+ </script>
117
+ </body>
118
+ </html>