склади и инструмент готовы

2025-12-07 19:36:28 +03:00
parent 54bf21d52d
commit 65a3bc1671
65 changed files with 3485 additions and 115 deletions
@@ -0,0 +1,153 @@
+/* Карточка клиента с современным дизайном */
+.client-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 16px;
+    padding: 1.25rem;
+    box-shadow: var(--card-shadow);
+    transition: var(--transition-smooth);
+    min-width: 300px;
+}
+
+.client-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+/* Аватар с градиентной обводкой */
+.client-avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid transparent;
+    background: linear-gradient(white, white) padding-box,
+                linear-gradient(135deg, #667eea 0%, #764ba2 100%) border-box;
+    padding: 2px;
+    background-color: #f8f9fa;
+}
+
+/* Имя клиента */
+.client-name {
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 1.1rem;
+    min-height: 1.5rem;
+}
+
+/* Кнопка выхода */
+.logout-btn {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    border: none;
+    border-radius: 12px;
+    padding: 0.5rem 1.25rem;
+    font-weight: 600;
+    color: white;
+    transition: var(--transition-smooth);
+    position: relative;
+    overflow: hidden;
+}
+
+.logout-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: 0.5s;
+}
+
+.logout-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 5px 15px rgba(245, 87, 108, 0.3);
+}
+
+.logout-btn:hover::before {
+    left: 100%;
+}
+
+/* Анимации */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-up {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+/* Стили для состояния загрузки */
+.client-avatar[src=""], 
+.client-avatar:not([src]) {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+.client-name:empty::before,
+.client-role:empty::before {
+    content: "Загрузка...";
+    color: #ccc;
+    font-style: italic;
+}
+
+@keyframes loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+    .client-card {
+        padding: 1rem;
+        min-width: auto;
+        width: 100%;
+    }
+    
+    .client-avatar {
+        width: 48px;
+        height: 48px;
+    }
+    
+    .glass-header {
+        padding: 1rem 0;
+    }
+    
+    .client-name {
+        font-size: 1rem;
+    }
+    
+    .logout-btn span:not(.bi) {
+        display: none;
+    }
+    
+    .logout-btn .bi {
+        margin-right: 0;
+    }
+}
+
+/* Микро-интеракции */
+.clickable {
+    cursor: pointer;
+    transition: var(--transition-smooth);
+}
+
+.clickable:hover {
+    transform: scale(1.02);
+}