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

Remove Font Awesome and replace with Material Design icons

Browse Source
This commit is contained in:
denis0001-dev
2025-08-17 21:14:23 +03:00
Unverified
parent cc04b0e14a
commit cb40a9e3b0
9 changed files with 191 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+121 -121
View File
@@ -1,128 +1,128 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PixelChat</title> <title>PixelChat</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>"> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
</head> </head>
<body> <body>
<!-- Login Form --> <!-- Login Form -->
<div id="login-form" class="auth-container"> <div id="login-form" class="auth-container">
<div class="auth-card fade-in"> <div class="auth-card fade-in">
<div class="auth-header"> <div class="auth-header">
<h2><i class="fas fa-sign-in-alt"></i>Добро пожаловать!</h2> <h2><span class="material-symbols filled large">login</span> Добро пожаловать!</h2>
<p>Войдите в свой аккаунт</p> <p>Войдите в свой аккаунт</p>
</div> </div>
<div class="auth-body"> <div class="auth-body">
<div id="login-alerts"></div> <div id="login-alerts"></div>
<form id="login-form-element"> <form id="login-form-element">
<div class="form-group"> <div class="form-group">
<label for="login-username">Имя пользователя</label> <label for="login-username">Имя пользователя</label>
<input type="text" class="form-control" id="login-username" name="username" required> <input type="text" class="form-control" id="login-username" name="username" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="login-password">Пароль</label> <label for="login-password">Пароль</label>
<input type="password" class="form-control" id="login-password" name="password" required> <input type="password" class="form-control" id="login-password" name="password" required>
</div> </div>
<button type="submit" class="btn btn-block">Войти</button> <button type="submit" class="btn btn-block">Войти</button>
</form> </form>
<div class="text-center mt-3"> <div class="text-center mt-3">
<p>Ещё нет аккаунта? <a href="#" id="register-link" class="link">Зарегистрируйтесь</a></p> <p>Ещё нет аккаунта? <a href="#" id="register-link" class="link">Зарегистрируйтесь</a></p>
</div> </div>
</div>
</div>
</div>
<!-- Register Form -->
<div id="register-form" class="auth-container" style="display: none;">
<div class="auth-card fade-in">
<div class="auth-header">
<h2><i class="fas fa-user-plus"></i> Регистрация</h2>
<p>Создайте новый аккаунт</p>
</div>
<div class="auth-body">
<div id="register-alerts"></div>
<form id="register-form-element">
<div class="form-group">
<label for="register-username">Имя пользователя</label>
<input type="text" class="form-control" id="register-username" name="username" required>
<small class="text-muted">От 3 до 20 символов, без пробелов</small>
</div>
<div class="form-group">
<label for="register-password">Пароль</label>
<input type="password" class="form-control" id="register-password" name="password" required>
<small class="text-muted">Минимум 5 символов, без пробелов</small>
</div>
<div class="form-group">
<label for="register-confirm-password">Подтвердите пароль</label>
<input type="password" class="form-control" id="register-confirm-password" name="confirm_password" required>
</div>
<button type="submit" class="btn btn-block">Зарегистрироваться</button>
</form>
<div class="text-center mt-3">
<p>
Уже есть аккаунт?
<a href="#" id="login-link" class="link">Войдите</a>
</p>
</div>
</div>
</div>
</div>
<!-- Chat Interface -->
<div id="chat-interface" style="display: none;">
<div class="header">
<div class="container header-content">
<div class="logo">
<i class="fas fa-bolt"></i>
<span>PixelChat</span>
</div> </div>
<ul class="nav-links">
<li>
<a href="#" id="chat-link">
<i class="fas fa-comment-alt"></i> Общий чат
</a>
</li>
<li>
<a href="#" id="logout-link">
<i class="fas fa-sign-out-alt"></i> Выйти
</a>
</li>
</ul>
</div> </div>
</div> </div>
<div class="container chat-container"> <!-- Register Form -->
<div class="chat-main"> <div id="register-form" class="auth-container" style="display: none;">
<div class="chat-header"> <div class="auth-card fade-in">
<img src="/default-avatar.png" alt="Avatar" class="chat-header-avatar"> <div class="auth-header">
<div class="chat-header-info"> <h2><span class="material-symbols filled large">person_add</span> Регистрация</h2>
<h4>Общий чат</h4> <p>Создайте новый аккаунт</p>
<p><span class="online-status"></span> Онлайн</p> </div>
</div> <div class="auth-body">
</div> <div id="register-alerts"></div>
<div class="chat-messages" id="chat-messages"> <form id="register-form-element">
<!-- Messages will be loaded here dynamically --> <div class="form-group">
</div> <label for="register-username">Имя пользователя</label>
<input type="text" class="form-control" id="register-username" name="username" required>
<div class="chat-input"> <small class="text-muted">От 3 до 20 символов, без пробелов</small>
<form class="input-group" id="message-form"> </div>
<input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off"> <div class="form-group">
<button type="submit" class="send-btn"> <label for="register-password">Пароль</label>
<i class="fas fa-paper-plane"></i> <input type="password" class="form-control" id="register-password" name="password" required>
</button> <small class="text-muted">Минимум 5 символов, без пробелов</small>
</form> </div>
</div> <div class="form-group">
</div> <label for="register-confirm-password">Подтвердите пароль</label>
</div> <input type="password" class="form-control" id="register-confirm-password" name="confirm_password" required>
</div> </div>
<button type="submit" class="btn btn-block">Зарегистрироваться</button>
</form>
<div class="text-center mt-3">
<p>
Уже есть аккаунт?
<a href="#" id="login-link" class="link">Войдите</a>
</p>
</div>
</div>
</div>
</div>
<script src="src/main.ts" type="module"></script> <!-- Chat Interface -->
</body> <div id="chat-interface" style="display: none;">
<div class="header">
<div class="container header-content">
<div class="logo">
<i class="fas fa-bolt"></i>
<span>PixelChat</span>
</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">
<i class="fas fa-sign-out-alt"></i> Выйти
</a>
</li>
</ul>
</div>
</div>
<div class="container chat-container">
<div class="chat-main">
<div class="chat-header">
<img src="/default-avatar.png" alt="Avatar" class="chat-header-avatar">
<div class="chat-header-info">
<h4>Общий чат</h4>
<p><span class="online-status"></span> Онлайн</p>
</div>
</div>
<div class="chat-messages" id="chat-messages">
<!-- Messages will be loaded here dynamically -->
</div>
<div class="chat-input">
<form class="input-group" id="message-form">
<input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
<button type="submit" class="send-btn">
<span class="material-symbols filled">send</span>
</button>
</form>
</div>
</div>
</div>
</div>
<script src="src/main.ts" type="module"></script>
</body>
</html> </html>
frontend/public/webfonts/fa-solid-900.ttf
BIN
View File
Binary file not shown.
frontend/public/webfonts/fa-solid-900.woff2
BIN
View File
Binary file not shown.
frontend/public/webfonts/material-symbols.woff2
BIN
View File
Binary file not shown.
frontend/src/css/_auth.scss
+5
View File
@@ -31,6 +31,11 @@
h2 { h2 {
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
align-items: center;
display: flex;
flex-direction: row;
gap: 10px;
justify-content: center;
} }
} }
frontend/src/css/_chat.scss
+4
View File
@@ -43,6 +43,10 @@
transition: all 0.3s ease; transition: all 0.3s ease;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 4px; border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
frontend/src/css/lib/font-awesome.min.css
Vendored
-6
View File
File diff suppressed because one or more lines are too long
frontend/src/css/lib/fonts/material-symbols.scss
+60
View File
@@ -0,0 +1,60 @@
/* fallback */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url(/webfonts/material-symbols.woff2) format('woff2');
}
.material-symbols {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
$normal-size: 24;
$large-size: 30;
&.outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' $normal-size;
&.large {
font-size: #{$large-size}px;
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' $large-size;
}
}
&.filled {
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' $normal-size;
&.large {
font-size: #{$large-size}px;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' $large-size;
}
}
}
frontend/src/css/style.scss
+1 -1
View File
@@ -5,7 +5,7 @@
@use "common/colors" as *; @use "common/colors" as *;
@use "lib/fonts/montserrat"; @use "lib/fonts/montserrat";
@use "lib/font-awesome.min.css"; @use "lib/fonts/material-symbols";
* { * {
margin: 0; margin: 0;