From 52b93038c46fdc7f059d2065397174d2ea019196 Mon Sep 17 00:00:00 2001
From: Lobstervova <ya.vovabalashev2002@gmail.com>
Date: Fri, 6 Feb 2026 00:01:57 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=B0=D1=87=D0=B0=D0=BB=D0=BE=20=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B7=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20=D0=BF=D1=80=D0=BE?=
 =?UTF-8?q?=D1=84=D0=B8=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../configurations/SecurityConfig.java        |    6 +-
 .../controllers/web/AccountController.java    |   12 +
 src/main/resources/static/css/fonts.css       |    2 +-
 src/main/resources/static/css/profile.css     |   81 +
 src/main/resources/static/css/style.css       |    1 +
 .../resources/static/js/site/blocks/header.js |   30 +-
 src/main/resources/templates/all-profile.html | 1338 +++++++++++++++++
 .../resources/templates/pages/profile.html    |   85 ++
 src/main/resources/templates/template.html    |    1 +
 9 files changed, 1543 insertions(+), 13 deletions(-)
 create mode 100644 src/main/resources/static/css/profile.css
 create mode 100644 src/main/resources/templates/all-profile.html
 create mode 100644 src/main/resources/templates/pages/profile.html

diff --git a/src/main/java/com/example/dateplanner/configurations/SecurityConfig.java b/src/main/java/com/example/dateplanner/configurations/SecurityConfig.java
index 45d42ba..d2347d4 100644
--- a/src/main/java/com/example/dateplanner/configurations/SecurityConfig.java
+++ b/src/main/java/com/example/dateplanner/configurations/SecurityConfig.java
@@ -50,12 +50,14 @@ public class SecurityConfig {
                 .addFilterAt(authenticationWebFilter, SecurityWebFiltersOrder.AUTHENTICATION)
                 //.addFilterAfter(errorHandlingFilter, SecurityWebFiltersOrder.AUTHENTICATION)
                 .authorizeExchange(exchange -> exchange
-                        .pathMatchers("/account/login","/error","/error/**").permitAll()
+                        .pathMatchers("/account/login","/error","/error/**", "/account/logout").permitAll()
                         .pathMatchers("/account/**").authenticated()
                         .anyExchange().permitAll()
                 )
                 .formLogin(loginSpec -> loginSpec.loginPage("/account/login").authenticationSuccessHandler(authenticationSuccessHandler()))
-                .logout(logoutSpec -> logoutSpec.logoutSuccessHandler(logoutSuccessHandler()))
+                .logout(logoutSpec -> logoutSpec
+                        .logoutUrl("/account/logout")  // ← URL для логаута
+                        .logoutSuccessHandler(logoutSuccessHandler()))
                 .requestCache(requestCacheSpec -> requestCacheSpec.requestCache(serverRequestCache()))
                 .build();
     }
diff --git a/src/main/java/com/example/dateplanner/controllers/web/AccountController.java b/src/main/java/com/example/dateplanner/controllers/web/AccountController.java
index fb1961d..1891cc0 100644
--- a/src/main/java/com/example/dateplanner/controllers/web/AccountController.java
+++ b/src/main/java/com/example/dateplanner/controllers/web/AccountController.java
@@ -1,5 +1,6 @@
 package com.example.dateplanner.controllers.web;
 
+import ch.qos.logback.core.model.Model;
 import com.example.dateplanner.models.entities.AppUser;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
@@ -20,4 +21,15 @@ import java.util.Map;
 @RequestMapping("/account")
 public class AccountController {
 
+    @GetMapping("/profile")
+    public Mono<Rendering> profile() {
+        Map<String, Object> model = new HashMap<>();
+        model.put("title", "Profile");
+        model.put("index", "profile");
+        return Mono.just(
+                Rendering.view("template")
+                        .model(model)
+                        .build()
+        );
+    }
 }
diff --git a/src/main/resources/static/css/fonts.css b/src/main/resources/static/css/fonts.css
index f885954..54dc2c5 100644
--- a/src/main/resources/static/css/fonts.css
+++ b/src/main/resources/static/css/fonts.css
@@ -4,7 +4,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
 
 body {
-    font-family: "Roboto Condensed", sans-serif !important;
+    font-family: 'Segoe UI', system-ui, sans-serif !important;
     font-optical-sizing: auto !important;
     font-weight: 400 !important;
     font-style: normal !important;
diff --git a/src/main/resources/static/css/profile.css b/src/main/resources/static/css/profile.css
new file mode 100644
index 0000000..0c0ce6e
--- /dev/null
+++ b/src/main/resources/static/css/profile.css
@@ -0,0 +1,81 @@
+.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;
+}
+
+.profile-main-content {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+    min-height: 600px;
+}
+
+.profile-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;
+}
+
+.match-badge {
+    background: linear-gradient(45deg, #E74C3CFF, #FD79A8FF);
+    color: white;
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.profile-completion {
+    background: #F9F7F7FF;
+    border-radius: 15px;
+    padding: 20px;
+    margin: 20px 0;
+}
+
+.completion-percentage {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #E74C3CFF;
+    line-height: 1;
+}
+
+.progress {
+    height: 10px !important;
+    border-radius: 5px !important;
+}
+
+.progress-bar {
+    background-color: #E74C3CFF !important;
+    border-radius: 5px;
+}
+
+.profile-nav-link-custom {
+    color: #2D3436FF;
+    padding: 15px 20px;
+    border-radius: 15px;
+    margin-bottom: 10px;
+    transition: all 0.3s;
+    font-weight: 500;
+}
+
+.profile-nav-link-custom:hover {
+    background: rgba(231, 76, 60, 0.1) !important;
+    color: #E74C3CFF !important;
+    transform: translateX(5px) !important;
+}
+
+.profile-nav-link-custom.active {
+    background: rgba(231, 76, 60, 0.1) !important;
+    color: #E74C3CFF !important;
+    border-left: 4px solid #E74C3CFF !important;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 7d98e0f..1ec7aee 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -2,3 +2,4 @@
 @import "main.css";
 @import "header.css";
 @import "places.css";
+@import "profile.css";
diff --git a/src/main/resources/static/js/site/blocks/header.js b/src/main/resources/static/js/site/blocks/header.js
index 1f03f9a..513f0d3 100644
--- a/src/main/resources/static/js/site/blocks/header.js
+++ b/src/main/resources/static/js/site/blocks/header.js
@@ -1,5 +1,6 @@
 function initHeader($header){
     console.log("init header date")
+
     let authSection
     if(!auth) {
         authSection = `
@@ -15,18 +16,20 @@ function initHeader($header){
             <div id="userProfileContainer" class="dropdown ms-0 ms-lg-3 mt-2 mt-lg-0">
                 <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-md-inline" id="userName">Алексей</span>
+                    <div class="user-avatar" id="userAvatar">${user.firstName.charAt(0)}${user.lastName.charAt(0)}</div>
+                    <span class="ms-2 d-md-inline" id="userName">${user.firstName}</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>
+                        <a href="/account/profile" class="text-decoration-none text-black">
+                            <div class="user-info">
+                                <div class="user-avatar" id="dropdownUserAvatar">${user.firstName.charAt(0)}${user.lastName.charAt(0)}</div>
+                                <div class="user-details">
+                                    <h6 id="dropdownUserName">${user.firstName} ${user.lastName}</h6>
+                                    <small id="dropdownUserEmail">${user.phone}</small>
+                                </div>
                             </div>
-                        </div>
+                        </a>
                     </li>
                     <li><hr class="dropdown-divider"></li>
                     <li><a class="dropdown-item" href="#"><i class="fas fa-heart"></i> Мои избранные</a></li>
@@ -36,7 +39,14 @@ function initHeader($header){
                     <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>
+                    <li>
+                        <form action="/account/logout" method="post" style="display: inline;">
+                            <input type="hidden" name="_csrf" value="${csrf.token}"/>
+                            <button type="submit" class="dropdown-item text-danger" style="border: none; background: none; width: 100%; text-align: left;">
+                                <i class="fas fa-sign-out-alt"></i> Выйти
+                            </button>
+                        </form>
+                    </li>
                 </ul>
             </div>
         `;
@@ -179,4 +189,4 @@ function initHeader($header){
             </div>
         </div>
     `)
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/templates/all-profile.html b/src/main/resources/templates/all-profile.html
new file mode 100644
index 0000000..d3ab9ae
--- /dev/null
+++ b/src/main/resources/templates/all-profile.html
@@ -0,0 +1,1338 @@
+<!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>
\ No newline at end of file
diff --git a/src/main/resources/templates/pages/profile.html b/src/main/resources/templates/pages/profile.html
new file mode 100644
index 0000000..17afbb2
--- /dev/null
+++ b/src/main/resources/templates/pages/profile.html
@@ -0,0 +1,85 @@
+<div class="container py-5" id="mainPageContainer">
+    <div class="row">
+        <div class="col-lg-4 mb-4">
+            <div class="sidebar">
+                <div class="text-center">
+                    <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
+                         class="profile-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" id="profile-sections-navigator">
+                    <a class="profile-nav-link-custom active" data-section="profileSection" href="#"
+                       onclick="showSection('profile')">
+                        <i class="fas fa-user me-3"></i>Мой профиль
+                    </a>
+                    <a class="profile-nav-link-custom" data-section="proposalsSection" href="#"
+                       onclick="showSection('proposals')">
+                        <i class="fas fa-heart me-3"></i>Мои предложения
+                        <span class="notification-badge">3</span>
+                    </a>
+                    <a class="profile-nav-link-custom" data-section="organizationsSection" href="#"
+                       onclick="showSection('organizations')">
+                        <i class="fas fa-building me-3"></i>Мои организации
+                    </a>
+                    <a class="profile-nav-link-custom" data-section="eventsSection" href="#"
+                       onclick="showSection('events')">
+                        <i class="fas fa-calendar-alt me-3"></i>Мероприятия
+                    </a>
+                    <a class="profile-nav-link-custom" data-section="settingsSection" 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="profile-main-content">
+                <div class="section-content d-block" id="profileSection">
+1
+                </div>
+                <div class="section-content d-none" id="proposalsSection">
+2
+                </div>
+                <div class="section-content d-none" id="organizationsSection">
+3
+                </div>
+                <div class="section-content d-none" id="eventsSection">
+4
+                </div>
+                <div class="section-content d-none" id="settingsSection">
+5
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    $('#profile-sections-navigator').on('click', '.profile-nav-link-custom', function () {
+        $('#profile-sections-navigator').find('.profile-nav-link-custom').removeClass('active');
+        $(this).addClass('active');
+        const selectedSectionId = $(this).data('section');
+        console.log(selectedSectionId);
+        $('.section-content').removeClass('d-block').addClass('d-none');
+        $(`#${selectedSectionId}`).removeClass('d-none').addClass('d-block');
+    })
+</script>
\ No newline at end of file
diff --git a/src/main/resources/templates/template.html b/src/main/resources/templates/template.html
index 856e6fe..46a3b23 100644
--- a/src/main/resources/templates/template.html
+++ b/src/main/resources/templates/template.html
@@ -26,6 +26,7 @@
         <header th:insert="~{blocks/header}" style="margin-bottom: 64px"></header>
 
         <main th:if="${index} == 'home'" th:insert="~{pages/home}"></main>
+        <main th:if="${index} == 'profile'" th:insert="~{pages/profile}"></main>
 
         <footer class="mt-auto" th:insert="~{blocks/footer}"></footer>
     </body>