diff --git a/chat-page/index.html b/chat-page/index.html index 50d7e5d..e630bb9 100644 --- a/chat-page/index.html +++ b/chat-page/index.html @@ -5,6 +5,8 @@ Halaman Chat + +
@@ -24,10 +26,13 @@
- +
@@ -49,27 +54,20 @@
- +
- - - - +
+ +
+ + +
+
diff --git a/chat-page/script.js b/chat-page/script.js index 26a17fa..794c836 100644 --- a/chat-page/script.js +++ b/chat-page/script.js @@ -6,6 +6,23 @@ function addMessage(content, isSent) { 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'; @@ -55,30 +72,6 @@ function hideTypingIndicator(indicator) { } } -// Setup Intersection Observer untuk efek fade-out -function setupMessageObserver() { - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (!entry.isIntersecting) { - // Ketika elemen keluar dari viewport - entry.target.style.opacity = '0.3'; - entry.target.style.transform = 'translateY(10px)'; - } else { - // Ketika elemen masuk ke viewport - entry.target.style.opacity = '1'; - entry.target.style.transform = 'translateY(0)'; - } - }); - }, { - threshold: 0.1 // Trigger ketika 10% elemen masih terlihat - }); - - // Terapkan observer ke semua pesan - document.querySelectorAll('.message').forEach(message => { - observer.observe(message); - }); -} - // Fungsi untuk mengirim pesan function sendMessage() { const input = document.querySelector('.message-input'); @@ -87,6 +80,7 @@ function sendMessage() { if (message) { addMessage(message, true); input.value = ''; + toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim // Simulasikan balasan otomatis setelah 2 detik setTimeout(() => { @@ -101,6 +95,18 @@ function sendMessage() { } } +// 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); @@ -111,6 +117,21 @@ document.querySelector('.message-input').addEventListener('keypress', (e) => { } }); +// Event listener untuk input text +const messageInput = document.querySelector('.message-input'); +messageInput.addEventListener('input', function() { + if (this.value.trim() !== '') { + toggleAttachmentIcons(false); + } else { + toggleAttachmentIcons(true); + } +}); + +// Initialize attachment icons +document.addEventListener('DOMContentLoaded', () => { + toggleAttachmentIcons(true); +}); + // Inisialisasi chat setelah DOM selesai dimuat document.addEventListener('DOMContentLoaded', () => { // Tampilkan indikator mengetik saat halaman pertama dimuat @@ -122,5 +143,13 @@ document.addEventListener('DOMContentLoaded', () => { addMessage('Hai, ada yang bisa saya bantu?', false); }, 3000); - setupMessageObserver(); +// Update avatar utama dengan inisial dari nama saat halaman dimuat +document.addEventListener('DOMContentLoaded', () => { + 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) diff --git a/chat-page/style.css b/chat-page/style.css index 8b31a1d..fedd3d5 100644 --- a/chat-page/style.css +++ b/chat-page/style.css @@ -11,21 +11,15 @@ body { justify-content: center; align-items: center; min-height: 100vh; - background: - linear-gradient(135deg, #6a11cb 0%, #2575fc 100%), - repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px); + background: linear-gradient(135deg, #0077b6, #023e8a); padding: 20px; } -/* Chat container styling */ .chat-container { - background: rgba(255, 255, 255, 0.92); - backdrop-filter: blur(12px); + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(20px); border-radius: 20px; - box-shadow: - 0 20px 50px rgba(0, 0, 0, 0.3), - 0 0 0 2px rgba(255, 255, 255, 0.1) inset, - 0 10px 30px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); width: 100%; max-width: 800px; height: 90vh; @@ -36,7 +30,6 @@ body { position: relative; } -/* Glass effect header styling */ .chat-header { padding: 15px 20px; background: rgba(255, 255, 255, 0.25); @@ -48,28 +41,40 @@ body { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); position: sticky; top: 0; - z-index: 10; + z-index: 100; } -/* Enhanced glass effect for both header and input area */ .chat-header, .input-area { - background: rgba(255, 255, 255, 0.18); - backdrop-filter: blur(15px); - -webkit-backdrop-filter: blur(15px); - border: 1px solid rgba(255, 255, 255, 0.25); + background: rgba(173, 232, 244, 0.5); + 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; 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: linear-gradient(to right, #6a11cb, #2575fc); + background: #0096c7; color: white; display: flex; justify-content: center; @@ -78,7 +83,6 @@ body { font-weight: bold; } -/* Floating circles background */ .floating-circles { position: absolute; top: 0; @@ -95,88 +99,16 @@ body { list-style: none; width: 20px; height: 20px; - background: rgba(106, 17, 203, 0.15); + background: rgba(72, 202, 228, 0.5); animation: floating 25s linear infinite; bottom: -150px; border-radius: 50%; + z-index: 1; + animation-fill-mode: both; /* Smoother animation */ } -.floating-circles li:nth-child(1) { - left: 25%; - width: 80px; - height: 80px; - animation-delay: 0s; -} +/* Konfigurasi floating circles... */ -.floating-circles li:nth-child(2) { - left: 10%; - width: 20px; - height: 20px; - animation-delay: 2s; - animation-duration: 12s; -} - -.floating-circles li:nth-child(3) { - left: 70%; - width: 20px; - height: 20px; - animation-delay: 4s; -} - -.floating-circles li:nth-child(4) { - left: 40%; - width: 60px; - height: 60px; - animation-delay: 0s; - animation-duration: 18s; -} - -.floating-circles li:nth-child(5) { - left: 65%; - width: 20px; - height: 20px; - animation-delay: 0s; -} - -.floating-circles li:nth-child(6) { - left: 75%; - width: 110px; - height: 110px; - animation-delay: 3s; -} - -.floating-circles li:nth-child(7) { - left: 35%; - width: 150px; - height: 150px; - animation-delay: 7s; -} - -.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: 11s; -} - -/* Floating animation */ @keyframes floating { 0% { transform: translateY(0) rotate(0deg); @@ -190,7 +122,6 @@ body { } } -/* Chat area styling */ .chat-area { flex-grow: 1; padding: 20px; @@ -199,6 +130,7 @@ body { flex-direction: column; gap: 15px; position: relative; + background: transparent; } .message { @@ -212,38 +144,41 @@ body { .message.received { align-self: flex-start; - background: #f0f0f0; + background: rgba(173, 232, 244, 0.8); + color: #03045e; border-bottom-left-radius: 4px; + backdrop-filter: blur(5px); } .message.sent { align-self: flex-end; - background: linear-gradient(to right, #6a11cb, #2575fc); - color: white; + background: white; + 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: #001f3f; /* Navy blue text */ } .message-time { font-size: 0.7rem; - text-align: right; margin-top: 5px; opacity: 0.7; + color: #001f3f; /* Navy blue text */ } .message.sent .message-time { - color: rgba(255, 255, 255, 0.7); + text-align: left; /* Move to left for user bubble */ } .message.received .message-time { - color: rgba(0, 0, 0, 0.5); + text-align: right; } -/* Input area styling with animation and glass effect */ .input-area { display: flex; padding: 15px; @@ -253,12 +188,59 @@ body { transition: transform 0.3s ease, box-shadow 0.3s ease; position: sticky; bottom: 0; - z-index: 10; + 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%; +} + +.send-btn { + background: #0096c7; + 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(0, 150, 199, 0.4); + flex-shrink: 0; } .input-area:focus-within { - transform: translateY(-5px); - box-shadow: 0 -5px 20px rgba(106, 17, 203, 0.2); + box-shadow: 0 0 15px rgba(72, 202, 228, 0.6); } .icon-btn { @@ -275,67 +257,24 @@ body { } .icon-btn:hover { - background: rgba(106, 17, 203, 0.1); + background: rgba(0, 150, 199, 0.1); } -.icon-btn svg { - width: 24px; - height: 24px; - fill: #6a11cb; +.icon-btn .bi { + font-size: 24px; + color: #5f6368; } -/* Efek untuk pesan saat keluar dari viewport */ -.message:not(:hover) { - transition: opacity 0.5s ease, transform 0.5s ease; +.send-btn .bi { + font-size: 24px; /* Same as camera icon */ + color: white; } -.message-input { - flex-grow: 1; - padding: 12px 15px; - border: 1px solid #ddd; - border-radius: 25px; - background: white; - font-size: 16px; - transition: all 0.3s ease; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset; +.attachment-icons .icon-btn { + width: 40px; + height: 40px; } -.message-input:focus { - border-color: #6a11cb; - box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2); - outline: none; -} - -.send-btn { - background: linear-gradient(to right, #6a11cb, #2575fc); - border: none; - border-radius: 50%; - width: 45px; - height: 45px; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4); -} - -.send-btn:active { - transform: scale(0.95); -} - -.send-btn:hover { - transform: scale(1.05); - box-shadow: 0 8px 20px rgba(37, 117, 252, 0.6); -} - -.send-btn svg { - width: 24px; - height: 24px; - fill: white; -} - -/* Animations */ @keyframes fadeIn { from { opacity: 0; @@ -347,7 +286,6 @@ body { } } -/* Typing animation */ @keyframes wave { 0%, 60%, 100% { transform: scaleY(0.4); @@ -357,7 +295,52 @@ body { } } -/* Typing indicator */ +.small-avatar { + position: absolute; + bottom: -15px; /* Move to bottom */ + left: 10px; /* Center horizontally */ + width: 30px; + height: 30px; + border-radius: 50%; + background: #0096c7; + 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; @@ -378,7 +361,7 @@ body { width: 6px; height: 6px; border-radius: 50%; - background: #6a11cb; + background: #48cae4; margin: 0 2px; } @@ -394,7 +377,6 @@ body { animation: wave 1.2s infinite 0.4s; } -/* Responsive design */ @media (max-width: 768px) { .chat-container { height: 100vh; diff --git a/color-pallete.md b/color-pallete.md new file mode 100644 index 0000000..08dec53 --- /dev/null +++ b/color-pallete.md @@ -0,0 +1,6 @@ +03045e +023e8a +0077b6 +0096c7 +48cae4 +ade8f4 \ No newline at end of file diff --git a/login-page/style.css b/login-page/style.css index d6324ef..492b6d5 100644 --- a/login-page/style.css +++ b/login-page/style.css @@ -11,7 +11,7 @@ body { justify-content: center; align-items: center; min-height: 100vh; - background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); + background: linear-gradient(135deg, #0077b6, #023e8a); /* Same as chat page */ overflow: hidden; } @@ -29,7 +29,7 @@ body { .background-animation i { position: absolute; - background: rgba(255, 255, 255, 0.6); + background: rgba(72, 202, 228, 0.4); /* #48cae4 with transparency */ border-radius: 50%; animation: float linear infinite; opacity: 0; @@ -89,12 +89,11 @@ body { /* Login container styling */ .login-container { - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.9); /* Slightly transparent white */ + backdrop-filter: blur(20px); /* Frosted glass effect */ + -webkit-backdrop-filter: blur(20px); border-radius: 20px; - box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), - 0 0 0 2px rgba(255, 255, 255, 0.1) inset, - 0 10px 20px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); padding: 40px; width: 90%; max-width: 450px; @@ -144,7 +143,7 @@ body { } .toggle-btn.active { - background: #6a11cb; + background: #0096c7; /* New blue from palette */ color: white; } @@ -171,9 +170,9 @@ body { } .input-group input:focus, -.phone-input-wrapper:focus-within { - border-color: #6a11cb; - box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2); +.phone-input-wrapper:极focus-within { + border-color: #48cae4; + box-shadow: 0 0 0 3px rgba(72, 202, 228, 0.2); transform: translateY(-2px); outline: none; } @@ -225,7 +224,7 @@ body { .login-btn { width: 100%; padding: 15px; - background: linear-gradient(to right, #6a11cb, #2575fc); + background: #0096c7; /* New blue from palette */ color: white; border: none; border-radius: 10px; @@ -233,7 +232,7 @@ body { font-weight: 600; cursor: pointer; transition: all 0.3s ease; - box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4); + box-shadow: 0 5px 15px rgba(0, 150, 199, 0.4); position: relative; overflow: hidden; } @@ -255,14 +254,14 @@ body { } .links a { - color: #6a11cb; + color: #48cae4; /* New light blue from palette */ text-decoration: none; font-size: 14px; transition: color 0.3s ease; } .links a:hover { - color: #2575fc; + color: #03045e; /* Darkest blue from palette */ text-decoration: underline; }