<!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">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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;
        }
        
        /* ... все остальные стили без изменений ... */
        
        /* Добавляем новые стили для иконки авторизации */
        .auth-btn {
            background: linear-gradient(135deg, var(--love-red) 0%, var(--romantic-pink) 100%);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 8px 20px;
            font-weight: 600;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        
        .auth-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
            color: white;
        }
        
        .auth-btn-outline {
            background: transparent;
            border: 2px solid var(--love-red);
            color: var(--love-red);
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        
        .auth-btn-outline:hover {
            background: var(--love-red);
            color: white;
            transform: translateY(-2px);
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--love-red) 0%, var(--romantic-pink) 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            border: 2px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .dropdown-user {
            min-width: 250px;
        }
        
        .user-info {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .user-details h6 {
            margin: 0;
            font-weight: 600;
        }
        
        .user-details small {
            color: #666;
            font-size: 0.85rem;
        }
        
        .dropdown-item {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.2s;
        }
        
        .dropdown-item:hover {
            background: rgba(231, 76, 60, 0.1);
            color: var(--love-red);
        }
        
        .dropdown-divider {
            margin: 5px 0;
        }
        
        /* Модальное окно авторизации */
        .auth-tabs {
            border: none;
            margin-bottom: 20px;
        }
        
        .auth-tabs .nav-link {
            border: none;
            color: #666;
            font-weight: 500;
            padding: 10px 0;
            margin: 0 15px;
            position: relative;
        }
        
        .auth-tabs .nav-link.active {
            color: var(--love-red);
            background: none;
        }
        
        .auth-tabs .nav-link.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--love-red);
            border-radius: 3px;
        }
        
        .social-auth-btn {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .social-auth-btn:hover {
            border-color: var(--love-red);
            background: rgba(231, 76, 60, 0.05);
        }
        
        .social-auth-btn.vk { color: #4C75A3; }
        .social-auth-btn.google { color: #DB4437; }
        .social-auth-btn.yandex { color: #FF0000; }
        
        .auth-divider {
            text-align: center;
            position: relative;
            margin: 20px 0;
            color: #666;
        }
        
        .auth-divider:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #eee;
            z-index: 1;
        }
        
        .auth-divider span {
            background: white;
            padding: 0 15px;
            position: relative;
            z-index: 2;
        }
        
        .form-check-label {
            font-size: 0.9rem;
        }
        
        .forgot-password {
            font-size: 0.9rem;
            color: var(--love-red);
            text-decoration: none;
        }
        
        .forgot-password:hover {
            text-decoration: underline;
        }
        
        /* Адаптивность */
        @media (max-width: 768px) {
            .auth-btn-text {
                display: none;
            }
            
            .auth-btn, .auth-btn-outline {
                padding: 8px 12px;
            }
            
            .dropdown-user {
                min-width: 200px;
            }
        }
        
        /* Сообщение об успешной авторизации */
        .auth-success {
            display: none;
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            border: 1px solid #c3e6cb;
        }
        
        .auth-success.show {
            display: block;
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
    </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-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="#places">Места</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#map-section">Карта</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#ideas">Идеи</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#admin">Для организаций</a>
                    </li>
                </ul>
                
                <!-- Кнопка авторизации (показывается когда пользователь не авторизован) -->
                <div id="authButtonContainer" class="d-flex align-items-center ms-3">
                    <button class="auth-btn" onclick="showAuthModal()">
                        <i class="fas fa-user"></i>
                        <span class="auth-btn-text">Войти</span>
                    </button>
                </div>
                
                <!-- Профиль пользователя (показывается после авторизации) -->
                <div id="userProfileContainer" class="dropdown ms-3" style="display: none;">
                    <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" 
                       data-bs-toggle="dropdown" aria-expanded="false">
                        <div class="user-avatar" id="userAvatar">А</div>
                        <span class="ms-2 d-none d-md-inline" id="userName">Алексей</span>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li>
                            <div class="user-info">
                                <div class="user-avatar" id="dropdownUserAvatar">А</div>
                                <div class="user-details">
                                    <h6 id="dropdownUserName">Алексей Петров</h6>
                                    <small id="dropdownUserEmail">alexey@example.com</small>
                                </div>
                            </div>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-heart"></i> Мои избранные</a></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-calendar-alt"></i> Мои бронирования</a></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-star"></i> Мои отзывы</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" onclick="showAddPlaceModal()"><i class="fas fa-plus-circle"></i> Добавить место</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Настройки</a></li>
                        <li><a class="dropdown-item text-danger" href="#" onclick="logout()"><i class="fas fa-sign-out-alt"></i> Выйти</a></li>
                    </ul>
                </div>
                
                <button class="btn btn-heart ms-3" onclick="checkAuthBeforeAddPlace()">
                    <i class="fas fa-plus me-2"></i>Добавить место
                </button>
            </div>
        </div>
    </nav>

    <!-- Герой секция (оставляем без изменений) -->
    <section class="love-gradient hero-section">
        <!-- ... существующий код герой секции без изменений ... -->
        <div class="heart-animation" style="top:10%;left:5%">❤️</div>
        <div class="heart-animation" style="top:30%;right:10%">❤️</div>
        <div class="heart-animation" style="bottom:20%;left:15%">❤️</div>
        <div class="heart-animation" style="bottom:40%;right:20%">❤️</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">Более 500 проверенных локаций: от романтических ужинов до экстремальных приключений. Подберите свидание по настроению, бюджету и интересам.</p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="#places" class="btn btn-heart">
                            <i class="fas fa-search me-2"></i>Найти место
                        </a>
                        <a href="#map-section" class="btn btn-outline-light">
                            <i class="fas fa-map-marked-alt me-2"></i>Посмотреть на карте
                        </a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img src="https://images.unsplash.com/photo-1518568814500-bf0f8d125f46?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                         class="img-fluid rounded-3 shadow-lg" 
                         alt="Свидание в парке">
                </div>
            </div>
        </div>
    </section>

    <!-- Остальные секции остаются без изменений -->
    <!-- Фильтры -->
    <section class="py-5 bg-light">
        <!-- ... существующий код фильтров ... -->
    </section>

    <!-- Модальное окно авторизации -->
    <div class="modal fade" id="authModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Вход в DatePlanner</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div id="authSuccess" class="auth-success">
                        <i class="fas fa-check-circle me-2"></i>
                        Вы успешно вошли в систему!
                    </div>
                    
                    <ul class="nav nav-tabs auth-tabs" id="authTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button">
                                Вход
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button">
                                Регистрация
                            </button>
                        </li>
                    </ul>
                    
                    <div class="tab-content" id="authTabContent">
                        <!-- Форма входа -->
                        <div class="tab-pane fade show active" id="login" role="tabpanel">
                            <form id="loginForm">
                                <div class="mb-3">
                                    <label class="form-label">Email или телефон</label>
                                    <input type="text" class="form-control" id="loginEmail" placeholder="example@mail.ru" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Пароль</label>
                                    <input type="password" class="form-control" id="loginPassword" required>
                                    <div class="text-end mt-1">
                                        <a href="#" class="forgot-password" onclick="showForgotPassword()">Забыли пароль?</a>
                                    </div>
                                </div>
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="rememberMe">
                                    <label class="form-check-label" for="rememberMe">Запомнить меня</label>
                                </div>
                                <button type="submit" class="btn btn-heart w-100">Войти</button>
                            </form>
                            
                            <div class="auth-divider">
                                <span>или войдите через</span>
                            </div>
                            
                            <button class="social-auth-btn vk" onclick="loginWithVK()">
                                <i class="fab fa-vk"></i> ВКонтакте
                            </button>
                            <button class="social-auth-btn google" onclick="loginWithGoogle()">
                                <i class="fab fa-google"></i> Google
                            </button>
                            <button class="social-auth-btn yandex" onclick="loginWithYandex()">
                                <i class="fab fa-yandex"></i> Яндекс
                            </button>
                        </div>
                        
                        <!-- Форма регистрации -->
                        <div class="tab-pane fade" id="register" role="tabpanel">
                            <form id="registerForm">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Имя</label>
                                        <input type="text" class="form-control" id="registerFirstName" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Фамилия</label>
                                        <input type="text" class="form-control" id="registerLastName">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Email</label>
                                    <input type="email" class="form-control" id="registerEmail" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Пароль</label>
                                    <input type="password" class="form-control" id="registerPassword" required>
                                    <small class="text-muted">Минимум 6 символов</small>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Подтвердите пароль</label>
                                    <input type="password" class="form-control" id="registerPasswordConfirm" required>
                                </div>
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="acceptTerms" required>
                                    <label class="form-check-label" for="acceptTerms">
                                        Я принимаю <a href="#" class="forgot-password">условия использования</a> и 
                                        <a href="#" class="forgot-password">политику конфиденциальности</a>
                                    </label>
                                </div>
                                <button type="submit" class="btn btn-heart w-100">Зарегистрироваться</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Скрипты -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        // Инициализация модального окна авторизации
        const authModal = new bootstrap.Modal(document.getElementById('authModal'));
        let isAuthenticated = false; // Флаг авторизации
        
        // Показать модальное окно авторизации
        function showAuthModal() {
            authModal.show();
        }
        
        // Проверка авторизации перед добавлением места
        function checkAuthBeforeAddPlace() {
            if (isAuthenticated) {
                showAddPlaceModal();
            } else {
                showAuthModal();
                // Переключаем на вкладку регистрации, если пользователь хочет добавить место
                setTimeout(() => {
                    const registerTab = document.getElementById('register-tab');
                    if (registerTab) {
                        registerTab.click();
                    }
                }, 500);
            }
        }
        
        // Обработка формы входа
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = document.getElementById('loginEmail').value;
            const password = document.getElementById('loginPassword').value;
            
            // Здесь должна быть реальная проверка на сервере
            // Для демо просто имитируем успешный вход
            if (email && password) {
                // Симуляция успешного входа
                loginUser({
                    firstName: 'Алексей',
                    lastName: 'Петров',
                    email: email,
                    avatarLetter: 'А'
                });
                
                // Показать сообщение об успехе
                document.getElementById('authSuccess').classList.add('show');
                
                // Закрыть модальное окно через 2 секунды
                setTimeout(() => {
                    authModal.hide();
                    document.getElementById('authSuccess').classList.remove('show');
                    this.reset();
                }, 2000);
            } else {
                alert('Пожалуйста, заполните все поля');
            }
        });
        
        // Обработка формы регистрации
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const firstName = document.getElementById('registerFirstName').value;
            const lastName = document.getElementById('registerLastName').value;
            const email = document.getElementById('registerEmail').value;
            const password = document.getElementById('registerPassword').value;
            const passwordConfirm = document.getElementById('registerPasswordConfirm').value;
            
            if (password !== passwordConfirm) {
                alert('Пароли не совпадают');
                return;
            }
            
            if (password.length < 6) {
                alert('Пароль должен содержать минимум 6 символов');
                return;
            }
            
            // Здесь должна быть реальная регистрация на сервере
            // Для демо просто имитируем успешную регистрацию и вход
            loginUser({
                firstName: firstName,
                lastName: lastName,
                email: email,
                avatarLetter: firstName.charAt(0).toUpperCase()
            });
            
            // Показать сообщение об успехе
            document.getElementById('authSuccess').classList.add('show');
            
            // Закрыть модальное окно через 2 секунды
            setTimeout(() => {
                authModal.hide();
                document.getElementById('authSuccess').classList.remove('show');
                this.reset();
            }, 2000);
        });
        
        // Функция входа пользователя
        function loginUser(userData) {
            isAuthenticated = true;
            
            // Обновляем интерфейс
            document.getElementById('authButtonContainer').style.display = 'none';
            document.getElementById('userProfileContainer').style.display = 'block';
            
            // Заполняем данные пользователя
            const fullName = userData.firstName + (userData.lastName ? ' ' + userData.lastName : '');
            document.getElementById('userName').textContent = userData.firstName;
            document.getElementById('userAvatar').textContent = userData.avatarLetter;
            document.getElementById('dropdownUserName').textContent = fullName;
            document.getElementById('dropdownUserEmail').textContent = userData.email;
            document.getElementById('dropdownUserAvatar').textContent = userData.avatarLetter;
            
            // Сохраняем в localStorage (в реальном приложении используйте токены)
            localStorage.setItem('datePlannerUser', JSON.stringify(userData));
            
            // Показать приветственное сообщение
            showWelcomeMessage(userData.firstName);
        }
        
        // Функция выхода
        function logout() {
            isAuthenticated = false;
            
            // Обновляем интерфейс
            document.getElementById('authButtonContainer').style.display = 'block';
            document.getElementById('userProfileContainer').style.display = 'none';
            
            // Очищаем localStorage
            localStorage.removeItem('datePlannerUser');
            
            // Показать сообщение о выходе
            alert('Вы успешно вышли из системы');
        }
        
        // Проверка авторизации при загрузке страницы
        function checkAuthOnLoad() {
            const savedUser = localStorage.getItem('datePlannerUser');
            if (savedUser) {
                loginUser(JSON.parse(savedUser));
            }
        }
        
        // Показать приветственное сообщение
        function showWelcomeMessage(firstName) {
            // Создаем и показываем тост-уведомление
            const toast = document.createElement('div');
            toast.className = 'position-fixed top-0 end-0 p-3';
            toast.style.zIndex = '1060';
            toast.innerHTML = `
                <div class="toast show" role="alert">
                    <div class="toast-header" style="background: linear-gradient(135deg, #e74c3c 0%, #fd79a8 100%); color: white;">
                        <i class="fas fa-heart me-2"></i>
                        <strong class="me-auto">DatePlanner</strong>
                        <button type="button" class="btn-close btn-close-white" onclick="this.closest('.toast').remove()"></button>
                    </div>
                    <div class="toast-body">
                        Добро пожаловать, ${firstName}! 🎉<br>
                        Теперь вы можете добавлять места в избранное и бронировать свидания.
                    </div>
                </div>
            `;
            document.body.appendChild(toast);
            
            // Автоматически удаляем через 5 секунд
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.remove();
                }
            }, 5000);
        }
        
        // Инициализация при загрузке страницы
        document.addEventListener('DOMContentLoaded', function() {
            checkAuthOnLoad();
            
            // Инициализация карты и остальной функциональности
            // ... существующий код инициализации ...
            
            // Ваш существующий код здесь
        });
    </script>
</body>
</html>