From e249638e7f9d64537a06638273e7108cc1a5daf9 Mon Sep 17 00:00:00 2001
From: Fovway <fovway@gmail.com>
Date: Sun, 26 Oct 2025 14:47:18 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D1=83=D0=B2=D0=B5=D0=B4=D0=BE=D0=BC=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B9=20=D0=B4=D0=BB=D1=8F=20=D0=BC=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B8=D0=BB=D1=8C=D0=BD=D1=8B=D1=85=20=D0=B8=20=D0=B4=D0=B5?=
 =?UTF-8?q?=D1=81=D0=BA=D1=82=D0=BE=D0=BF=D0=BD=D1=8B=D1=85=20=D1=83=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=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

- Изменена логика анимации появления и исчезновения уведомлений в зависимости от размера экрана.
- Добавлен обработчик изменения размера окна для обновления позиций уведомлений.
- Оптимизированы стили трансформации для улучшения пользовательского опыта на разных устройствах.
---
 public/app.js      | 30 ++++++++++++++++++++++++++++--
 public/profile.js  | 30 ++++++++++++++++++++++++++++--
 public/settings.js | 30 ++++++++++++++++++++++++++++--
 3 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/public/app.js b/public/app.js
index f730957..53fbb0c 100644
--- a/public/app.js
+++ b/public/app.js
@@ -32,7 +32,13 @@ function showNotification(message, type = "info") {
 
   // Анимация появления
   setTimeout(() => {
-    notification.style.transform = "translateX(-50%) translateY(0)";
+    if (window.innerWidth <= 768) {
+      // На мобильных устройствах используем только translateY
+      notification.style.transform = "translateY(0)";
+    } else {
+      // На десктопе используем translateX(-50%) translateY(0)
+      notification.style.transform = "translateX(-50%) translateY(0)";
+    }
   }, 100);
 
   // Автоматическое удаление через 4 секунды
@@ -44,7 +50,13 @@ function showNotification(message, type = "info") {
 // Функция для удаления уведомления
 function removeNotification(notification) {
   // Анимация исчезновения
-  notification.style.transform = "translateX(-50%) translateY(-100%)";
+  if (window.innerWidth <= 768) {
+    // На мобильных устройствах используем только translateY
+    notification.style.transform = "translateY(-100%)";
+  } else {
+    // На десктопе используем translateX(-50%) translateY(-100%)
+    notification.style.transform = "translateX(-50%) translateY(-100%)";
+  }
 
   setTimeout(() => {
     // Удаляем из DOM
@@ -68,9 +80,23 @@ function updateNotificationPositions() {
   notificationStack.forEach((notification, index) => {
     const offset = index * 70; // 70px между уведомлениями
     notification.style.top = `${20 + offset}px`;
+
+    // Обновляем transform в зависимости от размера экрана
+    if (window.innerWidth <= 768) {
+      // На мобильных устройствах используем только translateY
+      notification.style.transform = "translateY(0)";
+    } else {
+      // На десктопе используем translateX(-50%) translateY(0)
+      notification.style.transform = "translateX(-50%) translateY(0)";
+    }
   });
 }
 
+// Обработчик изменения размера окна
+window.addEventListener("resize", () => {
+  updateNotificationPositions();
+});
+
 // Тестовая функция для демонстрации стека уведомлений (можно удалить в продакшене)
 function testNotificationStack() {
   showNotification("Первое уведомление", "success");
diff --git a/public/profile.js b/public/profile.js
index 10bd6ad..f778537 100644
--- a/public/profile.js
+++ b/public/profile.js
@@ -28,7 +28,13 @@ function showNotification(message, type = "info") {
 
   // Анимация появления
   setTimeout(() => {
-    notification.style.transform = "translateX(-50%) translateY(0)";
+    if (window.innerWidth <= 768) {
+      // На мобильных устройствах используем только translateY
+      notification.style.transform = "translateY(0)";
+    } else {
+      // На десктопе используем translateX(-50%) translateY(0)
+      notification.style.transform = "translateX(-50%) translateY(0)";
+    }
   }, 100);
 
   // Автоматическое удаление через 4 секунды
@@ -40,7 +46,13 @@ function showNotification(message, type = "info") {
 // Функция для удаления уведомления
 function removeNotification(notification) {
   // Анимация исчезновения
-  notification.style.transform = "translateX(-50%) translateY(-100%)";
+  if (window.innerWidth <= 768) {
+    // На мобильных устройствах используем только translateY
+    notification.style.transform = "translateY(-100%)";
+  } else {
+    // На десктопе используем translateX(-50%) translateY(-100%)
+    notification.style.transform = "translateX(-50%) translateY(-100%)";
+  }
 
   setTimeout(() => {
     // Удаляем из DOM
@@ -64,9 +76,23 @@ function updateNotificationPositions() {
   notificationStack.forEach((notification, index) => {
     const offset = index * 70; // 70px между уведомлениями
     notification.style.top = `${20 + offset}px`;
+
+    // Обновляем transform в зависимости от размера экрана
+    if (window.innerWidth <= 768) {
+      // На мобильных устройствах используем только translateY
+      notification.style.transform = "translateY(0)";
+    } else {
+      // На десктопе используем translateX(-50%) translateY(0)
+      notification.style.transform = "translateX(-50%) translateY(0)";
+    }
   });
 }
 
+// Обработчик изменения размера окна
+window.addEventListener("resize", () => {
+  updateNotificationPositions();
+});
+
 // Универсальная функция для модальных окон подтверждения
 function showConfirmModal(title, message, options = {}) {
   return new Promise((resolve) => {
diff --git a/public/settings.js b/public/settings.js
index e1f2871..2af5e6a 100644
--- a/public/settings.js
+++ b/public/settings.js
@@ -169,7 +169,13 @@ function showNotification(message, type = "info") {
 
   // Анимация появления
   setTimeout(() => {
-    notification.style.transform = "translateX(-50%) translateY(0)";
+    if (window.innerWidth <= 768) {
+      // На мобильных устройствах используем только translateY
+      notification.style.transform = "translateY(0)";
+    } else {
+      // На десктопе используем translateX(-50%) translateY(0)
+      notification.style.transform = "translateX(-50%) translateY(0)";
+    }
   }, 100);
 
   // Автоматическое удаление через 4 секунды
@@ -181,7 +187,13 @@ function showNotification(message, type = "info") {
 // Функция для удаления уведомления
 function removeNotification(notification) {
   // Анимация исчезновения
-  notification.style.transform = "translateX(-50%) translateY(-100%)";
+  if (window.innerWidth <= 768) {
+    // На мобильных устройствах используем только translateY
+    notification.style.transform = "translateY(-100%)";
+  } else {
+    // На десктопе используем translateX(-50%) translateY(-100%)
+    notification.style.transform = "translateX(-50%) translateY(-100%)";
+  }
 
   setTimeout(() => {
     // Удаляем из DOM
@@ -205,9 +217,23 @@ function updateNotificationPositions() {
   notificationStack.forEach((notification, index) => {
     const offset = index * 70; // 70px между уведомлениями
     notification.style.top = `${20 + offset}px`;
+
+    // Обновляем transform в зависимости от размера экрана
+    if (window.innerWidth <= 768) {
+      // На мобильных устройствах используем только translateY
+      notification.style.transform = "translateY(0)";
+    } else {
+      // На десктопе используем translateX(-50%) translateY(0)
+      notification.style.transform = "translateX(-50%) translateY(0)";
+    }
   });
 }
 
+// Обработчик изменения размера окна
+window.addEventListener("resize", () => {
+  updateNotificationPositions();
+});
+
 // Универсальная функция для модальных окон подтверждения
 function showConfirmModal(title, message, options = {}) {
   return new Promise((resolve) => {