mirror of
https://github.com/LOBSTERVOVA/Tennis-Site.git
synced 2026-04-17 17:40:49 +03:00
1338 lines
65 KiB
HTML
1338 lines
65 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>DatePlanner - Личный кабинет</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">
|
||
<style>
|
||
:root {
|
||
--love-red: #e74c3c;
|
||
--romantic-pink: #fd79a8;
|
||
--cozy-orange: #e67e22;
|
||
--intellectual-blue: #3498db;
|
||
--adventure-green: #2ecc71;
|
||
--mystery-purple: #9b59b6;
|
||
--dark-mode: #2d3436;
|
||
--light-bg: #f9f7f7;
|
||
}
|
||
|
||
body {
|
||
background-color: #f8f9fa;
|
||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||
}
|
||
|
||
.navbar-brand {
|
||
font-weight: 800;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.sidebar {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 25px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
|
||
position: sticky;
|
||
top: 30px;
|
||
height: fit-content;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 5px solid white;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.profile-completion {
|
||
background: var(--light-bg);
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.completion-percentage {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--love-red);
|
||
line-height: 1;
|
||
}
|
||
|
||
.nav-link-custom {
|
||
color: var(--dark-mode);
|
||
padding: 15px 20px;
|
||
border-radius: 15px;
|
||
margin-bottom: 10px;
|
||
transition: all 0.3s;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nav-link-custom:hover {
|
||
background: rgba(231, 76, 60, 0.1);
|
||
color: var(--love-red);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.nav-link-custom.active {
|
||
background: rgba(231, 76, 60, 0.1);
|
||
color: var(--love-red);
|
||
border-left: 4px solid var(--love-red);
|
||
}
|
||
|
||
.main-content {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
|
||
min-height: 600px;
|
||
}
|
||
|
||
.section-title {
|
||
border-bottom: 3px solid var(--light-bg);
|
||
padding-bottom: 15px;
|
||
margin-bottom: 30px;
|
||
position: relative;
|
||
}
|
||
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -3px;
|
||
left: 0;
|
||
width: 100px;
|
||
height: 3px;
|
||
background: var(--love-red);
|
||
}
|
||
|
||
.btn-heart {
|
||
background: var(--love-red);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 30px;
|
||
border-radius: 50px;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-heart:hover {
|
||
background: #c0392b;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
|
||
color: white;
|
||
}
|
||
|
||
.btn-outline-heart {
|
||
border: 2px solid var(--love-red);
|
||
color: var(--love-red);
|
||
padding: 10px 25px;
|
||
border-radius: 50px;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-outline-heart:hover {
|
||
background: var(--love-red);
|
||
color: white;
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.heart-icon {
|
||
color: var(--love-red);
|
||
}
|
||
|
||
.profile-field {
|
||
background: var(--light-bg);
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.field-label {
|
||
font-weight: 600;
|
||
color: var(--dark-mode);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.field-value {
|
||
color: #666;
|
||
}
|
||
|
||
.edit-icon {
|
||
color: var(--love-red);
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.edit-icon:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.interest-tag {
|
||
display: inline-block;
|
||
background: rgba(52, 152, 219, 0.1);
|
||
color: var(--intellectual-blue);
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
margin: 5px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.proposal-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||
border-left: 4px solid var(--love-red);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.proposal-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.proposal-status {
|
||
padding: 6px 15px;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-open { background: #2ecc71; color: white; }
|
||
.status-pending { background: #f39c12; color: white; }
|
||
.status-closed { background: #95a5a6; color: white; }
|
||
|
||
.organization-card {
|
||
background: linear-gradient(135deg, #fdfcfb 0%, #f9f7f7 100%);
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
margin-bottom: 20px;
|
||
border: 2px solid transparent;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.organization-card:hover {
|
||
border-color: var(--love-red);
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.org-stats {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--love-red);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.8rem;
|
||
color: #666;
|
||
}
|
||
|
||
.event-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.event-img {
|
||
width: 100%;
|
||
height: 150px;
|
||
object-fit: cover;
|
||
border-radius: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.match-badge {
|
||
background: linear-gradient(45deg, var(--love-red), var(--romantic-pink));
|
||
color: white;
|
||
padding: 5px 15px;
|
||
border-radius: 20px;
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.notification-badge {
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
background: var(--love-red);
|
||
color: white;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
font-size: 0.7rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.progress {
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.progress-bar {
|
||
background-color: var(--love-red);
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.form-control-custom {
|
||
border: 2px solid #eee;
|
||
border-radius: 15px;
|
||
padding: 15px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.form-control-custom:focus {
|
||
border-color: var(--love-red);
|
||
box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
|
||
}
|
||
|
||
.badge-category {
|
||
padding: 5px 15px;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.badge-romantic { background: rgba(253, 121, 168, 0.2); color: var(--romantic-pink); }
|
||
.badge-active { background: rgba(46, 204, 113, 0.2); color: var(--adventure-green); }
|
||
.badge-intellectual { background: rgba(52, 152, 219, 0.2); color: var(--intellectual-blue); }
|
||
.badge-cozy { background: rgba(230, 126, 34, 0.2); color: var(--cozy-orange); }
|
||
|
||
@media (max-width: 768px) {
|
||
.sidebar {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.main-content {
|
||
padding: 25px;
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.empty-state-icon {
|
||
font-size: 4rem;
|
||
color: #ddd;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tab-content {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.nav-tabs .nav-link {
|
||
color: var(--dark-mode);
|
||
border: none;
|
||
border-bottom: 3px solid transparent;
|
||
padding: 10px 20px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nav-tabs .nav-link.active {
|
||
color: var(--love-red);
|
||
border-bottom: 3px solid var(--love-red);
|
||
background: transparent;
|
||
}
|
||
|
||
.settings-option {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px;
|
||
border-bottom: 1px solid #eee;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.settings-option:hover {
|
||
background: var(--light-bg);
|
||
}
|
||
|
||
.switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 60px;
|
||
height: 34px;
|
||
}
|
||
|
||
.switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #ccc;
|
||
transition: .4s;
|
||
border-radius: 34px;
|
||
}
|
||
|
||
.slider:before {
|
||
position: absolute;
|
||
content: "";
|
||
height: 26px;
|
||
width: 26px;
|
||
left: 4px;
|
||
bottom: 4px;
|
||
background-color: white;
|
||
transition: .4s;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
input:checked + .slider {
|
||
background-color: var(--love-red);
|
||
}
|
||
|
||
input:checked + .slider:before {
|
||
transform: translateX(26px);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Навигация -->
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">
|
||
<i class="fas fa-heart heart-icon me-2"></i>DatePlanner
|
||
</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="index.html">Главная</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="dates.html">Найти свидание</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="profile.html">Личный кабинет</a>
|
||
</li>
|
||
</ul>
|
||
<div class="dropdown ms-3">
|
||
<button class="btn btn-outline-heart dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||
<img src="https://images.unsplash.com/photo-1494790108755-2616b786d4d9?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80"
|
||
class="rounded-circle me-2" width="30" height="30">
|
||
Анна
|
||
<span class="notification-badge">3</span>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i>Мой профиль</a></li>
|
||
<li><a class="dropdown-item" href="#settings"><i class="fas fa-cog me-2"></i>Настройки</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i>Выйти</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Основной контент -->
|
||
<div class="container py-5">
|
||
<div class="row">
|
||
<!-- Боковая панель -->
|
||
<div class="col-lg-4 mb-4">
|
||
<div class="sidebar">
|
||
<div class="text-center">
|
||
<img src="https://images.unsplash.com/photo-1494790108755-2616b786d4d9?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
|
||
class="user-avatar" alt="Анна">
|
||
<h4 class="mb-1">Анна, 26</h4>
|
||
<p class="text-muted mb-3">Москва</p>
|
||
<div class="match-badge">Профиль на 85%</div>
|
||
</div>
|
||
|
||
<div class="profile-completion">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>Заполненность профиля:</span>
|
||
<span class="completion-percentage">85%</span>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 85%"></div>
|
||
</div>
|
||
<p class="small text-muted mt-2 mb-0">Полный профиль привлекает на 60% больше откликов</p>
|
||
</div>
|
||
|
||
<nav class="nav flex-column">
|
||
<a class="nav-link-custom active" href="#" onclick="showSection('profile')">
|
||
<i class="fas fa-user me-3"></i>Мой профиль
|
||
</a>
|
||
<a class="nav-link-custom" href="#" onclick="showSection('proposals')">
|
||
<i class="fas fa-heart me-3"></i>Мои предложения
|
||
<span class="notification-badge">3</span>
|
||
</a>
|
||
<a class="nav-link-custom" href="#" onclick="showSection('organizations')">
|
||
<i class="fas fa-building me-3"></i>Мои организации
|
||
</a>
|
||
<a class="nav-link-custom" href="#" onclick="showSection('events')">
|
||
<i class="fas fa-calendar-alt me-3"></i>Мероприятия
|
||
</a>
|
||
<a class="nav-link-custom" href="#" onclick="showSection('settings')">
|
||
<i class="fas fa-cog me-3"></i>Настройки
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="mt-4">
|
||
<button class="btn btn-heart w-100" onclick="createNewProposal()">
|
||
<i class="fas fa-plus me-2"></i>Предложить свидание
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Основной контент -->
|
||
<div class="col-lg-8">
|
||
<div class="main-content">
|
||
<!-- Профиль -->
|
||
<div id="profileSection" class="section-content">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="section-title mb-0">Мой профиль</h2>
|
||
<button class="btn btn-outline-heart" onclick="editProfile()">
|
||
<i class="fas fa-edit me-2"></i>Редактировать
|
||
</button>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="profile-field">
|
||
<div class="d-flex justify-content-between">
|
||
<div class="field-label">О себе</div>
|
||
<i class="fas fa-edit edit-icon" onclick="editField('about')"></i>
|
||
</div>
|
||
<div class="field-value" id="aboutField">
|
||
Люблю искусство, путешествия и хорошее вино. Работаю графическим дизайнером. В поиске интересного собеседника для романтических прогулок по городу.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="profile-field">
|
||
<div class="d-flex justify-content-between">
|
||
<div class="field-label">Интересы</div>
|
||
<i class="fas fa-edit edit-icon" onclick="editField('interests')"></i>
|
||
</div>
|
||
<div id="interestsField">
|
||
<span class="interest-tag">Искусство</span>
|
||
<span class="interest-tag">Путешествия</span>
|
||
<span class="interest-tag">Вино</span>
|
||
<span class="interest-tag">Фотография</span>
|
||
<span class="interest-tag">Кино</span>
|
||
<span class="interest-tag">Йога</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="profile-field">
|
||
<div class="d-flex justify-content-between">
|
||
<div class="field-label">Предпочтения в свиданиях</div>
|
||
<i class="fas fa-edit edit-icon" onclick="editField('preferences')"></i>
|
||
</div>
|
||
<div class="field-value" id="preferencesField">
|
||
Романтические ужины, прогулки по городу, посещение выставок. Люблю интеллектуальные беседы и открыта для новых впечатлений.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="profile-field">
|
||
<div class="d-flex justify-content-between">
|
||
<div class="field-label">Контактная информация</div>
|
||
<i class="fas fa-edit edit-icon" onclick="editField('contact')"></i>
|
||
</div>
|
||
<div class="field-value">
|
||
<div><i class="fas fa-envelope me-2"></i> anna@example.com</div>
|
||
<div class="mt-2"><i class="fas fa-phone me-2"></i> +7 (999) 123-45-67</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="profile-field">
|
||
<div class="d-flex justify-content-between">
|
||
<div class="field-label">Статистика</div>
|
||
</div>
|
||
<div class="row text-center mt-3">
|
||
<div class="col-4">
|
||
<div class="stat-number">12</div>
|
||
<div class="stat-label">Предложений</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="stat-number">8</div>
|
||
<div class="stat-label">Свиданий</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="stat-number">94%</div>
|
||
<div class="stat-label">Совпадений</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Мои предложения -->
|
||
<div id="proposalsSection" class="section-content" style="display: none;">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="section-title mb-0">Мои предложения свиданий</h2>
|
||
<button class="btn btn-heart" onclick="createNewProposal()">
|
||
<i class="fas fa-plus me-2"></i>Новое предложение
|
||
</button>
|
||
</div>
|
||
|
||
<ul class="nav nav-tabs" id="proposalsTab">
|
||
<li class="nav-item">
|
||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#active-proposals">Активные (3)</button>
|
||
</li>
|
||
<li class="nav-item">
|
||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#pending-proposals">На рассмотрении (2)</button>
|
||
</li>
|
||
<li class="nav-item">
|
||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#completed-proposals">Завершенные</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="tab-content" id="proposalsTabContent">
|
||
<!-- Активные предложения -->
|
||
<div class="tab-pane fade show active" id="active-proposals">
|
||
<div class="proposal-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<div>
|
||
<h5 class="mb-1">Романтический ужин с видом на город</h5>
|
||
<p class="text-muted mb-2">Ресторан "Панорама" | Сегодня, 20:00 | 4,500₽</p>
|
||
</div>
|
||
<span class="proposal-status status-open">Активно</span>
|
||
</div>
|
||
<p class="mb-3">"Ищу интересного собеседника для ужина с панорамным видом на город. Люблю искусство и хорошие истории."</p>
|
||
|
||
<div class="mb-3">
|
||
<h6>Отклики (3):</h6>
|
||
<div class="d-flex align-items-center mb-2">
|
||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80"
|
||
class="rounded-circle me-2" width="40" height="40">
|
||
<div>
|
||
<strong>Алексей, 28</strong>
|
||
<span class="match-badge ms-2">87%</span>
|
||
</div>
|
||
<div class="ms-auto">
|
||
<button class="btn btn-heart btn-sm" onclick="acceptProposal(1)">
|
||
<i class="fas fa-check me-1"></i>Принять
|
||
</button>
|
||
<button class="btn btn-outline-heart btn-sm" onclick="declineProposal(1)">
|
||
<i class="fas fa-times me-1"></i>Отклонить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between">
|
||
<button class="btn btn-outline-heart btn-sm" onclick="editProposal(1)">
|
||
<i class="fas fa-edit me-1"></i>Изменить
|
||
</button>
|
||
<button class="btn btn-outline-heart btn-sm" onclick="cancelProposal(1)">
|
||
<i class="fas fa-times me-1"></i>Отменить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="proposal-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<div>
|
||
<h5 class="mb-1">Прогулка по набережной</h5>
|
||
<p class="text-muted mb-2">Парк Горького | Завтра, 18:00 | Бесплатно</p>
|
||
</div>
|
||
<span class="proposal-status status-open">Активно</span>
|
||
</div>
|
||
<p class="mb-3">"Предлагаю неспешную прогулку по набережной, разговор по душам и возможно мороженое."</p>
|
||
|
||
<div class="d-flex justify-content-between">
|
||
<div>
|
||
<span class="badge-category badge-romantic">Романтическое</span>
|
||
<span class="badge-category badge-active">Активное</span>
|
||
</div>
|
||
<button class="btn btn-outline-heart btn-sm" onclick="viewResponses(2)">
|
||
<i class="fas fa-users me-1"></i>2 отклика
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Предложения на рассмотрении -->
|
||
<div class="tab-pane fade" id="pending-proposals">
|
||
<div class="proposal-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<div>
|
||
<h5 class="mb-1">Винный тур по подвалам</h5>
|
||
<p class="text-muted mb-2">Винный бар "Подвал" | Суббота, 19:00 | 2,800₽</p>
|
||
</div>
|
||
<span class="proposal-status status-pending">Жду ответа</span>
|
||
</div>
|
||
<p class="mb-3">"Откликнулся на ваше предложение. Очень хотел бы присоединиться!"</p>
|
||
|
||
<div class="d-flex align-items-center">
|
||
<img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80"
|
||
class="rounded-circle me-3" width="50" height="50">
|
||
<div>
|
||
<strong>Дмитрий, 30</strong>
|
||
<div class="match-badge">89% совпадение</div>
|
||
</div>
|
||
<div class="ms-auto">
|
||
<button class="btn btn-heart btn-sm" onclick="acceptResponse(3)">
|
||
<i class="fas fa-check me-1"></i>Принять
|
||
</button>
|
||
<button class="btn btn-outline-heart btn-sm" onclick="declineResponse(3)">
|
||
<i class="fas fa-times me-1"></i>Отклонить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Мои организации -->
|
||
<div id="organizationsSection" class="section-content" style="display: none;">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="section-title mb-0">Мои организации</h2>
|
||
<button class="btn btn-heart" onclick="createOrganization()">
|
||
<i class="fas fa-plus me-2"></i>Создать организацию
|
||
</button>
|
||
</div>
|
||
|
||
<p class="text-muted mb-4">Управляйте своими организациями, добавляйте места и мероприятия для свиданий</p>
|
||
|
||
<div class="organization-card">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<h5 class="mb-2">Кафе "Уютный уголок"</h5>
|
||
<p class="text-muted mb-3">Небольшое кафе с домашней атмосферой, идеальное для первых свиданий</p>
|
||
<div>
|
||
<span class="badge-category badge-cozy">Уютное</span>
|
||
<span class="badge-category badge-romantic">Романтическое</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="proposal-status status-open">Активно</div>
|
||
<div class="mt-2">
|
||
<button class="btn btn-outline-heart btn-sm" onclick="editOrganization(1)">
|
||
<i class="fas fa-edit me-1"></i>Редактировать
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="org-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-number">3</div>
|
||
<div class="stat-label">Места</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">12</div>
|
||
<div class="stat-label">Свидания</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">4.7</div>
|
||
<div class="stat-label">Рейтинг</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">156</div>
|
||
<div class="stat-label">Просмотры</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="organization-card">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<h5 class="mb-2">Квест-комната "Тайна"</h5>
|
||
<p class="text-muted mb-3">Интерактивные квесты для пар, которые любят загадки и приключения</p>
|
||
<div>
|
||
<span class="badge-category badge-active">Активное</span>
|
||
<span class="badge-category badge-intellectual">Интеллектуальное</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="proposal-status status-open">Активно</div>
|
||
<div class="mt-2">
|
||
<button class="btn btn-outline-heart btn-sm" onclick="editOrganization(2)">
|
||
<i class="fas fa-edit me-1"></i>Редактировать
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="org-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-number">2</div>
|
||
<div class="stat-label">Квеста</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">24</div>
|
||
<div class="stat-label">Свидания</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">4.9</div>
|
||
<div class="stat-label">Рейтинг</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">289</div>
|
||
<div class="stat-label">Просмотры</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4">
|
||
<button class="btn btn-outline-heart" onclick="createOrganization()">
|
||
<i class="fas fa-plus-circle me-2"></i>Создать новую организацию
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Мероприятия -->
|
||
<div id="eventsSection" class="section-content" style="display: none;">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="section-title mb-0">Мероприятия организаций</h2>
|
||
<button class="btn btn-heart" onclick="createEvent()">
|
||
<i class="fas fa-plus me-2"></i>Создать мероприятие
|
||
</button>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 mb-4">
|
||
<div class="event-card">
|
||
<img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
|
||
class="event-img" alt="Вечер живого джаза">
|
||
<h5>Вечер живого джаза</h5>
|
||
<p class="text-muted mb-2">Кафе "Уютный уголок" | 15 марта, 20:00</p>
|
||
<p>Романтический вечер под живую джазовую музыку. Ограниченное количество мест.</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="price-tag">1,500₽</span>
|
||
<button class="btn btn-heart btn-sm" onclick="viewEvent(1)">
|
||
<i class="fas fa-eye me-1"></i>Подробнее
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-4">
|
||
<div class="event-card">
|
||
<img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
|
||
class="event-img" alt="Новый квест">
|
||
<h5>Запуск нового квеста</h5>
|
||
<p class="text-muted mb-2">Квест-комната "Тайна" | 20-31 марта</p>
|
||
<p>Эксклюзивный запуск квеста "Побег из библиотеки" для пар.</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="price-tag">2,500₽</span>
|
||
<button class="btn btn-heart btn-sm" onclick="viewEvent(2)">
|
||
<i class="fas fa-eye me-1"></i>Подробнее
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<button class="btn btn-outline-heart" onclick="viewAllEvents()">
|
||
<i class="fas fa-list me-2"></i>Посмотреть все мероприятия
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Настройки -->
|
||
<div id="settingsSection" class="section-content" style="display: none;">
|
||
<h2 class="section-title mb-4">Настройки</h2>
|
||
|
||
<div class="settings-option">
|
||
<div>
|
||
<h6>Уведомления по email</h6>
|
||
<p class="text-muted small mb-0">Получать уведомления о новых откликах и сообщениях</p>
|
||
</div>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="settings-option">
|
||
<div>
|
||
<h6>СМС уведомления</h6>
|
||
<p class="text-muted small mb-0">Получать напоминания о свиданиях</p>
|
||
</div>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="settings-option">
|
||
<div>
|
||
<h6>Показывать профиль в поиске</h6>
|
||
<p class="text-muted small mb-0">Другие пользователи могут находить ваш профиль</p>
|
||
</div>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="settings-option">
|
||
<div>
|
||
<h6>Автоподтверждение свиданий</h6>
|
||
<p class="text-muted small mb-0">Автоматически подтверждать свидания от проверенных пользователей</p>
|
||
</div>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<h5 class="mb-3">Конфиденциальность</h5>
|
||
<div class="settings-option">
|
||
<div>
|
||
<h6>Скрыть возраст</h6>
|
||
<p class="text-muted small mb-0">Не показывать возраст в профиле</p>
|
||
</div>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="settings-option">
|
||
<div>
|
||
<h6>Скрыть местоположение</h6>
|
||
<p class="text-muted small mb-0">Показывать только город, не точный район</p>
|
||
</div>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<button class="btn btn-outline-heart me-3">
|
||
<i class="fas fa-download me-2"></i>Экспорт данных
|
||
</button>
|
||
<button class="btn btn-outline-heart">
|
||
<i class="fas fa-trash me-2"></i>Удалить аккаунт
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальные окна -->
|
||
<div class="modal fade" id="editProfileModal" tabindex="-1">
|
||
<div class="modal-dialog modal-lg">
|
||
<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="editProfileForm">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">Имя</label>
|
||
<input type="text" class="form-control form-control-custom" value="Анна" required>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">Возраст</label>
|
||
<input type="number" class="form-control form-control-custom" value="26" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Город</label>
|
||
<input type="text" class="form-control form-control-custom" value="Москва" required>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">О себе</label>
|
||
<textarea class="form-control form-control-custom" rows="4">Люблю искусство, путешествия и хорошее вино. Работаю графическим дизайнером. В поиске интересного собеседника для романтических прогулок по городу.</textarea>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Интересы (через запятую)</label>
|
||
<input type="text" class="form-control form-control-custom" value="Искусство, Путешествия, Вино, Фотография, Кино, Йога">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Предпочтения в свиданиях</label>
|
||
<textarea class="form-control form-control-custom" rows="3">Романтические ужины, прогулки по городу, посещение выставок. Люблю интеллектуальные беседы и открыта для новых впечатлений.</textarea>
|
||
</div>
|
||
|
||
<div class="d-grid gap-2">
|
||
<button type="submit" class="btn btn-heart">Сохранить изменения</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="createOrganizationModal" tabindex="-1">
|
||
<div class="modal-dialog modal-lg">
|
||
<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="createOrganizationForm">
|
||
<div class="mb-3">
|
||
<label class="form-label">Название организации *</label>
|
||
<input type="text" class="form-control form-control-custom" required placeholder="Например: Кафе 'Романтика'">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Описание *</label>
|
||
<textarea class="form-control form-control-custom" rows="3" required placeholder="Опишите вашу организацию..."></textarea>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">Тип организации</label>
|
||
<select class="form-select form-control-custom">
|
||
<option>Ресторан/Кафе</option>
|
||
<option>Квест-комната</option>
|
||
<option>Кинотеатр</option>
|
||
<option>Музей/Галерея</option>
|
||
<option>Спа/Сауна</option>
|
||
<option>Другое</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">Категории для свиданий</label>
|
||
<select class="form-select form-control-custom" multiple>
|
||
<option>Романтическое</option>
|
||
<option>Активное</option>
|
||
<option>Интеллектуальное</option>
|
||
<option>Уютное</option>
|
||
<option>Тайна/Приключение</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Адрес</label>
|
||
<input type="text" class="form-control form-control-custom" placeholder="Улица, дом">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Ссылка на фото</label>
|
||
<input type="url" class="form-control form-control-custom" placeholder="https://...">
|
||
</div>
|
||
|
||
<div class="d-grid gap-2">
|
||
<button type="submit" class="btn btn-heart">Создать организацию</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="createProposalModal" tabindex="-1">
|
||
<div class="modal-dialog modal-lg">
|
||
<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="createProposalForm">
|
||
<div class="mb-3">
|
||
<label class="form-label">Заголовок *</label>
|
||
<input type="text" class="form-control form-control-custom" required placeholder="Например: Романтический ужин с видом на город">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Описание *</label>
|
||
<textarea class="form-control form-control-custom" rows="3" required placeholder="Опишите, какое свидание вы предлагаете..."></textarea>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">Место</label>
|
||
<select class="form-select form-control-custom">
|
||
<option>Любое подходящее место</option>
|
||
<option>Ресторан "Панорама"</option>
|
||
<option>Парк Горького</option>
|
||
<option>Кинотеатр "Октябрь"</option>
|
||
<option>Другое</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">Категория</label>
|
||
<select class="form-select form-control-custom">
|
||
<option>Романтическое</option>
|
||
<option>Активное</option>
|
||
<option>Интеллектуальное</option>
|
||
<option>Уютное</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">Дата</label>
|
||
<input type="date" class="form-control form-control-custom">
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label class="form-label">Время</label>
|
||
<input type="time" class="form-control form-control-custom">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Примерный бюджет (на двоих)</label>
|
||
<input type="number" class="form-control form-control-custom" placeholder="₽">
|
||
</div>
|
||
|
||
<div class="d-grid gap-2">
|
||
<button type="submit" class="btn btn-heart">Опубликовать предложение</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Футер -->
|
||
<footer class="bg-dark text-white py-5 mt-5">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4">
|
||
<h3><i class="fas fa-heart heart-icon me-2"></i>DatePlanner</h3>
|
||
<p class="mt-3">Находите идеальные места для свиданий, создавайте незабываемые моменты и делитесь впечатлениями.</p>
|
||
</div>
|
||
|
||
<div class="col-lg-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>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-4 mb-4">
|
||
<h5>Контакты</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="fas fa-envelope me-2"></i> support@dateplanner.ru</li>
|
||
<li><i class="fas fa-map-marker-alt me-2"></i> Москва, ул. Романтическая, 7</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-4">
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<p>© 2024 DatePlanner. Все права защищены.</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>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
// Модальные окна
|
||
const editProfileModal = new bootstrap.Modal(document.getElementById('editProfileModal'));
|
||
const createOrganizationModal = new bootstrap.Modal(document.getElementById('createOrganizationModal'));
|
||
const createProposalModal = new bootstrap.Modal(document.getElementById('createProposalModal'));
|
||
|
||
// Текущая активная секция
|
||
let currentSection = 'profile';
|
||
|
||
// Показать секцию
|
||
function showSection(sectionId) {
|
||
// Скрыть все секции
|
||
document.querySelectorAll('.section-content').forEach(section => {
|
||
section.style.display = 'none';
|
||
});
|
||
|
||
// Показать выбранную секцию
|
||
document.getElementById(sectionId + 'Section').style.display = 'block';
|
||
|
||
// Обновить активную ссылку в навигации
|
||
document.querySelectorAll('.nav-link-custom').forEach(link => {
|
||
link.classList.remove('active');
|
||
});
|
||
event.currentTarget.classList.add('active');
|
||
|
||
currentSection = sectionId;
|
||
}
|
||
|
||
// Редактирование профиля
|
||
function editProfile() {
|
||
editProfileModal.show();
|
||
}
|
||
|
||
// Редактирование поля
|
||
function editField(fieldId) {
|
||
let newValue = prompt('Введите новое значение:');
|
||
if (newValue !== null) {
|
||
document.getElementById(fieldId + 'Field').textContent = newValue;
|
||
}
|
||
}
|
||
|
||
// Создание организации
|
||
function createOrganization() {
|
||
createOrganizationModal.show();
|
||
}
|
||
|
||
// Редактирование организации
|
||
function editOrganization(id) {
|
||
alert('Редактирование организации #' + id);
|
||
}
|
||
|
||
// Создание предложения свидания
|
||
function createNewProposal() {
|
||
createProposalModal.show();
|
||
}
|
||
|
||
// Редактирование предложения
|
||
function editProposal(id) {
|
||
alert('Редактирование предложения #' + id);
|
||
}
|
||
|
||
// Отмена предложения
|
||
function cancelProposal(id) {
|
||
if (confirm('Вы уверены, что хотите отменить это предложение?')) {
|
||
alert('Предложение отменено.');
|
||
}
|
||
}
|
||
|
||
// Принятие предложения
|
||
function acceptProposal(id) {
|
||
if (confirm('Принять этого пользователя для свидания?')) {
|
||
alert('Вы приняли предложение! Теперь можете договориться о деталях.');
|
||
}
|
||
}
|
||
|
||
// Отклонение предложения
|
||
function declineProposal(id) {
|
||
if (confirm('Отклонить это предложение?')) {
|
||
alert('Предложение отклонено.');
|
||
}
|
||
}
|
||
|
||
// Просмотр ответов
|
||
function viewResponses(id) {
|
||
alert('Просмотр ответов на предложение #' + id);
|
||
}
|
||
|
||
// Принятие ответа
|
||
function acceptResponse(id) {
|
||
if (confirm('Принять этот ответ?')) {
|
||
alert('Ответ принят! Свидание подтверждено.');
|
||
}
|
||
}
|
||
|
||
// Отклонение ответа
|
||
function declineResponse(id) {
|
||
if (confirm('Отклонить этот ответ?')) {
|
||
alert('Ответ отклонен.');
|
||
}
|
||
}
|
||
|
||
// Создание мероприятия
|
||
function createEvent() {
|
||
alert('Создание нового мероприятия');
|
||
}
|
||
|
||
// Просмотр мероприятия
|
||
function viewEvent(id) {
|
||
alert('Просмотр мероприятия #' + id);
|
||
}
|
||
|
||
// Просмотр всех мероприятий
|
||
function viewAllEvents() {
|
||
alert('Просмотр всех мероприятий');
|
||
}
|
||
|
||
// Обработка формы редактирования профиля
|
||
document.getElementById('editProfileForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('Изменения сохранены!');
|
||
editProfileModal.hide();
|
||
});
|
||
|
||
// Обработка формы создания организации
|
||
document.getElementById('createOrganizationForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('Организация создана! Она появится в вашем кабинете после модерации.');
|
||
createOrganizationModal.hide();
|
||
});
|
||
|
||
// Обработка формы создания предложения
|
||
document.getElementById('createProposalForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('Предложение опубликовано!');
|
||
createProposalModal.hide();
|
||
});
|
||
|
||
// Инициализация
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Инициализация табов
|
||
const tabTriggers = document.querySelectorAll('#proposalsTab button');
|
||
tabTriggers.forEach(trigger => {
|
||
trigger.addEventListener('click', function() {
|
||
tabTriggers.forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// Плавная прокрутка
|
||
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'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |