From b831dcc52cb371684a3474fc0ca99b39831f74b9 Mon Sep 17 00:00:00 2001
From: Fovway <fovway@gmail.com>
Date: Tue, 21 Oct 2025 00:00:35 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=D0=A3=D0=BB=D1=83=D1=87=D1=88?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=BF=D0=BE=D0=B4=D0=B4=D0=B5=D1=80=D0=B6?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D1=86=D0=B2=D0=B5=D1=82=D0=BE=D0=B2=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=BE=20=D0=B0=D0=BA=D1=86=D0=B5=D0=BD=D1=82=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=86=D0=B0=D1=85=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=82=D0=BE=D0=BA?=
 =?UTF-8?q?=20=D0=B8=20=D0=BF=D1=80=D0=BE=D1=84=D0=B8=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Реализовано динамическое изменение цвета акцента на основе данных пользователя для предотвращения FOUC.
- Добавлен inline CSS для корректного отображения цвета акцента в HTML.
- Обновлены стили для тегов, чтобы использовать белый фон вместо светло-голубого.
---
 public/app.js    | 16 +++++------
 public/style.css |  4 +--
 server.js        | 70 ++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 78 insertions(+), 12 deletions(-)

diff --git a/public/app.js b/public/app.js
index b0cbf95..de7cf7e 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1503,14 +1503,14 @@ async function loadUserInfo() {
         userAvatarContainer.style.display = "none";
       }
 
-      // Применяем цветовой акцент пользователя
-      if (user.accent_color) {
-        document.documentElement.style.setProperty(
-          "--accent-color",
-          user.accent_color
-        );
-      } else {
-        document.documentElement.style.setProperty("--accent-color", "#007bff");
+      // Применяем цветовой акцент пользователя (только если отличается от текущего)
+      const currentColor = getComputedStyle(document.documentElement)
+        .getPropertyValue("--accent-color")
+        .trim();
+      const newColor = user.accent_color || "#007bff";
+
+      if (currentColor !== newColor) {
+        document.documentElement.style.setProperty("--accent-color", newColor);
       }
     }
   } catch (error) {
diff --git a/public/style.css b/public/style.css
index 4a01185..e84ddfc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -883,7 +883,7 @@ textarea:focus {
 .tag {
   display: inline-block;
   padding: 4px 8px;
-  background-color: #e7f3ff;
+  background-color: #ffffff;
   color: var(--accent-color, #007bff);
   border: 1px solid var(--accent-color, #007bff);
   border-radius: 12px;
@@ -915,7 +915,7 @@ textarea:focus {
 .textNote .tag-in-note {
   display: inline-block;
   padding: 2px 6px;
-  background-color: #e7f3ff;
+  background-color: #ffffff;
   color: var(--accent-color, #007bff);
   border: 1px solid var(--accent-color, #007bff);
   border-radius: 8px;
diff --git a/server.js b/server.js
index c947abb..a93bd0a 100644
--- a/server.js
+++ b/server.js
@@ -468,7 +468,40 @@ app.get("/api/user", requireAuth, (req, res) => {
 
 // Страница с заметками (требует аутентификации)
 app.get("/notes", requireAuth, (req, res) => {
-  res.sendFile(path.join(__dirname, "public", "notes.html"));
+  // Получаем цвет пользователя для предотвращения FOUC
+  const sql = "SELECT accent_color FROM users WHERE id = ?";
+  db.get(sql, [req.session.userId], (err, user) => {
+    if (err) {
+      console.error("Ошибка получения цвета пользователя:", err.message);
+      return res.sendFile(path.join(__dirname, "public", "notes.html"));
+    }
+
+    const accentColor = user?.accent_color || "#007bff";
+
+    // Читаем HTML файл
+    fs.readFile(
+      path.join(__dirname, "public", "notes.html"),
+      "utf8",
+      (err, html) => {
+        if (err) {
+          console.error("Ошибка чтения файла notes.html:", err.message);
+          return res.sendFile(path.join(__dirname, "public", "notes.html"));
+        }
+
+        // Вставляем inline CSS с правильным цветом в самое начало head для предотвращения FOUC
+        const inlineCSS = `<style>
+          :root, html { --accent-color: ${accentColor} !important; }
+          * { --accent-color: ${accentColor} !important; }
+        </style>`;
+        const modifiedHtml = html.replace(
+          /<head>/i,
+          `<head>\n    ${inlineCSS}`
+        );
+
+        res.send(modifiedHtml);
+      }
+    );
+  });
 });
 
 // API для поиска заметок с изображениями (должен быть ПЕРЕД /api/notes/:id)
@@ -885,7 +918,40 @@ app.delete("/api/notes/:noteId/images/:imageId", requireAuth, (req, res) => {
 
 // Страница личного кабинета
 app.get("/profile", requireAuth, (req, res) => {
-  res.sendFile(path.join(__dirname, "public", "profile.html"));
+  // Получаем цвет пользователя для предотвращения FOUC
+  const sql = "SELECT accent_color FROM users WHERE id = ?";
+  db.get(sql, [req.session.userId], (err, user) => {
+    if (err) {
+      console.error("Ошибка получения цвета пользователя:", err.message);
+      return res.sendFile(path.join(__dirname, "public", "profile.html"));
+    }
+
+    const accentColor = user?.accent_color || "#007bff";
+
+    // Читаем HTML файл
+    fs.readFile(
+      path.join(__dirname, "public", "profile.html"),
+      "utf8",
+      (err, html) => {
+        if (err) {
+          console.error("Ошибка чтения файла profile.html:", err.message);
+          return res.sendFile(path.join(__dirname, "public", "profile.html"));
+        }
+
+        // Вставляем inline CSS с правильным цветом в самое начало head для предотвращения FOUC
+        const inlineCSS = `<style>
+          :root, html { --accent-color: ${accentColor} !important; }
+          * { --accent-color: ${accentColor} !important; }
+        </style>`;
+        const modifiedHtml = html.replace(
+          /<head>/i,
+          `<head>\n    ${inlineCSS}`
+        );
+
+        res.send(modifiedHtml);
+      }
+    );
+  });
 });
 
 // API для обновления профиля