<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ bank_info.name }} - AI Chat Support</title>
<style>
:root {
--primary-color: #004d99;
--secondary-color: #0073e6;
--background-color: #f5f7fa;
--text-color: #333;
--border-color: #e0e0e0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Arial, sans-serif;
}
body {
background-color: var(--background-color);
color: var(--text-color);
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background-color: var(--primary-color);
color: white;
padding: 1rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header h1 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.header p {
font-size: 0.9rem;
opacity: 0.9;
}
.chat-container {
max-width: 1200px;
margin: 20px auto;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 20px;
width: 95%;
}
.chat-messages {
flex-grow: 1;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.message {
max-width: 80%;
padding: 15px 20px;
border-radius: 15px;
margin: 8px 0;
line-height: 1.5;
font-size: 15px;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.message ul, .message ol {
margin-left: 20px;
margin-top: 8px;
margin-bottom: 8px;
padding-left: 15px;
}
.message li {
margin-bottom: 5px;
}
.message p {
margin-bottom: 10px;
}
.message h1, .message h2, .message h3, .message h4 {
margin-top: 15px;
margin-bottom: 10px;
color: var(--primary-color);
}
.message code {
background-color: #f8f9fa;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
}
.message table {
border-collapse: collapse;
margin: 10px 0;
width: 100%;
}
.message th, .message td {
border: 1px solid var(--border-color);
padding: 8px 12px;
text-align: left;
}
.message th {
background-color: #f8f9fa;
}
.user-message {
background-color: var(--secondary-color);
color: white;
align-self: flex-end;
position: relative;
}
.user-message::after {
content: '';
position: absolute;
right: -8px;
bottom: 15px;
border: 8px solid transparent;
border-left-color: var(--secondary-color);
}
.ai-message {
background-color: white;
color: var(--text-color);
align-self: flex-start;
border: 1px solid var(--border-color);
position: relative;
}
.ai-message::after {
content: '';
position: absolute;
left: -8px;
bottom: 15px;
border: 8px solid transparent;
border-right-color: white;
}
.ai-message::before {
content: '';
position: absolute;
left: -9px;
bottom: 15px;
border: 8px solid transparent;
border-right-color: var(--border-color);
}
.ai-message a {
color: var(--secondary-color);
text-decoration: none;
font-weight: 500;
}
.ai-message a:hover {
text-decoration: underline;
}
.ai-message strong, .ai-message b {
color: var(--primary-color);
}
.message-time {
font-size: 0.75rem;
color: #666;
margin-top: 5px;
text-align: right;
}
.input-container {
display: flex;
gap: 10px;
padding: 20px 0 0 0;
border-top: 1px solid var(--border-color);
margin-top: 20px;
}
#message-input {
flex-grow: 1;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 20px;
outline: none;
font-size: 16px;
transition: border-color 0.3s;
}
#message-input:focus {
border-color: var(--secondary-color);
}
#send-button {
padding: 12px 24px;
background-color: var(--secondary-color);
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
#send-button:hover {
background-color: var(--primary-color);
}
#send-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.loading {
display: none;
align-self: center;
margin: 10px 0;
color: #666;
font-style: italic;
}
.disclaimer {
font-size: 0.8rem;
color: #666;
text-align: center;
margin-top: 10px;
padding: 10px;
border-top: 1px solid var(--border-color);
}
.bank-info {
background-color: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin: 10px 0;
font-size: 0.9rem;
}
.bank-info h3 {
color: var(--primary-color);
margin-bottom: 10px;
}
.bank-info p {
margin: 5px 0;
}
.bank-info .contact {
color: var(--secondary-color);
font-weight: 500;
}
.header .bank-name {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.header .bank-tagline {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 0.5rem;
}
.header .bank-contact {
font-size: 0.9rem;
opacity: 0.8;
}
@media (max-width: 768px) {
.chat-container {
margin: 10px auto;
width: 98%;
}
.message {
max-width: 90%;
}
}
</style>
</head>
<body>
<div class="header">
<div class="bank-name">{{ bank_info.name }}</div>
<div class="bank-tagline">Your Trusted Banking Partner</div>
<div class="bank-contact">
Support: {{ bank_info.phone }} | {{ bank_info.email }}
</div>
</div>
<div class="chat-container">
<div class="bank-info">
<h3>Welcome to {{ bank_info.name }}</h3>
<p><strong>Hours:</strong> Weekdays {{ bank_info.hours.weekdays }}, Saturday {{ bank_info.hours.saturday }}, {{ bank_info.hours.sunday }} on Sunday</p>
<p><strong>Main Office:</strong> {{ bank_info.headquarters }}</p>
<p class="contact">24/7 Support: {{ bank_info.phone }}</p>
</div>
<div class="chat-messages" id="chat-messages">
<div class="message ai-message">
Hello! I'm your AI banking assistant at {{ bank_info.name }}. How can I help you today? I can assist with:
<ul>
{% for service in bank_info.services %}
<li>{{ service }}</li>
{% endfor %}
</ul>
<p>For immediate assistance:</p>
<ul>
<li>Customer Service: {{ bank_info.support_channels.customer_service }}</li>
<li>Technical Support: {{ bank_info.support_channels.technical_support }}</li>
<li>Report Fraud: {{ bank_info.support_channels.fraud_reporting }}</li>
</ul>
</div>
</div>
<div class="loading" id="loading">Processing your request...</div>
<div class="input-container">
<input type="text"
id="message-input"
placeholder="Type your banking question here..."
autocomplete="off">
<button id="send-button">Send</button>
</div>
<div class="disclaimer">
This is an AI assistant for general banking information from {{ bank_info.name }}. For specific account details or sensitive transactions, please contact our customer service or visit your nearest branch.
</div>
</div>
<script>
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const chatMessages = document.getElementById('chat-messages');
const loading = document.getElementById('loading');
function addMessage(content, isUser = false) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
// Create message content
const contentDiv = document.createElement('div');
if (isUser) {
contentDiv.textContent = content;
} else {
contentDiv.innerHTML = content;
// Add bullet points to lists if they don't have them
contentDiv.querySelectorAll('ul li').forEach(li => {
if (!li.textContent.startsWith('•')) {
li.textContent = '• ' + li.textContent;
}
});
}
messageDiv.appendChild(contentDiv);
// Add timestamp
const timeDiv = document.createElement('div');
timeDiv.className = 'message-time';
const now = new Date();
timeDiv.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
messageDiv.appendChild(timeDiv);
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
async function sendMessage() {
const message = messageInput.value.trim();
if (!message) return;
// Disable input and button while processing
messageInput.value = '';
messageInput.disabled = true;
sendButton.disabled = true;
loading.style.display = 'block';
// Add user message to chat
addMessage(message, true);
try {
const response = await fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: message }),
});
const data = await response.json();
if (response.ok) {
addMessage(data.response);
} else {
addMessage('I apologize, but I encountered an error processing your request. Please try again or contact bank support if the issue persists.');
}
} catch (error) {
addMessage('I apologize, but I\'m having trouble connecting to the server. Please check your internet connection and try again.');
} finally {
// Re-enable input and button
messageInput.disabled = false;
sendButton.disabled = false;
loading.style.display = 'none';
messageInput.focus();
}
}
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
// Focus input on page load
messageInput.focus();
</script>
</body>
</html>
