# SimVal 2.0 💖 A beautiful, interactive Angular web application to ask your special someone to be your Valentine! ## Features ✨ - 🎨 Cute, mobile-first responsive design - 🎵 Controllable background music (pause/play) - ⚡ Animated preloader with loading bar - 📸 Splash screen with girlfriend's photo - 💕 Interactive "Yes/No" buttons (No button moves, Yes button grows!) - 🎉 Celebration animation with confetti - 📝 Multiple personalized questions - 📷 Selfie upload functionality - 📄 Auto-generated PDF with all responses - 🌟 Skeleton loaders for smooth UX - 📱 Perfect for all screen sizes ## Setup Instructions 🚀 ### Prerequisites - Node.js (v18 or higher) - npm (v9 or higher) ### Installation 1. **Clone or download this repository** 2. **Install dependencies** ```bash cd simval-2.0 npm install ``` 3. **Add your girlfriend's photo** - Place her photo in `src/assets/images/` folder - Name it `girlfriend-photo.jpg` (or update the path in splash-screen component) 4. **Add background music (optional)** - Place your music file in `src/assets/audio/` folder - Name it `background-music.mp3` (or update the path in music service) ### Development Run the development server: ```bash npm start ``` Navigate to `http://localhost:4200/` ### Build Build the project for production: ```bash npm run build ``` ## Deploy to GitHub Pages 🌐 ### Option 1: Using angular-cli-ghpages 1. **Install GitHub Pages deployment tool** ```bash npm install -g angular-cli-ghpages ``` 2. **Build and deploy** ```bash npm run deploy ``` ### Option 2: Manual Deployment 1. **Build the project** ```bash ng build --configuration production --base-href=/simval-2.0/ ``` (Replace `simval-2.0` with your repository name) 2. **Create gh-pages branch** ```bash git checkout -b gh-pages ``` 3. **Copy dist files to root** ```bash cp -r dist/simval-2.0/browser/* . git add . git commit -m "Deploy to GitHub Pages" git push origin gh-pages ``` 4. **Enable GitHub Pages** - Go to your repository settings - Navigate to "Pages" section - Select "gh-pages" branch - Save Your site will be live at: `https://yourusername.github.io/simval-2.0/` ## Project Structure 📁 ``` simval-2.0/ ├── src/ │ ├── app/ │ │ ├── components/ │ │ │ ├── preloader/ # Loading animation │ │ │ ├── splash-screen/ # Welcome screen with photo │ │ │ ├── question-flow/ # Main flow controller │ │ │ ├── celebration/ # Success celebration │ │ │ └── photo-upload/ # Selfie upload │ │ ├── services/ │ │ │ ├── app-state.service.ts # State management │ │ │ └── music.service.ts # Music controls │ │ ├── models/ │ │ │ └── question.model.ts # TypeScript interfaces │ │ └── app.routes.ts # Routing configuration │ ├── assets/ │ │ ├── images/ # Store girlfriend's photo here │ │ └── audio/ # Store background music here │ └── styles.scss # Global styles ├── angular.json ├── package.json └── README.md ``` ## Customization 🎨 ### Change Questions Edit the questions array in `src/app/services/app-state.service.ts`: ```typescript private questions: Question[] = [ { id: 1, text: 'Your question here?', type: 'text', placeholder: 'Placeholder...' }, // Add more questions... ]; ``` ### Change Colors Edit CSS variables in `src/styles.scss`: ```scss :root { --primary-pink: #FF69B4; --secondary-pink: #FFB6C1; --light-pink: #FFF0F5; --accent-red: #FF1493; } ``` ### Change App Name Update in: - `src/index.html` - `` tag - `package.json` - `name` field - Throughout components as needed ## Technologies Used 💻 - **Angular 18** - Frontend framework - **TypeScript** - Programming language - **SCSS** - Styling - **jsPDF** - PDF generation - **canvas-confetti** - Celebration effects - **RxJS** - Reactive programming ## Browser Support 🌐 - Chrome (recommended) - Firefox - Safari - Edge - Mobile browsers (iOS Safari, Chrome Mobile) ## Tips for Best Experience 📱 1. Test on mobile devices first (mobile-first design) 2. Use a romantic background music (royalty-free) 3. Use a clear, high-quality photo for splash screen 4. Preview on different screen sizes 5. Share the link when you're both ready! 💕 ## Troubleshooting 🔧 **Images not loading?** - Make sure images are in `src/assets/images/` - Check file names match exactly (case-sensitive) **Music not playing?** - Add music file to `src/assets/audio/` - Some browsers require user interaction before playing audio **PDF not generating?** - Make sure jsPDF is installed: `npm install jspdf` **GitHub Pages 404?** - Check base-href matches your repository name - Ensure gh-pages branch is set in repository settings ## License 📄 This project is free to use for personal purposes. Made with ❤️ for your special someone! --- **Good luck! May she say YES! 💖** #� �s�i�m�v�a�l�2�.�0� � �