123 lines
6.0 KiB
HTML
123 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ViteKit Universal - Test</title>
|
||
<link rel="stylesheet" href="src/styles/main.scss">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<div class="container">
|
||
<nav class="nav">
|
||
<div class="nav__brand">
|
||
<a href="/" class="nav__logo">ViteKit Universal</a>
|
||
</div>
|
||
<ul class="nav__menu">
|
||
<li class="nav__item">
|
||
<a href="/" class="nav__link nav__link--active">Главная</a>
|
||
</li>
|
||
<li class="nav__item">
|
||
<a href="/components-demo.html" class="nav__link">Компоненты</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<div class="hero">
|
||
<div class="container">
|
||
<div class="hero__content">
|
||
<h1 class="hero__title">ViteKit Universal</h1>
|
||
<p class="hero__subtitle">
|
||
Современный универсальный сборщик проектов с Vite + Twig + компонентами
|
||
</p>
|
||
<div class="hero__actions">
|
||
<button class="btn btn--primary btn--lg" data-micromodal-trigger="modal-basic">
|
||
Открыть модал
|
||
</button>
|
||
<button class="btn btn--outline btn--lg" data-toast-trigger="success"
|
||
data-toast-title="Успех!" data-toast-message="Тест уведомления">
|
||
Показать уведомление
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section id="components" style="padding: 4rem 0;">
|
||
<div class="container">
|
||
<h2>Тестирование компонентов</h2>
|
||
|
||
<!-- Табы -->
|
||
<div class="tabs" data-tabs style="margin-bottom: 2rem;">
|
||
<div class="tabs__nav">
|
||
<button class="tabs__tab tabs__tab--active" data-tab="tab-1">Первая вкладка</button>
|
||
<button class="tabs__tab" data-tab="tab-2">Вторая вкладка</button>
|
||
<button class="tabs__tab" data-tab="tab-3">Третья вкладка</button>
|
||
</div>
|
||
<div class="tabs__content">
|
||
<div class="tabs__panel tabs__panel--active" id="tab-1-panel" data-panel="tab-1">
|
||
<p>Содержимое первой вкладки</p>
|
||
</div>
|
||
<div class="tabs__panel" id="tab-2-panel" data-panel="tab-2">
|
||
<p>Содержимое второй вкладки</p>
|
||
</div>
|
||
<div class="tabs__panel" id="tab-3-panel" data-panel="tab-3">
|
||
<p>Содержимое третьей вкладки</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Аккордеон -->
|
||
<div class="accordion" data-accordion>
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="acc-1" aria-expanded="false">
|
||
<span>Что такое ViteKit?</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" id="acc-1-content" data-accordion-content="acc-1" aria-hidden="true">
|
||
<div class="accordion__body">
|
||
<p>ViteKit - это современный сборщик проектов.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="acc-2" aria-expanded="false">
|
||
<span>Как использовать?</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" id="acc-2-content" data-accordion-content="acc-2" aria-hidden="true">
|
||
<div class="accordion__body">
|
||
<p>Просто установите зависимости и запустите сервер разработки.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Модальное окно -->
|
||
<div class="modal micromodal-slide" id="modal-basic" aria-hidden="true">
|
||
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
||
<div class="modal__container" role="dialog" aria-modal="true">
|
||
<header class="modal__header">
|
||
<h2 class="modal__title">Тестовое модальное окно</h2>
|
||
<button class="modal__close" aria-label="Закрыть" data-micromodal-close></button>
|
||
</header>
|
||
<main class="modal__content">
|
||
<p>Это тестовое модальное окно для проверки функциональности.</p>
|
||
</main>
|
||
<footer class="modal__footer">
|
||
<button class="btn btn--secondary" data-micromodal-close>Закрыть</button>
|
||
<button class="btn btn--primary">Подтвердить</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="src/scripts/main.js"></script>
|
||
</body>
|
||
</html> |