Hugging Face's logo

Spaces:
flitrx
/
neuromorph-gallery
Running

App Files Community
neuromorph-gallery
File size: 7,383 Bytes 
83820df
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
150
151
152
153
154
155
156
157
158
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CryptoSphere - Real-time Cryptocurrency Tracker</title>
    <meta name="description" content="Track cryptocurrency prices, market trends, and blockchain data in real-time">
    <link rel="manifest" href="manifest.json">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="crypto-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://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        secondary: '#3b82f6',
                        accent: '#8b5cf6'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex flex-col">
    <crypto-navbar></crypto-navbar>
    
    <main class="flex-grow">
        <!-- Hero Section with Vanta.js Background -->
        <section id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
            <div class="absolute inset-0 z-0" id="vanta-bg"></div>
            <div class="relative z-10 text-center text-white px-4">
                <h1 class="text-5xl md:text-7xl font-bold mb-6 drop-shadow-2xl">
                    CryptoSphere
                </h1>
                <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">
                    Real-time cryptocurrency tracking with Web3 integration and advanced analytics
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <button id="connect-wallet" class="bg-primary hover:bg-emerald-600 text-white px-8 py-4 rounded-2xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-2xl">
                    <i data-feather="wallet" class="inline mr-2"></i>
                    Connect Wallet
                </button>
                <a href="#market-overview" class="bg-secondary hover:bg-blue-600 text-white px-8 py-4 rounded-2xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-2xl">
                        Explore Markets
                    </a>
                </div>
            </div>
        </section>

        <!-- Market Overview Section -->
        <section id="market-overview" class="py-20 px-4">
            <div class="max-w-7xl mx-auto">
                <h2 class="text-4xl font-bold text-center mb-4 text-white">Live Market Overview</h2>
                <p class="text-xl text-center mb-12 text-gray-300">Real-time cryptocurrency data and analytics</p>
                
                <!-- Market Stats -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
                    <div class="crypto-card p-6 text-center">
                        <div class="text-3xl font-bold text-primary mb-2" id="global-market-cap">$2.1T</div>
                    <div class="text-sm text-gray-300">Total Market Cap</div>
                </div>
                <div class="crypto-card p-6 text-center">
                        <div class="text-3xl font-bold text-secondary mb-2" id="total-volume">$78.4B</div>
                    <div class="text-sm text-gray-300">24h Volume</div>
                </div>
                <div class="crypto-card p-6 text-center">
                        <div class="text-3xl font-bold text-accent mb-2" id="btc-dominance">52.3%</div>
                    <div class="text-sm text-gray-300">BTC Dominance</div>
                </div>
                <div class="crypto-card p-6 text-center">
                        <div class="text-3xl font-bold text-white mb-2" id="active-currencies">12,456</div>
                    <div class="text-sm text-gray-300">Active Currencies</div>
                </div>
                </div>

                <!-- Top Cryptocurrencies -->
                <div class="crypto-card p-8">
                    <h3 class="text-2xl font-bold text-white mb-6">Top Cryptocurrencies</h3>
                    <div id="crypto-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- Cryptocurrency cards will be dynamically loaded here -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Portfolio Section -->
        <section id="portfolio" class="py-20 px-4 bg-gray-800">
            <div class="max-w-7xl mx-auto">
                <h2 class="text-4xl font-bold text-center mb-4 text-white">Your Portfolio</h2>
                <div id="portfolio-container" class="crypto-card p-8">
                    <div class="text-center text-gray-400" id="portfolio-empty">
                    <i data-feather="pie-chart" class="w-16 h-16 mx-auto mb-4"></i>
                    <p>Connect your wallet to view your portfolio</p>
                </div>
            </div>
        </section>

        <!-- Analytics Section -->
        <section id="analytics" class="py-20 px-4">
            <div class="max-w-7xl mx-auto">
                <h2 class="text-4xl font-bold text-center mb-4 text-white">Advanced Analytics</h2>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="crypto-card p-8">
                        <h3 class="text-2xl font-bold text-white mb-6">Market Trends</h3>
                        <div id="price-chart" class="h-80 bg-gray-700 rounded-xl flex items-center justify-center text-gray-400">
                            Loading price charts...
                        </div>
                    </div>
                    
                    <div class="crypto-card p-8">
                        <h3 class="text-2xl font-bold text-white mb-6">Trading Volume</h3>
                        <div id="volume-chart" class="h-80 bg-gray-700 rounded-xl flex items-center justify-center text-gray-400">
                            Loading volume data...
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <crypto-footer></crypto-footer>

    <!-- Component Scripts -->
    <script src="components/crypto-navbar.js"></script>
    <script src="components/crypto-footer.js"></script>
    <script src="components/crypto-card.js"></script>
    
    <!-- Main Script -->
    <script src="crypto-script.js"></script>
    
    <script>
        feather.replace();
        
        // Initialize Vanta.js background
        VANTA.NET({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x10b981,
            backgroundColor: 0x111827,
            points: 12.00,
            maxDistance: 25.00,
            spacing: 18.00
        });
    </script>
</body>
</html>