Fazbeeer commited on
Commit
6950f23
·
verified ·
1 Parent(s): 0aca508

add competition result page

Browse files
Files changed (5) hide show
  1. about.html +1 -0
  2. currency.html +1 -0
  3. events.html +2 -1
  4. index.html +1 -0
  5. results.html +322 -0
about.html CHANGED
@@ -45,6 +45,7 @@
45
  <a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About</a>
46
  <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
47
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
 
48
  </div>
49
  <div class="flex items-center space-x-4">
50
  <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
 
45
  <a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About</a>
46
  <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
47
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
48
+ <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
49
  </div>
50
  <div class="flex items-center space-x-4">
51
  <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
currency.html CHANGED
@@ -38,6 +38,7 @@
38
  <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
39
  <a href="currency.html" class="text-yellow-500 hover:text-yellow-400 transition">Currency</a>
40
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
 
41
  </div>
42
  <div class="flex items-center space-x-4">
43
  <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
 
38
  <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
39
  <a href="currency.html" class="text-yellow-500 hover:text-yellow-400 transition">Currency</a>
40
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
41
+ <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
42
  </div>
43
  <div class="flex items-center space-x-4">
44
  <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
events.html CHANGED
@@ -42,7 +42,8 @@
42
  <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
43
  <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
44
  <a href="events.html" class="text-yellow-500 hover:text-yellow-400 transition">Events</a>
45
- </div>
 
46
  <div class="flex items-center space-x-4">
47
  <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
48
  <i data-feather="user" class="mr-2"></i> Login
 
42
  <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
43
  <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
44
  <a href="events.html" class="text-yellow-500 hover:text-yellow-400 transition">Events</a>
45
+ <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
46
+ </div>
47
  <div class="flex items-center space-x-4">
48
  <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
49
  <i data-feather="user" class="mr-2"></i> Login
index.html CHANGED
@@ -55,6 +55,7 @@
55
  <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
56
  <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
57
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
 
58
  </div>
59
  <div class="flex items-center space-x-4">
60
  <div class="relative">
 
55
  <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
56
  <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
57
  <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
58
+ <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
59
  </div>
60
  <div class="flex items-center space-x-4">
61
  <div class="relative">
results.html ADDED
@@ -0,0 +1,322 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Competition Results - Amplify</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
13
+ .hero-gradient {
14
+ background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #3a0000 100%);
15
+ }
16
+ .glow-text {
17
+ text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
18
+ }
19
+ .podium-item {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .podium-item:hover {
23
+ transform: translateY(-5px);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="bg-black text-white font-['Montserrat']">
28
+ <!-- Vanta.js Background -->
29
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
30
+
31
+ <!-- Navigation -->
32
+ <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
33
+ <div class="container mx-auto px-6 py-4">
34
+ <div class="flex justify-between items-center">
35
+ <div class="flex items-center space-x-2">
36
+ <i data-feather="zap" class="text-yellow-500"></i>
37
+ <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
38
+ </div>
39
+
40
+ <div class="hidden md:flex items-center space-x-8">
41
+ <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
42
+ <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
43
+ <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
44
+ <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
45
+ <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
46
+ <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
47
+ <a href="results.html" class="text-yellow-500 hover:text-yellow-400 transition">Results</a>
48
+ </div>
49
+ <div class="flex items-center space-x-4">
50
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
51
+ <i data-feather="user" class="mr-2"></i> Login
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Results Hero Section -->
59
+ <section class="relative z-10 hero-gradient py-32">
60
+ <div class="container mx-auto px-6 text-center">
61
+ <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-8 tracking-wider">
62
+ <span class="text-yellow-500 glow-text">COMPETITION</span> <span class="text-white">RESULTS</span>
63
+ </h1>
64
+ <p class="text-xl md:text-2xl max-w-4xl mx-auto text-gray-300">
65
+ Latest rankings and performance metrics from our VR mental training competitions
66
+ </p>
67
+ </div>
68
+ </section>
69
+
70
+ <!-- Results Section -->
71
+ <section class="relative z-10 py-20 bg-black bg-opacity-90">
72
+ <div class="container mx-auto px-6">
73
+ <!-- Podium -->
74
+ <div class="flex justify-center items-end mb-20 h-64">
75
+ <!-- 2nd Place -->
76
+ <div class="podium-item w-1/4 mx-2 bg-gradient-to-b from-gray-700 to-gray-900 rounded-t-lg border border-yellow-500 flex flex-col items-center" style="height: 180px;">
77
+ <div class="bg-gray-800 w-16 h-16 rounded-full flex items-center justify-center -mt-8 border-2 border-yellow-500">
78
+ <span class="text-2xl font-bold">2</span>
79
+ </div>
80
+ <div class="text-center mt-4">
81
+ <h3 class="font-bold">Sarah Chen</h3>
82
+ <p class="text-yellow-500">Score: 92.4</p>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- 1st Place -->
87
+ <div class="podium-item w-1/3 mx-2 bg-gradient-to-b from-yellow-500 to-yellow-700 rounded-t-lg border border-yellow-500 flex flex-col items-center" style="height: 240px;">
88
+ <div class="bg-yellow-500 w-20 h-20 rounded-full flex items-center justify-center -mt-10 border-4 border-yellow-700">
89
+ <i data-feather="award" class="text-black"></i>
90
+ </div>
91
+ <div class="text-center mt-6">
92
+ <h3 class="font-bold text-black">Alex Johnson</h3>
93
+ <p class="text-black font-bold">Score: 97.8</p>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- 3rd Place -->
98
+ <div class="podium-item w-1/4 mx-2 bg-gradient-to-b from-gray-600 to-gray-800 rounded-t-lg border border-yellow-500 flex flex-col items-center" style="height: 150px;">
99
+ <div class="bg-gray-700 w-16 h-16 rounded-full flex items-center justify-center -mt-8 border-2 border-yellow-500">
100
+ <span class="text-2xl font-bold">3</span>
101
+ </div>
102
+ <div class="text-center mt-4">
103
+ <h3 class="font-bold">Marcus Wright</h3>
104
+ <p class="text-yellow-500">Score: 89.5</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Leaderboard -->
110
+ <div class="bg-black bg-opacity-70 rounded-xl border border-yellow-500 p-6 mb-12">
111
+ <h2 class="text-3xl font-bold mb-6 font-['Bebas+Neue'] tracking-wider">
112
+ <span class="text-yellow-500">FULL</span> <span class="text-white">LEADERBOARD</span>
113
+ </h2>
114
+
115
+ <div class="overflow-x-auto">
116
+ <table class="w-full">
117
+ <thead>
118
+ <tr class="border-b border-yellow-500">
119
+ <th class="text-left py-4 px-2">Rank</th>
120
+ <th class="text-left py-4 px-2">Competitor</th>
121
+ <th class="text-left py-4 px-2">Score</th>
122
+ <th class="text-left py-4 px-2">Focus</th>
123
+ <th class="text-left py-4 px-2">Composure</th>
124
+ <th class="text-left py-4 px-2">Reaction</th>
125
+ </tr>
126
+ </thead>
127
+ <tbody>
128
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
129
+ <td class="py-4 px-2">1</td>
130
+ <td class="py-4 px-2 font-bold">Alex Johnson</td>
131
+ <td class="py-4 px-2 text-yellow-500 font-bold">97.8</td>
132
+ <td class="py-4 px-2">98%</td>
133
+ <td class="py-4 px-2">96%</td>
134
+ <td class="py-4 px-2">99%</td>
135
+ </tr>
136
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
137
+ <td class="py-4 px-2">2</td>
138
+ <td class="py-4 px-2 font-bold">Sarah Chen</td>
139
+ <td class="py-4 px-2 text-yellow-500 font-bold">92.4</td>
140
+ <td class="py-4 px-2">94%</td>
141
+ <td class="py-4 px-2">90%</td>
142
+ <td class="py-4 px-2">93%</td>
143
+ </tr>
144
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
145
+ <td class="py-4 px-2">3</td>
146
+ <td class="py-4 px-2 font-bold">Marcus Wright</td>
147
+ <td class="py-4 px-2 text-yellow-500 font-bold">89.5</td>
148
+ <td class="py-4 px-2">88%</td>
149
+ <td class="py-4 px-2">91%</td>
150
+ <td class="py-4 px-2">89%</td>
151
+ </tr>
152
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
153
+ <td class="py-4 px-2">4</td>
154
+ <td class="py-4 px-2">Jamie Lee</td>
155
+ <td class="py-4 px-2">87.2</td>
156
+ <td class="py-4 px-2">85%</td>
157
+ <td class="py-4 px-2">89%</td>
158
+ <td class="py-4 px-2">87%</td>
159
+ </tr>
160
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
161
+ <td class="py-4 px-2">5</td>
162
+ <td class="py-4 px-2">Taylor Smith</td>
163
+ <td class="py-4 px-2">84.6</td>
164
+ <td class="py-4 px-2">83%</td>
165
+ <td class="py-4 px-2">85%</td>
166
+ <td class="py-4 px-2">86%</td>
167
+ </tr>
168
+ </tbody>
169
+ </table>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Competition Selector -->
174
+ <div class="bg-black bg-opacity-70 rounded-xl border border-yellow-500 p-6 mb-12">
175
+ <h2 class="text-3xl font-bold mb-6 font-['Bebas+Neue'] tracking-wider">
176
+ <span class="text-yellow-500">PAST</span> <span class="text-white">COMPETITIONS</span>
177
+ </h2>
178
+
179
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
180
+ <div class="bg-gray-900 hover:bg-gray-800 rounded-lg border border-gray-800 p-4 transition cursor-pointer">
181
+ <h3 class="font-bold text-yellow-500">March 2025</h3>
182
+ <p class="text-gray-300 text-sm">VR Focus Challenge</p>
183
+ </div>
184
+ <div class="bg-gray-900 hover:bg-gray-800 rounded-lg border border-gray-800 p-4 transition cursor-pointer">
185
+ <h3 class="font-bold">February 2025</h3>
186
+ <p class="text-gray-300 text-sm">Pressure Simulation</p>
187
+ </div>
188
+ <div class="bg-gray-900 hover:bg-gray-800 rounded-lg border border-gray-800 p-4 transition cursor-pointer">
189
+ <h3 class="font-bold">January 2025</h3>
190
+ <p class="text-gray-300 text-sm">Mindset Marathon</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Competition Stats -->
196
+ <div class="bg-black bg-opacity-70 rounded-xl border border-yellow-500 p-6">
197
+ <h2 class="text-3xl font-bold mb-6 font-['Bebas+Neue'] tracking-wider">
198
+ <span class="text-yellow-500">PERFORMANCE</span> <span class="text-white">STATS</span>
199
+ </h2>
200
+
201
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
202
+ <div class="text-center">
203
+ <div class="text-5xl font-bold text-yellow-500 mb-2">97.8</div>
204
+ <div class="text-gray-300">Highest Score</div>
205
+ </div>
206
+ <div class="text-center">
207
+ <div class="text-5xl font-bold text-yellow-500 mb-2">84.2</div>
208
+ <div class="text-gray-300">Average Score</div>
209
+ </div>
210
+ <div class="text-center">
211
+ <div class="text-5xl font-bold text-yellow-500 mb-2">25</div>
212
+ <div class="text-gray-300">Participants</div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- CTA Section -->
220
+ <section class="relative z-10 py-20 bg-gradient-to-r from-black via-gray-900 to-black">
221
+ <div class="container mx-auto px-6 text-center">
222
+ <h2 class="text-4xl md:text-5xl font-bold mb-8 font-['Bebas+Neue'] tracking-wider">
223
+ <span class="text-yellow-500">READY</span> <span class="text-white">TO</span> <span class="text-red-500">COMPETE?</span>
224
+ </h2>
225
+ <p class="text-xl mb-12 max-w-2xl mx-auto text-gray-300">
226
+ Join our next competition and test your mental performance against others
227
+ </p>
228
+ <button class="bg-gradient-to-r from-yellow-500 to-red-500 hover:from-yellow-600 hover:to-red-600 text-black font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg">
229
+ Join Next Event
230
+ </button>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- Footer -->
235
+ <footer class="relative z-10 bg-black bg-opacity-90 border-t border-gray-800 py-12">
236
+ <div class="container mx-auto px-6">
237
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
238
+ <div>
239
+ <div class="flex items-center space-x-2 mb-4">
240
+ <i data-feather="zap" class="text-yellow-500"></i>
241
+ <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
242
+ </div>
243
+ <p class="text-gray-400 mb-4">
244
+ Mental performance technology for champions in sports, business, and life.
245
+ </p>
246
+ <div class="flex space-x-4">
247
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
248
+ <i data-feather="facebook"></i>
249
+ </a>
250
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
251
+ <i data-feather="twitter"></i>
252
+ </a>
253
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
254
+ <i data-feather="instagram"></i>
255
+ </a>
256
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
257
+ <i data-feather="linkedin"></i>
258
+ </a>
259
+ </div>
260
+ </div>
261
+
262
+ <div>
263
+ <h3 class="text-lg font-bold text-white mb-4">Competitions</h3>
264
+ <ul class="space-y-2">
265
+ <li><a href="results.html" class="text-yellow-500 hover:text-yellow-400 transition">Current Results</a></li>
266
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Upcoming Events</a></li>
267
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Past Winners</a></li>
268
+ </ul>
269
+ </div>
270
+
271
+ <div>
272
+ <h3 class="text-lg font-bold text-white mb-4">Company</h3>
273
+ <ul class="space-y-2">
274
+ <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
275
+ <li><a href="currency.html" class="text-gray-400 hover:text-yellow-500 transition">Currency</a></li>
276
+ <li><a href="events.html" class="text-gray-400 hover:text-yellow-500 transition">Events</a></li>
277
+ </ul>
278
+ </div>
279
+
280
+ <div>
281
+ <h3 class="text-lg font-bold text-white mb-4">Resources</h3>
282
+ <ul class="space-y-2">
283
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Training Tips</a></li>
284
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Performance Metrics</a></li>
285
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
286
+ </ul>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
291
+ <p class="text-gray-500 mb-4 md:mb-0">
292
+ © 2025 Amplify Technologies. All rights reserved.
293
+ </p>
294
+ <div class="flex space-x-6">
295
+ <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
296
+ <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </footer>
301
+
302
+ <script>
303
+ // Initialize Vanta.js background
304
+ VANTA.GLOBE({
305
+ el: "#vanta-bg",
306
+ mouseControls: true,
307
+ touchControls: true,
308
+ gyroControls: false,
309
+ minHeight: 200.00,
310
+ minWidth: 200.00,
311
+ scale: 1.00,
312
+ scaleMobile: 1.00,
313
+ color: 0xb8860b,
314
+ backgroundColor: 0x0,
315
+ size: 0.8
316
+ });
317
+
318
+ // Feather icons
319
+ feather.replace();
320
+ </script>
321
+ </body>
322
+ </html>