0150aba4f5
- Unify API: lib/api.ts uses /api/v1, inbox uses /api/inbox (rewrites) - Remove localhost refs: openapi, inbox page - Add rewrites: /api/inbox|tmc -> inbox-server, /api/v1 -> FastAPI - Add stub routes: knowledge/insights, recommendations, search, log-error - Transfer from PAPA: prompts (inspection, tmc), scripts, supabase, data/tmc-requests - Fix inbox-server: ORDER BY created_at, package.json - Remove redundant app/api/inbox/files route (rewrites handle it) - knowledge/ in gitignore (large PDFs) Co-authored-by: Cursor <cursoragent@cursor.com>
665 lines
24 KiB
HTML
665 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Демонстрация проекта: Система контроля лётной годности</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #333;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.header {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
text-align: center;
|
||
}
|
||
|
||
.header h1 {
|
||
color: #667eea;
|
||
font-size: 2.5em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.header p {
|
||
color: #666;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.demo-section {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.demo-section h2 {
|
||
color: #667eea;
|
||
font-size: 2em;
|
||
margin-bottom: 20px;
|
||
border-bottom: 3px solid #667eea;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.demo-section h3 {
|
||
color: #764ba2;
|
||
font-size: 1.5em;
|
||
margin-top: 25px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 25px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.feature-card h4 {
|
||
font-size: 1.3em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.feature-card ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.feature-card li {
|
||
padding: 5px 0;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.feature-card li:before {
|
||
content: "✓";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #4ade80;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tech-stack {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.tech-badge {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 25px;
|
||
font-weight: bold;
|
||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.screenshot-placeholder {
|
||
background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
|
||
border: 2px dashed #999;
|
||
border-radius: 10px;
|
||
padding: 60px;
|
||
text-align: center;
|
||
color: #666;
|
||
margin: 20px 0;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 15px 30px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.btn-success {
|
||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.stat-card .number {
|
||
font-size: 3em;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-card .label {
|
||
font-size: 1.1em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.code-block {
|
||
background: #2d2d2d;
|
||
color: #f8f8f2;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
overflow-x: auto;
|
||
margin: 15px 0;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.highlight {
|
||
background: #ffd700;
|
||
padding: 2px 5px;
|
||
border-radius: 3px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 30px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-bottom: 30px;
|
||
}
|
||
|
||
.timeline-item:before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -25px;
|
||
top: 5px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: #667eea;
|
||
border: 3px solid white;
|
||
box-shadow: 0 0 0 3px #667eea;
|
||
}
|
||
|
||
.timeline-item:not(:last-child):after {
|
||
content: '';
|
||
position: absolute;
|
||
left: -19px;
|
||
top: 17px;
|
||
width: 2px;
|
||
height: calc(100% - 5px);
|
||
background: #667eea;
|
||
}
|
||
|
||
.timeline-item h4 {
|
||
color: #667eea;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.header h1 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
.feature-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.button-group {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>✈️ Система контроля лётной годности (КЛГ)</h1>
|
||
<p>Комплексное решение для управления воздушными судами и документацией</p>
|
||
<p style="margin-top: 10px; font-size: 0.9em; color: #999;">Заказчик: АО «REFLY» | Вариант: В составе АСУ ТК</p>
|
||
</div>
|
||
|
||
<!-- Быстрый старт -->
|
||
<div class="demo-section">
|
||
<h2>🚀 Быстрый старт</h2>
|
||
<div class="button-group">
|
||
<a href="http://localhost:8080" target="_blank" class="btn">Открыть приложение</a>
|
||
<a href="http://localhost:8000/docs" target="_blank" class="btn btn-secondary">API Документация</a>
|
||
<a href="http://localhost:8000/redoc" target="_blank" class="btn btn-success">ReDoc</a>
|
||
</div>
|
||
<div class="code-block">
|
||
# Запуск проекта
|
||
docker compose up --build
|
||
|
||
# После запуска:
|
||
# Frontend: http://localhost:8080
|
||
# Backend API: http://localhost:8000
|
||
# API Docs: http://localhost:8000/docs
|
||
</div>
|
||
|
||
<h3 style="margin-top: 30px;">📺 Демонстрация функций</h3>
|
||
<div class="feature-grid" style="margin-top: 20px;">
|
||
<div class="feature-card">
|
||
<h4>1. Дашборд</h4>
|
||
<p style="margin-top: 10px;">Откройте главную страницу и покажите:</p>
|
||
<ul>
|
||
<li>Небесный фон с анимацией</li>
|
||
<li>KPI карточки со статистикой</li>
|
||
<li>Поиск по ВС и организациям</li>
|
||
<li>Кнопки "Загрузка данных" и "Документы"</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>2. Воздушные суда</h4>
|
||
<p style="margin-top: 10px;">Перейдите в раздел ВС:</p>
|
||
<ul>
|
||
<li>Список самолетов и вертолетов</li>
|
||
<li>Статусы (в эксплуатации, на ТО)</li>
|
||
<li>Детальная информация</li>
|
||
<li>Создание нового ВС</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>3. Организации</h4>
|
||
<p style="margin-top: 10px;">Покажите управление:</p>
|
||
<ul>
|
||
<li>Операторы, MRO, органы власти</li>
|
||
<li>Создание организации</li>
|
||
<li>Редактирование и удаление</li>
|
||
<li>Фильтрация и поиск</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>4. Загрузка данных</h4>
|
||
<p style="margin-top: 10px;">Демонстрация загрузки:</p>
|
||
<ul>
|
||
<li>Выбор воздушного судна</li>
|
||
<li>Выбор типа файла</li>
|
||
<li>Загрузка файла</li>
|
||
<li>Просмотр загруженных файлов</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Основные функции -->
|
||
<div class="demo-section">
|
||
<h2>📋 Основные функции системы</h2>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4>📊 Дашборд</h4>
|
||
<ul>
|
||
<li>KPI и статистика</li>
|
||
<li>Поиск по ВС и организациям</li>
|
||
<li>Загрузка данных</li>
|
||
<li>Быстрый доступ к документам</li>
|
||
<li>Небесный дизайн с анимацией</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>✈️ Воздушные суда</h4>
|
||
<ul>
|
||
<li>Управление ВС</li>
|
||
<li>Самолеты и вертолеты</li>
|
||
<li>Статусы и налет</li>
|
||
<li>Детальная информация</li>
|
||
<li>Создание и редактирование</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>🏢 Организации</h4>
|
||
<ul>
|
||
<li>Операторы (авиакомпании)</li>
|
||
<li>MRO (техобслуживание)</li>
|
||
<li>Органы власти</li>
|
||
<li>CRUD операции</li>
|
||
<li>Фильтрация и поиск</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>📝 Заявки на сертификацию</h4>
|
||
<ul>
|
||
<li>Workflow заявок</li>
|
||
<li>Статусы и замечания</li>
|
||
<li>Автоматические уведомления</li>
|
||
<li>Таймеры и сроки</li>
|
||
<li>История изменений</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>👥 Пользователи</h4>
|
||
<ul>
|
||
<li>Управление пользователями</li>
|
||
<li>Роли и права доступа</li>
|
||
<li>Фильтрация по организации</li>
|
||
<li>Фильтрация по роли</li>
|
||
<li>Интеграция с АСУ ТК-ИБ</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h4>📚 Нормативные документы</h4>
|
||
<ul>
|
||
<li>ИКАО документы</li>
|
||
<li>МАК документы</li>
|
||
<li>EASA документы</li>
|
||
<li>Росавиация документы</li>
|
||
<li>Ссылки на источники</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Статистика -->
|
||
<div class="demo-section">
|
||
<h2>📈 Статистика проекта</h2>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="number">6+</div>
|
||
<div class="label">Основных разделов</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="number">20+</div>
|
||
<div class="label">API Endpoints</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="number">10+</div>
|
||
<div class="label">Типов ВС</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="number">100%</div>
|
||
<div class="label">Соответствие ТЗ</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Технологический стек -->
|
||
<div class="demo-section">
|
||
<h2>🛠️ Технологический стек</h2>
|
||
|
||
<h3>Backend</h3>
|
||
<div class="tech-stack">
|
||
<span class="tech-badge">FastAPI</span>
|
||
<span class="tech-badge">SQLAlchemy</span>
|
||
<span class="tech-badge">PostgreSQL</span>
|
||
<span class="tech-badge">Pydantic</span>
|
||
<span class="tech-badge">APScheduler</span>
|
||
<span class="tech-badge">Python 3.11+</span>
|
||
</div>
|
||
|
||
<h3>Frontend</h3>
|
||
<div class="tech-stack">
|
||
<span class="tech-badge">React 18</span>
|
||
<span class="tech-badge">TypeScript</span>
|
||
<span class="tech-badge">Ant Design</span>
|
||
<span class="tech-badge">Vite</span>
|
||
<span class="tech-badge">React Router</span>
|
||
</div>
|
||
|
||
<h3>Инфраструктура</h3>
|
||
<div class="tech-stack">
|
||
<span class="tech-badge">Docker</span>
|
||
<span class="tech-badge">Docker Compose</span>
|
||
<span class="tech-badge">Nginx</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Дизайн -->
|
||
<div class="demo-section">
|
||
<h2>🎨 Дизайн и UI/UX</h2>
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4>Небесный фон</h4>
|
||
<ul>
|
||
<li>Градиент от голубого к белому</li>
|
||
<li>Анимация облаков</li>
|
||
<li>Единый стиль на всех страницах</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Белые карточки</h4>
|
||
<ul>
|
||
<li>Отличная читаемость</li>
|
||
<li>Тени для глубины</li>
|
||
<li>Современный дизайн</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Интерактивные кнопки</h4>
|
||
<ul>
|
||
<li>Зеленые кнопки для основных действий</li>
|
||
<li>Глянцевые кнопки для дополнительных</li>
|
||
<li>Плавные анимации</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Адаптивность</h4>
|
||
<ul>
|
||
<li>Работает на всех устройствах</li>
|
||
<li>Горизонтальная прокрутка таблиц</li>
|
||
<li>Оптимизация для мобильных</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Демонстрационный сценарий -->
|
||
<div class="demo-section">
|
||
<h2>🎬 Демонстрационный сценарий</h2>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<h4>Шаг 1: Главная страница (Дашборд)</h4>
|
||
<p>Покажите небесный фон, KPI карточки, поиск и основные кнопки</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 2: Воздушные суда</h4>
|
||
<p>Продемонстрируйте список ВС, фильтрацию, детальную информацию</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 3: Организации</h4>
|
||
<p>Покажите создание организации, список разных типов организаций</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 4: Загрузка данных</h4>
|
||
<p>Продемонстрируйте загрузку файлов для воздушных судов</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 5: Нормативные документы</h4>
|
||
<p>Покажите документы от ИКАО, МАК, EASA, Росавиации</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 6: API Документация</h4>
|
||
<p>Откройте Swagger UI и выполните несколько запросов</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ключевые особенности -->
|
||
<div class="demo-section">
|
||
<h2>⭐ Ключевые особенности</h2>
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4>✅ Реализовано</h4>
|
||
<ul>
|
||
<li>Управление ВС и организациями</li>
|
||
<li>Workflow заявок на сертификацию</li>
|
||
<li>Загрузка и управление файлами</li>
|
||
<li>Система уведомлений</li>
|
||
<li>Дашборд с KPI</li>
|
||
<li>Нормативные документы</li>
|
||
<li>Ролевая модель</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>🔮 В планах</h4>
|
||
<ul>
|
||
<li>Документ лётной годности (ДЛГ)</li>
|
||
<li>Контрольные данные (КД)</li>
|
||
<li>Инспекции</li>
|
||
<li>Контрольные карты ТО</li>
|
||
<li>Отслеживание компонентов LLP/HT</li>
|
||
<li>Отчеты по ремонтам</li>
|
||
<li>Отчеты по дефектам</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API Endpoints -->
|
||
<div class="demo-section">
|
||
<h2>🔌 Основные API Endpoints</h2>
|
||
<div class="code-block">
|
||
# Организации
|
||
GET /api/v1/organizations
|
||
POST /api/v1/organizations
|
||
GET /api/v1/organizations/{id}
|
||
PATCH /api/v1/organizations/{id}
|
||
DELETE /api/v1/organizations/{id}
|
||
|
||
# Воздушные суда
|
||
GET /api/v1/aircraft
|
||
POST /api/v1/aircraft
|
||
GET /api/v1/aircraft/{id}
|
||
GET /api/v1/aircraft/types
|
||
|
||
# Заявки на сертификацию
|
||
GET /api/v1/cert-applications
|
||
POST /api/v1/cert-applications
|
||
POST /api/v1/cert-applications/{id}/submit
|
||
POST /api/v1/cert-applications/{id}/approve
|
||
|
||
# Вложения
|
||
POST /api/v1/attachments/{owner_kind}/{owner_id}
|
||
GET /api/v1/attachments/{owner_kind}/{owner_id}
|
||
|
||
# Пользователи
|
||
GET /api/v1/users
|
||
GET /api/v1/users/{id}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Контакты -->
|
||
<div class="demo-section">
|
||
<h2>📞 Контакты</h2>
|
||
<p><strong>Заказчик:</strong> АО «REFLY»</p>
|
||
<p><strong>Вариант развертывания:</strong> В составе АСУ ТК</p>
|
||
<p><strong>Статус:</strong> Прототип (MVP)</p>
|
||
</div>
|
||
|
||
<!-- Футер -->
|
||
<div class="header" style="margin-top: 30px;">
|
||
<p style="color: #999; font-size: 0.9em;">
|
||
Проект разработан согласно техническому заданию<br>
|
||
Версия: 1.0 | 2024
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Плавная прокрутка
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
// Анимация появления элементов при прокрутке
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.demo-section').forEach(section => {
|
||
section.style.opacity = '0';
|
||
section.style.transform = 'translateY(20px)';
|
||
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||
observer.observe(section);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|