<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mood Movie Bot</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.chatbot-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 25px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 450px;
overflow: hidden;
animation: slideUp 0.8s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header {
background: linear-gradient(135deg, #8B5CF6, #A855F7);
color: white;
padding: 20px 25px;
text-align: center;
position: relative;
overflow: hidden;
}
.user-profile {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.profile-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, #F59E0B, #F97316);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: white;
border: 3px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.profile-info {
text-align: left;
}
.username {
font-size: 16px;
font-weight: 600;
margin-bottom: 2px;
}
.age-badge {
background: rgba(255, 255, 255, 0.2);
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
display: inline-block;
backdrop-filter: blur(5px);
}
.header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(255, 255, 255, 0.05) 10px,
rgba(255, 255, 255, 0.05) 20px
);
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.header h1 {
font-size: 26px;
font-weight: bold;
margin-bottom: 8px;
position: relative;
z-index: 1;
letter-spacing: 2px;
}
.header p {
font-size: 16px;
opacity: 0.9;
position: relative;
z-index: 1;
}
.chat-window {
height: 400px;
overflow-y: auto;
padding: 20px;
background: white;
}
.message {
margin-bottom: 15px;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.bot-message {
background: linear-gradient(135deg, #F3E8FF, #E9D5FF);
border: 2px solid #A855F7;
border-radius: 20px 20px 20px 5px;
padding: 15px;
margin-right: 20px;
position: relative;
}
.bot-message::before {
content: '🤖';
position: absolute;
left: -15px;
top: -5px;
background: #A855F7;
border-radius: 50%;
padding: 8px;
font-size: 16px;
}
.user-message {
background: linear-gradient(135deg, #8B5CF6, #A855F7);
color: white;
border-radius: 20px 20px 5px 20px;
padding: 15px;
margin-left: 20px;
text-align: right;
position: relative;
}
.user-message::before {
content: '25';
position: absolute;
right: -15px;
top: -5px;
background: linear-gradient(135deg, #F59E0B, #F97316);
border-radius: 50%;
padding: 6px 8px;
font-size: 12px;
font-weight: bold;
color: white;
border: 2px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.movie-recommendation {
background: rgba(139, 92, 246, 0.1);
border: 1px solid #A855F7;
border-radius: 15px;
padding: 12px;
margin: 8px 0;
transition: all 0.3s ease;
}
.movie-recommendation:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
}
.movie-title {
font-weight: bold;
color: #7C3AED;
font-size: 16px;
}
.movie-genre {
color: #8B5CF6;
font-size: 14px;
margin-top: 4px;
}
.input-container {
padding: 20px;
background: white;
border-top: 1px solid #E5E7EB;
}
.mood-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.mood-btn {
background: linear-gradient(135deg, #F3E8FF, #E9D5FF);
border: 2px solid #A855F7;
color: #7C3AED;
padding: 12px 16px;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
text-align: center;
}
.mood-btn:hover {
background: linear-gradient(135deg, #A855F7, #8B5CF6);
color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}
.custom-input {
width: 100%;
padding: 15px;
border: 2px solid #E5E7EB;
border-radius: 25px;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
}
.custom-input:focus {
border-color: #A855F7;
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}
.send-btn {
background: linear-gradient(135deg, #8B5CF6, #A855F7);
color: white;
border: none;
padding: 15px 25px;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
margin-top: 10px;
width: 100%;
transition: all 0.3s ease;
}
.send-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}
.typing-indicator {
display: none;
padding: 15px;
font-style: italic;
color: #8B5CF6;
}
.typing-dots {
display: inline-block;
}
.typing-dots span {
animation: blink 1.4s infinite both;
}
.typing-dots span:nth-child(2) {
animation-delay: .2s;
}
.typing-dots span:nth-child(3) {
animation-delay: .4s;
}
@keyframes blink {
0%, 80%, 100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #F3F4F6;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #A855F7;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #8B5CF6;
}
</style>
</head>
<body>
<div class="chatbot-container">
<div class="header">
<div class="user-profile">
<div class="profile-avatar">25</div>
<div class="profile-info">
<div class="username">e/sairamajja</div>
<div class="age-badge">Under 25</div>
</div>
</div>
<h1>MOOD MOVIE BOT</h1>
<p> bestie 💜</p>
</div>
<div class="chat-window" id="chatWindow">
<div class="message">
<div class="bot-message">
<strong>Yo yo yo! What's good? 🔥</strong><br>
Your girl is BACK and ready to drop some absolutely FIRE movie
recs that'll match your exact energy! I'm not here to give you boring Netflix
homepage suggestions - nah bestie, we're going DEEP into the cinema vault! 🎬
💯<br><br>
So spill the tea... what's your current vibe check looking
like? Are we crying tonight or are we ready to laugh until our sides hurt? Let me
know and I'll hook you UP! ✨
</div>
</div>
</div>
<div class="typing-indicator" id="typingIndicator">
MovieBot is typing<span
class="typing-dots"><span>.</span><span>.</span><span>.</span></span>
</div>
<div class="input-container">
<div class="mood-buttons">
<button class="mood-btn" onclick="selectMood('sad')">😢
Sad</button>
<button class="mood-btn" onclick="selectMood('happy')">😊
Happy</button>
<button class="mood-btn" onclick="selectMood('bored')">😴
Bored</button>
<button class="mood-btn" onclick="selectMood('excited')">🤩
Excited</button>
<button class="mood-btn" onclick="selectMood('romantic')">💕
Romantic</button>
<button class="mood-btn" onclick="selectMood('stressed')">😰
Stressed</button>
</div>
<input type="text" class="custom-input" id="customMood" placeholder="Or
describe your vibe in your own words...">
<button class="send-btn" onclick="sendCustomMood()">Send Vibe
✨</button>
</div>
</div>
<script>
const movieDatabase = {
sad: [
{ title: "The Pursuit of Happyness", genre: "Drama", reason:
"Perfect for an emotional release and finding hope" },
{ title: "Inside Out", genre: "Animation/Family", reason:
"Validates your feelings while being wholesome" },
{ title: "Her", genre: "Romance/Drama", reason: "Beautiful
exploration of loneliness and connection" }
],
happy: [
{ title: "The Grand Budapest Hotel", genre: "Comedy/Adventure",
reason: "Whimsical vibes that match your energy" },
{ title: "Mamma Mia!", genre: "Musical/Comedy", reason: "Pure joy
and ABBA - what more do you need?" },
{ title: "Paddington 2", genre: "Family/Comedy", reason: "Wholesome
content that'll keep you smiling" }
],
bored: [
{ title: "Inception", genre: "Sci-Fi/Thriller", reason: "Mind-
bending plot that'll wake up your brain" },
{ title: "Knives Out", genre: "Mystery/Comedy", reason: "Perfect
mix of intrigue and entertainment" },
{ title: "Spider-Man: Into the Spider-Verse", genre:
"Animation/Action", reason: "Visual feast that's impossible to be bored during" }
],
excited: [
{ title: "Mad Max: Fury Road", genre: "Action/Adventure", reason:
"Non-stop adrenaline that matches your energy" },
{ title: "Baby Driver", genre: "Action/Crime", reason: "High-octane
fun with an amazing soundtrack" },
{ title: "John Wick", genre: "Action/Thriller", reason: "Pure
action perfection - no filler, all killer" }
],
romantic: [
{ title: "The Half of It", genre: "Romance/Comedy", reason: "Modern
take on love that hits different" },
{ title: "To All the Boys I've Loved Before", genre:
"Romance/Comedy", reason: "Comfort food for your romantic soul" },
{ title: "Pride and Prejudice (2005)", genre: "Romance/Drama",
reason: "Peak romantic cinema - argue with the wall" }
],
stressed: [
{ title: "Studio Ghibli Collection", genre: "Animation/Fantasy",
reason: "Instant stress relief through pure magic" },
{ title: "The Great British Baking Show", genre:
"Reality/Competition", reason: "Not a movie but trust me - pure zen vibes" },
{ title: "Finding Nemo", genre: "Animation/Family", reason:
"Comfort viewing that never gets old" }
],
heartbroken: [
{ title: "500 Days of Summer", genre: "Romance/Comedy-Drama",
reason: "Perfectly captures the heartbreak experience" },
{ title: "Eternal Sunshine of the Spotless Mind", genre:
"Romance/Sci-Fi", reason: "Deep dive into love and memory - therapeutic tbh" },
{ title: "Someone Great", genre: "Comedy/Drama", reason:
"Friendship and healing after heartbreak" }
],
motivated: [
{ title: "The Social Dilemma", genre: "Documentary", reason: "Will
make you want to change the world" },
{ title: "Hidden Figures", genre: "Biography/Drama", reason:
"Inspiring women breaking barriers" },
{ title: "Rocky", genre: "Sports/Drama", reason: "Classic underdog
story for motivation" }
]
};
const sassyResponses = [
"OKAYYYY I see you! That mood is absolutely valid and I'm about to
SERVE! 💅✨",
"Bestie said what they said and I FELT that! Let me bless you with
these picks! 🙌",
"Not you coming for my heart with that vibe! I got the PERFECT lineup
ready! 🎯",
"Stop it, that's such a whole ass MOOD! Your cinema experience is about
to be ELEVATED! 📈",
"The way you just described that feeling... *chef's kiss* Let me feed
your soul with these movies! "
];
function addMessage(content, isUser = false) {
const chatWindow = document.getElementById('chatWindow');
const messageDiv = document.createElement('div');
messageDiv.className = 'message';
const messageContent = document.createElement('div');
messageContent.className = isUser ? 'user-message' : 'bot-message';
if (isUser) {
messageContent.innerHTML = `<div style="font-size: 12px; opacity:
0.8; margin-bottom: 5px;">e/sairamajja</div>${content}`;
} else {
messageContent.innerHTML = content;
}
messageDiv.appendChild(messageContent);
chatWindow.appendChild(messageDiv);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
const typingIndicatorText = [
"Mood Movie Bot is typing",
"Mood Movie Bot is curating your perfect picks",
"Mood Movie Bot is serving cinema excellence"
];
function showTyping() {
const indicator = document.getElementById('typingIndicator');
const randomText = typingIndicatorText[Math.floor(Math.random() *
typingIndicatorText.length)];
indicator.innerHTML = randomText + '<span class="typing-
dots"><span>.</span><span>.</span><span>.</span></span>';
indicator.style.display = 'block';
}
function hideTyping() {
document.getElementById('typingIndicator').style.display = 'none';
}
function getMovieRecommendations(mood) {
const moodKey = mood.toLowerCase();
let movies = movieDatabase[moodKey];
if (!movies) {
// Fallback for custom moods
if (moodKey.includes('angry') || moodKey.includes('mad')) {
movies = movieDatabase.stressed;
} else if (moodKey.includes('love') || moodKey.includes('crush')) {
movies = movieDatabase.romantic;
} else if (moodKey.includes('tired') || moodKey.includes('sleepy'))
{
movies = movieDatabase.bored;
} else {
movies = movieDatabase.happy; // Default to happy movies
}
}
return movies || movieDatabase.happy;
}
function generateResponse(mood) {
const movies = getMovieRecommendations(mood);
const sassyIntro = sassyResponses[Math.floor(Math.random() *
sassyResponses.length)];
let response = `<strong>${sassyIntro}</strong><br><br>`;
// Add mood-specific sassy comment
const moodComments = {
sad: "Feeling sad? Bestie we're about to have a THERAPEUTIC crying
session with some top-tier emotional cinema! Get your tissues ready! 😭",
happy: "Happy energy is IMMACULATE right now! Let's keep riding
this wave with some feel-good cinema magic! 🌊✨",
bored: "BORED?! Not happening on my watch! I'm about to blow your
mind with some absolutely WILD content that'll wake up every brain cell! 🧠💥",
excited: "That excited energy is CONTAGIOUS and I am LIVING for it!
Let's channel all that hype into some epic movie madness! ⚡",
romantic: "Ooooh someone's feeling the love vibes! Say no more
babe, I'm about to make your heart do BACKFLIPS! ",
stressed: "Stressed bestie?! Time to decompress with some healing
cinema therapy that'll melt all that tension away! ",
heartbroken: "Heartbroken hours hit different... but we're gonna
process these feelings with some soul-healing movies that GET IT! ➡️",
motivated: "MOTIVATION MODE ACTIVATED! These movies are gonna have
you ready to take over the entire world! CEO energy incoming! 🚀👑"
};
const comment = moodComments[mood.toLowerCase()] || "Let me serve you
some cinema excellence! 🎬";
response += `<em>${comment}</em><br><br>Here are my top 3 picks:`;
movies.forEach((movie, index) => {
response += `
<div class="movie-recommendation">
<div class="movie-title">${index + 1}. ${movie.title}</div>
<div class="movie-genre">${movie.genre}</div>
<div style="margin-top: 8px; font-size: 14px; color:
#6B7280;">${movie.reason}</div>
</div>`;
});
response += `<br><strong>Now go grab some snacks, get cozy, and prepare
for this CINEMATIC EXPERIENCE! Don't forget to hydrate bestie! 💧🍿✨</strong>`;
return response;
}
function selectMood(mood) {
addMessage(`I'm feeling ${mood} 😔`, true);
showTyping();
setTimeout(() => {
hideTyping();
const response = generateResponse(mood);
addMessage(response);
}, 1500);
}
function sendCustomMood() {
const input = document.getElementById('customMood');
const mood = input.value.trim();
if (mood) {
addMessage(mood, true);
input.value = '';
showTyping();
setTimeout(() => {
hideTyping();
const response = generateResponse(mood);
addMessage(response);
}, 1500);
}
}
// Allow Enter key to send custom mood
document.getElementById('customMood').addEventListener('keypress',
function(e) {
if (e.key === 'Enter') {
sendCustomMood();
}
});
</script>
</body>
</html>
