A romantic and interactive proposal website designed to create unforgettable moments.
With playful animations, personalized messages, and a touch of magic! ✨
https://vanshcz.github.io/itstruelove?name=YourCrushName
| Feature | Description |
|---|---|
| 💌 | Personalized Messages - Add your special someone's name through the URL |
| 🎉 | Confetti Celebration - Beautiful confetti animation when they say "Yes" |
| 🎮 | Lottie Animations - Smooth and engaging heart animations |
| 🔹 | Playful "No" Button - The "No" button moves randomly (can't escape love!) |
| 📱 | Fully Responsive - Works on all devices seamlessly |
| 🎨 | Beautiful UI - Gradient backgrounds and modern design |
| ⚡ | Fast Loading - Optimized for quick performance |
| 🔗 | Easy Sharing - Simple URL-based customization |
graph LR
A[🌐 Visit Website] --> B[📝 Add Name Parameter]
B --> C[📤 Share with Crush]
C --> D[💖 Wait for Response]
D --> E[🎉 Celebrate Together!]
style A fill:#ff69b4
style B fill:#ff8a80
style C fill:#ffab91
style D fill:#ffcc80
style E fill:#a5d6a7
# Step 1: Visit the website
https://vanshcz.github.io/itstruelove
# Step 2: Add your crush's name
https://vanshcz.github.io/itstruelove?name=Jessica
# Step 3: Share the link with your special someone! 💝🎨 1. Change Colors
Edit the CSS variables in style.css:
:root {
--primary-color: #e91e63; /* 💗 Main pink color */
--secondary-color: #ff4081; /* 💕 Secondary accent */
--background-color: #ffe5e5; /* 🌸 Page background */
--text-color: #333333; /* 📝 Text color */
--button-hover: #c2185b; /* 🔘 Button hover */
}✏️ 2. Change Text Content
Edit the content in index.html:
<!-- Main Heading -->
<h1>Hey <span id="name-placeholder"></span>! 💖</h1>
<!-- Proposal Question -->
<p class="proposal-text">Will you make me the happiest person in the world?</p>
<!-- Button Text -->
<button class="yes-btn">Yes, I will! 💕</button>
<button class="no-btn">Let me think... 🤔</button>🎬 3. Update Animations
Replace the Lottie JSON files:
- Get new animations from LottieFiles
- Replace the existing
sticker*.jsonfiles - Update references in
script.js:
// Load custom animation
const animation = lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'your-animation.json' // 👈 Change this
});🎊 4. Customize Confetti
Modify confetti settings in script.js:
confetti({
particleCount: 150, // 🔢 Number of confetti
spread: 80, // 📐 Spread angle
origin: { y: 0.6 }, // 📍 Origin point
colors: ['#ff69b4', '#ff1493', '#ff6b6b', '#ffd700'] // 🎨 Colors
});
itstruelove/
├── 📄 index.html # Main HTML file
├── 🎨 style.css # Styling and animations
├── ⚡ script.js # Interactive functionality
├── 🎬 sticker1.json # Lottie animation file
├── 🎬 sticker2.json # Lottie animation file
├── 🖼️ preview.gif # Preview image
├── 📜 LICENSE # MIT License
└── 📖 README.md # Documentation
Contributions make the open-source community amazing! 🌟
# 1. Fork the repository
# 2. Create your feature branch
git checkout -b feature/AmazingFeature
# 3. Commit your changes
git commit -m '✨ Add some AmazingFeature'
# 4. Push to the branch
git push origin feature/AmazingFeature
# 5. Open a Pull Request
| Platform | Link |
|---|---|
| 🌐 Website | vanshcz.online |
| 📂 GitHub | @vanshcz |
| 📱 Telegram | @botsarefather |
| 📁 Project | itstruelove |
| Credit | Description |
|---|---|
| 💻 | Created by Vansh |
| 🎨 | Animations from LottieFiles |
| 🎊 | Confetti by Canvas Confetti |
| 💡 | Inspired by the open-source community |
If you found this project helpful, please give it a star! ⭐
https://vanshcz.github.io/itstruelove?name=YourSpecialPerson
