Hugging Face's logo

Spaces:
Nasa1423
/
nb-iot-hub-admin-panel-g40lj
Running

App Files Community
Nasa1423 commited on
Commit
7b83fb0
·
verified ·
1 Parent(s): e886bf7

сайт для админки nbiot хаба, на странице топбар и панель с сеткой карточек с лизингом для модераторов

Browse files
Files changed (2) hide show
  1. README.md +9 -6
  2. index.html +657 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Nb Iot Hub Admin Panel G40lj
3
- emoji: 🦀
4
- colorFrom: indigo
5
- colorTo: red
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: NB-IoT Hub Admin Panel 🚀
3
+ colorFrom: purple
4
+ colorTo: purple
 
5
  sdk: static
6
+ emoji: 📚
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # NB-IoT Hub Admin Panel 🚀
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,657 @@
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>NB-IoT Hub Admin | Панель модератора</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ fontFamily: {
15
+ sans: ['Inter', 'sans-serif'],
16
+ },
17
+ colors: {
18
+ primary: {
19
+ 50: '#f0f9ff',
20
+ 100: '#e0f2fe',
21
+ 200: '#bae6fd',
22
+ 300: '#7dd3fc',
23
+ 400: '#38bdf8',
24
+ 500: '#0ea5e9',
25
+ 600: '#0284c7',
26
+ 700: '#0369a1',
27
+ 800: '#075985',
28
+ 900: '#0c4a6e',
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ </script>
35
+ <style>
36
+ body {
37
+ font-family: 'Inter', sans-serif;
38
+ }
39
+ .gradient-bg {
40
+ background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
41
+ }
42
+ .card-hover {
43
+ transition: all 0.3s ease;
44
+ }
45
+ .card-hover:hover {
46
+ transform: translateY(-4px);
47
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
48
+ }
49
+ .status-dot {
50
+ animation: pulse 2s infinite;
51
+ }
52
+ @keyframes pulse {
53
+ 0%, 100% { opacity: 1; }
54
+ 50% { opacity: 0.5; }
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-50 min-h-screen">
59
+
60
+ <!-- Top Bar -->
61
+ <nav class="gradient-bg shadow-lg sticky top-0 z-50">
62
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
63
+ <div class="flex items-center justify-between h-16">
64
+ <!-- Logo & Title -->
65
+ <div class="flex items-center gap-3">
66
+ <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center backdrop-blur-sm">
67
+ <i data-lucide="wifi" class="w-6 h-6 text-white"></i>
68
+ </div>
69
+ <div class="hidden sm:block">
70
+ <h1 class="text-white font-bold text-lg">NB-IoT Hub</h1>
71
+ <p class="text-white/60 text-xs">Панель администратора</p>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Search Bar -->
76
+ <div class="hidden md:flex flex-1 max-w-md mx-8">
77
+ <div class="relative w-full">
78
+ <i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/50"></i>
79
+ <input
80
+ type="text"
81
+ placeholder="Поиск устройств, контрактов..."
82
+ class="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-transparent transition-all"
83
+ >
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Right Side Actions -->
88
+ <div class="flex items-center gap-4">
89
+ <!-- Notifications -->
90
+ <button class="relative p-2 text-white/80 hover:text-white hover:bg-white/10 rounded-lg transition-colors">
91
+ <i data-lucide="bell" class="w-5 h-5"></i>
92
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
93
+ </button>
94
+
95
+ <!-- Messages -->
96
+ <button class="relative p-2 text-white/80 hover:text-white hover:bg-white/10 rounded-lg transition-colors">
97
+ <i data-lucide="message-square" class="w-5 h-5"></i>
98
+ <span class="absolute -top-1 -right-1 w-5 h-5 bg-orange-500 rounded-full text-xs flex items-center justify-center font-medium">3</span>
99
+ </button>
100
+
101
+ <!-- User Profile -->
102
+ <div class="flex items-center gap-3 pl-4 border-l border-white/20">
103
+ <div class="text-right hidden sm:block">
104
+ <p class="text-white font-medium text-sm">Алексей М.</p>
105
+ <p class="text-white/60 text-xs">Старший модератор</p>
106
+ </div>
107
+ <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center border-2 border-white/30">
108
+ <i data-lucide="user" class="w-5 h-5 text-white"></i>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </nav>
115
+
116
+ <!-- Secondary Navigation -->
117
+ <div class="bg-white border-b border-gray-200 shadow-sm">
118
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
119
+ <div class="flex items-center justify-between h-12">
120
+ <div class="flex items-center gap-6">
121
+ <a href="#" class="flex items-center gap-2 px-3 py-2 text-primary-600 border-b-2 border-primary-600 font-medium text-sm">
122
+ <i data-lucide="layout-grid" class="w-4 h-4"></i>
123
+ Лизинг
124
+ </a>
125
+ <a href="#" class="flex items-center gap-2 px-3 py-2 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
126
+ <i data-lucide="cpu" class="w-4 h-4"></i>
127
+ Устройства
128
+ </a>
129
+ <a href="#" class="flex items-center gap-2 px-3 py-2 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
130
+ <i data-lucide="users" class="w-4 h-4"></i>
131
+ Клиенты
132
+ </a>
133
+ <a href="#" class="flex items-center gap-2 px-3 py-2 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
134
+ <i data-lucide="bar-chart-3" class="w-4 h-4"></i>
135
+ Статистика
136
+ </a>
137
+ <a href="#" class="flex items-center gap-2 px-3 py-2 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
138
+ <i data-lucide="settings" class="w-4 h-4"></i>
139
+ Настройки
140
+ </a>
141
+ </div>
142
+ <div class="flex items-center gap-2">
143
+ <button class="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors flex items-center gap-2">
144
+ <i data-lucide="plus" class="w-4 h-4"></i>
145
+ Новый лизинг
146
+ </button>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Main Content -->
153
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
154
+
155
+ <!-- Page Header & Filters -->
156
+ <div class="mb-8">
157
+ <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
158
+ <div>
159
+ <h2 class="text-2xl font-bold text-gray-900">Управление лизингом</h2>
160
+ <p class="text-gray-500 mt-1">Всего контрактов: <span class="font-semibold text-gray-900">847</span></p>
161
+ </div>
162
+ <div class="flex items-center gap-3">
163
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2 text-sm">
164
+ <i data-lucide="filter" class="w-4 h-4"></i>
165
+ Фильтры
166
+ </button>
167
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2 text-sm">
168
+ <i data-lucide="download" class="w-4 h-4"></i>
169
+ Экспорт
170
+ </button>
171
+ <div class="flex bg-gray-100 rounded-lg p-1">
172
+ <button class="px-3 py-1 bg-white shadow rounded-md text-gray-700 text-sm font-medium">
173
+ <i data-lucide="grid-3x3" class="w-4 h-4"></i>
174
+ </button>
175
+ <button class="px-3 py-1 text-gray-500 hover:text-gray-700 text-sm transition-colors">
176
+ <i data-lucide="list" class="w-4 h-4"></i>
177
+ </button>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Filter Tags -->
183
+ <div class="flex flex-wrap gap-2">
184
+ <span class="px-3 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium">Все статусы</span>
185
+ <span class="px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 cursor-pointer transition-colors">Активные</span>
186
+ <span class="px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 cursor-pointer transition-colors">На проверке</span>
187
+ <span class="px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 cursor-pointer transition-colors">Просроченные</span>
188
+ <span class="px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 cursor-pointer transition-colors">Завершённые</span>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Cards Grid -->
193
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
194
+
195
+ <!-- Card 1 -->
196
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 card-hover overflow-hidden">
197
+ <div class="p-5">
198
+ <div class="flex items-start justify-between mb-4">
199
+ <div class="flex items-center gap-3">
200
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
201
+ <i data-lucide="sensor" class="w-6 h-6 text-green-600"></i>
202
+ </div>
203
+ <div>
204
+ <h3 class="font-semibold text-gray-900">Датчик влажности #1247</h3>
205
+ <p class="text-sm text-gray-500">Серийный: NB-2024-001</p>
206
+ </div>
207
+ </div>
208
+ <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full flex items-center gap-1">
209
+ <span class="w-1.5 h-1.5 bg-green-500 rounded-full status-dot"></span>
210
+ Активен
211
+ </span>
212
+ </div>
213
+
214
+ <div class="space-y-3 mb-4">
215
+ <div class="flex items-center justify-between text-sm">
216
+ <span class="text-gray-500">Клиент</span>
217
+ <span class="font-medium text-gray-900">ООО "ТехноСтрой"</span>
218
+ </div>
219
+ <div class="flex items-center justify-between text-sm">
220
+ <span class="text-gray-500">Срок лизинга</span>
221
+ <span class="font-medium text-gray-900">12 мес.</span>
222
+ </div>
223
+ <div class="flex items-center justify-between text-sm">
224
+ <span class="text-gray-500">Платёж</span>
225
+ <span class="font-medium text-primary-600">₽ 2,500/мес</span>
226
+ </div>
227
+ <div class="flex items-center justify-between text-sm">
228
+ <span class="text-gray-500">Осталось</span>
229
+ <span class="font-medium text-gray-900">8 платежей</span>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="flex gap-2 pt-4 border-t border-gray-100">
234
+ <button class="flex-1 px-3 py-2 bg-primary-50 text-primary-700 rounded-lg text-sm font-medium hover:bg-primary-100 transition-colors flex items-center justify-center gap-2">
235
+ <i data-lucide="eye" class="w-4 h-4"></i>
236
+ Обзор
237
+ </button>
238
+ <button class="flex-1 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
239
+ <i data-lucide="more-horizontal" class="w-4 h-4"></i>
240
+ </button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Card 2 -->
246
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 card-hover overflow-hidden">
247
+ <div class="p-5">
248
+ <div class="flex items-start justify-between mb-4">
249
+ <div class="flex items-center gap-3">
250
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
251
+ <i data-lucide="thermometer" class="w-6 h-6 text-blue-600"></i>
252
+ </div>
253
+ <div>
254
+ <h3 class="font-semibold text-gray-900">Термодатчик #0892</h3>
255
+ <p class="text-sm text-gray-500">Серийный: NB-2024-002</p>
256
+ </div>
257
+ </div>
258
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs font-medium rounded-full flex items-center gap-1">
259
+ <span class="w-1.5 h-1.5 bg-yellow-500 rounded-full status-dot"></span>
260
+ На проверке
261
+ </span>
262
+ </div>
263
+
264
+ <div class="space-y-3 mb-4">
265
+ <div class="flex items-center justify-between text-sm">
266
+ <span class="text-gray-500">Клиент</span>
267
+ <span class="font-medium text-gray-900">ИП Сидоров А.В.</span>
268
+ </div>
269
+ <div class="flex items-center justify-between text-sm">
270
+ <span class="text-gray-500">Срок лизинга</span>
271
+ <span class="font-medium text-gray-900">24 мес.</span>
272
+ </div>
273
+ <div class="flex items-center justify-between text-sm">
274
+ <span class="text-gray-500">Платёж</span>
275
+ <span class="font-medium text-primary-600">₽ 1,800/мес</span>
276
+ </div>
277
+ <div class="flex items-center justify-between text-sm">
278
+ <span class="text-gray-500">Осталось</span>
279
+ <span class="font-medium text-gray-900">20 платежей</span>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="flex gap-2 pt-4 border-t border-gray-100">
284
+ <button class="flex-1 px-3 py-2 bg-primary-50 text-primary-700 rounded-lg text-sm font-medium hover:bg-primary-100 transition-colors flex items-center justify-center gap-2">
285
+ <i data-lucide="check-circle" class="w-4 h-4"></i>
286
+ Одобрить
287
+ </button>
288
+ <button class="flex-1 px-3 py-2 border border-red-300 text-red-600 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors flex items-center justify-center gap-2">
289
+ <i data-lucide="x-circle" class="w-4 h-4"></i>
290
+ Отклонить
291
+ </button>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Card 3 -->
297
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 card-hover overflow-hidden">
298
+ <div class="p-5">
299
+ <div class="flex items-start justify-between mb-4">
300
+ <div class="flex items-center gap-3">
301
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
302
+ <i data-lucide="radio" class="w-6 h-6 text-purple-600"></i>
303
+ </div>
304
+ <div>
305
+ <h3 class="font-semibold text-gray-900">IoT Gateway #0567</h3>
306
+ <p class="text-sm text-gray-500">Серийный: NB-2024-003</p>
307
+ </div>
308
+ </div>
309
+ <span class="px-2 py-1 bg-red-100 text-red-700 text-xs font-medium rounded-full flex items-center gap-1">
310
+ <span class="w-1.5 h-1.5 bg-red-500 rounded-full status-dot"></span>
311
+ Просрочен
312
+ </span>
313
+ </div>
314
+
315
+ <div class="space-y-3 mb-4">
316
+ <div class="flex items-center justify-between text-sm">
317
+ <span class="text-gray-500">Клиент</span>
318
+ <span class="font-medium text-gray-900">АО "Инновации"</span>
319
+ </div>
320
+ <div class="flex items-center justify-between text-sm">
321
+ <span class="text-gray-500">Срок лизинга</span>
322
+ <span class="font-medium text-gray-900">36 мес.</span>
323
+ </div>
324
+ <div class="flex items-center justify-between text-sm">
325
+ <span class="text-gray-500">Платёж</span>
326
+ <span class="font-medium text-primary-600">₽ 5,200/мес</span>
327
+ </div>
328
+ <div class="flex items-center justify-between text-sm">
329
+ <span class="text-gray-500">Дней просрочки</span>
330
+ <span class="font-medium text-red-600">12 дней</span>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="flex gap-2 pt-4 border-t border-gray-100">
335
+ <button class="flex-1 px-3 py-2 bg-primary-50 text-primary-700 rounded-lg text-sm font-medium hover:bg-primary-100 transition-colors flex items-center justify-center gap-2">
336
+ <i data-lucide="message-circle" class="w-4 h-4"></i>
337
+ Напомнить
338
+ </button>
339
+ <button class="flex-1 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
340
+ <i data-lucide="file-text" class="w-4 h-4"></i>
341
+ Детали
342
+ </button>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Card 4 -->
348
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 card-hover overflow-hidden">
349
+ <div class="p-5">
350
+ <div class="flex items-start justify-between mb-4">
351
+ <div class="flex items-center gap-3">
352
+ <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
353
+ <i data-lucide="activity" class="w-6 h-6 text-orange-600"></i>
354
+ </div>
355
+ <div>
356
+ <h3 class="font-semibold text-gray-900">Счётчик газа #3341</h3>
357
+ <p class="text-sm text-gray-500">Серийный: NB-2024-004</p>
358
+ </div>
359
+ </div>
360
+ <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full flex items-center gap-1">
361
+ <span class="w-1.5 h-1.5 bg-green-500 rounded-full status-dot"></span>
362
+ Активен
363
+ </span>
364
+ </div>
365
+
366
+ <div class="space-y-3 mb-4">
367
+ <div class="flex items-center justify-between text-sm">
368
+ <span class="text-gray-500">Клиент</span>
369
+ <span class="font-medium text-gray-900">ООО "ГазСервис"</span>
370
+ </div>
371
+ <div class="flex items-center justify-between text-sm">
372
+ <span class="text-gray-500">Срок лизинга</span>
373
+ <span class="font-medium text-gray-900">18 мес.</span>
374
+ </div>
375
+ <div class="flex items-center justify-between text-sm">
376
+ <span class="text-gray-500">Платёж</span>
377
+ <span class="font-medium text-primary-600">₽ 980/мес</span>
378
+ </div>
379
+ <div class="flex items-center justify-between text-sm">
380
+ <span class="text-gray-500">Осталось</span>
381
+ <span class="font-medium text-gray-900">5 платежей</span>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="flex gap-2 pt-4 border-t border-gray-100">
386
+ <button class="flex-1 px-3 py-2 bg-primary-50 text-primary-700 rounded-lg text-sm font-medium hover:bg-primary-100 transition-colors flex items-center justify-center gap-2">
387
+ <i data-lucide="eye" class="w-4 h-4"></i>
388
+ Обзор
389
+ </button>
390
+ <button class="flex-1 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
391
+ <i data-lucide="more-horizontal" class="w-4 h-4"></i>
392
+ </button>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Card 5 -->
398
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 card-hover overflow-hidden">
399
+ <div class="p-5">
400
+ <div class="flex items-start justify-between mb-4">
401
+ <div class="flex items-center gap-3">
402
+ <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center">
403
+ <i data-lucide="droplets" class="w-6 h-6 text-teal-600"></i>
404
+ </div>
405
+ <div>
406
+ <h3 class="font-semibold text-gray-900">Датчик протечки #2210</h3>
407
+ <p class="text-sm text-gray-500">Серийный: NB-2024-005</p>
408
+ </div>
409
+ </div>
410
+ <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full flex items-center gap-1">
411
+ <span class="w-1.5 h-1.5 bg-green-500 rounded-full status-dot"></span>
412
+ Активен
413
+ </span>
414
+ </div>
415
+
416
+ <div class="space-y-3 mb-4">
417
+ <div class="flex items-center justify-between text-sm">
418
+ <span class="text-gray-500">Клиент</span>
419
+ <span class="font-medium text-gray-900">ЖК "Парковый"</span>
420
+ </div>
421
+ <div class="flex items-center justify-between text-sm">
422
+ <span class="text-gray-500">Срок лизинга</span>
423
+ <span class="font-medium text-gray-900">12 мес.</span>
424
+ </div>
425
+ <div class="flex items-center justify-between text-sm">
426
+ <span class="text-gray-500">Платёж</span>
427
+ <span class="font-medium text-primary-600">₽ 450/мес</span>
428
+ </div>
429
+ <div class="flex items-center justify-between text-sm">
430
+ <span class="text-gray-500">Осталось</span>
431
+ <span class="font-medium text-gray-900">11 платежей</span>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="flex gap-2 pt-4 border-t border-gray-100">
436
+ <button class="flex-1 px-3 py-2 bg-primary-50 text-primary-700 rounded-lg text-sm font-medium hover:bg-primary-100 transition-colors flex items-center justify-center gap-2">
437
+ <i data-lucide="eye" class="w-4 h-4"></i>
438
+ Обзор
439
+ </button>
440
+ <button class="flex-1 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
441
+ <i data-lucide="more-horizontal" class="w-4 h-4"></i>
442
+ </button>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Card 6 -->
448
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 card-hover overflow-hidden">
449
+ <div class="p-5">
450
+ <div class="flex items-start justify-between mb-4">
451
+ <div class="flex items-center gap-3">
452
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
453
+ <i data-lucide="zap" class="w-6 h-6 text-indigo-600"></i>
454
+ </div>
455
+ <div>
456
+ <h3 class="font-semibold text-gray-900">Электросчётчик #4455</h3>
457
+ <p class="text-sm text-gray-500">Серийный: NB-2024-006</p>
458
+ </div>
459
+ </div>
460
+ <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full flex items-center gap-1">
461
+ <span class="w-1.5 h-1.5 bg-blue-500 rounded-full status-dot"></span>
462
+ Новый
463
+ </span>
464
+ </div>
465
+
466
+ <div class="space-y-3 mb-4">
467
+ <div class="flex items-center justify-between text-sm">
468
+ <span class="text-gray-500">Клиент</span>
469
+ <span class="font-medium text-gray-900">ООО "ЭнергоПром"</span>
470
+ </div>
471
+ <div class="flex items-center justify-between text-sm">
472
+ <span class="text-gray-500">Срок лизинга</span>
473
+ <span class="font-medium text-gray-900">24 мес.</span>
474
+ </div>
475
+ <div class="flex items-center justify-between text-sm">
476
+ <span class="text-gray-500">Платёж</span>
477
+ <span class="font-medium text-primary-600">₽ 3,200/мес</span>
478
+ </div>
479
+ <div class="flex items-center justify-between text-sm">
480
+ <span class="text-gray-500">Дата добавления</span>
481
+ <span class="font-medium text-gray-900">Сегодня</span>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="flex gap-2 pt-4 border-t border-gray-100">
486
+ <button class="flex-1 px-3 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors flex items-center justify-center gap-2">
487
+ <i data-lucide="check-circle" class="w-4 h-4"></i>
488
+ Одобрить
489
+ </button>
490
+ <button class="flex-1 px-3 py-2 border border-red-300 text-red-600 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors flex items-center justify-center gap-2">
491
+ <i data-lucide="x-circle" class="w-4 h-4"></i>
492
+ Отклонить
493
+ </button>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <!-- Card 7 -->
499
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 card-hover overflow-hidden">
500
+ <div class="p-5">
501
+ <div class="flex items-start justify-between mb-4">
502
+ <div class="flex items-center gap-3">
503
+ <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
504
+ <i data-lucide="lock" class="w-6 h-6 text-pink-600"></i>
505
+ </div>
506
+ <div>
507
+ <h3 class="font-semibold text-gray-900">Замок Smart #6678</h3>
508
+ <p class="text-sm text-gray-500">Серийный: NB-2024-007</p>
509
+ </div>
510
+ </div>
511
+ <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full flex items-center gap-1">
512
+ <span class="w-1.5 h-1.5 bg-gray-400 rounded-full status-dot"></span>
513
+ Приостановлен
514
+ </span>
515
+ </div>
516
+
517
+ <div class="space-y-3 mb-4">
518
+ <div class="flex items-center justify-between text-sm">
519
+ <span class="text-gray-500">Клиент</span>
520
+ <span class="font-medium text-gray-900">ТК "Бизнес Центр"</span>
521
+ </div>
522
+ <div class="flex items-center justify-between text-sm">
523
+ <span class="text-gray-500">Срок лизинга</span>
524
+ <span class="font-medium text-gray-900">12 мес.</span>
525
+ </div>
526
+ <div class="flex items-center justify-between text-sm">
527
+ <span class="text-gray-500">Платёж</span>
528
+ <span class="font-medium text-primary-600">₽ 890/мес</span>
529
+ </div>
530
+ <div class="flex items-center justify-between text-sm">
531
+ <span class="text-gray-500">Причина</span>
532
+ <span class="font-medium text-orange-600">Тех. работы</span>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="flex gap-2 pt-4 border-t border-gray-100">
537
+ <button class="flex-1 px-3 py-2 bg-primary-50 text-primary-700 rounded-lg text-sm font-medium hover:bg-primary-100 transition-colors flex items-center justify-center gap-2">
538
+ <i data-lucide="play-circle" class="w-4 h-4"></i>
539
+ Возобновить
540
+ </button>
541
+ <button class="flex-1 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
542
+ <i data-lucide="file-text" class="w-4 h-4"></i>
543
+ Детали
544
+ </button>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Card 8 -->
550
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 card-hover overflow-hidden">
551
+ <div class="p-5">
552
+ <div class="flex items-start justify-between mb-4">
553
+ <div class="flex items-center gap-3">
554
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
555
+ <i data-lucide="camera" class="w-6 h-6 text-green-600"></i>
556
+ </div>
557
+ <div>
558
+ <h3 class="font-semibold text-gray-900">Камера наблюдения #8899</h3>
559
+ <p class="text-sm text-gray-500">Серийный: NB-2024-008</p>
560
+ </div>
561
+ </div>
562
+ <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full flex items-center gap-1">
563
+ <span class="w-1.5 h-1.5 bg-green-500 rounded-full status-dot"></span>
564
+ Активен
565
+ </span>
566
+ </div>
567
+
568
+ <div class="space-y-3 mb-4">
569
+ <div class="flex items-center justify-between text-sm">
570
+ <span class="text-gray-500">Клиент</span>
571
+ <span class="font-medium text-gray-900">УК "С安全ость"</span>
572
+ </div>
573
+ <div class="flex items-center justify-between text-sm">
574
+ <span class="text-gray-500">Срок лизинга</span>
575
+ <span class="font-medium text-gray-900">36 мес.</span>
576
+ </div>
577
+ <div class="flex items-center justify-between text-sm">
578
+ <span class="text-gray-500">Платёж</span>
579
+ <span class="font-medium text-primary-600">₽ 4,500/мес</span>
580
+ </div>
581
+ <div class="flex items-center justify-between text-sm">
582
+ <span class="text-gray-500">Осталось</span>
583
+ <span class="font-medium text-gray-900">32 платежа</span>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="flex gap-2 pt-4 border-t border-gray-100">
588
+ <button class="flex-1 px-3 py-2 bg-primary-50 text-primary-700 rounded-lg text-sm font-medium hover:bg-primary-100 transition-colors flex items-center justify-center gap-2">
589
+ <i data-lucide="eye" class="w-4 h-4"></i>
590
+ Обзор
591
+ </button>
592
+ <button class="flex-1 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
593
+ <i data-lucide="more-horizontal" class="w-4 h-4"></i>
594
+ </button>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ </div>
600
+
601
+ <!-- Pagination -->
602
+ <div class="mt-8 flex items-center justify-between">
603
+ <div class="text-sm text-gray-500">
604
+ Показано 8 из 847 контрактов
605
+ </div>
606
+ <div class="flex items-center gap-2">
607
+ <button class="px-3 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50" disabled>
608
+ <i data-lucide="chevron-left" class="w-4 h-4"></i>
609
+ </button>
610
+ <button class="px-3 py-2 bg-primary-600 text-white rounded-lg">1</button>
611
+ <button class="px-3 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">2</button>
612
+ <button class="px-3 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">3</button>
613
+ <span class="px-2 text-gray-500">...</span>
614
+ <button class="px-3 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">106</button>
615
+ <button class="px-3 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
616
+ <i data-lucide="chevron-right" class="w-4 h-4"></i>
617
+ </button>
618
+ </div>
619
+ </div>
620
+
621
+ </main>
622
+
623
+ <!-- Quick Stats Footer -->
624
+ <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-40">
625
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
626
+ <div class="flex items-center justify-between">
627
+ <div class="flex items-center gap-8">
628
+ <div class="flex items-center gap-2">
629
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
630
+ <span class="text-sm text-gray-600">Активных: <span class="font-semibold text-gray-900">742</span></span>
631
+ </div>
632
+ <div class="flex items-center gap-2">
633
+ <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
634
+ <span class="text-sm text-gray-600">На проверке: <span class="font-semibold text-gray-900">45</span></span>
635
+ </div>
636
+ <div class="flex items-center gap-2">
637
+ <div class="w-3 h-3 bg-red-500 rounded-full"></div>
638
+ <span class="text-sm text-gray-600">Просроченных: <span class="font-semibold text-gray-900">32</span></span>
639
+ </div>
640
+ <div class="flex items-center gap-2">
641
+ <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
642
+ <span class="text-sm text-gray-600">Новых: <span class="font-semibold text-gray-900">28</span></span>
643
+ </div>
644
+ </div>
645
+ <div class="text-sm text-gray-500">
646
+ Общая сумма: <span class="font-semibold text-gray-900">₽ 2.4M/мес</span>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <script>
653
+ lucide.createIcons();
654
+ </script>
655
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
656
+ </body>
657
+ </html>