/
GoDZZ
/
TaskManager
Обзор
Документация
Войти
/
GoDZZ
/
TaskManager
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/main/resources/templates/index.html
157 строк
8 KB
vafliaa
done
07 май 2024, 12:03
07 май 2024, 12:03
4edc86c
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Главная страница</title> <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <link rel="stylesheet" type="text/css" href="/css/indexStyle.css"> </head> <body> <div class="wrapper"> <nav class="nav"> <div class="nav-logo"> <p>Task Menegment</p> </div> <div class="nav-menu" id="navMenu"> <ul> <li><a href="#home" class="link active">Главная</a></li> <li><a href="#services" class="link">Сервисы</a></li> <li><a href="#about" class="link">О нас</a></li> </ul> </div> <div class="nav-button"> <span style="font-size: 16px; right: 10px;" th:if="${loggedInUsername != null}" th:text="${loggedInUsername}"></span> <a th:if="${loggedInUsername != null}" th:href="@{/logout}" style="text-decoration: none; color: black;"> <button class="btn" style="font-size: 16px;">Выход</button> </a> <a th:if="${loggedInUsername == null}" th:href="@{/login}" style="text-decoration: none; color: black;"> <button class="btn white-btn" style="font-size: 16px;">Вход</button> </a> <a th:if="${loggedInUsername == null}" th:href="@{/register}" style="text-decoration: none; color: black;"> <button class="btn" style="font-size: 16px;">Регистрация</button> </a> </div> <div class="nav-menu-btn"> <i class="bx bx-menu" onclick="myMenuFunction()"></i> </div> </nav> <div id="home"> <div> <h1>Легко управляйте своими задачами</h1> <h1>и сотрудничайте с командой</h1><br> <p>Откройте для себя нашу интерактивную платформу, которая упрощает аутентификацию пользователей, создание групп и управление задачами. Наслаждайтесь удобной навигацией по системе входа в систему и регистрации.</p> </div> <div class="nav-button"> <a th:href="@{/taskPage}" class="btn" style="text-decoration: none; color: black;"><strong>Приступить к задачам</strong></a> </div> </div> <div id="services"> <div class="images-text-wrapper"> <img src="/jpg/index/task-list.png" class="image"> <img src="/jpg/index/password-access.png" class="image"> </div> <div class="section-content"> <header>Наши сервисы</header> <h2>Упростите выполнение повседневных задач</h2> <p>Мы предлагаем интуитивно понятные инструменты для создания, назначения и отслеживания задач, что позволяет сократить время на выполнение повседневных задач.</p> <h2>Оптимизируйте совместную работу вашей команды</h2> <p>Наша платформа обеспечивает эффективное сотрудничество и коммуникацию между участниками команды, что позволяет достигать лучших результатов в работе.</p> <h2>Повысьте производительность благодаря интуитивно понятной платформе управления задачами</h2> <p>С нашими инструментами вы сможете организовать свой рабочий процесс так, чтобы каждый участник команды был максимально продуктивен и эффективен.</p> <h2>Откройте для себя возможности простой аутентификации пользователей, создания групп и управления задачами</h2> <p>Наша платформа предлагает широкий спектр функциональных возможностей, включая создание групп пользователей, управление доступом и многое другое.</p> </div> </div> <div id="about"> <div class="section-content"> <header>О нашей компании</header> <p>Мы - команда профессионалов в области разработки программного обеспечения, которая стремится помочь компаниям и командам повысить эффективность своей работы.</p> <p>Наша миссия - предоставить пользователям удобные и надежные инструменты для управления задачами, которые помогут им достигать своих целей быстрее и эффективнее.</p> <p>Мы гордимся тем, что наша платформа помогает многим компаниям повышать производительность и качество своей работы, а также сделать рабочий процесс более удобным и прозрачным.</p> <p>Присоединяйтесь к нам и давайте вместе создавать лучшее будущее для вашего бизнеса!</p> </div> </div> </div> <script th:inline="javascript"> /*<![CDATA[*/ var loggedInUsername = /*[[${loggedInUsername}]]*/ null; /*]]>*/ </script> <script> document.addEventListener('DOMContentLoaded', function() { var links = document.querySelectorAll('.link'); links.forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); // Удаление класса "active" у всех ссылок links.forEach(function(item) { item.classList.remove('active'); }); // Добавление класса "active" к выбранной ссылке this.classList.add('active'); var targetId = this.getAttribute('href'); var targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); }); function myMenuFunction() { var i = document.getElementById("navMenu"); if(i.className === "nav-menu") { i.className += " responsive"; } else { i.className = "nav-menu"; } } document.addEventListener('scroll', function() { var contents = document.querySelectorAll('.section-content'); contents.forEach(function(content) { var contentPosition = content.getBoundingClientRect().top; var screenPosition = window.innerHeight; if (contentPosition < screenPosition) { content.style.opacity = '1'; /* Показываем контент, если он виден на экране */ } }); }); document.addEventListener('DOMContentLoaded', function() { var links = document.querySelectorAll('.link'); links.forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); var targetId = this.getAttribute('href'); var targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); }); </script> </body> </html>