mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Добавил свой дизайн
This commit is contained in:
grabic21
+26
-21
@@ -76,33 +76,38 @@
|
||||
|
||||
<!-- Chat Interface -->
|
||||
<div id="chat-interface" style="display: none;">
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<div class="logo">
|
||||
<span id="productname">Loading...</span>
|
||||
<div class="all-conteiner">
|
||||
<div class="chat-list" id="chat-list">
|
||||
<header class="chat-sitting">
|
||||
<div id="productname">Loading...</div>
|
||||
<div class="profile">
|
||||
<a href="#">Профиль</a>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li>
|
||||
<a href="#" id="chat-link">
|
||||
<span class="material-symbols filled">chat_bubble</span> Общий чат
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" id="logout-link">
|
||||
<span class="material-symbols filled">logout</span> Выйти
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="chat-sortirovka"><nav><ul>
|
||||
<li>чаты</li>
|
||||
<li>канал</li>
|
||||
<li>контакты</li>
|
||||
</ul></nav></div>
|
||||
<div class="chats-chanel-kontarti">
|
||||
<a href="#" id="chat1but">Общий чат</a>
|
||||
<a href="#" id="chat1but2">Общий чат 2</a>
|
||||
</div>
|
||||
<div class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
|
||||
<div class="chat-container">
|
||||
<div class="chat-main">
|
||||
<div class="chat-main" id="conteinerchat">
|
||||
<div class="chat-header">
|
||||
<img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
|
||||
<div class="chat-header-info">
|
||||
<h4>Общий чат</h4>
|
||||
<p><span class="online-status"></span> Онлайн</p>
|
||||
<div class="info-chat">
|
||||
<h4 id="namechat">Общий чат</h4>
|
||||
<p>
|
||||
<span class="online-status"></span> Онлайн
|
||||
</p>
|
||||
</div>
|
||||
<a href="#" id="chat-recrol">Свернуть чат</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -123,7 +128,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="src/main.ts" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
+36
-10
@@ -4,13 +4,18 @@
|
||||
#chat-interface {
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
background-color: $color-dark-surface-container;
|
||||
color: white;
|
||||
padding: 16px 16px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
position: static;
|
||||
justify-content: end;
|
||||
width: fit-content;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
@@ -24,11 +29,10 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
#logouts {
|
||||
display: none;
|
||||
list-style: none;
|
||||
gap: 10px;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: white;
|
||||
@@ -53,13 +57,15 @@
|
||||
|
||||
.chat-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 70px);
|
||||
margin-top: 70px;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.chat-header {
|
||||
padding: 16px;
|
||||
@@ -77,6 +83,10 @@
|
||||
}
|
||||
|
||||
.chat-header-info {
|
||||
display: flex;
|
||||
.info-chat{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
@@ -86,7 +96,7 @@
|
||||
font-size: 0.8rem;
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
}
|
||||
.online-status {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
@@ -95,6 +105,21 @@
|
||||
background-color: $success;
|
||||
margin-right: 5px;
|
||||
}
|
||||
a{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
justify-content: end;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 2%;
|
||||
&:hover{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -225,4 +250,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
@use "common/colors" as *;
|
||||
@use "common/material" as *;
|
||||
// контейнер чата и панели с чатами
|
||||
.all-conteiner{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
#chat-list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 0;
|
||||
width: 40%;
|
||||
background-color: $color-light-primary-container;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
.chat-sitting{
|
||||
display: flex;
|
||||
color: $color-dark-on-primary-container;
|
||||
font-size: 42px;
|
||||
font-weight: bolder;
|
||||
background-color: rgb(159, 163, 165);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
.profile{
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
a{
|
||||
display: flex;
|
||||
color: $color-dark-surface;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
&:hover{
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chats-chanel-kontarti{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 5px;
|
||||
a{
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
border: solid 2px black;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
background-color: $gray;
|
||||
color: $color-dark-shadow;
|
||||
font-weight: 20px;
|
||||
}
|
||||
}
|
||||
.chat-sortirovka{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 24px;
|
||||
justify-content: center;
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.ponel{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 95%;
|
||||
left: 2%;
|
||||
gap: 10px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: $color-dark-surface;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
@use "auth";
|
||||
@use "chat";
|
||||
@use "panelchat";
|
||||
@use "common/animations";
|
||||
@use "common/components";
|
||||
@use "common/colors" as *;
|
||||
@@ -19,4 +20,6 @@ body {
|
||||
background-color: $color-dark-surface;
|
||||
color: $color-dark-on-surface;
|
||||
line-height: 1.6;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import { loadChat, logout, showLogin, showRegister } from "./auth";
|
||||
import { /* loadChat, */ /* logout, */ showLogin, showRegister } from "./auth";
|
||||
|
||||
const login = document.getElementById("login-link")!;
|
||||
const register = document.getElementById("register-link")!;
|
||||
const chat = document.getElementById("chat-link")!;
|
||||
const logoutLink = document.getElementById("logout-link")!;
|
||||
// const chat = document.getElementById("chat-link")!;
|
||||
// const logoutLink = document.getElementById("logout-link")!;
|
||||
|
||||
login.addEventListener("click", showLogin);
|
||||
register.addEventListener("click", showRegister);
|
||||
chat.addEventListener("click", loadChat);
|
||||
logoutLink.addEventListener("click", logout);
|
||||
// chat.addEventListener("click", loadChat);
|
||||
// logoutLink.addEventListener("click", logout);
|
||||
|
||||
@@ -144,3 +144,24 @@ document.getElementById('message-form')!.addEventListener('submit', (e) => {
|
||||
|
||||
document.getElementById("productname")!.textContent = PRODUCT_NAME;
|
||||
document.title = PRODUCT_NAME;
|
||||
const but = document.getElementById('chat-recrol')!;
|
||||
const but_list1 = document.getElementById('chat1but')!;
|
||||
const but_list2 = document.getElementById('chat1but2')!;
|
||||
const cont1 = document.getElementById('conteinerchat')!;
|
||||
const logout = document.getElementById('logouts')!;
|
||||
const namechat = document.getElementById('namechat')!;
|
||||
but.addEventListener('click',() => {
|
||||
but.style.display = 'none';
|
||||
cont1.style.display = 'none';
|
||||
logout.style.display = 'flex';
|
||||
});
|
||||
but_list1.addEventListener('click',() => {
|
||||
but.style.display = 'flex';
|
||||
cont1.style.display = 'flex';
|
||||
namechat.textContent = 'общий чат';
|
||||
});
|
||||
but_list2.addEventListener('click',() => {
|
||||
but.style.display = 'flex';
|
||||
cont1.style.display = 'flex';
|
||||
namechat.textContent = 'общий чат 2';
|
||||
});
|
||||
Reference in New Issue
Block a user