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
+4 -2
View File
@@ -77,7 +77,7 @@
<!-- Chat Interface -->
<div id="chat-interface" style="display: none;">
<div class="header">
<div class="container header-content">
<div class="header-content">
<div class="logo">
<span id="productname">Loading...</span>
</div>
@@ -96,7 +96,7 @@
</div>
</div>
<div class="container chat-container">
<div class="chat-container">
<div class="chat-main">
<div class="chat-header">
<img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
@@ -110,6 +110,7 @@
<!-- Messages will be loaded here dynamically -->
</div>
<div class="chat-input-wrapper">
<div class="chat-input">
<form class="input-group" id="message-form">
<input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
@@ -121,6 +122,7 @@
</div>
</div>
</div>
</div>
<script src="src/main.ts" type="module"></script>
</body>
frontend/src/css/_chat.scss
+58 -32
View File
@@ -1,12 +1,12 @@
@use "common/colors" as *;
@use "common/material" as *;
#chat-interface {
/* Header */
.header {
background: linear-gradient(135deg, $primary, $primary-dark);
background-color: $color-dark-surface-container;
color: white;
padding: 1rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 16px 16px;
position: fixed;
width: 100%;
top: 0;
@@ -60,14 +60,13 @@
flex: 1;
display: flex;
flex-direction: column;
background-color: #F7FAFC;
.chat-header {
padding: 1rem;
background: white;
border-bottom: 1px solid $gray;
padding: 16px;
background: $color-dark-surface-container;
display: flex;
align-items: center;
box-shadow: black 0px 0px 20px;
.chat-header-avatar {
width: 45px;
@@ -104,6 +103,19 @@
padding: 1rem;
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 {
margin-bottom: 1rem;
max-width: 70%;
@@ -117,15 +129,15 @@
.message-time {
font-size: 0.7rem;
color: #A0AEC0;
color: $color-dark-on-surface-variant;
margin-top: 0.3rem;
text-align: right;
}
}
&.received .message-inner {
background: white;
border-top-left-radius: 0;
background-color: $color-dark-surface-container;
border-top-left-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
@@ -133,13 +145,13 @@
margin-left: auto;
.message-inner {
background: linear-gradient(135deg, $primary, $primary-dark);
color: white;
border-top-right-radius: 0;
background-color: $color-dark-primary-container;
color: $color-dark-on-primary-container;
border-top-right-radius: 5px;
}
.message-time {
color: rgba(255, 255, 255, 0.7);
color: $color-dark-on-primary-container;
}
}
}
@@ -151,46 +163,60 @@
}
}
.chat-input-wrapper {
position: relative;
&::before {
$height: 20px;
content: '';
position: absolute;
top: -$height;
left: 0;
right: 0;
width: 100%;
height: $height;
background: linear-gradient(
0deg,
$color-dark-surface,
rgba(255, 255, 255, 0),
);
}
.chat-input {
padding: 1rem;
background: white;
border-top: 1px solid $gray;
margin: 0 20px 20px 20px;
background-color: $color-dark-surface-container;
border-radius: 40px;
.input-group {
display: flex;
.message-input {
flex: 1;
padding: 0.8rem 1rem;
border: 1px solid $gray;
padding: 10px 20px;
border: none;
border-radius: 25px;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
&:focus {
border-color: $primary;
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}
background-color: inherit;
caret-color: $color-dark-primary;
}
.send-btn {
margin-left: 1rem;
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, $primary, $primary-dark);
color: white;
background-color: $color-dark-primary;
color: $color-dark-on-primary;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@include hoverStateLayer($background: $color-dark-primary);
}
}
}
frontend/src/css/common/_material.scss
+12
View File
@@ -1,3 +1,5 @@
@use "sass:color";
// Dark
$color-dark-primary: rgb(145 206 244);
$color-dark-surface-tint: rgb(145 206 244);
@@ -99,3 +101,13 @@ $color-light-surface-container-low: rgb(240 244 248);
$color-light-surface-container: rgb(235 238 243);
$color-light-surface-container-high: rgb(229 232 237);
$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/components";
@use "common/colors" as *;
@use "common/material" as *;
@use "lib/fonts/montserrat";
@use "lib/fonts/material-symbols";
@@ -15,7 +16,7 @@
body {
font-family: 'Montserrat', sans-serif;
background-color: #f8f9fa;
color: $dark;
background-color: $color-dark-surface;
color: $color-dark-on-surface;
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) {
messageDiv.classList.add("sent");
} else {
messageDiv.classList.add("receive");
messageDiv.classList.add("received");
}
messageDiv.dataset.id = `${message.id}`;