Hugging Face's logo

Spaces:
vinnitu
/
cosmic-telemetry-dashboard
Running

App Files Community
vinnitu commited on
Commit
2f603b6
·
verified ·
1 Parent(s): f422d7f

make space telemetry screen

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. index.html +250 -19
  3. script.js +88 -0
  4. style.css +19 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Cosmic Telemetry Dashboard
3
- emoji: 🔥
4
- colorFrom: blue
5
- colorTo: yellow
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: Cosmic Telemetry Dashboard 🚀
3
+ colorFrom: yellow
4
+ colorTo: gray
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,250 @@
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>Cosmic Telemetry Dashboard</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>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ cosmic: {
17
+ 100: '#e0f2fe',
18
+ 200: '#bae6fd',
19
+ 300: '#7dd3fc',
20
+ 400: '#38bdf8',
21
+ 500: '#0ea5e9',
22
+ 600: '#0284c7',
23
+ 700: '#0369a1',
24
+ 800: '#075985',
25
+ 900: '#0c4a6e',
26
+ },
27
+ nebula: {
28
+ 500: '#7e22ce',
29
+ 600: '#6b21a8',
30
+ 700: '#581c87',
31
+ }
32
+ }
33
+ }
34
+ }
35
+ }
36
+ </script>
37
+ </head>
38
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
39
+ <div class="container mx-auto px-4 py-8">
40
+ <header class="flex justify-between items-center mb-8">
41
+ <h1 class="text-3xl font-bold text-cosmic-400">
42
+ <i data-feather="activity" class="inline mr-2"></i>
43
+ Cosmic Telemetry Dashboard
44
+ </h1>
45
+ <div class="flex items-center space-x-4">
46
+ <span class="text-sm text-gray-400">Mission Control</span>
47
+ <div class="w-10 h-10 rounded-full bg-nebula-500 flex items-center justify-center">
48
+ <i data-feather="user"></i>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
54
+ <!-- Status Card -->
55
+ <div class="bg-gray-800 rounded-lg p-6 border-l-4 border-cosmic-500">
56
+ <div class="flex justify-between items-start">
57
+ <div>
58
+ <h3 class="text-gray-400 text-sm">Vessel Status</h3>
59
+ <p class="text-2xl font-bold text-cosmic-400">Nominal</p>
60
+ </div>
61
+ <i data-feather="check-circle" class="text-green-500"></i>
62
+ </div>
63
+ <div class="mt-4">
64
+ <div class="flex justify-between text-xs text-gray-400 mb-1">
65
+ <span>Systems</span>
66
+ <span>100%</span>
67
+ </div>
68
+ <div class="w-full bg-gray-700 rounded-full h-2">
69
+ <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Location Card -->
75
+ <div class="bg-gray-800 rounded-lg p-6 border-l-4 border-nebula-500">
76
+ <div class="flex justify-between items-start">
77
+ <div>
78
+ <h3 class="text-gray-400 text-sm">Current Location</h3>
79
+ <p class="text-2xl font-bold text-nebula-400">Orbit: LEO</p>
80
+ </div>
81
+ <i data-feather="map-pin" class="text-purple-500"></i>
82
+ </div>
83
+ <div class="mt-4">
84
+ <div class="flex justify-between text-xs text-gray-400 mb-1">
85
+ <span>Altitude</span>
86
+ <span>408 km</span>
87
+ </div>
88
+ <div class="w-full bg-gray-700 rounded-full h-2">
89
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 65%"></div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Velocity Card -->
95
+ <div class="bg-gray-800 rounded-lg p-6 border-l-4 border-indigo-500">
96
+ <div class="flex justify-between items-start">
97
+ <div>
98
+ <h3 class="text-gray-400 text-sm">Velocity</h3>
99
+ <p class="text-2xl font-bold text-indigo-400">7.8 km/s</p>
100
+ </div>
101
+ <i data-feather="wind" class="text-indigo-500"></i>
102
+ </div>
103
+ <div class="mt-4">
104
+ <div class="flex justify-between text-xs text-gray-400 mb-1">
105
+ <span>Relative to Earth</span>
106
+ <span>Mach 23</span>
107
+ </div>
108
+ <div class="w-full bg-gray-700 rounded-full h-2">
109
+ <div class="bg-indigo-500 h-2 rounded-full" style="width: 78%"></div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Telemetry Grid -->
116
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
117
+ <!-- Telemetry Chart -->
118
+ <div class="bg-gray-800 rounded-lg p-6">
119
+ <div class="flex justify-between items-center mb-4">
120
+ <h3 class="text-lg font-semibold text-cosmic-300">Orbital Telemetry</h3>
121
+ <div class="flex space-x-2">
122
+ <button class="px-3 py-1 bg-gray-700 rounded text-xs">1D</button>
123
+ <button class="px-3 py-1 bg-cosmic-600 rounded text-xs">1W</button>
124
+ <button class="px-3 py-1 bg-gray-700 rounded text-xs">1M</button>
125
+ </div>
126
+ </div>
127
+ <div class="h-64">
128
+ <canvas id="telemetryChart"></canvas>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- System Status -->
133
+ <div class="bg-gray-800 rounded-lg p-6">
134
+ <h3 class="text-lg font-semibold text-cosmic-300 mb-4">System Status</h3>
135
+ <div class="space-y-4">
136
+ <div>
137
+ <div class="flex justify-between text-sm mb-1">
138
+ <span>Life Support</span>
139
+ <span class="text-green-400">100%</span>
140
+ </div>
141
+ <div class="w-full bg-gray-700 rounded-full h-2">
142
+ <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
143
+ </div>
144
+ </div>
145
+ <div>
146
+ <div class="flex justify-between text-sm mb-1">
147
+ <span>Power Systems</span>
148
+ <span class="text-green-400">98%</span>
149
+ </div>
150
+ <div class="w-full bg-gray-700 rounded-full h-2">
151
+ <div class="bg-green-500 h-2 rounded-full" style="width: 98%"></div>
152
+ </div>
153
+ </div>
154
+ <div>
155
+ <div class="flex justify-between text-sm mb-1">
156
+ <span>Navigation</span>
157
+ <span class="text-yellow-400">87%</span>
158
+ </div>
159
+ <div class="w-full bg-gray-700 rounded-full h-2">
160
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 87%"></div>
161
+ </div>
162
+ </div>
163
+ <div>
164
+ <div class="flex justify-between text-sm mb-1">
165
+ <span>Communications</span>
166
+ <span class="text-red-400">72%</span>
167
+ </div>
168
+ <div class="w-full bg-gray-700 rounded-full h-2">
169
+ <div class="bg-red-500 h-2 rounded-full" style="width: 72%"></div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Alerts -->
176
+ <div class="bg-gray-800 rounded-lg p-6">
177
+ <h3 class="text-lg font-semibold text-cosmic-300 mb-4">Alerts</h3>
178
+ <div class="space-y-3">
179
+ <div class="flex items-start p-3 bg-gray-700 rounded">
180
+ <div class="mr-3 text-yellow-500">
181
+ <i data-feather="alert-triangle"></i>
182
+ </div>
183
+ <div>
184
+ <p class="font-medium">Solar flare detected</p>
185
+ <p class="text-sm text-gray-400">Potential communication disruption in 2 hours</p>
186
+ </div>
187
+ </div>
188
+ <div class="flex items-start p-3 bg-gray-700 rounded">
189
+ <div class="mr-3 text-red-500">
190
+ <i data-feather="alert-octagon"></i>
191
+ </div>
192
+ <div>
193
+ <p class="font-medium">Debris field ahead</p>
194
+ <p class="text-sm text-gray-400">Course correction recommended</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Crew Status -->
201
+ <div class="bg-gray-800 rounded-lg p-6">
202
+ <h3 class="text-lg font-semibold text-cosmic-300 mb-4">Crew Status</h3>
203
+ <div class="grid grid-cols-2 gap-4">
204
+ <div class="flex items-center space-x-3 p-2 bg-gray-700 rounded">
205
+ <div class="w-10 h-10 rounded-full bg-nebula-600 flex items-center justify-center">
206
+ <i data-feather="user"></i>
207
+ </div>
208
+ <div>
209
+ <p class="font-medium">Cmdr. Smith</p>
210
+ <p class="text-xs text-gray-400">On duty</p>
211
+ </div>
212
+ </div>
213
+ <div class="flex items-center space-x-3 p-2 bg-gray-700 rounded">
214
+ <div class="w-10 h-10 rounded-full bg-nebula-600 flex items-center justify-center">
215
+ <i data-feather="user"></i>
216
+ </div>
217
+ <div>
218
+ <p class="font-medium">Dr. Chen</p>
219
+ <p class="text-xs text-gray-400">Resting</p>
220
+ </div>
221
+ </div>
222
+ <div class="flex items-center space-x-3 p-2 bg-gray-700 rounded">
223
+ <div class="w-10 h-10 rounded-full bg-nebula-600 flex items-center justify-center">
224
+ <i data-feather="user"></i>
225
+ </div>
226
+ <div>
227
+ <p class="font-medium">Eng. Rodriguez</p>
228
+ <p class="text-xs text-gray-400">Maintenance</p>
229
+ </div>
230
+ </div>
231
+ <div class="flex items-center space-x-3 p-2 bg-gray-700 rounded">
232
+ <div class="w-10 h-10 rounded-full bg-nebula-600 flex items-center justify-center">
233
+ <i data-feather="user"></i>
234
+ </div>
235
+ <div>
236
+ <p class="font-medium">Sci. Patel</p>
237
+ <p class="text-xs text-gray-400">Experiment</p>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
246
+ <script src="script.js"></script>
247
+ <script>feather.replace();</script>
248
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
249
+ </body>
250
+ </html>
script.js ADDED
@@ -0,0 +1,88 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Initialize telemetry chart
3
+ const ctx = document.getElementById('telemetryChart').getContext('2d');
4
+ const telemetryChart = new Chart(ctx, {
5
+ type: 'line',
6
+ data: {
7
+ labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
8
+ datasets: [
9
+ {
10
+ label: 'Temperature (°C)',
11
+ data: [18, 20, 22, 24, 23, 21, 19],
12
+ borderColor: '#0ea5e9',
13
+ backgroundColor: 'rgba(14, 165, 233, 0.1)',
14
+ tension: 0.3,
15
+ fill: true
16
+ },
17
+ {
18
+ label: 'Pressure (kPa)',
19
+ data: [101, 101.2, 101.1, 101.3, 101.2, 101.1, 101],
20
+ borderColor: '#7e22ce',
21
+ backgroundColor: 'rgba(126, 34, 206, 0.1)',
22
+ tension: 0.3,
23
+ fill: true
24
+ },
25
+ {
26
+ label: 'Radiation (μSv)',
27
+ data: [0.8, 0.9, 1.1, 1.3, 1.2, 1.0, 0.9],
28
+ borderColor: '#10b981',
29
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
30
+ tension: 0.3,
31
+ fill: true
32
+ }
33
+ ]
34
+ },
35
+ options: {
36
+ responsive: true,
37
+ maintainAspectRatio: false,
38
+ plugins: {
39
+ legend: {
40
+ position: 'top',
41
+ labels: {
42
+ color: '#e2e8f0'
43
+ }
44
+ }
45
+ },
46
+ scales: {
47
+ x: {
48
+ grid: {
49
+ color: 'rgba(74, 85, 104, 0.3)'
50
+ },
51
+ ticks: {
52
+ color: '#a0aec0'
53
+ }
54
+ },
55
+ y: {
56
+ grid: {
57
+ color: 'rgba(74, 85, 104, 0.3)'
58
+ },
59
+ ticks: {
60
+ color: '#a0aec0'
61
+ }
62
+ }
63
+ }
64
+ }
65
+ });
66
+
67
+ // Simulate real-time data updates
68
+ setInterval(() => {
69
+ const now = new Date();
70
+ const hours = now.getHours().toString().padStart(2, '0');
71
+ const minutes = now.getMinutes().toString().padStart(2, '0');
72
+ const timeLabel = `${hours}:${minutes}`;
73
+
74
+ // Add new data point and remove oldest
75
+ telemetryChart.data.labels.push(timeLabel);
76
+ telemetryChart.data.labels.shift();
77
+
78
+ telemetryChart.data.datasets.forEach(dataset => {
79
+ const lastValue = dataset.data[dataset.data.length - 1];
80
+ const fluctuation = (Math.random() - 0.5) * 2;
81
+ const newValue = Math.max(0, lastValue + fluctuation);
82
+ dataset.data.push(newValue);
83
+ dataset.data.shift();
84
+ });
85
+
86
+ telemetryChart.update();
87
+ }, 5000);
88
+ });
style.css CHANGED
@@ -1,28 +1,29 @@
 
 
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=Space+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Space Grotesk', sans-serif;
 
5
  }
6
 
7
+ canvas {
8
+ width: 100% !important;
9
+ height: 100% !important;
10
  }
11
 
12
+ /* Custom scrollbar */
13
+ ::-webkit-scrollbar {
14
+ width: 8px;
15
+ height: 8px;
 
16
  }
17
 
18
+ ::-webkit-scrollbar-track {
19
+ background: #1a202c;
 
 
 
 
20
  }
21
 
22
+ ::-webkit-scrollbar-thumb {
23
+ background: #4a5568;
24
+ border-radius: 4px;
25
  }
26
+
27
+ ::-webkit-scrollbar-thumb:hover {
28
+ background: #718096;
29
+ }