86 lines
10 KiB
HTML
86 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="theme-color" content="#18b88d" />
|
||
<title>Биопортал Лаб</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<header class="topbar">
|
||
<a class="brand" href="#home" aria-label="Биопортал Лаб, главная">
|
||
<span class="brand-mark"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6M10 3v6.2L5.5 18a2 2 0 0 0 1.7 3h9.6a2 2 0 0 0 1.7-3L14 9.2V3"/><path d="M8.3 16.2h7.4M10.1 12.8h3.8"/></svg></span>
|
||
<span><strong>Биопортал Лаб</strong><small>Инструменты для лабораторных расчётов и анализа</small></span>
|
||
</a>
|
||
<nav class="top-nav" aria-label="Служебная навигация">
|
||
<a href="#reference"><svg viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H11v17H6.5A2.5 2.5 0 0 0 4 22.5zM20 5.5A2.5 2.5 0 0 0 17.5 3H13v17h4.5a2.5 2.5 0 0 1 2 1.5z"/></svg>Справочник</a>
|
||
<a href="#docs"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9.7 9a2.5 2.5 0 1 1 4.4 1.65c-.9.91-2.1 1.3-2.1 2.85M12 16.8h.01"/></svg>Документация</a>
|
||
<button class="icon-button" data-toast="Новых уведомлений нет" aria-label="Уведомления"><svg viewBox="0 0 24 24"><path d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"/></svg></button>
|
||
<button class="profile" data-toast="Открыт профиль Анны Ивановой"><span>АИ</span><b>Анна Иванова</b><svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5"/></svg></button>
|
||
</nav>
|
||
<button class="mobile-menu" aria-label="Открыть меню"><span></span><span></span><span></span></button>
|
||
</header>
|
||
|
||
<aside class="sidebar" aria-label="Основная навигация">
|
||
<button class="create-button" data-modal="experiment"><span>＋</span>Создать эксперимент</button>
|
||
<nav class="side-nav">
|
||
<a class="active" href="#home"><i class="icon home"></i>Главная</a>
|
||
<p>Инструменты</p>
|
||
<a href="#tool-dilution"><i class="icon drop blue"></i>Разбавление растворов</a>
|
||
<a href="#tool-prep"><i class="icon flask purple"></i>Приготовление раствора</a>
|
||
<a href="#tool-series"><i class="icon tubes green"></i>Серийные разведения</a>
|
||
<a href="#tool-petri"><i class="icon petri orange"></i>PetriCount</a>
|
||
<a href="#tool-cfu"><i class="icon bars red"></i>CFU / мл</a>
|
||
<a href="#tool-growth"><i class="icon chart teal"></i>Рост культуры</a>
|
||
<hr />
|
||
<a href="#experiments"><i class="icon document"></i>Мои эксперименты</a>
|
||
<a href="#templates"><i class="icon document"></i>Шаблоны</a>
|
||
<a href="#reference"><i class="icon book"></i>Справочник веществ</a>
|
||
</nav>
|
||
<div class="plan-card"><b>Тариф: <span>Бесплатный</span></b><small>Осталось анализов: 10</small><div class="progress"><span></span></div><button data-toast="Тарифы будут доступны позднее">Улучшить тариф</button></div>
|
||
</aside>
|
||
|
||
<main id="home" class="main-content">
|
||
<section class="welcome-banner">
|
||
<div><h1>Добро пожаловать в Биопортал Лаб!</h1><p>Всё для ваших экспериментов: расчёты, анализ<br />изображений и отчёты.</p></div>
|
||
<div class="lab-illustration" aria-hidden="true">
|
||
<div class="petri-dish"><span></span><span></span><span></span><span></span><span></span><span></span></div>
|
||
<div class="beaker"><i></i></div>
|
||
<div class="rack"><b></b><b></b><b></b></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section tools-section"><div class="section-heading"><h2>Инструменты</h2><button class="text-button" data-toast="Каталог инструментов скоро появится">Все инструменты <span>→</span></button></div>
|
||
<div class="tool-grid">
|
||
<article class="tool-card blue"><div class="tool-icon"><i class="icon drop blue"></i></div><h3>Разбавление<br />растворов</h3><p>Рассчитайте неизвестные параметры разбавления.</p><button data-tool="Разбавление растворов">Открыть</button></article>
|
||
<article class="tool-card purple"><div class="tool-icon"><i class="icon flask purple"></i></div><h3>Приготовление<br />раствора</h3><p>Рассчитайте массу вещества для нужной концентрации.</p><button data-tool="Приготовление раствора">Открыть</button></article>
|
||
<article class="tool-card green"><div class="tool-icon"><i class="icon tubes green"></i></div><h3>Серийные<br />разведения</h3><p>Постройте схему разведений и получите объёмы.</p><button data-tool="Серийные разведения">Открыть</button></article>
|
||
<article class="tool-card orange"><div class="tool-icon"><i class="icon petri orange"></i></div><h3>PetriCount</h3><p>Загрузите фото чашки Петри и посчитайте колонии.</p><button data-route="./petricount.html">Открыть</button></article>
|
||
<article class="tool-card red"><div class="tool-icon"><i class="icon bars red"></i></div><h3>CFU / мл</h3><p>Рассчитайте КОЕ/мл по данным подсчёта колоний.</p><button data-tool="CFU / мл">Открыть</button></article>
|
||
<article class="tool-card teal"><div class="tool-icon"><i class="icon chart teal"></i></div><h3>Рост культуры</h3><p>Анализ кривой роста и расчёт времени удвоения.</p><button data-tool="Рост культуры">Открыть</button></article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lower-grid">
|
||
<section class="recent section" id="experiments"><div class="section-heading"><h2>Недавние эксперименты</h2><button class="text-button" data-toast="Открыт полный список экспериментов">Все эксперименты <span>→</span></button></div>
|
||
<div class="table-card"><table><thead><tr><th>Название</th><th>Дата</th><th>Инструменты</th><th>Статус</th><th></th></tr></thead><tbody>
|
||
<tr><td><b>E.coli K12, оценка роста</b></td><td>24.05.2024</td><td><span class="tag teal">Рост культуры</span><span class="tag red">CFU / мл</span></td><td><span class="status done">✓</span> Завершён</td><td><button class="more" data-toast="Действия с экспериментом">⋮</button></td></tr>
|
||
<tr><td><b>Разведение образца №12</b></td><td>22.05.2024</td><td><span class="tag green">Серийные разведения</span><span class="tag orange">PetriCount</span></td><td><span class="status done">✓</span> Завершён</td><td><button class="more" data-toast="Действия с экспериментом">⋮</button></td></tr>
|
||
<tr><td><b>Приготовление среды LB</b></td><td>20.05.2024</td><td><span class="tag purple">Приготовление раствора</span></td><td><span class="status done">✓</span> Завершён</td><td><button class="more" data-toast="Действия с экспериментом">⋮</button></td></tr>
|
||
<tr><td><b>Тест образца воды</b></td><td>18.05.2024</td><td><span class="tag orange">PetriCount</span><span class="tag red">CFU / мл</span></td><td><span class="status draft">⌄</span> Черновик</td><td><button class="more" data-toast="Действия с экспериментом">⋮</button></td></tr>
|
||
</tbody></table></div>
|
||
</section>
|
||
<aside class="tips"><div class="tips-title"><span>💡</span><h2>Полезно знать</h2></div><article><i class="tip-petri">◌</i><p>Оптимальный диапазон для подсчёта колоний: <b>30–300 КОЕ на чашку.</b></p></article><article><i>🧪</i><p>При серийных разведениях используйте новые наконечники на каждом шаге.</p></article><article><i>▣</i><p>Все расчёты сохраняются в ваших экспериментах и доступны для отчётов.</p></article><button data-toast="Открыт раздел полезных советов">Смотреть все советы <span>→</span></button></aside>
|
||
</section>
|
||
</main>
|
||
<footer><span>© 2024 Биопортал Лаб. Все права защищены.</span><div><a href="#about">О нас</a><a href="#contacts">Контакты</a><a href="#privacy">Политика конфиденциальности</a></div></footer>
|
||
</div>
|
||
|
||
<dialog id="experiment-modal"><form method="dialog"><button class="close" value="cancel" aria-label="Закрыть">×</button><span class="modal-icon">⚗</span><h2>Новый эксперимент</h2><p>Создайте рабочее пространство для расчётов, фотографий и результатов.</p><label>Название эксперимента<input autofocus placeholder="Например, Подсчёт КОЕ образца воды" /></label><label>Дата<input type="date" value="2024-05-25" /></label><button class="submit" value="default">Создать эксперимент</button></form></dialog>
|
||
<div class="toast" role="status" aria-live="polite"></div>
|
||
<script src="./app.js"></script>
|
||
</body>
|
||
</html>
|