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.
This commit is contained in:
@@ -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
|
||||
@@ -30,7 +30,7 @@
|
||||
<div class="avatar">M</div>
|
||||
<div class="user-details">
|
||||
<h2>Maya</h2>
|
||||
<span class="user-role">Virtual Assistant - Bake Shop</span>
|
||||
<span class="user-role">Virtual Assistant - Demo</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1,3 +1,8 @@
|
||||
// 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');
|
||||
@@ -96,6 +101,14 @@ async function sendMessage() {
|
||||
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',
|
||||
@@ -104,7 +117,8 @@ async function sendMessage() {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
text: message,
|
||||
sessionId: sessionId
|
||||
sessionId: sessionId,
|
||||
bidangBisnis: bidangBisnis
|
||||
})
|
||||
});
|
||||
|
||||
@@ -163,9 +177,21 @@ messageInput.addEventListener('input', function() {
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
@@ -175,20 +201,38 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
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));
|
||||
addMessage('Apakah ada fitur atau channel spesifik yang ingin Anda ketahui lebih lanjut?', false);
|
||||
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();
|
||||
@@ -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
118
form-page/index.html
Normal 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>Dapatkan 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>
|
||||
328
form-page/script.js
Normal file
328
form-page/script.js
Normal file
@@ -0,0 +1,328 @@
|
||||
// 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);
|
||||
|
||||
const userNameElement = document.querySelector('.user-details h2');
|
||||
if (userNameElement) {
|
||||
userNameElement.textContent = nama; // Set user name in chat header
|
||||
}
|
||||
const userInitialElement = document.querySelector('.avatar');
|
||||
if (userInitialElement) {
|
||||
userInitialElement.textContent = nama.split(' ').map(n => n[0]).join('').substring(0, 1);
|
||||
}
|
||||
|
||||
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
870
form-page/style.css
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user