Hugging Face's logo

Spaces:
Ariyan-Pro
/
neon-nexus-dimension
Running

App Files Community
Ariyan-Pro commited on
Commit
4d9f2a7
·
verified ·
1 Parent(s): 3602d3b

make it more futuristic, modern by adding 3D components

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. index.html +233 -19
  3. script.js +14 -0
  4. style.css +112 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Neon Nexus Dimension
3
- emoji: 🔥
4
- colorFrom: purple
5
- colorTo: green
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: Neon Nexus Dimension 🚀
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://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,233 @@
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>Neon Nexus Dimension</title>
7
+ <link rel="stylesheet" href="style.css">
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 src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
13
+ </head>
14
+ <body class="bg-gray-900 text-white overflow-x-hidden">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="min-h-screen relative">
18
+ <!-- 3D Hero Section -->
19
+ <section id="vanta-bg" class="h-screen w-full flex items-center justify-center relative overflow-hidden">
20
+ <div class="absolute inset-0 bg-black bg-opacity-50"></div>
21
+ <div class="relative z-10 text-center px-4">
22
+ <h1 class="text-6xl md:text-8xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
23
+ Neon Nexus
24
+ </h1>
25
+ <p class="text-xl md:text-2xl max-w-2xl mx-auto mb-8">
26
+ Step into the future with our immersive 3D experience
27
+ </p>
28
+ <a href="#explore" class="inline-block px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full text-lg font-semibold hover:scale-105 transition-transform duration-300 shadow-lg shadow-purple-500/30">
29
+ Explore Dimensions
30
+ </a>
31
+ </div>
32
+ </section>
33
+
34
+ <!-- 3D Card Grid -->
35
+ <section id="explore" class="py-20 px-4 max-w-7xl mx-auto">
36
+ <h2 class="text-4xl font-bold text-center mb-16 relative">
37
+ <span class="relative inline-block">
38
+ Interactive Dimensions
39
+ <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full"></span>
40
+ </span>
41
+ </h2>
42
+
43
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
44
+ <!-- 3D Card 1 -->
45
+ <div class="h-96 perspective-1000 group">
46
+ <div class="relative w-full h-full transition-transform duration-700 transform-style-preserve-3d group-hover:rotate-y-180">
47
+ <div class="absolute w-full h-full backface-hidden bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 shadow-xl border border-gray-700 flex flex-col justify-center items-center">
48
+ <i data-feather="globe" class="w-16 h-16 text-purple-400 mb-6"></i>
49
+ <h3 class="text-2xl font-bold mb-3">Virtual Worlds</h3>
50
+ <p class="text-gray-300 text-center">Explore infinite virtual dimensions with our cutting-edge 3D technology.</p>
51
+ </div>
52
+ <div class="absolute w-full h-full backface-hidden bg-gradient-to-br from-purple-900 to-blue-900 rounded-2xl p-8 shadow-xl rotate-y-180 flex flex-col justify-center items-center">
53
+ <h3 class="text-2xl font-bold mb-4">Features</h3>
54
+ <ul class="space-y-2 text-gray-200">
55
+ <li class="flex items-center">
56
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
57
+ Real-time rendering
58
+ </li>
59
+ <li class="flex items-center">
60
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
61
+ Holographic UI
62
+ </li>
63
+ <li class="flex items-center">
64
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
65
+ Spatial audio
66
+ </li>
67
+ </ul>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- 3D Card 2 -->
73
+ <div class="h-96 perspective-1000 group">
74
+ <div class="relative w-full h-full transition-transform duration-700 transform-style-preserve-3d group-hover:rotate-y-180">
75
+ <div class="absolute w-full h-full backface-hidden bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 shadow-xl border border-gray-700 flex flex-col justify-center items-center">
76
+ <i data-feather="cpu" class="w-16 h-16 text-blue-400 mb-6"></i>
77
+ <h3 class="text-2xl font-bold mb-3">AI Integration</h3>
78
+ <p class="text-gray-300 text-center">Next-generation artificial intelligence that learns and adapts in real-time.</p>
79
+ </div>
80
+ <div class="absolute w-full h-full backface-hidden bg-gradient-to-br from-blue-900 to-indigo-900 rounded-2xl p-8 shadow-xl rotate-y-180 flex flex-col justify-center items-center">
81
+ <h3 class="text-2xl font-bold mb-4">Features</h3>
82
+ <ul class="space-y-2 text-gray-200">
83
+ <li class="flex items-center">
84
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
85
+ Neural networks
86
+ </li>
87
+ <li class="flex items-center">
88
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
89
+ Predictive analytics
90
+ </li>
91
+ <li class="flex items-center">
92
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
93
+ Emotion recognition
94
+ </li>
95
+ </ul>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- 3D Card 3 -->
101
+ <div class="h-96 perspective-1000 group">
102
+ <div class="relative w-full h-full transition-transform duration-700 transform-style-preserve-3d group-hover:rotate-y-180">
103
+ <div class="absolute w-full h-full backface-hidden bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 shadow-xl border border-gray-700 flex flex-col justify-center items-center">
104
+ <i data-feather="zap" class="w-16 h-16 text-pink-400 mb-6"></i>
105
+ <h3 class="text-2xl font-bold mb-3">Quantum Sync</h3>
106
+ <p class="text-gray-300 text-center">Instantaneous data transfer through quantum entanglement technology.</p>
107
+ </div>
108
+ <div class="absolute w-full h-full backface-hidden bg-gradient-to-br from-pink-900 to-purple-900 rounded-2xl p-8 shadow-xl rotate-y-180 flex flex-col justify-center items-center">
109
+ <h3 class="text-2xl font-bold mb-4">Features</h3>
110
+ <ul class="space-y-2 text-gray-200">
111
+ <li class="flex items-center">
112
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
113
+ Zero latency
114
+ </li>
115
+ <li class="flex items-center">
116
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
117
+ Unbreakable encryption
118
+ </li>
119
+ <li class="flex items-center">
120
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-green-400"></i>
121
+ Multi-dimensional sync
122
+ </li>
123
+ </ul>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Floating 3D Elements Section -->
131
+ <section class="py-20 px-4 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden">
132
+ <div class="max-w-7xl mx-auto relative z-10">
133
+ <h2 class="text-4xl font-bold text-center mb-16">
134
+ <span class="relative inline-block">
135
+ Holographic Interface
136
+ <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-pink-500 rounded-full"></span>
137
+ </span>
138
+ </h2>
139
+
140
+ <div class="flex flex-col lg:flex-row items-center gap-12">
141
+ <div class="lg:w-1/2">
142
+ <div class="holographic-display relative w-full aspect-square rounded-lg">
143
+ <div class="absolute inset-0 bg-blue-500/10 rounded-lg border border-blue-400/30 shadow-lg shadow-blue-500/20 backdrop-blur-sm"></div>
144
+ <div class="absolute inset-4 flex items-center justify-center">
145
+ <div class="grid-display w-full h-full relative">
146
+ <!-- Grid lines -->
147
+ <div class="absolute inset-0 border border-blue-400/20 rounded-lg"></div>
148
+ <div class="absolute inset-0 grid grid-cols-3 grid-rows-3">
149
+ <div class="border-r border-blue-400/10"></div>
150
+ <div class="border-r border-blue-400/10"></div>
151
+ <div></div>
152
+ </div>
153
+ <div class="absolute inset-0 grid grid-cols-3 grid-rows-3">
154
+ <div class="border-b border-blue-400/10"></div>
155
+ <div class="border-b border-blue-400/10"></div>
156
+ <div class="border-b border-blue-400/10"></div>
157
+ </div>
158
+ <!-- Floating elements -->
159
+ <div class="floating-cube"></div>
160
+ <div class="floating-sphere"></div>
161
+ <div class="floating-pyramid"></div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="lg:w-1/2 space-y-6">
168
+ <h3 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-pink-400">
169
+ Next-Gen Interaction
170
+ </h3>
171
+ <p class="text-lg text-gray-300">
172
+ Our holographic interface responds to touch, voice, and even thought patterns. The floating 3D elements are fully interactive and can be manipulated in real-time.
173
+ </p>
174
+ <ul class="space-y-4">
175
+ <li class="flex items-start">
176
+ <div class="flex-shrink-0 mt-1">
177
+ <div class="h-5 w-5 rounded-full bg-blue-500 flex items-center justify-center">
178
+ <i data-feather="check" class="w-3 h-3 text-white"></i>
179
+ </div>
180
+ </div>
181
+ <p class="ml-3 text-gray-300">Gesture recognition with millimeter precision</p>
182
+ </li>
183
+ <li class="flex items-start">
184
+ <div class="flex-shrink-0 mt-1">
185
+ <div class="h-5 w-5 rounded-full bg-pink-500 flex items-center justify-center">
186
+ <i data-feather="check" class="w-3 h-3 text-white"></i>
187
+ </div>
188
+ </div>
189
+ <p class="ml-3 text-gray-300">Neural interface compatibility</p>
190
+ </li>
191
+ <li class="flex items-start">
192
+ <div class="flex-shrink-0 mt-1">
193
+ <div class="h-5 w-5 rounded-full bg-purple-500 flex items-center justify-center">
194
+ <i data-feather="check" class="w-3 h-3 text-white"></i>
195
+ </div>
196
+ </div>
197
+ <p class="ml-3 text-gray-300">Real-time physics simulation</p>
198
+ </li>
199
+ </ul>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </section>
204
+ </main>
205
+
206
+ <custom-footer></custom-footer>
207
+
208
+ <script src="components/navbar.js"></script>
209
+ <script src="components/footer.js"></script>
210
+ <script src="script.js"></script>
211
+ <script>
212
+ feather.replace();
213
+
214
+ // Initialize Vanta.js background
215
+ VANTA.NET({
216
+ el: "#vanta-bg",
217
+ mouseControls: true,
218
+ touchControls: true,
219
+ gyroControls: false,
220
+ minHeight: 200.00,
221
+ minWidth: 200.00,
222
+ scale: 1.00,
223
+ scaleMobile: 1.00,
224
+ color: 0x7f00ff,
225
+ backgroundColor: 0x0,
226
+ points: 12.00,
227
+ maxDistance: 22.00,
228
+ spacing: 18.00
229
+ });
230
+ </script>
231
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
232
+ </body>
233
+ </html>
script.js ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Smooth scrolling for anchor links
2
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
3
+ anchor.addEventListener('click', function (e) {
4
+ e.preventDefault();
5
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
6
+ behavior: 'smooth'
7
+ });
8
+ });
9
+ });
10
+
11
+ // Parallax effect for floating elements
12
+ window.addEventListener('scroll', () => {
13
+ const scrollY = window.scrollY;
14
+ const floatingElements = document.querySelectorAll('.floating-cube, .floating-sp
style.css CHANGED
@@ -1,28 +1,122 @@
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
+ :root {
4
+ --primary: #7f00ff;
5
+ --secondary: #00d1ff;
6
+ --accent: #ff00aa;
7
+ }
8
+
9
  body {
10
+ font-family: 'Inter', sans-serif;
11
+ }
12
+
13
+ h1, h2, h3, h4, h5, h6 {
14
+ font-family: 'Orbitron', sans-serif;
15
+ letter-spacing: 0.5px;
16
+ }
17
+
18
+ /* 3D Card Styles */
19
+ .perspective-1000 {
20
+ perspective: 1000px;
21
+ }
22
+
23
+ .transform-style-preserve-3d {
24
+ transform-style: preserve-3d;
25
+ }
26
+
27
+ .backface-hidden {
28
+ backface-visibility: hidden;
29
+ }
30
+
31
+ .rotate-y-180 {
32
+ transform: rotateY(180deg);
33
  }
34
 
35
+ /* Holographic Display */
36
+ .holographic-display {
37
+ position: relative;
38
+ background: linear-gradient(135deg, rgba(127, 0, 255, 0.1) 0%, rgba(0, 209, 255, 0.1) 100%);
39
+ box-shadow: 0 0 30px rgba(127, 0, 255, 0.3),
40
+ inset 0 0 20px rgba(0, 209, 255, 0.2);
41
  }
42
 
43
+ .grid-display {
44
+ background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(20, 20, 30, 0.8) 100%);
 
 
 
45
  }
46
 
47
+ /* Floating 3D Elements */
48
+ .floating-cube, .floating-sphere, .floating-pyramid {
49
+ position: absolute;
50
+ animation: float 6s ease-in-out infinite;
51
+ filter: drop-shadow(0 0 8px rgba(127, 0, 255, 0.6));
 
52
  }
53
 
54
+ .floating-cube {
55
+ width: 60px;
56
+ height: 60px;
57
+ background: linear-gradient(135deg, rgba(127, 0, 255, 0.8) 0%, rgba(0, 209, 255, 0.8) 100%);
58
+ top: 30%;
59
+ left: 20%;
60
+ animation-delay: 0s;
61
+ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
62
+ transform: rotate(45deg);
63
  }
64
+
65
+ .floating-sphere {
66
+ width: 70px;
67
+ height: 70px;
68
+ background: radial-gradient(circle, rgba(255, 0, 170, 0.8) 0%, rgba(127, 0, 255, 0.8) 100%);
69
+ border-radius: 50%;
70
+ top: 50%;
71
+ left: 50%;
72
+ animation-delay: 1s;
73
+ }
74
+
75
+ .floating-pyramid {
76
+ width: 0;
77
+ height: 0;
78
+ border-left: 40px solid transparent;
79
+ border-right: 40px solid transparent;
80
+ border-bottom: 70px solid rgba(0, 209, 255, 0.8);
81
+ top: 20%;
82
+ left: 70%;
83
+ animation-delay: 2s;
84
+ }
85
+
86
+ @keyframes float {
87
+ 0%, 100% {
88
+ transform: translateY(0) rotate(0deg);
89
+ }
90
+ 50% {
91
+ transform: translateY(-20px) rotate(5deg);
92
+ }
93
+ }
94
+
95
+ /* Glow Effects */
96
+ .glow-effect {
97
+ position: relative;
98
+ }
99
+
100
+ .glow-effect::after {
101
+ content: '';
102
+ position: absolute;
103
+ top: 0;
104
+ left: 0;
105
+ right: 0;
106
+ bottom: 0;
107
+ background: radial-gradient(circle at center, rgba(127, 0, 255, 0.3) 0%, transparent 70%);
108
+ z-index: -1;
109
+ opacity: 0;
110
+ transition: opacity 0.3s ease;
111
+ }
112
+
113
+ .glow-effect:hover::after {
114
+ opacity: 1;
115
+ }
116
+
117
+ /* Responsive adjustments */
118
+ @media (max-width: 768px) {
119
+ .holographic-display {
120
+ margin-bottom: 2rem;
121
+ }
122
+ }