Miki & Pipi/title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> :root { --primary: #ff6b9d; --secondary: #7c4dff; --accent: #00e5ff; --dark: #2d3748; --light: #f8fafc; --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; color: var(--dark); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } header { text-align: center; margin-bottom: 3rem; position: relative; } .header-content { display: inline-block; position: relative; } h1 { font-size: 2.8rem; font-weight: 600; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.5rem; letter-spacing: -0.5px; } .subtitle { font-size: 1.1rem; color: #64748b; font-weight: 400; } .hearts { position: absolute; top: -10px; right: -30px; font-size: 1.5rem; color: var(--primary); animation: float 3s ease-in-out infinite; } .dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } @media (max-width: 768px) { .dashboard { grid-template-columns: 1fr; } } .card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .distance-card { display: flex; flex-direction: column; align-items: center; justify-content: center; } .distance-value { font-size: 3rem; font-weight: 700; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 1rem 0; } .distance-label { font-size: 1rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; } .love-card { text-align: center; position: relative; overflow: hidden; } .love-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient); } .love-title { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--dark); display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .love-value { font-size: 3.5rem; font-weight: 700; color: var(--primary); text-shadow: 0 2px 10px rgba(255, 107, 157, 0.3); } .counter-info { font-size: 0.9rem; color: #94a3b8; margin-top: 1rem; font-style: italic; } .map-container { margin-bottom: 2rem; } #map { height: 400px; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .message-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem; position: relative; margin-bottom: 2rem; } .message-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .message-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--gradient); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; } .message-title { font-size: 1.5rem; font-weight: 600; color: var(--dark); } .message-content { font-size: 1.1rem; line-height: 1.7; color: #4a5568; } .highlight { background: linear-gradient(120deg, rgba(255, 107, 157, 0.2) 0%, rgba(124, 77, 255, 0.2) 100%); padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 500; } .signature { text-align: right; margin-top: 1.5rem; font-style: italic; color: var(--primary); font-weight: 500; } .floating-hearts { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .heart { position: absolute; color: rgba(255, 107, 157, 0.3); animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .connection-line { stroke-dasharray: 10; animation: dash 20s linear infinite; } @keyframes dash { to { stroke-dashoffset: 1000; } } /* Custom Message Box Styles */ .custom-message-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem; margin-bottom: 2rem; } .custom-message-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .custom-message-title { font-size: 1.5rem; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 0.5rem; } .custom-message-content { font-size: 1.1rem; line-height: 1.7; color: #4a5568; min-height: 150px; padding: 1rem; border: 2px dashed #e2e8f0; border-radius: 8px; margin-bottom: 1.5rem; transition: border-color 0.3s ease; } .custom-message-content:focus { outline: none; border-color: var(--primary); } .custom-message-actions { display: flex; justify-content: flex-end; gap: 1rem; } .btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; border: none; font-size: 1rem; } .btn-primary { background: var(--gradient); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(124, 77, 255, 0.4); } .btn-secondary { background: #f1f5f9; color: var(--dark); } .btn-secondary:hover { background: #e2e8f0; } /* Cat Game Styles */ .cat-game-container { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; margin-bottom: 2rem; text-align: center; } .cat-game-title { font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--dark); display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .cat-game-area { position: relative; height: 300px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; border: 3px solid #e2e8f0; } .cat { position: absolute; font-size: 4rem; cursor: pointer; user-select: none; transition: transform 0.2s ease; } .cat:hover { transform: scale(1.1); } .cat-score { font-size: 1.2rem; font-weight: 600; color: var(--primary); margin-bottom: 1rem; } .cat-instructions { font-size: 0.9rem; color: #64748b; margin-bottom: 1.5rem; } .cat-game-btn { background: var(--gradient); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .cat-game-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(124, 77, 255, 0.4); } .cat-message { margin-top: 1rem; font-style: italic; color: var(--primary); min-height: 1.5rem; } </style> </head> <body> <div class="floating-hearts" id="floating-hearts"></div> <div class="container"> <header> <div class="header-content"> <h1>Miki & Pipi</h1> <div class="subtitle"></div> <div class="hearts">💕</div> </div> </header> <div class="dashboard"> <div class="card distance-card"> <div class="distance-label">Current Distance</div> <div class="distance-value" id="distance-value">0 km</div> <div class="distance-label">Not together yet but always on my mind</div> </div> <div class="card love-card"> <div class="love-title"> <i class="fas fa-heart"></i> How Much I Love You </div> <div class="love-value" id="love-value">0</div> <div class="counter-info">My love for you grows infinitely...</div> </div> </div> <div class="map-container"> <div class="card" style="padding: 0;"> <div id="map"></div> </div> </div> <div class="message-card"> <div class="message-header"> <div class="message-icon"> <i class="fas fa-feather-alt"></i> </div> <div class="message-title">For You, A Thousand Times Over</div> </div> <div class="message-content"> <p>Hi baby, I miss you so much right now, but I'm happy knowing you're doing well. You mean <span class="highlight">the world to me</span>, you are my everything and everything I could have ever asked for. </p> <p>I would have never imagined two years ago that I would be dating a <span class="highlight">baddie like you</span> and you would be my rock throughout everything. I cannot put into words how much you mean to me and how much I love you, how much you make me happy and smile, and how much you make me feel like I can do anything.</p> <p>I love you deeply from the bottom of my heart, and there's genuinely nothing that can change that and nothing ever will.</p> </div> <div class="signature">I Love You So Much Maman </div> </div>  <div class="message-card"> <div class="message-header"> <div class="message-icon"> <i class="fas fa-star"></i> </div> <div class="message-title">Apology</div> </div> <div class="message-content"> <p>Every day with you feels like a blessing with you and im sorry for ruining it sometimes i make some very stupid mistakes which i never mean to make. Im sorry for how i handle things sometimes and im really sorry for not being more careful but i learn everytime something like this happens and i always become better. Im sorry for how things turned out but just know ke ill do anything for you and im really sorry.</p> </div> <div class="signature">A heartfelt Apology which i actually mean</div> </div> <div class="message-card"> <div class="message-header"> <div class="message-icon"> <i class="fas fa-star"></i> </div> <div class="message-title">Apology</div> </div> <div class="message-content"> <p>Hi maman im writing this at night waiting for you and regretting my actions. I know these were a rough few months and things have been hard for both of us but trust me theres no one i would rather spend this time but you, i love u when were apart and not really talking and i love you when were happy and excited but throughout all of the stuff good or bad in my life the only person i remember is you. I am really sorry for my actions and how ive behaved recently i havent been giving you proper attention and i hate that. I am really sorry for everything Ill make this right and we wont give up on each other because thats how we build something meaningful. Im sorry maman and i really really mean it.</p> </div> <div class="signature">16 - 11 - 2025</div> </div>  <div class="cat-game-container"> <div class="cat-game-title"> <i class="fas fa-paw"></i> Cat Game For My Mort </div> <div class="cat-score">Score: <span id="score">0</span></div> <div class="cat-instructions">Click on the cats as they appear to earn points!</div> <div class="cat-game-area" id="cat-game-area">  </div> <button class="cat-game-btn" id="start-game">Start Game</button> <div class="cat-message" id="cat-message"></div> </div> </div>  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script> // Replace these with your coordinates const myLocation = [24.9348281, 67.0691838]; // Example: Karachi const herLocation = [24.8422422, 67.0596738]; // Example: Lahore // Create floating hearts function createFloatingHearts() { const container = document.getElementById('floating-hearts'); const hearts = ['💖', '💕', '❤️', '💘', '💝']; for (let i = 0; i < 15; i++) { const heart = document.createElement('div'); heart.className = 'heart'; heart.innerHTML = hearts[Math.floor(Math.random() * hearts.length)]; heart.style.left = `${Math.random() * 100}%`; heart.style.top = `${Math.random() * 100}%`; heart.style.fontSize = `${Math.random() * 20 + 15}px`; heart.style.animationDelay = `${Math.random() * 5}s`; container.appendChild(heart); } } // Haversine distance function function getDistance(lat1, lon1, lat2, lon2) { const R = 6371; // km const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) ** 2; const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c; } // Cat Game Logic let gameScore = 0; let gameActive = false; let gameTimer; let catInterval; function startCatGame() { if (gameActive) return; gameActive = true; gameScore = 0; document.getElementById('score').textContent = gameScore; document.getElementById('start-game').textContent = 'Playing...'; document.getElementById('cat-message').textContent = 'Catch the cats! 🐱'; // Clear any existing cats const gameArea = document.getElementById('cat-game-area'); gameArea.innerHTML = ''; // Create cats at intervals catInterval = setInterval(createCat, 1000); // End game after 30 seconds gameTimer = setTimeout(endCatGame, 30000); } function createCat() { if (!gameActive) return; const gameArea = document.getElementById('cat-game-area'); const cat = document.createElement('div'); cat.className = 'cat'; cat.innerHTML = '🐱'; // Random position const maxX = gameArea.offsetWidth - 60; const maxY = gameArea.offsetHeight - 60; const x = Math.floor(Math.random() * maxX); const y = Math.floor(Math.random() * maxY); cat.style.left = `${x}px`; cat.style.top = `${y}px`; // Add click event cat.addEventListener('click', () => { gameScore++; document.getElementById('score').textContent = gameScore; cat.remove(); // Show cute messages based on score if (gameScore === 5) { document.getElementById('cat-message').textContent = 'You\'re a cat whisperer! 🐾'; } else if (gameScore === 10) { document.getElementById('cat-message').textContent = 'Purrfect! You\'re amazing! 😻'; } else if (gameScore === 15) { document.getElementById('cat-message').textContent = 'You\'re the cat\'s meow! 🎉'; } }); gameArea.appendChild(cat); // Remove cat after 2 seconds if not clicked setTimeout(() => { if (cat.parentNode) { cat.remove(); } }, 2000); } function endCatGame() { gameActive = false; clearInterval(catInterval); clearTimeout(gameTimer); document.getElementById('start-game').textContent = 'Play Again'; const gameArea = document.getElementById('cat-game-area'); gameArea.innerHTML = ''; // Show final message let message = ''; if (gameScore < 5) { message = 'Good try! The cats were too quick! 😸'; } else if (gameScore < 10) { message = 'Well done! You\'re a cat lover! 🐱'; } else if (gameScore < 15) { message = 'Amazing! You\'re a cat expert! 😻'; } else { message = 'Purrfect! You\'re the ultimate cat whisperer! 🏆'; } document.getElementById('cat-message').textContent = `Game Over! ${message} Final Score: ${gameScore}`; } // Custom Message Box Logic function setupCustomMessage() { const customMessage = document.getElementById('custom-message'); const resetBtn = document.getElementById('reset-btn'); const saveBtn = document.getElementById('save-btn'); // Reset to default message resetBtn.addEventListener('click', () => { customMessage.textContent = 'Type your special message here... 💕'; }); // Save message to localStorage saveBtn.addEventListener('click', () => { const message = customMessage.textContent; localStorage.setItem('customLoveMessage', message); alert('Message saved! It will appear here next time you visit.'); }); // Load saved message if exists const savedMessage = localStorage.getItem('customLoveMessage'); if (savedMessage) { customMessage.textContent = savedMessage; } } // Initialize the page document.addEventListener('DOMContentLoaded', function () { createFloatingHearts(); // Calculate & show distance const distanceKm = getDistance(myLocation[0], myLocation[1], herLocation[0], herLocation[1]).toFixed(2); document.getElementById('distance-value').textContent = `${distanceKm} km`; // Initialize map with modern style const map = L.map('map').setView([ (myLocation[0] + herLocation[0]) / 2, (myLocation[1] + herLocation[1]) / 2 ], 10); // Use a more modern map style L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>', subdomains: 'abcd', maxZoom: 20 }).addTo(map); // Custom icons const myIcon = L.divIcon({ html: '<div class="pulse" style="background: linear-gradient(135deg, #7c4dff, #00e5ff); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; box-shadow: 0 2px 10px rgba(124, 77, 255, 0.5);">💙</div>', className: 'custom-div-icon', iconSize: [30, 30], iconAnchor: [15, 15] }); const herIcon = L.divIcon({ html: '<div class="pulse" style="background: linear-gradient(135deg, #ff6b9d, #ff8fab); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; box-shadow: 0 2px 10px rgba(255, 107, 157, 0.5);">💖</div>', className: 'custom-div-icon', iconSize: [30, 30], iconAnchor: [15, 15] }); // Markers with custom icons L.marker(myLocation, {icon: myIcon}).addTo(map).bindPopup("<b>Me</b><br>Waiting for you 💙").openPopup(); L.marker(herLocation, {icon: herIcon}).addTo(map).bindPopup("<b>My Love</b><br>Thinking of you 💖"); // Stylish connection line const line = L.polyline([myLocation, herLocation], { color: '#ff6b9d', weight: 4, opacity: 0.8, dashArray: '10, 10', lineCap: 'round' }).addTo(map); map.fitBounds(line.getBounds(), {padding: [50, 50]}); // Infinite Love Counter let loveValue = 0; const loveElement = document.getElementById('love-value'); function updateCounter() { // Random increment between 1-5 for a more natural feel const increment = Math.floor(Math.random() * 5) + 1; loveValue += increment; // Format the number with commas for better readability loveElement.textContent = loveValue.toLocaleString(); // Occasionally add a heart emoji for visual interest if (Math.random() < 0.01) { loveElement.innerHTML = loveValue.toLocaleString() + ' <i class="fas fa-heart" style="font-size: 0.7em;"></i>'; setTimeout(() => { loveElement.innerHTML = loveValue.toLocaleString(); }, 1000); } } // Start counter after a brief delay and run infinitely setTimeout(() => { setInterval(updateCounter, 100); // Update every 100ms }, 1000); // Setup cat game document.getElementById('start-game').addEventListener('click', startCatGame); // Setup custom message box setupCustomMessage(); }); </script> </body> </html>