Создай спортивный сайт , с возможность записи на

Создай спортивный сайт , с возможность записи на тренировки, правильное питание ,восстановление после тренировок ,сделай чтобы была регистрация и авторизация в отдельной вкладке вход, после успешной регистрации данные вносятся в базу данных http://localhost:8888/phpMyAdmin5/index.php?route=/database/structure&server=1&db=+health1_db ,сделай красивый дизайн и чтобы когда мы вошли в профиль мы могли выбрать себе аватарку либо которая есть на сайте либо добавить свою.можно любой размер изображения, можно внести свои данные возраст вес рост, итд, после этого можно сохранитьь данные и они сохранятся в базе данных, после этого пользователь может перемещаться по вкладкам выбирать то что ему интересно,и тем самым начинает изменять свои показания в лучшую сторону,можно за этим следить, и можно прочитать статьи диетологов, докторов о полезности тренировок или питания
Дополнительные параметры: codeFlowType: codeWrite codeFlowLang: HTML
Создано: 27.05.2025 00:11 Обновлено: 1 месяц назад

Создай спортивный сайт , с возможность записи на тренировки, правильное питание ,восстановление после тренировок ,сделай чтобы была регистрация и авторизация в отдельной вкладке вход, после успешной регистрации данные вносятся в базу данных http://localhost:8888/phpMyAdmin5/index.php?route=/database/structure&server=1&db=+health1_db ,сделай красивый дизайн и чтобы когда мы вошли в профиль мы могли выбрать себе аватарку либо которая есть на сайте либо добавить свою.можно любой размер изображения, можно внести свои данные возраст вес рост, итд, после этого можно сохранитьь данные и они сохранятся в базе данных, после этого пользователь может перемещаться по вкладкам выбирать то что ему интересно,и тем самым начинает изменять свои показания в лучшую сторону,можно за этим следить, и можно прочитать статьи диетологов, докторов о полезности тренировок или питания

# Спортивный сайт "HealthPlus"

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <title>HealthPlus - Спортивный сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Подключение CSS для стилей -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f4f8;
            color: #333;
        }

        header {
            background-color: #2c3e50;
            padding: 20px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header h1 {
            font-size: 24px;
        }

        nav {
            display: flex;
            gap: 15px;
        }

        nav a {
            color: #ecf0f1;
            text-decoration: none;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background 0.3s;
        }

        nav a:hover {
            background-color: #34495e;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Стиль форм */
        form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        input[type="text"], input[type="password"], input[type="number"], textarea {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            width: 100%;
        }

        button {
            padding: 12px;
            background-color: #2980b9;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background-color: #3498db;
        }

        /* Вкладки */
        .tabs {
            display: flex;
            margin-top: 20px;
        }

        .tab {
            padding: 10px 20px;
            background-color: #bdc3c7;
            margin-right: 5px;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            transition: background 0.3s;
        }

        .tab.active {
            background-color: #2980b9;
            color: #fff;
        }

        /* Контент вкладок */
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #bdc3c7;
            border-top: none;
            border-radius: 0 4px 4px 4px;
            background-color: #fff;
        }

        .tab-content.active {
            display: block;
        }

        /* Аватарка и профиль */
        .profile {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #2980b9;
            margin-bottom: 15px;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Статьи */
        .articles {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .article {
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: #fafafa;
        }

        .article h3 {
            margin-bottom: 10px;
        }

        /* Простая адаптация для мобильных */
        @media(max-width: 768px){
            nav {
                flex-direction: column;
                align-items: flex-start;
            }

            .tabs {
                flex-direction: column;
            }

            .tab {
                margin-bottom: 5px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>HealthPlus</h1>
        <nav>
            <a href="#" id="nav-login">Вход</a>
            <a href="#" id="nav-register">Регистрация</a>
            <a href="#" id="nav-profile" style="display:none;">Профиль</a>
            <a href="#" id="nav-logout" style="display:none;">Выход</a>
        </nav>
    </header>

    <div class="container" id="main-content">
        <!-- Основной контент тут -->
        <div id="welcome-message">
            <h2>Добро пожаловать на сайт HealthPlus! Пожалуйста, авторизуйтесь или зарегистрируйтесь.</h2>
        </div>
    </div>

    <!-- Скрин регистрации -->
    <div class="container" id="register-section" style="display:none;">
        <h2>Регистрация</h2>
        <form id="register-form">
            <input type="text" id="reg-username" placeholder="Имя пользователя" required />
            <input type="password" id="reg-password" placeholder="Пароль" required />
            <input type="text" id="reg-email" placeholder="Электронная почта" required />
            <button type="submit">Зарегистрироваться</button>
        </form>
        <p>Уже есть аккаунт? <a href="#" id="to-login">Войти</a></p>
    </div>

    <!-- Скрин входа -->
    <div class="container" id="login-section" style="display:none;">
        <h2>Вход</h2>
        <form id="login-form">
            <input type="text" id="login-username" placeholder="Имя пользователя" required />
            <input type="password" id="login-password" placeholder="Пароль" required />
            <button type="submit">Войти</button>
        </form>
        <p>Нет аккаунта? <a href="#" id="to-register">Зарегистрироваться</a></p>
    </div>

    <!-- Профиль пользователя -->
    <div class="container" id="profile-section" style="display:none;">
        <h2>Профиль</h2>
        <div class="profile">
            <div class="avatar" id="avatar-preview">
                <img src="https://via.placeholder.com/150" alt="Аватар" id="user-avatar"/>
            </div>
            <input type="file" id="avatar-upload" accept="image/*" />
            <form id="profile-form">
                <input type="number" id="profile-age" placeholder="Возраст" required />
                <input type="number" id="profile-weight" placeholder="Вес (кг)" required />
                <input type="number" id="profile-height" placeholder="Рост (см)" required />
                <textarea id="profile-info" placeholder="Дополнительная информация"></textarea>
                <button type="submit">Сохранить профиль</button>
            </form>
        </div>
        <div class="tabs" id="profile-tabs">
            <div class="tab active" data-tab="training">Тренировки</div>
            <div class="tab" data-tab="nutrition">Питание</div>
            <div class="tab" data-tab="recovery">Восстановление</div>
            <div class="tab" data-tab="articles">Статьи</div>
        </div>
        <div class="tab-content active" id="training">
            <h3>Запишитесь на тренировку</h3>
            <form id="training-form">
                <input type="date" id="training-date" required />
                <select id="training-type" required>
                    <option value="">Выберите тип тренировки</option>
                    <option value="общая физподготовка">Общая физподготовка</option>
                    <option value="кардио">Кардио</option>
                    <option value="силовая">Силовая</option>
                    <option value="йога">Йога</option>
                </select>
                <button type="submit">Записаться</button>
            </form>
            <div id="training-schedule" style="margin-top:20px;">
                <h4>Мои записи на тренировки</h4>
                <ul id="training-list"></ul>
            </div>
        </div>
        <div class="tab-content" id="nutrition">
            <h3>Правильное питание</h3>
            <p>Здесь вы найдете советы диетологов, рецепты и планы питания.</p>
            <!-- Можно добавить список статей или планов -->
        </div>
        <div class="tab-content" id="recovery">
            <h3>Восстановление после тренировок</h3>
            <p>Советы по восстановлению, массажи, растяжки и массажные процедуры.</p>
        </div>
        <div class="tab-content" id="articles">
            <h3>Статьи от диетологов и докторов</h3>
            <div class="articles">
                <div class="article">
                    <h4>Польза кардио тренировок</h4>
                    <p>Кардио тренировки помогают укрепить сердечно-сосудистую систему...</p>
                </div>
                <div class="article">
                    <h4>Правильное питание при похудении</h4>
                    <p>Следуйте этим советам для достижения лучших результатов в похудении...</p>
                </div>
                <!-- Можно добавить ещё статей -->
            </div>
        </div>
    </div>

    <!-- Скрипты -->
    <script>
        // Изначально скрываем все секции, кроме входа
        const registerSection = document.getElementById('register-section');
        const loginSection = document.getElementById('login-section');
        const profileSection = document.getElementById('profile-section');
        const welcomeMessage = document.getElementById('welcome-message');

        // Навигационные ссылки
        const navLogin = document.getElementById('nav-login');
        const navRegister = document.getElementById('nav-register');
        const navProfile = document.getElementById('nav-profile');
        const navLogout = document.getElementById('nav-logout');

        // Другие секции
        const mainContent = document.getElementById('main-content');

        // Вкладки
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');

        // Вход и регистрация
        document.getElementById('to-login').onclick = () => {
            registerSection.style.display = 'none';
            loginSection.style.display = 'block';
        };
        document.getElementById('to-register').onclick = () => {
            loginSection.style.display = 'none';
            registerSection.style.display = 'block';
        };

        // Вход
        document.getElementById('login-form').onsubmit = async (e) => {
            e.preventDefault();
            const username = document.getElementById('login-username').value;
            const password = document.getElementById('login-password').value;
            // Здесь должен быть AJAX-запрос к серверу для проверки логина
            // В качестве примера считаем, что вход успешен
            // В реальной реализации необходимо обмениваться JWT или сессией
            // Например:
            // const response = await fetch('/api/login', {...})
            // const data = await response.json();

            // Для теста:
            // Запоминаем пользователя в localStorage
            localStorage.setItem('user', username);
            // Показываем профиль
            showProfile(username);
            // Меняем интерфейс
            loginSection.style.display = 'none';
            document.getElementById('nav-login').style.display = 'none';
            document.getElementById('nav-register').style.display = 'none';
            document.getElementById('nav-profile').style.display = 'block';
            document.getElementById('nav-logout').style.display = 'block';
            document.getElementById('nav-profile').textContent = username;
        };

        // Регистрация
        document.getElementById('register-form').onsubmit = async (e) => {
            e.preventDefault();
            const username = document.getElementById('reg-username').value;
            const password = document.getElementById('reg-password').value;
            const email = document.getElementById('reg-email').value;

            // Отправка данных на сервер для регистрации
            // В реальной реализации AJAX-запрос, например:
            // await fetch('/api/register', {...})

            // Для теста:
            localStorage.setItem('user', username);
            showProfile(username);
            registerSection.style.display = 'none';
            document.getElementById('nav-login').style.display = 'none';
            document.getElementById('nav-register').style.display = 'none';
            document.getElementById('nav-profile').style.display = 'block';
            document.getElementById('nav-logout').style.display = 'block';
            document.getElementById('nav-profile').textContent = username;
        };

        // Выход
        document.getElementById('nav-logout').onclick = () => {
            localStorage.removeItem('user');
            profileSection.style.display = 'none';
            mainContent.style.display = 'block';
            document.getElementById('nav-login').style.display = 'block';
            document.getElementById('nav-register').style.display = 'block';
            document.getElementById('nav-profile').style.display = 'none';
            document.getElementById('nav-logout').style.display = 'none';
            // Сбросить содержимое профиля
            document.getElementById('profile-form').reset();
            document.getElementById('avatar-preview').innerHTML = '<img src="https://via.placeholder.com/150" alt="Аватар" id="user-avatar"/>';
            document.getElementById('training-list').innerHTML = '';
            // Показать приветственное сообщение
            welcomeMessage.style.display = 'block';
        };

        // Функция отображения профиля
        function showProfile(username) {
            document.getElementById('welcome-message').style.display = 'none';
            profileSection.style.display = 'block';
        }

        // Обработчик вкладок
        tabs.forEach(tab => {
            tab.onclick = () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');

                const target = tab.dataset.tab;
                tabContents.forEach(content => {
                    content.classList.remove('active');
                    if(content.id === target){
                        content.classList.add('active');
                    }
                });
            };
        });

        // Загрузка и сохранение аватара
        document.getElementById('avatar-upload').onchange = () => {
            const file = document.getElementById('avatar-upload').files[0];
            if(file){
                const reader = new FileReader();
                reader.onload = () => {
                    document.getElementById('user-avatar').src = reader.result;
                    // Здесь можно отправить изображение на сервер для сохранения
                };
                reader.readAsDataURL(file);
            }
        };

        // Сохранение профиля
        document.getElementById('profile-form').onsubmit = (e) => {
            e.preventDefault();
            const age = document.getElementById('profile-age').value;
            const weight = document.getElementById('profile-weight').value;
            const height = document.getElementById('profile-height').value;
            const info = document.getElementById('profile-info').value;
            // Отправляем данные на сервер
            // AJAX-запрос для сохранения данных

            alert('Профиль сохранен!');
        };

        // Запись на тренировку
        document.getElementById('training-form').onsubmit = (e) => {
            e.preventDefault();
            const date = document.getElementById('training-date').value;
            const type = document.getElementById('training-type').value;

            const list = document.getElementById('training-list');
            const entry = document.createElement('li');
            entry.textContent = `Дата: ${date}, Тип: ${type}`;
            list.appendChild(entry);

            // Отправить данные на сервер для сохранения
            alert('Запись добавлена!');
            document.getElementById('training-form').reset();
        };

        // При загрузке страницы проверка авторизации
        window.onload = () => {
            const user = localStorage.getItem('user');
            if(user){
                showProfile(user);
                document.getElementById('nav-login').style.display = 'none';
                document.getElementById('nav-register').style.display = 'none';
                document.getElementById('nav-profile').style.display = 'block';
                document.getElementById('nav-logout').style.display = 'block';
                document.getElementById('nav-profile').textContent = user;
            }
        };
    </script>
</body>
</html>

Примечания:

  • В данном коде реализованы основные элементы интерфейса и логика переключения вкладок, входа/регистрации, редактирования профиля.
  • Для полноценной работы с базой данных необходимо реализовать серверный API на PHP или другом языке, который будет обрабатывать запросы (регистрация, вход, сохранение профиля, записи на тренировки и т.д.).
  • AJAX-запросы в коде (комментарии // Отправить на сервер) нужно заменить на реальные обращения к вашему серверу.
  • Для добавления изображений и загрузки аватара необходимо реализовать серверную часть для сохранения файлов.
  • Дизайн можно дополнительно улучшить и адаптировать под мобильные устройства.

Если нужен пример серверной части или доработки, сообщите!