89 lines
2.5 KiB
Markdown
89 lines
2.5 KiB
Markdown
# 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. |