Hugging Face's logo

Spaces:
QuickDingo
/
gg
Running

App Files Community
QuickDingo commited on
Commit
8e6c929
·
verified ·
1 Parent(s): 129c551

Разработай концепцию и структуру сайта для риелтора со следующими функциями: Личный кабинет с авторизацией Возможность входа для риелтора (логин/пароль или через соцсети). Админ-панель для управления объектами (дома, квартиры, участки). Добавление и редактирование объектов недвижимости Форма с полями: тип объекта, адрес, площадь, цена, описание, фото, видео. Интеграция с Яндекс.Картами для отметки местоположения (выбор точки на карте или автоматическое определение по адресу). Контакты для связи Указание WhatsApp и Telegram для связи с риелтором. В будущем — возможность редактировать эти контакты из личного кабинета. Мультимедийный контент Загрузка фото и видео (например, обзорные ролики, 3D-туры). Галерея для каждого объекта. Публичная часть сайта Лендинг с каталогом объектов (фильтры по типу, цене, локации). Карточка объекта с деталями, картой, контактами и кнопкой связи. Дополнительно (по желанию) Чат между клиентом и риелтором прямо на сайте. Уведомления о новых заявках в Telegram/WhatsApp. Технические требования: Адаптивный дизайн (под ПК и мобильные). Простое и интуитивное управление для риелтора. Возможность масштабирования функционала в будущем. Предложи оптимальный стек технологий (например, Frontend: React/Vue, Backend: Node.js/Python + база данных), а также примерную структуру БД для хранения объектов. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1087 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gg
3
- emoji: 🐠
4
- colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: gg
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1087 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RealEstate Pro - Умная платформа для риелторов</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .property-card:hover .property-image {
11
+ transform: scale(1.05);
12
+ transition: transform 0.3s ease;
13
+ }
14
+ .property-image {
15
+ transition: transform 0.3s ease;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
19
+ }
20
+ .sidebar {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .map-container {
24
+ height: 300px;
25
+ width: 100%;
26
+ }
27
+ .gallery-thumbnail {
28
+ transition: all 0.2s ease;
29
+ }
30
+ .gallery-thumbnail:hover {
31
+ transform: scale(1.05);
32
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
33
+ }
34
+ .chat-message {
35
+ max-width: 70%;
36
+ }
37
+ @media (max-width: 768px) {
38
+ .sidebar {
39
+ position: fixed;
40
+ left: -100%;
41
+ top: 0;
42
+ z-index: 50;
43
+ height: 100vh;
44
+ }
45
+ .sidebar.active {
46
+ left: 0;
47
+ }
48
+ .map-container {
49
+ height: 200px;
50
+ }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-50 font-sans">
55
+ <!-- Шапка сайта -->
56
+ <header class="gradient-bg text-white shadow-lg">
57
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
58
+ <div class="flex items-center space-x-2">
59
+ <i class="fas fa-home text-2xl"></i>
60
+ <h1 class="text-2xl font-bold">RealEstate Pro</h1>
61
+ </div>
62
+ <div class="hidden md:flex space-x-6">
63
+ <a href="#properties" class="hover:text-gray-200 transition">Объекты</a>
64
+ <a href="#about" class="hover:text-gray-200 transition">О нас</a>
65
+ <a href="#contacts" class="hover:text-gray-200 transition">Контакты</a>
66
+ </div>
67
+ <div class="flex items-center space-x-4">
68
+ <button id="loginBtn" class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
69
+ Вход для риелторов
70
+ </button>
71
+ <button id="mobileMenuBtn" class="md:hidden text-white">
72
+ <i class="fas fa-bars text-2xl"></i>
73
+ </button>
74
+ </div>
75
+ </div>
76
+ </header>
77
+
78
+ <!-- Мобильное меню -->
79
+ <div id="mobileMenu" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden">
80
+ <div class="absolute right-0 top-0 h-full w-64 bg-white shadow-lg p-4">
81
+ <div class="flex justify-between items-center mb-6">
82
+ <h2 class="text-xl font-bold text-gray-800">Меню</h2>
83
+ <button id="closeMobileMenu" class="text-gray-500">
84
+ <i class="fas fa-times text-2xl"></i>
85
+ </button>
86
+ </div>
87
+ <nav class="flex flex-col space-y-4">
88
+ <a href="#properties" class="text-gray-700 hover:text-indigo-600 transition">Объекты</a>
89
+ <a href="#about" class="text-gray-700 hover:text-indigo-600 transition">О нас</a>
90
+ <a href="#contacts" class="text-gray-700 hover:text-indigo-600 transition">Контакты</a>
91
+ <hr class="my-2">
92
+ <button id="mobileLoginBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition">
93
+ Вход для риелторов
94
+ </button>
95
+ </nav>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Модальное окно входа -->
100
+ <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
101
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 mx-4">
102
+ <div class="flex justify-between items-center mb-6">
103
+ <h2 class="text-2xl font-bold text-gray-800">Вход в личный кабинет</h2>
104
+ <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700">
105
+ <i class="fas fa-times"></i>
106
+ </button>
107
+ </div>
108
+ <form id="loginForm" class="space-y-4">
109
+ <div>
110
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
111
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
112
+ </div>
113
+ <div>
114
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Пароль</label>
115
+ <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
116
+ </div>
117
+ <div class="flex items-center justify-between">
118
+ <div class="flex items-center">
119
+ <input type="checkbox" id="remember" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
120
+ <label for="remember" class="ml-2 block text-sm text-gray-700">Запомнить меня</label>
121
+ </div>
122
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Забыли пароль?</a>
123
+ </div>
124
+ <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition font-medium">
125
+ Войти
126
+ </button>
127
+ <div class="text-center text-sm text-gray-500">или войти через</div>
128
+ <div class="flex justify-center space-x-4">
129
+ <button type="button" class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition">
130
+ <i class="fab fa-facebook-f"></i>
131
+ </button>
132
+ <button type="button" class="bg-red-600 text-white p-2 rounded-full hover:bg-red-700 transition">
133
+ <i class="fab fa-google"></i>
134
+ </button>
135
+ <button type="button" class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-900 transition">
136
+ <i class="fab fa-apple"></i>
137
+ </button>
138
+ </div>
139
+ <div class="text-center text-sm text-gray-500">
140
+ Нет аккаунта? <a href="#" class="text-indigo-600 hover:text-indigo-500">Зарегистрироваться</a>
141
+ </div>
142
+ </form>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Личный кабинет (скрыт по умолчанию) -->
147
+ <div id="dashboard" class="hidden">
148
+ <div class="flex">
149
+ <!-- Боковая панель -->
150
+ <div id="sidebar" class="sidebar bg-gray-800 text-white w-64 min-h-screen p-4">
151
+ <div class="flex items-center space-x-3 mb-8">
152
+ <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
153
+ <span class="text-xl font-medium">АИ</span>
154
+ </div>
155
+ <div>
156
+ <div class="font-medium">Алексей Иванов</div>
157
+ <div class="text-xs text-gray-400">Риелтор</div>
158
+ </div>
159
+ </div>
160
+ <nav class="space-y-2">
161
+ <a href="#" class="block py-2 px-3 rounded-lg bg-gray-700 text-white">
162
+ <i class="fas fa-home mr-2"></i> Обзор
163
+ </a>
164
+ <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition">
165
+ <i class="fas fa-building mr-2"></i> Объекты
166
+ </a>
167
+ <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition">
168
+ <i class="fas fa-plus-circle mr-2"></i> Добавить объект
169
+ </a>
170
+ <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition">
171
+ <i class="fas fa-users mr-2"></i> Клиенты
172
+ </a>
173
+ <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition">
174
+ <i class="fas fa-envelope mr-2"></i> Сообщения
175
+ </a>
176
+ <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition">
177
+ <i class="fas fa-cog mr-2"></i> Настройки
178
+ </a>
179
+ </nav>
180
+ <div class="mt-8 pt-4 border-t border-gray-700">
181
+ <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition">
182
+ <i class="fas fa-sign-out-alt mr-2"></i> Выйти
183
+ </a>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Основное содержимое -->
188
+ <div class="flex-1 p-6 bg-gray-100">
189
+ <div class="flex justify-between items-center mb-6">
190
+ <h2 class="text-2xl font-bold text-gray-800">Обзор</h2>
191
+ <button id="toggleSidebar" class="md:hidden text-gray-600">
192
+ <i class="fas fa-bars text-xl"></i>
193
+ </button>
194
+ </div>
195
+
196
+ <!-- Статистика -->
197
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
198
+ <div class="bg-white p-6 rounded-lg shadow">
199
+ <div class="flex items-center justify-between">
200
+ <div>
201
+ <p class="text-gray-500">Всего объектов</p>
202
+ <h3 class="text-3xl font-bold mt-2">24</h3>
203
+ </div>
204
+ <div class="bg-indigo-100 p-3 rounded-full">
205
+ <i class="fas fa-home text-indigo-600 text-xl"></i>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <div class="bg-white p-6 rounded-lg shadow">
210
+ <div class="flex items-center justify-between">
211
+ <div>
212
+ <p class="text-gray-500">Активные заявки</p>
213
+ <h3 class="text-3xl font-bold mt-2">8</h3>
214
+ </div>
215
+ <div class="bg-green-100 p-3 rounded-full">
216
+ <i class="fas fa-envelope text-green-600 text-xl"></i>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="bg-white p-6 rounded-lg shadow">
221
+ <div class="flex items-center justify-between">
222
+ <div>
223
+ <p class="text-gray-500">Продано в этом месяце</p>
224
+ <h3 class="text-3xl font-bold mt-2">3</h3>
225
+ </div>
226
+ <div class="bg-purple-100 p-3 rounded-full">
227
+ <i class="fas fa-handshake text-purple-600 text-xl"></i>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Последние объекты -->
234
+ <div class="bg-white p-6 rounded-lg shadow mb-8">
235
+ <div class="flex justify-between items-center mb-6">
236
+ <h3 class="text-xl font-bold text-gray-800">Последние объекты</h3>
237
+ <a href="#" class="text-indigo-600 hover:text-indigo-800">Показать все</a>
238
+ </div>
239
+ <div class="overflow-x-auto">
240
+ <table class="min-w-full divide-y divide-gray-200">
241
+ <thead class="bg-gray-50">
242
+ <tr>
243
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Адрес</th>
244
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Тип</th>
245
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Цена</th>
246
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
247
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
248
+ </tr>
249
+ </thead>
250
+ <tbody class="bg-white divide-y divide-gray-200">
251
+ <tr>
252
+ <td class="px-6 py-4 whitespace-nowrap">
253
+ <div class="font-medium">ул. Ленина, 15</div>
254
+ <div class="text-sm text-gray-500">Москва</div>
255
+ </td>
256
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Квартира</td>
257
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">12,500,000 ₽</td>
258
+ <td class="px-6 py-4 whitespace-nowrap">
259
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Активно</span>
260
+ </td>
261
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
262
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Редакт.</a>
263
+ <a href="#" class="text-red-600 hover:text-red-900">Удалить</a>
264
+ </td>
265
+ </tr>
266
+ <tr>
267
+ <td class="px-6 py-4 whitespace-nowrap">
268
+ <div class="font-medium">ул. Садовая, 42</div>
269
+ <div class="text-sm text-gray-500">Санкт-Петербург</div>
270
+ </td>
271
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Дом</td>
272
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">8,750,000 ₽</td>
273
+ <td class="px-6 py-4 whitespace-nowrap">
274
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">На проверке</span>
275
+ </td>
276
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
277
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Редакт.</a>
278
+ <a href="#" class="text-red-600 hover:text-red-900">Удалить</a>
279
+ </td>
280
+ </tr>
281
+ <tr>
282
+ <td class="px-6 py-4 whitespace-nowrap">
283
+ <div class="font-medium">пр. Мира, 7</div>
284
+ <div class="text-sm text-gray-500">Казань</div>
285
+ </td>
286
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Коммерция</td>
287
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">25,300,000 ₽</td>
288
+ <td class="px-6 py-4 whitespace-nowrap">
289
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Продано</span>
290
+ </td>
291
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
292
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Редакт.</a>
293
+ <a href="#" class="text-red-600 hover:text-red-900">Удалить</a>
294
+ </td>
295
+ </tr>
296
+ </tbody>
297
+ </table>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Форма добавления объекта -->
302
+ <div class="bg-white p-6 rounded-lg shadow">
303
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Добавить новый объект</h3>
304
+ <form id="addPropertyForm" class="space-y-6">
305
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
306
+ <div>
307
+ <label for="propertyType" class="block text-sm font-medium text-gray-700 mb-1">Тип объекта</label>
308
+ <select id="propertyType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
309
+ <option value="">Выберите тип</option>
310
+ <option value="apartment">Квартира</option>
311
+ <option value="house">Дом</option>
312
+ <option value="land">Участок</option>
313
+ <option value="commercial">Коммерческая недвижимость</option>
314
+ </select>
315
+ </div>
316
+ <div>
317
+ <label for="propertyPrice" class="block text-sm font-medium text-gray-700 mb-1">Цена (₽)</label>
318
+ <input type="number" id="propertyPrice" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Например: 12000000">
319
+ </div>
320
+ </div>
321
+
322
+ <div>
323
+ <label for="propertyAddress" class="block text-sm font-medium text-gray-700 mb-1">Адрес</label>
324
+ <input type="text" id="propertyAddress" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Полный адрес">
325
+ </div>
326
+
327
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
328
+ <div>
329
+ <label for="propertyArea" class="block text-sm font-medium text-gray-700 mb-1">Площадь (м²)</label>
330
+ <input type="number" id="propertyArea" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
331
+ </div>
332
+ <div>
333
+ <label for="propertyRooms" class="block text-sm font-medium text-gray-700 mb-1">Количество комнат</label>
334
+ <input type="number" id="propertyRooms" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
335
+ </div>
336
+ <div>
337
+ <label for="propertyFloor" class="block text-sm font-medium text-gray-700 mb-1">Этаж</label>
338
+ <input type="number" id="propertyFloor" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
339
+ </div>
340
+ </div>
341
+
342
+ <div>
343
+ <label for="propertyDescription" class="block text-sm font-medium text-gray-700 mb-1">Описание</label>
344
+ <textarea id="propertyDescription" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Подробное описание объекта"></textarea>
345
+ </div>
346
+
347
+ <div>
348
+ <label class="block text-sm font-medium text-gray-700 mb-1">Фотографии объекта</label>
349
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
350
+ <div class="space-y-1 text-center">
351
+ <div class="flex text-sm text-gray-600">
352
+ <label for="propertyPhotos" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">
353
+ <span>Загрузить файлы</span>
354
+ <input id="propertyPhotos" type="file" class="sr-only" multiple>
355
+ </label>
356
+ <p class="pl-1">или перетащите сюда</p>
357
+ </div>
358
+ <p class="text-xs text-gray-500">PNG, JPG, GIF до 10MB</p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <div>
364
+ <label class="block text-sm font-medium text-gray-700 mb-1">Местоположение на карте</label>
365
+ <div class="map-container rounded-lg border border-gray-300">
366
+ <!-- Здесь будет карта -->
367
+ <div class="flex items-center justify-center h-full bg-gray-100 text-gray-500">
368
+ <i class="fas fa-map-marker-alt text-2xl mr-2"></i>
369
+ <span>Выберите местоположение на карте</span>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="flex justify-end">
375
+ <button type="submit" class="bg-indigo-600 text-white py-2 px-6 rounded-lg hover:bg-indigo-700 transition font-medium">
376
+ Сохранить объект
377
+ </button>
378
+ </div>
379
+ </form>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Основное содержимое сайта -->
386
+ <main id="mainContent">
387
+ <!-- Герой-секция -->
388
+ <section class="gradient-bg text-white py-16 md:py-24">
389
+ <div class="container mx-auto px-4">
390
+ <div class="max-w-3xl mx-auto text-center">
391
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Найдите свой идеальный дом с нами</h2>
392
+ <p class="text-xl mb-8 opacity-90">Более 1000 довольных клиентов и 500 успешных сделок</p>
393
+ <div class="bg-white rounded-lg p-1 flex max-w-xl mx-auto">
394
+ <input type="text" placeholder="Город, район, улица..." class="flex-1 px-4 py-3 text-gray-800 focus:outline-none">
395
+ <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium">
396
+ <i class="fas fa-search mr-2"></i> Найти
397
+ </button>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </section>
402
+
403
+ <!-- Каталог объектов -->
404
+ <section id="properties" class="py-16 bg-gray-50">
405
+ <div class="container mx-auto px-4">
406
+ <div class="text-center mb-12">
407
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Наши предложения</h2>
408
+ <p class="text-gray-600 max-w-2xl mx-auto">Мы тщательно отбираем лучшие объекты недвижимости для наших клиентов</p>
409
+ </div>
410
+
411
+ <!-- Фильтры -->
412
+ <div class="bg-white rounded-lg shadow-md p-4 mb-8">
413
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
414
+ <div>
415
+ <label class="block text-sm font-medium text-gray-700 mb-1">Тип недвижимости</label>
416
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
417
+ <option>Все типы</option>
418
+ <option>Квартира</option>
419
+ <option>Дом</option>
420
+ <option>Участок</option>
421
+ <option>Коммерческая</option>
422
+ </select>
423
+ </div>
424
+ <div>
425
+ <label class="block text-sm font-medium text-gray-700 mb-1">Цена, ₽</label>
426
+ <div class="flex space-x-2">
427
+ <input type="number" placeholder="От" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
428
+ <input type="number" placeholder="До" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
429
+ </div>
430
+ </div>
431
+ <div>
432
+ <label class="block text-sm font-medium text-gray-700 mb-1">Комнат</label>
433
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
434
+ <option>Любое</option>
435
+ <option>1</option>
436
+ <option>2</option>
437
+ <option>3</option>
438
+ <option>4+</option>
439
+ </select>
440
+ </div>
441
+ <div class="flex items-end">
442
+ <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition font-medium">
443
+ Применить фильтры
444
+ </button>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Список объектов -->
450
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
451
+ <!-- Объект 1 -->
452
+ <div class="property-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
453
+ <div class="relative overflow-hidden h-48">
454
+ <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Квартира" class="property-image w-full h-full object-cover">
455
+ <div class="absolute top-4 left-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">
456
+ Новое
457
+ </div>
458
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
459
+ <i class="far fa-heart text-gray-600 hover:text-red-500 cursor-pointer"></i>
460
+ </div>
461
+ </div>
462
+ <div class="p-6">
463
+ <div class="flex justify-between items-start mb-2">
464
+ <h3 class="text-xl font-bold text-gray-800">Квартира в центре</h3>
465
+ <span class="text-lg font-bold text-indigo-600">12,500,000 ₽</span>
466
+ </div>
467
+ <p class="text-gray-600 mb-4"><i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>ул. Ленина, 15, Москва</p>
468
+ <div class="flex space-x-4 text-sm text-gray-500 mb-4">
469
+ <span><i class="fas fa-bed mr-1"></i> 3 комн.</span>
470
+ <span><i class="fas fa-ruler-combined mr-1"></i> 85 м²</span>
471
+ <span><i class="fas fa-building mr-1"></i> 5/9 эт.</span>
472
+ </div>
473
+ <p class="text-gray-700 mb-6">Просторная 3-комнатная квартира в историческом центре с ремонтом и мебелью.</p>
474
+ <div class="flex justify-between items-center">
475
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition font-medium">
476
+ Подробнее
477
+ </button>
478
+ <div class="flex space-x-2">
479
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition">
480
+ <i class="fas fa-phone-alt"></i>
481
+ </button>
482
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition">
483
+ <i class="fab fa-whatsapp"></i>
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Объект 2 -->
491
+ <div class="property-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
492
+ <div class="relative overflow-hidden h-48">
493
+ <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Дом" class="property-image w-full h-full object-cover">
494
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
495
+ <i class="far fa-heart text-gray-600 hover:text-red-500 cursor-pointer"></i>
496
+ </div>
497
+ </div>
498
+ <div class="p-6">
499
+ <div class="flex justify-between items-start mb-2">
500
+ <h3 class="text-xl font-bold text-gray-800">Загородный дом</h3>
501
+ <span class="text-lg font-bold text-indigo-600">8,750,000 ₽</span>
502
+ </div>
503
+ <p class="text-gray-600 mb-4"><i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>ул. Садовая, 42, Санкт-Петербург</p>
504
+ <div class="flex space-x-4 text-sm text-gray-500 mb-4">
505
+ <span><i class="fas fa-bed mr-1"></i> 4 комн.</span>
506
+ <span><i class="fas fa-ruler-combined mr-1"></i> 120 м²</span>
507
+ <span><i class="fas fa-home mr-1"></i> 2 этажа</span>
508
+ </div>
509
+ <p class="text-gray-700 mb-6">Уютный дом с участком 10 соток в экологически чистом районе. Отделка под ключ.</p>
510
+ <div class="flex justify-between items-center">
511
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition font-medium">
512
+ Подробнее
513
+ </button>
514
+ <div class="flex space-x-2">
515
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition">
516
+ <i class="fas fa-phone-alt"></i>
517
+ </button>
518
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition">
519
+ <i class="fab fa-whatsapp"></i>
520
+ </button>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- Объект 3 -->
527
+ <div class="property-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
528
+ <div class="relative overflow-hidden h-48">
529
+ <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Коммерческая недвижимость" class="property-image w-full h-full object-cover">
530
+ <div class="absolute top-4 left-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium">
531
+ Продано
532
+ </div>
533
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
534
+ <i class="far fa-heart text-gray-600 hover:text-red-500 cursor-pointer"></i>
535
+ </div>
536
+ </div>
537
+ <div class="p-6">
538
+ <div class="flex justify-between items-start mb-2">
539
+ <h3 class="text-xl font-bold text-gray-800">Офисное помещение</h3>
540
+ <span class="text-lg font-bold text-indigo-600">25,300,000 ₽</span>
541
+ </div>
542
+ <p class="text-gray-600 mb-4"><i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>пр. Мира, 7, Казань</p>
543
+ <div class="flex space-x-4 text-sm text-gray-500 mb-4">
544
+ <span><i class="fas fa-door-open mr-1"></i> 5 каб.</span>
545
+ <span><i class="fas fa-ruler-combined mr-1"></i> 150 м²</span>
546
+ <span><i class="fas fa-building mr-1"></i> 3/5 эт.</span>
547
+ </div>
548
+ <p class="text-gray-700 mb-6">Просторное офисное помещение в бизнес-центре с отдельным входом и парковкой.</p>
549
+ <div class="flex justify-between items-center">
550
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition font-medium">
551
+ Подробнее
552
+ </button>
553
+ <div class="flex space-x-2">
554
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition">
555
+ <i class="fas fa-phone-alt"></i>
556
+ </button>
557
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition">
558
+ <i class="fab fa-whatsapp"></i>
559
+ </button>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <div class="text-center mt-10">
567
+ <button class="bg-white border border-indigo-600 text-indigo-600 px-6 py-3 rounded-lg hover:bg-indigo-50 transition font-medium">
568
+ Показать еще
569
+ </button>
570
+ </div>
571
+ </div>
572
+ </section>
573
+
574
+ <!-- Страница объекта (скрыта по умолчанию) -->
575
+ <div id="propertyPage" class="hidden py-16 bg-gray-50">
576
+ <div class="container mx-auto px-4">
577
+ <button id="backToCatalog" class="flex items-center text-indigo-600 hover:text-indigo-800 mb-6">
578
+ <i class="fas fa-arrow-left mr-2"></i> Назад к каталогу
579
+ </button>
580
+
581
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
582
+ <!-- Галерея -->
583
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-0">
584
+ <div class="lg:col-span-3 h-96 overflow-hidden">
585
+ <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Квартира" class="w-full h-full object-cover">
586
+ </div>
587
+ <div class="hidden lg:grid grid-cols-2 gap-0">
588
+ <div class="h-48 overflow-hidden">
589
+ <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Кухня" class="w-full h-full object-cover">
590
+ </div>
591
+ <div class="h-48 overflow-hidden">
592
+ <img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Гостиная" class="w-full h-full object-cover">
593
+ </div>
594
+ <div class="h-48 overflow-hidden">
595
+ <img src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Спальня" class="w-full h-full object-cover">
596
+ </div>
597
+ <div class="h-48 overflow-hidden relative">
598
+ <img src="https://images.unsplash.com/photo-1484154218962-a197022b5858?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Ванная" class="w-full h-full object-cover">
599
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
600
+ <span class="text-white font-medium">+5 фото</span>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+
606
+ <!-- Основная информация -->
607
+ <div class="p-6 lg:p-8">
608
+ <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start">
609
+ <div class="lg:w-2/3 lg:pr-8">
610
+ <div class="flex items-center mb-4">
611
+ <h2 class="text-2xl font-bold text-gray-800">Квартира в центре Москвы</h2>
612
+ <span class="ml-4 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">Новое</span>
613
+ </div>
614
+ <p class="text-gray-600 mb-6"><i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>ул. Ленина, 15, Москва, Центральный район</p>
615
+
616
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
617
+ <div class="bg-gray-50 p-4 rounded-lg text-center">
618
+ <div class="text-gray-500 mb-1"><i class="fas fa-ruler-combined"></i> Площадь</div>
619
+ <div class="text-lg font-bold text-gray-800">85 м²</div>
620
+ </div>
621
+ <div class="bg-gray-50 p-4 rounded-lg text-center">
622
+ <div class="text-gray-500 mb-1"><i class="fas fa-bed"></i> Комнат</div>
623
+ <div class="text-lg font-bold text-gray-800">3</div>
624
+ </div>
625
+ <div class="bg-gray-50 p-4 rounded-lg text-center">
626
+ <div class="text-gray-500 mb-1"><i class="fas fa-building"></i> Этаж</div>
627
+ <div class="text-lg font-bold text-gray-800">5/9</div>
628
+ </div>
629
+ <div class="bg-gray-50 p-4 rounded-lg text-center">
630
+ <div class="text-gray-500 mb-1"><i class="fas fa-calendar-alt"></i> Год постройки</div>
631
+ <div class="text-lg font-bold text-gray-800">2015</div>
632
+ </div>
633
+ </div>
634
+
635
+ <div class="mb-8">
636
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Описание</h3>
637
+ <p class="text-gray-700 mb-4">Просторная 3-комнатная квартира в историческом центре Москвы с качественным ремонтом и мебелью. Квартира расположена на 5 этаже 9-этажного кирпичного дома. Окна выходят во двор, что обеспечивает тишину и спокойствие.</p>
638
+ <p class="text-gray-700">В квартире: кухня 12 м² с современной техникой, две изолированные спальни (15 и 12 м²), гостиная 25 м², совмещенный санузел с душевой кабиной, прихожая с гардеробной. В доме: консьерж, парковка, детская площадка. Рядом метро (5 мин пешком), школы, детские сады, магазины.</p>
639
+ </div>
640
+
641
+ <div class="mb-8">
642
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Особенности</h3>
643
+ <div class="flex flex-wrap gap-2">
644
+ <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Ремонт</span>
645
+ <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Мебель</span>
646
+ <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Балкон</span>
647
+ <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Консьерж</span>
648
+ <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Парковка</span>
649
+ <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Лифт</span>
650
+ </div>
651
+ </div>
652
+
653
+ <div class="mb-8">
654
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Расположение</h3>
655
+ <div class="map-container rounded-lg border border-gray-300 mb-4">
656
+ <!-- Здесь будет карта -->
657
+ <div class="flex items-center justify-center h-full bg-gray-100 text-gray-500">
658
+ <i class="fas fa-map-marker-alt text-2xl mr-2"></i>
659
+ <span>Карта местоположения объекта</span>
660
+ </div>
661
+ </div>
662
+ <p class="text-gray-700">Объект расположен в престижном районе с развитой инфраструктурой. В шаговой доступности: метро "Центральная" (5 мин), школа (3 мин), парк (10 мин), супермаркет (2 мин).</p>
663
+ </div>
664
+
665
+ <div>
666
+ <h3 class="text-xl font-bold text-gray-800 mb-4">3D тур</h3>
667
+ <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
668
+ <div class="text-center">
669
+ <i class="fas fa-vr-cardboard text-4xl text-gray-400 mb-2"></i>
670
+ <p class="text-gray-500">Интерактивный 3D тур по объекту</p>
671
+ <button class="mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition font-medium">
672
+ Запустить тур
673
+ </button>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </div>
678
+
679
+ <!-- Боковая панель с контактами -->
680
+ <div class="lg:w-1/3 mt-8 lg:mt-0">
681
+ <div class="bg-gray-50 rounded-lg p-6 shadow-sm">
682
+ <div class="text-2xl font-bold text-indigo-600 mb-4">12,500,000 ₽</div>
683
+
684
+ <div class="mb-6">
685
+ <h4 class="font-bold text-gray-800 mb-2">Риелтор</h4>
686
+ <div class="flex items-center">
687
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
688
+ <span class="text-indigo-600 font-medium">АИ</span>
689
+ </div>
690
+ <div>
691
+ <div class="font-medium">Алексей Иванов</div>
692
+ <div class="text-sm text-gray-500">Агентство "RealEstate Pro"</div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+
697
+ <div class="mb-6">
698
+ <h4 class="font-bold text-gray-800 mb-2">Контакты</h4>
699
+ <div class="space-y-2">
700
+ <a href="#" class="flex items-center text-gray-700 hover:text-indigo-600">
701
+ <i class="fas fa-phone-alt text-gray-400 mr-3 w-5"></i>
702
+ +7 (999) 123-45-67
703
+ </a>
704
+ <a href="#" class="flex items-center text-gray-700 hover:text-indigo-600">
705
+ <i class="fab fa-whatsapp text-green-500 mr-3 w-5"></i>
706
+ WhatsApp
707
+ </a>
708
+ <a href="#" class="flex items-center text-gray-700 hover:text-indigo-600">
709
+ <i class="fab fa-telegram text-blue-400 mr-3 w-5"></i>
710
+ Telegram
711
+ </a>
712
+ <a href="#" class="flex items-center text-gray-700 hover:text-indigo-600">
713
+ <i class="fas fa-envelope text-gray-400 mr-3 w-5"></i>
714
+ [email protected]
715
+ </a>
716
+ </div>
717
+ </div>
718
+
719
+ <button class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg hover:bg-indigo-700 transition font-medium mb-4">
720
+ <i class="fas fa-phone-alt mr-2"></i> Позвонить риелтору
721
+ </button>
722
+
723
+ <button class="w-full border border-indigo-600 text-indigo-600 py-3 px-4 rounded-lg hover:bg-indigo-50 transition font-medium">
724
+ <i class="fas fa-envelope mr-2"></i> Написать сообщение
725
+ </button>
726
+
727
+ <div class="mt-6 pt-4 border-t border-gray-200">
728
+ <h4 class="font-bold text-gray-800 mb-2">Заявка на просмотр</h4>
729
+ <form class="space-y-3">
730
+ <input type="text" placeholder="Ваше имя" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
731
+ <input type="tel" placeholder="Телефон" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
732
+ <textarea placeholder="Сообщение (необязательно)" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
733
+ <button type="submit" class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition font-medium">
734
+ Отправить заявку
735
+ </button>
736
+ </form>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ </div>
745
+
746
+ <!-- Чат (скрыт по умолчанию) -->
747
+ <div id="chatWidget" class="fixed bottom-6 right-6 hidden">
748
+ <div class="bg-white rounded-t-lg shadow-xl w-80 overflow-hidden">
749
+ <div class="bg-indigo-600 text-white p-4 flex justify-between items-center">
750
+ <div class="font-medium">Чат с риелтором</div>
751
+ <button id="closeChat" class="text-white hover:text-gray-200">
752
+ <i class="fas fa-times"></i>
753
+ </button>
754
+ </div>
755
+ <div class="h-80 overflow-y-auto p-4 bg-gray-50">
756
+ <div class="space-y-3">
757
+ <div class="flex justify-start">
758
+ <div class="chat-message bg-white p-3 rounded-lg shadow-sm">
759
+ <div class="text-xs text-gray-500 mb-1">Алексей Иванов, 10:15</div>
760
+ <p>Здравствуйте! Чем могу помочь?</p>
761
+ </div>
762
+ </div>
763
+ <div class="flex justify-end">
764
+ <div class="chat-message bg-indigo-100 p-3 rounded-lg">
765
+ <div class="text-xs text-indigo-800 mb-1">Вы, 10:17</div>
766
+ <p>Здравствуйте! Меня интересует квартира на Ленина, 15</p>
767
+ </div>
768
+ </div>
769
+ <div class="flex justify-start">
770
+ <div class="chat-message bg-white p-3 rounded-lg shadow-sm">
771
+ <div class="text-xs text-gray-500 mb-1">Алексей Иванов, 10:18</div>
772
+ <p>Отличный выбор! Когда вам удобно приехать на просмотр?</p>
773
+ </div>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ <div class="p-3 border-t border-gray-200">
778
+ <div class="flex">
779
+ <input type="text" placeholder="Напишите сообщение..." class="flex-1 px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
780
+ <button class="bg-indigo-600 text-white px-4 rounded-r-lg hover:bg-indigo-700 transition">
781
+ <i class="fas fa-paper-plane"></i>
782
+ </button>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </div>
787
+
788
+ <!-- Кнопка чата -->
789
+ <button id="openChat" class="fixed bottom-6 right-6 bg-indigo-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center hover:bg-indigo-700 transition">
790
+ <i class="fas fa-comment-dots text-2xl"></i>
791
+ </button>
792
+
793
+ <!-- О нас -->
794
+ <section id="about" class="py-16 bg-white">
795
+ <div class="container mx-auto px-4">
796
+ <div class="flex flex-col lg:flex-row items-center">
797
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
798
+ <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="О нас" class="rounded-lg shadow-lg w-full">
799
+ </div>
800
+ <div class="lg:w-1/2">
801
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">О нашем агентстве</h2>
802
+ <p class="text-gray-600 mb-6">RealEstate Pro - это профессиональное агентство недвижимости, работающее на рынке с 2010 года. За это время мы помогли более 1000 клиентам найти свой идеальный дом и совершить безопасные сделки.</p>
803
+ <div class="space-y-4 mb-8">
804
+ <div class="flex">
805
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
806
+ <i class="fas fa-check text-indigo-600"></i>
807
+ </div>
808
+ <div>
809
+ <h4 class="font-bold text-gray-800 mb-1">Профессионализм</h4>
810
+ <p class="text-gray-600">Наши риелторы имеют многолетний опыт и знают рынок недвижимости до мелочей.</p>
811
+ </div>
812
+ </div>
813
+ <div class="flex">
814
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
815
+ <i class="fas fa-check text-indigo-600"></i>
816
+ </div>
817
+ <div>
818
+ <h4 class="font-bold text-gray-800 mb-1">Индивидуальный подход</h4>
819
+ <p class="text-gray-600">Для каждого клиента мы подбираем оптимальные варианты, учитывая все пожелания.</p>
820
+ </div>
821
+ </div>
822
+ <div class="flex">
823
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
824
+ <i class="fas fa-check text-indigo-600"></i>
825
+ </div>
826
+ <div>
827
+ <h4 class="font-bold text-gray-800 mb-1">Юридическая безопасность</h4>
828
+ <p class="text-gray-600">Мы сопровождаем сделку на всех этапах и гарантируем юридическую чистоту.</p>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium">
833
+ Узнать больше о нас
834
+ </button>
835
+ </div>
836
+ </div>
837
+ </div>
838
+ </section>
839
+
840
+ <!-- Контакты -->
841
+ <section id="contacts" class="py-16 bg-gray-50">
842
+ <div class="container mx-auto px-4">
843
+ <div class="text-center mb-12">
844
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Контакты</h2>
845
+ <p class="text-gray-600 max-w-2xl mx-auto">Свяжитесь с нами любым удобным способом - мы всегда рады помочь!</p>
846
+ </div>
847
+
848
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
849
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
850
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
851
+ <i class="fas fa-phone-alt text-indigo-600 text-2xl"></i>
852
+ </div>
853
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Телефон</h3>
854
+ <p class="text-gray-600 mb-4">+7 (495) 123-45-67</p>
855
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Позвонить</a>
856
+ </div>
857
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
858
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
859
+ <i class="fas fa-envelope text-indigo-600 text-2xl"></i>
860
+ </div>
861
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Email</h3>
862
+ <p class="text-gray-600 mb-4">[email protected]</p>
863
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Написать</a>
864
+ </div>
865
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
866
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
867
+ <i class="fas fa-map-marker-alt text-indigo-600 text-2xl"></i>
868
+ </div>
869
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Офис</h3>
870
+ <p class="text-gray-600 mb-4">Москва, ул. Тверская, 15</p>
871
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Как добраться</a>
872
+ </div>
873
+ </div>
874
+
875
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
876
+ <div class="grid grid-cols-1 lg:grid-cols-2">
877
+ <div class="p-8 lg:p-12">
878
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Напишите нам</h3>
879
+ <form class="space-y-4">
880
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
881
+ <div>
882
+ <label class="block text-sm font-medium text-gray-700 mb-1">Имя</label>
883
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
884
+ </div>
885
+ <div>
886
+ <label class="block text-sm font-medium text-gray-700 mb-1">Телефон</label>
887
+ <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
888
+ </div>
889
+ </div>
890
+ <div>
891
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
892
+ <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
893
+ </div>
894
+ <div>
895
+ <label class="block text-sm font-medium text-gray-700 mb-1">Сообщение</label>
896
+ <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
897
+ </div>
898
+ <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium">
899
+ Отправить сообщение
900
+ </button>
901
+ </form>
902
+ </div>
903
+ <div class="bg-gray-100 p-8 lg:p-12 flex items-center justify-center">
904
+ <div class="map-container w-full h-64 lg:h-full rounded-lg">
905
+ <!-- Здесь будет карта -->
906
+ <div class="flex items-center justify-center h-full bg-gray-200 text-gray-500">
907
+ <i class="fas fa-map-marker-alt text-2xl mr-2"></i>
908
+ <span>Карта расположения офиса</span>
909
+ </div>
910
+ </div>
911
+ </div>
912
+ </div>
913
+ </div>
914
+ </div>
915
+ </section>
916
+ </main>
917
+
918
+ <!-- Подвал -->
919
+ <footer class="bg-gray-800 text-white py-12">
920
+ <div class="container mx-auto px-4">
921
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
922
+ <div>
923
+ <h3 class="text-xl font-bold mb-4">RealEstate Pro</h3>
924
+ <p class="text-gray-400">Профессиональное агентство недвижимости с 2010 года. Мы помогаем найти дом вашей мечты.</p>
925
+ </div>
926
+ <div>
927
+ <h4 class="font-bold mb-4">Навигация</h4>
928
+ <ul class="space-y-2">
929
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Главная</a></li>
930
+ <li><a href="#properties" class="text-gray-400 hover:text-white transition">Каталог</a></li>
931
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">О нас</a></li>
932
+ <li><a href="#contacts" class="text-gray-400 hover:text-white transition">Контакты</a></li>
933
+ </ul>
934
+ </div>
935
+ <div>
936
+ <h4 class="font-bold mb-4">Контакты</h4>
937
+ <ul class="space-y-2">
938
+ <li class="flex items-center">
939
+ <i class="fas fa-map-marker-alt text-gray-400 mr-3"></i>
940
+ <span class="text-gray-400">Москва, ул. Тверская, 15</span>
941
+ </li>
942
+ <li class="flex items-center">
943
+ <i class="fas fa-phone-alt text-gray-400 mr-3"></i>
944
+ <span class="text-gray-400">+7 (495) 123-45-67</span>
945
+ </li>
946
+ <li class="flex items-center">
947
+ <i class="fas fa-envelope text-gray-400 mr-3"></i>
948
+ <span class="text-gray-400">[email protected]</span>
949
+ </li>
950
+ </ul>
951
+ </div>
952
+ <div>
953
+ <h4 class="font-bold mb-4">Соцсети</h4>
954
+ <div class="flex space-x-4">
955
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
956
+ <i class="fab fa-facebook-f"></i>
957
+ </a>
958
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
959
+ <i class="fab fa-instagram"></i>
960
+ </a>
961
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
962
+ <i class="fab fa-vk"></i>
963
+ </a>
964
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
965
+ <i class="fab fa-telegram-plane"></i>
966
+ </a>
967
+ </div>
968
+ </div>
969
+ </div>
970
+ <div class="pt-8 border-t border-gray-700 text-center text-gray-400">
971
+ <p>&copy; 2023 RealEstate Pro. Все права защищены.</p>
972
+ </div>
973
+ </div>
974
+ </footer>
975
+
976
+ <script>
977
+ // Управление мобильным меню
978
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
979
+ const mobileMenu = document.getElementById('mobileMenu');
980
+ const closeMobileMenu = document.getElementById('closeMobileMenu');
981
+ const mobileLoginBtn = document.getElementById('mobileLoginBtn');
982
+
983
+ mobileMenuBtn.addEventListener('click', () => {
984
+ mobileMenu.classList.remove('hidden');
985
+ });
986
+
987
+ closeMobileMenu.addEventListener('click', () => {
988
+ mobileMenu.classList.add('hidden');
989
+ });
990
+
991
+ mobileLoginBtn.addEventListener('click', () => {
992
+ mobileMenu.classList.add('hidden');
993
+ document.getElementById('loginModal').classList.remove('hidden');
994
+ });
995
+
996
+ // Управление модальным окном входа
997
+ const loginBtn = document.getElementById('loginBtn');
998
+ const loginModal = document.getElementById('loginModal');
999
+ const closeLoginModal = document.getElementById('closeLoginModal');
1000
+ const loginForm = document.getElementById('loginForm');
1001
+
1002
+ loginBtn.addEventListener('click', () => {
1003
+ loginModal.classList.remove('hidden');
1004
+ });
1005
+
1006
+ closeLoginModal.addEventListener('click', () => {
1007
+ loginModal.classList.add('hidden');
1008
+ });
1009
+
1010
+ loginForm.addEventListener('submit', (e) => {
1011
+ e.preventDefault();
1012
+ // Здесь должна быть логика входа
1013
+ loginModal.classList.add('hidden');
1014
+ document.getElementById('dashboard').classList.remove('hidden');
1015
+ document.getElementById('mainContent').classList.add('hidden');
1016
+ });
1017
+
1018
+ // Управление чатом
1019
+ const openChat = document.getElementById('openChat');
1020
+ const chatWidget = document.getElementById('chatWidget');
1021
+ const closeChat = document.getElementById('closeChat');
1022
+
1023
+ openChat.addEventListener('click', () => {
1024
+ chatWidget.classList.remove('hidden');
1025
+ openChat.classList.add('hidden');
1026
+ });
1027
+
1028
+ closeChat.addEventListener('click', () => {
1029
+ chatWidget.classList.add('hidden');
1030
+ openChat.classList.remove('hidden');
1031
+ });
1032
+
1033
+ // Управление странице�� объекта
1034
+ const propertyCards = document.querySelectorAll('.property-card');
1035
+ const propertyPage = document.getElementById('propertyPage');
1036
+ const backToCatalog = document.getElementById('backToCatalog');
1037
+ const mainContent = document.getElementById('mainContent');
1038
+
1039
+ propertyCards.forEach(card => {
1040
+ card.addEventListener('click', (e) => {
1041
+ if (!e.target.closest('button') && !e.target.closest('a')) {
1042
+ mainContent.classList.add('hidden');
1043
+ propertyPage.classList.remove('hidden');
1044
+ }
1045
+ });
1046
+ });
1047
+
1048
+ backToCatalog.addEventListener('click', () => {
1049
+ propertyPage.classList.add('hidden');
1050
+ mainContent.classList.remove('hidden');
1051
+ });
1052
+
1053
+ // Управление боковой панелью в личном кабинете
1054
+ const toggleSidebar = document.getElementById('toggleSidebar');
1055
+ const sidebar = document.getElementById('sidebar');
1056
+
1057
+ toggleSidebar.addEventListener('click', () => {
1058
+ sidebar.classList.toggle('active');
1059
+ });
1060
+
1061
+ // Галерея на странице объекта
1062
+ const thumbnails = document.querySelectorAll('.gallery-thumbnail');
1063
+ const mainImage = document.querySelector('.property-page img');
1064
+
1065
+ thumbnails.forEach(thumbnail => {
1066
+ thumbnail.addEventListener('click', () => {
1067
+ // Здесь должна быть логика смены основного изображения
1068
+ });
1069
+ });
1070
+
1071
+ // Анимация при загрузке
1072
+ document.addEventListener('DOMContentLoaded', () => {
1073
+ const elements = document.querySelectorAll('[data-aos]');
1074
+ elements.forEach(el => {
1075
+ el.style.opacity = '0';
1076
+ el.style.transform = 'translateY(20px)';
1077
+ el.style.transition = 'all 0.6s ease';
1078
+
1079
+ setTimeout(() => {
1080
+ el.style.opacity = '1';
1081
+ el.style.transform = 'translateY(0)';
1082
+ }, 200);
1083
+ });
1084
+ });
1085
+ </script>
1086
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=QuickDingo/gg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1087
+ </html>