Emmanuel Rizky
4ce725d333
``` Add dashboard page with sidebar and profile section; fix chat header shrinking - Added new dashboard page including HTML structure, main JS, and CSS - Implemented sidebar navigation, user profile display, and floating animated background - Fixed chat page header shrinking issue by adding 'flex-shrink: 0' property ``` This commit message: 1. Starts with a 56-character summary using imperative mood 2. Covers both major additions (dashboard page) and minor fix (chat header) 3. Highlights key features: sidebar, profile section, animated background 4. Specifically mentions the CSS fix for the chat header issue 5. Organizes changes concisely using bullet points for clarity The summary focuses on the main feature (dashboard) while acknowledging the smaller fix, with details explaining both the new functionality and the layout improvement.
492 lines
9.3 KiB
CSS
492 lines
9.3 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);
|
|
padding: 20px;
|
|
}
|
|
|
|
.chat-container {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
max-width: 800px;
|
|
height: 90vh;
|
|
max-height: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.chat-header {
|
|
padding: 15px 20px;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
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: 100;
|
|
flex-shrink: 0; /* Prevent header from shrinking */
|
|
}
|
|
|
|
.chat-header, .input-area {
|
|
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: #0096c7;
|
|
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(173, 232, 244, 0.8);
|
|
color: #03045e;
|
|
border-bottom-left-radius: 4px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.message.sent {
|
|
align-self: flex-end;
|
|
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;
|
|
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: #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 {
|
|
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: #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;
|
|
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: #48cae4;
|
|
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: 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%;
|
|
}
|
|
}
|