✨ Обновлена анимация уведомлений для мобильных и десктопных устройств

- Изменена логика анимации появления и исчезновения уведомлений в зависимости от размера экрана.
- Добавлен обработчик изменения размера окна для обновления позиций уведомлений.
- Оптимизированы стили трансформации для улучшения пользовательского опыта на разных устройствах.

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");

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) => {

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) => {