Matvey/site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update admin theme/layout and refresh README details.

Browse Source 
Align the project baseline with the latest admin interface styling and layout structure while documenting setup and usage updates in README.
This commit is contained in:
vlad
2026-07-14 17:12:28 +03:00
commit 86cc3fa541
278 changed files with 19416 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/main/css/style.css
+1094
View File
File diff suppressed because it is too large Load Diff
apps/web/main/css/tokens.css
+112
View File
@@ -0,0 +1,112 @@
/* Compton design tokens — single source of truth */
:root {
/* Brand */
--primary: #48816d;
--primary-dark: #3a6b58;
--primary-light: #5a9a82;
--primary-accent: #5a9a82;
--primary-tint: #e8f2ef;
--primary-color: var(--primary);
/* Light surfaces */
--bg: #f6f6f4;
--foreground: #1a1e1c;
--muted: #4a5a52;
--marquee-bg: #ebebe5;
--surface: #ffffff;
--border-light: #e8e8e2;
--card: #ffffff;
--card-border: #e8e8e2;
--footer-bg: #1a1e1c;
--bg-page: var(--bg);
--text: var(--foreground);
/* Typography */
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", monospace;
--zootech-font: var(--font-sans);
/* Radius */
--radius-card: 18px;
--radius-btn: 40px;
--radius-icon: 16px;
--zt-radius-lg: 16px;
/* Effects */
--shadow-soft: 0 16px 48px rgba(26, 30, 28, 0.08), 0 0 0 1px rgba(26, 30, 28, 0.04);
/* Semantic */
--color-error: #b42318;
--color-success: #0f766e;
--color-danger: #cd3838;
--color-danger-hover: #e94b4b;
--color-warning: #d4a72c;
/* Admin (light — matches site) */
--admin-bg: var(--bg);
--admin-surface: var(--surface);
--admin-surface-2: var(--marquee-bg);
--admin-stroke: var(--border-light);
--admin-soft: var(--muted);
--admin-text: var(--foreground);
--admin-primary: var(--primary);
--admin-primary-hover: var(--primary-tint);
--admin-primary-selected: rgba(72, 129, 109, 0.16);
--admin-primary-option: rgba(72, 129, 109, 0.1);
--admin-btn-bg: var(--surface);
--admin-btn-border: var(--border-light);
--admin-btn-text: var(--foreground);
--admin-success: var(--color-success);
--admin-tag-ok-border: rgba(72, 129, 109, 0.35);
--admin-sider-bg: var(--surface);
--admin-table-header: var(--marquee-bg);
--admin-card-radius: 20px;
/* WESP admin aliases */
--wesp-admin-bg: var(--admin-bg);
--wesp-admin-surface: var(--admin-surface);
--wesp-admin-surface-2: var(--admin-surface-2);
--wesp-admin-stroke: var(--admin-stroke);
--wesp-admin-soft: var(--admin-soft);
--wesp-admin-text: var(--admin-text);
--wesp-admin-primary: var(--admin-primary);
}
html[data-theme="organic"] {
color-scheme: light;
}
html.admin-route,
html.admin-route body {
background: var(--admin-bg);
}
/* Admin dark theme — isolated from public site */
html.admin-route[data-admin-theme="dark"] {
color-scheme: dark;
--admin-deep: #0b0a10;
--admin-bg: #1f2229;
--admin-surface: #0b0a10;
--admin-surface-2: #15141c;
--admin-stroke: rgba(186, 184, 208, 0.14);
--admin-soft: #a8adbb;
--admin-text: #ececf1;
--admin-primary: #5a9a82;
--admin-primary-hover: rgba(90, 154, 130, 0.2);
--admin-primary-selected: rgba(90, 154, 130, 0.32);
--admin-primary-option: rgba(90, 154, 130, 0.16);
--admin-btn-bg: #15141c;
--admin-btn-border: rgba(186, 184, 208, 0.16);
--admin-btn-text: #ececf1;
--admin-success: #6bc4a8;
--admin-tag-ok-border: rgba(90, 154, 130, 0.5);
--admin-sider-bg: #0b0a10;
--admin-table-header: #1a1924;
--admin-card-radius: 20px;
--surface: #0b0a10;
--foreground: #ececf1;
--muted: #a8adbb;
--border-light: rgba(186, 184, 208, 0.14);
--marquee-bg: #1a1924;
--primary-tint: rgba(90, 154, 130, 0.16);
}
apps/web/main/fonts/JetBrainsMono.ttf
BIN
View File
Binary file not shown.
apps/web/main/fonts/Pacifico-Regular.ttf
BIN
View File
Binary file not shown.
apps/web/main/fonts/oktyabrina-script.ttf
BIN
View File
Binary file not shown.
apps/web/main/gif/16-24-58.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

apps/web/main/gif/рецепты.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

apps/web/main/gif/учет потребления.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 786 KiB

apps/web/main/icons/.gitkeep
View File
apps/web/main/img/control.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 293 KiB

apps/web/main/img/hero section.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 471 KiB

apps/web/main/img/letter K.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

apps/web/main/img/load.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 484 KiB

apps/web/main/img/logo3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

apps/web/main/img/wifi.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 KiB

apps/web/main/img/zoo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

apps/web/main/img/Комптон всегда под рукой на белом фоне.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

apps/web/main/js/main.js
+111
View File
@@ -0,0 +1,111 @@
(function() {
'use strict';
// ===== SCRAMBLE HERO =====
const heroTitleEl = document.getElementById('heroTitle');
if (heroTitleEl) {
const originalText = heroTitleEl.textContent.trim() || 'Технологии будущего на вашей ферме';
const chars = '!@#$%^&*()_+{}[]|;:,.<>?';
let iteration = 0;
let isScrambling = true;
let frameId = null;
const maxIterations = 30;
function scramble() {
if (!isScrambling) return;
const result = originalText
.split('')
.map((char, index) => {
if (index < iteration) return originalText[index];
if (char === ' ') return ' ';
return chars[Math.floor(Math.random() * chars.length)];
})
.join('');
heroTitleEl.textContent = result;
iteration += 1;
if (iteration <= maxIterations) {
frameId = requestAnimationFrame(scramble);
} else {
heroTitleEl.textContent = originalText;
isScrambling = false;
if (frameId) {
cancelAnimationFrame(frameId);
frameId = null;
}
}
}
setTimeout(() => {
scramble();
}, 300);
}
// ===== FADE-UP =====
const fadeElements = document.querySelectorAll('.fade-up');
if (fadeElements.length > 0 && 'IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -30px 0px' });
fadeElements.forEach(el => observer.observe(el));
} else {
fadeElements.forEach(el => el.classList.add('visible'));
}
// ===== EXPAND BLOCK =====
const expandContent = document.getElementById('expandContent');
if (expandContent && 'IntersectionObserver' in window) {
let isExpanded = false;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (!isExpanded) {
expandContent.classList.add('expanded');
isExpanded = true;
}
} else {
if (isExpanded) {
expandContent.classList.remove('expanded');
isExpanded = false;
}
}
});
}, { threshold: 0.25, rootMargin: '0px 0px -30px 0px' });
observer.observe(expandContent);
} else if (expandContent) {
expandContent.classList.add('expanded');
}
// ===== MARQUEE =====
const marqueeTrack = document.getElementById('marqueeTrack');
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReducedMotion.matches && marqueeTrack) {
marqueeTrack.style.animation = 'none';
marqueeTrack.style.transform = 'translateX(0)';
}
prefersReducedMotion.addEventListener('change', (e) => {
if (marqueeTrack) {
if (e.matches) {
marqueeTrack.style.animation = 'none';
marqueeTrack.style.transform = 'translateX(0)';
} else {
marqueeTrack.style.animation = 'marqueeScroll 30s linear infinite';
marqueeTrack.style.transform = '';
}
}
});
// ===== HERO VIDEO =====
const heroVideo = document.querySelector('.hero-video');
if (heroVideo) {
heroVideo.play().catch(() => {
document.addEventListener('click', () => {
heroVideo.play();
}, { once: true });
});
}
})();
apps/web/main/main.html
View File
apps/web/main/templates/index.html
+283
View File
@@ -0,0 +1,283 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Комптон</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/main/css/style.css" />
</head>
<body>
<!-- ====== НАВБАР ====== -->
<header class="navbar" role="navigation">
<div class="container">
<a href="#" class="navbar-logo">
<img src="/main/img/logo3.png" alt="FeedControl" />
</a>
<input type="checkbox" id="burgerToggle" class="burger-checkbox" />
<label for="burgerToggle" class="burger-icon" aria-label="Открыть меню">
<span></span><span></span><span></span>
</label>
<ul class="navbar-menu">
<li><a href="#solutions">Система</a></li>
<li><a href="#integrations">Технологии</a></li>
<li><a href="#security">Безопасность</a></li>
<li class="navbar-auth">
<a href="/login" class="btn btn-primary btn-sm">Вход</a>
<a href="/register" class="btn btn-primary btn-sm">Регистрация</a>
</li>
</ul>
</div>
</header>
<!-- ====== HERO С ВИДЕО ====== -->
<section class="hero section-padding" id="hero">
<video class="hero-video" autoplay muted loop playsinline>
<source src="/main/video/Тестовое видео.mp4" type="video/mp4" />
Ваш браузер не поддерживает видео.
</video>
<div class="container">
<h1 class="scramble-target" id="heroTitle">Технологии будущего на вашей ферме</h1>
<p class="subtitle">
Интеллектуальная система контроля кормления КРС на основе искусственного интеллекта.
Снижаем затраты на корма, повышаем продуктивность стада и даём полный контроль над каждым этапом.
</p>
<div class="btn-group">
<a href="#cta" class="btn btn-primary">Запросить демо</a>
<a href="#solutions" class="btn btn-outline">Узнать больше</a>
</div>
</div>
</section>
<!-- ====== БЛОК: КАК ЭТО УСТРОЕНО ====== -->
<section class="steps-section section-padding" id="how-it-works">
<div class="container">
<div class="section-intro">
<span class="text-mono section-label">Процесс автоматизации</span>
<h2>Как устроена наша система</h2>
</div>
<div class="steps-grid">
<!-- Шаг 1 с изображением zoo.png -->
<div class="step-card">
<div class="step-image-wrapper">
<img src="/main/img/zoo.png" alt="План рационов" />
</div>
<h3>План рационов</h3>
<p>Зоотехник составляет и корректирует рацион для каждой группы КРС в удобной программе на офисном ПК, ноутбуке или смартфоне.</p>
</div>
<!-- Шаг 2 с изображением wifi.png -->
<div class="step-card">
<div class="step-image-wrapper">
<img src="/main/img/wifi.png" alt="Синхронизация данных" />
</div>
<h3>Синхронизация данных</h3>
<p>Созданное задание мгновенно и без проводов передается на весовой терминал кормосмесителя.</p>
</div>
<!-- Шаг 3 с изображением load.png -->
<div class="step-card">
<div class="step-image-wrapper">
<img src="/main/img/load.png" alt="Точная загрузка" />
</div>
<h3>Точная загрузка</h3>
<p>Тракторист на дисплее видит подсказки и точный вес каждого компонента на лету, что исключает ошибки перегруза.</p>
</div>
<!-- Шаг 4 с изображением control.png -->
<div class="step-card">
<div class="step-image-wrapper">
<img src="/main/img/control.png" alt="Контроль руководителя" />
</div>
<h3>Контроль руководителя</h3>
<p>Собственник или управляющий получает автоматический отчет о всех отклонениях и реальном расходе прямо на смартфон.</p>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- ====== БЛОК: ОТ ФОРМУЛЫ ДО КОРМУШКИ (ТОЛЬКО ЗАГОЛОВОК + СЛОГАН) ====== -->
<!-- ============================================================ -->
<section class="funnel-section" id="funnel">
<div class="container">
<!-- Заголовок (без подзаголовка и шагов) -->
<div class="funnel-header">
<h2>От формулы до кормушки</h2>
</div>
<!-- Финальный слоган -->
<div class="funnel-final-slogan">
<p>«Каждый килограмм корма — под контролем.<br>Каждая копейка — на счету. Каждая минута — сэкономлена»</p>
</div>
</div>
</section>
<!-- ====== БЛОК С ЗАГОЛОВКОМ, ИЗОБРАЖЕНИЕМ И ВЫЕЗЖАЮЩИМ ТЕКСТОМ ====== -->
<section class="expand-block section-padding" id="about">
<div class="container">
<h2 class="section-title">Работа на любом устройстве</h2>
<p class="section-subtitle">
Управляйте системой кормления с телефона, планшета или компьютера — интерфейс адаптируется под любой экран.
</p>
<div class="expand-content" id="expandContent">
<div class="side-panel left">
<p><strong>Всегда на связи с фермой</strong> Абсолютный контроль рационов и остатков в любом месте, в любое время и с любого гаджета.</p>
</div>
<div class="image-wrapper">
<img src="/main/img/Комптон всегда под рукой на белом фоне.jpg" alt="Комптон всегда под рукой" />
</div>
<div class="side-panel right">
<p><strong>Прозрачность и контроль</strong> Вы всегда видите, сколько корма съедено, как меняется продуктивность и где можно сэкономить без потери качества.</p>
</div>
</div>
</div>
</section>
<!-- ====== КАРТОЧКИ РЕШЕНИЙ ====== -->
<section class="section-padding" id="solutions">
<div class="container">
<h2 class="section-intro section-intro--mb">Начни кормить по новому!</h2>
<p class="section-subtitle-centered">
Всё, что нужно для точного, экономного и эффективного кормления КРС.
</p>
<div class="cards-grid">
<div class="card fade-up card-with-gif">
<div class="card-gif-wrapper">
<img src="/main/gif/16-24-58.gif" alt="Индивидуальный рацион" loading="lazy" />
</div>
<div class="card-body">
<div class="card-icon">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
</div>
<h3>Автоматический расчет рационов</h3>
<p>Программа сама подбирает оптимальный состав корма для каждой группы животных с учётом возраста, веса и продуктивности.</p>
</div>
</div>
<div class="card fade-up card-with-gif">
<div class="card-gif-wrapper">
<img src="/main/gif/рецепты.gif" alt="Удобное редактирование рационов" loading="lazy" />
</div>
<div class="card-body">
<div class="card-icon">
<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
</div>
<h3>Удобное редактирование рационов</h3>
<p>Редактируйте рацион в один клик: меняйте рецепты местами, добавляйте новые компоненты и мгновенно корректируйте сухое вещество.</p>
</div>
</div>
<div class="card fade-up card-with-gif">
<div class="card-gif-wrapper">
<img src="/main/gif/учет потребления.gif" alt="Прогноз продуктивности" loading="lazy" />
</div>
<div class="card-body">
<div class="card-icon">
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<h3>Учет кормов</h3>
<p>Автоматический учет остатков: программа точно рассчитывает остатки кормов на складе и прогнозирует дату следующей закупки на основе текущего расхода, защищая от внезапного дефицита.</p>
</div>
</div>
<div class="card fade-up card-with-gif">
<div class="card-gif-wrapper">
<img src="/main/gif/16-24-58.gif" alt="Визуализация экономии кормов" loading="lazy" />
</div>
<div class="card-body">
<div class="card-icon">
<svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M12 22V12"/><path d="M3.3 7L12 12l8.7-5"/></svg>
</div>
<h3>Гибкая система уведомлений</h3>
<p>Умная система уведомлений — ваш новый помощник, который следит за процессом кормления КРС и мгновенно предупреждает команду фермы о любых сбоях. Она заменяет ручной контроль автоматическим мониторингом.</p>
</div>
</div>
<div class="card fade-up card-with-gif">
<div class="card-gif-wrapper">
<img src="/main/gif/16-24-58.gif" alt="Анализ микроклимата" loading="lazy" />
</div>
<div class="card-body">
<div class="card-icon">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
</div>
<h3>Анализ микроклимата</h3>
<p>Интеграция с системами климат-контроля: учитываем температуру и влажность для коррекции потребности в питании.</p>
</div>
</div>
<div class="card fade-up card-with-gif">
<div class="card-gif-wrapper">
<img src="/main/gif/16-24-58.gif" alt="Единая платформа" loading="lazy" />
</div>
<div class="card-body">
<div class="card-icon">
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/><path d="M12 7v10"/></svg>
</div>
<h3>Единая платформа</h3>
<p>Все данные о кормлении, здоровье и продуктивности в одном окне – для быстрого принятия решений.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ====== БЕГУЩАЯ СТРОКА ====== -->
<section class="marquee-section" id="integrations">
<div class="marquee-track" id="marqueeTrack">
<span class="logo-item">✦ АГРО-ХОЛДИНГ</span>
<span class="logo-item">✦ МОЛОЧНЫЙ КОМБИНАТ</span>
<span class="logo-item">✦ ФЕРМА №1</span>
<span class="logo-item">✦ ЗЕРНО-ТРЕЙД</span>
<span class="logo-item">✦ ВЕТЕРИНАРНАЯ СЛУЖБА</span>
<span class="logo-item">✦ КОРМОВОЙ ЦЕНТР</span>
<span class="logo-item">✦ ПЛЕМЗАВОД</span>
<span class="logo-item">✦ АГРО-ИНТЕЛЛЕКТ</span>
<span class="logo-item">✦ АГРО-ХОЛДИНГ</span>
<span class="logo-item">✦ МОЛОЧНЫЙ КОМБИНАТ</span>
<span class="logo-item">✦ ФЕРМА №1</span>
<span class="logo-item">✦ ЗЕРНО-ТРЕЙД</span>
<span class="logo-item">✦ ВЕТЕРИНАРНАЯ СЛУЖБА</span>
<span class="logo-item">✦ КОРМОВОЙ ЦЕНТР</span>
<span class="logo-item">✦ ПЛЕМЗАВОД</span>
<span class="logo-item">✦ АГРО-ИНТЕЛЛЕКТ</span>
</div>
</section>
<!-- ====== CTA ====== -->
<section class="section-padding cta-section" id="cta">
<div class="container">
<h2>Внедряйте технологии будущего</h2>
<p>
Получите консультацию по настройке системы для вашего хозяйства.
Первые 2 месяца – полная поддержка и мониторинг.
</p>
<a href="#" class="btn btn-primary btn-lg">Оставить заявку</a>
</div>
</section>
<!-- ====== ФУТЕР ====== -->
<footer class="footer" id="security">
<div class="container">
<a href="#" class="footer-logo">
<img src="/main/img/logo3.png" alt="FeedControl" />
</a>
<span class="footer-copy">&copy; 2026 — FeedControl</span>
<div class="footer-links">
<a href="#">Политика</a>
<a href="#">Поддержка</a>
<a href="#">Контакты</a>
</div>
</div>
</footer>
<script src="/main/js/main.js" defer></script>
</body>
</html>
apps/web/main/video/Тестовое видео.mp4
BIN
View File
Binary file not shown.
apps/web/main/webfonts/.gitkeep
View File