-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
151 lines (151 loc) · 10.3 KB
/
Copy pathabout.html
File metadata and controls
151 lines (151 loc) · 10.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Explorer - About</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
nav ul li a, footer p, .social-links a {
position: relative;
}
nav ul li a::after, footer p::after, .social-links a::after {
content: '';
position: absolute;
left: 0;
bottom: -5px;
height: 2px;
width: 0;
background-color: white;
transition: width 0.3s ease-in-out;
}
nav ul li a:hover::after, footer p:hover::after, .social-links a:hover::after {
width: 100%;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<header class="fixed top-0 w-full z-10 bg-black bg-opacity-50 backdrop-blur-md">
<nav class="container mx-auto flex items-center justify-between p-4">
<div class="flex items-center">
<img src="https://img.icons8.com/ios-filled/50/FFFFFF/planet.png" alt="Planet Logo" class="w-10 h-10 hover:scale-110 transition-transform">
</div>
<button id="hamburger" class="md:hidden text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<ul id="nav-links" class="hidden md:flex md:space-x-6 text-white">
<li><a href="index.html" class="uppercase font-bold">Mars Rover</a></li>
<li><a href="apod.html" class="uppercase font-bold">Picture of the Day</a></li>
<li><a href="about.html" class="uppercase font-bold">About</a></li>
</ul>
</nav>
</header>
<main class="flex-grow mt-20 container mx-auto px-4 py-8">
<section class="bg-white bg-opacity-90 backdrop-blur-sm p-6 rounded-2xl shadow-lg max-w-4xl mx-auto">
<h2 class="text-2xl font-bold uppercase mb-4 text-center">About CosmicLens</h2>
<p class="text-gray-700 mb-4">
CosmicLens is a web application that allows users to explore NASA's vast collection of space imagery.
Using NASA's open APIs, this project provides two main features:
</p>
<ul class="list-disc list-inside text-gray-700 mb-4">
<li><strong>Mars Rover Photos:</strong> View photos captured by NASA's Mars rovers (Curiosity, Spirit, and Opportunity) on specific Earth dates.</li>
<li><strong>Astronomy Picture of the Day (APOD):</strong> Discover NASA's daily curated image or video, complete with a detailed explanation.</li>
</ul>
<h3 class="text-xl font-semibold mb-2">About NASA's Mars Rovers</h3>
<p class="text-gray-700 mb-4">
NASA's Mars rovers are robotic explorers designed to study the Martian surface.
<ul class="list-disc list-inside mb-4">
<li><strong>Curiosity:</strong> Launched in 2011, Curiosity is the largest rover, exploring Gale Crater to study Mars' habitability.</li>
<li><strong>Spirit:</strong> Launched in 2003, Spirit operated until 2010, exploring Gusev Crater.</li>
<li><strong>Opportunity:</strong> Also launched in 2003, Opportunity explored Meridiani Planum until 2018, setting records for distance traveled.</li>
</ul>
These rovers have provided invaluable data and stunning images of the Red Planet.
</p>
<h3 class="text-xl font-semibold mb-2">How to Use CosmicLens</h3>
<p class="text-gray-700 mb-4">
CosmicLens is designed to be intuitive, allowing you to explore Mars Rover photos and NASA's Astronomy Picture of the Day with ease. Below are detailed instructions for using the app, with a focus on the Mars Rover Photos feature.
</p>
<h4 class="text-lg font-semibold mb-2">Using the Mars Rover Photos Feature</h4>
<ol class="list-decimal list-inside text-gray-700 mb-4">
<li><strong>Navigate to the Mars Rover Page</strong>: Open the main page by loading <code>index.html</code> in your browser or clicking the "Mars Rover" link in the navigation bar.</li>
<li><strong>Select a Rover</strong>: In the centered form, choose a rover from the dropdown menu:
<ul class="list-disc list-inside ml-6">
<li><strong>Curiosity</strong>: Active since August 6, 2012, exploring Gale Crater for signs of past habitability.</li>
<li><strong>Spirit</strong>: Operated from January 4, 2004, to March 22, 2010, in Gusev Crater.</li>
<li><strong>Opportunity</strong>: Operated from January 25, 2004, to June 10, 2018, in Meridiani Planum.</li>
</ul>
</li>
<li><strong>Choose an Earth Date</strong>: Use the date picker to select a specific Earth date. Ensure the date falls within the rover’s operational period:
<ul class="list-disc list-inside ml-6">
<li>Curiosity: After August 6, 2012.</li>
<li>Spirit: January 4, 2004 – March 22, 2010.</li>
<li>Opportunity: January 25, 2004 – June 10, 2018.</li>
</ul>
Note: Not all dates have available photos due to mission schedules or data gaps.
</li>
<li><strong>Fetch Photos</strong>: Click the black "Send" button to query NASA's Mars Rover Photos API. If photos are available, a responsive grid will appear, displaying images in 1–4 columns depending on your screen size. Each image is styled with rounded corners and a shadow effect.</li>
<li><strong>Handle No Results</strong>: If no photos are found (e.g., due to an invalid date or no data), an alert will prompt you to try a different rover or date. The photo grid remains hidden until valid data is fetched.</li>
<li><strong>Explore Photos</strong>: Scroll through the grid to view high-resolution Mars images captured by the selected rover on the chosen date.</li>
</ol>
<h4 class="text-lg font-semibold mb-2">Using the Astronomy Picture of the Day (APOD)</h4>
<p class="text-gray-700 mb-4">
Click the "Picture of the Day" link in the navbar to visit <code>apod.html</code>. The page automatically fetches and displays NASA's daily curated image or video, along with its title and a detailed explanation, using the APOD API. No user input is required.
</p>
<h4 class="text-lg font-semibold mb-2">Navigating the App</h4>
<p class="text-gray-700 mb-4">
Use the fixed navigation bar at the top to switch between pages:
<ul class="list-disc list-inside mb-4">
<li><strong>Mars Rover</strong>: Access the photo fetcher.</li>
<li><strong>Picture of the Day</strong>: View the daily APOD.</li>
<li><strong>About</strong>: Learn about the app and rovers.</li>
</ul>
On mobile devices (screen width <768px), click the hamburger icon (three lines) in the top-right corner to toggle a dropdown menu with these links. The navbar and footer feature a transparent, blurred background with hover underline effects for a modern look.
</p>
<h4 class="text-lg font-semibold mb-2">Tips for Best Experience</h4>
<ul class="list-disc list-inside text-gray-700 mb-4">
<li><strong>Date Selection</strong>: Experiment with different dates within a rover’s operational period to find available photos.</li>
<li><strong>Internet Connection</strong>: Ensure a stable connection, as the app relies on NASA’s APIs.</li>
</ul>
<h3 class="text-xl font-semibold mb-2">Connect with the Creator</h3>
<p class="text-gray-700 mb-4">
Follow the creator of CosmicLens on social media for updates and more projects:
</p>
<div class="social-links flex justify-center space-x-4 mb-4">
<a href="https://github.com/PranavHendre02" target="_blank" class="flex items-center text-gray-800">
<img src="https://img.icons8.com/ios-filled/24/000000/github.png" alt="GitHub" class="w-6 h-6 mr-1">
<span class="font-semibold">GitHub</span>
</a>
<a href="https://www.linkedin.com/in/pranav-hendre-b07339316/" target="_blank" class="flex items-center text-gray-800">
<img src="https://img.icons8.com/ios-filled/24/000000/linkedin.png" alt="LinkedIn" class="w-6 h-6 mr-1">
<span class="font-semibold">LinkedIn</span>
</a>
<a href="https://www.instagram.com/pranavhendre02/" target="_blank" class="flex items-center text-gray-800">
<img src="https://img.icons8.com/ios-filled/24/000000/instagram-new.png" alt="Instagram" class="w-6 h-6 mr-1">
<span class="font-semibold">Instagram</span>
</a>
</div>
</section>
</main>
<footer class="bg-black bg-opacity-50 backdrop-blur-md text-white text-center py-4">
<p class="font-bold inline-block">COPYRIGHT @ 2025</p>
</footer>
<script>
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('hidden');
navLinks.classList.toggle('flex');
navLinks.classList.toggle('flex-col');
navLinks.classList.toggle('absolute');
navLinks.classList.toggle('top-16');
navLinks.classList.toggle('left-0');
navLinks.classList.toggle('w-full');
navLinks.classList.toggle('bg-black');
navLinks.classList.toggle('bg-opacity-75');
navLinks.classList.toggle('p-4');
});
</script>
</body>
</html>