From e0ed26d0de326766f7e7d9516d4b6ae5c1183979 Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Fri, 23 May 2025 17:13:32 +0700
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B8=20=D0=BD=D0=BE=D0=B2=D0=BE=D0=B3=D0=BE=20=D0=B4?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=D0=B0=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B7=D0=BD=D1=8B=D1=85=20=D1=83=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B9=D1=81=D1=82=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |  46 ++++++-
 src/views/ChatListView.vue | 128 +++++++++++++++++-
 src/views/ChatView.vue     | 122 +++++++++++++++++
 src/views/ProfileView.vue  | 267 ++++++++++++++++++++++++++-----------
 src/views/SwipeView.vue    | 150 +++++++++++++++++++++
 5 files changed, 627 insertions(+), 86 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2bab09f..b1d0c2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -96,6 +96,12 @@ body {
   min-height: 100vh;
 }
 
+/* Global Responsive Styles */
+.app {
+  position: relative;
+  min-height: 100vh;
+}
+
 .app-header .navbar-brand {
   font-weight: bold;
 }
@@ -110,6 +116,42 @@ main.container {
   padding-bottom: 1rem;
 }
 
-/* Можно добавить стили для .app-footer, если нужно, чтобы он был прижат к низу */
-/* Либо используй классы Bootstrap для flex-grow-1 на main и mt-auto на footer */
+/* Адаптивные глобальные стили */
+@media (max-width: 576px) {
+  .app-header .navbar-brand {
+    font-size: 1.2rem;
+  }
+  
+  .app-header .btn {
+    min-width: 80px;
+    font-size: 0.9rem;
+    padding: 0.4rem 0.8rem;
+  }
+  
+  .container {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+/* Small phones */
+@media (max-width: 375px) {
+  .app-header .navbar-brand {
+    font-size: 1.1rem;
+  }
+  
+  .app-header .btn {
+    min-width: 70px;
+    font-size: 0.85rem;
+    padding: 0.35rem 0.7rem;
+  }
+}
+
+/* Landscape orientation on mobile */
+@media (max-height: 450px) and (orientation: landscape) {
+  .app-header {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/ChatListView.vue b/src/views/ChatListView.vue
index 2871bcb..0bad735 100644
--- a/src/views/ChatListView.vue
+++ b/src/views/ChatListView.vue
@@ -776,11 +776,11 @@ const getDialogsCountText = (count) => {
 /* Responsive */
 @media (max-width: 576px) {
   .chatlist-title h1 {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
   
   .card-header {
-    padding: 1.25rem 1.5rem;
+    padding: 1rem 1.25rem;
   }
 
   .card-content {
@@ -792,12 +792,130 @@ const getDialogsCountText = (count) => {
   }
   
   .user-photo-container {
-    width: 50px;
-    height: 50px;
+    width: 45px;
+    height: 45px;
+  }
+  
+  .unread-badge {
+    min-width: 18px;
+    height: 18px;
+    font-size: 0.7rem;
   }
 
   .user-name {
-    font-size: 1rem;
+    font-size: 0.95rem;
+    max-width: calc(100% - 60px);
+  }
+  
+  .timestamp {
+    font-size: 0.75rem;
+  }
+  
+  .last-message {
+    font-size: 0.85rem;
+  }
+  
+  .empty-chats-content p {
+    font-size: 0.95rem;
+  }
+}
+
+/* Малые телефоны */
+@media (max-width: 375px) {
+  .chatlist-title h1 {
+    font-size: 1.6rem;
+  }
+  
+  .card-header {
+    padding: 0.8rem 1rem;
+  }
+  
+  .card-content {
+    padding: 0.5rem;
+  }
+  
+  .conversation-card {
+    padding: 0.6rem;
+  }
+  
+  .user-photo-container {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .user-name {
+    font-size: 0.9rem;
+  }
+  
+  .timestamp {
+    font-size: 0.7rem;
+  }
+  
+  .last-message {
+    font-size: 0.8rem;
+  }
+}
+
+/* Большие телефоны и малые планшеты */
+@media (min-width: 577px) and (max-width: 767px) {
+  .container {
+    max-width: 540px;
+  }
+  
+  .chatlist-card {
+    border-radius: 15px;
+  }
+  
+  .conversation-card {
+    border-radius: 10px;
+  }
+}
+
+/* Планшеты */
+@media (min-width: 768px) and (max-width: 991px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+/* Малые настольные */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .container {
+    max-width: 960px;
+  }
+  
+  .chatlist-card {
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+/* Большие настольные */
+@media (min-width: 1200px) {
+  .chatlist-card {
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+/* Ландшафтная ориентация на мобильных устройствах */
+@media (max-height: 500px) and (orientation: landscape) {
+  .chatlist-header {
+    padding: 0.75rem 0;
+  }
+  
+  .chatlist-title h1 {
+    font-size: 1.5rem;
+  }
+  
+  .card-header {
+    padding: 0.75rem 1rem;
+  }
+  
+  .conversations-list {
+    max-height: calc(100vh - 180px);
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue
index 6df9c60..35ccddb 100644
--- a/src/views/ChatView.vue
+++ b/src/views/ChatView.vue
@@ -1282,5 +1282,127 @@ const handleClickOutsideContextMenu = (event) => {
   .messages-container {
     padding: 1rem;
   }
+  
+  .chat-input {
+    padding: 0.8rem;
+  }
+  
+  .message-bubble {
+    padding: 0.7rem 0.9rem;
+  }
+  
+  .message-meta {
+    font-size: 0.65rem;
+  }
+  
+  .scroll-bottom-btn {
+    width: 36px;
+    height: 36px;
+    right: 15px;
+    bottom: 15px;
+  }
+  
+  .participant-name {
+    font-size: 1.1rem;
+  }
+  
+  .back-button {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+/* Small phones */
+@media (max-width: 375px) {
+  .message-wrapper {
+    max-width: 90%;
+  }
+  
+  .chat-input {
+    padding: 0.6rem;
+  }
+  
+  .message-text {
+    font-size: 0.95rem;
+  }
+  
+  .message-typing {
+    font-size: 0.85rem;
+  }
+  
+  .context-menu {
+    width: 160px;
+  }
+  
+  .chat-info {
+    gap: 0.5rem;
+  }
+  
+  .action-btn {
+    padding: 0.6rem 1rem;
+    font-size: 0.85rem;
+  }
+}
+
+/* Large phones and small tablets */
+@media (min-width: 577px) and (max-width: 767px) {
+  .chat-card {
+    height: calc(100vh - 130px);
+  }
+  
+  .message-wrapper {
+    max-width: 80%;
+  }
+  
+  .message-actions {
+    opacity: 0.7; /* Always visible but slightly transparent */
+  }
+}
+
+/* Tablets */
+@media (min-width: 768px) and (max-width: 991px) {
+  .container {
+    max-width: 700px;
+  }
+  
+  .chat-card {
+    height: calc(100vh - 140px);
+  }
+}
+
+/* Small desktops */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .container {
+    max-width: 800px;
+  }
+}
+
+/* Landscape orientation on mobile */
+@media (max-height: 500px) and (orientation: landscape) {
+  .chat-header {
+    padding: 0.5rem 0;
+  }
+  
+  .chat-card {
+    height: calc(100vh - 80px);
+  }
+  
+  .messages-container {
+    padding: 0.8rem;
+    height: calc(100% - 60px);
+  }
+  
+  .chat-input-container {
+    padding: 0.5rem;
+    min-height: 60px;
+  }
+  
+  .message-item {
+    margin-bottom: 0.4rem;
+  }
+  
+  .date-separator {
+    margin: 0.8rem 0;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index c85e100..56495bd 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1536,96 +1536,205 @@ onMounted(async () => {
   margin-bottom: 1.5rem;
 }
 
-/* Стили кнопок действий */
-.action-btn {
-  padding: 0.5rem 1rem;
-  border-radius: 50px;
-  border: none;
-  cursor: pointer;
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s ease;
+/* Адаптивные стили для разных устройств */
+@media (max-width: 576px) {
+  .profile-card {
+    padding: 1.5rem;
+    border-radius: 15px;
+  }
+  
+  .profile-header {
+    padding: 0.8rem 0;
+  }
+  
+  .header-title {
+    font-size: 1.6rem;
+  }
+  
+  .profile-photo {
+    width: 110px;
+    height: 110px;
+  }
+  
+  .profile-details {
+    padding: 1rem 0;
+  }
+  
+  .profile-name {
+    font-size: 1.6rem;
+  }
+  
+  .section-header {
+    padding: 0.8rem 1.2rem;
+  }
+  
+  .card-header h3 {
+    font-size: 1.2rem;
+  }
+  
+  .edit-btn, .save-btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+  
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .photo-grid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 0.8rem;
+  }
+  
+  .photo-item, .add-photo-btn {
+    height: 120px;
+  }
+  
+  .form-input, .form-textarea {
+    padding: 0.6rem 0.8rem;
+    font-size: 0.9rem;
+  }
+  
+  .form-label {
+    font-size: 0.85rem;
+  }
 }
 
-.action-btn.primary {
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
+/* Малые телефоны */
+@media (max-width: 375px) {
+  .profile-photo {
+    width: 100px;
+    height: 100px;
+  }
+  
+  .profile-name {
+    font-size: 1.4rem;
+  }
+  
+  .photo-grid {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  }
+  
+  .photo-item, .add-photo-btn {
+    height: 100px;
+  }
+  
+  .edit-btn, .save-btn {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.85rem;
+  }
 }
 
-.action-btn.danger {
-  background: linear-gradient(45deg, #f5365c, #f56036);
-  color: white;
+/* Большие телефоны и малые планшеты */
+@media (min-width: 577px) and (max-width: 767px) {
+  .profile-photo {
+    width: 140px;
+    height: 140px;
+  }
+  
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .photo-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
+  
+  .info-item.full-width {
+    grid-column: 1 / 3;
+  }
 }
 
-.action-btn.small {
-  padding: 0.3rem 0.6rem;
-  font-size: 0.8rem;
+/* Планшеты */
+@media (min-width: 768px) and (max-width: 991px) {
+  .container {
+    max-width: 720px;
+  }
+  
+  .profile-main {
+    display: grid;
+    grid-template-columns: 180px 1fr;
+    gap: 2rem;
+  }
+  
+  .profile-photo-section {
+    margin-bottom: 0;
+  }
+  
+  .profile-details {
+    text-align: left;
+    padding-left: 0;
+  }
 }
 
-.action-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+/* Малые настольные */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .container {
+    max-width: 960px;
+  }
+  
+  .profile-main {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    gap: 2rem;
+  }
+  
+  .profile-photo-section {
+    margin-bottom: 0;
+  }
+  
+  .profile-details {
+    text-align: left;
+    padding-left: 0;
+  }
 }
 
-.action-btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-  transform: none !important;
+/* Большие настольные */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+  
+  .profile-main {
+    display: grid;
+    grid-template-columns: 220px 1fr;
+    gap: 2.5rem;
+  }
+  
+  .profile-photo-section {
+    margin-bottom: 0;
+  }
+  
+  .profile-details {
+    text-align: left;
+    padding-left: 0;
+  }
 }
 
-.add-photo-btn {
-  padding: 0.5rem 1rem;
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-  border: none;
-  border-radius: 50px;
-  font-weight: 600;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s ease;
-}
-
-.add-photo-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-}
-
-/* Стили для предупреждений и сообщений */
-.alert {
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 1.5rem;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.alert.error {
-  background-color: rgba(220, 53, 69, 0.1);
-  color: #dc3545;
-  border-left: 4px solid #dc3545;
-}
-
-.alert.success {
-  background-color: rgba(40, 167, 69, 0.1);
-  color: #28a745;
-  border-left: 4px solid #28a745;
-}
-
-.alert.info {
-  background-color: rgba(102, 126, 234, 0.1);
-  color: #667eea;
-  border-left: 4px solid #667eea;
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
+/* Ландшафтная ориентация на мобильных */
+@media (max-height: 500px) and (orientation: landscape) {
+  .modern-profile-view {
+    padding-bottom: 2rem;
+  }
+  
+  .profile-photo {
+    width: 90px;
+    height: 90px;
+    margin-bottom: 0.5rem;
+  }
+  
+  .profile-main {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1.5rem;
+  }
+  
+  .profile-details {
+    text-align: left;
+  }
+  
+  .section-content {
+    padding: 1rem;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/SwipeView.vue b/src/views/SwipeView.vue
index f8516be..6aa343a 100644
--- a/src/views/SwipeView.vue
+++ b/src/views/SwipeView.vue
@@ -1247,5 +1247,155 @@ watch(suggestions, () => {
   .bio-container {
     max-height: 60px;
   }
+
+  .section-title {
+    font-size: 1.3rem;
+  }
+
+  .like-indicator, .pass-indicator {
+    width: 80px;
+    height: 80px;
+    font-size: 2.5rem;
+  }
+
+  .carousel-nav {
+    width: 32px;
+    height: 32px;
+  }
+
+  .match-popup {
+    width: 95%;
+    padding: 1.5rem;
+  }
+}
+
+/* Small phones */
+@media (max-width: 375px) {
+  .swipe-area {
+    height: 55vh;
+    min-height: 350px;
+  }
+  
+  .action-btn {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .user-name {
+    font-size: 1.3rem;
+  }
+  
+  .user-gender {
+    font-size: 0.85rem;
+  }
+  
+  .bio-text {
+    font-size: 0.9rem;
+  }
+  
+  .action-buttons {
+    gap: 15px;
+  }
+  
+  .like-indicator, .pass-indicator {
+    width: 70px;
+    height: 70px;
+    font-size: 2rem;
+  }
+}
+
+/* Large phones and small tablets */
+@media (min-width: 577px) and (max-width: 767px) {
+  .swipe-area {
+    height: 65vh;
+    max-height: 600px;
+  }
+  
+  .action-buttons {
+    margin-top: 15px;
+  }
+}
+
+/* Tablets */
+@media (min-width: 768px) and (max-width: 991px) {
+  .container {
+    max-width: 700px;
+  }
+  
+  .swipe-area {
+    height: 70vh;
+    max-height: 700px;
+  }
+  
+  .action-btn {
+    width: 75px;
+    height: 75px;
+  }
+  
+  .btn-icon {
+    font-size: 2rem;
+  }
+}
+
+/* Small desktops */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .container {
+    max-width: 800px;
+  }
+  
+  .swipe-area {
+    max-height: 750px;
+  }
+}
+
+/* Large desktops */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 850px;
+  }
+  
+  .swipe-area {
+    max-height: 800px;
+  }
+}
+
+/* Landscape orientation on mobile */
+@media (max-height: 576px) and (orientation: landscape) {
+  .swipe-area {
+    height: 80vh;
+    min-height: 280px;
+  }
+  
+  .action-buttons {
+    margin-top: 10px;
+    padding-bottom: 10px;
+  }
+  
+  .action-btn {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .bio-container {
+    max-height: 40px;
+  }
+  
+  .card-details-section {
+    padding: 8px;
+  }
+  
+  .user-info-overlay {
+    padding: 10px;
+  }
+  
+  .user-name {
+    font-size: 1.3rem;
+  }
+  
+  .match-popup {
+    width: 80%;
+    max-width: 350px;
+    padding: 1rem;
+  }
 }
 </style>
\ No newline at end of file