Love Story Website 💕

A beautiful, romantic webpage to showcase your love journey with interactive features and a lovely theme.

Features ✨

🏠 Home Tab

• Love Timer: Automatically counts the time since February 17, 2025
• Beautiful animated background with floating hearts
• Romantic quotes and elegant typography
• Responsive design that works on all devices

💑 How We Meet Tab

• Dynamic image gallery with responsive grid layout
• Easy image upload functionality
• Images are automatically scaled and optimized
• Hover effects and smooth animations

🌟 Our Journey Tab

• Timeline layout divided into three beautiful sections:
  • First: Your initial moments together
  • Distance Relationship: Memories during long-distance period
  • Together Again: Photos of being reunited
• Each section has its own image gallery
• Interactive timeline with icons and smooth transitions

Navigation 🧭

• Scrollable tabs: Click on navigation items to smoothly scroll between sections
• Keyboard shortcuts: Use keys 1, 2, 3 to quickly switch between sections
• Active indicators: Current section is highlighted in the navigation

Image Management 📸

• Upload multiple images: Support for JPG, PNG, GIF, and other image formats
• Local storage: Images are saved in your browser for future visits
• Responsive grid: Automatically adjusts to screen size
• Full-screen view: Click expand icon to view images in full screen
• Delete functionality: Remove images you no longer want
• Drag & drop support: Easy file uploading

Design Features 🎨

• Romantic color scheme: Pink, purple, and gradient backgrounds
• Smooth animations: Floating hearts, hover effects, and transitions
• Mobile responsive: Looks great on phones, tablets, and desktops
• Modern UI: Clean, elegant design with beautiful typography
• Accessibility: Proper contrast ratios and keyboard navigation

Technical Features ⚙️

• Pure HTML/CSS/JavaScript: No frameworks required
• Local storage: Persistent image storage
• Cross-browser compatible: Works in Chrome, Firefox, Safari, Edge
• Performance optimized: Fast loading and smooth animations
• SEO friendly: Proper HTML structure and meta tags

Getting Started 🚀

1. Simply open index.html in your web browser
2. Start by adding images to each section using the "+" button
3. Customize the start date in script.js if needed (currently set to February 17, 2025)
4. Enjoy your beautiful love story website!

Customization Options 🛠️

Changing the Start Date

Edit line 4 in script.js:

const startDate = new Date('2025-02-17T00:00:00');

Updating Colors

Modify the CSS gradient colors in style.css to match your preferences.

Adding More Sections

You can easily add more timeline items by copying the timeline structure in the HTML.

Browser Support 🌐

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

File Structure 📁

anni_web/
├── index.html      # Main webpage structure
├── style.css       # All styling and animations
├── script.js       # Interactive functionality
└── README.md       # This documentation

Tips for Best Experience 💡

• Use high-quality images for best visual impact
• Keep image file sizes reasonable for faster loading
• Add a variety of photos to tell your complete story
• The timer updates in real-time, so bookmark the page!

Love Story Themes 💖

The website is designed with several romantic themes:

• Soft pink and purple gradients
• Floating heart animations
• Elegant script fonts for headings
• Smooth, romantic transitions
• Intimate, cozy feeling throughout

Enjoy creating your beautiful love story! 💕✨