Skip to content

Submission from Supernovas #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Submission from Supernovas #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dae1c8f
files uploaded by team Supernovas
Nishant-Pandey-2004 Oct 6, 2024
b305fb4
Update README.md
Nishant-Pandey-2004 Oct 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
# NASA Space Apps Challenge 2024 [Noida]

#### Team Name -
#### Problem Statement -
#### Team Leader Email -
#### Team Name - Supernovas
#### Problem Statement - Community Mapping
#### Team Leader Email - [email protected]

## A Brief of the Prototype:
What is your solution? and how it works.
The prototype is an interactive web-based map application designed to provide real-time geographic data visualization and user-controlled features. It integrates multiple layers of geographic information, including OpenStreetMap (OSM) tiles, air quality index (AQI), vegetation, highways, terrain, and satellite imagery.

Key features of the prototype include:

1. **Map Layer Toggling**: Users can easily toggle different map layers such as vegetation, highways, satellite view, terrain, and pollution, allowing for customized map visualization.

2. **Air Quality Information**: An AQI widget can be displayed for specific cities, showing real-time air quality data with a user-friendly interface.

3. **Location-based Markers**: Users can mark specific cities on the map and calculate the distance between marked locations using a routing system.

4. **Rainfall Data**: The prototype allows toggling a rainfall layer to display precipitation data over the map, adding an environmental monitoring feature.

5. **Voice and Text Commands**: The application supports both text-based input and voice commands to control the map’s features (e.g., zooming in/out, going to a location, toggling layers).

6. **History Logging**: Each user action, such as toggling a layer or marking a city, is logged and displayed in a history list for reference.

The application is designed to be user-friendly, allowing seamless interaction between the user and the map interface for visualizing geographic and environmental data.

## Code Execution Instruction:
*[If your solution is **not** application based, you can ignore this para]
1. [Run Prototype](https://nasa-space-apps-noida.vercel.app/)
2. [Watch DEMO](https://www.youtube.com/watch?v=8CtPQ6vBYGo)

*The Repository must contain your **Execution Plan PDF**.

225 changes: 225 additions & 0 deletions Supernovas/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
/* General reset for styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Orbitron', sans-serif;
/* Futuristic font */
background: url('server/space-background.jpg') no-repeat center center fixed;
/* Space background */
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}

header {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
border-bottom: 2px solid #fff;
width: 100%;
}

header img {
width: 80px;
margin-right: 20px;
}

header h1 {
font-size: 2.5rem;
color: #00bfff;
/* NASA-like light blue */
text-shadow: 0px 0px 15px #00bfff;
}

.map-container {
width: 90%;
height: 65vh;
margin: 20px 0;
position: relative;
display: flex;
/* Flexbox for positioning */
}

#map {
flex: 1;
/* Map takes remaining space */
height: 100%;
border: 3px solid #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
position: relative;
}

/* History box on the left side */
.history-box {
position: absolute;
top: 20px;
left: 20px;
width: 250px;
max-height: 200px;
background: rgba(0, 0, 0, 0.7);
padding: 15px;
border-radius: 10px;
color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5);
overflow-y: auto;
z-index: 1000;
/* Ensure it stays on top */
}

.history-box h2 {
font-size: 1.5rem;
margin-bottom: 10px;
text-align: center;
color: #00bfff;
}

.history-box ul {
list-style: none;
padding-left: 0;
margin: 0;
max-height: 160px;
/* Adjust height to fit box */
overflow-y: auto;
/* Scroll when content exceeds */
}

.history-box ul li {
margin-bottom: 10px;
padding: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
font-size: 1rem;
color: #00bfff;
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);
}

/* Distance box on the right side */
#distance {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 10px;
color: white;
font-size: 1.2rem;
box-shadow: 0px 0px 15px rgba(0, 191, 255, 0.7);
z-index: 1000;
}

/* Coordinates display (below distance) */
#coordinates {
position: absolute;
top: 80px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 10px;
color: white;
font-size: 1.2rem;
box-shadow: 0px 0px 15px rgba(0, 191, 255, 0.7);
z-index: 1000;
}


.watermark {
position: absolute;
top: 20px;
right: 10px;
background-color: rgba(255, 255, 255, 0.7);
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
font-weight: bold;
color: red;
z-index: 1000;
opacity: 70%;
}


footer {
width: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 20px;
color: #fff;
border-top: 2px solid #00bfff;
}

footer p {
font-size: 1.2rem;
}

footer .commands {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

footer .command-box {
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 5px;
padding: 10px 15px;
font-size: 1rem;
color: #00bfff;
box-shadow: 0px 0px 10px rgba(0, 191, 255, 0.5);
cursor: pointer;
transition: all 0.3s;
}

footer .command-box:hover {
background: #00bfff;
color: #fff;
box-shadow: 0px 0px 15px #fff;
}

.search-bar {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
z-index: 1000;

position: absolute;
top: 20px;
right: 30%;



z-index: 1000;
/* Ensure it stays on top */
}

#search-input {
padding: 10px;
font-size: 16px;
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
}

#mic-button {
background-color: #ffffff;
color: white;
font-size: 26px;
border-color: #ff0000;
border-radius: 50%;

margin-left: 5px;
cursor: pointer;
}

#mic-button:hover {
background-color: #ff0000;
}
95 changes: 95 additions & 0 deletions Supernovas/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VANI - Voice Assistance for Navigation and Interaction</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- Leaflet Routing Machine CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.min.css" />
<!-- SpeechKITT CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/themes/flat-clouds.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- Leaflet Routing Machine JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.min.js"></script>
<!-- Annyang JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
<link rel="stylesheet" href="index.css">

<!-- AQI Widget JS -->
<script type="text/javascript" charset="utf-8">
(function(w, d, t, f) {
w[f] = w[f] || function(c, k, n) {
s = w[f], k = s['k'] = (s['k'] || (k ? ('&k=' + k) : ''));
s['c'] = c = (c instanceof Array) ? c : [c];
s['n'] = n = n || 0;
L = d.createElement(t), e = d.getElementsByTagName(t)[0];
L.async = 1;
L.src = '//feed.aqicn.org/feed/' + (c[n].city) + '/' + (c[n].lang || '') + '/feed.v1.js?n=' + n + k;
e.parentNode.insertBefore(L, e);
};
})(window, document, 'script', '_aqiFeed');
</script>

</head>

<body>

<header>
<img src="server/nasa.gif" alt="NASA Logo">
<h1>VANI</h1>
</header>


<!-- Container for AQI widget -->
<div id="city-aqi-container"></div>

<div class="map-container">
<div class="history-box">
<h2>History</h2>
<ul id="history-list"></ul>
</div>
<!-- Search Bar with Mic Button -->
<div class="search-bar">
<input type="text" id="search-input" placeholder="Type a command" />
<button id="mic-button">🎙️</button>
</div>
<div id="map">
<div class="watermark">Supernovas</div>
</div>
</div>

<div id="distance"></div>

<footer>
<p>Available Commands:</p>
<div class="commands">
<span class="command-box" title="Say 'hello' to receive a greeting.">'hello'</span>
<span class="command-box" title="Say 'go to [city]' to navigate to a specific city.">'go to [city]'</span>
<span class="command-box" title="Show or hide vegetation layer.">'show vegetation'</span>
<span class="command-box" title="Show or hide highways layer.">'show highways'</span>
<span class="command-box" title="Switch to satellite view.">'show satellite'</span>
<span class="command-box" title="Switch to terrain view.">'show terrain'</span>
<span class="command-box" title="Zoom in on the map.">'zoom in'</span>
<span class="command-box" title="Zoom out on the map.">'zoom out'</span>
<span class="command-box" title="Mark a specific city on the map.">'mark [city]'</span>
<span class="command-box" title="Remove a marked city from the map.">'unmark [city]'</span>
<span class="command-box"
title="Calculate the distance between marked cities and display the route.">'calculate distance'</span>
<span class="command-box" title="Show pollution map with Air Quality Index">'show pollution'</span>
<span class="command-box" title="Show AQI widget for a city.">'show aqi of [city]'</span>
<span class="command-box" title="Close AQI widget.">'close aqi'</span>
</div>
</footer>

<script src="script.js"></script>
</body>

</html>
Loading