Space Facts Viewer

A mobile-optimized picture viewer app that displays space images with interesting facts about each image. Click on an image to toggle the visibility of the associated fact.

Features

• Full-screen image display with overlaying facts
• Toggle functionality - click image to show/hide facts
• Previous/Next navigation buttons
• Mobile-responsive design optimized for touch interaction
• Clean, space-themed dark interface

Installation

1. Install Python Flask:

   pip install flask
   

2. Ensure you have the required directory structure:

   SpaceFacts/
   ├── app.py
   ├── requirements.txt
   ├── templates/
   │   └── index.html
   ├── static/
   │   ├── css/
   │   │   └── style.css
   │   ├── js/
   │   │   └── script.js
   │   └── images/  # Placeholder images already included
   

Usage

1. The app is already configured to use the placeholder images in the static/images/ directory:

   • 20250331-04~orig.jpg
   • AFRC2025-0036-26~orig.jpg
   • CEB_1408~orig.jpg
   • iss072e742575~orig.jpg
   • iss073e0000706~orig.jpg

2. Run the Flask application:

   python app.py
   

3. Open your browser and navigate to http://localhost:6007

How It Works

• Click on any image to toggle the visibility of the fact overlay
• Use the Previous/Next buttons to navigate between different space facts
• The interface is fully responsive and optimized for mobile devices
• Images are displayed in full-screen mode with facts overlaid at the bottom

Technical Details

Backend (Flask)

The Flask app provides REST API endpoints:

• / - Main application page
• /api/facts - JSON list of all space facts
• /api/fact/<id> - JSON for a specific fact
• /api/image/<id> - Returns the image file for a fact

Frontend

• Responsive design using CSS media queries
• JavaScript handles click events and navigation
• Smooth slide animations for overlay toggling
• Full-screen canvas with proper aspect ratio handling

Customization

To add more facts:

1. Add entries to the SPACE_FACTS array in app.py
2. Ensure corresponding image files exist in static/images/

Mobile Optimization

The application is optimized for mobile devices with:

• Touch-friendly button sizes
• Responsive layout adjustments
• Single-tap interaction for toggling facts
• Optimized viewport settings

License

This project is built for educational purposes and can be modified freely.