<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>goga babyChatbot</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #ffe6f2; /* light pink */
color: #333;
}
#chat-container {
max-width: 600px;
margin: 20px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
#chat-area {
padding: 15px;
flex: 1;
overflow-y: auto;
}
.bot-message {
background-color: #ffb3d1;
color: #333;
margin: 10px 0;
padding: 10px 15px;
border-radius: 15px;
max-width: 80%;
align-self: flex-start;
}
.bot-message:before {
content: "GOGA";
font-weight: bold;
margin-right: 5px;
}
#button-area {
background-color: #ffe6f2;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
button {
background-color: #ffb3d1;
color: #333;
border: none;
border-radius: 20px;
padding: 10px 15px;
margin: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #e69fb8;
}
@keyframes float {
0% {transform: translateY(0) rotate(0deg); opacity: 1;}
100% {transform: translateY(-300px) rotate(360deg); opacity: 0;}
}
.heart-float {
position: fixed;
bottom: 10px;
font-size: 2rem;
color: #e60073;
animation: float 3s ease-out forwards;
pointer-events: none;
z-index: 1000;
}
@media screen and (max-width: 600px) {
#chat-container {
margin: 10px;
}
button {
padding: 8px 10px;
font-size: 14px;
}
}
</style>
</head>
<body>
<div id="chat-container">
<div id="chat-area">
<div class="bot-message">Hi Gourika! I'm <strong>Goga</strong> (Made for
gourika), your personal chatbot. 😊 I'm here to chat with you and share memories
and messages. 🌸</div>
</div>
<div id="button-area">
<button id="memoryBtn">fav thing we do</button>
<button id="thinkBtn">What does avanya think of me?</button>
<button id="futureBtn">Our future plans</button>
<button id="surpriseBtn">Send me a surprise message</button>
<button id="throwbackBtn">Throwback time!</button>
<button id="secretBtn">Secret Message</button>
<button id="loveBtn">Love You 💖</button>
</div>
</div>
<audio id="bgMusic" loop>
<source src="UntilIFoundYou.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
const chatArea = [Link]('chat-area');
function addMessage(text) {
const msg = [Link]('div');
[Link] = 'bot-message';
[Link] = text;
[Link](msg);
[Link] = [Link];
}
[Link]('memoryBtn').addEventListener('click', () => {
addMessage(" us bitching about ur exes,ex-friends and everyone. Love doing
that shit.");
});
[Link]('thinkBtn').addEventListener('click', () => {
addMessage("I love you not just as a friend, but as someone who means more
to me than words can explain. And no matter what, I’ll always be here for you.!");
});
[Link]('futureBtn').addEventListener('click', () => {
addMessage("Us staying in same apartment✨");
});
[Link]('surpriseBtn').addEventListener('click', () => {
addMessage("I love you in the realest, most platonic, soul-sister kind of
way. stay like this💕");
});
[Link]('throwbackBtn').addEventListener('click', () => {
addMessage("visiting our second home MCD");
});
[Link]('secretBtn').addEventListener('click', () => {
addMessage("💕You genuinely have the bestest vibes like sunshine on a bad
day kind of energy. Being around you feels like peace, like laughter, like home.
You deserve everything good in this world happiness, love, success, and people who
see you the way you truly are. Thankyou for being [Link] ya ");
});
[Link]('loveBtn').addEventListener('click', () => {
for (let i = 0; i < 10; i++) {
setTimeout(() => {
const heart = [Link]('div');
[Link] = 'heart-float';
[Link] = [Link]() * 80 + 10 + 'vw';
[Link] = '💖';
[Link](heart);
[Link]('animationend', () => {
[Link]();
});
}, i * 200);
}
addMessage("Love you from the bottom of my heart 💖");
});
// Enable music play after first user interaction
[Link]('click', () => {
const music = [Link]('bgMusic');
if ([Link]) {
[Link]().catch(() => {});
}
}, { once: true });
</script>
</body>
</html>