Hugging Face's logo

Spaces:
Advait3009
/
dreamer2
Running

App Files Community
Advait3009 commited on
Commit
a8bb887
·
verified ·
1 Parent(s): 61a1747

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +389 -19
index.html CHANGED
@@ -1,19 +1,389 @@
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>Rookus AI - Fashion Metaverse</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
13
+
14
+ body {
15
+ font-family: 'Montserrat', sans-serif;
16
+ margin: 0;
17
+ padding: 0;
18
+ overflow-x: hidden;
19
+ background: #000;
20
+ color: white;
21
+ }
22
+
23
+ canvas {
24
+ position: fixed;
25
+ top: 0;
26
+ left: 0;
27
+ z-index: -1;
28
+ }
29
+
30
+ .hero-text {
31
+ font-size: clamp(3rem, 8vw, 8rem);
32
+ line-height: 0.9;
33
+ font-weight: 800;
34
+ text-transform: uppercase;
35
+ }
36
+
37
+ .menu-item {
38
+ position: relative;
39
+ overflow: hidden;
40
+ }
41
+
42
+ .menu-item::after {
43
+ content: '';
44
+ position: absolute;
45
+ bottom: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 1px;
49
+ background: white;
50
+ transform: scaleX(0);
51
+ transform-origin: right;
52
+ transition: transform 0.3s ease;
53
+ }
54
+
55
+ .menu-item:hover::after {
56
+ transform: scaleX(1);
57
+ transform-origin: left;
58
+ }
59
+
60
+ .scroll-indicator {
61
+ animation: bounce 2s infinite;
62
+ }
63
+
64
+ @keyframes bounce {
65
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
66
+ 40% {transform: translateY(-20px);}
67
+ 60% {transform: translateY(-10px);}
68
+ }
69
+
70
+ .collection-card {
71
+ transition: all 0.3s ease;
72
+ transform-origin: center;
73
+ }
74
+
75
+ .collection-card:hover {
76
+ transform: scale(1.05);
77
+ }
78
+
79
+ .loading-screen {
80
+ position: fixed;
81
+ top: 0;
82
+ left: 0;
83
+ width: 100%;
84
+ height: 100%;
85
+ background: #000;
86
+ display: flex;
87
+ flex-direction: column;
88
+ justify-content: center;
89
+ align-items: center;
90
+ z-index: 9999;
91
+ }
92
+
93
+ .progress-bar {
94
+ width: 200px;
95
+ height: 2px;
96
+ background: rgba(255,255,255,0.2);
97
+ margin-top: 20px;
98
+ overflow: hidden;
99
+ }
100
+
101
+ .progress-bar-fill {
102
+ height: 100%;
103
+ background: white;
104
+ width: 0%;
105
+ transition: width 0.3s ease;
106
+ }
107
+ </style>
108
+ </head>
109
+ <body>
110
+ <!-- Loading Screen -->
111
+ <div class="loading-screen">
112
+ <div class="text-white text-2xl">ENTERING ROOKUS METAVERSE</div>
113
+ <div class="progress-bar">
114
+ <div class="progress-bar-fill" id="progress-bar"></div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Main Content -->
119
+ <div class="container mx-auto px-6">
120
+ <!-- Navigation -->
121
+ <nav class="flex justify-between items-center py-8">
122
+ <div class="text-2xl font-bold">ROOKUS.AI</div>
123
+ <div class="hidden md:flex space-x-8">
124
+ <a href="#" class="menu-item">Metaverse</a>
125
+ <a href="#" class="menu-item">Collections</a>
126
+ <a href="#" class="menu-item">Avatars</a>
127
+ <a href="#" class="menu-item">Marketplace</a>
128
+ <a href="#" class="menu-item">About</a>
129
+ </div>
130
+ <div class="flex items-center space-x-4">
131
+ <button class="px-6 py-2 border border-white rounded-full hover:bg-white hover:text-black transition">Login</button>
132
+ <button class="px-6 py-2 bg-white text-black rounded-full hover:bg-opacity-80 transition">Sign Up</button>
133
+ </div>
134
+ </nav>
135
+
136
+ <!-- Hero Section -->
137
+ <section class="min-h-screen flex flex-col justify-center">
138
+ <div class="hero-text mb-12">
139
+ <div>Fashion</div>
140
+ <div>Reimagined</div>
141
+ <div>in 3D Space</div>
142
+ </div>
143
+ <p class="text-xl max-w-2xl mb-12">
144
+ Step into the Rookus AI Metaverse - where cutting-edge fashion meets immersive digital experiences.
145
+ Explore, try on, and purchase digital and physical garments in our revolutionary 3D environment.
146
+ </p>
147
+ <div class="flex space-x-4">
148
+ <button class="px-8 py-4 bg-white text-black rounded-full hover:bg-opacity-90 transition font-medium">Enter Metaverse</button>
149
+ <button class="px-8 py-4 border border-white rounded-full hover:bg-white hover:text-black transition font-medium">View Collections</button>
150
+ </div>
151
+ <div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 flex flex-col items-center scroll-indicator">
152
+ <span class="mb-2">Scroll</span>
153
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
154
+ <path d="M7 10L12 15L17 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
155
+ </svg>
156
+ </div>
157
+ </section>
158
+
159
+ <!-- Featured Collections -->
160
+ <section class="py-32">
161
+ <h2 class="text-4xl md:text-6xl font-bold mb-20">Featured Collections</h2>
162
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
163
+ <div class="collection-card">
164
+ <div class="aspect-square bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl mb-4"></div>
165
+ <h3 class="text-2xl font-bold">Neon Dreams</h3>
166
+ <p class="text-gray-400">Futuristic glow-in-the-dark collection</p>
167
+ </div>
168
+ <div class="collection-card">
169
+ <div class="aspect-square bg-gradient-to-br from-blue-500 to-teal-400 rounded-2xl mb-4"></div>
170
+ <h3 class="text-2xl font-bold">Cyberpunk 2077</h3>
171
+ <p class="text-gray-400">High-tech meets street fashion</p>
172
+ </div>
173
+ <div class="collection-card">
174
+ <div class="aspect-square bg-gradient-to-br from-yellow-400 to-red-500 rounded-2xl mb-4"></div>
175
+ <h3 class="text-2xl font-bold">Solar Flare</h3>
176
+ <p class="text-gray-400">Warm tones for the digital nomad</p>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- How It Works -->
182
+ <section class="py-32">
183
+ <h2 class="text-4xl md:text-6xl font-bold mb-20">How It Works</h2>
184
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
185
+ <div class="flex flex-col items-center text-center">
186
+ <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center text-black text-2xl font-bold mb-6">1</div>
187
+ <h3 class="text-2xl font-bold mb-4">Create Your Avatar</h3>
188
+ <p class="text-gray-400">Design a digital twin that matches your style and body measurements</p>
189
+ </div>
190
+ <div class="flex flex-col items-center text-center">
191
+ <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center text-black text-2xl font-bold mb-6">2</div>
192
+ <h3 class="text-2xl font-bold mb-4">Explore in 3D</h3>
193
+ <p class="text-gray-400">Navigate our virtual showrooms and try on clothes in real-time</p>
194
+ </div>
195
+ <div class="flex flex-col items-center text-center">
196
+ <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center text-black text-2xl font-bold mb-6">3</div>
197
+ <h3 class="text-2xl font-bold mb-4">Purchase & Wear</h3>
198
+ <p class="text-gray-400">Buy digital wearables or order physical garments tailored to you</p>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- CTA Section -->
204
+ <section class="py-32">
205
+ <div class="bg-gradient-to-r from-purple-900 to-blue-900 rounded-3xl p-12">
206
+ <div class="max-w-3xl">
207
+ <h2 class="text-4xl md:text-6xl font-bold mb-8">Ready to Experience the Future of Fashion?</h2>
208
+ <p class="text-xl mb-12">Join over 500,000 fashion pioneers in the Rookus AI Metaverse today.</p>
209
+ <button class="px-8 py-4 bg-white text-black rounded-full hover:bg-opacity-90 transition font-medium">Start Your Journey</button>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Footer -->
215
+ <footer class="py-20 border-t border-gray-800">
216
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
217
+ <div>
218
+ <h3 class="text-2xl font-bold mb-6">ROOKUS.AI</h3>
219
+ <p class="text-gray-400">Redefining fashion through artificial intelligence and immersive technologies.</p>
220
+ </div>
221
+ <div>
222
+ <h4 class="text-lg font-bold mb-6">Explore</h4>
223
+ <ul class="space-y-3">
224
+ <li><a href="#" class="text-gray-400 hover:text-white">Metaverse</a></li>
225
+ <li><a href="#" class="text-gray-400 hover:text-white">Collections</a></li>
226
+ <li><a href="#" class="text-gray-400 hover:text-white">Avatars</a></li>
227
+ <li><a href="#" class="text-gray-400 hover:text-white">Marketplace</a></li>
228
+ </ul>
229
+ </div>
230
+ <div>
231
+ <h4 class="text-lg font-bold mb-6">Company</h4>
232
+ <ul class="space-y-3">
233
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
234
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
235
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
236
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
237
+ </ul>
238
+ </div>
239
+ <div>
240
+ <h4 class="text-lg font-bold mb-6">Connect</h4>
241
+ <div class="flex space-x-4">
242
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700">T</a>
243
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700">I</a>
244
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700">D</a>
245
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700">F</a>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ <div class="mt-20 pt-8 border-t border-gray-800 text-gray-400">
250
+ <p>© 2023 Rookus AI. All rights reserved.</p>
251
+ </div>
252
+ </footer>
253
+ </div>
254
+
255
+ <script>
256
+ // Loading screen animation
257
+ document.addEventListener('DOMContentLoaded', () => {
258
+ let progress = 0;
259
+ const progressBar = document.getElementById('progress-bar');
260
+ const loadingScreen = document.querySelector('.loading-screen');
261
+
262
+ const interval = setInterval(() => {
263
+ progress += Math.random() * 10;
264
+ if (progress > 100) progress = 100;
265
+ progressBar.style.width = `${progress}%`;
266
+
267
+ if (progress >= 100) {
268
+ clearInterval(interval);
269
+ setTimeout(() => {
270
+ loadingScreen.style.opacity = '0';
271
+ setTimeout(() => {
272
+ loadingScreen.style.display = 'none';
273
+ initThreeJS();
274
+ }, 300);
275
+ }, 500);
276
+ }
277
+ }, 200);
278
+ });
279
+
280
+ // Three.js initialization
281
+ function initThreeJS() {
282
+ // Set up the scene
283
+ const scene = new THREE.Scene();
284
+ scene.background = new THREE.Color(0x000000);
285
+
286
+ // Set up the camera
287
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
288
+ camera.position.z = 5;
289
+
290
+ // Set up the renderer
291
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
292
+ renderer.setSize(window.innerWidth, window.innerHeight);
293
+ renderer.setPixelRatio(window.devicePixelRatio);
294
+ document.body.appendChild(renderer.domElement);
295
+
296
+ // Add controls
297
+ const controls = new THREE.OrbitControls(camera, renderer.domElement);
298
+ controls.enableDamping = true;
299
+ controls.dampingFactor = 0.05;
300
+
301
+ // Add lights
302
+ const ambientLight = new THREE.AmbientLight(0x404040);
303
+ scene.add(ambientLight);
304
+
305
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
306
+ directionalLight.position.set(1, 1, 1);
307
+ scene.add(directionalLight);
308
+
309
+ // Add floating fashion items
310
+ const geometry = new THREE.BoxGeometry(1, 1, 1);
311
+ const material = new THREE.MeshPhongMaterial({
312
+ color: 0x00ff00,
313
+ transparent: true,
314
+ opacity: 0.8,
315
+ wireframe: true
316
+ });
317
+
318
+ const items = [];
319
+ for (let i = 0; i < 20; i++) {
320
+ const item = new THREE.Mesh(geometry, material.clone());
321
+ item.material.color.setHSL(Math.random(), 0.7, 0.5);
322
+
323
+ // Random position
324
+ item.position.x = (Math.random() - 0.5) * 20;
325
+ item.position.y = (Math.random() - 0.5) * 20;
326
+ item.position.z = (Math.random() - 0.5) * 20;
327
+
328
+ // Random rotation
329
+ item.rotation.x = Math.random() * Math.PI;
330
+ item.rotation.y = Math.random() * Math.PI;
331
+
332
+ // Random scale
333
+ const scale = Math.random() * 0.5 + 0.5;
334
+ item.scale.set(scale, scale, scale);
335
+
336
+ scene.add(item);
337
+ items.push(item);
338
+ }
339
+
340
+ // Animation loop
341
+ function animate() {
342
+ requestAnimationFrame(animate);
343
+
344
+ // Rotate items
345
+ items.forEach(item => {
346
+ item.rotation.x += 0.01;
347
+ item.rotation.y += 0.01;
348
+
349
+ // Float up and down
350
+ item.position.y += Math.sin(Date.now() * 0.001 + item.position.x) * 0.001;
351
+ });
352
+
353
+ controls.update();
354
+ renderer.render(scene, camera);
355
+ }
356
+
357
+ // Handle window resize
358
+ window.addEventListener('resize', () => {
359
+ camera.aspect = window.innerWidth / window.innerHeight;
360
+ camera.updateProjectionMatrix();
361
+ renderer.setSize(window.innerWidth, window.innerHeight);
362
+ });
363
+
364
+ animate();
365
+
366
+ // Scroll animation
367
+ let scrollTimeout;
368
+ window.addEventListener('scroll', () => {
369
+ // Parallax effect on camera
370
+ const scrollY = window.scrollY;
371
+ camera.position.z = 5 + scrollY * 0.01;
372
+
373
+ // Rotate camera slightly based on scroll
374
+ camera.rotation.z = scrollY * 0.0005;
375
+
376
+ // Clear any existing timeout
377
+ if (scrollTimeout) {
378
+ clearTimeout(scrollTimeout);
379
+ }
380
+
381
+ // Reset camera after scrolling stops
382
+ scrollTimeout = setTimeout(() => {
383
+ gsap.to(camera.rotation, { z: 0, duration: 1, ease: "power2.out" });
384
+ }, 100);
385
+ });
386
+ }
387
+ </script>
388
+ </body>
389
+ </html>