Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
guoziyun
/
artsite
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

fix cookies html

guoziyun 1 жил өмнө
parent
17a45c2edc
commit
419ebc1e12
7 өөрчлөгдсөн 240 нэмэгдсэн , 51 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 10 0
      config/translate.js
  2. 78 0
      dist/cookies.html
  3. 11 7
      dist/policy.html
  4. 5 5
      dist/scripts/cookie.js
  5. 35 34
      dist/stylesheets/cookie.css
  6. 96 0
      test/cookies2.html
  7. 5 5
      views/cookie-banner.ejs

+ 10 - 0
config/translate.js
Файл харах 

@@ -497,6 +497,15 @@ let cookie = {
 
   ja: 'より良いサービス体験を提供するため、当社のウェブサイトではクッキーを使用しています。閲覧を続けることは、当社のクッキーの使用に同意することを意味します。クッキーに関する詳細をご希望の場合は、当社のプライバシーポリシーをご覧ください。',
 
 }
 
 
+let learnMore = {
 
+  zh: '了解更多',
 
+  en: 'Learn More',
 
+  es: 'Aprende más',
 
+  pt: 'Saiba mais',
 
+  ja: 'もっと詳しく知る',
 
+}
 
+
 
+
 
 let accept = {
 
   zh: '接受',
 
   en: 'Accept',
 
@@ -579,6 +588,7 @@ let translate = {
 
   worksCount,
 
   policy,
 
   cookie,
 
+  learnMore,
 
   accept,
 
   refuse,
 
 }

+ 78 - 0
dist/cookies.html
Файл харах 

@@ -0,0 +1,78 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Cookies Notice</title>
 
+  <style>
 
+    #cookie-notice {
 
+      position: fixed;
 
+      bottom: 0;
 
+      left: 0;
 
+      width: 100%;
 
+      background-color: #f0f0f0;
 
+      padding: 20px;
 
+      text-align: center;
 
+      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
 
+      z-index: 1000;
 
+      /* Ensure it's on top */
 
+      display: flex;
 
+      justify-content: space-between;
 
+      align-items: center;
 
+    }
 
+
 
+    #cookie-notice p {
 
+      margin: 0;
 
+      flex-grow: 1;
 
+      padding-right: 20px;
 
+    }
 
+
 
+    #cookie-notice button {
 
+      background-color: #007bff;
 
+      color: white;
 
+      border: none;
 
+      padding: 10px 20px;
 
+      margin-right: 40px;
 
+      cursor: pointer;
 
+      border-radius: 5px;
 
+    }
 
+
 
+    #cookie-notice button:hover {
 
+      background-color: #0056b3;
 
+    }
 
+
 
+    #cookie-notice a {
 
+      color: #007bff;
 
+      text-decoration: none;
 
+    }
 
+
 
+    #cookie-notice a:hover {
 
+      text-decoration: underline;
 
+    }
 
+
 
+    @media (max-width: 600px) {
 
+      #cookie-notice {
 
+        flex-direction: column;
 
+        align-items: stretch;
 
+      }
 
+
 
+      #cookie-notice p {
 
+        padding-right: 0;
 
+        margin-bottom: 10px;
 
+      }
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+
 
+  <div id="cookie-notice">
 
+    <p>This website uses cookies to improve your experience. By continuing to browse this site, you agree to our use of
 
+      cookies. <a href="/policy.html" target="_blank">Learn more</a></p>
 
+    <button id="accept-cookies">Accept</button>
 
+  </div>
 
+
 
+</body>
 
+
 
+</html>

+ 11 - 7
dist/policy.html
Файл харах 

@@ -449,8 +449,8 @@
 
               also collect information through cookies and similar technologies. <bdt class="block-component"></bdt>You
 
               can find out more about this in our Cookie Notice: <bdt class="statement-end-if-in-editor"></bdt>
 
               <bdt class="block-component"></bdt><span style="color: rgb(0, 58, 250);">
 
-                <bdt class="question"><a href="https://art.pcoloring.com/cookies" target="_blank"
 
-                    data-custom-class="link">https://art.pcoloring.com/cookies</a></bdt>
 
+                <bdt class="question"><a href="https://art.pcoloring.com/cookies.html" target="_blank"
 
+                    data-custom-class="link">https://art.pcoloring.com/cookies.html</a></bdt>
 
               </span>.<bdt class="block-component"></bdt>
 
             </span></span></span></div>
 
       <div style="line-height: 1.5;"><br></div>
 
@@ -957,7 +957,7 @@
 
                                                     style="font-size: 15px;">Understand
 
                                                     how our users use our products and services so we can improve user
 
                                                     experience<bdt class="statement-end-if-in-editor"></bdt>
 
-                                                    </span></span>
 
+                                                  </span></span>
 
                                               </li>
 
                                             </ul>
 
                                             <div style="line-height: 1.5;"><span data-custom-class="body_text"><span
 
@@ -1133,7 +1133,8 @@
 
                                                   data-custom-class="body_text"><span style="font-size: 15px;">If
 
                                                     disclosure is required to comply with a subpoena, warrant, court
 
                                                     order, or rules of the court relating to the production of records
 
-                                                    <bdt class="statement-end-if-in-editor"></bdt></span></span></li>
 
+                                                    <bdt class="statement-end-if-in-editor"></bdt>
 
+                                                  </span></span></li>
 
                                             </ul>
 
                                             <div style="line-height: 1.5;">
 
                                               <bdt class="block-component"><span style="font-size: 15px;"><span
 
@@ -1198,7 +1199,8 @@
 
                                                         Short:</em></strong><em> We may share information in specific
 
                                                       situations described in this section and/or with the following
 
                                                       <bdt class="block-component"></bdt>third
 
-                                                      parties.</em></span></span></span></div>
 
+                                                      parties.
 
+                                                    </em></span></span></span></div>
 
                                             <div style="line-height: 1.5;"><span
 
                                                 style="font-size: 15px; color: rgb(89, 89, 89);"><span
 
                                                   style="font-size: 15px; color: rgb(89, 89, 89);"><span
 
@@ -2530,7 +2532,8 @@
 
                                                           <span style="font-size: 15px;">Receiving help through our
 
                                                             customer
 
                                                             support channels;<bdt class="statement-end-if-in-editor">
 
-                                                            </bdt></span></li>
 
+                                                            </bdt></span>
 
+                                                        </li>
 
                                                       </ul>
 
                                                       <div><span style="font-size: 15px;">
 
                                                           <bdt class="block-component"></bdt>
 
@@ -2727,7 +2730,8 @@
 
                                                                                       class="block-component"></bdt>"
 
                                                                                     <bdt
 
                                                                                       class="statement-end-if-in-editor">
 
-                                                                                    </bdt></span></span></span><a
 
+                                                                                    </bdt>
 
+                                                                                  </span></span></span><a
 
                                                                                 data-custom-class="link"
 
                                                                                 href="#whoshare"><span
 
                                                                                   style="font-size: 15px; color: rgb(0, 58, 250);"><span

+ 5 - 5
dist/scripts/cookie.js
Файл харах 

@@ -1,7 +1,7 @@
 
 document.addEventListener('DOMContentLoaded', function () {
 
   var cookieNotice = document.getElementById('cookie-notice');
 
   var acceptCookies = document.getElementById('accept-cookies');
 
-  var rejectCookies = document.getElementById('reject-cookies');
 
+  // var rejectCookies = document.getElementById('reject-cookies');
 
 
   // 检查Cookie
 
   function checkCookie() {
 
@@ -26,10 +26,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
   });
 
 
   // 拒绝Cookie
 
-  rejectCookies.addEventListener('click', function () {
 
-    setCookie('cookieRejected', 'true', 1);
 
-    cookieNotice.style.display = 'none';
 
-  });
 
+  // rejectCookies.addEventListener('click', function () {
 
+  //   setCookie('cookieRejected', 'true', 1);
 
+  //   cookieNotice.style.display = 'none';
 
+  // });
 
 
   // 设置Cookie
 
   function setCookie(name, value, days) {

+ 35 - 34
dist/stylesheets/cookie.css
Файл харах 

@@ -1,54 +1,55 @@
 
-.cookie-notice {
 
+#cookie-notice {
 
   position: fixed;
 
   bottom: 0;
 
   left: 0;
 
   width: 100%;
 
-  background-color: #f1f1f1;
 
-  color: #333;
 
+  background-color: #f0f0f0;
 
+  padding: 20px;
 
   text-align: center;
 
-  padding: 10px;
 
-  z-index: 9999;
 
-  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
 
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
 
+  z-index: 1000;
 
+  /* Ensure it's on top */
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
 }
 
 
-.cookie-notice p {
 
-  margin: 10px;
 
+#cookie-notice p {
 
+  margin: 0;
 
+  flex-grow: 1;
 
+  padding-right: 20px;
 
 }
 
 
-.accept-button {
 
-  background-color: #4CAF50; /* 绿色背景 */
 
-  color: white; /* 白色文字 */
 
+#cookie-notice button {
 
+  background-color: #007bff;
 
+  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; /* 平滑过渡效果 */
 
+  border-radius: 5px;
 
 }
 
 
-.accept-button:hover {
 
-  background-color: #45a049; /* 鼠标悬停时颜色变深 */
 
+#cookie-notice button:hover {
 
+  background-color: #0056b3;
 
 }
 
 
-.reject-button {
 
-  background-color: #e7e7e7; /* 浅灰色背景 */
 
-  color: #666; /* 深灰色文字 */
 
-  border: 1px solid #ccc; /* 浅灰色边框 */
 
-  padding: 10px 20px;
 
-  text-align: center;
 
+#cookie-notice a {
 
+  color: #007bff;
 
   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; /* 文字颜色也略微变深 */
 
+#cookie-notice a:hover {
 
+  text-decoration: underline;
 
+}
 
+
 
+@media (max-width: 600px) {
 
+  #cookie-notice {
 
+    flex-direction: column;
 
+    align-items: stretch;
 
+  }
 
+
 
+  #cookie-notice p {
 
+    padding-right: 0;
 
+    margin-bottom: 10px;
 
+  }
 
 }

+ 96 - 0
test/cookies2.html
Файл харах 

@@ -0,0 +1,96 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Cookies Notice</title>
 
+  <style>
 
+    #cookie-notice {
 
+      position: fixed;
 
+      bottom: 0;
 
+      left: 0;
 
+      width: 100%;
 
+      background-color: #f0f0f0;
 
+      padding: 20px;
 
+      text-align: center;
 
+      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
 
+      z-index: 1000;
 
+      /* Ensure it's on top */
 
+      display: flex;
 
+      justify-content: space-between;
 
+      align-items: center;
 
+    }
 
+
 
+    #cookie-notice p {
 
+      margin: 0;
 
+      flex-grow: 1;
 
+      padding-right: 20px;
 
+    }
 
+
 
+    #cookie-notice button {
 
+      background-color: #007bff;
 
+      color: white;
 
+      border: none;
 
+      padding: 10px 20px;
 
+      margin-right: 40px;
 
+      cursor: pointer;
 
+      border-radius: 5px;
 
+    }
 
+
 
+    #cookie-notice button:hover {
 
+      background-color: #0056b3;
 
+    }
 
+
 
+    #cookie-notice a {
 
+      color: #007bff;
 
+      text-decoration: none;
 
+    }
 
+
 
+    #cookie-notice a:hover {
 
+      text-decoration: underline;
 
+    }
 
+
 
+    @media (max-width: 600px) {
 
+      #cookie-notice {
 
+        flex-direction: column;
 
+        align-items: stretch;
 
+      }
 
+
 
+      #cookie-notice p {
 
+        padding-right: 0;
 
+        margin-bottom: 10px;
 
+      }
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+
 
+  <div id="cookie-notice">
 
+    <p>This website uses cookies to improve your experience. By continuing to browse this site, you agree to our use of
 
+      cookies. <a href="/policy.html" target="_blank">Learn more</a></p>
 
+    <button id="accept-cookies">Accept</button>
 
+  </div>
 
+
 
+  <script>
 
+    document.addEventListener('DOMContentLoaded', function () {
 
+      const cookieNotice = document.getElementById('cookie-notice');
 
+      const acceptButton = document.getElementById('accept-cookies');
 
+
 
+      if (!localStorage.getItem('cookiesAccepted')) {
 
+        cookieNotice.style.display = 'flex'; // Show the notice
 
+      } else {
 
+        cookieNotice.style.display = 'none'; // Hide the notice
 
+      }
 
+
 
+      acceptButton.addEventListener('click', function () {
 
+        localStorage.setItem('cookiesAccepted', 'true');
 
+        cookieNotice.style.display = 'none'; // Hide the notice
 
+      });
 
+    });
 
+  </script>
 
+
 
+</body>
 
+
 
+</html>

+ 5 - 5
views/cookie-banner.ejs
Файл харах 

@@ -1,14 +1,14 @@
 
 <link rel="stylesheet" href="/stylesheets/cookie.css">
 
 
-<div id="cookie-notice" class="cookie-notice">
 
+<div id="cookie-notice">
 
   <p>
 
     <%=translate.cookie[lang] %>
 
-      <button id="accept-cookies" class="accept-button">
 
+      <a href="/policy.html" target="_blank">
 
+        <%=translate.learnMore[lang] %>
 
+      </a>
 
+      <button id="accept-cookies">
 
         <%=translate.accept[lang] %>
 
       </button>
 
-      <button id="reject-cookies" class="reject-button">
 
-        <%=translate.refuse[lang] %>
 
-      </button>
 
   </p>
 
 </div>