Emmanuel Rizky
e2ce1c0a0d
``` 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).
269 lines
8.4 KiB
CSS
269 lines
8.4 KiB
CSS
/* 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: linear-gradient(135deg, #0077b6, #023e8a); /* Same as chat page */
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Floating Dots Background Animation with Waveform - Final Version */
|
|
.background-animation {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 300px;
|
|
transform: translateY(-50%);
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.background-animation i {
|
|
position: absolute;
|
|
background: rgba(72, 202, 228, 0.6); /* More visible */
|
|
border-radius: 50%;
|
|
animation: float linear infinite;
|
|
opacity: 0.8; /* Always visible */
|
|
right: -100px;
|
|
top: var(--y-offset);
|
|
--wave-amplitude: 50px;
|
|
}
|
|
|
|
/* Continuous floating animation */
|
|
@keyframes float {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
opacity: 0.8;
|
|
}
|
|
25% {
|
|
transform: translate(-25vw, calc(var(--wave-amplitude) * -1));
|
|
}
|
|
50% {
|
|
transform: translate(-50vw, var(--wave-amplitude));
|
|
}
|
|
75% {
|
|
transform: translate(-75vw, calc(var(--wave-amplitude) * -1));
|
|
}
|
|
100% {
|
|
transform: translate(calc(-100vw - 100px), var(--wave-amplitude));
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* Final dots properties - larger size (10px-18px) and centered */
|
|
.background-animation i:nth-child(1) { width: 10px; height: 10px; --y-offset: 75px; --wave-amplitude: 40px; animation-duration: 18s; animation-delay: 0s; }
|
|
.background-animation i:nth-child(2) { width: 12px; height: 12px; --y-offset: 125px; --wave-amplitude: 60px; animation-duration: 22s; animation-delay: 3s; }
|
|
.background-animation i:nth-child(3) { width: 8px; height: 8px; --y-offset: 175px; --wave-amplitude: 30px; animation-duration: 20s; animation-delay: 6s; }
|
|
.background-animation i:nth-child(4) { width: 14px; height: 14px; --y-offset: 75px; --wave-amplitude: 50px; animation-duration: 25s; animation-delay: 1s; }
|
|
.background-animation i:nth-child(5) { width: 16px; height: 16px; --y-offset: 125px; --wave-amplitude: 70px; animation-duration: 15s; animation-delay: 8s; }
|
|
.background-animation i:nth-child(6) { width: 10px; height: 10px; --y-offset: 175px; --wave-amplitude: 20px; animation-duration: 19s; animation-delay: 4s; }
|
|
.background-animation i:nth-child(7) { width: 12px; height: 12px; --y-offset: 75px; --wave-amplitude: 80px; animation-duration: 21s; animation-delay: 7s; }
|
|
.background-animation i:nth-child(8) { width: 8px; height: 8px; --y-offset: 125px; --wave-amplitude: 35px; animation-duration: 24s; animation-delay: 2s; }
|
|
.background-animation i:nth-child(9) { width: 14px; height: 14px; --y-offset: 175px; --wave-amplitude: 55px; animation-duration: 16s; animation-delay: 9s; }
|
|
.background-animation i:nth-child(10) { width: 16px; height: 16px; --y-offset: 75px; --wave-amplitude: 25px; animation-duration: 23s; animation-delay: 5s; }
|
|
.background-animation i:nth-child(11) { width: 10px; height: 10px; --y-offset: 125px; --wave-amplitude: 65px; animation-duration: 18s; animation-delay: 3s; }
|
|
.background-animation i:nth-child(12) { width: 12px; height: 12px; --y-offset: 175px; --wave-amplitude: 45px; animation-duration: 22s; animation-delay: 6s; }
|
|
.background-animation i:nth-child(13) { width: 8px; height: 8px; --y-offset: 75px; --wave-amplitude: 75px; animation-duration: 26s; animation-delay: 1s; }
|
|
.background-animation i:nth-child(14) { width: 14px; height: 14px; --y-offset: 125px; --wave-amplitude: 30px; animation-duration: 20s; animation-delay: 8s; }
|
|
.background-animation i:nth-child(15) { width: 16px; height: 16px; --y-offset: 175px; --wave-amplitude: 60px; animation-duration: 17s; animation-delay: 4s; }
|
|
.background-animation i:nth-child(16) { width: 10px; height: 10px; --y-offset: 75px; --wave-amplitude: 40px; animation-duration: 19s; animation-delay: 7s; }
|
|
.background-animation i:nth-child(17) { width: 12px; height: 12px; --y-offset: 125px; --wave-amplitude: 70px; animation-duration: 24s; animation-delay: 2s; }
|
|
.background-animation i:nth-child(18) { width: 8px; height: 8px; --y-offset: 175px; --wave-amplitude: 50px; animation-duration: 21s; animation-delay: 5s; }
|
|
.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 with enhanced frosted glass effect */
|
|
.login-container {
|
|
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),
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.3); /* Inner glow */
|
|
padding: 40px;
|
|
width: 90%;
|
|
max-width: 450px;
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo-placeholder {
|
|
height: 80px;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #0096c7; /* New blue from palette */
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
border: 2px dashed #0096c7; /* New blue from palette */
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Form toggle buttons */
|
|
.form-toggle {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.toggle-btn {
|
|
flex: 1;
|
|
padding: 12px 0;
|
|
border: none;
|
|
background: #f0f0f0;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.toggle-btn.active {
|
|
background: #0096c7; /* New blue from palette */
|
|
color: white;
|
|
}
|
|
|
|
.toggle-btn:not(.active):hover {
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
/* Input group styling */
|
|
.input-group {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
|
|
height: 50px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.input-group input:focus,
|
|
.phone-input-wrapper:focus-within {
|
|
transform: translateY(-2px);
|
|
outline: none;
|
|
border-color: transparent; /* Remove border */
|
|
box-shadow: none; /* Remove shadow */
|
|
}
|
|
|
|
/* Phone input styling */
|
|
.phone-input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 15px;
|
|
transition: all 0.3s ease;
|
|
height: 50px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.phone-prefix-display {
|
|
padding: 15px;
|
|
color: #888;
|
|
font-weight: bold;
|
|
border-right: 1px solid #ddd;
|
|
background-color: #f8f9fa;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 10px 0 0 10px;
|
|
}
|
|
|
|
.phone-input {
|
|
border: none !important;
|
|
margin-bottom: 0 !important;
|
|
box-shadow: none !important;
|
|
flex-grow: 1;
|
|
background: transparent !important;
|
|
height: 100%;
|
|
padding: 0 15px;
|
|
border-radius: 0 10px 10px 0;
|
|
}
|
|
|
|
.phone-input:focus {
|
|
box-shadow: none !important;
|
|
transform: none !important;
|
|
outline: none;
|
|
}
|
|
|
|
/* Login button styling */
|
|
.login-btn {
|
|
width: 100%;
|
|
padding: 15px;
|
|
background: #0096c7; /* New blue from palette */
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 5px 15px rgba(0, 150, 199, 0.4);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(0, 150, 199, 0.6); /* New blue from palette */
|
|
}
|
|
|
|
.login-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Links styling */
|
|
.links {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.links a {
|
|
color: #48cae4; /* New light blue from palette */
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.links a:hover {
|
|
color: #023e8a; /* Dark blue from palette */
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 480px) {
|
|
.login-container {
|
|
padding: 25px;
|
|
width: 95%;
|
|
}
|
|
|
|
.form-toggle {
|
|
flex-direction: column;
|
|
}
|
|
}
|