add privary policy and cookie

config/translate.js

@@ -431,6 +431,38 @@ let worksCount = {
   ja: '作品の数',
 }
 
+let policy = {
+  zh: '隐私政策',
+  en: 'PRIVACY POLICY',
+  es: 'Política de privacidad',
+  pt: 'Política de privacidade',
+  ja: 'プライバシーポリシー',
+}
+
+let cookie = {
+  zh: '为了给您提供更好的服务体验，我们的网站会使用 Cookie。继续浏览即表示您同意我们使用 Cookie。如您想了解更多关于 Cookie 的信息，可查看我们的隐私政策。',
+  en: 'To provide you with a better service experience, our website uses cookies. Continuing to browse indicates your consent to our use of cookies. If you want to learn more about cookies, you can view our privacy policy.',
+  es: 'Para brindarles una mejor experiencia de servicio, nuestro sitio web utiliza cookies. Continuar navegando indica su consentimiento para que utilicemos cookies. Si desea obtener más información sobre las cookies, puede consultar nuestra política de privacidad.',
+  pt: 'Para oferecer - lhe uma melhor experiência de serviço, nosso site usa cookies. Continuar navegando indica o seu consentimento para o uso de cookies. Se você quiser saber mais sobre cookies, pode consultar nossa política de privacidade.',
+  ja: 'より良いサービス体験を提供するため、当社のウェブサイトではクッキーを使用しています。閲覧を続けることは、当社のクッキーの使用に同意することを意味します。クッキーに関する詳細をご希望の場合は、当社のプライバシーポリシーをご覧ください。',
+}
+
+let accept = {
+  zh: '接受',
+  en: 'Accept',
+  es: 'Aceptar',
+  pt: 'Aceitar',
+  ja: '受け入れる',
+}
+
+let refuse = {
+  zh: '拒绝',
+  en: 'Refuse',
+  es: 'Rechazar',
+  pt: 'Recusar',
+  ja: '拒否する',
+}
+
 
 
 
@@ -489,7 +521,10 @@ let translate = {
   supportOrFeedback,
   mayYouLike,
   worksCount,
-
+  policy,
+  cookie,
+  accept,
+  refuse,
 }
 
 

dist/scripts/cookie.js

@@ -0,0 +1,59 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var cookieNotice = document.getElementById('cookie-notice');
+  var acceptCookies = document.getElementById('accept-cookies');
+  var rejectCookies = document.getElementById('reject-cookies');
+
+  // 检查Cookie
+  function checkCookie() {
+    var cookieAccepted = getCookie('cookieAccepted');
+    var cookieRejected = getCookie('cookieRejected');
+
+    if (cookieAccepted === 'true') {
+      // 如果接受了Cookie，则不显示通知
+      cookieNotice.style.display = 'none';
+    } else if (cookieRejected === 'true') {
+      // 曾经明确拒绝
+    } else {
+      // 如果没有Cookie，则立即显示通知
+      cookieNotice.style.display = 'block';
+    }
+  }
+
+  // 接受Cookie
+  acceptCookies.addEventListener('click', function () {
+    setCookie('cookieAccepted', 'true', 365);
+    cookieNotice.style.display = 'none';
+  });
+
+  // 拒绝Cookie
+  rejectCookies.addEventListener('click', function () {
+    setCookie('cookieRejected', 'true', 1);
+    cookieNotice.style.display = 'none';
+  });
+
+  // 设置Cookie
+  function setCookie(name, value, days) {
+    var expires = "";
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+  }
+
+  // 获取Cookie
+  function getCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+
+  // 检查Cookie并显示/隐藏通知
+  checkCookie();
+});

dist/stylesheets/cookie.css

@@ -0,0 +1,54 @@
+.cookie-notice {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #f1f1f1;
+  color: #333;
+  text-align: center;
+  padding: 10px;
+  z-index: 9999;
+  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
+}
+
+.cookie-notice p {
+  margin: 10px;
+}
+
+.accept-button {
+  background-color: #4CAF50; /* 绿色背景 */
+  color: white; /* 白色文字 */
+  border: none;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin-right: 10px;
+  cursor: pointer;
+  border-radius: 5px; /* 圆角 */
+  transition: background-color 0.3s; /* 平滑过渡效果 */
+}
+
+.accept-button:hover {
+  background-color: #45a049; /* 鼠标悬停时颜色变深 */
+}
+
+.reject-button {
+  background-color: #e7e7e7; /* 浅灰色背景 */
+  color: #666; /* 深灰色文字 */
+  border: 1px solid #ccc; /* 浅灰色边框 */
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px; /* 圆角 */
+  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
+}
+
+.reject-button:hover {
+  background-color: #ddd; /* 鼠标悬停时颜色略微变深 */
+  color: #555; /* 文字颜色也略微变深 */
+}

test/cookie.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cookie Accept Example</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <div id="cookie-notice" class="cookie-notice">
+    <p>我们使用Cookie来改进您的网站体验。通过继续浏览我们的网站，您同意我们使用Cookie。
+      <button id="accept-cookies" class="accept-button">接受</button>
+      <button id="reject-cookies" class="reject-button">拒绝</button>
+    </p>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>

test/script.js

@@ -1,14 +1,62 @@
-let slideIndex = 0;
-showSlides();
-
-function showSlides() {
-  let i;
-  let slides = document.getElementsByClassName("mySlides");
-  for (i = 0; i < slides.length; i++) {
-    slides[i].style.display = "none";
+document.addEventListener('DOMContentLoaded', function () {
+  var cookieNotice = document.getElementById('cookie-notice');
+  var acceptCookies = document.getElementById('accept-cookies');
+  var rejectCookies = document.getElementById('reject-cookies');
+
+  // 检查Cookie
+  function checkCookie() {
+    var cookieAccepted = getCookie('cookieAccepted');
+    var cookieRejected = getCookie('cookieRejected');
+
+    if (cookieAccepted === 'true') {
+      // 如果接受了Cookie，则不显示通知
+      cookieNotice.style.display = 'none';
+    } else if (cookieRejected === 'true') {
+      // 如果拒绝了Cookie，则显示通知，但设置一天后再次询问
+      setTimeout(function () {
+        cookieNotice.style.display = 'block';
+      }, 24 * 60 * 60 * 1000); // 24小时后显示
+    } else {
+      // 如果没有Cookie，则立即显示通知
+      cookieNotice.style.display = 'block';
+    }
   }
-  slideIndex++;
-  if (slideIndex > slides.length) { slideIndex = 1 }
-  slides[slideIndex - 1].style.display = "block";
-  setTimeout(showSlides, 3000); // 更改图片间隔时间
-}
+
+  // 接受Cookie
+  acceptCookies.addEventListener('click', function () {
+    setCookie('cookieAccepted', 'true', 365);
+    cookieNotice.style.display = 'none';
+  });
+
+  // 拒绝Cookie
+  rejectCookies.addEventListener('click', function () {
+    setCookie('cookieRejected', 'true', 1);
+    cookieNotice.style.display = 'none';
+  });
+
+  // 设置Cookie
+  function setCookie(name, value, days) {
+    var expires = "";
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+  }
+
+  // 获取Cookie
+  function getCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+
+  // 检查Cookie并显示/隐藏通知
+  checkCookie();
+});

test/styles.css

@@ -1,24 +1,54 @@
-body {
-  font-family: Arial, sans-serif;
-  margin: 0;
+.cookie-notice {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #f1f1f1;
+  color: #333;
+  text-align: center;
+  padding: 15px 0;
+  z-index: 9999;
+  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
 }
 
-.slideshow-container {
-  position: relative;
-  max-width: 1000px;
-  margin: auto;
+.cookie-notice p {
+  margin: 0 0 10px;
 }
 
-.mySlides {
-  display: none;
+.accept-button {
+  background-color: #4CAF50; /* 绿色背景 */
+  color: white; /* 白色文字 */
+  border: none;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin-right: 10px;
+  cursor: pointer;
+  border-radius: 5px; /* 圆角 */
+  transition: background-color 0.3s; /* 平滑过渡效果 */
 }
 
-.fade {
-  animation-name: fade;
-  animation-duration: 1.5s;
+.accept-button:hover {
+  background-color: #45a049; /* 鼠标悬停时颜色变深 */
 }
 
-@keyframes fade {
-  from {opacity: .4} 
-  to {opacity: 1}
+.reject-button {
+  background-color: #e7e7e7; /* 浅灰色背景 */
+  color: #666; /* 深灰色文字 */
+  border: 1px solid #ccc; /* 浅灰色边框 */
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px; /* 圆角 */
+  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
+}
+
+.reject-button:hover {
+  background-color: #ddd; /* 鼠标悬停时颜色略微变深 */
+  color: #555; /* 文字颜色也略微变深 */
 }

test/tags.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>渐变背景示例</title>
-    <style>
-        body {
-            /* 设置渐变背景 */
-            background: linear-gradient(to bottom, #feb47b, #ff7e5f);
-            /* 从左到右的渐变 */
-            height: 100vh;
-            /* 使背景覆盖整个视口高度 */
-            margin: 0;
-            /* 移除默认的body边距 */
-        }
-    </style>
-</head>
-
-<body>
-    <h1>欢迎来到渐变背景的世界！</h1>
-</body>
-
-</html>

test/test.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>头像卡片</title>
-    <style>
-        .container {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 16px;
-            width: 90%;
-            margin: 20px auto;
-        }
-
-        .card {
-
-            border: 1px solid #ccc;
-            padding: 20px;
-            max-width: 200px;
-            text-align: center;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-
-        .card img {
-            border-radius: 50%;
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-        }
-
-        .card .info {
-            margin-top: 15px;
-        }
-
-        .card .info p {
-            margin: 5px 0;
-        }
-    </style>
-</head>
-
-<body>
-
-    <div class="container">
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-        <div class="card">
-            <img src="http://localhost:6889/thumbs/v1/avatar/320/5b965144028d9b3606010b13.jpeg" alt="头像">
-            <div class="info">
-                <p><strong>姓名</strong>: 张三</p>
-                <p><strong>作品数量</strong>: 20</p>
-            </div>
-        </div>
-    </div>
-
-</body>
-
-</html>

views/cookie-banner.ejs

@@ -0,0 +1,15 @@
+<link rel="stylesheet" href="/stylesheets/cookie.css">
+
+<div id="cookie-notice" class="cookie-notice">
+  <p>
+    <%=translate.cookie[lang] %>
+      <button id="accept-cookies" class="accept-button">
+        <%=translate.accept[lang] %>
+      </button>
+      <button id="reject-cookies" class="reject-button">
+        <%=translate.refuse[lang] %>
+      </button>
+  </p>
+</div>
+
+<script src="/scripts/cookie.js"></script>

views/header.ejs

@@ -45,6 +45,9 @@
         <a href="/<%= lang %>/info#contact" class="<%= uri.includes(`/${lang}/info#contact`) ? 'selected' : '' %>">
           <%= translate.contactUs[lang] %>
         </a>
+        <a href="/policy.html" target="_blank">
+          <%= translate.policy[lang] %>
+        </a>
         <div class="divider"></div>
         <p class="copyright">Copyright &copy; 2025 Art Number Coloring All Rights Reserved</p>
       </div>

views/index.ejs

@@ -30,6 +30,7 @@
   <%- include('designer-section') %>
   <%- include('special-section') %>
   <%- include('footer') %>
+  <%- include('cookie-banner') %>
   <div style="height: 50px;"></div>
 </body>