LunaVision: Lunar Surface Mapping Website

Overview

LunaVision is a showcase website for the ISRO Hackathon project titled "High-Resolution Lunar Surface Mapping using Shape-from-Shading (SfS) for DEM Generation". The website is built using only HTML, CSS, and vanilla JavaScript (no frameworks) and features a visually impressive space/lunar theme with modern UI principles, smooth animations, and responsive design.

Features

• Responsive Design: Fully responsive layout that works on all screen sizes
• Dark Mode UI: Space/lunar theme with stars, moon illustrations, and dark color palette
• Smooth Animations: Scroll-triggered animations, hover effects, and transitions
• Interactive Elements: Flip cards, tabs, animated counters, and more
• Single Page Application: All sections in one scrollable page with sticky navigation
• Modern UI Components: Cards, timelines, grids, and other visual elements

Project Structure

LunaVision/
├── index.html          # Main HTML file with all content sections
├── styles.css          # CSS styles for layout, animations, and responsiveness
├── script.js           # JavaScript for interactive features and animations
└── README.md           # Project documentation

Technologies Used

• HTML5: Semantic markup for content structure
• CSS3: Modern styling with flexbox, grid, animations, and variables
• JavaScript: Vanilla JS for interactive features
• Particles.js: For the starry background effect
• AOS.js: For scroll-triggered animations
• Font Awesome: For icons
• Google Fonts: Orbitron and Poppins fonts

How to Run

1. Clone or download this repository
2. Open index.html in a modern web browser
3. No build process or server setup required

Sections

1. Hero: Introduction with animated moon
2. Concept Overview: Explanation of DEMs and Shape-from-Shading
3. Why Shape-from-Shading: Comparison with traditional methods
4. How It Works: 5-step pipeline visualization
5. Applications: Grid layout of use cases
6. Unique Selling Points: Flip cards highlighting key features
7. Tech Stack: Tabbed interface showing different technology categories
8. Dataset: Information about data sources
9. Output Formats: Supported file formats
10. Future Vision: Timeline of future developments
11. Budget: Animated counters showing cost estimates
12. Demo: Placeholder for visual showcase
13. Contact: Contact form and information

Design Elements

• Color Scheme: Dark background with purple/blue accents
• Typography: Orbitron for headings, Poppins for body text
• Animations: Fade-in, slide-in, flip, and zoom effects
• Icons: Font Awesome icons for visual engagement
• Cards & Containers: Glassmorphism effect with subtle borders
• Responsive Breakpoints: Optimized for desktop, tablet, and mobile

Credits

• Particles.js: https://vincentgarreau.com/particles.js/
• AOS (Animate On Scroll): https://michalsnik.github.io/aos/
• Font Awesome: https://fontawesome.com/
• Google Fonts: https://fonts.google.com/

---

Created for the ISRO Hackathon project showcase.