<!DOCTYPE html>
<html>
<head>
<title>Proposal Blog</title>
<style>
body {
background-color: #f8f8f8;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
h1 {
color: #ff69b4;
font-size: 3em;
margin: 0;
padding: 20px;
text-align: center;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin: 20px auto;
max-width: 800px;
padding: 20px;
}
.message {
display: none;
margin: 20px 0;
padding: 20px;
text-align: center;
}
.active {
display: block;
}
.btn {
background-color: #ff69b4;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 1.2em;
margin: 20px 0;
padding: 10px 20px;
text-align: center;
text-decoration: none;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #ff1493;
}
</style>
</head>
<body>
<h1>BETTY BUTTER</h1>
<div class="container">
<div class="message active">
<p>My dearest Dorcas,</p>
<p>As I sit down to write this message, my heart is filled with love and joy.</p>
<p>From the moment I started chatting you on Facebook 2 years ago, I felt that you could be the one for me. You are kind, soft, caring, and beautiful, both inside and out. You make me laugh, you make me smile, and you make me feel at peace every time I'm chatting with you.</p>
<p>Though we stopped chatting for a while because I discovered you were happy with someone else, so I had to sideline myself and admire you from afar so I won't be the reason you're sad.</p>
<p>However, when I discovered you were single, I was happy for myself but then I felt bad for you because I know how painful it is to lose someone you thought was the one for you.</p>
<p>I wouldn't want to bore you with too much story. So I'm going to the main reason why I designed this website.</p>
<p>So today, I want to ask you something very important. [Click Next to continue]</p>
<button class="btn" onclick="nextMessage()">Next</button>
</div>
<div class="message">
<p>Dorcas, will you be my Val?</p>
<p>I know that we have only been talking for a short time, and we haven't even met yet, but I feel like I have known you abit to give Love a trial with you.</p> <p>So please, say yes. Say that you will be my Val, and make me the happiest guy in the world.</p>
<button class="btn" onclick="nextMessage()">Next</button>
</div>
<div class="message">
<p>Dorcas, I know relationship is a journey and it has a destination, my destination is to make you my queen and to be by your side forever, to travail the path of greatness together and create future for ourselves and for the betterment of the community.</p>
<p>So, Will you be my Girlfriend?</p>
<button class="btn" onclick="nextMessage()">Next</button>
</div>
<div class="message">
<p>Dorcas, I know you've passed through alot of pains and heartbreak and it has redefined how you feel about relationship but I will like you to make an exception for me.</p>
<p>So, will you be my Val??</p>
<button class="btn" onclick="nextMessage()">Next</button>
</div>
<div class="message">
<p>Though you said you are not ready for a relationship, but I feel like the more I wait the more I stand the risk of losing my potential Queen. I promise to love you, cherish you, and support you to the best of my ability. I cannot wait to start this new chapter with you.</p>
<p>So, will you be my Queen?</p>
<button class="btn" onclick="nextMessage()">Next</button>
</div>
<div class="message">
<p>Dorcas, I cannot wait to begin the of Love with you. To make you everything, and to make me your everything too.</p>
<p>So, I will be waiting for your response.</p>
<button class="btn" onclick="sendWhatsAppMessage('Yes')">Yes</button>
<button class="btn" onclick="sendWhatsAppMessage('No')">No</button>
</div>
<script>
let currentMessage = 1;
function nextMessage() {
const messages = document.querySelectorAll('.message');
if (currentMessage < messages.length) {
messages[currentMessage - 1].classList.remove('active');
messages[currentMessage].classList.add('active');
currentMessage++;
} else {
// If there are no more messages, you can redirect to another page or perform another action
alert('Congratulations on reaching the end of the proposal!');
}
}
function sendWhatsAppMessage(response) {
// Use the response parameter to customize the message based on the user's choice
const message = response === 'Yes' ? "Yes Godwin, I will be your VAL" : "Maybe next time.";
// Form the WhatsApp URL
const whatsappUrl = `https://wa.me/+2347037219043/?text=${encodeURIComponent(message)}`;
// Open WhatsApp in a new tab
window.open(whatsappUrl, '_blank');
}
</script>
</body>
</html>
index.html
Displaying index.html.
