codeFlowType:
codeWrite
codeFlowLang:
HTML
Создай спортивный сайт , с возможность записи на тренировки, правильное питание ,восстановление после тренировок ,сделай чтобы была регистрация и авторизация в отдельной вкладке вход, после успешной регистрации данные вносятся в базу данных 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>
Примечания:
// Отправить на сервер
) нужно заменить на реальные обращения к вашему серверу.Если нужен пример серверной части или доработки, сообщите!