From ec870685fe6d4258db4599b744d056a0b3915c65 Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Sat, 24 May 2025 00:44:23 +0700
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ProfileView.vue | 1558 +++++++++++++------------------------
 1 file changed, 548 insertions(+), 1010 deletions(-)

diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 01da86a..f8514c9 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,29 +1,5 @@
 <template>
   <div class="app-profile-view">
-    <!-- Header Section -->
-    <div class="profile-header">
-      <div class="container">
-        <div class="header-content">
-          <div class="profile-title">
-            <h1 class="section-title">Мой профиль</h1>
-            <p class="subtitle">Управление личными данными и настройками</p>
-          </div>
-          <!-- Переносим кнопку редактирования в заголовок и делаем её меньше -->
-          <div class="header-actions" v-if="profileData && !initialLoading">
-            <button 
-              class="edit-btn"
-              @click="toggleEditMode"
-              :disabled="loading"
-            >
-              <i v-if="!isEditMode" class="bi-pencil"></i>
-              <i v-else class="bi-check"></i>
-              {{ isEditMode ? 'Сохранить' : 'Редактировать' }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <!-- Loading State -->
     <div v-if="loading && initialLoading" class="loading-section">
       <div class="loading-spinner">
@@ -127,6 +103,17 @@
             <div class="info-card basic-info-card">
               <div class="card-header">
                 <h3><i class="bi-person-lines-fill"></i> Основная информация</h3>
+                <div class="header-actions">
+                  <button 
+                    class="edit-btn" 
+                    @click="toggleEditMode"
+                    :disabled="profileLoading"
+                  >
+                    <i v-if="!isEditMode" class="bi-pencil"></i>
+                    <i v-else class="bi-check"></i>
+                    {{ isEditMode ? 'Сохранить' : 'Редактировать' }}
+                  </button>
+                </div>
               </div>
               <div class="card-content">
                 <!-- Форма с сообщениями -->
@@ -304,14 +291,55 @@
                 
                 <!-- Empty State -->                
                 <div v-else class="empty-photos">
-                  <i class="bi-image"></i>
-                  <h4>Нет фотографий</h4>
-                  <p>Добавьте фотографии, чтобы сделать профиль привлекательнее</p>
-                  <button class="action-btn primary" @click="triggerPhotoUpload" :disabled="photoActionLoading">
-                    <span v-if="photoActionLoading" class="spinner-small"></span>
-                    <i v-else class="bi-plus"></i>
-                    {{ photoActionLoading ? 'Загрузка...' : 'Добавить первое фото' }}
-                  </button>
+                  <div class="upload-zone" @click="triggerPhotoUpload" :class="{ 'uploading': photoActionLoading }">
+                    <div class="upload-icon-container">
+                      <div class="upload-icon-bg">
+                        <i v-if="!photoActionLoading" class="bi-camera-fill upload-icon"></i>
+                        <div v-else class="upload-spinner"></div>
+                      </div>
+                      <div class="upload-pulse"></div>
+                    </div>
+                    
+                    <div class="upload-content">
+                      <h3 class="upload-title">
+                        {{ photoActionLoading ? 'Загружаем...' : 'Добавьте первое фото' }}
+                      </h3>
+                      <p class="upload-description">
+                        {{ photoActionLoading ? 'Подождите, фотография обрабатывается' : 'Нажмите или перетащите файлы сюда для загрузки' }}
+                      </p>
+                      
+                      <div class="upload-features">
+                        <div class="feature-item">
+                          <i class="bi-shield-check"></i>
+                          <span>Безопасно</span>
+                        </div>
+                        <div class="feature-item">
+                          <i class="bi-lightning-charge"></i>
+                          <span>Быстро</span>
+                        </div>
+                        <div class="feature-item">
+                          <i class="bi-image"></i>
+                          <span>HD качество</span>
+                        </div>
+                      </div>
+                      
+                      <div class="upload-btn-container">
+                        <button 
+                          class="upload-btn"
+                          @click.stop="triggerPhotoUpload" 
+                          :disabled="photoActionLoading"
+                        >
+                          <span v-if="photoActionLoading" class="btn-spinner"></span>
+                          <i v-else class="bi-plus-circle-fill"></i>
+                          {{ photoActionLoading ? 'Загрузка...' : 'Выбрать фото' }}
+                        </button>
+                        
+                        <div class="upload-hint">
+                          <small>Поддерживаются: JPG, PNG, WebP до 10 МБ</small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
 
                 <!-- Photo Messages -->
@@ -2174,6 +2202,178 @@ onUnmounted(() => {
   flex-shrink: 0;
 }
 
+.avatar-image {
+   width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  font-size: 2rem;
+}
+
+.avatar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s;
+  border-radius: 50%;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.change-avatar-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.change-avatar-btn:hover {
+  background: #5a6abf;
+  transform: scale(1.1);
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+  color: #333;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-email {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin: 0 0 0.8rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.8rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge.verified {
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+}
+
+.badge.member-since {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.logout-btn {
+  background: none;
+  border: none;
+  color: #dc3545;
+  cursor: pointer;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.logout-btn:hover {
+  color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
+}
+
+/* Main Content - ИСПРАВЛЕНО */
+.profile-content {
+  flex: 1;
+  overflow-y: auto;
+  /* Добавляем правильные отступы с учетом заголовка и навигации */
+  padding: 1.5rem 0;
+  padding-bottom: calc(1.5rem + var(--nav-height, 60px));
+  -webkit-overflow-scrolling: touch;
+  /* Убираем отрицательные отступы которые могли вызывать наложение */
+}
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  /* Добавляем минимальную высоту для предотвращения схлопывания */
+  min-height: max-content;
+}
+
+/* Profile Card - ИСПРАВЛЕНО */
+.profile-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.avatar-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid rgba(102, 126, 234, 0.3);
+  flex-shrink: 0;
+}
+
 .avatar-image {
   width: 100%;
   height: 100%;
@@ -2468,1099 +2668,437 @@ onUnmounted(() => {
   border-color: rgba(220, 53, 69, 0.2);
 }
 
-/* Details Section с увеличенными отступами */
-.details-section {
-  display: flex;
-  flex-direction: column;
-  gap: 3rem; /* Увеличиваем отступ между блоками */
-}
+/* НОВЫЕ СТИЛИ ДЛЯ ПЕРЕРАБОТАННОЙ КНОПКИ ДОБАВЛЕНИЯ ФОТО */
 
-/* Дополнительные отступы для конкретных блоков */
-.basic-info-card {
-  margin-bottom: 3rem !important;
-}
-
-.photos-card {
-  margin-top: 3rem !important;
-}
-
-/* Stats Section */
-.stats-section {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.stat-item {
+/* Upload Zone - Основная зона загрузки */
+.upload-zone {
+  position: relative;
+  padding: 3rem 2rem;
+  border: 3px dashed #dee2e6;
+  border-radius: 20px;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
+  cursor: pointer;
+  transition: all 0.4s ease;
+  overflow: hidden;
+  min-height: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  text-align: center;
+  justify-content: center;
 }
 
-.stat-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
+.upload-zone:hover {
+  border-color: #667eea;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+  transform: translateY(-3px);
+  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
+}
+
+.upload-zone.uploading {
+  border-color: #667eea;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+  pointer-events: none;
+}
+
+/* Icon Container с анимацией */
+.upload-icon-container {
+  position: relative;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-icon-bg {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  z-index: 2;
+  transition: all 0.4s ease;
+  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
+}
+
+.upload-zone:hover .upload-icon-bg {
+  transform: scale(1.1);
+  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
+}
+
+.upload-icon {
+  font-size: 2.5rem;
   color: white;
-  font-size: 1.2rem;
-  margin-bottom: 0.5rem;
-}
-
-.stat-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.stat-value {
-  font-size: 1.2rem;
-  font-weight: 700;
-  color: #333;
-  margin: 0;
-}
-
-.stat-label {
-  font-size: 0.75rem;
-  color: #6c757d;
-  margin-top: 0.2rem;
-}
-
-/* Info Cards - ИСПРАВЛЕНО */
-.info-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  border-radius: 16px;
-  padding: 1.5rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  /* Предотвращаем наложение */
-  position: relative;
-  z-index: 1;
-  margin-bottom: 1rem;
-}
-
-.basic-info-card {
-  margin-bottom: 2rem;
-}
-
-.photos-card {
-  margin-top: 2rem;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #333;
-
-}
-
-.card-header h3 i {
-  font-size: 1.2rem;
-  color: #667eea;
-}
-
-.card-content {
-  padding: 0;
-}
-
-/* Form Elements */
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.info-item.full-width {
-  grid-column: 1 / -1;
-}
-
-.info-item label {
-  font-weight: 600;
-  color: #495057;
-  font-size: 0.9rem;
-}
-
-.info-item span {
-  font-size: 1rem;
-  color: #6c757d;
-  padding: 0.75rem 1rem;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-.bio-text {
-  line-height: 1.5;
-  white-space: pre-wrap;
-}
-
-.form-input {
-  padding: 0.75rem 1rem;
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  font-size: 1rem;
   transition: all 0.3s ease;
-  background: white;
-  width: 100%;
-  box-sizing: border-box;
 }
 
-.form-input:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
+.upload-zone:hover .upload-icon {
+  transform: scale(1.1);
 }
 
-.form-input:disabled {
-  background: #f8f9fa;
-  cursor: not-allowed;
-}
-
-.form-textarea {
-  resize: vertical;
-  min-height: 100px;
-  font-family: inherit;
-}
-
-.select-wrapper {
-  position: relative;
-}
-
-.clear-btn {
+/* Анимированная пульсация */
+.upload-pulse {
   position: absolute;
   top: 50%;
-  right: 0.75rem;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: #6c757d;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 4px;
-  transition: all 0.3s ease;
-  z-index: 5;
-}
-
-.clear-btn:hover {
-  color: #dc3545;
-  background: rgba(220, 53, 69, 0.1);
-}
-
-.dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: white;
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  max-height: 200px;
-  overflow-y: auto;
-  z-index: 1000;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  margin-top: 0.25rem;
-}
-
-.dropdown-option {
-  padding: 0.75rem 1rem;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  border-bottom: 1px solid #f8f9fa;
-}
-
-.dropdown-option:last-child {
-  border-bottom: none;
-}
-
-.dropdown-option:hover {
-  background: #f8f9fa;
-  color: #667eea;
-}
-
-/* Action Buttons */
-.action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 1.2rem;
-  border: none;
-  border-radius: 50px;
-  font-weight: 600;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.action-btn.primary {
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-}
-
-.action-btn.primary:hover {
-  background: linear-gradient(45deg, #5a6abf, #6a4190);
-  transform: translateY(-1px) scale(1.05);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-}
-
-.action-btn.secondary {
-  background: #f8f9fa;
-  color: #495057;
-  border: 1px solid #dee2e6;
-}
-
-.action-btn.secondary:hover {
-  background: #e9ecef;
-  color: #343a40;
-}
-
-.action-btn.danger {
-  background: #dc3545;
-  color: white;
-}
-
-.action-btn.danger:hover {
-  background: #c82333;
-  transform: translateY(-1px) scale(1.05);
-  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
-}
-
-.action-btn.small {
-  padding: 0.4rem 0.8rem;
-  font-size: 0.8rem;
-}
-
-.action-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
-.add-photo-btn {
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 50px;
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-.add-photo-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-}
-
-/* Empty State - исправление кнопки добавления фото */
-.empty-photos .action-btn.primary {
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-  border: none;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  font-weight: 600;
-}
-
-.empty-photos .action-btn.primary:hover {
-  background: linear-gradient(45deg, #5a6abf, #6a4190);
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
-}
-
-.empty-photos .action-btn.primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
-}
-
-/* Photo Grid */
-.photo-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.photo-item {
-  position: relative;
-  aspect-ratio: 1;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-}
-
-.photo-item:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
-}
-
-.photo-item.main-photo {
-  border: 3px solid #ffc107;
-}
-
-.photo-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.main-badge {
-  position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  background: linear-gradient(45deg, #ffc107, #ff8c00);
-  color: white;
-  padding: 0.25rem 0.5rem;
-  border-radius: 12px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  z-index: 2;
-}
-
-.photo-actions {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: 3;
-}
-
-/* Исправление центрирования иконок в кнопках действий с фотографиями */
-.photo-actions .action-btn {
-  width: 32px;
-  height: 32px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  min-width: auto;
-  font-size: 0.9rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
+  animation: pulse-upload 2s infinite;
+  z-index: 1;
 }
 
-.photo-actions .action-btn.small {
-  width: 32px;
-  height: 32px;
-  padding: 0;
+@keyframes pulse-upload {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  70% {
+    transform: translate(-50%, -50%) scale(1.6);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.6);
+    opacity: 0;
+  }
 }
 
-.photo-actions .action-btn i {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.photo-actions .action-btn.danger {
-  background: #dc3545;
-  color: white;
-}
-
-.photo-actions .action-btn.danger:hover {
-  background: #c82333;
-  transform: translateY(-1px) scale(1.05);
-  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
-}
-
-.photo-actions .action-btn.primary {
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-}
-
-.photo-actions .action-btn.primary:hover {
-  background: linear-gradient(45deg, #5a6abf, #6a4190);
-  transform: translateY(-1px) scale(1.05);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-}
-
-/* Empty States */
-.empty-photos {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: 3rem 1.5rem;
-  border: 2px dashed #dee2e6;
-  border-radius: 16px;
-  background: rgba(248, 249, 250, 0.5);
-}
-
-.empty-photos i {
-  font-size: 3rem;
-  color: #6c757d;
-  margin-bottom: 1rem;
-}
-
-.empty-photos h4 {
-  margin: 0 0 0.5rem;
-  color: #495057;
-  font-size: 1.1rem;
-}
-
-.empty-photos p {
-  margin: 0 0 1.5rem;
-  color: #6c757d;
-  font-size: 0.9rem;
-}
-
-.no-data-section,
-.error-section,
-.loading-section {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-  padding: 2rem 1rem;
-  min-height: 50vh;
-}
-
-.no-data-card,
-.error-card {
-  background: white;
-  border-radius: 20px;
-  padding: 2rem;
-  text-align: center;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-  max-width: 400px;
-  width: 100%;
-}
-
-.no-data-card i,
-.error-card i {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  color: #6c757d;
-}
-
-.no-data-card h3,
-.error-card h3 {
-  color: #343a40;
-  margin-bottom: 0.5rem;
-}
-
-.retry-btn {
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-  border: none;
-  padding: 0.75rem 1.5rem;
-  border-radius: 50px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  margin-top: 1rem;
-}
-
-.retry-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-}
-
-/* Loading States */
-.loading-spinner {
-  text-align: center;
-  color: white;
-}
-
-.spinner {
-  width: 50px;
-  height: 50px;
+/* Спиннер для загрузки */
+.upload-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
   border: 4px solid rgba(255, 255,  255, 0.3);
-  border-left: 4px solid white;
+  border-top: 4px solid white;
   border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 1rem;
+  animation: spin-upload 1s linear infinite;
 }
 
-.spinner-small {
-  width: 20px;
-  height: 20px;
-  border: 3px solid rgba(102, 126, 234, 0.3);
-  border-top: 3px solid #667eea;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  display: inline-block;
-}
-
-@keyframes spin {
+@keyframes spin-upload {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 
-/* Modal */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2000;
-  padding: 1rem;
-}
-
-.delete-modal {
-  background: white;
-  border-radius: 16px;
-  padding: 1.5rem;
-  width: 100%;
+/* Контент загрузки */
+.upload-content {
+  text-align: center;
   max-width: 400px;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  width: 100%;
 }
 
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 1.2rem;
-  color: #333;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  color: #6c757d;
-  cursor: pointer;
+.upload-title {
   font-size: 1.5rem;
-  padding: 0.25rem;
-  border-radius: 4px;
+  font-weight: 700;
+  color: #333;
+  margin: 0 0 1rem;
   transition: all 0.3s ease;
 }
 
-.close-btn:hover {
-  background: rgba(108, 117, 125, 0.1);
+.upload-zone:hover .upload-title {
+  color: #667eea;
+}
+
+.upload-description {
+  font-size: 1rem;
+  color: #6c757d;
+  margin: 0 0 2rem;
+  line-height: 1.5;
+  transition: all 0.3s ease;
+}
+
+.upload-zone:hover .upload-description {
   color: #495057;
 }
 
-.modal-content {
-  margin-bottom: 1.5rem;
-  color: #6c757d;
-  line-height: 1.5;
+/* Особенности/Преимущества */
+.upload-features {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
 }
 
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-}
-
-/* Alert Messages */
-.alert {
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  margin-bottom: 1rem;
+.feature-item {
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.9rem;
+  transition: all 0.3s ease;
 }
 
-.alert.error {
-  background: #f8d7da;
-  color: #721c24;
-  border: 1px solid #f5c6cb;
+.feature-item i {
+  font-size: 1.5rem;
+  color: #667eea;
+  transition: all 0.3s ease;
 }
 
-.alert.success {
-  background: #d4edda;
-  color: #155724;
-  border: 1px solid #c3e6cb;
+.feature-item span {
+  font-size: 0.85rem;
+  color: #6c757d;
+  font-weight: 500;
+  transition: all 0.3s ease;
 }
 
-.alert.info {
-  background: #d1ecf1;
-  color: #0c5460;
-  border: 1px solid #bee5eb;
+.upload-zone:hover .feature-item i {
+  color: #5a6abf;
+  transform: scale(1.1);
 }
 
-.alert i {
-  font-size: 1rem;
-  flex-shrink: 0;
+.upload-zone:hover .feature-item span {
+  color: #495057;
 }
 
-/* Responsive Design */
-
-/* Tablets */
-@media (max-width: 992px) {
-  .container {
-    padding: 0 0.75rem;
-  }
-  
-  .profile-card,
-  .info-card {
-    padding: 1.25rem;
-  }
-  
-  .info-grid {
-    grid-template-columns: 1fr;
-    gap: 1.25rem;
-  }
-  
-  .avatar-section {
-    flex-direction: column;
-    text-align: center;
-    gap: 1rem;
-  }
-  
-  .avatar-container {
-    width: 100px;
-    height: 100px;
-  }
-  
-  .stats-section {
-    gap: 0.75rem;
-  }
-  
-  .stat-icon {
-    width: 35px;
-    height: 35px;
-    font-size: 1rem;
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    gap: 0.75rem;
-  }
-
-  .profile-title {
-    padding: 0 80px;
-  }
+/* Контейнер кнопки */
+.upload-btn-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
 }
 
-/* Mobile Phones */
+/* Главная кнопка загрузки */
+.upload-btn {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  padding: 1rem 2.5rem;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.4s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+  min-height: 56px;
+  position: relative;
+  overflow: hidden;
+}
+
+.upload-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: left 0.5s;
+}
+
+.upload-btn:hover::before {
+  left: 100%;
+}
+
+.upload-btn:hover {
+  background: linear-gradient(45deg, #5a6abf, #6a4190);
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+}
+
+.upload-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
+}
+
+.upload-btn:disabled::before {
+  display: none;
+}
+
+/* Спиннер в кнопке */
+.btn-spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top: 3px solid white;
+  border-radius: 50%;
+  animation: spin-upload 0.8s linear infinite;
+}
+
+/* Подсказка */
+.upload-hint {
+  text-align: center;
+}
+
+.upload-hint small {
+  font-size: 0.8rem;
+  color: #6c757d;
+  background: rgba(248, 249, 250, 0.8);
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.upload-zone:hover .upload-hint small {
+  background: rgba(255, 255, 255, 0.9);
+  color: #495057;
+  border-color: rgba(102, 126, 234, 0.2);
+}
+
+/* Адаптивность для мобильных устройств */
 @media (max-width: 768px) {
-  .container {
-    padding: 0 0.5rem;
+  .upload-zone {
+    padding: 2rem 1.5rem;
+    min-height: 250px;
   }
   
-  .profile-header {
-    padding: 0.75rem 0;
-    min-height: 70px;
+  .upload-icon-container {
+    margin-bottom: 1.5rem;
   }
   
-  .header-content {
-    flex-direction: column;
-    gap: 0.5rem;
-    align-items: center;
-  }
-  
-  .header-actions {
-    position: static;
-    transform: none;
-  }
-
-  .profile-title {
-    padding: 0;
-    width: 100%;
-  }
-  
-  .section-title {
-    font-size: 1.2rem;
-  }
-  
-  .subtitle {
-    font-size: 0.8rem;
-  }
-  
-  .profile-content {
-    padding: 0.75rem 0;
-    padding-bottom: calc(0.75rem + var(--nav-height, 60px));
-  }
-  
-  .profile-layout {
-    gap: 1rem;
-  }
-  
-  .profile-card,
-  .info-card {
-    padding: 1rem;
-  }
-  
-  .avatar-section {
-    gap: 0.75rem;
-  }
-  
-  .avatar-container {
+  .upload-icon-bg {
     width: 80px;
     height: 80px;
   }
   
-  .user-name {
-    font-size: 1.2rem;
+  .upload-pulse {
+    width: 80px;
+    height: 80px;
   }
   
-  .user-email {
-    font-size: 0.85rem;
+  .upload-icon {
+    font-size: 2rem;
   }
   
-  .user-badges {
-    justify-content: center;
+  .upload-title {
+    font-size: 1.3rem;
   }
   
-  .stats-section {
-    gap: 0.5rem;
-  }
-  
-  .stat-icon {
-    width: 30px;
-    height: 30px;
+  .upload-description {
     font-size: 0.9rem;
+    margin-bottom: 1.5rem;
   }
   
-  .stat-value {
+  .upload-features {
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .feature-item i {
+    font-size: 1.3rem;
+  }
+  
+  .feature-item span {
+    font-size: 0.8rem;
+  }
+  
+  .upload-btn {
+    padding: 0.9rem 2rem;
     font-size: 1rem;
-  }
-  
-  .stat-label {
-    font-size: 0.7rem;
-  }
-  
-  .card-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-  
-  .card-header h3 {
-    font-size: 1rem;
-  }
-  
-  .info-grid {
-    gap: 1rem;
-  }
-  
-  .form-input {
-    padding: 0.6rem 0.8rem;
-    font-size: 0.9rem;
-  }
-  
-  .action-btn {
-    padding: 0.5rem 1rem;
-    font-size: 0.85rem;
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    gap: 0.5rem;
-  }
-  
-  .empty-photos {
-    padding: 2rem 1rem;
-  }
-  
-  .modal-overlay {
-    padding: 0.5rem;
-  }
-  
-  .delete-modal {
-    padding: 1.25rem;
-  }
-  
-  .modal-actions {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  
-  .modal-actions .action-btn {
-    width: 100%;
-    justify-content: center;
+    min-height: 50px;
   }
 }
 
-/* Small Mobile Phones */
 @media (max-width: 480px) {
-  .container {
-    padding: 0 0.25rem;
+  .upload-zone {
+    padding: 1.5rem 1rem;
+    min-height: 200px;
   }
   
-  .profile-card,
-  .info-card {
-    padding: 0.75rem;
-    margin: 0 0.25rem;
-  }
-  
-  .section-title {
-    font-size: 1.1rem;
-  }
-  
-  .subtitle {
-    font-size: 0.75rem;
-  }
-  
-  .avatar-container {
+  .upload-icon-bg {
     width: 70px;
     height: 70px;
   }
   
-  .user-name {
-    font-size: 1.1rem;
+  .upload-pulse {
+    width: 70px;
+    height: 70px;
   }
   
-  .user-email {
-    font-size: 0.8rem;
+  .upload-icon {
+    font-size: 1.8rem;
   }
   
-  .badge {
-    font-size: 0.7rem;
-    padding: 0.2rem 0.5rem;
+  .upload-title {
+    font-size: 1.2rem;
   }
   
-  .stats-section {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.25rem;
-  }
-  
-  .stat-icon {
-    width: 25px;
-    height: 25px;
-    font-size: 0.8rem;
-  }
-  
-  .stat-value {
-    font-size: 0.9rem;
-  }
-  
-  .stat-label {
-    font-size: 0.65rem;
-  }
-  
-  .card-header h3 {
-    font-size: 0.95rem;
-  }
-  
-  .info-item label {
-    font-size: 0.8rem;
-  }
-  
-  .info-item span {
-    font-size: 0.9rem;
-    padding: 0.6rem 0.8rem;
-  }
-  
-  .form-input {
-    padding: 0.5rem 0.7rem;
+  .upload-description {
     font-size: 0.85rem;
   }
   
-  .action-btn {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.8rem;
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.5rem;
-  }
-  
-  .empty-photos {
-    padding: 1.5rem 0.75rem;
-  }
-  
-  .empty-photos i {
-    font-size: 2.5rem;
-  }
-  
-  .empty-photos h4 {
-    font-size: 1rem;
-  }
-  
-  .empty-photos p {
-    font-size: 0.8rem;
-  }
-}
-
-/* Very Small Screens */
-@media (max-width: 375px) {
-  .profile-card,
-  .info-card {
-    margin: 0 0.125rem;
-    padding: 0.6rem;
-  }
-  
-  .avatar-section {
-    gap: 0.5rem;
-  }
-  
-  .avatar-container {
-    width: 60px;
-    height: 60px;
-  }
-  
-  .user-name {
-    font-size: 1rem;
-  }
-  
-  .user-badges {
-    gap: 0.3rem;
-  }
-  
-  .badge {
-    font-size: 0.65rem;
-    padding: 0.15rem 0.4rem;
-  }
-  
-  .action-btn {
-    padding: 0.4rem 0.7rem;
-    font-size: 0.75rem;
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-/* Landscape Orientation on Mobile */
-@media (max-height: 450px) and (orientation: landscape) {
-  .profile-header {
-    padding: 0.5rem 0;
-    min-height: 60px;
-  }
-  
-  .section-title {
-    font-size: 1rem;
-  }
-  
-  .subtitle {
-    font-size: 0.7rem;
-  }
-  
-  .profile-content {
-    padding: 0.5rem 0;
-  }
-  
-  .avatar-section {
-    flex-direction: row;
+  .upload-features {
+    flex-direction: column;
     gap: 1rem;
   }
   
-  .avatar-container {
-    width: 60px;
-    height: 60px;
+  .upload-btn {
+    padding: 0.8rem 1.5rem;
+    font-size: 0.95rem;
+    width: 100%;
+    justify-content: center;
   }
   
-  .stats-section {
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  .upload-hint small {
+    font-size: 0.75rem;
+    padding: 0.4rem 0.8rem;
   }
 }
 
-/* High DPI Displays */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .avatar-image,
-  .photo-image {
-    image-rendering: -webkit-optimize-contrast;
+/* Улучшения для состояния загрузки */
+.upload-zone.uploading .upload-pulse {
+  animation: pulse-upload-fast 1s infinite;
+}
+
+@keyframes pulse-upload-fast {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.3);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
   }
 }
 
-/* Touch Devices - Improved Touch Targets */
-@media (pointer: coarse) {
-  .action-btn {
-    min-height: 44px;
-    min-width: 44px;
-  }
-  
-  .clear-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
-  
-  .dropdown-option {
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-  }
-  
-  .change-avatar-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
+/* Drag and Drop эффекты */
+.upload-zone.drag-over {
+  border-color: #28a745;
+  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(32, 201, 151, 0.1) 100%);
+  transform: scale(1.02);
 }
 
-/* iOS Safe Area Support */
-@supports (padding-bottom: env(safe-area-inset-bottom)) {
-  .profile-content {
-    padding-bottom: calc(1.5rem + var(--nav-height, 60px) + env(safe-area-inset-bottom, 0px));
-  }
+.upload-zone.drag-over .upload-icon-bg {
+  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+  transform: scale(1.15);
 }
 
-/* Reduced Motion Support */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+/* Темная тема (если понадобится) */
+@media (prefers-color-scheme: dark) {
+  .upload-zone {
+    border-color: #495057;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
   }
   
-  .spinner,
-  .spinner-small {
-    animation: none;
-   }
-}
-
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .profile-card,
-  .info-card {
-    border: 2px solid;
+  .upload-title {
+    color: #f8f9fa;
   }
   
-  .action-btn {
-    border: 2px solid;
+  .upload-description {
+    color: #adb5bd;
+  }
+  
+  .feature-item span {
+    color: #adb5bd;
+  }
+  
+  .upload-hint small {
+    background: rgba(33, 37, 41, 0.8);
+    color: #adb5bd;
+    border-color: rgba(255, 255, 255, 0.1);
   }
 }