Hugging Face's logo

Spaces:
cob05
/
deepspace-autoconnect-r1
Running

App Files Community
cob05 commited on
Commit
ea9a81c
·
verified ·
1 Parent(s): 02cc03f

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +707 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepspace Autoconnect R1
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: blue
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: deepspace-autoconnect-r1
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,707 @@
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>AutoConnect - Social Network for Car Enthusiasts</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
+ <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Racing+Sans+One&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ 'carbg': '#0a0a0a',
16
+ 'cardark': '#121212',
17
+ 'carbrand': '#ff3e00',
18
+ 'carbrand-dark': '#cc3200',
19
+ 'carsecondary': '#00a8ff',
20
+ 'carlight': '#e0e0e0'
21
+ },
22
+ fontFamily: {
23
+ 'heading': ['Racing Sans One', 'sans-serif'],
24
+ 'body': ['Exo 2', 'sans-serif']
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ body {
32
+ background: linear-gradient(to bottom, #0a0a0a, #121212);
33
+ min-height: 100vh;
34
+ color: #e0e0e0;
35
+ font-family: 'Exo 2', sans-serif;
36
+ }
37
+
38
+ .card-hover {
39
+ transition: all 0.3s ease;
40
+ transform: translateY(0);
41
+ }
42
+
43
+ .card-hover:hover {
44
+ transform: translateY(-5px);
45
+ box-shadow: 0 10px 25px rgba(255, 62, 0, 0.2);
46
+ }
47
+
48
+ .post-image {
49
+ height: 300px;
50
+ object-fit: cover;
51
+ transition: transform 0.3s ease;
52
+ }
53
+
54
+ .post-image:hover {
55
+ transform: scale(1.03);
56
+ }
57
+
58
+ .brand-gradient {
59
+ background: linear-gradient(45deg, #ff3e00, #ff7b00);
60
+ -webkit-background-clip: text;
61
+ -webkit-text-fill-color: transparent;
62
+ }
63
+
64
+ .nav-link {
65
+ position: relative;
66
+ padding-bottom: 5px;
67
+ }
68
+
69
+ .nav-link::after {
70
+ content: '';
71
+ position: absolute;
72
+ bottom: 0;
73
+ left: 0;
74
+ width: 0;
75
+ height: 2px;
76
+ background: #ff3e00;
77
+ transition: width 0.3s ease;
78
+ }
79
+
80
+ .nav-link:hover::after {
81
+ width: 100%;
82
+ }
83
+
84
+ .btn-primary {
85
+ background: linear-gradient(45deg, #ff3e00, #ff7b00);
86
+ transition: all 0.3s ease;
87
+ }
88
+
89
+ .btn-primary:hover {
90
+ transform: translateY(-2px);
91
+ box-shadow: 0 4px 15px rgba(255, 62, 0, 0.4);
92
+ }
93
+
94
+ .trending-car {
95
+ transition: all 0.3s ease;
96
+ }
97
+
98
+ .trending-car:hover {
99
+ transform: scale(1.05);
100
+ }
101
+
102
+ .like-btn:hover {
103
+ color: #ff3e00;
104
+ }
105
+
106
+ .comment-btn:hover {
107
+ color: #00a8ff;
108
+ }
109
+
110
+ .share-btn:hover {
111
+ color: #00ff9d;
112
+ }
113
+
114
+ .speedometer {
115
+ position: relative;
116
+ width: 100px;
117
+ height: 100px;
118
+ border-radius: 50%;
119
+ background: #121212;
120
+ border: 3px solid #ff3e00;
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ overflow: hidden;
125
+ }
126
+
127
+ .speedometer::before {
128
+ content: '';
129
+ position: absolute;
130
+ width: 50%;
131
+ height: 3px;
132
+ background: #ff3e00;
133
+ transform-origin: right;
134
+ transform: rotate(45deg);
135
+ top: 50%;
136
+ left: 0;
137
+ }
138
+
139
+ .speedometer::after {
140
+ content: '';
141
+ position: absolute;
142
+ width: 50%;
143
+ height: 3px;
144
+ background: #ff3e00;
145
+ transform-origin: right;
146
+ transform: rotate(-45deg);
147
+ top: 50%;
148
+ left: 0;
149
+ }
150
+
151
+ .speed-value {
152
+ position: relative;
153
+ z-index: 2;
154
+ font-weight: bold;
155
+ font-size: 1.2rem;
156
+ color: #ff3e00;
157
+ }
158
+
159
+ .speed-label {
160
+ position: absolute;
161
+ bottom: 10px;
162
+ font-size: 0.7rem;
163
+ color: #e0e0e0;
164
+ }
165
+
166
+ .notification-dot {
167
+ position: absolute;
168
+ top: -5px;
169
+ right: -5px;
170
+ width: 20px;
171
+ height: 20px;
172
+ border-radius: 50%;
173
+ background: #ff3e00;
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ font-size: 0.7rem;
178
+ font-weight: bold;
179
+ }
180
+
181
+ .search-box {
182
+ background: rgba(255,255,255,0.1);
183
+ border: 1px solid rgba(255,255,255,0.1);
184
+ transition: all 0.3s ease;
185
+ }
186
+
187
+ .search-box:focus {
188
+ background: rgba(255,255,255,0.15);
189
+ border: 1px solid #ff3e00;
190
+ box-shadow: 0 0 10px rgba(255,62,0,0.3);
191
+ }
192
+
193
+ .trending-card {
194
+ background: rgba(255,255,255,0.05);
195
+ border: 1px solid rgba(255,255,255,0.1);
196
+ transition: all 0.3s ease;
197
+ }
198
+
199
+ .trending-card:hover {
200
+ background: rgba(255,255,255,0.08);
201
+ border: 1px solid rgba(255,62,0,0.3);
202
+ }
203
+ </style>
204
+ </head>
205
+ <body class="bg-carbg">
206
+ <!-- Navigation Bar -->
207
+ <nav class="bg-cardark border-b border-gray-800 sticky top-0 z-50">
208
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
209
+ <div class="flex justify-between h-16">
210
+ <div class="flex items-center">
211
+ <a href="#" class="flex items-center">
212
+ <div class="flex-shrink-0 flex items-center">
213
+ <i class="fas fa-car text-carbrand text-3xl mr-2"></i>
214
+ <span class="text-2xl font-heading text-white">AUTO<span class="brand-gradient">CONNECT</span></span>
215
+ </div>
216
+ </a>
217
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
218
+ <a href="#" class="nav-link text-white px-3 py-2 text-sm font-medium">Home</a>
219
+ <a href="#" class="nav-link text-gray-400 hover:text-white px-3 py-2 text-sm font-medium">Explore</a>
220
+ <a href="#" class="nav-link text-gray-400 hover:text-white px-3 py-2 text-sm font-medium">Garage</a>
221
+ <a href="#" class="nav-link text-gray-400 hover:text-white px-3 py-2 text-sm font-medium">Events</a>
222
+ <a href="#" class="nav-link text-gray-400 hover:text-white px-3 py-2 text-sm font-medium">Groups</a>
223
+ </div>
224
+ </div>
225
+ <div class="flex items-center">
226
+ <div class="flex-shrink-0 relative mr-4">
227
+ <div class="relative">
228
+ <input type="text" placeholder="Search cars, parts, users..." class="search-box rounded-full py-2 px-4 text-white w-64 focus:outline-none">
229
+ <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
230
+ </div>
231
+ </div>
232
+ <div class="flex items-center">
233
+ <div class="flex-shrink-0 relative mr-4">
234
+ <button class="relative p-1 text-gray-400 hover:text-white">
235
+ <i class="fas fa-bell text-xl"></i>
236
+ <span class="notification-dot">3</span>
237
+ </button>
238
+ </div>
239
+ <div class="flex-shrink-0 relative mr-4">
240
+ <button class="relative p-1 text-gray-400 hover:text-white">
241
+ <i class="fas fa-envelope text-xl"></i>
242
+ <span class="notification-dot">5</span>
243
+ </button>
244
+ </div>
245
+ <div class="ml-3 relative">
246
+ <div class="flex items-center">
247
+ <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile">
248
+ <span class="ml-2 text-white text-sm hidden md:block">Mike Johnson</span>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </nav>
256
+
257
+ <!-- Main Content -->
258
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
259
+ <div class="flex flex-col lg:flex-row gap-8">
260
+ <!-- Left Sidebar -->
261
+ <div class="lg:w-1/4 flex flex-col gap-6">
262
+ <!-- User Profile Card -->
263
+ <div class="bg-cardark rounded-xl p-6 shadow-lg">
264
+ <div class="flex flex-col items-center">
265
+ <img class="h-24 w-24 rounded-full object-cover border-2 border-carbrand" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile">
266
+ <h3 class="mt-4 text-xl font-bold text-white">Mike Johnson</h3>
267
+ <p class="text-gray-400 text-sm">@speedracer</p>
268
+ <div class="mt-4 flex justify-center gap-4">
269
+ <div class="text-center">
270
+ <p class="text-white font-bold">24</p>
271
+ <p class="text-gray-400 text-xs">Posts</p>
272
+ </div>
273
+ <div class="text-center">
274
+ <p class="text-white font-bold">187</p>
275
+ <p class="text-gray-400 text-xs">Followers</p>
276
+ </div>
277
+ <div class="text-center">
278
+ <p class="text-white font-bold">56</p>
279
+ <p class="text-gray-400 text-xs">Following</p>
280
+ </div>
281
+ </div>
282
+ <div class="mt-6 w-full">
283
+ <button class="btn-primary w-full py-2 rounded-lg font-bold text-white">Edit Profile</button>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Trending Cars -->
289
+ <div class="bg-cardark rounded-xl p-6 shadow-lg">
290
+ <h3 class="text-lg font-bold text-white mb-4">Trending Cars</h3>
291
+ <div class="space-y-4">
292
+ <div class="trending-card rounded-lg p-3 flex items-center cursor-pointer">
293
+ <div class="bg-gray-700 rounded-lg w-16 h-16 flex items-center justify-center">
294
+ <i class="fas fa-car text-carbrand text-2xl"></i>
295
+ </div>
296
+ <div class="ml-4">
297
+ <h4 class="text-white font-medium">Porsche 911 GT3</h4>
298
+ <p class="text-gray-400 text-sm">+245 posts today</p>
299
+ </div>
300
+ </div>
301
+ <div class="trending-card rounded-lg p-3 flex items-center cursor-pointer">
302
+ <div class="bg-gray-700 rounded-lg w-16 h-16 flex items-center justify-center">
303
+ <i class="fas fa-car text-carbrand text-2xl"></i>
304
+ </div>
305
+ <div class="ml-4">
306
+ <h4 class="text-white font-medium">Toyota Supra MK4</h4>
307
+ <p class="text-gray-400 text-sm">+189 posts today</p>
308
+ </div>
309
+ </div>
310
+ <div class="trending-card rounded-lg p-3 flex items-center cursor-pointer">
311
+ <div class="bg-gray-700 rounded-lg w-16 h-16 flex items-center justify-center">
312
+ <i class="fas fa-car text-carbrand text-2xl"></i>
313
+ </div>
314
+ <div class="ml-4">
315
+ <h4 class="text-white font-medium">Ford Mustang GT</h4>
316
+ <p class="text-gray-400 text-sm">+167 posts today</p>
317
+ </div>
318
+ </div>
319
+ <div class="trending-card rounded-lg p-3 flex items-center cursor-pointer">
320
+ <div class="bg-gray-700 rounded-lg w-16 h-16 flex items-center justify-center">
321
+ <i class="fas fa-car text-carbrand text-2xl"></i>
322
+ </div>
323
+ <div class="ml-4">
324
+ <h4 class="text-white font-medium">BMW M3 GTR</h4>
325
+ <p class="text-gray-400 text-sm">+132 posts today</p>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <button class="mt-4 w-full py-2 rounded-lg border border-carbrand text-carbrand font-bold hover:bg-carbrand hover:text-white transition">View All</button>
330
+ </div>
331
+
332
+ <!-- Upcoming Events -->
333
+ <div class="bg-cardark rounded-xl p-6 shadow-lg">
334
+ <h3 class="text-lg font-bold text-white mb-4">Upcoming Events</h3>
335
+ <div class="space-y-4">
336
+ <div class="bg-gray-800 rounded-lg p-3">
337
+ <div class="flex justify-between items-center">
338
+ <span class="text-carbrand font-bold">JUL 28</span>
339
+ <span class="text-gray-400 text-sm">Los Angeles</span>
340
+ </div>
341
+ <h4 class="text-white font-medium mt-2">Supercar Sunday Meetup</h4>
342
+ <p class="text-gray-400 text-sm mt-1">8:00 AM - 12:00 PM</p>
343
+ <div class="mt-3 flex items-center">
344
+ <div class="flex -space-x-2">
345
+ <img class="w-8 h-8 rounded-full border-2 border-cardark" src="https://randomuser.me/api/portraits/men/41.jpg" alt="">
346
+ <img class="w-8 h-8 rounded-full border-2 border-cardark" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
347
+ <img class="w-8 h-8 rounded-full border-2 border-cardark" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
348
+ </div>
349
+ <span class="ml-2 text-gray-400 text-sm">+42 attending</span>
350
+ </div>
351
+ </div>
352
+ <div class="bg-gray-800 rounded-lg p-3">
353
+ <div class="flex justify-between items-center">
354
+ <span class="text-carbrand font-bold">AUG 12</span>
355
+ <span class="text-gray-400 text-sm">Las Vegas</span>
356
+ </div>
357
+ <h4 class="text-white font-medium mt-2">Drag Racing Championship</h4>
358
+ <p class="text-gray-400 text-sm mt-1">3:00 PM - 10:00 PM</p>
359
+ <div class="mt-3 flex items-center">
360
+ <div class="flex -space-x-2">
361
+ <img class="w-8 h-8 rounded-full border-2 border-cardark" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
362
+ <img class="w-8 h-8 rounded-full border-2 border-cardark" src="https://randomuser.me/api/portraits/men/28.jpg" alt="">
363
+ <img class="w-8 h-8 rounded-full border-2 border-cardark" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
364
+ </div>
365
+ <span class="ml-2 text-gray-400 text-sm">+68 attending</span>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Main Feed -->
373
+ <div class="lg:w-2/4 flex flex-col gap-6">
374
+ <!-- Create Post -->
375
+ <div class="bg-cardark rounded-xl p-6 shadow-lg">
376
+ <div class="flex">
377
+ <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile">
378
+ <input type="text" placeholder="What's in your garage today?" class="ml-4 bg-gray-800 rounded-full px-4 py-2 text-white w-full focus:outline-none focus:ring-1 focus:ring-carbrand">
379
+ </div>
380
+ <div class="flex justify-between mt-4">
381
+ <div class="flex gap-4">
382
+ <button class="flex items-center text-gray-400 hover:text-carbrand">
383
+ <i class="fas fa-image mr-2"></i> Photo
384
+ </button>
385
+ <button class="flex items-center text-gray-400 hover:text-carsecondary">
386
+ <i class="fas fa-video mr-2"></i> Video
387
+ </button>
388
+ <button class="flex items-center text-gray-400 hover:text-green-400">
389
+ <i class="fas fa-calendar mr-2"></i> Event
390
+ </button>
391
+ </div>
392
+ <button class="btn-primary px-4 py-1 rounded-full font-bold">Post</button>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Post 1 -->
397
+ <div class="bg-cardark rounded-xl p-6 shadow-lg card-hover">
398
+ <div class="flex justify-between">
399
+ <div class="flex">
400
+ <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
401
+ <div class="ml-3">
402
+ <h4 class="text-white font-bold">Sarah Miller</h4>
403
+ <p class="text-gray-400 text-sm">Posted 3 hours ago</p>
404
+ </div>
405
+ </div>
406
+ <button class="text-gray-400 hover:text-white">
407
+ <i class="fas fa-ellipsis-h"></i>
408
+ </button>
409
+ </div>
410
+ <p class="mt-4 text-white">Just finished installing the new turbo kit on my Nissan GT-R! Can't wait to hit the track this weekend. 🏁 #Nissan #GTR #Turbo #TrackDay</p>
411
+ <div class="mt-4 grid grid-cols-2 gap-2">
412
+ <img src="https://images.unsplash.com/photo-1514867644123-6385d58d3cd4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Car" class="post-image rounded-lg">
413
+ <img src="https://images.unsplash.com/photo-1617814076367-b759c7d7e738?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Engine" class="post-image rounded-lg">
414
+ </div>
415
+ <div class="mt-4 flex justify-between">
416
+ <div class="flex items-center">
417
+ <span class="text-gray-400 mr-2"><i class="fas fa-heart text-carbrand"></i> 124</span>
418
+ <span class="text-gray-400"><i class="fas fa-comment ml-4 text-carsecondary"></i> 24</span>
419
+ </div>
420
+ <span class="text-gray-400"><i class="fas fa-share"></i> Share</span>
421
+ </div>
422
+ <div class="mt-4 flex gap-4 border-t border-gray-800 pt-4">
423
+ <button class="like-btn flex items-center text-gray-400 hover:text-carbrand">
424
+ <i class="fas fa-heart mr-2"></i> Like
425
+ </button>
426
+ <button class="comment-btn flex items-center text-gray-400 hover:text-carsecondary">
427
+ <i class="fas fa-comment mr-2"></i> Comment
428
+ </button>
429
+ <button class="share-btn flex items-center text-gray-400 hover:text-green-400">
430
+ <i class="fas fa-share mr-2"></i> Share
431
+ </button>
432
+ </div>
433
+ </div>
434
+
435
+ <!-- Post 2 -->
436
+ <div class="bg-cardark rounded-xl p-6 shadow-lg card-hover">
437
+ <div class="flex justify-between">
438
+ <div class="flex">
439
+ <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile">
440
+ <div class="ml-3">
441
+ <h4 class="text-white font-bold">Alex Turner</h4>
442
+ <p class="text-gray-400 text-sm">Posted 5 hours ago</p>
443
+ </div>
444
+ </div>
445
+ <button class="text-gray-400 hover:text-white">
446
+ <i class="fas fa-ellipsis-h"></i>
447
+ </button>
448
+ </div>
449
+ <p class="mt-4 text-white">My restored '69 Camaro SS just won Best in Show at the Classic Car Expo! All those late nights in the garage paid off. 😎 #ClassicCars #Camaro #Restoration</p>
450
+ <div class="mt-4">
451
+ <img src="https://images.unsplash.com/photo-1550355291-bbee04a92027?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Car" class="post-image w-full rounded-lg">
452
+ </div>
453
+ <div class="mt-4 flex justify-between">
454
+ <div class="flex items-center">
455
+ <span class="text-gray-400 mr-2"><i class="fas fa-heart text-carbrand"></i> 89</span>
456
+ <span class="text-gray-400"><i class="fas fa-comment ml-4 text-carsecondary"></i> 17</span>
457
+ </div>
458
+ <span class="text-gray-400"><i class="fas fa-share"></i> Share</span>
459
+ </div>
460
+ <div class="mt-4 flex gap-4 border-t border-gray-800 pt-4">
461
+ <button class="like-btn flex items-center text-gray-400 hover:text-carbrand">
462
+ <i class="fas fa-heart mr-2"></i> Like
463
+ </button>
464
+ <button class="comment-btn flex items-center text-gray-400 hover:text-carsecondary">
465
+ <i class="fas fa-comment mr-2"></i> Comment
466
+ </button>
467
+ <button class="share-btn flex items-center text-gray-400 hover:text-green-400">
468
+ <i class="fas fa-share mr-2"></i> Share
469
+ </button>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Post 3 -->
474
+ <div class="bg-cardark rounded-xl p-6 shadow-lg card-hover">
475
+ <div class="flex justify-between">
476
+ <div class="flex">
477
+ <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Profile">
478
+ <div class="ml-3">
479
+ <h4 class="text-white font-bold">James Wilson</h4>
480
+ <p class="text-gray-400 text-sm">Posted 8 hours ago</p>
481
+ </div>
482
+ </div>
483
+ <button class="text-gray-400 hover:text-white">
484
+ <i class="fas fa-ellipsis-h"></i>
485
+ </button>
486
+ </div>
487
+ <p class="mt-4 text-white">Just picked up this beauty - 2023 Porsche 911 GT3 Touring. The perfect blend of luxury and performance. Any Porsche owners in the LA area?</p>
488
+ <div class="mt-4">
489
+ <img src="https://images.unsplash.com/photo-1601924994987-44e0a4597c6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Car" class="post-image w-full rounded-lg">
490
+ </div>
491
+ <div class="mt-4 flex justify-between">
492
+ <div class="flex items-center">
493
+ <span class="text-gray-400 mr-2"><i class="fas fa-heart text-carbrand"></i> 212</span>
494
+ <span class="text-gray-400"><i class="fas fa-comment ml-4 text-carsecondary"></i> 43</span>
495
+ </div>
496
+ <span class="text-gray-400"><i class="fas fa-share"></i> Share</span>
497
+ </div>
498
+ <div class="mt-4 flex gap-4 border-t border-gray-800 pt-4">
499
+ <button class="like-btn flex items-center text-gray-400 hover:text-carbrand">
500
+ <i class="fas fa-heart mr-2"></i> Like
501
+ </button>
502
+ <button class="comment-btn flex items-center text-gray-400 hover:text-carsecondary">
503
+ <i class="fas fa-comment mr-2"></i> Comment
504
+ </button>
505
+ <button class="share-btn flex items-center text-gray-400 hover:text-green-400">
506
+ <i class="fas fa-share mr-2"></i> Share
507
+ </button>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Right Sidebar -->
513
+ <div class="lg:w-1/4 flex flex-col gap-6">
514
+ <!-- Community Stats -->
515
+ <div class="bg-cardark rounded-xl p-6 shadow-lg">
516
+ <h3 class="text-lg font-bold text-white mb-4">Community Stats</h3>
517
+ <div class="space-y-4">
518
+ <div class="flex justify-between">
519
+ <div class="flex items-center">
520
+ <div class="bg-gray-800 p-2 rounded-lg">
521
+ <i class="fas fa-users text-carsecondary"></i>
522
+ </div>
523
+ <div class="ml-3">
524
+ <p class="text-gray-400 text-sm">Members</p>
525
+ <p class="text-white font-bold">24,589</p>
526
+ </div>
527
+ </div>
528
+ <div class="flex items-center">
529
+ <div class="bg-gray-800 p-2 rounded-lg">
530
+ <i class="fas fa-car text-carbrand"></i>
531
+ </div>
532
+ <div class="ml-3">
533
+ <p class="text-gray-400 text-sm">Cars</p>
534
+ <p class="text-white font-bold">18,742</p>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ <div class="flex justify-between">
539
+ <div class="flex items-center">
540
+ <div class="bg-gray-800 p-2 rounded-lg">
541
+ <i class="fas fa-comments text-green-400"></i>
542
+ </div>
543
+ <div class="ml-3">
544
+ <p class="text-gray-400 text-sm">Posts</p>
545
+ <p class="text-white font-bold">42,367</p>
546
+ </div>
547
+ </div>
548
+ <div class="flex items-center">
549
+ <div class="bg-gray-800 p-2 rounded-lg">
550
+ <i class="fas fa-calendar-day text-yellow-400"></i>
551
+ </div>
552
+ <div class="ml-3">
553
+ <p class="text-gray-400 text-sm">Events</p>
554
+ <p class="text-white font-bold">187</p>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- Popular Groups -->
562
+ <div class="bg-cardark rounded-xl p-6 shadow-lg">
563
+ <h3 class="text-lg font-bold text-white mb-4">Popular Groups</h3>
564
+ <div class="space-y-4">
565
+ <div class="trending-card rounded-lg p-3 flex items-center cursor-pointer">
566
+ <div class="bg-gradient-to-br from-carbrand to-orange-500 rounded-lg w-12 h-12 flex items-center justify-center">
567
+ <i class="fas fa-bolt text-white"></i>
568
+ </div>
569
+ <div class="ml-4">
570
+ <h4 class="text-white font-medium">Electric Vehicle Enthusiasts</h4>
571
+ <p class="text-gray-400 text-sm">8.4k members</p>
572
+ </div>
573
+ </div>
574
+ <div class="trending-card rounded-lg p-3 flex items-center cursor-pointer">
575
+ <div class="bg-gradient-to-br from-blue-500 to-carsecondary rounded-lg w-12 h-12 flex items-center justify-center">
576
+ <i class="fas fa-wrench text-white"></i>
577
+ </div>
578
+ <div class="ml-4">
579
+ <h4 class="text-white font-medium">DIY Mechanics</h4>
580
+ <p class="text-gray-400 text-sm">12.7k members</p>
581
+ </div>
582
+ </div>
583
+ <div class="trending-card rounded-lg p-3 flex items-center cursor-pointer">
584
+ <div class="bg-gradient-to-br from-yellow-500 to-red-500 rounded-lg w-12 h-12 flex items-center justify-center">
585
+ <i class="fas fa-flag-checkered text-white"></i>
586
+ </div>
587
+ <div class="ml-4">
588
+ <h4 class="text-white font-medium">Track Day Warriors</h4>
589
+ <p class="text-gray-400 text-sm">6.3k members</p>
590
+ </div>
591
+ </div>
592
+ <div class="trending-card rounded-lg p-3 flex items-center cursor-pointer">
593
+ <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg w-12 h-12 flex items-center justify-center">
594
+ <i class="fas fa-car-side text-white"></i>
595
+ </div>
596
+ <div class="ml-4">
597
+ <h4 class="text-white font-medium">JDM Legends</h4>
598
+ <p class="text-gray-400 text-sm">15.2k members</p>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Performance Leaderboard -->
605
+ <div class="bg-cardark rounded-xl p-6 shadow-lg">
606
+ <h3 class="text-lg font-bold text-white mb-4">Performance Leaderboard</h3>
607
+ <div class="space-y-4">
608
+ <div class="flex justify-between items-center p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
609
+ <div class="flex items-center">
610
+ <span class="text-carbrand font-bold mr-3">1</span>
611
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/41.jpg" alt="Profile">
612
+ <div class="ml-3">
613
+ <h4 class="text-white text-sm font-medium">Robert Chen</h4>
614
+ <p class="text-gray-400 text-xs">Porsche 911 Turbo S</p>
615
+ </div>
616
+ </div>
617
+ <div class="speedometer">
618
+ <div class="speed-value">7:12</div>
619
+ <div class="speed-label">Nürburgring</div>
620
+ </div>
621
+ </div>
622
+ <div class="flex justify-between items-center p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
623
+ <div class="flex items-center">
624
+ <span class="text-carbrand font-bold mr-3">2</span>
625
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Profile">
626
+ <div class="ml-3">
627
+ <h4 class="text-white text-sm font-medium">Lisa Rodriguez</h4>
628
+ <p class="text-gray-400 text-xs">McLaren 720S</p>
629
+ </div>
630
+ </div>
631
+ <div class="speedometer">
632
+ <div class="speed-value">7:18</div>
633
+ <div class="speed-label">Nürburgring</div>
634
+ </div>
635
+ </div>
636
+ <div class="flex justify-between items-center p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
637
+ <div class="flex items-center">
638
+ <span class="text-carbrand font-bold mr-3">3</span>
639
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Profile">
640
+ <div class="ml-3">
641
+ <h4 class="text-white text-sm font-medium">David Kim</h4>
642
+ <p class="text-gray-400 text-xs">Ferrari 488 Pista</p>
643
+ </div>
644
+ </div>
645
+ <div class="speedometer">
646
+ <div class="speed-value">7:24</div>
647
+ <div class="speed-label">Nürburgring</div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+
656
+ <!-- Footer -->
657
+ <footer class="bg-cardark border-t border-gray-800 mt-12">
658
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
659
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
660
+ <div>
661
+ <h3 class="text-white font-bold text-lg mb-4">AutoConnect</h3>
662
+ <p class="text-gray-400">The ultimate social network for car enthusiasts. Share your passion, connect with fellow gearheads, and showcase your rides.</p>
663
+ <div class="flex mt-4 space-x-4">
664
+ <a href="#" class="text-gray-400 hover:text-carbrand"><i class="fab fa-facebook-f"></i></a>
665
+ <a href="#" class="text-gray-400 hover:text-carbrand"><i class="fab fa-twitter"></i></a>
666
+ <a href="#" class="text-gray-400 hover:text-carbrand"><i class="fab fa-instagram"></i></a>
667
+ <a href="#" class="text-gray-400 hover:text-carbrand"><i class="fab fa-youtube"></i></a>
668
+ </div>
669
+ </div>
670
+ <div>
671
+ <h3 class="text-white font-bold text-lg mb-4">Quick Links</h3>
672
+ <ul class="space-y-2">
673
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
674
+ <li><a href="#" class="text-gray-400 hover:text-white">Garage</a></li>
675
+ <li><a href="#" class="text-gray-400 hover:text-white">Events Calendar</a></li>
676
+ <li><a href="#" class="text-gray-400 hover:text-white">Car Marketplace</a></li>
677
+ <li><a href="#" class="text-gray-400 hover:text-white">Forums</a></li>
678
+ </ul>
679
+ </div>
680
+ <div>
681
+ <h3 class="text-white font-bold text-lg mb-4">Resources</h3>
682
+ <ul class="space-y-2">
683
+ <li><a href="#" class="text-gray-400 hover:text-white">Car Reviews</a></li>
684
+ <li><a href="#" class="text-gray-400 hover:text-white">Maintenance Guides</a></li>
685
+ <li><a href="#" class="text-gray-400 hover:text-white">Performance Mods</a></li>
686
+ <li><a href="#" class="text-gray-400 hover:text-white">Car Shows</a></li>
687
+ <li><a href="#" class="text-gray-400 hover:text-white">Track Days</a></li>
688
+ </ul>
689
+ </div>
690
+ <div>
691
+ <h3 class="text-white font-bold text-lg mb-4">Newsletter</h3>
692
+ <p class="text-gray-400">Subscribe to get the latest car news and event updates.</p>
693
+ <div class="mt-4">
694
+ <div class="flex">
695
+ <input type="email" placeholder="Your email" class="bg-gray-800 text-white rounded-l-lg px-4 py-2 w-full focus:outline-none focus:ring-1 focus:ring-carbrand">
696
+ <button class="btn-primary rounded-r-lg px-4"><i class="fas fa-paper-plane"></i></button>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-400">
702
+ <p>© 2023 AutoConnect. All rights reserved. Designed for car enthusiasts by car enthusiasts.</p>
703
+ </div>
704
+ </div>
705
+ </footer>
706
+ <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=cob05/deepspace-autoconnect-r1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
707
+ </html>