Hugging Face's logo

Spaces:
Wavetype
/
Boilerrrrr
Running

App Files Community
Wavetype commited on
Commit
b10421e
·
verified ·
1 Parent(s): f24cb6c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +197 -18
index.html CHANGED
@@ -1,19 +1,198 @@
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>GodsRods.online | Fantasy Rally Wagers</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&display=swap');
11
+
12
+ :root {
13
+ --neon-red: #ff003c;
14
+ --dirt-gold: #c5a059;
15
+ --carbon-black: #0a0a0a;
16
+ }
17
+
18
+ body {
19
+ background-color: var(--carbon-black);
20
+ color: #e0e0e0;
21
+ font-family: 'Rajdhani', sans-serif;
22
+ background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&q=80&w=2070');
23
+ background-size: cover;
24
+ background-attachment: fixed;
25
+ }
26
+
27
+ .font-header { font-family: 'Orbitron', sans-serif; }
28
+
29
+ .glass-panel {
30
+ background: rgba(20, 20, 20, 0.85);
31
+ backdrop-filter: blur(10px);
32
+ border: 1px solid rgba(255, 255, 255, 0.1);
33
+ border-left: 4px solid var(--neon-red);
34
+ }
35
+
36
+ .pink-slip-card {
37
+ background: linear-gradient(135deg, #2b0000 0%, #000000 100%);
38
+ border: 1px solid var(--neon-red);
39
+ }
40
+
41
+ .btn-bet {
42
+ background: var(--neon-red);
43
+ transition: all 0.3s ease;
44
+ text-transform: uppercase;
45
+ letter-spacing: 2px;
46
+ }
47
+
48
+ .btn-bet:hover {
49
+ box-shadow: 0 0 20px rgba(255, 0, 60, 0.6);
50
+ transform: translateY(-2px);
51
+ }
52
+
53
+ .chat-bubble {
54
+ background: rgba(255, 255, 255, 0.05);
55
+ border-radius: 4px;
56
+ padding: 8px 12px;
57
+ margin-bottom: 8px;
58
+ }
59
+
60
+ .system-msg { color: var(--dirt-gold); font-weight: bold; }
61
+ .user-msg { color: #fff; }
62
+ .opponent-msg { color: #00d4ff; }
63
+ </style>
64
+ </head>
65
+ <body class="min-h-screen">
66
+
67
+ <nav class="border-b border-white/10 p-4 flex justify-between items-center bg-black/60 sticky top-0 z-50">
68
+ <div class="flex items-center gap-4">
69
+ <h1 class="text-3xl font-header font-bold text-white italic tracking-tighter">GODS<span class="text-red-600">RODS</span></h1>
70
+ <div class="hidden md:flex gap-6 ml-10 text-sm uppercase tracking-widest">
71
+ <a href="#" class="hover:text-red-500">Garage</a>
72
+ <a href="#" class="text-red-500">Pit Lane</a>
73
+ <a href="#" class="hover:text-red-500">Market</a>
74
+ <a href="#" class="hover:text-red-500">Blacklist</a>
75
+ </div>
76
+ </div>
77
+ <div class="flex items-center gap-6">
78
+ <div class="text-right">
79
+ <p class="text-[10px] text-gray-400 uppercase">Available Credits</p>
80
+ <p class="text-xl font-header text-yellow-500">₲ 452,900</p>
81
+ </div>
82
+ <div class="h-10 w-10 bg-red-600 rounded-full flex items-center justify-center border-2 border-white/20">
83
+ <i class="fa-solid fa-user text-white"></i>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <main class="max-w-7xl mx-auto p-6 grid grid-cols-12 gap-6">
89
+
90
+ <div class="col-span-12 lg:col-span-3 space-y-4">
91
+ <h2 class="text-sm font-header text-gray-400 uppercase mb-2">Live Lobby</h2>
92
+ <div class="glass-panel p-4 space-y-3">
93
+ <div class="p-3 bg-white/5 border border-white/10 rounded">
94
+ <p class="text-xs text-gray-500 italic">Drag | 400m | Dirt</p>
95
+ <div class="flex justify-between items-center mt-1">
96
+ <span class="text-sm font-bold">@NitroBeast</span>
97
+ <span class="text-red-500 font-bold">₲ 50,000</span>
98
+ </div>
99
+ </div>
100
+ <div class="p-3 bg-white/5 border border-white/10 rounded">
101
+ <p class="text-xs text-gray-500 italic">Hill Climb | Mud</p>
102
+ <div class="flex justify-between items-center mt-1">
103
+ <span class="text-sm font-bold">@GhostRally</span>
104
+ <span class="text-yellow-500 font-bold uppercase text-[10px]">Pink Slips Only</span>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="col-span-12 lg:col-span-6 space-y-6">
111
+ <div class="relative h-[400px] w-full bg-black/40 rounded-lg overflow-hidden border border-white/10 group">
112
+ <img src="https://images.unsplash.com/photo-1594739433435-08169998de4b?auto=format&fit=crop&q=80&w=1000" class="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" alt="Rally Car">
113
+ <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent">
114
+ <h3 class="text-4xl font-header font-bold italic italic uppercase">Vanguard X-Terra</h3>
115
+ <div class="flex gap-4 mt-2">
116
+ <span class="px-2 py-1 bg-white/10 text-[10px] uppercase">Class: S1</span>
117
+ <span class="px-2 py-1 bg-white/10 text-[10px] uppercase">Tuning: Stage 3 Turbo</span>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="pink-slip-card p-6 rounded-lg text-center">
123
+ <h3 class="text-xl font-header text-red-500 mb-4">MATCH ACCEPTED: CHALLENGE FROM @DK_DRIFT</h3>
124
+ <div class="grid grid-cols-2 gap-4 mb-6">
125
+ <div class="p-4 bg-black/50 rounded border border-white/5">
126
+ <p class="text-xs text-gray-400">YOUR STAKE</p>
127
+ <p class="text-lg font-bold">₲ 100,000</p>
128
+ </div>
129
+ <div class="p-4 bg-black/50 rounded border border-red-900">
130
+ <p class="text-xs text-red-500">THE RISK</p>
131
+ <p class="text-lg font-bold uppercase">Pink Slip: Vanguard X-Terra</p>
132
+ </div>
133
+ </div>
134
+ <button class="btn-bet w-full py-4 font-header font-bold text-xl skew-x-[-10deg]">
135
+ IGNITION & RACE
136
+ </button>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="col-span-12 lg:col-span-3 flex flex-col h-[600px] glass-panel">
141
+ <div class="p-4 border-b border-white/10">
142
+ <h3 class="font-header text-sm tracking-widest text-red-500">PRE-RACE COMM (PIT LANE)</h3>
143
+ </div>
144
+
145
+ <div class="flex-grow p-4 overflow-y-auto space-y-2 text-sm">
146
+ <div class="chat-bubble">
147
+ <span class="system-msg">[SYSTEM]:</span> <span class="text-gray-400">Match room #882 created. Track: Hell's Peak.</span>
148
+ </div>
149
+
150
+ <div class="chat-bubble">
151
+ <span class="opponent-msg font-bold">@DK_Drift:</span>
152
+ <span class="user-msg italic">"I've seen that Vanguard in the garage. Those tires aren't gonna grip on the gravel climb, rookie."</span>
153
+ </div>
154
+
155
+ <div class="chat-bubble">
156
+ <span class="text-red-500 font-bold">YOU:</span>
157
+ <span class="user-msg italic">"Keep talking. I'm swapping the suspension right now. You still want to bet the slip?"</span>
158
+ </div>
159
+
160
+ <div class="chat-bubble">
161
+ <span class="opponent-msg font-bold">@DK_Drift:</span>
162
+ <span class="user-msg italic">"Locked and loaded. My 'Scorpion Evo' is ready to take your keys. ₲ 100k kicker too."</span>
163
+ </div>
164
+
165
+ <div class="chat-bubble border-l-2 border-yellow-500">
166
+ <span class="system-msg">[WAGER ALERT]:</span>
167
+ <span class="text-yellow-500">@DK_Drift has formalised the Pink Slip challenge. Acceptance will lock your vehicle until race completion.</span>
168
+ </div>
169
+
170
+ <div class="chat-bubble">
171
+ <span class="text-red-500 font-bold">YOU:</span>
172
+ <span class="user-msg italic">"Bet accepted. See you at the starting line. Don't choke."</span>
173
+ </div>
174
+
175
+ <div class="chat-bubble">
176
+ <span class="opponent-msg font-bold">@DK_Drift:</span>
177
+ <span class="user-msg italic">"🏎️💨 Good luck. You're gonna need it."</span>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="p-4 bg-black/40">
182
+ <div class="relative">
183
+ <input type="text" placeholder="Send trash talk..." class="w-full bg-white/5 border border-white/10 p-2 pl-4 rounded text-sm focus:outline-none focus:border-red-500">
184
+ <button class="absolute right-2 top-2 text-red-500 hover:text-white">
185
+ <i class="fa-solid fa-paper-plane"></i>
186
+ </button>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ </main>
192
+
193
+ <footer class="mt-20 border-t border-white/10 p-8 text-center text-gray-600 text-[10px] uppercase tracking-[4px]">
194
+ &copy; 2026 GodsRods Online • High Stakes Fantasy Rallying • Drive Fast. Lose Everything.
195
+ </footer>
196
+
197
+ </body>
198
  </html>