File size: 12,345 Bytes
4db443c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 | <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пользователи - SupportSphere</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.auchan-gradient {
background: linear-gradient(135deg, #e30613 0%, #ff6b6b 100%);
}
.Auchan-button {
transition: all 0.3s ease;
}
.Auchan-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(227, 6, 19, 0.3);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Header -->
<header class="auchan-gradient text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div class="flex items-center space-x-4">
<img src="https://http.static.photos/logo/200x80/1" alt="SupportSphere Logo" class="h-12 md:h-16 object-contain">
<div>
<h1 class="text-2xl md:text-3xl font-bold">SupportSphere</h1>
<p class="text-sm opacity-90">Customer Service Employee Care Management</p>
</div>
</div>
<nav class="flex flex-wrap items-center gap-2">
<a href="index.html" class="Auchan-button bg-white text-red-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 flex items-center gap-2">
<i data-feather="home" class="w-4 h-4"></i>
Главная
</a>
<a href="register-call.html" class="Auchan-button bg-white text-red-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 flex items-center gap-2">
<i data-feather="phone" class="w-4 h-4"></i>
Зарегистрировать звонок
</a>
<a href="incidents.html" class="Auchan-button bg-white text-red-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 flex items-center gap-2">
<i data-feather="alert-triangle" class="w-4 h-4"></i>
Инциденты
</a>
<a href="statistics.html" class="Auchan-button bg-white text-red-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 flex items-center gap-2">
<i data-feather="bar-chart-2" class="w-4 h-4"></i>
Статистика
</a>
<a href="subthemes1.html" class="Auchan-button bg-white text-red-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 flex items-center gap-2">
<i data-feather="folder" class="w-4 h-4"></i>
Подтемы 1
</a>
<a href="subthemes2.html" class="Auchan-button bg-white text-red-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 flex items-center gap-2">
<i data-feather="folder" class="w-4 h-4"></i>
Подтемы 2
</a>
<a href="users.html" class="Auchan-button bg-white text-red-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 flex items-center gap-2">
<i data-feather="users" class="w-4 h-4"></i>
Пользователи
</a>
<a href="admin.html" class="Auchan-button bg-white text-red-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 flex items-center gap-2">
<i data-feather="log-out" class="w-4 h-4"></i>
Выйти
</a>
</nav>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<div class="glass-effect rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
<i data-feather="users" class="w-6 h-6 text-red-600"></i>
Пользователи системы
</h2>
<button class="Auchan-button bg-red-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-red-700 flex items-center gap-2">
<i data-feather="user-plus" class="w-4 h-4"></i>
Добавить пользователя
</button>
</div>
<div class="mb-6">
<div class="flex flex-col md:flex-row gap-4">
<input type="text" placeholder="Поиск пользователя..." class="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:border-red-500 focus:ring-2 focus:ring-red-200">
<select class="px-4 py-2 rounded-lg border border-gray-300 focus:border-red-500 focus:ring-2 focus:ring-red-200">
<option>Все роли</option>
<option>Администратор</option>
<option>Менеджер</option>
<option>Оператор</option>
</select>
<select class="px-4 py-2 rounded-lg border border-gray-300 focus:border-red-500 focus:ring-2 focus:ring-red-200">
<option>Все статусы</option>
<option>Активен</option>
<option>Заблокирован</option>
</select>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b">
<th class="text-left py-3 px-4 font-semibold text-gray-700">ID</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">Имя</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">Email</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">Роль</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">Статус</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">Последний вход</th>
<th class="text-left py-3 px-4 font-semibold text-gray-700">Действия</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="py-3 px-4">#001</td>
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
<span class="text-xs font-semibold text-red-600">АИ</span>
</div>
<span>Иванов А.И.</span>
</div>
</td>
<td class="py-3 px-4">ivanov@example.com</td>
<td class="py-3 px-4"><span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">Администратор</span></td>
<td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Активен</span></td>
<td class="py-3 px-4">15.01.2024 14:30</td>
<td class="py-3 px-4">
<div class="flex gap-2">
<button class="text-blue-600 hover:text-blue-800">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</div>
</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="py-3 px-4">#002</td>
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<span class="text-xs font-semibold text-blue-600">ПП</span>
</div>
<span>Петров П.П.</span>
</div>
</td>
<td class="py-3 px-4">petrov@example.com</td>
<td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">Менеджер</span></td>
<td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Активен</span></td>
<td class="py-3 px-4">15.01.2024 12:15</td>
<td class="py-3 px-4">
<div class="flex gap-2">
<button class="text-blue-600 hover:text-blue-800">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</div>
</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="py-3 px-4">#003</td>
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
<span class="text-xs font-semibold text-gray-600">СА</span>
</div>
<span>Сидорова А.С.</span>
</div>
</td>
<td class="py-3 px-4">sidorova@example.com</td>
<td class="py-3 px-4"><span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm">Оператор</span></td>
<td class="py-3 px-4"><span class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm">Заблокирован</span></td>
<td class="py-3 px-4">10.01.2024 09:45</td>
<td class="py-3 px-4">
<div class="flex gap-2">
<button class="text-blue-600 hover:text-blue-800">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
<button class="text-green-600 hover:text-green-800">
<i data-feather="unlock" class="w-4 h-4"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<script>
feather.replace();
</script>
</body>
</html> |