diff --git a/Readme.md b/Readme.md
index bddc0c7..c93825d 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1 +1,32 @@
-You can submit your assignments in your respective folders similar to your branch name
+# SAST CubeSat Telemetry Dashboard
+
+## Overview
+A web-based dashboard for visualizing satellite telemetry data from a fictional SAST CubeSat mission.
+
+## Features
+- Real-time temperature monitoring
+- Battery voltage tracking
+- Responsive design for mobile/desktop
+- Status indicators for satellite health
+- Interactive charts with Chart.js
+- Data table for detailed readings
+
+## Technologies Used
+- HTML5, CSS3, JavaScript (ES6)
+- Chart.js 4.4.0 for data visualization
+- CSS Grid for responsive layout
+- JSON for data storage
+
+## How to Run
+1. Open `index.html` in a web browser
+2. Dashboard will load with sample telemetry data
+3. To use custom data, replace `telemetryData` array with loaded JSON
+
+## Future Improvements
+- WebSocket integration for real-time updates
+- Alert system for threshold violations
+- Historical data analysis
+- Export functionality for reports
+
+## Author
+[Kavyansh] - SAST Technical Team Intake 2025
diff --git a/Satellite Telemetry Dashboard/index2.html b/Satellite Telemetry Dashboard/index2.html
new file mode 100644
index 0000000..84940bc
--- /dev/null
+++ b/Satellite Telemetry Dashboard/index2.html	
@@ -0,0 +1,1088 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SAST CubeSat Telemetry Dashboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+        :root {
+            --spacex-blue: #005288;
+            --spacex-light-blue: #0077c8;
+            --accent-cyan: #00d4ff;
+            --white: #ffffff;
+            --off-white: #f5f5f5;
+            --gray-light: #8b8b8b;
+            --gray-medium: #5a5a5a;
+            --black: #000000;
+            --success: #00c853;
+            --warning: #ffa000;
+            --danger: #ff1744;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--black);
+            color: var(--white);
+            min-height: 100vh;
+            overflow-x: hidden;
+            line-height: 1.6;
+        }
+
+        /* Video Background */
+        .video-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: 0;
+        }
+
+        .video-background video {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            min-width: 100%;
+            min-height: 100%;
+            width: auto;
+            height: auto;
+            transform: translate(-50%, -50%);
+            object-fit: cover;
+        }
+
+        .video-background::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to bottom, 
+                rgba(0, 0, 0, 0.7) 0%,
+                rgba(0, 0, 0, 0.5) 50%,
+                rgba(0, 0, 0, 0.8) 100%);
+            pointer-events: none;
+        }
+
+        /* Fallback animated background if video doesn't load */
+        .animated-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 
+                radial-gradient(ellipse at top, rgba(0, 82, 136, 0.15), transparent 50%),
+                radial-gradient(ellipse at bottom, rgba(0, 119, 200, 0.1), transparent 50%),
+                linear-gradient(180deg, #000000, #001122);
+            z-index: 0;
+        }
+
+        .stars-layer {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: 0;
+        }
+
+        .stars-layer::before,
+        .stars-layer::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
+                radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.6), transparent),
+                radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.4), transparent),
+                radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.5), transparent),
+                radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.7), transparent);
+            background-size: 300% 300%;
+            animation: stars-float 20s ease-in-out infinite;
+        }
+
+        .stars-layer::after {
+            animation-delay: 5s;
+            opacity: 0.5;
+        }
+
+        @keyframes stars-float {
+            0%, 100% { transform: translate(0, 0); opacity: 0.3; }
+            50% { transform: translate(-20px, -20px); opacity: 0.8; }
+        }
+
+        /* Main Container */
+        .container {
+            position: relative;
+            z-index: 1;
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        /* Smooth Scroll Animations */
+        .fade-in-up {
+            opacity: 0;
+            transform: translateY(40px);
+            animation: fadeInUp 0.8s ease-out forwards;
+        }
+
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .fade-in-up:nth-child(1) { animation-delay: 0.1s; }
+        .fade-in-up:nth-child(2) { animation-delay: 0.2s; }
+        .fade-in-up:nth-child(3) { animation-delay: 0.3s; }
+        .fade-in-up:nth-child(4) { animation-delay: 0.4s; }
+
+        /* Header */
+        header {
+            text-align: center;
+            padding: 80px 20px 50px;
+            margin-bottom: 50px;
+            position: relative;
+        }
+
+        header::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 3px;
+            background: linear-gradient(90deg, transparent, var(--spacex-light-blue), transparent);
+        }
+
+        header h1 {
+            font-size: clamp(2.5rem, 6vw, 4.5rem);
+            font-weight: 900;
+            letter-spacing: -2px;
+            margin-bottom: 15px;
+            color: var(--white);
+            text-transform: uppercase;
+            background: linear-gradient(135deg, var(--white) 30%, var(--accent-cyan) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 0 0 40px rgba(0, 212, 255, 0.3);
+        }
+
+        header p {
+            font-size: 1.1rem;
+            color: var(--gray-light);
+            font-weight: 400;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        /* Upload Section */
+        .upload-section {
+            margin-top: 40px;
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+
+        .upload-zone {
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(20px);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 40px 60px;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .upload-zone::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 119, 200, 0.2), transparent);
+            transition: left 0.6s ease;
+        }
+
+        .upload-zone:hover::before,
+        .upload-zone.drag-over::before {
+            left: 100%;
+        }
+
+        .upload-zone:hover,
+        .upload-zone.drag-over {
+            border-color: var(--spacex-light-blue);
+            background: rgba(0, 82, 136, 0.2);
+            transform: translateY(-3px);
+            box-shadow: 0 10px 40px rgba(0, 119, 200, 0.3);
+        }
+
+        .upload-controls {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+            position: relative;
+            z-index: 1;
+        }
+
+        .btn {
+            padding: 14px 32px;
+            border: none;
+            border-radius: 0;
+            font-weight: 700;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            font-family: inherit;
+            letter-spacing: 1.5px;
+            text-transform: uppercase;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s ease;
+        }
+
+        .btn:hover::before {
+            left: 100%;
+        }
+
+        .btn-primary {
+            background: var(--white);
+            color: var(--black);
+            border: 2px solid var(--white);
+        }
+
+        .btn-primary:hover {
+            background: var(--spacex-light-blue);
+            color: var(--white);
+            border-color: var(--spacex-light-blue);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(0, 119, 200, 0.4);
+        }
+
+        .btn-secondary {
+            background: transparent;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            color: var(--white);
+        }
+
+        .btn-secondary:hover {
+            border-color: var(--white);
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .upload-status {
+            margin-top: 20px;
+            color: var(--gray-light);
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 500;
+        }
+
+        .upload-status.success { color: var(--success); }
+        .upload-status.error { color: var(--danger); }
+
+        /* Status Grid */
+        .status-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            gap: 25px;
+            margin-bottom: 50px;
+        }
+
+        .stat-card {
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-left: 3px solid var(--spacex-light-blue);
+            padding: 30px;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 119, 200, 0.1));
+            transition: width 0.4s ease;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-5px) scale(1.02);
+            border-left-color: var(--accent-cyan);
+            box-shadow: 0 15px 40px rgba(0, 119, 200, 0.3);
+        }
+
+        .stat-card:hover::before {
+            width: 100%;
+        }
+
+        .stat-label {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: var(--gray-light);
+            margin-bottom: 12px;
+            font-weight: 600;
+        }
+
+        .stat-value {
+            font-size: 2.5rem;
+            font-weight: 800;
+            letter-spacing: -1px;
+            color: var(--white);
+        }
+
+        .stat-card.temp .stat-value { 
+            color: var(--warning);
+            text-shadow: 0 0 20px rgba(255, 160, 0, 0.4);
+        }
+        .stat-card.voltage .stat-value { 
+            color: var(--success);
+            text-shadow: 0 0 20px rgba(0, 200, 83, 0.4);
+        }
+        .stat-card.status .stat-value { 
+            color: var(--accent-cyan);
+            text-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
+        }
+        .stat-card.caution .stat-value { 
+            color: var(--danger);
+            text-shadow: 0 0 20px rgba(255, 23, 68, 0.4);
+        }
+
+        /* Charts */
+        .charts-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+            gap: 30px;
+            margin-bottom: 50px;
+        }
+
+        .chart-card {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 35px;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .chart-card::after {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(135deg, var(--spacex-light-blue), var(--accent-cyan));
+            opacity: 0;
+            transition: opacity 0.4s ease;
+            z-index: -1;
+        }
+
+        .chart-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 60px rgba(0, 119, 200, 0.4);
+        }
+
+        .chart-card:hover::after {
+            opacity: 0.1;
+        }
+
+        .chart-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .chart-icon {
+            font-size: 1.8rem;
+            filter: drop-shadow(0 0 10px currentColor);
+        }
+
+        .chart-title {
+            font-size: 1.3rem;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+            text-transform: uppercase;
+            color: var(--white);
+        }
+
+        canvas {
+            max-width: 100%;
+            height: auto !important;
+        }
+
+        /* Data Table */
+        .table-container {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 35px;
+            overflow: hidden;
+        }
+
+        .table-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .table-header h2 {
+            font-size: 1.3rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .table-wrapper {
+            overflow-x: auto;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+
+        thead {
+            background: linear-gradient(135deg, rgba(0, 82, 136, 0.3), rgba(0, 119, 200, 0.3));
+        }
+
+        th {
+            padding: 18px;
+            text-align: left;
+            font-weight: 700;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1.5px;
+            color: var(--white);
+            border-bottom: 2px solid var(--spacex-light-blue);
+        }
+
+        td {
+            padding: 18px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            font-size: 0.95rem;
+            color: var(--off-white);
+        }
+
+        tbody tr {
+            transition: all 0.3s ease;
+            background: transparent;
+        }
+
+        tbody tr:hover {
+            background: rgba(0, 119, 200, 0.1);
+            transform: scale(1.01);
+        }
+
+        .status-badge {
+            padding: 6px 14px;
+            border-radius: 2px;
+            font-size: 0.75rem;
+            font-weight: 700;
+            display: inline-block;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .status-normal { 
+            background: rgba(0, 200, 83, 0.2); 
+            color: var(--success);
+            border-left: 3px solid var(--success);
+        }
+        .status-warning { 
+            background: rgba(255, 160, 0, 0.2); 
+            color: var(--warning);
+            border-left: 3px solid var(--warning);
+        }
+        .status-danger { 
+            background: rgba(255, 23, 68, 0.2); 
+            color: var(--danger);
+            border-left: 3px solid var(--danger);
+        }
+
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 50px 20px;
+            color: var(--gray-medium);
+            font-size: 0.85rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+            margin-top: 80px;
+        }
+
+        footer p {
+            margin: 10px 0;
+            letter-spacing: 0.5px;
+        }
+
+        /* Loading Overlay */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.95);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+            backdrop-filter: blur(10px);
+        }
+
+        .loading-overlay.active {
+            display: flex;
+        }
+
+        .spinner {
+            width: 70px;
+            height: 70px;
+            border: 4px solid rgba(255, 255, 255, 0.1);
+            border-top-color: var(--spacex-light-blue);
+            border-radius: 50%;
+            animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .container {
+                padding: 15px;
+            }
+
+            header {
+                padding: 60px 20px 40px;
+            }
+
+            header h1 {
+                font-size: 2rem;
+            }
+
+            .charts-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .status-grid {
+                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            }
+
+            .stat-value {
+                font-size: 2rem;
+            }
+
+            .upload-zone {
+                padding: 30px 20px;
+            }
+
+            .btn {
+                width: 100%;
+                padding: 12px 20px;
+            }
+
+            th, td {
+                padding: 12px 10px;
+                font-size: 0.85rem;
+            }
+
+            .chart-card,
+            .table-container {
+                padding: 20px;
+            }
+        }
+
+        /* Scroll Reveal Animation */
+        .reveal {
+            opacity: 0;
+            transform: translateY(50px);
+            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .reveal.active {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    </style>
+</head>
+<body>
+    <!-- Video Background -->
+    <div class="video-background">
+        <video autoplay muted loop playsinline id="bgVideo">
+            <source src="https://www.spacex.com/media/mission_reusability.mp4" type="video/mp4">
+        </video>
+    </div>
+    
+    <!-- Fallback animated background -->
+    <div class="animated-bg"></div>
+    <div class="stars-layer"></div>
+
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="spinner"></div>
+    </div>
+
+    <div class="container">
+        <header class="fade-in-up">
+            <h1>CUBESAT MISSION CONTROL</h1>
+            <p>Real-time Telemetry & Health Monitoring</p>
+            
+            <div class="upload-section">
+                <div class="upload-zone" id="uploadZone">
+                    <input type="file" id="fileInput" accept=".json" style="display:none;">
+                    <div class="upload-controls">
+                        <button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
+                            Upload Data
+                        </button>
+                        <button class="btn btn-secondary" id="downloadBtn">
+                            Sample File
+                        </button>
+                        <button class="btn btn-secondary" id="clearBtn">
+                            Clear
+                        </button>
+                    </div>
+                    <div class="upload-status" id="uploadStatus">
+                        Drag & Drop JSON File or Click Upload
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <div class="status-grid reveal">
+            <div class="stat-card temp">
+                <div class="stat-label">Temperature</div>
+                <div class="stat-value" id="currentTemp">--°C</div>
+            </div>
+            <div class="stat-card voltage">
+                <div class="stat-label">Power System</div>
+                <div class="stat-value" id="currentVoltage">--V</div>
+            </div>
+            <div class="stat-card status">
+                <div class="stat-label">Data Points</div>
+                <div class="stat-value" id="dataPoints">--</div>
+            </div>
+            <div class="stat-card status" id="missionCard">
+                <div class="stat-label">Mission Status</div>
+                <div class="stat-value" id="missionStatus">STANDBY</div>
+            </div>
+        </div>
+
+        <div class="charts-grid reveal">
+            <div class="chart-card">
+                <div class="chart-header">
+                    <span class="chart-icon">🌡️</span>
+                    <h2 class="chart-title">Temperature Analysis</h2>
+                </div>
+                <canvas id="tempChart"></canvas>
+            </div>
+            
+            <div class="chart-card">
+                <div class="chart-header">
+                    <span class="chart-icon">⚡</span>
+                    <h2 class="chart-title">Power System</h2>
+                </div>
+                <canvas id="voltageChart"></canvas>
+            </div>
+        </div>
+
+        <div class="table-container reveal">
+            <div class="table-header">
+                <span class="chart-icon">📊</span>
+                <h2>Telemetry Data Log</h2>
+            </div>
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Timestamp</th>
+                            <th>Temperature</th>
+                            <th>Voltage</th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody id="tableBody">
+                        <tr>
+                            <td colspan="5" style="text-align:center; color: var(--gray-light); padding: 50px;">
+                                Awaiting telemetry data upload...
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <footer>
+            <p><strong>SOCIETY FOR AEROSPACE & SPACE TECHNOLOGY</strong></p>
+            <p>Technical Team Intake 2025 | Mission Dashboard</p>
+        </footer>
+    </div>
+
+    <script>
+        const fallbackData = [
+            {"time":"10:00","temp":23,"voltage":3.7},
+            {"time":"10:10","temp":24,"voltage":3.6},
+            {"time":"10:20","temp":25,"voltage":3.6},
+            {"time":"10:30","temp":26,"voltage":3.5},
+            {"time":"10:40","temp":25,"voltage":3.5},
+            {"time":"10:50","temp":24,"voltage":3.6},
+            {"time":"11:00","temp":23,"voltage":3.7}
+        ];
+
+        let uploadedData = null;
+        let tempChart = null;
+        let voltageChart = null;
+
+        // Scroll reveal animation
+        const revealElements = document.querySelectorAll('.reveal');
+        const revealOnScroll = () => {
+            revealElements.forEach(element => {
+                const elementTop = element.getBoundingClientRect().top;
+                const windowHeight = window.innerHeight;
+                if (elementTop < windowHeight - 100) {
+                    element.classList.add('active');
+                }
+            });
+        };
+
+        window.addEventListener('scroll', revealOnScroll);
+        window.addEventListener('load', revealOnScroll);
+
+        // Video fallback
+        const video = document.getElementById('bgVideo');
+        video.addEventListener('error', () => {
+            document.querySelector('.video-background').style.display = 'none';
+        });
+
+        // File upload handling
+        const fileInput = document.getElementById('fileInput');
+        const uploadZone = document.getElementById('uploadZone');
+        const uploadStatus = document.getElementById('uploadStatus');
+        const loadingOverlay = document.getElementById('loadingOverlay');
+
+        fileInput.addEventListener('change', handleFileSelect);
+
+        uploadZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadZone.classList.add('drag-over');
+        });
+
+        uploadZone.addEventListener('dragleave', () => {
+            uploadZone.classList.remove('drag-over');
+        });
+
+        uploadZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadZone.classList.remove('drag-over');
+            const file = e.dataTransfer.files[0];
+            if (file && file.type === 'application/json') {
+                handleFile(file);
+            } else {
+                showStatus('Invalid file type', 'error');
+            }
+        });
+
+        async function handleFileSelect(e) {
+            const file = e.target.files[0];
+            if (file) handleFile(file);
+        }
+
+        async function handleFile(file) {
+            try {
+                loadingOverlay.classList.add('active');
+                const text = await file.text();
+                const data = JSON.parse(text);
+                
+                if (!Array.isArray(data)) {
+                    throw new Error('Invalid format');
+                }
+                
+                uploadedData = data;
+                showStatus(`✓ ${file.name} (${data.length} points)`, 'success');
+                processData(data);
+                
+                setTimeout(() => {
+                    loadingOverlay.classList.remove('active');
+                }, 500);
+            } catch (err) {
+                loadingOverlay.classList.remove('active');
+                showStatus('✗ Invalid JSON file', 'error');
+                console.error(err);
+            }
+        }
+
+        function showStatus(message, type = '') {
+            uploadStatus.textContent = message;
+            uploadStatus.className = `upload-status ${type}`;
+        }
+
+        document.getElementById('downloadBtn').addEventListener('click', () => {
+            const blob = new Blob([JSON.stringify(fallbackData, null, 2)], {type: 'application/json'});
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'telemetry_sample.json';
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+
+        document.getElementById('clearBtn').addEventListener('click', () => {
+            uploadedData = null;
+            fileInput.value = '';
+            showStatus('Drag & Drop JSON File or Click Upload');
+            loadTelemetryData();
+        });
+
+        function loadTelemetryData() {
+            if (uploadedData) {
+                processData(uploadedData);
+                return;
+            }
+
+            fetch('telematry.json')
+                .then(r => r.ok ? r.json() : Promise.reject())
+                .then(data => {
+                    if (!Array.isArray(data)) throw new Error('Invalid format');
+                    processData(data);
+                })
+                .catch(() => {
+                    processData(fallbackData);
+                });
+        }
+
+        function processData(data) {
+            const times = data.map(d => d.time);
+            const temps = data.map(d => d.temp);
+            const volts = data.map(d => d.voltage);
+
+            updateStats(data);
+            updateCharts(times, temps, volts);
+            updateTable(data);
+        }
+
+        function updateStats(data) {
+            const latest = data[data.length - 1];
+            
+            document.getElementById('currentTemp').textContent = latest.temp + '°C';
+            document.getElementById('currentVoltage').textContent = latest.voltage + 'V';
+            document.getElementById('dataPoints').textContent = data.length;
+
+            const missionCard = document.getElementById('missionCard');
+            const missionStatus = document.getElementById('missionStatus');
+            
+            if (latest.voltage < 3.5) {
+                missionStatus.textContent = 'CAUTION';
+                missionCard.classList.remove('status');
+                missionCard.classList.add('caution');
+            } else {
+                missionStatus.textContent = 'OPERATIONAL';
+                missionCard.classList.remove('caution');
+                missionCard.classList.add('status');
+            }
+        }
+
+        function updateCharts(labels, temps, volts) {
+            const tempCtx = document.getElementById('tempChart').getContext('2d');
+            if (tempChart) tempChart.destroy();
+
+            const tempGradient = tempCtx.createLinearGradient(0, 0, 0, 400);
+            tempGradient.addColorStop(0, 'rgba(255, 160, 0, 0.4)');
+            tempGradient.addColorStop(1, 'rgba(255, 160, 0, 0)');
+
+            tempChart = new Chart(tempCtx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Temperature (°C)',
+                        data: temps,
+                        borderColor: '#ffa000',
+                        backgroundColor: tempGradient,
+                        borderWidth: 3,
+                        tension: 0.4,
+                        pointRadius: 5,
+                        pointHoverRadius: 8,
+                        pointBackgroundColor: '#ffa000',
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 3,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: true,
+                    plugins: {
+                        legend: { display: false },
+                        tooltip: {
+                            backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                            titleColor: '#fff',
+                            bodyColor: '#fff',
+                            borderColor: '#ffa000',
+                            borderWidth: 2,
+                            padding: 15,
+                            displayColors: false,
+                            titleFont: { size: 14, weight: 'bold' },
+                            bodyFont: { size: 13 }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            grid: { color: 'rgba(255, 255, 255, 0.05)', drawBorder: false },
+                            ticks: { color: '#8b8b8b', font: { size: 11 } }
+                        },
+                        x: {
+                            grid: { color: 'rgba(255, 255, 255, 0.05)', drawBorder: false },
+                            ticks: { color: '#8b8b8b', font: { size: 11 } }
+                        }
+                    }
+                }
+            });
+
+            const voltCtx = document.getElementById('voltageChart').getContext('2d');
+            if (voltageChart) voltageChart.destroy();
+
+            const voltGradient = voltCtx.createLinearGradient(0, 0, 0, 400);
+            voltGradient.addColorStop(0, 'rgba(0, 200, 83, 0.4)');
+            voltGradient.addColorStop(1, 'rgba(0, 200, 83, 0)');
+
+            voltageChart = new Chart(voltCtx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Voltage (V)',
+                        data: volts,
+                        borderColor: '#00c853',
+                        backgroundColor: voltGradient,
+                        borderWidth: 3,
+                        tension: 0.4,
+                        pointRadius: 5,
+                        pointHoverRadius: 8,
+                        pointBackgroundColor: '#00c853',
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 3,
+                        fill: true,
+                        segment: {
+                            borderColor: ctx => ctx.p0.parsed.y < 3.5 ? '#ff1744' : '#00c853'
+                        }
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: true,
+                    plugins: {
+                        legend: { display: false },
+                        tooltip: {
+                            backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                            titleColor: '#fff',
+                            bodyColor: '#fff',
+                            borderColor: '#00c853',
+                            borderWidth: 2,
+                            padding: 15,
+                            displayColors: false,
+                            titleFont: { size: 14, weight: 'bold' },
+                            bodyFont: { size: 13 },
+                            callbacks: {
+                                afterLabel: (ctx) => ctx.parsed.y < 3.5 ? '⚠ LOW BATTERY' : '✓ NORMAL'
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            grid: { color: 'rgba(255, 255, 255, 0.05)', drawBorder: false },
+                            ticks: { color: '#8b8b8b', font: { size: 11 } }
+                        },
+                        x: {
+                            grid: { color: 'rgba(255, 255, 255, 0.05)', drawBorder: false },
+                            ticks: { color: '#8b8b8b', font: { size: 11 } }
+                        }
+                    }
+                }
+            });
+        }
+
+        function updateTable(data) {
+            const tbody = document.getElementById('tableBody');
+            tbody.innerHTML = '';
+
+            data.forEach((entry, idx) => {
+                let status = 'NORMAL';
+                let statusClass = 'status-normal';
+
+                if (entry.voltage < 3.5) {
+                    status = 'LOW BATTERY';
+                    statusClass = 'status-danger';
+                } else if (entry.temp > 25) {
+                    status = 'HIGH TEMP';
+                    statusClass = 'status-warning';
+                }
+
+                const row = `
+                    <tr>
+                        <td>${idx + 1}</td>
+                        <td>${entry.time}</td>
+                        <td>${entry.temp}°C</td>
+                        <td>${entry.voltage}V</td>
+                        <td><span class="status-badge ${statusClass}">${status}</span></td>
+                    </tr>
+                `;
+                tbody.innerHTML += row;
+            });
+        }
+
+        window.onload = () => {
+            loadTelemetryData();
+            revealOnScroll();
+        };
+    </script>
+</body>
+</html>
\ No newline at end of file
