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:
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