emmanuel.rizky/demo-mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: emmanuel.rizky:158b6d0886c2adaefc768d090b9f830d909cbbf4
Branches Tags
emmanuel.rizky:main
...
compare: emmanuel.rizky:main
Branches Tags
emmanuel.rizky:main

3 Commits
158b6d0886 ... main

Author SHA1 Message Date
emmanuel.rizky
1df74e274d Fix: Update form title and remove unused user details code 
This commit updates the form title in index.html to "Mayagen Demo Gratis". It also removes unused code related to user details from script.js, which was likely leftover from a previous feature and is no longer needed.
 2025-07-21 22:05:41 +07:00
emmanuel.rizky
2991cf0685 Remove chat page and update color palette 
This commit removes the chat page feature, including its HTML, JavaScript, and CSS files. The color palette documentation has also been updated. The chat page was deemed unnecessary for the current scope of the project.
 2025-07-21 21:41:55 +07:00
emmanuel.rizky
84c7cbd8ce feat(chat): Integrate chatbot API for dynamic responses 
This commit replaces the static, simulated chat functionality with a live integration to a chatbot backend API.

The chat page now sends user messages to a webhook endpoint using the `fetch` API. It implements session management by generating and storing a `sessionId` in `localStorage` to maintain conversation context between requests.

Key changes:
- Implement `async` `sendMessage` function to post to the chatbot API.
- Add session ID generation and persistence.
- Dynamically render text and image responses from the API.
- Remove hardcoded example messages from the HTML.
- Update the virtual assistant's name to "Maya".
- Fix navigation links from the dashboard to the chat page.
 2025-07-21 14:44:06 +07:00
11 changed files with 1682 additions and 259 deletions
Expand all files Collapse all files

164
chat-page/script.js
View File

@@ -1,164 +0,0 @@
// Fungsi untuk menambahkan pesan baru ke area chat
function addMessage(content, isSent) {
const chatArea = document.querySelector('.chat-area');
// Buat elemen pesan
const message = document.createElement('div');
message.className = `message ${isSent ? 'sent' : 'received'}`;
// Ambil inisial dari nama di header
const userName = document.querySelector('.user-details h2').textContent;
const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1); // Ambil huruf pertama saja
// Tambahkan avatar kecil untuk pesan masuk
if (!isSent) {
const smallAvatar = document.createElement('div');
smallAvatar.className = 'small-avatar';
smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
message.appendChild(smallAvatar);
} else {
// Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
const personIcon = document.createElement('i');
personIcon.className = 'bi bi-person sent-user-icon';
message.appendChild(personIcon);
}
// Tambahkan konten pesan
const messageContent = document.createElement('div');
messageContent.className = 'message-content';
messageContent.textContent = content;
// Tambahkan waktu pesan
const now = new Date();
const time = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
const messageTime = document.createElement('div');
messageTime.className = 'message-time';
messageTime.textContent = time;
// Gabungkan semua elemen
message.appendChild(messageContent);
message.appendChild(messageTime);
// Tambahkan ke area chat dengan animasi
chatArea.appendChild(message);
// Scroll ke bawah untuk melihat pesan terbaru
chatArea.scrollTop = chatArea.scrollHeight;
}
// Fungsi untuk menampilkan indikator mengetik
function showTypingIndicator() {
const chatArea = document.querySelector('.chat-area');
const typingIndicator = document.createElement('div');
typingIndicator.className = 'typing-indicator';
typingIndicator.innerHTML = `
<div class="typing-dots">
<span></span>
<span></span>
<span></span>
</div>
`;
chatArea.appendChild(typingIndicator);
chatArea.scrollTop = chatArea.scrollHeight;
return typingIndicator;
}
// Fungsi untuk menyembunyikan indikator mengetik
function hideTypingIndicator(indicator) {
if (indicator) {
indicator.remove();
}
}
// Fungsi untuk mengirim pesan
function sendMessage() {
const input = document.querySelector('.message-input');
const message = input.value.trim();
if (message) {
addMessage(message, true);
input.value = '';
toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
// Simulasikan balasan otomatis setelah 2 detik
setTimeout(() => {
const typingIndicator = showTypingIndicator();
// Setelah 3 detik, sembunyikan indikator dan tampilkan balasan
setTimeout(() => {
hideTypingIndicator(typingIndicator);
addMessage('Pesan Anda sudah saya terima. Terima kasih!', false);
}, 3000);
}, 2000);
}
}
// Function to toggle attachment icons visibility
function toggleAttachmentIcons(show) {
const icons = document.querySelector('.attachment-icons');
if (show) {
icons.style.opacity = '1';
icons.style.transform = 'translateY(-50%)';
} else {
icons.style.opacity = '0';
icons.style.transform = 'translateY(-50%) translateX(20px)';
}
}
// Event listener untuk tombol kirim
document.querySelector('.send-btn').addEventListener('click', sendMessage);
// Event listener untuk tombol Enter
document.querySelector('.message-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
// Event listener untuk input text
const messageInput = document.querySelector('.message-input');
messageInput.addEventListener('input', function() {
if (this.value.trim() !== '') {
toggleAttachmentIcons(false);
} else {
toggleAttachmentIcons(true);
}
});
// Initialize attachment icons
document.addEventListener('DOMContentLoaded', () => {
toggleAttachmentIcons(true);
});
// Inisialisasi chat setelah DOM selesai dimuat
document.addEventListener('DOMContentLoaded', () => {
// Tampilkan indikator mengetik saat halaman pertama dimuat
const initialTyping = showTypingIndicator();
// Setelah 3 detik, tampilkan pesan sapaan
setTimeout(() => {
hideTypingIndicator(initialTyping);
addMessage('Hai, ada yang bisa saya bantu?', false);
}, 3000);
// Update avatar utama dengan inisial dari nama saat halaman dimuat
document.addEventListener('DOMContentLoaded', () => {
// Handle viewport height for mobile browsers
const setVh = () => {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
};
setVh();
window.addEventListener('resize', setVh);
window.addEventListener('load', setVh);
const userName = document.querySelector('.user-details h2').textContent;
const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1);
document.querySelector('.avatar').textContent = userInitial;
});
});
// Pastikan animasi mengetik muncul sebelum pesan sambutan
// (Sudah diimplementasikan di atas)

10
color-pallete.md
View File

@@ -1,6 +1,4 @@
03045e
023e8a
0077b6
0096c7
48cae4
ade8f4
604CC3 Untuk Tombol Send, Avatar, dan Avatar di Bubble Admin
FFF6E9 Untuk Buble Chat User dan Admin
80C4E9 Untuk Background Chat
604CC3 Untuk Header dan input field

35
dashboard-page/index.html
View File

@@ -16,31 +16,31 @@
<link rel="stylesheet" href="styles/main.css">
</head>
<body style="font-family: Inter, 'Noto Sans', sans-serif; display: flex; flex-direction: column; min-height: 100vh; padding: 0; background: linear-gradient(135deg, #0077b6, #023e8a) !important;">
<header>
<div class="mobile-header-user-info">
<div
<header>
<div class="mobile-header-user-info">
<div
class="mobile-header-avatar"
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDdsEbNptWuGWnUFVjxjJbETG3Ux0dsBq6vJXBqGqxirKQZ5h08CrhYiwt89C2-bjXZjh3bpwhhheIQH7TY4OfQvZjIE93FvpVViGxSvYuMDJylveD2lc-daeSlCOr8t64jpRbHrEXM0JGuM-CGz99i7dCKdfgcBu7EEecYOxvaPyTNOskRBL3yUkN9tJ659LAKvkEeum2-SYZ1htR83YgVFVP-n8-XoZBoQaa5W7vOC0TZtlOldU-Cq8EkbxM_HQH3prpaomyTJdCF");'
></div>
<h2 class="mobile-header-title">BeautyBot Analytics</h2>
</div>
<div class="mobile-header-right">
<button class="mobile-header-menu-button">
></div>
<h2 class="mobile-header-title">BeautyBot Analytics</h2>
</div>
<div class="mobile-header-right">
<button class="mobile-header-menu-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
<path
d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
></path>
<path
d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
></path>
</svg>
</button>
<div class="dropdown-menu hidden">
</button>
<div class="dropdown-menu hidden">
<button class="control-button">
<span class="truncate">Ekspor Data</span>
<span class="truncate">Ekspor Data</span>
</button>
</div>
</div>
</header>
</div>
</header>
<main>
<main class="container mx-auto px-4">
<div class="layout-content-container">
<h2 class="text-[#141414] tracking-light text-[28px] font-bold leading-tight px-4 text-left pb-3 pt-5">Chatbot Performance Overview</h2>
<div class="controls-container">
@@ -229,6 +229,7 @@
</div>
</main>
<script src="scripts/main.js"></script>
<!-- Floating circles background -->
<ul class="floating-circles">
<li></li><li></li><li></li><li></li><li></li>

4
dashboard-page/scripts/main.js
View File

@@ -4,13 +4,13 @@ const dropdownMenu = document.querySelector('.dropdown-menu');
if (menuButton && dropdownMenu) {
menuButton.addEventListener('click', function() {
dropdownMenu.classList.toggle('visible');
dropdownMenu.classList.toggle('hidden');
});
}
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
if (!event.target.closest('.mobile-header-right') && dropdownMenu) {
dropdownMenu.classList.remove('visible');
dropdownMenu.classList.add('hidden');
}
});

73
dashboard-page/styles/main.css
View File

@@ -18,6 +18,14 @@ body {
padding: 0 20px; /* Tambahan padding horizontal */
}
/* Container for responsive design */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Universal Header (works for both desktop and mobile) */
header {
position: sticky;
@@ -27,18 +35,19 @@ header {
backdrop-filter: blur(35px);
border-radius: 0 0 20px 20px;
margin: 0;
padding: 20px 25px; /* Increased vertical padding */
padding: 20px 25px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
min-height: 110px; /* Significantly taller header */
min-height: 110px;
width: 100%;
max-width: 100%;
display: flex;
flex-wrap: wrap; /* Allow elements to wrap on smaller screens */
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 15px; /* Consistent spacing between elements */
gap: 15px;
}
/* Universal Header Elements */
.mobile-header-user-info {
display: flex;
@@ -253,12 +262,37 @@ th:nth-child(3), td:nth-child(3) { width: 30%; }
/* Responsivitas */
@media (max-width: 768px) {
/* Show mobile elements, hide desktop nav */
.mobile-header-user-info,
.mobile-header-right {
display: flex;
}
.desktop-nav {
display: none;
}
/* Stack cards vertically on mobile */
#stat-cards, #secondary-stats {
grid-template-columns: 1fr;
}
/* Adjust header layout for mobile */
header {
flex-direction: column;
align-items: flex-start;
padding: 15px;
}
.mobile-header-right {
align-self: flex-end;
margin-top: -50px;
}
body {
padding: 0 10px;
}
/* Removed mobile-specific scaling as we now have universal styles */
/* Stat Cards */
#stat-cards, #secondary-stats {
flex-direction: column;
@@ -285,24 +319,35 @@ th:nth-child(3), td:nth-child(3) { width: 30%; }
}
}
@media (min-width: 769px) {
/* Adjust header layout for desktop */
header {
padding: 15px 25px;
}
.mobile-header-user-info {
display: flex;
align-items: center;
}
.mobile-header-right {
display: flex;
}
}
/* Definitive Vertical Layout */
.controls-container,
.card-container {
display: block;
}
/* Definitive Horizontal Layout for Stat Cards */
/* Responsive Layout for Cards */
#stat-cards, #secondary-stats {
display: flex;
flex-direction: row;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
#stat-cards > div, #secondary-stats > div {
flex: 1; /* Ensure cards share space equally */
}
/* Ensure cards within the container stack vertically */
.card-container > div {
margin-bottom: 20px; /* Add space between vertical cards */

21
chat-page/index.html → form-page/chat-page/index.html
View File

@@ -27,31 +27,16 @@
<!-- Header dengan avatar dan nama pengguna -->
<header class="chat-header">
<div class="user-info">
<div class="avatar">J</div>
<div class="avatar">M</div>
<div class="user-details">
<h2>John Doe</h2>
<span class="user-role">Virtual Assistant - Bake Shop</span>
<h2>Maya</h2>
<span class="user-role">Virtual Assistant - Demo</span>
</div>
</div>
</header>
<!-- Area chat utama -->
<div class="chat-area">
<!-- Contoh pesan masuk -->
<div class="message received">
<div class="message-content">
Hai, ada kabar terbaru?
</div>
<div class="message-time">10:00</div>
</div>
<!-- Contoh pesan keluar -->
<div class="message sent">
<div class="message-content">
Iya, proyek baru sudah selesai!
</div>
<div class="message-time">10:01</div>
</div>
</div>
<!-- Input area with WhatsApp-like design -->

255
form-page/chat-page/script.js Normal file
View File

@@ -0,0 +1,255 @@
// Check if leadData exists in localStorage
if (!localStorage.getItem('leadData')) {
window.location.href = '../index.html'; // Redirect to form page
}
// Fungsi untuk menambahkan pesan baru ke area chat
function addMessage(content, isSent) {
const chatArea = document.querySelector('.chat-area');
// Buat elemen pesan
const message = document.createElement('div');
message.className = `message ${isSent ? 'sent' : 'received'}`;
// Ambil inisial dari nama di header
const userName = document.querySelector('.user-details h2').textContent;
const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1); // Ambil huruf pertama saja
// Tambahkan avatar kecil untuk pesan masuk
if (!isSent) {
const smallAvatar = document.createElement('div');
smallAvatar.className = 'small-avatar';
smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
message.appendChild(smallAvatar);
} else {
// Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
const personIcon = document.createElement('i');
personIcon.className = 'bi bi-person sent-user-icon';
message.appendChild(personIcon);
}
// Tambahkan konten pesan
const messageContent = document.createElement('div');
messageContent.className = 'message-content';
messageContent.textContent = content;
// Tambahkan waktu pesan
const now = new Date();
const time = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
const messageTime = document.createElement('div');
messageTime.className = 'message-time';
messageTime.textContent = time;
// Gabungkan semua elemen
message.appendChild(messageContent);
message.appendChild(messageTime);
// Tambahkan ke area chat dengan animasi
chatArea.appendChild(message);
// Scroll ke bawah untuk melihat pesan terbaru
chatArea.scrollTop = chatArea.scrollHeight;
}
// Fungsi untuk menampilkan indikator mengetik
function showTypingIndicator() {
const chatArea = document.querySelector('.chat-area');
const typingIndicator = document.createElement('div');
typingIndicator.className = 'typing-indicator';
typingIndicator.innerHTML = `
<div class="typing-dots">
<span></span>
<span></span>
<span></span>
</div>
`;
chatArea.appendChild(typingIndicator);
chatArea.scrollTop = chatArea.scrollHeight;
return typingIndicator;
}
// Fungsi untuk menyembunyikan indikator mengetik
function hideTypingIndicator(indicator) {
if (indicator) {
indicator.remove();
}
}
// Generate unique session ID
function generateSessionId() {
return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
}
// Fungsi untuk mengirim pesan
async function sendMessage() {
const input = document.querySelector('.message-input');
const message = input.value.trim();
if (message) {
addMessage(message, true);
input.value = '';
toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
const typingIndicator = showTypingIndicator();
try {
// Get or create session ID
let sessionId = localStorage.getItem('chatSessionId');
if (!sessionId) {
sessionId = generateSessionId();
localStorage.setItem('chatSessionId', sessionId);
}
// Retrieve bidangBisnis from localStorage
const leadData = localStorage.getItem('leadData');
let bidangBisnis = '';
if (leadData) {
const data = JSON.parse(leadData);
bidangBisnis = data.bidangBisnis;
}
const response = await fetch('https://bot.kediritechnopark.com/webhook/e4559efb-e624-478b-8d40-c287c7c203e7', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
text: message,
sessionId: sessionId,
bidangBisnis: bidangBisnis
})
});
hideTypingIndicator(typingIndicator);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
// Cek apakah ada balasan dari bot
if (data && data.output) {
addMessage(data.output, false);
} else {
addMessage('Maaf, terjadi kesalahan saat memproses balasan.', false);
}
} catch (error) {
hideTypingIndicator(typingIndicator);
console.error('Error sending message:', error);
addMessage('Maaf, tidak dapat terhubung ke server. Silakan coba lagi nanti.', false);
}
}
}
// Function to toggle attachment icons visibility
function toggleAttachmentIcons(show) {
const icons = document.querySelector('.attachment-icons');
if (show) {
icons.style.opacity = '1';
icons.style.transform = 'translateY(-50%)';
} else {
icons.style.opacity = '0';
icons.style.transform = 'translateY(-50%) translateX(20px)';
}
}
// Event listener untuk tombol kirim
document.querySelector('.send-btn').addEventListener('click', sendMessage);
// Event listener untuk tombol Enter
document.querySelector('.message-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
// Event listener untuk input text
const messageInput = document.querySelector('.message-input');
messageInput.addEventListener('input', function() {
if (this.value.trim() !== '') {
toggleAttachmentIcons(false);
} else {
toggleAttachmentIcons(true);
}
});
// Handle virtual keyboard on mobile
messageInput.addEventListener('focus', function() {
// Scroll input into view
setTimeout(() => {
this.scrollIntoView({behavior: 'smooth', block: 'end'});
}, 300);
});
// Initialize attachment icons
document.addEventListener('DOMContentLoaded', () => {
toggleAttachmentIcons(true);
// Handle initial scroll position
const chatArea = document.querySelector('.chat-area');
chatArea.scrollTop = chatArea.scrollHeight;
});
// Inisialisasi chat setelah DOM selesai dimuat
document.addEventListener('DOMContentLoaded', () => {
// Simulate explanatory demo conversation
const simulateConversation = async () => {
await new Promise(resolve => setTimeout(resolve, 1500));
addMessage('Halo, saya tertarik dengan layanan Mayagen. Bisa jelaskan apa saja fiturnya?', true);
let typingIndicator = showTypingIndicator();
await new Promise(resolve => setTimeout(resolve, 2500));
hideTypingIndicator(typingIndicator);
addMessage('Tentu! Senang Anda tertarik. Mayagen adalah asisten AI yang dirancang untuk mengotomatisasi interaksi pelanggan dan meningkatkan efisiensi bisnis Anda 24/7.', false);
await new Promise(resolve => setTimeout(resolve, 2500));
addMessage('Sangat menarik. Apakah Mayagen hanya berfungsi di webchat seperti yang saya gunakan sekarang?', true);
typingIndicator = showTypingIndicator();
await new Promise(resolve => setTimeout(resolve, 3500));
hideTypingIndicator(typingIndicator);
addMessage('Pertanyaan yang sangat bagus! Webchat ini hanyalah salah satu contoh platform yang bisa saya layani. Kekuatan utama Mayagen adalah kemampuan untuk menjawab pesan secara otomatis di berbagai channel populer secara terpisah.', false);
typingIndicator = showTypingIndicator();
await new Promise(resolve => setTimeout(resolve, 3500));
hideTypingIndicator(typingIndicator);
addMessage('Saya bisa membalas DM di Instagram, merespons chat di WhatsApp, dan berinteraksi dengan pelanggan Anda di Telegram. Semua fitur ini berjalan independen di masing-masing platform, memberikan pengalaman terbaik bagi pelanggan Anda.', false);
typingIndicator = showTypingIndicator();
await new Promise(resolve => setTimeout(resolve, 2500));
hideTypingIndicator(typingIndicator);
// Retrieve bidangBisnis from localStorage
const leadData = localStorage.getItem('leadData');
let bidangBisnis = '';
if (leadData) {
const data = JSON.parse(leadData);
bidangBisnis = data.bidangBisnis;
}
await new Promise(resolve => setTimeout(resolve, 1500));
addMessage(`Silakan gunakan demo ini untuk bertanya mengenai persoalan bisnis ${bidangBisnis} yang Anda pilih.`, false);
};
simulateConversation();
// Handle viewport height for mobile browsers
const setVh = () => {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
};
setVh();
window.addEventListener('resize', setVh);
window.addEventListener('load', setVh);
const userName = document.querySelector('.user-details h2').textContent;
const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1);
document.querySelector('.avatar').textContent = userInitial;
});
// Pastikan animasi mengetik muncul sebelum pesan sambutan
// (Sudah diimplementasikan di atas)

72
chat-page/style.css → form-page/chat-page/style.css
View File

@@ -11,12 +11,12 @@ body {
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #0077b6, #023e8a);
background: #D4EBF8;
padding: 20px;
}
.chat-container {
background: rgba(255, 255, 255, 0.2);
background: #219ebc;
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
@@ -30,9 +30,10 @@ body {
position: relative;
}
.chat-header {
padding: 15px 20px;
background: rgba(255, 255, 255, 0.25);
background: #023047;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
@@ -41,18 +42,27 @@ body {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
flex-shrink: 0; /* Prevent header from shrinking */
z-index: 1000;
flex-shrink: 0;
}
.chat-header, .input-area {
background: rgba(173, 232, 244, 0.5);
.input-area {
display: flex;
padding: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
align-items: center;
gap: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: sticky;
bottom: 0;
z-index: 1000;
background: #023047;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.4);
z-index: 10;
}
.user-info {
display: flex;
align-items: center;
@@ -65,6 +75,10 @@ body {
flex-direction: column;
}
.user-details > * {
color: #FFFFFF;
}
.user-role {
font-size: 0.8rem;
opacity: 0.7;
@@ -75,7 +89,7 @@ body {
width: 50px;
height: 50px;
border-radius: 50%;
background: #0096c7;
background: #fb8500;
color: white;
display: flex;
justify-content: center;
@@ -101,7 +115,7 @@ body {
list-style: none;
width: 20px;
height: 20px;
background: rgba(72, 202, 228, 0.5);
background: #8ECDDD;
animation: floating 25s linear infinite;
bottom: -150px;
border-radius: 50%;
@@ -235,15 +249,15 @@ body {
.message.received {
align-self: flex-start;
background: rgba(173, 232, 244, 0.8);
color: #03045e;
background: #caf0f8;
color: #333;
border-bottom-left-radius: 4px;
backdrop-filter: blur(5px);
}
.message.sent {
align-self: flex-end;
background: white;
background: #caf0f8;
color: #03045e;
border-bottom-right-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
@@ -252,7 +266,7 @@ body {
.message-content {
word-wrap: break-word;
line-height: 1.4;
color: #001f3f; /* Navy blue text */
color: #003366; /* Navy blue text */
}
.message-time {
@@ -320,7 +334,7 @@ body {
}
.send-btn {
background: #0096c7;
background: #fb8500;
border: none;
border-radius: 12px;
width: 50px;
@@ -330,7 +344,7 @@ body {
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 150, 199, 0.4);
box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
flex-shrink: 0;
}
@@ -397,14 +411,14 @@ body {
width: 30px;
height: 30px;
border-radius: 50%;
background: #0096c7;
background: #fb8500;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px; /* Increase font size for icon */
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5极客 rgba(0, 0, 0, 0.2);
z-index: 5;
}
@@ -439,7 +453,7 @@ body {
.typing-indicator {
display: flex;
align-self: flex-start;
background: #f0f0f0;
background: #caf0f8;
padding: 10px 15px;
border-radius: 18px;
margin-bottom: 15px;
@@ -456,7 +470,7 @@ body {
width: 6px;
height: 6px;
border-radius: 50%;
background: #48cae4;
background: #219ebc;
margin: 0 2px;
}
@@ -471,21 +485,3 @@ body {
.typing-dots span:nth-child(3) {
animation: wave 1.2s infinite 0.4s;
}
@media (max-width: 768px) {
body {
align-items: flex-start; /* Header menempel di atas */
padding: 0;
}
.chat-container {
height: 100vh; /* Kembali ke viewport height normal */
max-height: none;
border-radius: 0;
margin-top: 0;
}
.message {
max-width: 85%;
}
}

118
form-page/index.html Normal file
View File

@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Demo Mayagen</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
<!-- Floating circles background -->
<ul class="floating-circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="form-container" id="form-section">
<form id="demo-form">
<h2>Mayagen Demo Gratis</h2>
<p>Silakan isi formulir di bawah ini untuk melanjutkan ke halaman demo.</p>
<div class="input-group">
<i class="bi bi-person"></i>
<input type="text" id="nama" placeholder="Nama Lengkap / Perusahaan" required>
</div>
<div class="input-group">
<i class="bi bi-envelope"></i>
<input type="email" id="email" placeholder="Alamat Email" required>
</div>
<div class="input-group">
<i class="bi bi-phone"></i>
<input type="tel" id="nomor-hp" placeholder="Nomor HP" required>
</div>
<div class="input-group">
<i class="bi bi-briefcase"></i>
<select id="bidang-bisnis" required>
<option value="" disabled selected>Pilih Bidang Bisnis</option>
<option value="E-commerce / Toko Online">E-commerce / Toko Online</option>
<option value="Restoran / F&B">Restoran / F&B</option>
<option value="Properti / Real Estate">Properti / Real Estate</option>
<option value="Pendidikan / Kursus Online">Pendidikan / Kursus Online</option>
<option value="Kesehatan / Klinik">Kesehatan / Klinik</option>
<option value="Otomotif / Dealer">Otomotif / Dealer</option>
<option value="Jasa Profesional">Jasa Profesional</option>
<option value="Sewa Lapangan">Sewa Lapangan</option>
</select>
</div>
<div class="input-group" id="other-bisnis-wrapper" style="display: none;">
<i class="bi bi-pencil"></i>
<input type="text" id="other-bidang-bisnis" placeholder="Masukkan Bidang Bisnis Anda">
</div>
<button type="submit">Akses Demo</button>
</form>
</div>
<div class="chat-container" id="chat-section" style="display: none;">
<!-- Floating circles background -->
<ul class="floating-circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- Header dengan avatar dan nama pengguna -->
<header class="chat-header">
<div class="user-info">
<div class="avatar">M</div>
<div class="user-details">
<h2>Maya</h2>
<span class="user-role">Virtual Assistant - Demo</span>
</div>
</div>
</header>
<!-- Area chat utama -->
<div class="chat-area">
</div>
<!-- Input area with WhatsApp-like design -->
<div class="input-area">
<div class="input-wrapper">
<input type="text" class="message-input" placeholder="Ketik pesan...">
<div class="attachment-icons">
<!-- Hanya ikon kamera yang tersisa -->
<button class="icon-btn attachment-btn">
<i class="bi bi-camera"></i>
</button>
</div>
</div>
<button class="send-btn">
<i class="bi bi-arrow-right-circle"></i>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

319
form-page/script.js Normal file
View File

@@ -0,0 +1,319 @@
// Fungsi untuk menambahkan pesan baru ke area chat
function addMessage(content, isSent) {
const chatArea = document.querySelector('.chat-area');
// Buat elemen pesan
const message = document.createElement('div');
message.className = `message ${isSent ? 'sent' : 'received'}`;
// Ambil inisial dari nama pengguna yang mengisi form, atau default 'M'
let userInitial = 'M';
const leadData = localStorage.getItem('leadData');
if (leadData) {
const data = JSON.parse(leadData);
if (data.nama) {
userInitial = data.nama.split(' ').map(n => n[0]).join('').substring(0, 1);
}
}
// Tambahkan avatar kecil untuk pesan masuk
if (!isSent) {
const smallAvatar = document.createElement('div');
smallAvatar.className = 'small-avatar';
smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
message.appendChild(smallAvatar);
} else {
// Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
const personIcon = document.createElement('i');
personIcon.className = 'bi bi-person sent-user-icon';
message.appendChild(personIcon);
}
// Tambahkan konten pesan
const messageContent = document.createElement('div');
messageContent.className = 'message-content';
messageContent.textContent = content;
// Tambahkan waktu pesan
const now = new Date();
const time = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
const messageTime = document.createElement('div');
messageTime.className = 'message-time';
messageTime.textContent = time;
// Gabungkan semua elemen
message.appendChild(messageContent);
message.appendChild(messageTime);
// Tambahkan ke area chat dengan animasi
chatArea.appendChild(message);
// Scroll ke bawah untuk melihat pesan terbaru
chatArea.scrollTop = chatArea.scrollHeight;
}
// Fungsi untuk menampilkan indikator mengetik
function showTypingIndicator() {
const chatArea = document.querySelector('.chat-area');
const typingIndicator = document.createElement('div');
typingIndicator.className = 'typing-indicator';
typingIndicator.innerHTML = `
<div class="typing-dots">
<span></span>
<span></span>
<span></span>
</div>
`;
chatArea.appendChild(typingIndicator);
chatArea.scrollTop = chatArea.scrollHeight;
return typingIndicator;
}
// Fungsi untuk menyembunyikan indikator mengetik
function hideTypingIndicator(indicator) {
if (indicator) {
indicator.remove();
}
}
// Generate unique session ID
function generateSessionId() {
return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
}
// Fungsi untuk mengirim pesan
async function sendMessage() {
const input = document.querySelector('.message-input');
const message = input.value.trim();
if (message) {
addMessage(message, true);
input.value = '';
toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
const typingIndicator = showTypingIndicator();
try {
// Get or create session ID
let sessionId = localStorage.getItem('chatSessionId');
if (!sessionId) {
sessionId = generateSessionId();
localStorage.setItem('chatSessionId', sessionId);
}
const response = await fetch('https://bot.kediritechnopark.com/webhook/2afaf386-603b-484c-af51-6dd0f48fae20', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
text: message,
sessionId: sessionId
})
});
hideTypingIndicator(typingIndicator);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
// Cek apakah ada balasan dari bot
if (data && data.output) {
addMessage(data.output, false);
} else {
addMessage('Maaf, terjadi kesalahan saat memproses balasan.', false);
}
} catch (error) {
hideTypingIndicator(typingIndicator);
console.error('Error sending message:', error);
addMessage('Maaf, tidak dapat terhubung ke server. Silakan coba lagi nanti.', false);
}
}
}
// Function to toggle attachment icons visibility
function toggleAttachmentIcons(show) {
const icons = document.querySelector('.attachment-icons');
if (icons) { // Check if icons element exists
if (show) {
icons.style.opacity = '1';
icons.style.transform = 'translateY(-50%)';
} else {
icons.style.opacity = '0';
icons.style.transform = 'translateY(-50%) translateX(20px)';
}
}
}
// Handle viewport height for mobile browsers
const setVh = () => {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
};
// Simulate explanatory demo conversation
const simulateConversation = async () => {
await new Promise(resolve => setTimeout(resolve, 1500));
addMessage('Halo, saya tertarik dengan layanan Mayagen. Bisa jelaskan apa saja fiturnya?', true);
let typingIndicator = showTypingIndicator();
await new Promise(resolve => setTimeout(resolve, 2500));
hideTypingIndicator(typingIndicator);
addMessage('Tentu! Senang Anda tertarik. Mayagen adalah asisten AI yang dirancang untuk mengotomatisasi interaksi pelanggan dan meningkatkan efisiensi bisnis Anda 24/7.', false);
await new Promise(resolve => setTimeout(resolve, 2500));
addMessage('Sangat menarik. Apakah Mayagen hanya berfungsi di webchat seperti yang saya gunakan sekarang?', true);
typingIndicator = showTypingIndicator();
await new Promise(resolve => setTimeout(resolve, 3500));
hideTypingIndicator(typingIndicator);
addMessage('Pertanyaan yang sangat bagus! Webchat ini hanyalah salah satu contoh platform yang bisa saya layani. Kekuatan utama Mayagen adalah kemampuan untuk menjawab pesan secara otomatis di berbagai channel populer secara terpisah.', false);
typingIndicator = showTypingIndicator();
await new Promise(resolve => setTimeout(resolve, 3500));
hideTypingIndicator(typingIndicator);
addMessage('Saya bisa membalas DM di Instagram, merespons chat di WhatsApp, dan berinteraksi dengan pelanggan Anda di Telegram. Semua fitur ini berjalan independen di masing-masing platform, memberikan pengalaman terbaik bagi pelanggan Anda.', false);
typingIndicator = showTypingIndicator();
await new Promise(resolve => setTimeout(resolve, 2500));
hideTypingIndicator(typingIndicator);
addMessage('Apakah ada fitur atau channel spesifik yang ingin Anda ketahui lebih lanjut?', false);
await new Promise(resolve => setTimeout(resolve, 1500));
addMessage('Silakan bertanya mengenai fitur-fitur Mayagen yang relevan dengan bidang bisnis yang Anda pilih.', false);
};
document.addEventListener('DOMContentLoaded', function() {
const formSection = document.getElementById('form-section');
const chatSection = document.getElementById('chat-section');
const bidangBisnisSelect = document.getElementById('bidang-bisnis');
const otherBisnisWrapper = document.getElementById('other-bisnis-wrapper');
const otherBidangBisnisInput = document.getElementById('other-bidang-bisnis');
const messageInput = document.querySelector('.message-input');
const sendButton = document.querySelector('.send-btn');
bidangBisnisSelect.addEventListener('change', function() {
if (this.value === 'other') {
otherBisnisWrapper.style.display = 'block';
otherBidangBisnisInput.required = true;
} else {
otherBisnisWrapper.style.display = 'none';
otherBidangBisnisInput.required = false;
}
});
document.getElementById('demo-form').addEventListener('submit', async function(event) {
event.preventDefault(); // Mencegah form dari submit default
// Ambil data dari form
const nama = document.getElementById('nama').value;
const emailValue = document.getElementById('email').value;
let nomorHp = document.getElementById('nomor-hp').value;
let bidangBisnis = bidangBisnisSelect.value;
if (bidangBisnis === 'other') {
bidangBisnis = otherBidangBisnisInput.value;
}
// Format nomor HP
nomorHp = document.getElementById('nomor-hp').value;
if (nomorHp.startsWith('0')) {
nomorHp = '62' + nomorHp.slice(1);
}
// Validasi email
if (!isValidEmail(emailValue)) {
alert('Alamat email tidak valid.');
return;
}
// Simpan data ke localStorage (untuk tujuan demo)
const leadData = {
nama: nama,
email: emailValue,
nomorHp: nomorHp,
bidangBisnis: bidangBisnis,
timestamp: new Date().toISOString()
};
// Kirim data ke webhook sebelum melanjutkan
try {
const webhookResponse = await fetch('https://bot.kediritechnopark.com/webhook/2afaf386-603b-484c-af51-6dd0f48fae20', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(leadData)
});
if (!webhookResponse.ok) {
console.error('Webhook error:', webhookResponse.status, webhookResponse.statusText);
// Handle error appropriately, e.g., display a message to the user
alert('Terjadi kesalahan saat mengirim data ke server. Silakan coba lagi.');
return; // Prevent navigation to chat page
}
console.log('Webhook berhasil dikirim!');
} catch (error) {
console.error('Webhook error:', error);
// Handle error appropriately
alert('Tidak dapat terhubung ke server. Silakan coba lagi nanti.');
return; // Prevent navigation to chat page
}
// Sembunyikan form dan tampilkan chat
formSection.style.display = 'none';
chatSection.style.display = 'flex'; // Use flex to maintain column layout
// Initialize chat functionality
setVh();
window.addEventListener('resize', setVh);
window.addEventListener('load', setVh);
toggleAttachmentIcons(true);
const chatArea = document.querySelector('.chat-area');
if (chatArea) {
chatArea.scrollTop = chatArea.scrollHeight;
}
// Add event listeners for chat
if (sendButton) {
sendButton.addEventListener('click', sendMessage);
}
if (messageInput) {
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
messageInput.addEventListener('input', function() {
if (this.value.trim() !== '') {
toggleAttachmentIcons(false);
} else {
toggleAttachmentIcons(true);
}
});
messageInput.addEventListener('focus', function() {
setTimeout(() => {
this.scrollIntoView({behavior: 'smooth', block: 'end'});
}, 300);
});
}
simulateConversation();
});
});
// Function to validate email format
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}

870
form-page/style.css Normal file
View File

@@ -0,0 +1,870 @@
/* General Styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #219ebc;
padding: 20px;
}
.chat-container {
background: #B0E2FF; /* Calm pastel blue background */
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
height: calc(var(--vh, 1vh) * 90); /* Menggunakan variabel viewport height */
max-height: 800px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
/* Form Container */
.form-container {
background: rgba(255, 255, 255, 0.25); /* Frosted glass effect */
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 450px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 2;
}
h2 {
color: #003366; /* Dark blue for readability */
margin-bottom: 10px;
font-size: 28px;
}
p {
color: #004080; /* Dark blue for readability */
margin-bottom: 30px;
font-size: 16px;
}
/* Input Group */
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
font-size: 18px;
}
input {
width: 100%;
padding: 15px 15px 15px 50px;
border: 1px solid #ddd;
border-radius: 12px;
background: white; /* Reverted to original color */
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
}
input:focus, select:focus {
outline: none;
border-color: #6495ED;
box-shadow: 0 0 10px rgba(100, 149, 237, 0.3);
}
select {
width: 100%;
padding: 15px 15px 15px 50px;
border: 1px solid #ddd;
border-radius: 12px;
background: white;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23aaa' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
}
/* Submit Button */
button {
width: 100%;
padding: 15px;
background: #023047; /* Cornflower Blue */
border: none;
border-radius: 12px;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(100, 149, 237, 0.4);
}
button:hover {
background: #537ecf; /* Darker Cornflower Blue */
box-shadow: 0 8px 20px rgba(100, 149, 237, 0.5);
transform: translateY(-2px);
}
.floating-circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(0, 31, 63, 0.6); /* Increased darkness for more contrast */
animation: floating 25s linear infinite;
bottom: -150px;
border-radius: 50%;
}
.floating-circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
animation-duration: 20s;
}
.floating-circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 22s;
}
.floating-circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
animation-duration: 18s;
}
.floating-circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 24s;
}
.floating-circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
animation-duration: 16s;
}
.floating-circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
animation-duration: 26s;
}
.floating-circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
animation-duration: 30s;
}
.floating-circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.floating-circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.floating-circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 28s;
}
@keyframes floating {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.7;
}
25% {
transform: translate(-50px, -250px) rotate(90deg);
opacity: 0.5;
}
50% {
transform: translate(50px, -500px) rotate(180deg);
opacity: 0.3;
}
75% {
transform: translate(-30px, -750px) rotate(270deg);
opacity: 0.5;
}
100% {
transform: translate(0, -1000px) rotate(360deg);
opacity: 0;
}
}
/* Chat-specific styles from chat-page/style.css */
.chat-container {
background: rgba(255, 255, 255, 0.3); /* Slightly more transparent */
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
height: calc(var(--vh, 1vh) * 90); /* Menggunakan variabel viewport height */
max-height: 800px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.chat-header {
padding: 15px 20px;
background: rgba(173, 216, 230, 0.7); /* Pastel blue transparent */
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
border-radius: 20px 20px 0 0;
backdrop-filter: blur(12px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000; /* Increased z-index to ensure visibility */
flex-shrink: 0; /* Prevent header from shrinking */
}
.input-area {
display: flex;
padding: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
align-items: center;
gap: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: sticky;
bottom: 0;
z-index: 1000; /* Increased z-index to ensure visibility */
background: rgba(173, 216, 230, 0.7); /* Pastel blue transparent */
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.6);
}
.chat-header, .input-area {
background: rgba(173, 216, 230, 0.7); /* Pastel blue transparent */
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.6);
z-index: 10;
}
.user-info {
display: flex;
align-items: center;
gap: 15px;
width: 100%;
}
.user-details {
display: flex;
flex-direction: column;
}
.user-role {
font-size: 0.8rem;
opacity: 0.7;
margin-top: 3px;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: #6495ED; /* Cornflower Blue */
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
}
/* Enhanced floating circles background */
.floating-circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.floating-circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(72, 202, 228, 0.5);
animation: floating 25s linear infinite;
bottom: -150px;
border-radius: 50%;
z-index: 1;
animation-fill-mode: both;
}
.floating-circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
animation-duration: 20s;
}
.floating-circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 22s;
}
.floating-circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
animation-duration: 18s;
}
.floating-circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 24s;
}
.floating-circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
animation-duration: 16s;
}
.floating-circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
animation-duration: 26s;
}
.floating-circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
animation-duration: 30s;
}
.floating-circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.floating-circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.floating-circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 28s;
}
/* Enhanced floating animation with horizontal movement */
@keyframes floating {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.7;
}
25% {
transform: translate(-50px, -250px) rotate(90deg);
opacity: 0.5;
}
50% {
transform: translate(50px, -500px) rotate(180deg);
opacity: 0.3;
}
75% {
transform: translate(-30px, -750px) rotate(270deg);
opacity: 0.5;
}
100% {
transform: translate(0, -1000px) rotate(360deg);
opacity: 0;
}
}
.chat-area {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
position: relative;
background: transparent;
}
.message {
max-width: 70%;
padding: 12px 16px;
border-radius: 18px;
position: relative;
animation: fadeIn 0.3s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.message.received {
align-self: flex-start;
background: rgba(200, 230, 255, 0.9); /* Light pastel blue */
color: #003366; /* Dark blue */
border-bottom-left-radius: 4px;
backdrop-filter: blur(5px);
}
.message.sent {
align-self: flex-end;
background: white;
color: #003366; /* Dark blue */
border-bottom-right-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.message-content {
word-wrap: break-word;
line-height: 1.4;
color: #003366; /* Dark blue text */
}
.message-time {
font-size: 0.7rem;
margin-top: 5px;
opacity: 0.7;
color: #004080; /* Dark blue text */
}
.message.sent .message-time {
text-align: left; /* Move to left for user bubble */
}
.message.received .message-time {
text-align: right;
}
.input-area {
display: flex;
padding: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
align-items: center;
gap: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: sticky;
bottom: 0;
z-index: 100;
}
.input-wrapper {
flex-grow: 1;
position: relative;
}
.attachment-icons {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 5px;
transition: all 0.3s ease;
}
.message-input:not(:placeholder-shown) + .attachment-icons {
opacity: 0;
transform: translateY(-50%) translateX(20px);
pointer-events: none;
}
.message-input {
flex-grow: 1;
padding: 12px 45px 12px 15px;
border: 1px solid #ddd;
border-radius: 12px;
background: white;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
width: 100%;
}
.message-input:focus {
outline: none; /* Remove focus outline */
}
.send-btn {
background: #FF9800; /* Orange color */
border: none;
border-radius: 12px;
width: 50px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
flex-shrink: 0;
}
.input-area:focus-within {
box-shadow: 0 0 15px rgba(72, 202, 228, 0.6);
}
.icon-btn {
background: none;
border: none;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s ease;
}
.icon-btn:hover {
background: rgba(0, 150, 199, 0.1);
}
.icon-btn .bi {
font-size: 24px;
color: #6a737d; /* Darker gray for better contrast */
}
.send-btn .bi {
font-size: 24px; /* Same as camera icon */
color: white;
}
.attachment-icons .icon-btn {
width: 40px;
height: 40px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes wave {
0%, 60%, 100% {
transform: scaleY(0.4);
}
30% {
transform: scaleY(1);
}
}
.small-avatar {
position: absolute;
bottom: -15px; /* Move to bottom */
left: 10px; /* Center horizontally */
width: 30px;
height: 30px;
border-radius: 50%;
background: #6495ED; /* Cornflower Blue */
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px; /* Increase font size for icon */
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 5;
}
.message.received {
position: relative;
margin-top: 20px;
padding-top: 10px;
}
.message.sent {
position: relative;
}
.sent-user-icon {
position: absolute;
bottom: -15px; /* Move to bottom */
right: 10px; /* Align to right with some margin */
font-size: 24px;
color: #0096c7;
background: white;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 5;
}
.typing-indicator {
display: flex;
align-self: flex-start;
background: #f0f0f0;
padding: 10px 15px;
border-radius: 18px;
margin-bottom: 15px;
}
.typing-dots {
display: flex;
align-items: center;
height: 17px;
}
.typing-dots span {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #6495ED; /* Cornflower Blue */
margin: 0 2px;
}
.typing-dots span:nth-child(1) {
animation: wave 1.2s infinite;
}
.typing-dots span:nth-child(2) {
animation: wave 1.2s infinite 0.2s;
}
.typing-dots span:nth-child(3) {
animation: wave 1.2s infinite 0.4s;
}
@media (max-width: 768px) {
body {
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
padding: 0;
}
.form-container {
padding: 20px;
max-width: 90%; /* Adjust as needed */
border-radius: 12px;
height: auto;
margin: 0 auto; /* Center horizontally */
}
.chat-container {
height: calc(var(--vh, 1vh) * 90); /* Revert to original height */
max-height: 800px;
border-radius: 12px;
margin: 20px auto; /* Center horizontally and add some top margin */
max-width: 90%; /* Adjust as needed */
}
.message {
max-width: 85%;
}
}
/* Enhanced floating circles background */
.floating-circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.floating-circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: floating 25s linear infinite;
bottom: -150px;
border-radius: 50%;
}
.floating-circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
animation-duration: 20s;
}
.floating-circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 22s;
}
.floating-circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
animation-duration: 18s;
}
.floating-circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 24s;
}
.floating-circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
animation-duration: 16s;
}
.floating-circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
animation-duration: 26s;
}
.floating-circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
animation-duration: 30s;
}
.floating-circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.floating-circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.floating-circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 28s;
}
@keyframes floating {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.7;
}
25% {
transform: translate(-50px, -250px) rotate(90deg);
opacity: 0.5;
}
50% {
transform: translate(50px, -500px) rotate(180deg);
opacity: 0.3;
}
75% {
transform: translate(-30px, -750px) rotate(270deg);
opacity: 0.5;
}
100% {
transform: translate(0, -1000px) rotate(360deg);
opacity: 0;
}
}