Hugging Face's logo

Spaces:
dodey917
/
neural-glow
Running

App Files Community
neural-glow
File size: 8,296 Bytes
2541ddd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neural Glow - Immersive 3D Data Network</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body class="overflow-hidden">
    <custom-navbar></custom-navbar>
    
    <!-- Hero Section with 3D Background -->
    <section id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
        <!-- Three.js Canvas Container -->
        <div id="network-background" class="absolute inset-0 z-0"></div>
        
        <!-- Content Overlay -->
        <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
            <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
                Digital <span class="text-purple-400">Neural</span> Universe
            </h1>
            <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
                Step into a luminous purple nebula where energy threads weave through a living data cloud. 
                Every pixel contributes to depth and motion, making you feel like you're looking into a deep, glowing field of digital life.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="#explore" class="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-purple-500/30">
                    Explore the Network
                </a>
                <a href="#features" class="bg-transparent border-2 border-purple-500 text-purple-300 hover:bg-purple-500/10 font-semibold py-3 px-8 rounded-full transition-all duration-300 shadow-lg shadow-purple-500/20">
                    Learn More
                </a>
            </div>
        </div>
        
        <!-- Scroll Indicator -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <i data-feather="chevron-down" class="text-white w-8 h-8"></i>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 bg-gradient-to-b from-gray-900 to-black">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-white mb-4">Immersive Digital Experience</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    Our 3D neural network visualization combines cutting-edge technology with artistic design 
                    to create an unparalleled digital environment.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700 hover:border-purple-500 transition-all duration-300 group">
                    <div class="w-14 h-14 bg-purple-600 rounded-lg flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors">
                        <i data-feather="layers" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-4">Multi-Layered Depth</h3>
                    <p class="text-gray-400">
                        Foreground mesh, mid-layer particles, and distant nebula glow create infinite depth 
                        with parallax motion and energy fluctuations.
                    </p>
                </div>
                
                <!-- Feature 2 -->
                <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700 hover:border-purple-500 transition-all duration-300 group">
                    <div class="w-14 h-14 bg-purple-600 rounded-lg flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors">
                        <i data-feather="sun" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-4">Dynamic Lighting</h3>
                    <p class="text-gray-400">
                        Vibrant violet nodes emit halos that pulse with energy, creating a breathing-like 
                        rhythm across the entire network.
                    </p>
                </div>
                
                <!-- Feature 3 -->
                <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700 hover:border-purple-500 transition-all duration-300 group">
                    <div class="w-14 h-14 bg-purple-600 rounded-lg flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors">
                        <i data-feather="activity" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-4">Subtle Motion</h3>
                    <p class="text-gray-400">
                        Gentle wave undulations and slow drift motions make the structure appear to float 
                        freely in 3D space with liquid energy flow.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Interactive Demo Section -->
    <section id="explore" class="py-20 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-indigo-900/20"></div>
        <div class="container mx-auto px-4 relative">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-white mb-4">Interactive Neural Network</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    Experience the network in motion. Move your cursor to influence the flow of energy 
                    and watch as data pulses through the digital cosmos.
                </p>
            </div>
            
            <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-700 p-1 max-w-4xl mx-auto">
                <div id="interactive-demo" class="h-96 rounded-xl overflow-hidden relative">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="text-center p-8">
                            <div class="inline-block p-4 bg-purple-600/20 rounded-full mb-6">
                                <i data-feather="mouse-pointer" class="text-purple-400 w-12 h-12"></i>
                            </div>
                            <h3 class="text-2xl font-bold text-white mb-2">Move Your Cursor</h3>
                            <p class="text-gray-400">Interact with the neural network to see energy respond to your movements</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer CTA -->
    <section class="py-20 bg-gradient-to-t from-gray-900 to-black">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-4xl font-bold text-white mb-6">Ready to Dive In?</h2>
            <p class="text-gray-400 max-w-2xl mx-auto mb-10 text-xl">
                Join thousands of explorers experiencing the future of digital visualization today.
            </p>
            <a href="#" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-semibold py-4 px-10 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-purple-500/30 text-lg">
                Begin Your Journey
            </a>
        </div>
    </section>

    <custom-footer></custom-footer>
    
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body>
</html>