Sleeper's Online Photo Flipbook

NOTICE: This project is solely for testing and showcasing my development skills, experimenting with CSS animations, and practicing modern web techniques. It is not intended to be an actual product or service and has no plans for production deployment.

Welcome to Sleeper's Online Photo Flipbook! This is a modern, responsive web application designed to showcase and organize your favorite photos in a beautiful, interactive gallery. With an elegant design and smooth animations, this flipbook provides a delightful experience for preserving and sharing your cherished memories.

✨ Features

• Modern Design: Clean, elegant interface with smooth animations and transitions
• Responsive Layout: Looks great on desktops, tablets, and mobile devices
• Interactive Gallery: Each photo displays in a beautiful card with hover effects
• Dark/Light Mode: Toggle between light and dark themes with a stylish switch
• Local Storage: Your likes, theme preferences, and feedback are saved between sessions
• Social Interactions:
  • Like/Dislike photos with animated reactions
  • Share photos via Web Share API or clipboard
  • Hide/Show photos with smooth animations
• Feedback System: Submit ratings and comments with an elegant star-rating system
• Accessibility: Improved with ARIA labels and semantic HTML
• Performance: Optimized with lazy loading for images
• Upload Feature: UI for photo uploads (demo only in current version)
• Scroll-to-Top: Easy navigation with animated scroll button

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge, etc.)
• Internet connection (for loading external fonts and displaying linked photos)

Installation

1. Clone this repository to your local machine:

   git clone https://github.com/yourusername/sleepers-photo-flipbook.git

2. Navigate to the project directory:

   cd sleepers-photo-flipbook

3. Open index.html in your browser:

   • Double-click the file
   • Or use a local development server like Live Server for VSCode
   • Or use Python's built-in server: python -m http.server

🎨 Customization

You can easily customize the flipbook by:

1. Adding your own photos to the Img directory
2. Updating the index.html file with new photo entries
3. Modifying the color scheme in style.css
4. Adding new features to script.js

🔮 Future Enhancements

• Backend integration for actual photo uploads and storage
• User authentication system
• Photo albums/categories
• Commenting system
• Social media sharing integration
• Advanced filtering and sorting options
• Slideshow mode

📱 Technologies Used

• HTML5
• CSS3 (with advanced animations and transitions)
• JavaScript (ES6+)
• Font Awesome icons
• Google Fonts
• Web Storage API
• Intersection Observer API

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📬 Contact

For inquiries, please contact: [email protected]

---

Made with ❤️ by Sleeper