SASTxNST · Aggarwalmansi · Nov 18, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/task2/README.md b/task2/README.md
@@ -0,0 +1,6 @@
+# SAST — Satellite Telemetry Dashboard
+
+This project visualizes mock telemetry data for a fictional SAST CubeSat.
+It shows two charts: Temperature vs Time and Voltage vs Time, plus a data table.
+
+
diff --git a/task2/astro2.png b/task2/astro2.png
diff --git a/task2/index.html b/task2/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SAST Telemetry Mission Dashboard</title>
+    <link rel="stylesheet" href="style.css">
+
+    <!-- Chart.js CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+
+    <canvas id="stars"></canvas>
+
+    <header>
+        <h1>🛰️ SAST CubeSat Telemetry Dashboard</h1>
+        <p>Live Visualization of Satellite Temperature & Voltage</p>
+    </header>
+
+    <div class="main-container">
+
+        <div class="chart-card">
+            <h2>Temperature vs Time</h2>
+            <canvas id="tempChart"></canvas>
+        </div>
+
+        <div class="chart-card">
+            <h2>Voltage vs Time</h2>
+            <canvas id="voltChart"></canvas>
+        </div>
+
+        <div class="table-card">
+            <h2>Telemetry Data Table</h2>
+            <table id="dataTable">
+                <thead>
+                    <tr>
+                        <th>Time</th>
+                        <th>Temperature (°C)</th>
+                        <th>Voltage (V)</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+
+    </div>
+
+    <img src="astro2.png" class="astronaut" alt="Astronaut">
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/task2/script.js b/task2/script.js
@@ -0,0 +1,102 @@
+// ⭐ STARFIELD BACKGROUND
+const canvas = document.getElementById("stars");
+const ctx = canvas.getContext("2d");
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+let stars = [];
+
+for (let i = 0; i < 150; i++) {
+    stars.push({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        size: Math.random() * 2,
+        speed: Math.random() * 0.4
+    });
+}
+
+function animateStars() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    stars.forEach(s => {
+        ctx.fillStyle = "white";
+        ctx.fillRect(s.x, s.y, s.size, s.size);
+        s.y += s.speed;
+        if (s.y > canvas.height) s.y = 0;
+    });
+    requestAnimationFrame(animateStars);
+}
+
+animateStars();
+
+// ⭐ LOAD TELEMETRY DATA
+fetch("telemetry.json")
+    .then(res => res.json())
+    .then(data => {
+        const labels = data.map(d => d.time);
+        const temps = data.map(d => d.temp);
+        const volts = data.map(d => d.voltage);
+
+        // Fill Table
+        const tableBody = document.querySelector("#dataTable tbody");
+        data.forEach(row => {
+            tableBody.innerHTML += `
+                <tr>
+                    <td>${row.time}</td>
+                    <td>${row.temp}</td>
+                    <td>${row.voltage}</td>
+                </tr>`;
+        });
+
+        // Temperature Chart
+        new Chart(document.getElementById("tempChart"), {
+            type: "line",
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: "Temperature (°C)",
+                    data: temps,
+                    borderColor: "#00baff",
+                    borderWidth: 3,
+                    tension: 0.35,
+                    fill: false,
+                    pointRadius: 4,
+                    pointBackgroundColor: "#00baff"
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: { legend: { labels: { color: "#fff" } } },
+                scales: {
+                    x: { ticks: { color: "#fff" } },
+                    y: { ticks: { color: "#fff" } }
+                }
+            }
+        });
+
+        // Voltage Chart
+        new Chart(document.getElementById("voltChart"), {
+            type: "line",
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: "Voltage (V)",
+                    data: volts,
+                    borderColor: "#ff6f61",
+                    borderWidth: 3,
+                    tension: 0.35,
+                    fill: false,
+                    pointRadius: 4,
+                    pointBackgroundColor: "#ff6f61"
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: { legend: { labels: { color: "#fff" } } },
+                scales: {
+                    x: { ticks: { color: "#fff" } },
+                    y: { ticks: { color: "#fff" } }
+                }
+            }
+        });
+    });
diff --git a/task2/style.css b/task2/style.css
@@ -0,0 +1,84 @@
+body {
+    margin: 0;
+    background: radial-gradient(circle at center, #0a0f24, #000000 70%);
+    font-family: 'Segoe UI', sans-serif;
+    color: #ffffff;
+    overflow-x: hidden;
+}
+
+/* STAR BACKGROUND */
+#stars {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+/* HEADER */
+header {
+    text-align: center;
+    padding: 30px 20px;
+    color: #a3d9ff;
+    text-shadow: 0 0 15px #00b7ff;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    letter-spacing: 2px;
+}
+
+.main-container {
+    width: 90%;
+    margin: auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+
+/* CARDS */
+.chart-card, .table-card {
+    background: rgba(15, 30, 60, 0.6);
+    border-radius: 16px;
+    padding: 20px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 0 20px rgba(0, 150, 255, 0.4);
+}
+
+.chart-card h2, .table-card h2 {
+    text-align: center;
+    color: #7cc9ff;
+    text-shadow: 0 0 12px #009dff;
+}
+
+/* TABLE */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 15px;
+}
+
+th, td {
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+}
+
+/* Astronaut Floating */
+.astronaut {
+  position: fixed;
+  bottom: 20px;      /* Always visible but NOT covering charts */
+  right: 20px;       /* Moves fully to corner */
+  width: 160px;      /* Reduce size */
+  height: auto;
+  opacity: 0.5;
+  border-radius: 12px;
+  box-shadow: 0 0 25px rgba(0, 200, 255, 0.5);
+  animation: float 4s ease-in-out infinite;
+  z-index: 10;       /* keeps it above but out of the way */
+}
+
+@keyframes float {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-12px); }
+  100% { transform: translateY(0); }
+}
diff --git a/task2/telemetry.json b/task2/telemetry.json
@@ -0,0 +1,14 @@
+[
+  { "time": "10:00", "temp": 22, "voltage": 3.7 },
+  { "time": "10:10", "temp": 23, "voltage": 3.7 },
+  { "time": "10:20", "temp": 24, "voltage": 3.6 },
+  { "time": "10:30", "temp": 25, "voltage": 3.6 },
+  { "time": "10:40", "temp": 27, "voltage": 3.5 },
+  { "time": "10:50", "temp": 29, "voltage": 3.5 },
+  { "time": "11:00", "temp": 30, "voltage": 3.4 },
+  { "time": "11:10", "temp": 31, "voltage": 3.4 },
+  { "time": "11:20", "temp": 33, "voltage": 3.3 },
+  { "time": "11:30", "temp": 35, "voltage": 3.3 },
+  { "time": "11:40", "temp": 36, "voltage": 3.2 },
+  { "time": "11:50", "temp": 37, "voltage": 3.2 }
+]