mirror of
https://github.com/LOBSTERVOVA/Tennis-Site.git
synced 2026-04-17 17:40:49 +03:00
1153 lines
52 KiB
HTML
1153 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>TennisHub - Ваше теннисное сообщество</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||
<style>
|
||
:root {
|
||
--tennis-green: #2ecc71;
|
||
--tennis-blue: #3498db;
|
||
--tennis-orange: #e67e22;
|
||
--tennis-dark: #2c3e50;
|
||
--tennis-light: #ecf0f1;
|
||
}
|
||
|
||
.navbar-brand {
|
||
font-weight: 800;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.tennis-bg {
|
||
background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)),
|
||
url('https://avatars.mds.yandex.net/get-altay/1880524/2a0000016ef11d02f18395e01a44f0ddbdb7/XXL_height');
|
||
background-size: cover;
|
||
background-position: center;
|
||
color: white;
|
||
}
|
||
|
||
.hero-section {
|
||
padding: 180px 0 120px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 3.5rem;
|
||
font-weight: 800;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.ball-animation {
|
||
position: absolute;
|
||
width: 100px;
|
||
height: 100px;
|
||
background: var(--tennis-green);
|
||
border-radius: 50%;
|
||
animation: bounce 3s infinite alternate;
|
||
opacity: 0.2;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0% { transform: translateY(0) rotate(0deg); }
|
||
100% { transform: translateY(-500px) rotate(360deg); }
|
||
}
|
||
|
||
.ball-1 {
|
||
top: 20%;
|
||
left: 10%;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.ball-2 {
|
||
top: 40%;
|
||
right: 15%;
|
||
animation-delay: 1s;
|
||
background: var(--tennis-orange);
|
||
}
|
||
|
||
.ball-3 {
|
||
bottom: 30%;
|
||
left: 20%;
|
||
animation-delay: 2s;
|
||
background: var(--tennis-blue);
|
||
}
|
||
|
||
.card-hover {
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
border: none;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-hover:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.club-card {
|
||
border-top: 4px solid var(--tennis-green);
|
||
}
|
||
|
||
.event-card {
|
||
border-top: 4px solid var(--tennis-orange);
|
||
}
|
||
|
||
.admin-card {
|
||
border-top: 4px solid var(--tennis-blue);
|
||
}
|
||
|
||
.court-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
background: var(--tennis-green);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
margin: 0 auto 15px;
|
||
}
|
||
|
||
.event-date {
|
||
position: absolute;
|
||
top: 15px;
|
||
left: 15px;
|
||
background: var(--tennis-orange);
|
||
color: white;
|
||
padding: 8px 15px;
|
||
border-radius: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.badge-tennis {
|
||
background: var(--tennis-green);
|
||
color: white;
|
||
}
|
||
|
||
.stats-number {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--tennis-green);
|
||
line-height: 1;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
background: var(--tennis-green);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -33px;
|
||
top: 5px;
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 50%;
|
||
background: var(--tennis-green);
|
||
border: 3px solid white;
|
||
box-shadow: 0 0 0 3px var(--tennis-green);
|
||
}
|
||
|
||
.form-control:focus {
|
||
border-color: var(--tennis-green);
|
||
box-shadow: 0 0 0 0.25rem rgba(46, 204, 113, 0.25);
|
||
}
|
||
|
||
.btn-tennis {
|
||
background: var(--tennis-green);
|
||
border: none;
|
||
color: white;
|
||
padding: 12px 30px;
|
||
border-radius: 10px;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-tennis:hover {
|
||
background: #27ae60;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
|
||
color: white;
|
||
}
|
||
|
||
.btn-outline-tennis {
|
||
border: 2px solid var(--tennis-green);
|
||
color: var(--tennis-green);
|
||
padding: 10px 25px;
|
||
border-radius: 10px;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-outline-tennis:hover {
|
||
background: var(--tennis-green);
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.nav-pills .nav-link.active {
|
||
background: var(--tennis-green);
|
||
}
|
||
|
||
.tab-content {
|
||
border: 1px solid #dee2e6;
|
||
border-top: none;
|
||
border-radius: 0 0 10px 10px;
|
||
padding: 30px;
|
||
}
|
||
|
||
.court-table {
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.court-table th {
|
||
background: var(--tennis-green);
|
||
color: white;
|
||
padding: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.court-table td {
|
||
padding: 12px;
|
||
text-align: center;
|
||
border-bottom: 1px solid #dee2e6;
|
||
}
|
||
|
||
.court-available {
|
||
background: rgba(46, 204, 113, 0.1);
|
||
color: var(--tennis-green);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.court-booked {
|
||
background: rgba(231, 76, 60, 0.1);
|
||
color: #e74c3c;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.court-time {
|
||
font-weight: 600;
|
||
color: var(--tennis-dark);
|
||
}
|
||
|
||
footer {
|
||
background: var(--tennis-dark);
|
||
color: white;
|
||
padding: 60px 0 30px;
|
||
}
|
||
|
||
.social-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(255,255,255,0.1);
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 10px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.social-icon:hover {
|
||
background: var(--tennis-green);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.admin-section {
|
||
background: #f8f9fa;
|
||
border-radius: 15px;
|
||
padding: 30px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-title {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.hero-section {
|
||
padding: 120px 0 80px;
|
||
}
|
||
|
||
.stats-number {
|
||
font-size: 2rem;
|
||
}
|
||
}
|
||
|
||
.court-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.court-item {
|
||
background: white;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.court-item.available {
|
||
border-color: var(--tennis-green);
|
||
}
|
||
|
||
.court-item.booked {
|
||
border-color: #e74c3c;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.court-item:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Навигация -->
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">
|
||
<i class="fas fa-tennis-ball me-2 text-success"></i>TennisHub
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#clubs">Клубы</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#events">События</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#booking">Бронирование</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#admin">Админка</a>
|
||
</li>
|
||
</ul>
|
||
<button class="btn btn-tennis ms-3" onclick="showLoginModal()">
|
||
<i class="fas fa-sign-in-alt me-2"></i>Войти
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Герой секция -->
|
||
<section class="tennis-bg hero-section">
|
||
<div class="ball-animation ball-1"></div>
|
||
<div class="ball-animation ball-2"></div>
|
||
<div class="ball-animation ball-3"></div>
|
||
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6">
|
||
<h1 class="hero-title mb-4">Ваше теннисное сообщество</h1>
|
||
<p class="lead mb-4">Находите клубы, участвуйте в турнирах, бронируйте корты и управляйте событиями в одном месте</p>
|
||
<div class="d-flex flex-wrap gap-3">
|
||
<a href="#clubs" class="btn btn-tennis">
|
||
<i class="fas fa-search me-2"></i>Найти клуб
|
||
</a>
|
||
<a href="#events" class="btn btn-outline-light">
|
||
<i class="fas fa-calendar-alt me-2"></i>События
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<img src="https://avatars.mds.yandex.net/get-altay/1880524/2a0000016ef11d02f18395e01a44f0ddbdb7/XXL_height"
|
||
class="img-fluid rounded-3 shadow-lg"
|
||
alt="Теннисный корт">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Статистика -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="row text-center">
|
||
<div class="col-md-3 col-6 mb-4">
|
||
<div class="stats-number" id="clubsCount">24</div>
|
||
<p class="text-muted">Теннисных клубов</p>
|
||
</div>
|
||
<div class="col-md-3 col-6 mb-4">
|
||
<div class="stats-number" id="courtsCount">156</div>
|
||
<p class="text-muted">Кортов доступно</p>
|
||
</div>
|
||
<div class="col-md-3 col-6 mb-4">
|
||
<div class="stats-number" id="eventsCount">18</div>
|
||
<p class="text-muted">Предстоящих событий</p>
|
||
</div>
|
||
<div class="col-md-3 col-6 mb-4">
|
||
<div class="stats-number" id="playersCount">1,250+</div>
|
||
<p class="text-muted">Активных игроков</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Теннисные клубы -->
|
||
<section id="clubs" class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-lg-8 mx-auto text-center">
|
||
<h2 class="fw-bold mb-3">Теннисные клубы</h2>
|
||
<p class="text-muted">Найдите идеальный клуб для тренировок и игр</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="card card-hover club-card">
|
||
<img src="https://avatars.mds.yandex.net/get-altay/13234017/2a0000018f10863585acfe01f89a2cc9f5bf/XXL_height"
|
||
class="card-img-top"
|
||
height="200"
|
||
style="object-fit: cover;"
|
||
alt="Премиум клуб">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||
<h5 class="card-title mb-0">Tennis Premium</h5>
|
||
<span class="badge badge-tennis">Премиум</span>
|
||
</div>
|
||
<p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Москва, ул. Спортивная, 15</p>
|
||
<div class="mb-3">
|
||
<span class="badge bg-light text-dark me-1">12 кортов</span>
|
||
<span class="badge bg-light text-dark me-1">Тренеры</span>
|
||
<span class="badge bg-light text-dark">Ресторан</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="fw-bold text-success">от 1,200₽/час</span>
|
||
<button class="btn btn-sm btn-tennis" onclick="viewClubDetails(1)">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card card-hover club-card">
|
||
<img src="https://avatars.mds.yandex.net/get-altay/9717139/2a00000189f35961d519003fa4d01c7abc03/XXXL"
|
||
class="card-img-top"
|
||
height="200"
|
||
style="object-fit: cover;"
|
||
alt="Семейный клуб">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||
<h5 class="card-title mb-0">Family Tennis</h5>
|
||
<span class="badge bg-info">Семейный</span>
|
||
</div>
|
||
<p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Санкт-Петербург, пр. Победы, 28</p>
|
||
<div class="mb-3">
|
||
<span class="badge bg-light text-dark me-1">8 кортов</span>
|
||
<span class="badge bg-light text-dark me-1">Детские секции</span>
|
||
<span class="badge bg-light text-dark">Спа</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="fw-bold text-success">от 800₽/час</span>
|
||
<button class="btn btn-sm btn-tennis" onclick="viewClubDetails(2)">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card card-hover club-card">
|
||
<img src="https://avatars.mds.yandex.net/get-altay/9704097/2a000001879afb065e3d55101628110130ad/XXL_height"
|
||
class="card-img-top"
|
||
height="200"
|
||
style="object-fit: cover;"
|
||
alt="Клуб для начинающих">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||
<h5 class="card-title mb-0">Start Tennis</h5>
|
||
<span class="badge bg-warning">Для начинающих</span>
|
||
</div>
|
||
<p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Казань, ул. Теннисная, 5</p>
|
||
<div class="mb-3">
|
||
<span class="badge bg-light text-dark me-1">6 кортов</span>
|
||
<span class="badge bg-light text-dark me-1">Групповые занятия</span>
|
||
<span class="badge bg-light text-dark">Прокат инвентаря</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="fw-bold text-success">от 500₽/час</span>
|
||
<button class="btn btn-sm btn-tennis" onclick="viewClubDetails(3)">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-5">
|
||
<button class="btn btn-outline-tennis">
|
||
<i class="fas fa-plus me-2"></i>Показать все клубы (24)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- События и турниры -->
|
||
<section id="events" class="py-5">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-lg-8 mx-auto text-center">
|
||
<h2 class="fw-bold mb-3">События и турниры</h2>
|
||
<p class="text-muted">Участвуйте в соревнованиях и теннисных событиях</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="card card-hover event-card position-relative">
|
||
<div class="event-date">
|
||
15-18 НОЯ
|
||
</div>
|
||
<img src="https://shvsm-penza.ru/wp-content/uploads/2021/08/%D0%A2%D0%B5%D0%BD%D0%BD%D0%B8%D1%81-3.jpg"
|
||
class="card-img-top"
|
||
height="180"
|
||
style="object-fit: cover;"
|
||
alt="Чемпионат города">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Чемпионат города Москвы</h5>
|
||
<p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Tennis Premium Club</p>
|
||
<p class="card-text">Открытый чемпионат среди любителей и полупрофессионалов.</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="badge bg-success">Регистрация открыта</span>
|
||
<button class="btn btn-sm btn-tennis" onclick="registerForEvent(1)">Участвовать</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card card-hover event-card position-relative">
|
||
<div class="event-date">
|
||
22-24 НОЯ
|
||
</div>
|
||
<img src="https://cspovsmo.ru/wp-content/uploads/2022/06/%D1%82%D0%B5%D0%BD%D0%BD%D0%B8%D1%81-3.jpg"
|
||
class="card-img-top"
|
||
height="180"
|
||
style="object-fit: cover;"
|
||
alt="Детский турнир">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Детский турнир "Ракетка"</h5>
|
||
<p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Family Tennis Club</p>
|
||
<p class="card-text">Турнир для юных теннисистов до 14 лет.</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="badge bg-warning">Осталось 5 мест</span>
|
||
<button class="btn btn-sm btn-tennis" onclick="registerForEvent(2)">Участвовать</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h4 class="mb-4">Расписание событий</h4>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<h5>Открытый урок для начинающих</h5>
|
||
<p class="text-muted mb-1">25 ноября, 18:00 • Start Tennis Club</p>
|
||
<p>Бесплатный мастер-класс от профессионального тренера</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h5>Турнир ветеранов</h5>
|
||
<p class="text-muted mb-1">1 декабря, 10:00 • Tennis Premium Club</p>
|
||
<p>Соревнования для игроков 50+</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h5>Зимний кубок</h5>
|
||
<p class="text-muted mb-1">15-17 декабря • Все клубы сети</p>
|
||
<p>Крупнейший зимний турнир с призовым фондом</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="card">
|
||
<div class="card-header bg-success text-white">
|
||
<h5 class="mb-0">Создать событие</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="createEventForm">
|
||
<div class="mb-3">
|
||
<label class="form-label">Название события</label>
|
||
<input type="text" class="form-control" placeholder="Турнир, мастер-класс..." required>
|
||
</div>
|
||
<div class="row mb-3">
|
||
<div class="col-6">
|
||
<label class="form-label">Дата</label>
|
||
<input type="date" class="form-control" required>
|
||
</div>
|
||
<div class="col-6">
|
||
<label class="form-label">Время</label>
|
||
<input type="time" class="form-control" required>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Клуб</label>
|
||
<select class="form-select" required>
|
||
<option value="">Выберите клуб</option>
|
||
<option>Tennis Premium</option>
|
||
<option>Family Tennis</option>
|
||
<option>Start Tennis</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Описание</label>
|
||
<textarea class="form-control" rows="3" placeholder="Опишите ваше событие..."></textarea>
|
||
</div>
|
||
<div class="d-grid">
|
||
<button type="submit" class="btn btn-tennis">
|
||
<i class="fas fa-calendar-plus me-2"></i>Создать событие
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Бронирование кортов -->
|
||
<section id="booking" class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-lg-8 mx-auto text-center">
|
||
<h2 class="fw-bold mb-3">Бронирование кортов</h2>
|
||
<p class="text-muted">Забронируйте корт онлайн в удобное время</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<ul class="nav nav-pills mb-4" id="bookingTab" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link active" id="today-tab" data-bs-toggle="pill" data-bs-target="#today">Сегодня</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="tomorrow-tab" data-bs-toggle="pill" data-bs-target="#tomorrow">Завтра</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="week-tab" data-bs-toggle="pill" data-bs-target="#week">Неделя</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="tab-content" id="bookingTabContent">
|
||
<div class="tab-pane fade show active" id="today">
|
||
<h5 class="mb-3">Доступные корты на сегодня</h5>
|
||
<div class="court-grid">
|
||
<div class="court-item available" onclick="bookCourt(1)">
|
||
<div class="fw-bold">Корт #1</div>
|
||
<div class="text-success">10:00 - 11:00</div>
|
||
<small>800₽/час</small>
|
||
</div>
|
||
<div class="court-item available" onclick="bookCourt(2)">
|
||
<div class="fw-bold">Корт #2</div>
|
||
<div class="text-success">11:00 - 12:00</div>
|
||
<small>800₽/час</small>
|
||
</div>
|
||
<div class="court-item booked">
|
||
<div class="fw-bold">Корт #3</div>
|
||
<div class="text-danger">12:00 - 14:00</div>
|
||
<small>Занято</small>
|
||
</div>
|
||
<div class="court-item available" onclick="bookCourt(4)">
|
||
<div class="fw-bold">Корт #4</div>
|
||
<div class="text-success">15:00 - 16:00</div>
|
||
<small>1,200₽/час</small>
|
||
</div>
|
||
<div class="court-item available" onclick="bookCourt(5)">
|
||
<div class="fw-bold">Корт #5</div>
|
||
<div class="text-success">16:00 - 18:00</div>
|
||
<small>1,200₽/час</small>
|
||
</div>
|
||
<div class="court-item booked">
|
||
<div class="fw-bold">Корт #6</div>
|
||
<div class="text-danger">18:00 - 20:00</div>
|
||
<small>Турнир</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="tomorrow">
|
||
<!-- Контент для завтра -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="week">
|
||
<!-- Контент для недели -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="card">
|
||
<div class="card-header bg-primary text-white">
|
||
<h5 class="mb-0">Мои бронирования</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="myBookings">
|
||
<p class="text-muted">У вас пока нет активных бронирований</p>
|
||
</div>
|
||
<div class="d-grid mt-3">
|
||
<button class="btn btn-outline-tennis" onclick="showBookingHistory()">
|
||
<i class="fas fa-history me-2"></i>История бронирований
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Админка -->
|
||
<section id="admin" class="py-5">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-lg-8 mx-auto text-center">
|
||
<h2 class="fw-bold mb-3">Панель управления</h2>
|
||
<p class="text-muted">Управляйте клубами, событиями и пользователями</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="admin-section">
|
||
<div class="row">
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card admin-card card-hover">
|
||
<div class="card-body text-center p-4">
|
||
<div class="court-icon mb-3">
|
||
<i class="fas fa-building"></i>
|
||
</div>
|
||
<h4>Управление клубами</h4>
|
||
<p class="text-muted">Добавляйте и редактируйте теннисные клубы</p>
|
||
<button class="btn btn-tennis w-100" onclick="manageClubs()">
|
||
<i class="fas fa-cog me-2"></i>Управлять
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card admin-card card-hover">
|
||
<div class="card-body text-center p-4">
|
||
<div class="court-icon mb-3">
|
||
<i class="fas fa-calendar-alt"></i>
|
||
</div>
|
||
<h4>Управление событиями</h4>
|
||
<p class="text-muted">Создавайте и модерируйте турниры</p>
|
||
<button class="btn btn-tennis w-100" onclick="manageEvents()">
|
||
<i class="fas fa-edit me-2"></i>Управлять
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card admin-card card-hover">
|
||
<div class="card-body text-center p-4">
|
||
<div class="court-icon mb-3">
|
||
<i class="fas fa-users"></i>
|
||
</div>
|
||
<h4>Пользователи</h4>
|
||
<p class="text-muted">Управление игроками и администраторами</p>
|
||
<button class="btn btn-tennis w-100" onclick="manageUsers()">
|
||
<i class="fas fa-user-cog me-2"></i>Управлять
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="mb-0">Статистика системы</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-3 col-6 mb-3">
|
||
<div class="text-center p-3 border rounded">
|
||
<div class="stats-number" id="activeBookings">12</div>
|
||
<p class="text-muted mb-0">Активных броней</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 col-6 mb-3">
|
||
<div class="text-center p-3 border rounded">
|
||
<div class="stats-number" id="pendingEvents">3</div>
|
||
<p class="text-muted mb-0">Событий на модерации</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 col-6 mb-3">
|
||
<div class="text-center p-3 border rounded">
|
||
<div class="stats-number" id="totalRevenue">124,500₽</div>
|
||
<p class="text-muted mb-0">Общая выручка</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 col-6 mb-3">
|
||
<div class="text-center p-3 border rounded">
|
||
<div class="stats-number" id="newUsers">8</div>
|
||
<p class="text-muted mb-0">Новых пользователей</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="mb-0">Быстрые действия</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-flex flex-wrap gap-3">
|
||
<button class="btn btn-outline-tennis" onclick="addNewClub()">
|
||
<i class="fas fa-plus-circle me-2"></i>Добавить клуб
|
||
</button>
|
||
<button class="btn btn-outline-tennis" onclick="createTournament()">
|
||
<i class="fas fa-trophy me-2"></i>Создать турнир
|
||
</button>
|
||
<button class="btn btn-outline-tennis" onclick="sendNotification()">
|
||
<i class="fas fa-bell me-2"></i>Отправить уведомление
|
||
</button>
|
||
<button class="btn btn-outline-tennis" onclick="generateReport()">
|
||
<i class="fas fa-chart-bar me-2"></i>Создать отчет
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Футер -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4">
|
||
<h3><i class="fas fa-tennis-ball me-2"></i>TennisHub</h3>
|
||
<p class="mt-3">Объединяем теннисное сообщество: клубы, игроки, турниры и события.</p>
|
||
<div class="mt-4">
|
||
<a href="#" class="social-icon"><i class="fab fa-vk"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-telegram"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h5>Разделы</h5>
|
||
<ul class="list-unstyled">
|
||
<li><a href="#clubs" class="text-light text-decoration-none">Клубы</a></li>
|
||
<li><a href="#events" class="text-light text-decoration-none">События</a></li>
|
||
<li><a href="#booking" class="text-light text-decoration-none">Бронирование</a></li>
|
||
<li><a href="#admin" class="text-light text-decoration-none">Админка</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-3 col-md-4 mb-4">
|
||
<h5>Помощь</h5>
|
||
<ul class="list-unstyled">
|
||
<li><a href="#" class="text-light text-decoration-none">FAQ</a></li>
|
||
<li><a href="#" class="text-light text-decoration-none">Правила бронирования</a></li>
|
||
<li><a href="#" class="text-light text-decoration-none">Условия турниров</a></li>
|
||
<li><a href="#" class="text-light text-decoration-none">Контакты</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-3 col-md-4 mb-4">
|
||
<h5>Контакты</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="fas fa-phone me-2"></i> 8 (800) 555-87-23</li>
|
||
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@tennishub.ru</li>
|
||
<li><i class="fas fa-map-marker-alt me-2"></i> Москва, ул. Спортивная, 10</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-4">
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<p>© 2024 TennisHub. Все права защищены.</p>
|
||
</div>
|
||
<div class="col-md-6 text-md-end">
|
||
<a href="#" class="text-light text-decoration-none me-3">Политика конфиденциальности</a>
|
||
<a href="#" class="text-light text-decoration-none">Пользовательское соглашение</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Модальные окна -->
|
||
<div class="modal fade" id="loginModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Вход в систему</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="loginForm">
|
||
<div class="mb-3">
|
||
<label class="form-label">Email</label>
|
||
<input type="email" class="form-control" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Пароль</label>
|
||
<input type="password" class="form-control" required>
|
||
</div>
|
||
<div class="mb-3 form-check">
|
||
<input type="checkbox" class="form-check-input">
|
||
<label class="form-check-label">Запомнить меня</label>
|
||
</div>
|
||
<div class="d-grid gap-2">
|
||
<button type="submit" class="btn btn-tennis">Войти</button>
|
||
<button type="button" class="btn btn-outline-secondary">Регистрация</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="bookingModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Бронирование корта</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="courtInfo"></p>
|
||
<form id="bookingForm">
|
||
<div class="mb-3">
|
||
<label class="form-label">Дата и время</label>
|
||
<input type="text" class="form-control" id="bookingDateTime" readonly>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Длительность (часов)</label>
|
||
<select class="form-select" id="duration">
|
||
<option value="1">1 час</option>
|
||
<option value="2">2 часа</option>
|
||
<option value="3">3 часа</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Количество игроков</label>
|
||
<input type="number" class="form-control" min="1" max="4" value="2">
|
||
</div>
|
||
<div class="d-grid">
|
||
<button type="submit" class="btn btn-tennis">Забронировать</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
// Инициализация модальных окон
|
||
const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
|
||
const bookingModal = new bootstrap.Modal(document.getElementById('bookingModal'));
|
||
|
||
// Данные системы
|
||
let bookings = [];
|
||
let events = [];
|
||
let clubs = [
|
||
{ id: 1, name: 'Tennis Premium', courts: 12, price: 1200 },
|
||
{ id: 2, name: 'Family Tennis', courts: 8, price: 800 },
|
||
{ id: 3, name: 'Start Tennis', courts: 6, price: 500 }
|
||
];
|
||
|
||
// Функции показа модальных окон
|
||
function showLoginModal() {
|
||
loginModal.show();
|
||
}
|
||
|
||
// Бронирование корта
|
||
function bookCourt(courtNumber) {
|
||
const courtInfo = `Корт #${courtNumber} • Tennis Premium Club`;
|
||
document.getElementById('courtInfo').textContent = courtInfo;
|
||
document.getElementById('bookingDateTime').value = 'Сегодня, 10:00-11:00';
|
||
bookingModal.show();
|
||
}
|
||
|
||
// Просмотр деталей клуба
|
||
function viewClubDetails(clubId) {
|
||
const club = clubs.find(c => c.id === clubId);
|
||
alert(`Клуб: ${club.name}\nКортов: ${club.courts}\nЦена от: ${club.price}₽/час`);
|
||
}
|
||
|
||
// Регистрация на событие
|
||
function registerForEvent(eventId) {
|
||
alert('Вы зарегистрированы на событие! Подтверждение отправлено на email.');
|
||
}
|
||
|
||
// Админские функции
|
||
function manageClubs() {
|
||
alert('Переход в панель управления клубами');
|
||
// Здесь будет переход на страницу управления
|
||
}
|
||
|
||
function manageEvents() {
|
||
alert('Переход в панель управления событиями');
|
||
}
|
||
|
||
function manageUsers() {
|
||
alert('Переход в панель управления пользователями');
|
||
}
|
||
|
||
function addNewClub() {
|
||
alert('Форма добавления нового клуба');
|
||
}
|
||
|
||
function createTournament() {
|
||
alert('Создание нового турнира');
|
||
}
|
||
|
||
function sendNotification() {
|
||
alert('Отправка уведомления пользователям');
|
||
}
|
||
|
||
function generateReport() {
|
||
alert('Генерация отчета по активности');
|
||
}
|
||
|
||
function showBookingHistory() {
|
||
alert('Показать историю бронирований');
|
||
}
|
||
|
||
// Обработка форм
|
||
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('Вход выполнен успешно!');
|
||
loginModal.hide();
|
||
});
|
||
|
||
document.getElementById('bookingForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('Корт успешно забронирован!');
|
||
bookingModal.hide();
|
||
|
||
// Добавляем бронирование
|
||
const booking = {
|
||
id: bookings.length + 1,
|
||
court: document.getElementById('courtInfo').textContent,
|
||
date: document.getElementById('bookingDateTime').value,
|
||
duration: document.getElementById('duration').value
|
||
};
|
||
|
||
bookings.push(booking);
|
||
updateBookingsDisplay();
|
||
updateStats();
|
||
});
|
||
|
||
document.getElementById('createEventForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('Событие создано! Ожидает модерации.');
|
||
this.reset();
|
||
updateStats();
|
||
});
|
||
|
||
// Обновление отображения бронирований
|
||
function updateBookingsDisplay() {
|
||
const bookingsContainer = document.getElementById('myBookings');
|
||
if (bookings.length === 0) {
|
||
bookingsContainer.innerHTML = '<p class="text-muted">У вас пока нет активных бронирований</p>';
|
||
} else {
|
||
bookingsContainer.innerHTML = bookings.map(booking => `
|
||
<div class="border-bottom pb-2 mb-2">
|
||
<div class="fw-bold">${booking.court}</div>
|
||
<div class="text-muted small">${booking.date} • ${booking.duration} час</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
}
|
||
|
||
// Обновление статистики
|
||
function updateStats() {
|
||
document.getElementById('activeBookings').textContent = bookings.length;
|
||
document.getElementById('pendingEvents').textContent = Math.floor(Math.random() * 5) + 1;
|
||
document.getElementById('newUsers').textContent = Math.floor(Math.random() * 10) + 1;
|
||
}
|
||
|
||
// Инициализация
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
updateBookingsDisplay();
|
||
updateStats();
|
||
|
||
// Плавная прокрутка
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const targetId = this.getAttribute('href');
|
||
if (targetId === '#') return;
|
||
|
||
const targetElement = document.querySelector(targetId);
|
||
if (targetElement) {
|
||
targetElement.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Анимация при прокрутке
|
||
window.addEventListener('scroll', function() {
|
||
const nav = document.querySelector('.navbar');
|
||
if (window.scrollY > 100) {
|
||
nav.classList.add('shadow');
|
||
} else {
|
||
nav.classList.remove('shadow');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |