← back to B Version 1
web-interface/index.html
110 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dear Bubbe - Ask Your Favorite Jewish Grandma</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Cache busting meta tags -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- PWA and mobile optimization -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="chat.css?v=3.0" />
</head>
<body>
<div class="chat-app">
<!-- Header -->
<header class="chat-header">
<div class="chat-header-left">
<div class="chat-avatar">🥯</div>
<div>
<div class="chat-title">Dear Bubbe</div>
<div class="chat-status">
<span class="status-dot"></span>
Ready to help
</div>
</div>
</div>
<button class="chat-header-btn" aria-label="Menu">⋮</button>
</header>
<!-- Breaking News Banner -->
<div class="breaking-news-banner" id="breaking-news" style="display: none;">
<div class="breaking-news-header">
<span class="breaking-news-icon">📰</span>
<span class="breaking-news-title">BREAKING NEWS</span>
</div>
<div class="breaking-news-items" id="breaking-news-items">
<div class="breaking-news-loading">Loading latest headlines...</div>
</div>
</div>
<!-- Messages -->
<main class="chat-main" id="chat-messages">
<!-- Welcome message -->
<div class="msg-row msg-assistant">
<div class="msg-avatar">🥯</div>
<div class="msg-bubble">
<p><strong>Oy vey, bubbeleh!</strong></p>
<p>What's troubling you today? Your Bubbe is here to help with all your meshuggeneh problems. Ask me anything - relationships, work, family, or that annoying neighbor who parks in your spot.</p>
<span class="msg-meta">Bubbe · Just now</span>
</div>
</div>
</main>
<!-- Input bar -->
<footer class="chat-input-bar">
<button class="icon-btn mode-btn" id="mode-btn" aria-label="Change Mode" title="Switch personality mode">
🎭
</button>
<div class="input-wrapper">
<textarea
id="chat-input"
rows="1"
placeholder="Ask Bubbe for advice... (Type /bubbe, /meshugana, or /comedian)"
></textarea>
<div class="mode-indicator" id="mode-indicator">
<span class="mode-badge">Bubbe Mode</span>
</div>
</div>
<button class="send-btn" id="send-btn" aria-label="Send">
➤
</button>
</footer>
<!-- Mode selector popup -->
<div class="mode-selector" id="mode-selector" style="display: none;">
<div class="mode-option" data-mode="bubbe">
<div class="mode-option-icon">🥯</div>
<div class="mode-option-info">
<div class="mode-option-title">Bubbe Mode</div>
<div class="mode-option-desc">Classic Jewish grandma wisdom</div>
</div>
</div>
<div class="mode-option" data-mode="meshugana">
<div class="mode-option-icon">🤪</div>
<div class="mode-option-info">
<div class="mode-option-title">Meshugana Mode</div>
<div class="mode-option-desc">Wild, chaotic, over-the-top advice</div>
</div>
</div>
<div class="mode-option" data-mode="comedian">
<div class="mode-option-icon">🎤</div>
<div class="mode-option-info">
<div class="mode-option-title">Comedian Mode</div>
<div class="mode-option-desc">Stand-up comedy style responses</div>
</div>
</div>
</div>
</div>
<script src="chat.js?v=3.0"></script>
</body>
</html>