From e2ce1c0a0d0edd660bb022505cbd5c0893a973e8 Mon Sep 17 00:00:00 2001 From: Emmanuel Rizky Date: Sat, 12 Jul 2025 17:14:12 +0700 Subject: [PATCH] Here's a concise and descriptive commit message: ``` Enhance UI animations and mobile layout; update chat send icon - Update chat send button icon to bi-arrow-right-circle - Revamp floating circles animation with 10 configurable elements and complex movement - Improve mobile layout (header alignment and full-height chat container) - Increase login page animation visibility and continuity - Remove message input focus outline for cleaner UI ``` The message summarizes key changes: 1. Icon update in chat interface 2. Major animation enhancements (both chat background and login page) 3. Mobile layout improvements 4. UX polish (focus state removal) It maintains imperative mood, stays within line limits, and clearly connects changes to their purpose (improved visuals and responsiveness). --- chat-page/index.html | 2 +- chat-page/style.css | 118 +++++++++++++++++++++++++++++++++++++++---- login-page/style.css | 42 ++++++--------- 3 files changed, 124 insertions(+), 38 deletions(-) diff --git a/chat-page/index.html b/chat-page/index.html index e630bb9..7dd77e1 100644 --- a/chat-page/index.html +++ b/chat-page/index.html @@ -67,7 +67,7 @@ diff --git a/chat-page/style.css b/chat-page/style.css index fedd3d5..d45d9e3 100644 --- a/chat-page/style.css +++ b/chat-page/style.css @@ -83,6 +83,7 @@ body { font-weight: bold; } +/* Enhanced floating circles background */ .floating-circles { position: absolute; top: 0; @@ -104,21 +105,110 @@ body { bottom: -150px; border-radius: 50%; z-index: 1; - animation-fill-mode: both; /* Smoother animation */ + animation-fill-mode: both; } -/* Konfigurasi floating circles... */ +.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: translateY(0) rotate(0deg); + transform: translate(0, 0) rotate(0deg); opacity: 0.7; - border-radius: 50%; + } + 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: translateY(-1000px) rotate(720deg); + transform: translate(0, -1000px) rotate(360deg); opacity: 0; - border-radius: 50%; } } @@ -224,6 +314,10 @@ body { width: 100%; } +.message-input:focus { + outline: none; /* Remove focus outline */ +} + .send-btn { background: #0096c7; border: none; @@ -378,17 +472,19 @@ body { } @media (max-width: 768px) { + body { + align-items: flex-start; /* Header menempel di atas */ + padding: 0; + } + .chat-container { - height: 100vh; + height: 100vh; /* Kembali ke viewport height normal */ max-height: none; border-radius: 0; + margin-top: 0; } .message { max-width: 85%; } - - body { - padding: 0; - } } diff --git a/login-page/style.css b/login-page/style.css index 492b6d5..d7d9673 100644 --- a/login-page/style.css +++ b/login-page/style.css @@ -29,22 +29,19 @@ body { .background-animation i { position: absolute; - background: rgba(72, 202, 228, 0.4); /* #48cae4 with transparency */ + background: rgba(72, 202, 228, 0.6); /* More visible */ border-radius: 50%; animation: float linear infinite; - opacity: 0; + opacity: 0.8; /* Always visible */ right: -100px; top: var(--y-offset); --wave-amplitude: 50px; } -/* Waveform animation keyframes */ +/* Continuous floating animation */ @keyframes float { 0% { transform: translate(0, 0); - opacity: 0; - } - 10% { opacity: 0.8; } 25% { @@ -56,12 +53,9 @@ body { 75% { transform: translate(-75vw, calc(var(--wave-amplitude) * -1)); } - 90% { - opacity: 0.8; - } 100% { transform: translate(calc(-100vw - 100px), var(--wave-amplitude)); - opacity: 0; + opacity: 0.8; } } @@ -87,37 +81,33 @@ body { .background-animation i:nth-child(19) { width: 14px; height: 14px; --y-offset: 75px; --wave-amplitude: 35px; animation-duration: 16s; animation-delay: 9s; } .background-animation i:nth-child(20) { width: 16px; height: 16px; --y-offset: 125px; --wave-amplitude: 55px; animation-duration: 23s; animation-delay: 3s; } -/* Login container styling */ +/* Login container styling with enhanced frosted glass effect */ .login-container { - background: rgba(255, 255, 255, 0.9); /* Slightly transparent white */ + background: rgba(255, 255, 255, 0.2); /* More transparency */ 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.1); + box-shadow: + 0 15px 35px rgba(0, 0, 0, 0.1), + inset 0 0 0 1px rgba(255, 255, 255, 0.3); /* Inner glow */ padding: 40px; width: 90%; max-width: 450px; - transform: perspective(1000px) rotateY(5deg); - transition: transform 0.5s ease; position: relative; z-index: 1; overflow: hidden; } -.login-container:hover { - transform: perspective(1000px) rotateY(0deg); -} - .logo-placeholder { height: 80px; margin-bottom: 30px; display: flex; justify-content: center; align-items: center; - color: #6a11cb; + color: #0096c7; /* New blue from palette */ font-size: 24px; font-weight: bold; - border: 2px dashed #6a11cb; + border: 2px dashed #0096c7; /* New blue from palette */ border-radius: 10px; } @@ -170,11 +160,11 @@ body { } .input-group input:focus, -.phone-input-wrapper:极focus-within { - border-color: #48cae4; - box-shadow: 0 0 0 3px rgba(72, 202, 228, 0.2); +.phone-input-wrapper:focus-within { transform: translateY(-2px); outline: none; + border-color: transparent; /* Remove border */ + box-shadow: none; /* Remove shadow */ } /* Phone input styling */ @@ -239,7 +229,7 @@ body { .login-btn:hover { transform: translateY(-3px); - box-shadow: 0 8px 20px rgba(37, 117, 252, 0.6); + box-shadow: 0 8px 20px rgba(0, 150, 199, 0.6); /* New blue from palette */ } .login-btn:active { @@ -261,7 +251,7 @@ body { } .links a:hover { - color: #03045e; /* Darkest blue from palette */ + color: #023e8a; /* Dark blue from palette */ text-decoration: underline; }