Hugging Face's logo

Spaces:
tdub21
/
pixel-perfect-pit-stops
Running

App Files Community
tdub21 commited on
Commit
fca9012
·
verified ·
1 Parent(s): 58f0824

DOSNT WORK

Browse files
Files changed (4) hide show
  1. cars.html +1 -1
  2. community.html +235 -0
  3. index.html +1 -1
  4. tracks.html +2 -2
cars.html CHANGED
@@ -32,7 +32,7 @@
32
  <a href="index.html" class="hover:text-red-400 transition">Home</a>
33
  <a href="cars.html" class="text-red-400">Cars</a>
34
  <a href="tracks.html" class="hover:text-red-400 transition">Tracks</a>
35
- <a href="#" class="hover:text-red-400 transition">Community</a>
36
  </nav>
37
  <button class="md:hidden">
38
  <i data-feather="menu" class="w-6 h-6"></i>
 
32
  <a href="index.html" class="hover:text-red-400 transition">Home</a>
33
  <a href="cars.html" class="text-red-400">Cars</a>
34
  <a href="tracks.html" class="hover:text-red-400 transition">Tracks</a>
35
+ <a href="community.html" class="hover:text-red-400 transition">Community</a>
36
  </nav>
37
  <button class="md:hidden">
38
  <i data-feather="menu" class="w-6 h-6"></i>
community.html ADDED
@@ -0,0 +1,235 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Community - Racer's Edge</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://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .community-card:hover {
13
+ transform: translateY(-5px);
14
+ box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.1), 0 10px 10px -5px rgba(239, 68, 68, 0.04);
15
+ }
16
+ .filter-active {
17
+ background-color: #ef4444;
18
+ color: white;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-900 text-white">
23
+ <div class="min-h-screen flex flex-col">
24
+ <!-- Header -->
25
+ <header class="py-6 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-70 backdrop-blur-sm">
26
+ <div class="flex justify-between items-center">
27
+ <div class="flex items-center">
28
+ <i data-feather="flag" class="w-8 h-8 text-red-500 mr-3"></i>
29
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-red-500 to-yellow-500 bg-clip-text text-transparent">Racer's Edge</h1>
30
+ </div>
31
+ <nav class="hidden md:flex space-x-8">
32
+ <a href="index.html" class="hover:text-red-400 transition">Home</a>
33
+ <a href="cars.html" class="hover:text-red-400 transition">Cars</a>
34
+ <a href="tracks.html" class="hover:text-red-400 transition">Tracks</a>
35
+ <a href="community.html" class="text-red-400">Community</a>
36
+ </nav>
37
+ <button class="md:hidden">
38
+ <i data-feather="menu" class="w-6 h-6"></i>
39
+ </button>
40
+ </div>
41
+ </header>
42
+
43
+ <!-- Main Content -->
44
+ <main class="container mx-auto px-4 py-16 flex-grow">
45
+ <div class="mb-12">
46
+ <h1 class="text-4xl font-bold mb-6">Community</h1>
47
+ <p class="text-gray-300 max-w-3xl">Join our growing community of sim racers. Share setups, get feedback, and improve your lap times together.</p>
48
+ </div>
49
+
50
+ <!-- Community Stats -->
51
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
52
+ <div class="bg-gray-800 rounded-lg p-6 text-center">
53
+ <i data-feather="users" class="w-10 h-10 mx-auto mb-4 text-red-500"></i>
54
+ <h3 class="text-2xl font-bold mb-2">5,247</h3>
55
+ <p class="text-sm text-gray-300">Active Members</p>
56
+ </div>
57
+ <div class="bg-gray-800 rounded-lg p-6 text-center">
58
+ <i data-feather="download" class="w-10 h-10 mx-auto mb-4 text-red-500"></i>
59
+ <h3 class="text-2xl font-bold mb-2">12,896</h3>
60
+ <p class="text-sm text-gray-300">Setups Downloaded</p>
61
+ </div>
62
+ <div class="bg-gray-800 rounded-lg p-6 text-center">
63
+ <i data-feather="star" class="w-10 h-10 mx-auto mb-4 text-red-500"></i>
64
+ <h3 class="text-2xl font-bold mb-2">4.8</h3>
65
+ <p class="text-sm text-gray-300">Average Rating</p>
66
+ </div>
67
+ <div class="bg-gray-800 rounded-lg p-6 text-center">
68
+ <i data-feather="message-circle" class="w-10 h-10 mx-auto mb-4 text-red-500"></i>
69
+ <h3 class="text-2xl font-bold mb-2">347</h3>
70
+ <p class="text-sm text-gray-300">Active Discussions</p>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Recent Discussions -->
75
+ <section class="mb-12">
76
+ <h2 class="text-3xl font-bold mb-8">Recent Discussions</h2>
77
+ <div class="space-y-4">
78
+ <!-- Discussion 1 -->
79
+ <div class="bg-gray-800 rounded-lg p-6 community-card transition duration-300">
80
+ <div class="flex items-start justify-between">
81
+ <div class="flex-1">
82
+ <h3 class="text-xl font-bold mb-2">Best Monza setup for Ferrari 488 GT3?</h3>
83
+ <p class="text-gray-300 mb-4">Looking for a stable Monza setup that can handle the heavy braking zones while maintaining good top speed.</p>
84
+ <div class="flex items-center text-sm text-gray-400">
85
+ <img src="http://static.photos/people/40x40/1" alt="User" class="w-6 h-6 rounded-full mr-2">
86
+ <span>SimRacer42</span>
87
+ <span class="mx-2">•</span>
88
+ <span>3 hours ago</span>
89
+ <span class="mx-2">•</span>
90
+ <span>12 replies</span>
91
+ </div>
92
+ </div>
93
+ <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
94
+ </div>
95
+ </div>
96
+ <!-- Discussion 2 -->
97
+ <div class="bg-gray-800 rounded-lg p-6 community-card transition duration-300">
98
+ <div class="flex items-start justify-between">
99
+ <div class="flex-1">
100
+ <h3 class="text-xl font-bold mb-2">Spa wet weather setups</h3>
101
+ <p class="text-gray-300 mb-4">Need help with wet weather configurations for Spa. My current setup feels too loose in the rain.</p>
102
+ <div class="flex items-center text-sm text-gray-400">
103
+ <img src="http://static.photos/people/40x40/2" alt="User" class="w-6 h-6 rounded-full mr-2">
104
+ <span>TrackMasterPro</span>
105
+ <span class="mx-2">•</span>
106
+ <span>5 hours ago</span>
107
+ <span class="mx-2">•</span>
108
+ <span>8 replies</span>
109
+ </div>
110
+ </div>
111
+ <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
112
+ </div>
113
+ </div>
114
+ <!-- Discussion 3 -->
115
+ <div class="bg-gray-800 rounded-lg p-6 community-card transition duration-300">
116
+ <div class="flex items-start justify-between">
117
+ <div class="flex-1">
118
+ <h3 class="text-xl font-bold mb-2">BMW M4 GT4 vs Porsche 718 GT4 comparison</h3>
119
+ <p class="text-gray-300 mb-4">Detailed analysis of both GT4 cars including strengths, weaknesses, and optimal track types.</p>
120
+ <div class="flex items-center text-sm text-gray-400">
121
+ <img src="http://static.photos/people/40x40/3" alt="User" class="w-6 h-6 rounded-full mr-2">
122
+ <span>GT4Enthusiast</span>
123
+ <span class="mx-2">•</span>
124
+ <span>1 day ago</span>
125
+ <span class="mx-2">•</span>
126
+ <span>23 replies</span>
127
+ </div>
128
+ </div>
129
+ <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded-full">GT4</span>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </section>
134
+
135
+ <!-- Top Contributors -->
136
+ <section class="mb-12">
137
+ <h2 class="text-3xl font-bold mb-8">Top Contributors</h2>
138
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
139
+ <!-- Contributor 1 -->
140
+ <div class="bg-gray-800 rounded-lg p-6 text-center community-card transition duration-300">
141
+ <img src="http://static.photos/people/80x80/4" alt="Contributor" class="w-20 h-20 rounded-full mx-auto mb-4">
142
+ <h3 class="text-xl font-bold mb-2">SimSetupMaster</h3>
143
+ <p class="text-gray-300 mb-4">Specializes in Porsche setups with 142 shared configurations</p>
144
+ <div class="flex justify-center items-center text-yellow-400">
145
+ <i data-feather="star" class="w-4 h-4 mr-1"></i>
146
+ <span class="text-sm">4.9 rating</span>
147
+ </div>
148
+ <div class="flex justify-center space-x-2">
149
+ <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">Expert</span>
150
+ </div>
151
+ </div>
152
+ <!-- Contributor 2 -->
153
+ <div class="bg-gray-800 rounded-lg p-6 text-center community-card transition duration-300">
154
+ <img src="http://static.photos/people/80x80/5" alt="Contributor" class="w-20 h-20 rounded-full mx-auto mb-4">
155
+ <h3 class="text-xl font-bold mb-2">DriftDoctor</h3>
156
+ <p class="text-gray-300 mb-4">Focuses on stable, easy-to-drive setups for all car classes</p>
157
+ <div class="flex justify-center items-center text-yellow-400">
158
+ <i data-feather="star" class="w-4 h-4 mr-1"></i>
159
+ <span class="text-sm">4.8 rating</span>
160
+ </div>
161
+ <div class="flex justify-center space-x-2">
162
+ <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">Pro</span>
163
+ </div>
164
+ </div>
165
+ <!-- Contributor 3 -->
166
+ <div class="bg-gray-800 rounded-lg p-6 text-center community-card transition duration-300">
167
+ <img src="http://static.photos/people/80x80/6" alt="Contributor" class="w-20 h-20 rounded-full mx-auto mb-4">
168
+ <h3 class="text-xl font-bold mb-2">AeroAce</h3>
169
+ <p class="text-gray-300 mb-4">Aerodynamics specialist with deep knowledge of downforce optimization</p>
170
+ <div class="flex justify-center items-center text-yellow-400">
171
+ <i data-feather="star" class="w-4 h-4 mr-1"></i>
172
+ <span class="text-sm">4.7 rating</span>
173
+ </div>
174
+ <div class="flex justify-center space-x-2">
175
+ <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">Advanced</span>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Join Community CTA -->
182
+ <section class="bg-gradient-to-r from-red-600 to-red-800 rounded-xl p-8 text-center">
183
+ <h2 class="text-3xl font-bold mb-4">Ready to join our community?</h2>
184
+ <p class="text-gray-200 mb-6 max-w-2xl mx-auto">Share your own setups, get feedback from experienced racers, and help others improve their performance.</p>
185
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
186
+ <button class="bg-white hover:bg-gray-100 text-red-600 px-8 py-3 rounded-lg font-medium transition transform hover:scale-105">
187
+ Sign Up Free
188
+ </button>
189
+ <button class="bg-transparent hover:bg-red-700 border-2 border-white text-white px-8 py-3 rounded-lg font-medium transition transform hover:scale-105">
190
+ Learn More
191
+ </button>
192
+ </div>
193
+ </section>
194
+ </main>
195
+
196
+ <!-- Footer -->
197
+ <footer class="bg-gray-900 py-12 px-4 border-t border-gray-800">
198
+ <div class="container mx-auto">
199
+ <div class="flex flex-col md:flex-row justify-between items-center">
200
+ <div class="mb-6 md:mb-0">
201
+ <div class="flex items-center">
202
+ <i data-feather="flag" class="w-6 h-6 text-red-500 mr-2"></i>
203
+ <span class="text-lg font-bold">Racer's Edge</span>
204
+ </div>
205
+ <p class="text-gray-400 mt-2">The ultimate setup resource for ACC</p>
206
+ </div>
207
+ <div class="flex space-x-6">
208
+ <a href="#" class="text-gray-400 hover:text-white transition">
209
+ <i data-feather="twitter" class="w-5 h-5"></i>
210
+ </a>
211
+ <a href="#" class="text-gray-400 hover:text-white transition">
212
+ <i data-feather="youtube" class="w-5 h-5"></i>
213
+ </a>
214
+ <a href="#" class="text-gray-400 hover:text-white transition">
215
+ <i data-feather="discord" class="w-5 h-5"></i>
216
+ </a>
217
+ <a href="#" class="text-gray-400 hover:text-white transition">
218
+ <i data-feather="github" class="w-5 h-5"></i>
219
+ </a>
220
+ </div>
221
+ </div>
222
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center">
223
+ <p class="text-gray-400 text-sm">© 2023 Racer's Edge. All setups are community-contributed and not affiliated with Kunos Simulazioni.</p>
224
+ </div>
225
+ </div>
226
+ </footer>
227
+ </div>
228
+ <script>
229
+ // Initialize feather icons
230
+ document.addEventListener('DOMContentLoaded', function() {
231
+ feather.replace();
232
+ });
233
+ </script>
234
+ </body>
235
+ </html>
index.html CHANGED
@@ -34,7 +34,7 @@
34
  <a href="index.html" class="hover:text-red-400 transition">Home</a>
35
  <a href="cars.html" class="hover:text-red-400 transition">Cars</a>
36
  <a href="tracks.html" class="hover:text-red-400 transition">Tracks</a>
37
- <a href="#" class="hover:text-red-400 transition">Community</a>
38
  </nav>
39
  <button class="md:hidden">
40
  <i data-feather="menu" class="w-6 h-6"></i>
 
34
  <a href="index.html" class="hover:text-red-400 transition">Home</a>
35
  <a href="cars.html" class="hover:text-red-400 transition">Cars</a>
36
  <a href="tracks.html" class="hover:text-red-400 transition">Tracks</a>
37
+ <a href="community.html" class="hover:text-red-400 transition">Community</a>
38
  </nav>
39
  <button class="md:hidden">
40
  <i data-feather="menu" class="w-6 h-6"></i>
tracks.html CHANGED
@@ -32,8 +32,8 @@
32
  <a href="index.html" class="hover:text-red-400 transition">Home</a>
33
  <a href="cars.html" class="hover:text-red-400 transition">Cars</a>
34
  <a href="tracks.html" class="text-red-400">Tracks</a>
35
- <a href="#" class="hover:text-red-400 transition">Community</a>
36
- </nav>
37
  <button class="md:hidden">
38
  <i data-feather="menu" class="w-6 h-6"></i>
39
  </button>
 
32
  <a href="index.html" class="hover:text-red-400 transition">Home</a>
33
  <a href="cars.html" class="hover:text-red-400 transition">Cars</a>
34
  <a href="tracks.html" class="text-red-400">Tracks</a>
35
+ <a href="community.html" class="hover:text-red-400 transition">Community</a>
36
+ </nav>
37
  <button class="md:hidden">
38
  <i data-feather="menu" class="w-6 h-6"></i>
39
  </button>