diff --git a/color-pallete.md b/color-pallete.md
index 08dec53..3cecd23 100644
--- a/color-pallete.md
+++ b/color-pallete.md
@@ -1,6 +1,4 @@
-03045e
-023e8a
-0077b6
-0096c7
-48cae4
-ade8f4
\ No newline at end of file
+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
\ No newline at end of file
diff --git a/chat-page/index.html b/form-page/chat-page/index.html
similarity index 96%
rename from chat-page/index.html
rename to form-page/chat-page/index.html
index 857fb1c..67a8922 100644
--- a/chat-page/index.html
+++ b/form-page/chat-page/index.html
@@ -30,7 +30,7 @@
M
Maya
- Virtual Assistant - Bake Shop
+ Virtual Assistant - Demo
diff --git a/chat-page/script.js b/form-page/chat-page/script.js
similarity index 81%
rename from chat-page/script.js
rename to form-page/chat-page/script.js
index d6dbdfb..2fc010a 100644
--- a/chat-page/script.js
+++ b/form-page/chat-page/script.js
@@ -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();
diff --git a/chat-page/style.css b/form-page/chat-page/style.css
similarity index 89%
rename from chat-page/style.css
rename to form-page/chat-page/style.css
index 2c627ff..133b5e7 100644
--- a/chat-page/style.css
+++ b/form-page/chat-page/style.css
@@ -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%;
- }
-}
diff --git a/form-page/index.html b/form-page/index.html
new file mode 100644
index 0000000..e5e61be
--- /dev/null
+++ b/form-page/index.html
@@ -0,0 +1,118 @@
+
+
+
+ Formulir Demo Mayagen
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ 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);
+}
diff --git a/form-page/style.css b/form-page/style.css
new file mode 100644
index 0000000..ea169a9
--- /dev/null
+++ b/form-page/style.css
@@ -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;
+ }
+}