First commit

.gitignore

@@ -0,0 +1,381 @@
+# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
+# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,python,macos,node,osx
+# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,python,macos,node,osx
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### OSX ###
+# General
+
+# Icon must end with two \r
+
+# Thumbnails
+
+# Files that might appear in the root of a volume
+
+# Directories potentially created on remote AFP share
+
+### Python ###
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+### Python Patch ###
+# Poetry local configuration file - https://python-poetry.org/docs/configuration/#local-configuration
+poetry.toml
+
+# ruff
+.ruff_cache/
+
+# LSP config files
+pyrightconfig.json
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,python,macos,node,osx
+
+# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
+
+instance
+.vite
+*.db

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Run",
+            "type": "shell",
+            "command": "npm run dev",
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "presentation": {
+                "echo": true,
+                "reveal": "always",
+                "focus": false,
+                "panel": "shared"
+            },
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        }
+    ]
+}

README.md

@@ -0,0 +1,28 @@
+# PixelChat
+
+PixelChat - полностью открытый мессенджер. <!-- (Демо версию можно попробовать на [сайте](pixelchat.toolbox-io.ru)) (Офицальный сайт проекта: https://denis0001-dev.github.io/pixelchat) -->
+
+## Содержание:
+- [Основные моменты](#highlights)
+- [Использование](#usage)
+- [Часто задаваемые вопросы](#faq)
+- [Внос вклада](#contributing)
+
+## Основные моменты
+- Написан на HTML, SCSS, TypeScript (фронтэнд) и Python (бэкэнд).
+- 100% открытый исходный код позволяет настроить вид и поведение мессенджера полностью под себя.
+
+## Использование
+_В разработке._
+
+## Часто задаваемые вопросы
+<!--
+Вопрос: __Чему равно 2+2?__  
+Ответ: __4__  
+Вопрос: __Какая цитата Джейсона Стетхема на ваш взгляд является лучшей?__  
+Ответ: __"Одна ошибка, и ты ошибся."__
+-->
+_В разработке._
+
+## Внос вклада
+Внести свой вклад в разработку PixelChat можно при помощи pull request или вступления в нашу команду. Заявку на вступление в команду можно оставить [здесь](https://t.me/denis0001-dev).

backend/constants.py

@@ -0,0 +1,4 @@
+DATABASE_URL = "sqlite:///./pixelchat.db"
+JWT_SECRET_KEY = "pixelchat-jwt-secret"
+JWT_ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_HOURS = 24

backend/main.py

@@ -0,0 +1,317 @@
+from fastapi import FastAPI, Depends, HTTPException, status
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+from sqlalchemy import create_engine, Column, Integer, String, Text, Boolean, DateTime, ForeignKey
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker, relationship, Session
+from datetime import datetime, timedelta
+import jwt
+import re
+from typing import Optional
+from pydantic import BaseModel
+import bcrypt
+
+from constants import *
+
+# Инициализация FastAPI
+app = FastAPI(title="PixelChat")
+
+# CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # В продакшене замените на нужные домены
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Настройка базы данных
+engine = create_engine(DATABASE_URL, connect_args={"check_same_thread": False})
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+Base = declarative_base()
+
+
+# Модели базы данных
+class User(Base):
+    __tablename__ = "user"
+
+    id = Column(Integer, primary_key=True, index=True)
+    username = Column(String(50), unique=True, nullable=False, index=True)
+    password_hash = Column(String(200), nullable=False)
+    online = Column(Boolean, default=False)
+    last_seen = Column(DateTime, default=datetime.now)
+    created_at = Column(DateTime, default=datetime.now)
+    messages = relationship("Message", back_populates="author", lazy="select")
+
+
+class Message(Base):
+    __tablename__ = "message"
+
+    id = Column(Integer, primary_key=True, index=True)
+    content = Column(Text, nullable=False)
+    timestamp = Column(DateTime, default=datetime.now)
+    user_id = Column(Integer, ForeignKey("user.id"), nullable=False)
+    is_read = Column(Boolean, default=False)
+
+    author = relationship("User", back_populates="messages")
+
+
+# Валидация данных
+def is_valid_username(username: str) -> bool:
+    if len(username) < 3 or len(username) > 20:
+        return False
+    if re.search(r'[\s\u180E\u200B-\u200D\u2060\uFEFF]', username):
+        return False
+    return True
+
+
+def is_valid_password(password: str) -> bool:
+    if len(password) < 5 or len(password) > 50:
+        return False
+    if re.search(r'[\s\u180E\u200B-\u200D\u2060\uFEFF]', password):
+        return False
+    return True
+
+
+# JWT Helper Functions
+def create_token(user_id: int, username: str) -> str:
+    expire = datetime.utcnow() + timedelta(hours=ACCESS_TOKEN_EXPIRE_HOURS)
+    payload = {
+        "user_id": user_id,
+        "username": username,
+        "exp": expire
+    }
+    return jwt.encode(payload, JWT_SECRET_KEY, algorithm=JWT_ALGORITHM)
+
+
+def verify_token(token: str) -> Optional[dict]:
+    try:
+        payload = jwt.decode(token, JWT_SECRET_KEY, algorithms=[JWT_ALGORITHM])
+        return payload
+    except jwt.ExpiredSignatureError:
+        return None
+    except jwt.InvalidTokenError:
+        return None
+
+
+def verify_password(plain_password: str, hashed_password: str) -> bool:
+    return bcrypt.checkpw(plain_password.encode("utf-8"), hashed_password.encode("utf-8"))
+
+def get_password_hash(password: str) -> str:
+    return bcrypt.hashpw(password.encode("utf-8"), bcrypt.gensalt()).decode("utf-8")
+
+
+# Security для FastAPI
+security = HTTPBearer()
+
+
+# Зависимость для получения текущего пользователя
+def get_current_user(
+    credentials: HTTPAuthorizationCredentials = Depends(security),
+    db: Session = Depends(lambda: SessionLocal())
+):
+    token = credentials.credentials
+    payload = verify_token(token)
+    if not payload:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Invalid or expired token",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    user = db.query(User).filter(User.id == payload["user_id"]).first()
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="User not found",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    return {"user_id": user.id, "username": user.username}
+
+
+# Зависимость для получения сессии БД
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+
+# Pydantic модели
+class LoginRequest(BaseModel):
+    username: str
+    password: str
+
+
+class RegisterRequest(BaseModel):
+    username: str
+    password: str
+    confirm_password: str
+
+
+class SendMessageRequest(BaseModel):
+    content: str
+
+
+class MessageResponse(BaseModel):
+    id: int
+    content: str
+    timestamp: datetime
+    is_author: bool
+    is_read: bool
+    username: str
+
+    class Config:
+        from_attributes = True
+
+
+# Создание таблиц
+Base.metadata.create_all(bind=engine)
+
+
+# API маршруты
+@app.get("/check_auth")
+def check_auth(current_user: dict = Depends(get_current_user)):
+    return {
+        "authenticated": True,
+        "username": current_user["username"]
+    }
+
+
+@app.post("/login")
+def login(request: LoginRequest, db: Session = Depends(get_db)):
+    user = db.query(User).filter(User.username == request.username.strip()).first()
+
+    if not user or not verify_password(request.password.strip(), user.password_hash):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Неверное имя пользователя или пароль"
+        )
+
+    user.online = True
+    user.last_seen = datetime.now()
+    db.commit()
+
+    token = create_token(user.id, user.username)
+
+    return {
+        "status": "success",
+        "message": "Login successful",
+        "token": token,
+        "username": user.username
+    }
+
+
+@app.post("/register")
+def register(request: RegisterRequest, db: Session = Depends(get_db)):
+    username = request.username.strip()
+    password = request.password.strip()
+    confirm_password = request.confirm_password.strip()
+
+    if not is_valid_username(username):
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Имя пользователя должно быть от 3 до 20 символов и не содержать пробелов"
+        )
+
+    if not is_valid_password(password):
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Пароль должен быть от 5 до 50 символов и не содержать пробелов"
+        )
+
+    if password != confirm_password:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Пароли не совпадают"
+        )
+
+    existing_user = db.query(User).filter(User.username == username).first()
+    if existing_user:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Это имя пользователя уже занято"
+        )
+
+    hashed_password = get_password_hash(password)
+    new_user = User(
+        username=username,
+        password_hash=hashed_password,
+        online=True,
+        last_seen=datetime.now()
+    )
+
+    db.add(new_user)
+    db.commit()
+    db.refresh(new_user)
+
+    return {
+        "status": "success",
+        "message": "Регистрация прошла успешно Теперь вы можете войти."
+    }
+
+
+@app.post("/send_message")
+def send_message(
+    request: SendMessageRequest,
+    current_user: dict = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    if not request.content.strip():
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="No content provided"
+        )
+
+    new_message = Message(
+        content=request.content.strip(),
+        user_id=current_user["user_id"],
+        timestamp=datetime.now()
+    )
+
+    db.add(new_message)
+    db.commit()
+    db.refresh(new_message)
+
+    return {"status": "success"}
+
+
+@app.get("/get_messages")
+def get_messages(
+    current_user: dict = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    messages = db.query(Message).order_by(Message.timestamp.asc()).all()
+
+    messages_data = []
+    for msg in messages:
+        messages_data.append({
+            "id": msg.id,
+            "content": msg.content,
+            "timestamp": msg.timestamp.isoformat(),
+            "is_author": msg.user_id == current_user["user_id"],
+            "is_read": msg.is_read,
+            "username": msg.author.username
+        })
+
+    return {
+        "status": "success",
+        "messages": messages_data
+    }
+
+
+@app.get("/logout")
+def logout(
+    current_user: dict = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    user = db.query(User).filter(User.id == current_user["user_id"]).first()
+    if user:
+        user.online = False
+        user.last_seen = datetime.now()
+        db.commit()
+
+    return {
+        "status": "success",
+        "message": "Logged out successfully"
+    }

backend/requirements.txt

@@ -0,0 +1,5 @@
+PyJWT>=2.8.0
+fastapi[standard]>=0.116.1
+pydantic>=2.11.7
+sqlalchemy>=2.0.43
+bcrypt>=4.3.0

frontend/index.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <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>">
+  </head>
+  <body>
+      <!-- Login Form -->
+      <div id="login-form" class="auth-container">
+          <div class="auth-card fade-in">
+              <div class="auth-header">
+                  <h2><i class="fas fa-sign-in-alt"></i>Добро пожаловать!</h2>
+                  <p>Войдите в свой аккаунт</p>
+              </div>
+              <div class="auth-body">
+                  <div id="login-alerts"></div>
+                  
+                  <form id="login-form-element">
+                      <div class="form-group">
+                          <label for="login-username">Имя пользователя</label>
+                          <input type="text" class="form-control" id="login-username" name="username" required>
+                      </div>
+                      <div class="form-group">
+                          <label for="login-password">Пароль</label>
+                          <input type="password" class="form-control" id="login-password" name="password" required>
+                      </div>
+                      <button type="submit" class="btn btn-block">Войти</button>
+                  </form>
+                  
+                  <div class="text-center mt-3">
+                      <p>Ещё нет аккаунта? <a href="#" id="register-link" class="link">Зарегистрируйтесь</a></p>
+                  </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>
+                <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 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">
+                              <i class="fas fa-paper-plane"></i>
+                          </button>
+                      </form>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+      <script src="src/main.ts" type="module"></script>
+  </body>
+</html> 

frontend/public/favicon.ico

@@ -0,0 +1 @@
+ 

frontend/src/auth.ts

@@ -0,0 +1,194 @@
+import { loadMessages } from "./main";
+import type { Headers, ErrorResponse, User, LoginResponse, LoginRequest, RegisterRequest } from "./types";
+import { API_BASE_URL } from "./config";
+
+// Authentication and navigation handling
+export let currentUser: User | null = null;
+let authToken: string | null = null;
+
+
+// Helper function to get auth headers
+export function getAuthHeaders(): Headers {
+    const headers: Headers = {
+        'Content-Type': 'application/json',
+    };
+    if (authToken) {
+        headers['Authorization'] = `Bearer ${authToken}`;
+    }
+    return headers;
+}
+
+// Show login form
+export function showLogin() {
+    document.getElementById('login-form')!.style.display = 'flex';
+    document.getElementById('register-form')!.style.display = 'none';
+    document.getElementById('chat-interface')!.style.display = 'none';
+    clearAlerts();
+}
+
+// Show register form
+export function showRegister() {
+    document.getElementById('login-form')!.style.display = 'none';
+    document.getElementById('register-form')!.style.display = 'flex';
+    document.getElementById('chat-interface')!.style.display = 'none';
+    clearAlerts();
+}
+
+// Show chat interface
+export function showChat() {
+    document.getElementById('login-form')!.style.display = 'none';
+    document.getElementById('register-form')!.style.display = 'none';
+    document.getElementById('chat-interface')!.style.display = 'block';
+}
+
+// Clear all alerts
+export function clearAlerts() {
+    document.getElementById('login-alerts')!.innerHTML = '';
+    document.getElementById('register-alerts')!.innerHTML = '';
+}
+
+// Show alert message
+export function showAlert(containerId: string, message: string, type: "success" | "danger" = 'danger') {
+    const container = document.getElementById(containerId)!;
+    const alertDiv = document.createElement('div');
+    alertDiv.className = `alert alert-${type}`;
+    alertDiv.textContent = message;
+    container.appendChild(alertDiv);
+}
+
+// Handle login form submission
+document.getElementById('login-form-element')!.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const usernameElement = document.getElementById('login-username') as HTMLInputElement;
+    const passwordElement = document.getElementById('login-password') as HTMLInputElement;
+    
+    const username = usernameElement.value.trim();
+    const password = passwordElement.value.trim();
+    
+    if (!username || !password) {
+        showAlert('login-alerts', 'Пожалуйста, заполните все поля', 'danger');
+        return;
+    }
+    
+    try {
+        const request: LoginRequest = {
+            username: username,
+            password: password
+        }
+
+        const response = await fetch(`${API_BASE_URL}/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(request)
+        });
+        
+        if (response.ok) {
+            const data: LoginResponse = await response.json();
+            // Store the JWT token
+            authToken = data.token;
+            currentUser = { username: data.username };
+            showChat();
+            loadMessages(); // Start loading messages
+        } else {
+            const data: ErrorResponse = await response.json();
+            showAlert('login-alerts', data.message || 'Неверное имя пользователя или пароль', 'danger');
+        }
+    } catch (error) {
+        showAlert('login-alerts', 'Ошибка соединения с сервером', 'danger');
+    }
+});
+
+// Handle register form submission
+document.getElementById('register-form-element')!.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const usernameElement = document.getElementById('register-username') as HTMLInputElement;
+    const passwordElement = document.getElementById('register-password') as HTMLInputElement;
+    const confirmPasswordElement = document.getElementById('register-confirm-password') as HTMLInputElement;
+    
+    const username = usernameElement.value.trim();
+    const password = passwordElement.value.trim();
+    const confirmPassword = confirmPasswordElement.value.trim();
+    
+    if (!username || !password || !confirmPassword) {
+        showAlert('register-alerts', 'Пожалуйста, заполните все поля', 'danger');
+        return;
+    }
+    
+    if (password !== confirmPassword) {
+        showAlert('register-alerts', 'Пароли не совпадают', 'danger');
+        return;
+    }
+    
+    if (username.length < 3 || username.length > 20) {
+        showAlert('register-alerts', 'Имя пользователя должно быть от 3 до 20 символов', 'danger');
+        return;
+    }
+    
+    if (password.length < 5 || password.length > 50) {
+        showAlert('register-alerts', 'Пароль должен быть от 5 до 50 символов', 'danger');
+        return;
+    }
+    
+    try {
+        const request: RegisterRequest = {
+            username: username,
+            password: password,
+            confirm_password: confirmPassword
+        }
+
+        const response = await fetch(`${API_BASE_URL}/register`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(request)
+        });
+        
+        if (response.ok) {
+            // Registration successful
+            showAlert('register-alerts', 'Регистрация прошла успешно! Теперь вы можете войти.', 'success');
+            setTimeout(() => {
+                showLogin();
+            }, 2000);
+        } else {
+            const data: ErrorResponse = await response.json();
+            showAlert('register-alerts', data.message || 'Ошибка при регистрации', 'danger');
+        }
+    } catch (error) {
+        showAlert('register-alerts', 'Ошибка соединения с сервером', 'danger');
+    }
+});
+
+// Handle logout
+export async function logout() {
+    try {
+        await fetch(`${API_BASE_URL}/logout`, {
+            method: 'GET',
+            headers: getAuthHeaders()
+        });
+    } catch (error) {
+        console.error('Logout error:', error);
+    }
+    
+    currentUser = null;
+    authToken = null;
+    showLogin();
+    clearAlerts();
+}
+
+// Load chat interface
+export function loadChat() {
+    showChat();
+    loadMessages();
+}
+
+// Check authentication status on page load
+export async function checkAuthStatus() {
+    // For JWT, we don't have a persistent token on page load
+    // So we'll just show the login form
+    showLogin();
+}

frontend/src/config.ts

@@ -0,0 +1 @@
+export const API_BASE_URL: string = '/api';

frontend/src/css/_auth.scss

@@ -0,0 +1,40 @@
+@use "common/colors" as *;
+
+.auth-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 2rem;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+
+    .auth-card {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        max-width: 450px;
+        overflow: hidden;
+        transition: all 0.3s ease;
+
+        &:hover {
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+        }
+    }
+      
+    .auth-header {
+        background: linear-gradient(135deg, $primary, $primary-dark);
+        color: white;
+        padding: 1.5rem;
+        text-align: center;
+
+        h2 {
+            font-size: 1.8rem;
+            margin-bottom: 0.5rem;
+        }
+    }
+      
+    .auth-body {
+        padding: 2rem;
+    }
+}

frontend/src/css/_chat.scss

@@ -0,0 +1,202 @@
+@use "common/colors" as *;
+
+#chat-interface {
+    /* Header */
+    .header {
+        background: linear-gradient(135deg, $primary, $primary-dark);
+        color: white;
+        padding: 1rem 0;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        position: fixed;
+        width: 100%;
+        top: 0;
+        z-index: 1000;
+
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .logo {
+                font-size: 1.8rem;
+                font-weight: 700;
+                display: flex;
+                align-items: center;
+
+                i {
+                    margin-right: 10px;
+                    color: $secondary;
+                }
+            }
+
+            .nav-links {
+                display: flex;
+                list-style: none;
+
+                li {
+                    margin-left: 1.5rem;
+
+                    a {
+                        color: white;
+                        text-decoration: none;
+                        font-weight: 500;
+                        transition: all 0.3s ease;
+                        padding: 0.5rem 1rem;
+                        border-radius: 4px;
+
+                        &:hover {
+                            background-color: rgba(255, 255, 255, 0.2);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .chat-container {
+        display: flex;
+        height: calc(100vh - 70px);
+        margin-top: 70px;
+
+        .chat-main {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: #F7FAFC;
+
+            .chat-header {
+                padding: 1rem;
+                background: white;
+                border-bottom: 1px solid $gray;
+                display: flex;
+                align-items: center;
+
+                .chat-header-avatar {
+                    width: 45px;
+                    height: 45px;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    margin-right: 1rem;
+                }
+
+                .chat-header-info {
+                    h4 {
+                        font-size: 1.1rem;
+                        margin-bottom: 0.2rem;
+                    }
+
+                    p {
+                        font-size: 0.8rem;
+                        color: #718096;
+                    }
+
+                    .online-status {
+                        display: inline-block;
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 50%;
+                        background-color: $success;
+                        margin-right: 5px;
+                    }
+                }
+            }
+
+            .chat-messages {
+                flex: 1;
+                padding: 1rem;
+                overflow-y: auto;
+
+                .message {
+                    margin-bottom: 1rem;
+                    max-width: 70%;
+                    position: relative;
+
+                    .message-inner {
+                        padding: 0.8rem 1rem;
+                        border-radius: 12px;
+                        position: relative;
+                        word-wrap: break-word;
+
+                        .message-time {
+                            font-size: 0.7rem;
+                            color: #A0AEC0;
+                            margin-top: 0.3rem;
+                            text-align: right;
+                        }
+                    }
+
+                    &.received .message-inner {
+                        background: white;
+                        border-top-left-radius: 0;
+                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+                    }
+
+                    &.sent {
+                        margin-left: auto;
+
+                        .message-inner {
+                            background: linear-gradient(135deg, $primary, $primary-dark);
+                            color: white;
+                            border-top-right-radius: 0;
+                        }
+
+                        .message-time {
+                            color: rgba(255, 255, 255, 0.7);
+                        }
+                    }
+                }
+            
+                .message-username {
+                    font-weight: 600;
+                    margin-bottom: 0.3rem;
+                    font-size: 0.9rem;
+                }
+            }
+        
+            .chat-input {
+                padding: 1rem;
+                background: white;
+                border-top: 1px solid $gray;
+
+                .input-group {
+                    display: flex;
+
+                    .message-input {
+                        flex: 1;
+                        padding: 0.8rem 1rem;
+                        border: 1px solid $gray;
+                        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);
+                        }
+                    }
+                    
+                    .send-btn {
+                        margin-left: 1rem;
+                        width: 50px;
+                        height: 50px;
+                        border-radius: 50%;
+                        background: linear-gradient(135deg, $primary, $primary-dark);
+                        color: white;
+                        border: none;
+                        cursor: pointer;
+                        transition: all 0.3s ease;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        &:hover {
+                            transform: translateY(-2px);
+                            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                        }
+                    }
+                } 
+            }
+        }
+    }
+}

frontend/src/css/common/_animations.scss

@@ -0,0 +1,15 @@
+@keyframes fadeIn {
+    from { 
+        opacity: 0; 
+        transform: translateY(10px); 
+    }
+    
+    to { 
+        opacity: 1; 
+        transform: translateY(0); 
+    }
+}
+  
+.fade-in {
+    animation: fadeIn 0.3s ease forwards;
+}

frontend/src/css/common/_colors.scss

@@ -0,0 +1,8 @@
+$primary: #6C63FF;
+$primary-dark: #564FD9;
+$secondary: #FF6584;
+$dark: #2D3748;
+$light: #F7FAFC;
+$gray: #E2E8F0;
+$success: #48BB78;
+$danger: #F56565;

frontend/src/css/common/_components.scss

@@ -0,0 +1,92 @@
+@use "colors" as *;
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+
+    label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: $dark;
+    }
+}
+
+.form-control {
+    width: 100%;
+    padding: 0.8rem 1rem;
+    border: 1px solid $gray;
+    border-radius: 6px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+
+    &:focus {
+        outline: none;
+        border-color: $primary;
+        box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
+    }
+}
+
+.btn {
+    display: inline-block;
+    background: linear-gradient(135deg, $primary, $primary-dark);
+    color: white;
+    border: none;
+    padding: 0.8rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+    text-decoration: none;
+
+    &:hover {
+        background: linear-gradient(135deg, $primary-dark, $primary);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.mt-3 {
+    margin-top: 1rem;
+}
+
+.alert {
+    padding: 0.8rem 1rem;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+
+    &.alert-success {
+        background-color: #C6F6D5;
+        color: #22543D;
+    }
+    
+    &.alert-danger {
+        background-color: #FED7D7;
+        color: #742A2A;
+    }
+}
+
+.link {
+    color: $primary; 
+    font-weight: 600;
+}
+
+button, input {
+    font: inherit;
+}

frontend/src/css/lib/fonts/montserrat.scss

@@ -0,0 +1,199 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/webfonts/montserrat/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

frontend/src/css/style.scss

@@ -0,0 +1,21 @@
+@use "auth";
+@use "chat";
+@use "common/animations";
+@use "common/components";
+@use "common/colors" as *;
+
+@use "lib/fonts/montserrat";
+@use "lib/font-awesome.min.css";
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Montserrat', sans-serif;
+    background-color: #f8f9fa;
+    color: $dark;
+    line-height: 1.6;
+}

frontend/src/links.ts

@@ -0,0 +1,11 @@
+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")!;
+
+login.addEventListener("click", showLogin);
+register.addEventListener("click", showRegister);
+chat.addEventListener("click", loadChat);
+logoutLink.addEventListener("click", logout);

frontend/src/main.ts

@@ -0,0 +1,118 @@
+import './css/style.scss';
+import { showLogin, getAuthHeaders } from './auth';
+import { API_BASE_URL } from './config';
+import type { Message, Messages } from './types';
+import "./links";
+
+
+// Функция для форматирования времени
+function formatTime(dateString: string) {
+    const date = new Date(dateString);
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
+    const hoursString = hours < 10 ? '0' + hours : hours;
+    const minutesString = minutes < 10 ? '0' + minutes : minutes;
+    return hoursString + ':' + minutesString;
+}
+
+// Добавление нового сообщения в чат
+export function addMessage(message: Message, isAuthor: boolean) {
+    const messagesContainer = document.querySelector('.chat-messages') as HTMLElement;
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${isAuthor ? 'sent' : 'received'}`;
+    messageDiv.dataset.id = `${message.id}`;
+
+    const messageInner = document.createElement('div');
+    messageInner.className = 'message-inner';
+
+    if (!isAuthor) {
+        const usernameDiv = document.createElement('div');
+        usernameDiv.className = 'message-username';
+        usernameDiv.textContent = message.username;
+        messageInner.appendChild(usernameDiv);
+    }
+
+    const contentDiv = document.createElement('div');
+    contentDiv.textContent = message.content;
+    messageInner.appendChild(contentDiv);
+
+    const timeDiv = document.createElement('div');
+    timeDiv.className = 'message-time';
+    timeDiv.textContent = formatTime(message.timestamp);
+
+    if (isAuthor && message.is_read) {
+        const checkIcon = document.createElement('i');
+        checkIcon.className = 'fas fa-check-double';
+        checkIcon.style = 'margin-left: 5px; color: #48BB78;';
+        timeDiv.appendChild(checkIcon);
+    }
+
+    messageInner.appendChild(timeDiv);
+    messageDiv.appendChild(messageInner);
+    messagesContainer.appendChild(messageDiv);
+
+    // Прокрутка к новому сообщению
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+// Загрузка сообщений
+export function loadMessages() {
+    fetch(`${API_BASE_URL}/get_messages`, {
+        headers: getAuthHeaders()
+    })
+        .then(response => response.json())
+        .then((data: Messages) => {
+            if (data.messages && data.messages.length > 0) {
+                const messagesContainer = document.querySelector('.chat-messages') as HTMLElement;
+
+                const lastMessage = messagesContainer.lastElementChild as HTMLElement
+                let lastMessageId: number = 0
+                if (lastMessage) {
+                    lastMessageId = Number(lastMessage.dataset.id)
+                }
+                
+                // Добавляем только новые сообщения
+                data.messages.forEach(msg => {
+                    if (msg.id > lastMessageId) {
+                        addMessage(msg, msg.is_author);
+                    }
+                });
+            }
+        });
+}
+
+// Отправка сообщения
+export function sendMessage() {
+    const input = document.querySelector('.message-input') as HTMLInputElement;
+    const message = input.value.trim();
+
+    if (message) {
+        fetch(`${API_BASE_URL}/send_message`, {
+            method: 'POST',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({ content: message })
+        }).then(response => {
+            if (response.ok) {
+                input.value = '';
+            }
+        });
+    }
+}
+
+// Инициализация при загрузке страницы
+document.addEventListener('DOMContentLoaded', function() {
+    // Настройка отправки сообщений
+    document.getElementById('message-form')!.addEventListener('submit', (e) => {
+        e.preventDefault();
+        sendMessage();
+    });
+
+    // Проверка новых сообщений каждые 2 секунды (only when chat is visible)
+    setInterval(() => {
+        if (document.getElementById('chat-interface')!.style.display !== 'none') {
+            loadMessages();
+        }
+    }, 2000);
+
+    showLogin();
+}); 

frontend/src/types.ts

@@ -0,0 +1,47 @@
+export type Headers = {[x: string]: string}
+
+export interface ErrorResponse {
+    message: string;
+}
+
+
+// App types
+export interface Message {
+    id: number;
+    username: string;
+    content: string;
+    is_read: boolean;
+    is_author: boolean;
+    timestamp: string;
+}
+
+export interface Messages {
+    messages: Message[];
+}
+
+export interface User {
+    username: string;
+}
+
+
+// ----------
+// API models
+// ----------
+
+// Requests
+export interface LoginRequest {
+    username: string;
+    password: string;
+}
+
+export interface RegisterRequest {
+    username: string;
+    password: string;
+    confirm_password: string;
+}
+
+// Responses
+export interface LoginResponse {
+    username: string;
+    token: string;
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/vite.config.ts

@@ -0,0 +1,53 @@
+import { defineConfig } from 'vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import autoprefixer from 'autoprefixer'
+
+export default defineConfig({
+    plugins: [
+        createHtmlPlugin({
+            minify: {
+                collapseWhitespace: true,
+                removeComments: true,
+                removeRedundantAttributes: true,
+                removeScriptTypeAttributes: true,
+                removeStyleLinkTypeAttributes: true,
+                useShortDoctype: true,
+                minifyCSS: true,
+                minifyJS: true
+            }
+        })
+    ],
+    server: {
+        host: '0.0.0.0',
+        port: 8301,
+        strictPort: true,
+        proxy: {
+            "/api": {
+                target: "http://127.0.0.1:8300/",
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/api/, "")
+            }
+        },
+    },
+    appType: "mpa",
+    css: {
+        postcss: {
+            plugins: [autoprefixer()],
+        },
+    },
+    build: {
+        minify: 'terser',
+        terserOptions: {
+            compress: {
+                drop_console: true,
+                drop_debugger: true
+            }
+        },
+        rollupOptions: {
+            external: [
+                /^webfonts/
+            ]
+        },
+        cssMinify: true
+    }
+})

package.json

@@ -0,0 +1,30 @@
+{
+    "name": "pixelchat",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "backend:run": "cd backend && ../.venv/bin/fastapi dev --port 8300 main.py",
+        "backend:dependencies": "python3 -m venv .venv && ./.venv/bin/pip3 install -r backend/requirements.txt",
+        "backend:reinstall": "rm -rf .venv && npm run backend:dependencies",
+
+        "frontend:dev": "vite frontend",
+        "frontend:build": "tsc --project frontend && vite build frontend",
+        "frontend:preview": "vite preview frontend",
+        "frontend:dependencies": "npm install",
+        
+        "dev": "concurrently 'npm run frontend:dev' 'npm run backend:run'",
+        "build": "npm run frontend:build",
+        "install": "npm run backend:dependencies"
+    },
+    "devDependencies": {
+        "concurrently": "^9.2.0",
+        "sass-embedded": "^1.90.0",
+        "postcss": "^8.5.6",
+        "typescript": "~5.8.3",
+        "vite": "^7.1.2",
+        "vite-plugin-html": "^3.2.2",
+        "terser": "^5.43.1",
+        "autoprefixer": "^10.4.21"
+    }
+}