FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

New design

Browse Source
This commit is contained in:
denis0001-dev
2025-08-19 21:09:53 +03:00
Unverified
parent 499e9c0ab3
commit f4007bde45
5 changed files with 107 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+11 -9
View File
@@ -77,7 +77,7 @@
<!-- Chat Interface --> <!-- Chat Interface -->
<div id="chat-interface" style="display: none;"> <div id="chat-interface" style="display: none;">
<div class="header"> <div class="header">
<div class="container header-content"> <div class="header-content">
<div class="logo"> <div class="logo">
<span id="productname">Loading...</span> <span id="productname">Loading...</span>
</div> </div>
@@ -96,7 +96,7 @@
</div> </div>
</div> </div>
<div class="container chat-container"> <div class="chat-container">
<div class="chat-main"> <div class="chat-main">
<div class="chat-header"> <div class="chat-header">
<img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar"> <img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
@@ -110,13 +110,15 @@
<!-- Messages will be loaded here dynamically --> <!-- Messages will be loaded here dynamically -->
</div> </div>
<div class="chat-input"> <div class="chat-input-wrapper">
<form class="input-group" id="message-form"> <div class="chat-input">
<input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off"> <form class="input-group" id="message-form">
<button type="submit" class="send-btn"> <input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
<span class="material-symbols filled">send</span> <button type="submit" class="send-btn">
</button> <span class="material-symbols filled">send</span>
</form> </button>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
frontend/src/css/_chat.scss
+79 -53
View File
@@ -1,12 +1,12 @@
@use "common/colors" as *; @use "common/colors" as *;
@use "common/material" as *;
#chat-interface { #chat-interface {
/* Header */ /* Header */
.header { .header {
background: linear-gradient(135deg, $primary, $primary-dark); background-color: $color-dark-surface-container;
color: white; color: white;
padding: 1rem 0; padding: 16px 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0; top: 0;
@@ -60,14 +60,13 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #F7FAFC;
.chat-header { .chat-header {
padding: 1rem; padding: 16px;
background: white; background: $color-dark-surface-container;
border-bottom: 1px solid $gray;
display: flex; display: flex;
align-items: center; align-items: center;
box-shadow: black 0px 0px 20px;
.chat-header-avatar { .chat-header-avatar {
width: 45px; width: 45px;
@@ -104,6 +103,19 @@
padding: 1rem; padding: 1rem;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: $color-dark-surface-container-high;
border-radius: 20px;
}
.message { .message {
margin-bottom: 1rem; margin-bottom: 1rem;
max-width: 70%; max-width: 70%;
@@ -117,15 +129,15 @@
.message-time { .message-time {
font-size: 0.7rem; font-size: 0.7rem;
color: #A0AEC0; color: $color-dark-on-surface-variant;
margin-top: 0.3rem; margin-top: 0.3rem;
text-align: right; text-align: right;
} }
} }
&.received .message-inner { &.received .message-inner {
background: white; background-color: $color-dark-surface-container;
border-top-left-radius: 0; border-top-left-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} }
@@ -133,13 +145,13 @@
margin-left: auto; margin-left: auto;
.message-inner { .message-inner {
background: linear-gradient(135deg, $primary, $primary-dark); background-color: $color-dark-primary-container;
color: white; color: $color-dark-on-primary-container;
border-top-right-radius: 0; border-top-right-radius: 5px;
} }
.message-time { .message-time {
color: rgba(255, 255, 255, 0.7); color: $color-dark-on-primary-container;
} }
} }
} }
@@ -150,50 +162,64 @@
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
.chat-input {
padding: 1rem;
background: white;
border-top: 1px solid $gray;
.input-group { .chat-input-wrapper {
display: flex; position: relative;
.message-input { &::before {
flex: 1; $height: 20px;
padding: 0.8rem 1rem;
border: 1px solid $gray;
border-radius: 25px;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
&:focus { content: '';
border-color: $primary; position: absolute;
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2); top: -$height;
} left: 0;
} right: 0;
width: 100%;
.send-btn { height: $height;
margin-left: 1rem; background: linear-gradient(
width: 50px; 0deg,
height: 50px; $color-dark-surface,
border-radius: 50%; rgba(255, 255, 255, 0),
background: linear-gradient(135deg, $primary, $primary-dark); );
color: white; }
border: none;
cursor: pointer; .chat-input {
transition: all 0.3s ease; margin: 0 20px 20px 20px;
background-color: $color-dark-surface-container;
border-radius: 40px;
.input-group {
display: flex; display: flex;
align-items: center;
justify-content: center; .message-input {
flex: 1;
&:hover { padding: 10px 20px;
transform: translateY(-2px); border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 25px;
font-size: 1rem;
outline: none;
background-color: inherit;
caret-color: $color-dark-primary;
} }
}
} .send-btn {
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: $color-dark-primary;
color: $color-dark-on-primary;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease;
@include hoverStateLayer($background: $color-dark-primary);
}
}
}
} }
} }
} }
frontend/src/css/common/_material.scss
+13 -1
View File
@@ -1,3 +1,5 @@
@use "sass:color";
// Dark // Dark
$color-dark-primary: rgb(145 206 244); $color-dark-primary: rgb(145 206 244);
$color-dark-surface-tint: rgb(145 206 244); $color-dark-surface-tint: rgb(145 206 244);
@@ -98,4 +100,14 @@ $color-light-surface-container-lowest: rgb(255 255 255);
$color-light-surface-container-low: rgb(240 244 248); $color-light-surface-container-low: rgb(240 244 248);
$color-light-surface-container: rgb(235 238 243); $color-light-surface-container: rgb(235 238 243);
$color-light-surface-container-high: rgb(229 232 237); $color-light-surface-container-high: rgb(229 232 237);
$color-light-surface-container-highest: rgb(223 227 231); $color-light-surface-container-highest: rgb(223 227 231);
@mixin hoverStateLayer($background: $color-surface, $overlayColor: $color-dark-on-primary) {
&:hover {
background-color: color.mix($overlayColor, $background, 8%);
}
&:active {
background-color: color.mix($overlayColor, $background, 18%);
}
}
frontend/src/css/style.scss
+3 -2
View File
@@ -3,6 +3,7 @@
@use "common/animations"; @use "common/animations";
@use "common/components"; @use "common/components";
@use "common/colors" as *; @use "common/colors" as *;
@use "common/material" as *;
@use "lib/fonts/montserrat"; @use "lib/fonts/montserrat";
@use "lib/fonts/material-symbols"; @use "lib/fonts/material-symbols";
@@ -15,7 +16,7 @@
body { body {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
background-color: #f8f9fa; background-color: $color-dark-surface;
color: $dark; color: $color-dark-on-surface;
line-height: 1.6; line-height: 1.6;
} }
frontend/src/main.ts
+1 -1
View File
@@ -25,7 +25,7 @@ export function addMessage(message: Message, isAuthor: boolean) {
if (isAuthor) { if (isAuthor) {
messageDiv.classList.add("sent"); messageDiv.classList.add("sent");
} else { } else {
messageDiv.classList.add("receive"); messageDiv.classList.add("received");
} }
messageDiv.dataset.id = `${message.id}`; messageDiv.dataset.id = `${message.id}`;