Hugging Face's logo

Spaces:
Prince9868
/
cosmic-data-explorer
Running

App Files Community
cosmic-data-explorer
File size: 7,855 Bytes
6f9e033
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1df7bd6
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
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cosmic Data Explorer</title>
    <link rel="icon" type="image/x-icon" href="https://static.photos/space/200x200/1">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Space Grotesk', sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #000428 0%, #004e92 100%);
        }
        .data-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
        }
        .glow {
            box-shadow: 0 0 15px rgba(0, 186, 255, 0.5);
        }
    </style>
</head>
<body class="gradient-bg text-white min-h-screen">
    <div id="vanta-bg"></div>
    
    <div class="container mx-auto px-4 py-12 relative z-10">
        <!-- Header -->
        <header class="flex flex-col items-center justify-center mb-16">
            <div class="flex items-center space-x-4 mb-6">
                <i data-feather="activity" class="w-12 h-12 text-cyan-400"></i>
                <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
                    Cosmic Data Explorer
                </h1>
            </div>
            <p class="text-xl text-center max-w-2xl text-blue-100">
                Visualize and analyze NASA experiment data with interactive dashboards
            </p>
        </header>

        <!-- Main Content -->
        <main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Upload Card -->
            <div class="data-card bg-gray-800 rounded-xl p-6 transition-all duration-300 border border-blue-400/20 hover:glow">
                <div class="flex items-center mb-4">
                    <div class="p-3 rounded-lg bg-blue-900/30 mr-4">
                        <i data-feather="upload" class="w-6 h-6 text-blue-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold">Upload Your Data</h3>
                </div>
                <p class="text-blue-100 mb-6">Import your CSV files containing NASA experiment data</p>
                <div class="relative border-2 border-dashed border-blue-400/30 rounded-lg p-8 text-center cursor-pointer hover:bg-blue-900/10 transition-colors">
                    <i data-feather="file-plus" class="w-10 h-10 mx-auto text-blue-400 mb-3"></i>
                    <p class="text-sm">Drag & drop CSV files here</p>
                    <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept=".csv">
                </div>
                <p class="text-xs text-blue-300 mt-3">Supports: experiment IDs, biological measurements, mission records</p>
            </div>

            <!-- Dashboard Card -->
            <div class="data-card bg-gray-800 rounded-xl p-6 transition-all duration-300 border border-purple-400/20 hover:glow">
                <div class="flex items-center mb-4">
                    <div class="p-3 rounded-lg bg-purple-900/30 mr-4">
                        <i data-feather="pie-chart" class="w-6 h-6 text-purple-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold">Interactive Dashboard</h3>
                </div>
                <p class="text-blue-100 mb-6">Explore experiment statistics with dynamic visualizations</p>
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-sm">Experiments:</span>
                        <span class="font-mono text-purple-300">1,284</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm">Organisms:</span>
                        <span class="font-mono text-purple-300">42</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm">Missions:</span>
                        <span class="font-mono text-purple-300">18</span>
                    </div>
                </div>
                <a href="dashboard.html" class="mt-6 inline-flex items-center text-purple-400 hover:text-purple-300 transition-colors">
                    Explore Dashboard
                    <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
                </a>
            </div>

            <!-- Analysis Card -->
            <div class="data-card bg-gray-800 rounded-xl p-6 transition-all duration-300 border border-green-400/20 hover:glow">
                <div class="flex items-center mb-4">
                    <div class="p-3 rounded-lg bg-green-900/30 mr-4">
                        <i data-feather="bar-chart-2" class="w-6 h-6 text-green-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold">Advanced Analysis</h3>
                </div>
                <p class="text-blue-100 mb-6">Perform statistical analysis on biological measurements</p>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <div class="w-2 h-2 rounded-full bg-green-400 mr-2"></div>
                        <span class="text-sm">Correlation analysis</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-2 h-2 rounded-full bg-green-400 mr-2"></div>
                        <span class="text-sm">Time series visualization</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-2 h-2 rounded-full bg-green-400 mr-2"></div>
                        <span class="text-sm">ANOVA testing</span>
                    </div>
                </div>
                <a href="analysis.html" class="mt-6 inline-flex items-center text-green-400 hover:text-green-300 transition-colors">
                    Run Analysis
                    <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
                </a>
            </div>
        </main>

        <!-- Footer -->
        <footer class="mt-24 text-center text-blue-300 text-sm">
            <p>Built for NASA Open Science Initiative</p>
            <p class="mt-2">© 2023 Cosmic Data Explorer 🚀</p>
        </footer>
    </div>

    <script>
        // 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: 0x3b82f6,
            backgroundColor: 0x111827,
            points: 12.00,
            maxDistance: 22.00,
            spacing: 17.00
        });

        // Initialize feather icons
        feather.replace();

        // File upload interaction
        document.querySelector('input[type="file"]').addEventListener('change', function(e) {
            if (this.files.length > 0) {
                // In a real app, you would process the CSV file here
                alert('CSV file ready for analysis! Redirecting to dashboard...');
                window.location.href = 'dashboard.html';
            }
        });
    </script>
</body>
</html>