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:
62
form-page/chat-page/index.html
Normal file
62
form-page/chat-page/index.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Halaman Chat</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- Tambahkan link Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="chat-container">
|
||||
<!-- 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>
|
||||
255
form-page/chat-page/script.js
Normal file
255
form-page/chat-page/script.js
Normal 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)
|
||||
487
form-page/chat-page/style.css
Normal file
487
form-page/chat-page/style.css
Normal file
@@ -0,0 +1,487 @@
|
||||
/* Reset CSS */
|
||||
* {
|
||||
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: #D4EBF8;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
background: #219ebc;
|
||||
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: #023047;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
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;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-details > * {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: #fb8500;
|
||||
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: #8ECDDD;
|
||||
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: #caf0f8;
|
||||
color: #333;
|
||||
border-bottom-left-radius: 4px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.message.sent {
|
||||
align-self: flex-end;
|
||||
background: #caf0f8;
|
||||
color: #03045e;
|
||||
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; /* Navy blue text */
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.7rem;
|
||||
margin-top: 5px;
|
||||
opacity: 0.7;
|
||||
color: #001f3f; /* Navy 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: #fb8500;
|
||||
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: #5f6368;
|
||||
}
|
||||
|
||||
.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: #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 5极客 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: #caf0f8;
|
||||
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: #219ebc;
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user