Interactive Valentine's Day Experience 💕

A romantic interactive web experience featuring a Valentine's card, secret codes, a retro-style museum, and mini-games. Built with pure HTML, CSS, and JavaScript.

Live Demo
GitHub Repository

🔗 Repository

Clone this repository to get started:

git clone https://github.com/Shreyanshdiwakar/awesome-sauce-valentine.git

🌟 Features

1. Interactive Valentine's Card

• 3D card animation with hover effects
• Custom background with animated hearts
• Background music player (Gracie Abrams - In Between) (Used non-commercially)
• Interactive "Yes/No" buttons (with playful escaping "No" button)
• Confetti celebrations

2. Secret Code System

• Unlock multiple hidden pages with secret codes:
  • First code: "awesome sauce"
  • Second code: "iit delhi"
• Hint system with animated tooltips
• Click sound effects for interactions

3. Retro-Style Secret Museum

• Pixel art design with scanline effects
• Animated text with glitch effects
• Real-time status updates
• Custom grid layout with:
  • Main content display
  • Status box
  • Info panels
  • Message typing animation
  • Quick links

4. Love-Themed Memory Card Game

• Memory matching game with love-themed cards
• Animated card flips & smooth transitions
• Score tracking & victory detection
• Retro-inspired design

🚀 Installation & Setup

Prerequisites

• Modern web browser
• Basic text editor (VS Code recommended)
• No additional dependencies required

Steps

1. Clone the repository
2. Open the project in your favorite editor
3. Launch index.html in a browser
4. Edit files and refresh to see changes

Folder Structure

valentine-card/
├── index.html        # Main entry point
├── secret-note.html  # Secret page
├── museum.html       # Secret museum page
├── memory-game.html  # Memory game page
├── assets/
│   ├── audio/        # Music & sound effects
│   ├── images/       # Backgrounds & graphics
├── css/
│   ├── style.css     # Main styles
│   ├── secret.css    # Secret museum styles
├── js/
│   ├── script.js     # Main JavaScript
│   ├── museum.js     # Secret museum logic
│   ├── game.js       # Memory game logic

🛠️ Technologies Used

Frontend:

• HTML5
• CSS3 (with advanced animations)
• Vanilla JavaScript

Libraries & Tools:

• Anime.js
• GSAP (GreenSock)
• Canvas Confetti

Typography:

• Google Fonts: VT323, Indie Flower, Amatic SC

💻 Technical Highlights

Animations & Effects

• Smooth GSAP timeline animations
• CSS3 transitions & transforms
• Confetti effects for celebrations
• Glitch text animations
• Scanline overlay for a retro feel

Interactive Elements

• Secret code system for unlocking hidden content
• Dynamic buttons with playful behaviors
• Memory game logic with victory detection
• Custom sound effects for clicks & actions

Styling & UX

• Retro-pixel art aesthetics
• Responsive layouts for various screen sizes
• Custom cursors & animated backgrounds

🌐 Browser Support

• Recommended: Chrome
• Firefox, Safari, Edge (compatible but may have minor differences)
• Some effects may not work in outdated browsers

🤖 Known Issues

• Background music may not autoplay on some mobile devices due to browser restrictions
• Some CSS effects may not render properly in older browsers
• Memory game requires manual refresh to restart

💪 Future Improvements

• Improve mobile responsiveness
• Add more mini-games
• Include more secret codes & Easter eggs
• Implement offline support (PWA)
• Add sound effect volume controls

📄 License

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

🙏 Acknowledgments

• Anime.js for animations
• GSAP for advanced motion effects
• Google Fonts for beautiful typography
• Canvas Confetti for celebration effects
• Gracie Abrams for background music

👥 Contributing

Want to improve this project? Follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/NewFeature)
3. Commit your changes (git commit -m 'Added NewFeature')
4. Push to your branch (git push origin feature/NewFeature)
5. Open a Pull Request

💖 Made with love by Shreyansh

Dedicated to Priyanshi & everyone who loves fun, interactive experiences! 💕