Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
384 lines (370 loc) · 20.4 KB
/
Copy pathindex.html
File metadata and controls
384 lines (370 loc) · 20.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="./src/css/styles.css" />
<link rel="icon" href="./assets/favicon/favicon.ico" type="image/x-icon" />
<script type="module" src="./src/js/main.mjs"></script>
<title>BidRally | Online Auction Platform</title>
<!-- Meta tags for SEO -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="BidRally is your go-to online auction platform for unique items, collectibles, and more. Join us to discover and bid on exclusive treasures." />
<meta
name="keywords"
content="online auction, bid, collectibles, unique items, auction platform" />
<meta name="author" content="BidRally Team" />
<!-- Meta tags for Social Media platforms -->
<meta property="og:title" content="BidRally | Online Auction Platform" />
<meta
property="og:description"
content="Join BidRally to discover and bid on unique items, collectibles, and more. Your go-to online auction platform." />
<meta property="og:image" content="/assets/images/john-2FPjlAyMQTA-unsplash.webp" />
</head>
<body class="flex min-h-screen flex-col bg-white text-black">
<!-- Header -->
<header class="relative shadow-md" role="banner">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between py-4">
<!-- Logo -->
<div class="flex items-center">
<a
href="./"
class="hover:text-dark-green flex items-center gap-2 text-xl font-bold transition-colors"
aria-label="BidRally home page">
<svg
xmlns="http://www.w3.org/2000/svg"
height="20"
width="20"
viewBox="0 0 576 512"
fill="currentColor"
aria-hidden="true">
<!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path
d="M169.6 153.4l-18.7-18.7c-12.5-12.5-12.5-32.8 0-45.3L265.6-25.4c12.5-12.5 32.8-12.5 45.3 0L329.6-6.6c12.5 12.5 12.5 32.8 0 45.3L214.9 153.4c-12.5 12.5-32.8 12.5-45.3 0zM276 211.7l-31.4-31.4 112-112 119.4 119.4-112 112-31.4-31.4-232 232c-15.6 15.6-40.9 15.6-56.6 0s-15.6-40.9 0-56.6l232-232zM390.9 374.6c-12.5-12.5-12.5-32.8 0-45.3L505.6 214.6c12.5-12.5 32.8-12.5 45.3 0l18.7 18.7c12.5 12.5 12.5 32.8 0 45.3L454.9 393.4c-12.5 12.5-32.8 12.5-45.3 0l-18.7-18.7z" />
</svg>
<span class="text-2xl max-[350px]:hidden">BidRally</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="hidden gap-1 lg:flex" role="navigation" aria-label="Main navigation">
<a
href="./"
data-link
class="hover:text-dark-green hover:border-dark-green border-b border-black px-3 py-1 font-medium transition-colors">
Home
</a>
<a
href="./auctions/"
data-link
class="hover:text-dark-green px-3 py-1 font-medium transition-colors">
All Auctions
</a>
<a
href="./about/"
data-link
class="hover:text-dark-green px-3 py-1 font-medium transition-colors">
About
</a>
<a
href="./contact/"
data-link
class="hover:text-dark-green px-3 py-1 font-medium transition-colors">
Contact
</a>
</nav>
<div id="user-menu" class="lg:flex">
<!-- User navigation rendered dynamically -->
</div>
<!-- Mobile menu button -->
<div class="lg:hidden">
<button
id="open-mobile-menu-button"
class="hover:text-dark-green cursor-pointer rounded-md p-2 focus:ring-2 focus:outline-none"
aria-expanded="false"
aria-controls="mobile-menu"
aria-label="open mobile navigation menu">
<svg
id="hamburger-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
fill="currentColor"
class="size-5"
aria-hidden="true">
<!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path
d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z" />
</svg>
</button>
<button
id="close-mobile-menu-button"
class="hover:text-dark-green hidden cursor-pointer rounded-md p-2 focus:ring-2 focus:outline-none"
aria-expanded="false"
aria-controls="mobile-menu"
aria-label="close mobile navigation menu">
<svg
id="close-icon"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="size-5"
aria-hidden="true"
viewBox="0 0 384 512">
<!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path
d="M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z" />
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation -->
<nav
id="mobile-menu"
class="border-gray-base pointer-events-none absolute top-full left-0 z-50 max-h-0 w-full transform border-t border-b bg-white px-4 py-4 opacity-0 transition-all duration-300 ease-in-out lg:hidden"
role="navigation"
aria-label="Mobile navigation">
<div class="flex flex-col gap-3">
<a
href="./"
class="hover:text-dark-green text-dark-green font-medium transition-colors"
aria-current="page">
Home
</a>
<a href="./auctions/" class="hover:text-dark-green font-medium transition-colors">
All Auctions
</a>
<a href="./about/" class="hover:text-dark-green font-medium transition-colors">About</a>
<a href="./contact/" class="hover:text-dark-green font-medium transition-colors">
Contact
</a>
</div>
</nav>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow" role="main">
<!-- Hero Section -->
<section class="relative h-[60vh] lg:h-[40vh]" aria-labelledby="hero-heading">
<img
src="/assets/images/john-2FPjlAyMQTA-unsplash.webp"
alt="Vintage auction items displayed on a wooden table"
class="absolute inset-0 h-full w-full object-cover object-[50%_60%]"
role="presentation" />
<!-- Dark overlay on top of image -->
<div class="absolute inset-0 bg-black/80" aria-hidden="true"></div>
<div class="relative flex min-h-[60vh] items-center justify-center px-4 lg:min-h-[40vh]">
<div class="flex max-w-[65ch] flex-col gap-4 text-center text-white">
<h1 id="hero-heading" class="bg-black/0 text-4xl font-bold tracking-wide md:text-5xl">
Discover Unique Treasures
</h1>
<p class="bg-black/0 text-lg font-medium tracking-wide">
Bid on exclusive items from around the world. Find rare collectibles, art,
electronics, and more at competitive prices.
</p>
<div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
<a href="./auctions/" class="btn-primary mx-auto text-lg">Browse Auctions</a>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="py-16" aria-labelledby="how-it-works-heading">
<div class="container mx-auto px-4">
<h2 id="how-it-works-heading" class="mb-12 text-center text-xl font-bold md:text-3xl">
How BidRally Works
</h2>
<div class="mx-auto max-w-4xl">
<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
<!-- Step 1 -->
<div class="text-center">
<div
class="bg-dark-green mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-white">
1
</div>
<h3 class="mb-4 text-lg font-bold md:text-xl">Register & Browse</h3>
<p class="leading-relaxed">
Create your account with a valid stud.noroff.no email address and start exploring
our wide variety of auction listings.
</p>
</div>
<!-- Step 2 -->
<div class="text-center">
<div
class="bg-dark-green mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-white">
2
</div>
<h3 class="mb-4 text-lg font-bold md:text-xl">Bid & Create</h3>
<p class="leading-relaxed">
Place bids on items you love or create your own listings with detailed
descriptions, images, and deadlines.
</p>
</div>
<!-- Step 3 -->
<div class="text-center">
<div
class="bg-dark-green mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-white">
3
</div>
<h3 class="mb-4 text-lg font-bold md:text-xl">Win & Connect</h3>
<p class="leading-relaxed">
Win exciting auctions, connect with other users, and build your reputation in our
growing community of auction enthusiasts.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Auctions ending soon -->
<section class="bg-gray-base py-16" aria-labelledby="auctions-ending-soon-heading">
<div class="container mx-auto px-4">
<div class="mb-8 flex items-center justify-between">
<h2 id="auctions-ending-soon-heading" class="text-xl font-bold md:text-3xl">
Auctions Ending
</h2>
<a
href="./auctions/"
class="border-dark-green text-dark-green hover:bg-dark-green rounded-md border-2 px-4 py-2 font-medium transition-colors hover:text-white"
aria-label="View all auction items">
View All
</a>
</div>
<div
id="auctions-ending-soon-container"
class="relative grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4"
role="list"
aria-label="auctions-items-ending-soon">
<!-- Loader -->
<div
id="loader"
class="absolute inset-0 z-10 flex h-full w-full items-center justify-center bg-white/70">
<div>
<svg
class="h-12 w-12 animate-spin text-gray-300"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24">
<path
d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
stroke="currentColor"
stroke-width="5"
stroke-linecap="round"
stroke-linejoin="round"></path>
<path
d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
stroke="currentColor"
stroke-width="5"
stroke-linecap="round"
stroke-linejoin="round"
class="text-gray-900"></path>
</svg>
</div>
</div>
<!-- / Loader -->
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-black text-white" role="contentinfo">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 gap-8 py-10 md:grid-cols-3">
<div class="flex flex-col lg:mx-auto lg:max-w-screen">
<h3 class="mb-2 text-lg font-light text-white/80">About BidRally</h3>
<nav aria-label="About BidRally links">
<a href="./about/" class="hover:text-gray transition-colors">About Us</a>
</nav>
</div>
<div class="flex flex-col lg:mx-auto lg:max-w-screen">
<h3 class="mb-2 text-lg font-light text-white/80">Help & Support</h3>
<nav aria-label="Help and support links">
<a href="./contact/" class="hover:text-gray transition-colors">Contact Us</a>
</nav>
</div>
<div class="flex flex-col lg:mx-auto lg:max-w-screen">
<h3 class="mb-2 text-lg font-light text-white/80">Connect With Us</h3>
<nav class="mb-2 flex gap-4" aria-label="Social media links">
<a
href="https://www.facebook.com"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit BidRally on Facebook"
class="hover:text-gray flex items-center transition-colors">
<svg
fill="currentColor"
class="size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
aria-hidden="true">
<!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path
d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5l0-170.3-52.8 0 0-78.2 52.8 0 0-33.7c0-87.1 39.4-127.5 125-127.5 16.2 0 44.2 3.2 55.7 6.4l0 70.8c-6-.6-16.5-1-29.6-1-42 0-58.2 15.9-58.2 57.2l0 27.8 83.6 0-14.4 78.2-69.3 0 0 175.9C413.8 494.8 512 386.9 512 256z" />
</svg>
</a>
<a
href="https://github.com/Torehirth/Bid-Rally"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit BidRally project on GitHub"
class="hover:text-gray transition-colors">
<svg
fill="currentColor"
class="size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
aria-hidden="true">
<!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path
d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM252.8 8c-138.7 0-244.8 105.3-244.8 244 0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1 100-33.2 167.8-128.1 167.8-239 0-138.7-112.5-244-251.2-244zM105.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
</a>
<a
href="https://www.instagram.com"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit BidRally on Instagram"
class="hover:text-gray transition-colors">
<svg
fill="currentColor"
class="size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
aria-hidden="true">
<!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path
d="M224.3 141a115 115 0 1 0 -.6 230 115 115 0 1 0 .6-230zm-.6 40.4a74.6 74.6 0 1 1 .6 149.2 74.6 74.6 0 1 1 -.6-149.2zm93.4-45.1a26.8 26.8 0 1 1 53.6 0 26.8 26.8 0 1 1 -53.6 0zm129.7 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM399 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
</svg>
</a>
<a
href="https://www.linkedin.com/in/torehirth"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit BidRally on LinkedIn"
class="hover:text-gray transition-colors">
<svg
fill="currentColor"
class="size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
aria-hidden="true">
<!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path
d="M416 32L31.9 32C14.3 32 0 46.5 0 64.3L0 447.7C0 465.5 14.3 480 31.9 480L416 480c17.6 0 32-14.5 32-32.3l0-383.4C448 46.5 433.6 32 416 32zM135.4 416l-66.4 0 0-213.8 66.5 0 0 213.8-.1 0zM102.2 96a38.5 38.5 0 1 1 0 77 38.5 38.5 0 1 1 0-77zM384.3 416l-66.4 0 0-104c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9l0 105.8-66.4 0 0-213.8 63.7 0 0 29.2 .9 0c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9l0 117.2z" />
</svg>
</a>
</nav>
</div>
</div>
<div class="border-gray-base border-t py-4 text-center">
<p class="text-sm text-white/80">
©
<span id="copyright-year">2025</span>
BidRally - All rights reserved
</p>
</div>
</div>
</footer>
</body>
</html>