# 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.