Hugging Face's logo

Spaces:
FLNE
/
blockverse-odyssey
Running

App Files Community
FLNE commited on
Commit
dbbfa80
·
verified ·
1 Parent(s): 99e8359

Redesign my website

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +264 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Blockverse Odyssey
3
- emoji: 🔥
4
  colorFrom: blue
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: BlockVerse Odyssey 🎮
 
3
  colorFrom: blue
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,265 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BlockVerse Odyssey - Sign Up</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#ff6b35',
18
+ secondary: '#00d2ff'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600&display=swap');
26
+
27
+ * {
28
+ font-family: 'Inter', sans-serif;
29
+ }
30
+
31
+ .title-font {
32
+ font-family: 'Orbitron', sans-serif;
33
+ }
34
+
35
+ .gradient-bg {
36
+ background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
37
+ }
38
+
39
+ .neon-glow {
40
+ box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
41
+ }
42
+
43
+ .input-glow:focus {
44
+ box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
45
+ }
46
+
47
+ .floating {
48
+ animation: floating 3s ease-in-out infinite;
49
+ }
50
+
51
+ @keyframes floating {
52
+ 0%, 100% { transform: translateY(0px); }
53
+ 50% { transform: translateY(-10px); }
54
+ }
55
+
56
+ .pixel-border {
57
+ border: 2px solid #ff6b35;
58
+ box-shadow: 4px 4px 0px #00d2ff;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="gradient-bg min-h-screen text-white">
63
+ <!-- Animated Background Elements -->
64
+ <div class="fixed inset-0 overflow-hidden pointer-events-none">
65
+ <div class="absolute top-20 left-10 w-4 h-4 bg-primary rounded-full floating opacity-60"></div>
66
+ <div class="absolute top-40 right-20 w-6 h-6 bg-secondary rounded-full floating opacity-40" style="animation-delay: 1s;"></div>
67
+ <div class="absolute bottom-32 left-1/4 w-3 h-3 bg-primary rounded-full floating opacity-50" style="animation-delay: 2s;"></div>
68
+ <div class="absolute bottom-20 right-32 w-5 h-5 bg-secondary rounded-full floating opacity-30" style="animation-delay: 0.5s;"></div>
69
+ </div>
70
+
71
+ <div class="container mx-auto px-4 py-8 relative z-10">
72
+ <!-- Header -->
73
+ <header class="text-center mb-12">
74
+ <div class="flex justify-center items-center mb-6">
75
+ <div class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center mr-4 neon-glow">
76
+ <i data-feather="cpu" class="w-8 h-8"></i>
77
+ </div>
78
+ <h1 class="title-font text-4xl md:text-6xl font-black bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
79
+ BlockVerse
80
+ </h1>
81
+ </div>
82
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
83
+ Where imagination meets infinite possibilities in the metaverse
84
+ </p>
85
+ </header>
86
+
87
+ <div class="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
88
+ <!-- Sign Up Form -->
89
+ <div class="bg-gray-900/50 backdrop-blur-lg rounded-2xl p-8 border border-gray-700 neon-glow">
90
+ <h2 class="title-font text-2xl md:text-3xl font-bold mb-2 text-center">
91
+ Begin Your Odyssey
92
+ </h2>
93
+ <p class="text-gray-400 text-center mb-8">
94
+ Sign up and start having fun!
95
+ </p>
96
+
97
+ <form class="space-y-6">
98
+ <!-- Birthday -->
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-300 mb-2">
101
+ <i data-feather="calendar" class="w-4 h-4 inline mr-2"></i>
102
+ Birthday
103
+ </label>
104
+ <input type="date" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-secondary input-glow text-white">
105
+ </div>
106
+
107
+ <!-- Username -->
108
+ <div>
109
+ <label class="block text-sm font-medium text-gray-300 mb-2">
110
+ <i data-feather="user" class="w-4 h-4 inline mr-2"></i>
111
+ Username
112
+ </label>
113
+ <input type="text" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-secondary input-glow text-white" placeholder="Enter your username">
114
+ </div>
115
+
116
+ <!-- Password -->
117
+ <div>
118
+ <label class="block text-sm font-medium text-gray-300 mb-2">
119
+ <i data-feather="lock" class="w-4 h-4 inline mr-2"></i>
120
+ Password
121
+ </label>
122
+ <input type="password" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-secondary input-glow text-white" placeholder="Create a strong password">
123
+ </div>
124
+
125
+ <!-- Gender (Optional) -->
126
+ <div>
127
+ <label class="block text-sm font-medium text-gray-300 mb-2">
128
+ <i data-feather="users" class="w-4 h-4 inline mr-2"></i>
129
+ Gender (optional)
130
+ </label>
131
+ <select class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-secondary input-glow text-white">
132
+ <option value="">Select gender</option>
133
+ <option value="male">Male</option>
134
+ <option value="female">Female</option>
135
+ <option value="other">Other</option>
136
+ <option value="prefer-not-to-say">Prefer not to say</option>
137
+ </select>
138
+ </div>
139
+
140
+ <!-- Terms and Privacy -->
141
+ <div class="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
142
+ <p class="text-sm text-gray-300">
143
+ By clicking Sign Up, you are agreeing to the
144
+ <a href="https://www.roblox.com/info/terms" class="text-secondary hover:text-primary transition-colors">Terms of Use</a>
145
+ including the arbitration clause and you are acknowledging the
146
+ <a href="https://www.roblox.com/info/privacy" class="text-secondary hover:text-primary transition-colors">Privacy Policy</a>
147
+ </p>
148
+ </div>
149
+
150
+ <!-- Sign Up Button -->
151
+ <button type="submit" class="w-full bg-gradient-to-r from-primary to-secondary text-white py-4 px-6 rounded-lg font-semibold hover:opacity-90 transition-all duration-300 transform hover:scale-105 pixel-border">
152
+ <i data-feather="rocket" class="w-5 h-5 inline mr-2"></i>
153
+ Launch Your Adventure
154
+ </button>
155
+ </form>
156
+ </div>
157
+
158
+ <!-- Platform Section -->
159
+ <div class="bg-gray-900/50 backdrop-blur-lg rounded-2xl p-8 border border-gray-700 neon-glow">
160
+ <h3 class="title-font text-2xl md:text-3xl font-bold mb-2 text-center">
161
+ BlockVerse Everywhere
162
+ </h3>
163
+ <p class="text-gray-400 text-center mb-8">
164
+ Experience the metaverse on all your favorite devices
165
+ </p>
166
+
167
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
168
+ <!-- App Store -->
169
+ <a href="https://itunes.apple.com/us/app/roblox-mobile/id431946152" class="block transform hover:scale-105 transition-all duration-300">
170
+ <div class="bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition-colors border border-gray-600">
171
+ <img src="https://images.rbxcdn.com/2928664fe1fc6aca88583a6f606d60ba-apple-badge-en_us-ULTWHOBG.svg" alt="Roblox on App Store" class="w-full h-auto">
172
+ </div>
173
+ </a>
174
+
175
+ <!-- Google Play -->
176
+ <a href="https://play.google.com/store/apps/details?id=com.roblox.client&hl=en&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1" class="block transform hover:scale-105 transition-all duration-300">
177
+ <div class="bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition-colors border border-gray-600">
178
+ <img src="https://images.rbxcdn.com/df567a27fa3f48d96cc95c01a1703b87-google-badge-en_us-MLKMXS7C.svg" alt="Get it on Google Play" class="w-full h-auto">
179
+ </div>
180
+ </a>
181
+
182
+ <!-- PlayStation -->
183
+ <a href="https://www.playstation.com/en-us/games/roblox/" class="block transform hover:scale-105 transition-all duration-300">
184
+ <div class="bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition-colors border border-gray-600">
185
+ <img src="https://images.rbxcdn.com/319095e8b40952b12b266eb47a2b2c40-playstation-badge-en_us-Y4CVRMGY.svg" alt="Roblox on PlayStation" class="w-full h-auto">
186
+ </div>
187
+ </a>
188
+
189
+ <!-- Xbox -->
190
+ <a href="https://www.xbox.com/en-us/games/store/roblox/bq1tn1t79v9k" class="block transform hover:scale-105 transition-all duration-300">
191
+ <div class="bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition-colors border border-gray-600">
192
+ <img src="https://images.rbxcdn.com/1c0855f1be21f499eb7a4027e5dd1d86-xbox-badge-en_us-OXEWQ2KC.svg" alt="Roblox on Xbox Store" class="w-full h-auto">
193
+ </div>
194
+ </a>
195
+
196
+ <!-- Meta Quest -->
197
+ <a href="https://www.meta.com/experiences/5804350719675181/" class="block transform hover:scale-105 transition-all duration-300">
198
+ <div class="bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition-colors border border-gray-600">
199
+ <img src="https://images.rbxcdn.com/0eb85925bd5a3e685d5cdfc482fad198-meta-quest-badge-en_us-ECIU6JNY.svg" alt="Roblox on Meta Quest" class="w-full h-auto">
200
+ </div>
201
+ </a>
202
+
203
+ <!-- Microsoft Store -->
204
+ <a href="https://apps.microsoft.com/detail/9pmf91n3lz3m?referrer=appbadge&mode=direct" class="block transform hover:scale-105 transition-all duration-300">
205
+ <div class="bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition-colors border border-gray-600">
206
+ <img src="https://images.rbxcdn.com/31d4e713ead43eb25da2aea42b6e36e9-microsoft-badge-en_us-VYLUO7EK.svg" alt="Roblox on Microsoft Store" class="w-full h-auto">
207
+ </div>
208
+ </a>
209
+
210
+ <!-- Amazon Store -->
211
+ <a href="https://www.amazon.com/Roblox-Corporation/dp/B00NUF4YOA" class="block transform hover:scale-105 transition-all duration-300 md:col-span-3">
212
+ <div class="bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition-colors border border-gray-600">
213
+ <img src="https://images.rbxcdn.com/484d5f5fbd1e763ce57ae6ad39d88a6a-amazon-badge-en_us-TGDZWUNE.png" alt="Roblox on Amazon Store" class="w-full h-auto max-w-xs mx-auto">
214
+ </div>
215
+ </a>
216
+ </div>
217
+
218
+ <!-- Additional Info -->
219
+ <div class="mt-8 text-center">
220
+ <div class="inline-flex items-center space-x-2 text-gray-400">
221
+ <i data-feather="shield" class="w-4 h-4"></i>
222
+ <span class="text-sm">Safe, secure, and always amazing</span>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Footer -->
229
+ <footer class="mt-16 text-center text-gray-500">
230
+ <div class="flex justify-center space-x-6 mb-4">
231
+ <a href="#" class="hover:text-primary transition-colors">
232
+ <i data-feather="help-circle"></i>
233
+ </a>
234
+ <a href="#" class="hover:text-primary transition-colors">
235
+ <i data-feather="message-circle"></i>
236
+ </a>
237
+ <a href="#" class="hover:text-primary transition-colors">
238
+ <i data-feather="globe"></i>
239
+ </a>
240
+ </div>
241
+ <p class="text-sm">
242
+ © 2024 BlockVerse Odyssey. Infinite adventures await.
243
+ </p>
244
+ </footer>
245
+ </div>
246
+
247
+ <script>
248
+ feather.replace();
249
+
250
+ // Add some interactive animations
251
+ document.addEventListener('DOMContentLoaded', function() {
252
+ const inputs = document.querySelectorAll('input, select');
253
+ inputs.forEach(input => {
254
+ input.addEventListener('focus', function() {
255
+ this.parentElement.classList.add('scale-105');
256
+ });
257
+
258
+ input.addEventListener('blur', function() {
259
+ this.parentElement.classList.remove('scale-105');
260
+ });
261
+ });
262
+ });
263
+ </script>
264
+ </body>
265
  </html>