diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..d862b8d Binary files /dev/null and b/.DS_Store differ diff --git a/task2/README.md b/task2/README.md new file mode 100644 index 0000000..6c4a6e4 --- /dev/null +++ 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 new file mode 100644 index 0000000..b75b514 Binary files /dev/null and b/task2/astro2.png differ diff --git a/task2/index.html b/task2/index.html new file mode 100644 index 0000000..f9d74e9 --- /dev/null +++ b/task2/index.html @@ -0,0 +1,53 @@ + + + + + + SAST Telemetry Mission Dashboard + + + + + + + + + +
+

🛰️ SAST CubeSat Telemetry Dashboard

+

Live Visualization of Satellite Temperature & Voltage

+
+ +
+ +
+

Temperature vs Time

+ +
+ +
+

Voltage vs Time

+ +
+ +
+

Telemetry Data Table

+ + + + + + + + + +
TimeTemperature (°C)Voltage (V)
+
+ +
+ + Astronaut + + + + diff --git a/task2/script.js b/task2/script.js new file mode 100644 index 0000000..7683a57 --- /dev/null +++ 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 += ` + + ${row.time} + ${row.temp} + ${row.voltage} + `; + }); + + // 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 new file mode 100644 index 0000000..9cfdf03 --- /dev/null +++ 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 new file mode 100644 index 0000000..f2fe0d6 --- /dev/null +++ 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 } +]