Scribd
Upload
9 views3 pages

Hakathon

Uploaded by

dilnoramamadrizobekova
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views3 pages

Hakathon

Uploaded by

dilnoramamadrizobekova
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Watcher</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #2e0068; /* Deep purple background */
color: #d1c4e9;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
color: #bb86fc;
margin-top: 20px;
}
.container {
max-width: 1200px;
margin: auto;
padding: 20px;
}
.section {
background-color: #4a0072; /* Dark purple sections */
border-radius: 10px;
padding: 20px;
margin: 20px 0;
}
button {
padding: 10px;
background-color: #8e24aa;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
button:hover {
background-color: #ba68c8;
}
input, textarea {
padding: 10px;
border: none;
border-radius: 5px;
margin: 5px;
width: 100%;
max-width: 300px;
}
#neo-table, #chat-box {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
#neo-table th, #neo-table td, #chat-box th, #chat-box td {
border: 1px solid #d1c4e9;
padding: 10px;
}
#chat-box {
max-height: 200px;
overflow-y: auto;
}
video {
width: 100%;
max-width: 600px;
margin-top: 10px;
}
</style>
</head>
<body>

<h1>🌌 Solar Sparkle 🌌</h1>


<div class="container">

<!-- Near Earth Object Tracker -->


<div class="section" id="neo-section">
<h2>Track Near-Earth Objects</h2>
<button onclick="fetchNEOData()">Get Today’s NEO Data</button>
<table id="neo-table">
<thead>
<tr>
<th>Name</th>
<th>Approach Date</th>
<th>Distance (km)</th>
<th>Velocity (km/h)</th>
<th>Diameter (m)</th>
<th>Hazardous</th>
</tr>
</thead>
<tbody id="neo-data">
<!-- NEO data injected here -->
</tbody>
</table>
</div>

<!-- Global Chat Section -->


<div class="section" id="chat-section">
<h2>Global Chat 🌐</h2>
<div id="chat-box">
<!-- Chat messages displayed here -->
<p><strong>Sample User:</strong> Hello from Earth!</p>
</div>
<textarea id="chat-message" placeholder="Type your message
here..."></textarea><br>
<button onclick="sendMessage()">Send</button>
</div>

<!-- Video Watching Section -->


<div class="section" id="video-section">
<h2>Watch Space Videos 📹</h2>
<video controls>
<source src="space-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

<!-- Real-Time Sky Tracker -->


<div class="section" id="sky-tracker-section">
<h2>Real-Time Sky Tracker 🔭</h2>
<p>Track the sky in real-time with a live feed.</p>
<iframe src="https://stellarium-web.org/" width="100%"
height="400"></iframe>
</div>
</div>

<script>
const API_KEY = 'YOUR_NASA_API_KEY';

async function fetchNEOData() {


const today = new Date().toISOString().split('T')[0];
const API_URL = https://api.nasa.gov/neo/rest/v1/feed?start_date=$
{today}&end_date=${today}&api_key=${API_KEY};

try {

You might also like