morgan/Tennis-Site
1
0
Fork 0
mirror of https://github.com/LOBSTERVOVA/Tennis-Site.git synced 2026-04-17 17:40:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

поправил мобильную верстку

Browse Source
This commit is contained in:
Lobstervova
2026-03-31 23:41:56 +03:00
parent a080304b00
commit daa96f8480
62 changed files with 772 additions and 14082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/main/resources/templates/all-html.html
View File

@@ -15,12 +15,12 @@
--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');
@@ -28,19 +28,19 @@
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;
@@ -50,56 +50,56 @@
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;
@@ -112,7 +112,7 @@
font-size: 24px;
margin: 0 auto 15px;
}
.event-date {
position: absolute;
top: 15px;
@@ -123,24 +123,24 @@
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;
@@ -150,12 +150,12 @@
width: 3px;
background: var(--tennis-green);
}
.timeline-item {
position: relative;
margin-bottom: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
@@ -168,12 +168,12 @@
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;
@@ -183,14 +183,14 @@
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);
@@ -199,24 +199,24 @@
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;
@@ -225,43 +225,43 @@
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;
@@ -273,40 +273,40 @@
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;
@@ -316,16 +316,16 @@
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);
@@ -369,7 +369,7 @@
<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">
@@ -385,8 +385,8 @@
</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"
<img src="https://avatars.mds.yandex.net/get-altay/1880524/2a0000016ef11d02f18395e01a44f0ddbdb7/XXL_height"
class="img-fluid rounded-3 shadow-lg"
alt="Теннисный корт">
</div>
</div>
@@ -426,12 +426,12 @@
<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"
<img src="https://avatars.mds.yandex.net/get-altay/13234017/2a0000018f10863585acfe01f89a2cc9f5bf/XXL_height"
class="card-img-top"
height="200"
style="object-fit: cover;"
alt="Премиум клуб">
@@ -453,11 +453,11 @@
</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"
<img src="https://avatars.mds.yandex.net/get-altay/9717139/2a00000189f35961d519003fa4d01c7abc03/XXXL"
class="card-img-top"
height="200"
style="object-fit: cover;"
alt="Семейный клуб">
@@ -479,11 +479,11 @@
</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"
<img src="https://avatars.mds.yandex.net/get-altay/9704097/2a000001879afb065e3d55101628110130ad/XXL_height"
class="card-img-top"
height="200"
style="object-fit: cover;"
alt="Клуб для начинающих">
@@ -506,7 +506,7 @@
</div>
</div>
</div>
<div class="text-center mt-5">
<button class="btn btn-outline-tennis">
<i class="fas fa-plus me-2"></i>Показать все клубы (24)
@@ -524,7 +524,7 @@
<p class="text-muted">Участвуйте в соревнованиях и теннисных событиях</p>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="row g-4">
@@ -533,8 +533,8 @@
<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"
<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="Чемпионат города">
@@ -549,14 +549,14 @@
</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"
<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="Детский турнир">
@@ -572,7 +572,7 @@
</div>
</div>
</div>
<div class="mt-5">
<h4 class="mb-4">Расписание событий</h4>
<div class="timeline">
@@ -594,7 +594,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header bg-success text-white">
@@ -651,7 +651,7 @@
<p class="text-muted">Забронируйте корт онлайн в удобное время</p>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="card">
@@ -667,7 +667,7 @@
<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>
@@ -704,11 +704,11 @@
</div>
</div>
</div>
<div class="tab-pane fade" id="tomorrow">
<!-- Контент для завтра -->
</div>
<div class="tab-pane fade" id="week">
<!-- Контент для недели -->
</div>
@@ -716,7 +716,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header bg-primary text-white">
@@ -747,7 +747,7 @@
<p class="text-muted">Управляйте клубами, событиями и пользователями</p>
</div>
</div>
<div class="admin-section">
<div class="row">
<div class="col-md-4 mb-4">
@@ -764,7 +764,7 @@
</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">
@@ -779,7 +779,7 @@
</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">
@@ -795,7 +795,7 @@
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="card">
@@ -833,7 +833,7 @@
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="card">
@@ -877,7 +877,7 @@
<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">
@@ -887,7 +887,7 @@
<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">
@@ -897,7 +897,7 @@
<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">
@@ -907,9 +907,9 @@
</ul>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-6">
<p>© 2024 TennisHub. Все права защищены.</p>
@@ -994,7 +994,7 @@
// Инициализация модальных окон
const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
const bookingModal = new bootstrap.Modal(document.getElementById('bookingModal'));
// Данные системы
let bookings = [];
let events = [];
@@ -1003,12 +1003,12 @@
{ 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`;
@@ -1016,64 +1016,64 @@
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,
@@ -1081,19 +1081,19 @@
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');
@@ -1108,26 +1108,26 @@
`).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({
@@ -1137,7 +1137,7 @@
}
});
});
// Анимация при прокрутке
window.addEventListener('scroll', function() {
const nav = document.querySelector('.navbar');