Home Esplora Aiuto
Accedi
guoziyun
/
artsite
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

fix

guoziyun 11 mesi fa
parent
278ae1f153
commit
638522ef48
70 ha cambiato i file con 4195 aggiunte e 3224 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 1 1
      README.md
  2. 1 1
      config/translate.js
  3. 2 2
      dist/.well-known/assetlinks.json
  4. 8 0
      dist/.well-known/assetlinks.product.json
  5. 0 8
      dist/.well-known/assetlinks_debug.json
  6. 24 12
      dist/anc/index.html
  7. 1 1
      dist/manifest.json
  8. 2 2
      dist/policy.html
  9. 40 22
      dist/share.html
  10. 2 2
      libs/utils/mail.js
  11. 2 2
      routes/v2/config.js
  12. 5 5
      routes/v2/subscribe.ejs
  13. 2 2
      routes/v2/subscribe.js
  14. 135 105
      test/about.html
  15. 3 3
      test/allcollection.html
  16. 4 4
      test/another-contact.html
  17. 133 124
      test/another-gallery.html
  18. 161 131
      test/app.html
  19. 2 2
      test/appsection.html
  20. 3 3
      test/benifit.html
  21. 3 3
      test/choosing-coloring-tools.html
  22. 167 119
      test/color-combinations-guide.html
  23. 3 3
      test/coloring-pages.html
  24. 183 117
      test/coloring-techniques-for-beginners.html
  25. 106 91
      test/contact.html
  26. 3 3
      test/detail.html
  27. 176 119
      test/display-your-coloring-masterpieces.html
  28. 3 3
      test/fatherday.html
  29. 3 3
      test/flower-coloring-page.html
  30. 3 3
      test/gallery.html
  31. 1 1
      test/header.html
  32. 3 3
      test/how-to-color-mandala.html
  33. 3 3
      test/how-to-coloring-online.html
  34. 5 5
      test/index.html
  35. 193 105
      test/privacy.html
  36. 157 82
      test/terms-of-service.html
  37. 94 82
      test/video-colring-pages.html
  38. 1 1
      views/footer.ejs
  39. 4 4
      views/header.ejs
  40. 13 13
      views/index.ejs
  41. 1 1
      views/info.ejs
  42. 1 1
      views/intro-section.ejs
  43. 6 6
      views/v2/about.ejs
  44. 3 3
      views/v2/album.ejs
  45. 49 36
      views/v2/albums.ejs
  46. 11 11
      views/v2/app.ejs
  47. 13 7
      views/v2/benefit-of-coloring-pages.ejs
  48. 4 4
      views/v2/choose-the-right-coloring-tools.ejs
  49. 17 9
      views/v2/color-combinations-guide.ejs
  50. 47 33
      views/v2/coloring-page-collection.ejs
  51. 65 46
      views/v2/coloring-pages.ejs
  52. 12 7
      views/v2/coloring-techniques-for-beginners.ejs
  53. 235 213
      views/v2/contact.ejs
  54. 3 3
      views/v2/detail.ejs
  55. 1 1
      views/v2/display-your-coloring-masterpieces.ejs
  56. 318 266
      views/v2/faq.ejs
  57. 17 12
      views/v2/footer.ejs
  58. 269 241
      views/v2/gallery.ejs
  59. 12 7
      views/v2/header.ejs
  60. 364 306
      views/v2/how-to-color-mandala.ejs
  61. 10 9
      views/v2/how-to-color-online.ejs
  62. 42 31
      views/v2/index.ejs
  63. 94 86
      views/v2/myworks.ejs
  64. 3 3
      views/v2/play.ejs
  65. 296 203
      views/v2/privacy.ejs
  66. 57 35
      views/v2/share.ejs
  67. 215 139
      views/v2/terms-of-service.ejs
  68. 176 148
      views/v2/tips-tricks.ejs
  69. 3 3
      views/v2/video-coloring-page.ejs
  70. 196 159
      views/v2/video-coloring-pages.ejs

+ 1 - 1
README.md
Vedi File 

@@ -1 +1 @@
 
-# Welcome to Art Number Coloring Web Site !
 
+# Welcome to Art Color!

+ 1 - 1
config/translate.js
Vedi File 

@@ -485,7 +485,7 @@ let wrongPage = {
 
 
 
 let appIntroduction = {
 
 let appIntroduction = {
 
   zh: '🎨 数字涂色艺术 - 按数字涂色 🎨 是最棒的数字涂色画册之一，拥有各类涂色页。涂色页每日更新，你总能找到适合自己的图案。它完全免费！我们提供这本免费的涂色画册，作为一种色彩疗法来帮你释放压力。把你的作品分享给朋友，随时随地尽情涂色。',
 
   zh: '🎨 数字涂色艺术 - 按数字涂色 🎨 是最棒的数字涂色画册之一，拥有各类涂色页。涂色页每日更新，你总能找到适合自己的图案。它完全免费！我们提供这本免费的涂色画册，作为一种色彩疗法来帮你释放压力。把你的作品分享给朋友，随时随地尽情涂色。',
 
-  en: '🎨 Art Number Coloring - Color by Number 🎨 is one of the best paint by number coloring book with various categories of coloring pages. Coloring Pages are update everyday, you can always find images suite to you. It is 💯 Free! We offer this free coloring book as a color therapy to release your stress. Share your artworks to your friends and color anytime & anywhere. ',
 
+  en: '🎨 Art Color - Color by Number 🎨 is one of the best paint by number coloring book with various categories of coloring pages. Coloring Pages are update everyday, you can always find images suite to you. It is 💯 Free! We offer this free coloring book as a color therapy to release your stress. Share your artworks to your friends and color anytime & anywhere. ',
 
   es: '🎨 Arte de Coloreado por Número - Colorear por Número 🎨 es uno de los mejores libros de coloreado por número con varias categorías de páginas para colorear. Las páginas para colorear se actualizan todos los días, siempre puedes encontrar imágenes que te gusten. ¡Es 100% gratuito! Ofrecemos este libro de coloreado gratuito como una terapia del color para aliviar tu estrés. Comparte tus obras de arte con tus amigos y colorea en cualquier momento y lugar.',
 
   es: '🎨 Arte de Coloreado por Número - Colorear por Número 🎨 es uno de los mejores libros de coloreado por número con varias categorías de páginas para colorear. Las páginas para colorear se actualizan todos los días, siempre puedes encontrar imágenes que te gusten. ¡Es 100% gratuito! Ofrecemos este libro de coloreado gratuito como una terapia del color para aliviar tu estrés. Comparte tus obras de arte con tus amigos y colorea en cualquier momento y lugar.',
 
   pt: '🎨 Arte de Colorir por Número - Colorir por Número 🎨 é um dos melhores livros de colorir por número com várias categorias de páginas para colorir. As páginas para colorir são atualizadas todos os dias, você sempre pode encontrar imagens que sejam perfeitas para você. É 100% gratuito! Oferecemos este livro de colorir gratuito como uma terapia da cor para aliviar o seu stress. Compartilhe suas obras de arte com seus amigos e colora a qualquer momento e lugar.',
 
   pt: '🎨 Arte de Colorir por Número - Colorir por Número 🎨 é um dos melhores livros de colorir por número com várias categorias de páginas para colorir. As páginas para colorir são atualizadas todos os dias, você sempre pode encontrar imagens que sejam perfeitas para você. É 100% gratuito! Oferecemos este livro de colorir gratuito como uma terapia da cor para aliviar o seu stress. Compartilhe suas obras de arte com seus amigos e colora a qualquer momento e lugar.',
 
   ja: '🎨 ナンバーカラーアート - 数字で塗り絵 🎨 は、様々な種類の塗り絵ページを備えた最高の数字塗り絵の本の一つです。塗り絵ページは毎日更新され、いつもあなたに合った画像を見つけることができます。完全無料です！ 私たちはこの無料の塗り絵の本を、ストレスを解放するためのカラーセラピーとして提供しています。 あなたの作品を友達と共有し、いつでもどこでも塗り絵を楽しんでください。',
 
   ja: '🎨 ナンバーカラーアート - 数字で塗り絵 🎨 は、様々な種類の塗り絵ページを備えた最高の数字塗り絵の本の一つです。塗り絵ページは毎日更新され、いつもあなたに合った画像を見つけることができます。完全無料です！ 私たちはこの無料の塗り絵の本を、ストレスを解放するためのカラーセラピーとして提供しています。 あなたの作品を友達と共有し、いつでもどこでも塗り絵を楽しんでください。',

+ 2 - 2
dist/.well-known/assetlinks.json
Vedi File 

@@ -2,7 +2,7 @@
 
   "relation": ["delegate_permission/common.handle_all_urls"],
 
   "relation": ["delegate_permission/common.handle_all_urls"],
 
   "target": {
 
   "target": {
 
     "namespace": "android_app",
 
     "namespace": "android_app",
 
-    "package_name": "com.pcoloring.art.puzzle.color.by.number",
 
-    "sha256_cert_fingerprints": ["40:68:76:E9:56:DA:28:BE:AE:61:A9:0C:3C:4D:C2:CF:D6:60:1F:BA:7C:87:24:D0:8B:1E:D6:12:74:90:43:5A"]
 
+    "package_name": "com.pcoloring.art.puzzle.color.by.number.debug",
 
+    "sha256_cert_fingerprints": ["0D:4D:A8:DC:26:55:E2:15:CD:86:1B:0C:EC:0A:CF:9A:35:80:CB:3A:2C:B1:6C:54:50:DE:6B:0C:AC:07:28:01"]
 
   }
 
   }
 
 }]
 
 }]

+ 8 - 0
dist/.well-known/assetlinks.product.json
Vedi File 

@@ -0,0 +1,8 @@
 
+[{
 
+  "relation": ["delegate_permission/common.handle_all_urls"],
 
+  "target": {
 
+    "namespace": "android_app",
 
+    "package_name": "com.pcoloring.art.puzzle.color.by.number",
 
+    "sha256_cert_fingerprints": ["40:68:76:E9:56:DA:28:BE:AE:61:A9:0C:3C:4D:C2:CF:D6:60:1F:BA:7C:87:24:D0:8B:1E:D6:12:74:90:43:5A"]
 
+  }
 
+}]

+ 0 - 8
dist/.well-known/assetlinks_debug.json
Vedi File 

@@ -1,8 +0,0 @@
 
-[{
 
-  "relation": ["delegate_permission/common.handle_all_urls"],
 
-  "target": {
 
-    "namespace": "android_app",
 
-    "package_name": "com.pcoloring.art.puzzle.color.by.number.debug",
 
-    "sha256_cert_fingerprints": ["0D:4D:A8:DC:26:55:E2:15:CD:86:1B:0C:EC:0A:CF:9A:35:80:CB:3A:2C:B1:6C:54:50:DE:6B:0C:AC:07:28:01"]
 
-  }
 
-}]

+ 24 - 12
dist/anc/index.html
Vedi File 

@@ -1,19 +1,21 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-    <title>Art Number Coloring</title>
 
+    <title>Art Color</title>
 
     <link rel="stylesheet" href="./reset.css">
 
     <link rel="stylesheet" href="./reset.css">
 
     <link rel="stylesheet" href="./main.css">
 
     <link rel="stylesheet" href="./main.css">
 
     <link rel="shortcut icon" href="./favicon.ico">
 
     <link rel="shortcut icon" href="./favicon.ico">
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header class="header">
 
     <header class="header">
 
         <div class="header-container">
 
         <div class="header-container">
 
-            <div class="logo">Art Number Coloring</div>
 
-            <div class="logo-name">Art Number Coloring</div>
 
+            <div class="logo">Art Color</div>
 
+            <div class="logo-name">Art Color</div>
 
             <div class="header-link">
 
             <div class="header-link">
 
                 <a href="https://www.facebook.com/artcoloring/" class="link-fb"></a>
 
                 <a href="https://www.facebook.com/artcoloring/" class="link-fb"></a>
 
                 <a href="mailto:ares.nju@gmail.com" class="link-email"></a>
 
                 <a href="mailto:ares.nju@gmail.com" class="link-email"></a>
 
@@ -26,14 +28,20 @@
 
                 <div class="title">Enjoy the Fun of Number Coloring!</div>
 
                 <div class="title">Enjoy the Fun of Number Coloring!</div>
 
                 <div class="content" style="margin-top: 40px;">
 
                 <div class="content" style="margin-top: 40px;">
 
 
 
-                  🎨 Art Number Coloring - Color by Number 🎨 is one of the best paint by number coloring book with various categories of coloring pages. Coloring Pages are update everyday, you can always find images suite to you. It is 💯 Free! We offer this free coloring book as a color therapy to release your stress. Share your artworks to your friends and color anytime & anywhere.
 
+                    🎨 Art Color - Color by Number 🎨 is one of the best paint by number coloring book with various
 
+                    categories of coloring pages. Coloring Pages are update everyday, you can always find images suite
 
+                    to you. It is 💯 Free! We offer this free coloring book as a color therapy to release your stress.
 
+                    Share your artworks to your friends and color anytime & anywhere.
 
 
 
 
 
                 </div>
 
                 </div>
 
                 <div class="content" style="margin-top: 90px;">Use it on your phone or tablet.</div>
 
                 <div class="content" style="margin-top: 90px;">Use it on your phone or tablet.</div>
 
                 <div class="store-link">
 
                 <div class="store-link">
 
-                    <a target="_blank" href="https://apps.apple.com/gb/app/art-number-coloring-book/id1575480118" class="appstore"></a>
 
-                    <a target="_blank" href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number" class="googleplay"></a>
 
+                    <a target="_blank" href="https://apps.apple.com/gb/app/art-number-coloring-book/id1575480118"
 
+                        class="appstore"></a>
 
+                    <a target="_blank"
 
+                        href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number"
 
+                        class="googleplay"></a>
 
                 </div>
 
                 </div>
 
                 <div class="content" style="margin-top: 90px;">Or visit our website:.</div>
 
                 <div class="content" style="margin-top: 90px;">Or visit our website:.</div>
 
                 <div class="store-link">
 
                 <div class="store-link">
 
@@ -46,7 +54,7 @@
 
         <footer class="footer">
 
         <footer class="footer">
 
             <div class="line"></div>
 
             <div class="line"></div>
 
             <ul class="footer-nav">
 
             <ul class="footer-nav">
 
-                <li>Follow us on 
+                <li>Follow us on
 
                     <a class="icon-blue-fb" href="https://www.facebook.com/artcoloring/"></a>
 
                     <a class="icon-blue-fb" href="https://www.facebook.com/artcoloring/"></a>
 
                 </li>
 
                 </li>
 
                 <li>
 
                 <li>
 
@@ -57,14 +65,18 @@
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
             <div class="store-link">
 
             <div class="store-link">
 
-                    <a target="_blank" href="https://apps.apple.com/gb/app/art-number-coloring-book/id1575480118" class="appstore"></a>
 
-                    <a target="_blank" href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number" class="googleplay"></a>
 
- 
+                <a target="_blank" href="https://apps.apple.com/gb/app/art-number-coloring-book/id1575480118"
 
+                    class="appstore"></a>
 
+                <a target="_blank"
 
+                    href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number"
 
+                    class="googleplay"></a>
 
+
 
             </div>
 
             </div>
 
             <div class="copyright">
 
             <div class="copyright">
 
-                Copyright © Art Number Coloring
 
+                Copyright © Art Color
 
             </div>
 
             </div>
 
         </footer>
 
         </footer>
 
     </div>
 
     </div>
 
 </body>
 
 </body>
 
-</html>
 
+
 
+</html>

+ 1 - 1
dist/manifest.json
Vedi File 

@@ -1,5 +1,5 @@
 
 {
 
 {
 
-  "name": "Art Number Coloring",
 
+  "name": "Art Color",
 
   "short_name": "ArtColor",
 
   "short_name": "ArtColor",
 
   "start_url": "/",
 
   "start_url": "/",
 
   "display": "standalone",
 
   "display": "standalone",

+ 2 - 2
dist/policy.html
Vedi File 

@@ -6,7 +6,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <title>Policy</title>
 
   <title>Policy</title>
 
-  <meta name="description" content="art.pcoloring.com Policy | JCCY | Art Number Coloring">
 
+  <meta name="description" content="art.pcoloring.com Policy | JCCY | Art Color">
 
   <style>
 
   <style>
 
     [data-custom-class='body'],
 
     [data-custom-class='body'],
 
     [data-custom-class='body'] * {
 
     [data-custom-class='body'] * {
 
@@ -118,7 +118,7 @@
 
       </div>
 
       </div>
 
       <ul>
 
       <ul>
 
         <li data-custom-class="body_text" style="line-height: 1.5;"><span style="font-size: 15px;">Use <bdt
 
         <li data-custom-class="body_text" style="line-height: 1.5;"><span style="font-size: 15px;">Use <bdt
 
-              class="question">Art Number Coloring</bdt>. <bdt class="question">A variety of free coloring pages for
 
+              class="question">Art Color</bdt>. <bdt class="question">A variety of free coloring pages for
 
               both
 
               both
 
               adults and kids that can be printed or colored online</bdt></span>
 
               adults and kids that can be printed or colored online</bdt></span>
 
           <bdt class="statement-end-if-in-editor"><span style="font-size: 15px;"></span></bdt>
 
           <bdt class="statement-end-if-in-editor"><span style="font-size: 15px;"></span></bdt>

+ 40 - 22
dist/share.html
Vedi File 

@@ -3,16 +3,17 @@
 
 
 
 <head>
 
 <head>
 
   <meta http-equiv="x-ua-compatible" content="ie=edge">
 
   <meta http-equiv="x-ua-compatible" content="ie=edge">
 
-  <title>Art Number Coloring</title>
 
+  <title>Art Color</title>
 
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="description" content="Free Coloring Pages Paint Online!">
 
   <meta name="description" content="Free Coloring Pages Paint Online!">
 
   <meta name="keywords" content="color, paint, app, ios, android, game">
 
   <meta name="keywords" content="color, paint, app, ios, android, game">
 
 
 
   <meta property="og:site_name" content="art.pcoloring.com">
 
   <meta property="og:site_name" content="art.pcoloring.com">
 
-  <meta property="og:title" content="Art Number Coloring">
 
+  <meta property="og:title" content="Art Color">
 
   <meta property="og:description" content="Free Coloring Pages Paint Online!">
 
   <meta property="og:description" content="Free Coloring Pages Paint Online!">
 
-  <meta property="og:image" content="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/686240183deb2d264e3a39d9.webp">
 
+  <meta property="og:image"
 
+    content="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/686240183deb2d264e3a39d9.webp">
 
   <meta property="og:type" content="website">
 
   <meta property="og:type" content="website">
 
 
 
   <!-- MARK: Universal Link / Android App Link 的核心配置 -->
 
   <!-- MARK: Universal Link / Android App Link 的核心配置 -->
 
@@ -22,12 +23,12 @@
 
   <meta property="al:ios:url" content="https://art.pcoloring.com/share/686240183deb2d264e3a39d9" />
 
   <meta property="al:ios:url" content="https://art.pcoloring.com/share/686240183deb2d264e3a39d9" />
 
   <!-- **Universal Link 路径** -->
 
   <!-- **Universal Link 路径** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
-  <meta property="al:ios:app_name" content="Art Number Coloring Book" /> <!-- **iOS 应用名称** -->
 
+  <meta property="al:ios:app_name" content="Art Color Book" /> <!-- **iOS 应用名称** -->
 
 
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:url" content="https://art.pcoloring.com/share/686240183deb2d264e3a39d9" />
 
   <meta property="al:android:url" content="https://art.pcoloring.com/share/686240183deb2d264e3a39d9" />
 
   <!-- ** Universal Link 路径** -->
 
   <!-- ** Universal Link 路径** -->
 
-  <meta property="al:android:app_name" content="Art Number Coloring Book" /> <!-- **Android 应用名称** -->
 
+  <meta property="al:android:app_name" content="Art Color Book" /> <!-- **Android 应用名称** -->
 
 
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
 
 
@@ -44,17 +45,22 @@
 
       --light-text: #666;
 
       --light-text: #666;
 
       --border-color: #e0e0e0;
 
       --border-color: #e0e0e0;
 
     }
 
     }
 
-    
+
 
     body {
 
     body {
 
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
       display: flex;
 
       display: flex;
 
-      flex-direction: column; /* 垂直方向排列子元素 */
 
-      justify-content: center; /* 垂直居中 */
 
-      align-items: center;     /* 水平居中 */
 
-      min-height: 100vh;       /* 最小高度为视口高度，确保垂直居中 */
 
+      flex-direction: column;
 
+      /* 垂直方向排列子元素 */
 
+      justify-content: center;
 
+      /* 垂直居中 */
 
+      align-items: center;
 
+      /* 水平居中 */
 
+      min-height: 100vh;
 
+      /* 最小高度为视口高度，确保垂直居中 */
 
       margin: 0;
 
       margin: 0;
 
       padding: 20px;
 
       padding: 20px;
 
-      box-sizing: border-box; /* 盒模型为边框盒 */
 
+      box-sizing: border-box;
 
+      /* 盒模型为边框盒 */
 
       background-color: var(--background-color);
 
       background-color: var(--background-color);
 
       color: var(--text-color);
 
       color: var(--text-color);
 
       line-height: 1.6;
 
       line-height: 1.6;
 
@@ -64,21 +70,30 @@
 
     /* 父容器，用于包裹图片和 Canvas，并使其相对定位 */
 
     /* 父容器，用于包裹图片和 Canvas，并使其相对定位 */
 
     .image-canvas-container {
 
     .image-canvas-container {
 
       position: relative;
 
       position: relative;
 
-      max-width: 90%; /* 限制容器最大宽度 */
 
+      max-width: 90%;
 
+      /* 限制容器最大宽度 */
 
       height: auto;
 
       height: auto;
 
-      display: inline-block; /* 确保容器根据图片尺寸收缩 */
 
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */
 
-      border-radius: 12px; /* 圆角 */
 
-      overflow: hidden; /* 隐藏超出容器的内容 */
 
+      display: inline-block;
 
+      /* 确保容器根据图片尺寸收缩 */
 
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 
+      /* 添加阴影效果 */
 
+      border-radius: 12px;
 
+      /* 圆角 */
 
+      overflow: hidden;
 
+      /* 隐藏超出容器的内容 */
 
     }
 
     }
 
 
 
     /* 图片样式：使其响应式并填充容器 */
 
     /* 图片样式：使其响应式并填充容器 */
 
     .image-canvas-container img {
 
     .image-canvas-container img {
 
       position: relative;
 
       position: relative;
 
-      display: block; /* 移除图片底部空白 */
 
-      max-width: 100%; /* 最大宽度为父容器的100% */
 
-      height: auto;    /* 高度自动调整，保持图片比例 */
 
-      border-radius: 12px; /* 与容器相同的圆角 */
 
+      display: block;
 
+      /* 移除图片底部空白 */
 
+      max-width: 100%;
 
+      /* 最大宽度为父容器的100% */
 
+      height: auto;
 
+      /* 高度自动调整，保持图片比例 */
 
+      border-radius: 12px;
 
+      /* 与容器相同的圆角 */
 
       z-index: 100;
 
       z-index: 100;
 
     }
 
     }
 
 
 
@@ -89,7 +104,8 @@
 
       left: 0;
 
       left: 0;
 
       width: 100%;
 
       width: 100%;
 
       height: 100%;
 
       height: 100%;
 
-      border-radius: 12px; /* 与容器相同的圆角 */
 
+      border-radius: 12px;
 
+      /* 与容器相同的圆角 */
 
       z-index: 50;
 
       z-index: 50;
 
     }
 
     }
 
 
 
@@ -171,7 +187,9 @@
 
 
 
 <body>
 
 <body>
 
   <div class="image-canvas-container">
 
   <div class="image-canvas-container">
 
-    <img id="poster-img" src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/686240183deb2d264e3a39d9.webp" alt="Art Number Coloring" />
 
+    <img id="poster-img"
 
+      src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/686240183deb2d264e3a39d9.webp"
 
+      alt="Art Color" />
 
     <canvas id="canvas"></canvas>
 
     <canvas id="canvas"></canvas>
 
     <div id="play-button" class="play-button"></div>
 
     <div id="play-button" class="play-button"></div>
 
   </div>
 
   </div>

+ 2 - 2
libs/utils/mail.js
Vedi File 

@@ -5,8 +5,8 @@ const { replay } = require("../../config/translate");
 
 
 
 
 
 let DEFAULT_DATA = {
 
 let DEFAULT_DATA = {
 
-  // from: 'Art Number Coloring Team<guoziyun@jccy-tech.com>', //必须与认证用户一致
 
-  from: 'Art Number Coloring Team<art-number-coloring@jccy-tech.com>', //必须与认证用户一致
 
+  // from: 'Art Color Team<guoziyun@jccy-tech.com>', //必须与认证用户一致
 
+  from: 'Art Color Team<art-number-coloring@jccy-tech.com>', //必须与认证用户一致
 
   // replayTo: 'art_number_coloring@jccy-tech.com', // 指定回复地址为群组邮箱
 
   // replayTo: 'art_number_coloring@jccy-tech.com', // 指定回复地址为群组邮箱
 
   to: "guoziyun@jccy-tech.com", // list of receivers
 
   to: "guoziyun@jccy-tech.com", // list of receivers
 
   subject: '无标题',
 
   subject: '无标题',

+ 2 - 2
routes/v2/config.js
Vedi File 

@@ -149,7 +149,7 @@ const coloringData = {
 
     uri: '/summer-coloring-pages',
 
     uri: '/summer-coloring-pages',
 
     tips: 'tips-get-use-of-our-coloring-pages',
 
     tips: 'tips-get-use-of-our-coloring-pages',
 
     date: 'July 11, 2025',
 
     date: 'July 11, 2025',
 
-    seoTitle: `Free Summer Coloring Pages | Download & Print or Color Online - Art Number Coloring`,
 
+    seoTitle: `Free Summer Coloring Pages | Download & Print or Color Online - Art Color`,
 
     seoDescription: `BDive into summer fun with our vibrant collection of free coloring pages! Instantly download and print for offline creativity, or enjoy the convenience of coloring directly online. Perfect for kids and adults.`,
 
     seoDescription: `BDive into summer fun with our vibrant collection of free coloring pages! Instantly download and print for offline creativity, or enjoy the convenience of coloring directly online. Perfect for kids and adults.`,
 
     p1: `Welcome to our dazzling collection of <strong>Summer Coloring Pages</strong>, where the sun shines bright and creativity knows no bounds! Get ready to capture the warmth and joy of the season with our delightful designs, featuring everything from sunny beaches and playful marine life to refreshing ice creams and blooming flowers. Best of all, every single page is available for <strong>free download and print</strong>, making it easy to bring your artistic vision to life with crayons, markers, or paints, right from your home.`,
 
     p1: `Welcome to our dazzling collection of <strong>Summer Coloring Pages</strong>, where the sun shines bright and creativity knows no bounds! Get ready to capture the warmth and joy of the season with our delightful designs, featuring everything from sunny beaches and playful marine life to refreshing ice creams and blooming flowers. Best of all, every single page is available for <strong>free download and print</strong>, making it easy to bring your artistic vision to life with crayons, markers, or paints, right from your home.`,
 
     p2: `But the fun doesn't stop there! For those who love digital convenience, our Summer Coloring Pages also offer the unique ability to color directly online. Simply choose your favorite design, pick your colors from our palette, and start painting with just a click or tap. No downloads, no printing, just instant, vibrant creativity at your fingertips. Whether you prefer the tactile joy of traditional coloring or the ease of digital artistry, our collection is designed to bring endless summer smiles to artists of all ages!`,
 
     p2: `But the fun doesn't stop there! For those who love digital convenience, our Summer Coloring Pages also offer the unique ability to color directly online. Simply choose your favorite design, pick your colors from our palette, and start painting with just a click or tap. No downloads, no printing, just instant, vibrant creativity at your fingertips. Whether you prefer the tactile joy of traditional coloring or the ease of digital artistry, our collection is designed to bring endless summer smiles to artists of all ages!`,
 
@@ -199,7 +199,7 @@ const coloringData = {
 
     uri: '/flower-coloring-pages',
 
     uri: '/flower-coloring-pages',
 
     tips: 'tips-get-use-of-our-coloring-pages',
 
     tips: 'tips-get-use-of-our-coloring-pages',
 
     date: 'Jun 19, 2025',
 
     date: 'Jun 19, 2025',
 
-    seoTitle: `Roses, Sunflowers & More - Free Flower Coloring Pages to Print | Art Number Coloring`,
 
+    seoTitle: `Roses, Sunflowers & More - Free Flower Coloring Pages to Print | Art Color`,
 
     seoDescription: `Browse a huge selection of free flower coloring pages, including roses, sunflowers, lilies, and more! Easily print your favorite floral designs or color online for instant artistic joy.`,
 
     seoDescription: `Browse a huge selection of free flower coloring pages, including roses, sunflowers, lilies, and more! Easily print your favorite floral designs or color online for instant artistic joy.`,
 
     p1: `Explore our beautiful collection of flower coloring pages! From delicate roses to vibrant sunflowers, these
 
     p1: `Explore our beautiful collection of flower coloring pages! From delicate roses to vibrant sunflowers, these
 
         designs offer endless possibilities for creativity. Perfect for all ages and skill levels, our flower coloring
 
         designs offer endless possibilities for creativity. Perfect for all ages and skill levels, our flower coloring

+ 5 - 5
routes/v2/subscribe.ejs
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Welcome to Art Number Coloring!</title>
 
+    <title>Welcome to Art Color!</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -169,13 +169,13 @@
 
 <body>
 
 <body>
 
     <div class="email-container">
 
     <div class="email-container">
 
         <div class="header">
 
         <div class="header">
 
-            <h1>Welcome to Art Number Coloring!</h1>
 
+            <h1>Welcome to Art Color!</h1>
 
         </div>
 
         </div>
 
 
 
         <div class="content">
 
         <div class="content">
 
             <div class="welcome-message">
 
             <div class="welcome-message">
 
                 <h2>Hello from our coloring community!</h2>
 
                 <h2>Hello from our coloring community!</h2>
 
-                <p>Thank you for subscribing to Art Number Coloring! We're excited to have you join our creative
 
+                <p>Thank you for subscribing to Art Color! We're excited to have you join our creative
 
                     community.</p>
 
                     community.</p>
 
                 <p>As a welcome gift, here's your free 18-page Eclectic Coloring Book with themes like architecture and
 
                 <p>As a welcome gift, here's your free 18-page Eclectic Coloring Book with themes like architecture and
 
                     kawaii.</p>
 
                     kawaii.</p>
 
@@ -257,11 +257,11 @@
 
             <p>We'll be sending you regular updates with new coloring pages, tips, and exclusive offers. If you have any
 
             <p>We'll be sending you regular updates with new coloring pages, tips, and exclusive offers. If you have any
 
                 questions, feel free to reply to this email.</p>
 
                 questions, feel free to reply to this email.</p>
 
             <p>Happy coloring!</p>
 
             <p>Happy coloring!</p>
 
-            <p>The Art Number Coloring Team</p>
 
+            <p>The Art Color Team</p>
 
         </div>
 
         </div>
 
 
 
         <div class="footer">
 
         <div class="footer">
 
-            <p>© 2025 Art Number Coloring. All rights reserved.</p>
 
+            <p>© 2025 Art Color. All rights reserved.</p>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
 </body>
 
 </body>

+ 2 - 2
routes/v2/subscribe.js
Vedi File 

@@ -24,7 +24,7 @@ router.post('/', async (req, res) => {
 
       let html = await renderFile(__dirname + '/subscribe.ejs', {});
 
       let html = await renderFile(__dirname + '/subscribe.ejs', {});
 
       await utils.mail.send({
 
       await utils.mail.send({
 
         to: email,
 
         to: email,
 
-        subject: 'Welcome to Art Number Coloring!',
 
+        subject: 'Welcome to Art Color!',
 
         html,
 
         html,
 
       })
 
       })
 
       return res.status(400).json({ message: 'Email already subscribed' });
 
       return res.status(400).json({ message: 'Email already subscribed' });
 
@@ -38,7 +38,7 @@ router.post('/', async (req, res) => {
 
     let html = await renderFile(__dirname + '/subscribe.ejs', {});
 
     let html = await renderFile(__dirname + '/subscribe.ejs', {});
 
     await utils.mail.send({
 
     await utils.mail.send({
 
       to: email,
 
       to: email,
 
-      subject: 'Welcome to Art Number Coloring!',
 
+      subject: 'Welcome to Art Color!',
 
       html,
 
       html,
 
     })
 
     })

+ 135 - 105
test/about.html
Vedi File 

@@ -1,5 +1,6 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -12,28 +13,29 @@
 
             --background-color: #f9f9f9;
 
             --background-color: #f9f9f9;
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
-            --art-color: #ff9f1c; /* 用于Art Number Coloring相关的高亮颜色 */
 
+            --art-color: #ff9f1c;
 
+            /* 用于Art Color相关的高亮颜色 */
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         header {
 
         header {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
@@ -41,17 +43,17 @@
 
             text-align: center;
 
             text-align: center;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .header-logo {
 
         .header-logo {
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
         }
 
         }
 
-        
+
 
         main {
 
         main {
 
             padding: 40px 0;
 
             padding: 40px 0;
 
         }
 
         }
 
-        
+
 
         section {
 
         section {
 
             margin-bottom: 50px;
 
             margin-bottom: 50px;
 
             background-color: white;
 
             background-color: white;
 
@@ -59,30 +61,30 @@
 
             padding: 30px;
 
             padding: 30px;
 
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 
         }
 
         }
 
-        
+
 
         h1 {
 
         h1 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         h2 {
 
         h2 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             margin: 25px 0 15px;
 
             margin: 25px 0 15px;
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
         }
 
         }
 
-        
+
 
         h3 {
 
         h3 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             margin: 20px 0 10px;
 
             margin: 20px 0 10px;
 
             font-size: 1.4rem;
 
             font-size: 1.4rem;
 
         }
 
         }
 
-        
+
 
         p {
 
         p {
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .btn {
 
         .btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
@@ -93,30 +95,30 @@
 
             font-size: 1rem;
 
             font-size: 1rem;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .btn:hover {
 
         .btn:hover {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .about-grid {
 
         .about-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: 1fr 1fr;
 
             grid-template-columns: 1fr 1fr;
 
             gap: 40px;
 
             gap: 40px;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         .about-item {
 
         .about-item {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             padding: 25px;
 
             padding: 25px;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .about-item:hover {
 
         .about-item:hover {
 
             transform: translateY(-5px);
 
             transform: translateY(-5px);
 
             box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 
             box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 
         }
 
         }
 
-        
+
 
         .brand-image {
 
         .brand-image {
 
             margin: 30px 0;
 
             margin: 30px 0;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -124,22 +126,22 @@
 
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .brand-image:hover {
 
         .brand-image:hover {
 
             transform: scale(1.02);
 
             transform: scale(1.02);
 
         }
 
         }
 
-        
+
 
         .brand-image img {
 
         .brand-image img {
 
             width: 100%;
 
             width: 100%;
 
             height: auto;
 
             height: auto;
 
             object-fit: cover;
 
             object-fit: cover;
 
         }
 
         }
 
-        
+
 
         .timeline {
 
         .timeline {
 
             position: relative;
 
             position: relative;
 
             margin: 50px 0;
 
             margin: 50px 0;
 
         }
 
         }
 
-        
+
 
         .timeline::before {
 
         .timeline::before {
 
             content: '';
 
             content: '';
 
             position: absolute;
 
             position: absolute;
 
@@ -150,24 +152,24 @@
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
             transform: translateX(-50%);
 
             transform: translateX(-50%);
 
         }
 
         }
 
-        
+
 
         .timeline-item {
 
         .timeline-item {
 
             position: relative;
 
             position: relative;
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
             padding: 20px;
 
             padding: 20px;
 
             width: 50%;
 
             width: 50%;
 
         }
 
         }
 
-        
+
 
         .timeline-item:nth-child(even) {
 
         .timeline-item:nth-child(even) {
 
             left: 50%;
 
             left: 50%;
 
             padding-left: 40px;
 
             padding-left: 40px;
 
         }
 
         }
 
-        
+
 
         .timeline-item:nth-child(odd) {
 
         .timeline-item:nth-child(odd) {
 
             padding-right: 40px;
 
             padding-right: 40px;
 
             text-align: right;
 
             text-align: right;
 
         }
 
         }
 
-        
+
 
         .timeline-item::after {
 
         .timeline-item::after {
 
             content: '';
 
             content: '';
 
             position: absolute;
 
             position: absolute;
 
@@ -178,103 +180,103 @@
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             z-index: 1;
 
             z-index: 1;
 
         }
 
         }
 
-        
+
 
         .timeline-item:nth-child(even)::after {
 
         .timeline-item:nth-child(even)::after {
 
             left: -10px;
 
             left: -10px;
 
         }
 
         }
 
-        
+
 
         .timeline-item:nth-child(odd)::after {
 
         .timeline-item:nth-child(odd)::after {
 
             right: -10px;
 
             right: -10px;
 
         }
 
         }
 
-        
-        /* Art Number Coloring相关里程碑的特殊样式 */
 
+
 
+        /* Art Color相关里程碑的特殊样式 */
 
         .timeline-item.art-related::after {
 
         .timeline-item.art-related::after {
 
             background-color: var(--art-color);
 
             background-color: var(--art-color);
 
             transform: scale(1.3);
 
             transform: scale(1.3);
 
         }
 
         }
 
-        
+
 
         .timeline-item.art-related .timeline-year {
 
         .timeline-item.art-related .timeline-year {
 
             color: var(--art-color);
 
             color: var(--art-color);
 
         }
 
         }
 
-        
+
 
         .timeline-year {
 
         .timeline-year {
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .timeline-metric {
 
         .timeline-metric {
 
             font-weight: 600;
 
             font-weight: 600;
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
         }
 
         }
 
-        
+
 
         .timeline-item.art-related .timeline-metric {
 
         .timeline-item.art-related .timeline-metric {
 
             color: var(--art-color);
 
             color: var(--art-color);
 
         }
 
         }
 
-        
+
 
         .games-grid {
 
         .games-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
             gap: 30px;
 
             gap: 30px;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         .game-card {
 
         .game-card {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             overflow: hidden;
 
             overflow: hidden;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .game-card:hover {
 
         .game-card:hover {
 
             transform: translateY(-5px);
 
             transform: translateY(-5px);
 
             box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 
             box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 
         }
 
         }
 
-        
+
 
         .game-image {
 
         .game-image {
 
             height: 180px;
 
             height: 180px;
 
             background-color: #f0f0f0;
 
             background-color: #f0f0f0;
 
             overflow: hidden;
 
             overflow: hidden;
 
         }
 
         }
 
-        
+
 
         .game-image img {
 
         .game-image img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
             transition: transform 0.5s ease;
 
             transition: transform 0.5s ease;
 
         }
 
         }
 
-        
+
 
         .game-card:hover .game-image img {
 
         .game-card:hover .game-image img {
 
             transform: scale(1.05);
 
             transform: scale(1.05);
 
         }
 
         }
 
-        
+
 
         .game-content {
 
         .game-content {
 
             padding: 20px;
 
             padding: 20px;
 
         }
 
         }
 
-        
+
 
         .game-title {
 
         .game-title {
 
             font-weight: 600;
 
             font-weight: 600;
 
             margin-bottom: 5px;
 
             margin-bottom: 5px;
 
             color: var(--text-color);
 
             color: var(--text-color);
 
         }
 
         }
 
-        
+
 
         .game-desc {
 
         .game-desc {
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .team-grid {
 
         .team-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 
             gap: 30px;
 
             gap: 30px;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         .team-member {
 
         .team-member {
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .team-avatar {
 
         .team-avatar {
 
             width: 150px;
 
             width: 150px;
 
             height: 150px;
 
             height: 150px;
 
@@ -284,27 +286,27 @@
 
             border: 3px solid var(--secondary-color);
 
             border: 3px solid var(--secondary-color);
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .team-member:hover .team-avatar {
 
         .team-member:hover .team-avatar {
 
             border-color: var(--primary-color);
 
             border-color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .team-avatar img {
 
         .team-avatar img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
         }
 
         }
 
-        
+
 
         .team-name {
 
         .team-name {
 
             font-weight: 600;
 
             font-weight: 600;
 
             color: var(--text-color);
 
             color: var(--text-color);
 
         }
 
         }
 
-        
+
 
         .team-role {
 
         .team-role {
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
             color: white;
 
             color: white;
 
@@ -312,44 +314,44 @@
 
             padding: 30px 0;
 
             padding: 30px 0;
 
             margin-top: 50px;
 
             margin-top: 50px;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             h1 {
 
             h1 {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             h2 {
 
             h2 {
 
                 font-size: 1.5rem;
 
                 font-size: 1.5rem;
 
             }
 
             }
 
-            
+
 
             section {
 
             section {
 
                 padding: 20px;
 
                 padding: 20px;
 
             }
 
             }
 
-            
+
 
             .about-grid {
 
             .about-grid {
 
                 grid-template-columns: 1fr;
 
                 grid-template-columns: 1fr;
 
             }
 
             }
 
-            
+
 
             .timeline::before {
 
             .timeline::before {
 
                 left: 20px;
 
                 left: 20px;
 
             }
 
             }
 
-            
+
 
             .timeline-item {
 
             .timeline-item {
 
                 width: 100%;
 
                 width: 100%;
 
                 padding-left: 50px;
 
                 padding-left: 50px;
 
                 padding-right: 0;
 
                 padding-right: 0;
 
                 text-align: left;
 
                 text-align: left;
 
             }
 
             }
 
-            
+
 
             .timeline-item:nth-child(even) {
 
             .timeline-item:nth-child(even) {
 
                 left: 0;
 
                 left: 0;
 
             }
 
             }
 
-            
+
 
             .timeline-item:nth-child(odd)::after,
 
             .timeline-item:nth-child(odd)::after,
 
             .timeline-item:nth-child(even)::after {
 
             .timeline-item:nth-child(even)::after {
 
                 left: 10px;
 
                 left: 10px;
 
@@ -357,6 +359,7 @@
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
@@ -364,76 +367,96 @@
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <main class="container">
 
     <main class="container">
 
         <section>
 
         <section>
 
             <h1>About Us</h1>
 
             <h1>About Us</h1>
 
-            <p>Welcome to Art Number Coloring, your go-to destination for high-quality, free printable coloring pages and digital coloring experiences. We're passionate about bringing creativity and joy to people of all ages through the art of coloring.</p>
 
-            
+            <p>Welcome to Art Color, your go-to destination for high-quality, free printable coloring pages and digital
 
+                coloring experiences. We're passionate about bringing creativity and joy to people of all ages through
 
+                the art of coloring.</p>
 
+
 
             <!-- 新增品牌理念图片 -->
 
             <!-- 新增品牌理念图片 -->
 
             <div class="brand-image">
 
             <div class="brand-image">
 
                 <img src="https://picsum.photos/1200/400?random=20" alt="People enjoying coloring together">
 
                 <img src="https://picsum.photos/1200/400?random=20" alt="People enjoying coloring together">
 
             </div>
 
             </div>
 
-            
+
 
             <div class="about-grid">
 
             <div class="about-grid">
 
                 <div class="about-item">
 
                 <div class="about-item">
 
                     <h3>Our Mission</h3>
 
                     <h3>Our Mission</h3>
 
-                    <p>At Art Number Coloring, our mission is to provide a diverse collection of coloring pages that inspire imagination, reduce stress, and promote relaxation. We believe that coloring is not just for kids—it's a therapeutic activity that can bring out the artist in everyone.</p>
 
+                    <p>At Art Color, our mission is to provide a diverse collection of coloring pages that inspire
 
+                        imagination, reduce stress, and promote relaxation. We believe that coloring is not just for
 
+                        kids—it's a therapeutic activity that can bring out the artist in everyone.</p>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="about-item">
 
                 <div class="about-item">
 
                     <h3>Our Vision</h3>
 
                     <h3>Our Vision</h3>
 
-                    <p>We envision a world where everyone has access to creative outlets that promote mental well-being and artistic expression. Through our platform, we aim to connect people with beautiful, engaging coloring content that sparks joy and creativity.</p>
 
+                    <p>We envision a world where everyone has access to creative outlets that promote mental well-being
 
+                        and artistic expression. Through our platform, we aim to connect people with beautiful, engaging
 
+                        coloring content that sparks joy and creativity.</p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </section>
 
         </section>
 
-        
+
 
         <section>
 
         <section>
 
             <h2>About JCCY</h2>
 
             <h2>About JCCY</h2>
 
-            <p>JCCY is a company founded in 2015 that specializes in the development of casual entertainment games. Several of our games have been well received by users. Among them, "Coloring Book by Numbers" is one of the most popular coloring by number apps in the world and the most successful ad-driven app, gaining wide recognition.</p>
 
-            
+            <p>JCCY is a company founded in 2015 that specializes in the development of casual entertainment games.
 
+                Several of our games have been well received by users. Among them, "Coloring Book by Numbers" is one of
 
+                the most popular coloring by number apps in the world and the most successful ad-driven app, gaining
 
+                wide recognition.</p>
 
+
 
             <div class="timeline">
 
             <div class="timeline">
 
                 <div class="timeline-item">
 
                 <div class="timeline-item">
 
                     <div class="timeline-year">2015</div>
 
                     <div class="timeline-year">2015</div>
 
-                    <p>JCCY is founded with a vision to create engaging casual games that bring joy to players worldwide.</p>
 
+                    <p>JCCY is founded with a vision to create engaging casual games that bring joy to players
 
+                        worldwide.</p>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="timeline-item">
 
                 <div class="timeline-item">
 
                     <div class="timeline-year">2016</div>
 
                     <div class="timeline-year">2016</div>
 
-                    <p>Releases its first mobile game, "Pixel Puzzle", which quickly gains a dedicated user base of over 500,000 downloads in the first month.</p>
 
+                    <p>Releases its first mobile game, "Pixel Puzzle", which quickly gains a dedicated user base of over
 
+                        500,000 downloads in the first month.</p>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="timeline-item">
 
                 <div class="timeline-item">
 
                     <div class="timeline-year">2017</div>
 
                     <div class="timeline-year">2017</div>
 
-                    <p>Launches "Doodle Draw", a creative drawing app that introduces users to digital art, receiving critical acclaim from parenting and education platforms.</p>
 
+                    <p>Launches "Doodle Draw", a creative drawing app that introduces users to digital art, receiving
 
+                        critical acclaim from parenting and education platforms.</p>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="timeline-item art-related">
 
                 <div class="timeline-item art-related">
 
                     <div class="timeline-year">2018</div>
 
                     <div class="timeline-year">2018</div>
 
-                    <p>Develops and releases "Coloring Book by Numbers", which becomes a global sensation, <span class="timeline-metric">reaching 100 million downloads</span> within two years and winning <span class="timeline-metric">5 international awards</span> for Best Casual Game.</p>
 
+                    <p>Develops and releases "Coloring Book by Numbers", which becomes a global sensation, <span
 
+                            class="timeline-metric">reaching 100 million downloads</span> within two years and winning
 
+                        <span class="timeline-metric">5 international awards</span> for Best Casual Game.</p>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="timeline-item">
 
                 <div class="timeline-item">
 
                     <div class="timeline-year">2020</div>
 
                     <div class="timeline-year">2020</div>
 
-                    <p>Expands its portfolio with "Pattern Paradise", a mandala coloring app that receives critical acclaim and is featured in Apple's "App of the Day".</p>
 
+                    <p>Expands its portfolio with "Pattern Paradise", a mandala coloring app that receives critical
 
+                        acclaim and is featured in Apple's "App of the Day".</p>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="timeline-item art-related">
 
                 <div class="timeline-item art-related">
 
                     <div class="timeline-year">2022</div>
 
                     <div class="timeline-year">2022</div>
 
-                    <p>Launches the web version of "Art Number Coloring", bringing high-quality coloring content to a wider audience and <span class="timeline-metric">gaining 10 million monthly active users</span> in the first year.</p>
 
+                    <p>Launches the web version of "Art Color", bringing high-quality coloring content to a wider
 
+                        audience and <span class="timeline-metric">gaining 10 million monthly active users</span> in the
 
+                        first year.</p>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="timeline-item art-related">
 
                 <div class="timeline-item art-related">
 
                     <div class="timeline-year">2023</div>
 
                     <div class="timeline-year">2023</div>
 
-                    <p>Introduces premium features to "Coloring Book by Numbers", enhancing the user experience while maintaining free access, resulting in <span class="timeline-metric">a 300% increase in user engagement</span>.</p>
 
+                    <p>Introduces premium features to "Coloring Book by Numbers", enhancing the user experience while
 
+                        maintaining free access, resulting in <span class="timeline-metric">a 300% increase in user
 
+                            engagement</span>.</p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </section>
 
         </section>
 
-        
+
 
         <section>
 
         <section>
 
             <h2>Our Games & Apps</h2>
 
             <h2>Our Games & Apps</h2>
 
-            <p>Over the years, JCCY has developed several successful games and apps that have captured the hearts of users worldwide. Here are some of our most popular creations:</p>
 
-            
+            <p>Over the years, JCCY has developed several successful games and apps that have captured the hearts of
 
+                users worldwide. Here are some of our most popular creations:</p>
 
+
 
             <div class="games-grid">
 
             <div class="games-grid">
 
                 <div class="game-card">
 
                 <div class="game-card">
 
                     <div class="game-image">
 
                     <div class="game-image">
 
@@ -441,46 +464,51 @@
 
                     </div>
 
                     </div>
 
                     <div class="game-content">
 
                     <div class="game-content">
 
                         <div class="game-title">Coloring Book by Numbers</div>
 
                         <div class="game-title">Coloring Book by Numbers</div>
 
-                        <div class="game-desc">A popular coloring app that combines the fun of coloring with the challenge of numbers. Available on iOS and Android.</div>
 
+                        <div class="game-desc">A popular coloring app that combines the fun of coloring with the
 
+                            challenge of numbers. Available on iOS and Android.</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="game-card">
 
                 <div class="game-card">
 
                     <div class="game-image">
 
                     <div class="game-image">
 
                         <img src="https://picsum.photos/600/400?random=31" alt="Pattern Paradise">
 
                         <img src="https://picsum.photos/600/400?random=31" alt="Pattern Paradise">
 
                     </div>
 
                     </div>
 
                     <div class="game-content">
 
                     <div class="game-content">
 
                         <div class="game-title">Pattern Paradise</div>
 
                         <div class="game-title">Pattern Paradise</div>
 
-                        <div class="game-desc">An immersive mandala and pattern coloring app that helps users create stunning artwork with ease.</div>
 
+                        <div class="game-desc">An immersive mandala and pattern coloring app that helps users create
 
+                            stunning artwork with ease.</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="game-card">
 
                 <div class="game-card">
 
                     <div class="game-image">
 
                     <div class="game-image">
 
                         <img src="https://picsum.photos/600/400?random=32" alt="Doodle Draw">
 
                         <img src="https://picsum.photos/600/400?random=32" alt="Doodle Draw">
 
                     </div>
 
                     </div>
 
                     <div class="game-content">
 
                     <div class="game-content">
 
                         <div class="game-title">Doodle Draw</div>
 
                         <div class="game-title">Doodle Draw</div>
 
-                        <div class="game-desc">A creative drawing app that lets users express their artistic side with a variety of tools and colors.</div>
 
+                        <div class="game-desc">A creative drawing app that lets users express their artistic side with a
 
+                            variety of tools and colors.</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="game-card">
 
                 <div class="game-card">
 
                     <div class="game-image">
 
                     <div class="game-image">
 
                         <img src="https://picsum.photos/600/400?random=33" alt="Pixel Puzzle">
 
                         <img src="https://picsum.photos/600/400?random=33" alt="Pixel Puzzle">
 
                     </div>
 
                     </div>
 
                     <div class="game-content">
 
                     <div class="game-content">
 
                         <div class="game-title">Pixel Puzzle</div>
 
                         <div class="game-title">Pixel Puzzle</div>
 
-                        <div class="game-desc">A unique puzzle game that combines pixel art with challenging puzzles for all ages.</div>
 
+                        <div class="game-desc">A unique puzzle game that combines pixel art with challenging puzzles for
 
+                            all ages.</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </section>
 
         </section>
 
-        
+
 
         <section>
 
         <section>
 
             <h2>Our Team</h2>
 
             <h2>Our Team</h2>
 
-            <p>Behind every great app and game is a talented team of designers, developers, and creatives. Meet the people who make JCCY and Art Number Coloring possible:</p>
 
-            
+            <p>Behind every great app and game is a talented team of designers, developers, and creatives. Meet the
 
+                people who make JCCY and Art Color possible:</p>
 
+
 
             <div class="team-grid">
 
             <div class="team-grid">
 
                 <div class="team-member">
 
                 <div class="team-member">
 
                     <div class="team-avatar">
 
                     <div class="team-avatar">
 
@@ -489,7 +517,7 @@
 
                     <div class="team-name">Sarah Johnson</div>
 
                     <div class="team-name">Sarah Johnson</div>
 
                     <div class="team-role">CEO & Founder</div>
 
                     <div class="team-role">CEO & Founder</div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="team-member">
 
                 <div class="team-member">
 
                     <div class="team-avatar">
 
                     <div class="team-avatar">
 
                         <img src="https://picsum.photos/400/400?random=41" alt="CTO">
 
                         <img src="https://picsum.photos/400/400?random=41" alt="CTO">
 
@@ -497,7 +525,7 @@
 
                     <div class="team-name">David Chen</div>
 
                     <div class="team-name">David Chen</div>
 
                     <div class="team-role">CTO</div>
 
                     <div class="team-role">CTO</div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="team-member">
 
                 <div class="team-member">
 
                     <div class="team-avatar">
 
                     <div class="team-avatar">
 
                         <img src="https://picsum.photos/400/400?random=42" alt="Lead Designer">
 
                         <img src="https://picsum.photos/400/400?random=42" alt="Lead Designer">
 
@@ -505,7 +533,7 @@
 
                     <div class="team-name">Emily Rodriguez</div>
 
                     <div class="team-name">Emily Rodriguez</div>
 
                     <div class="team-role">Lead Designer</div>
 
                     <div class="team-role">Lead Designer</div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="team-member">
 
                 <div class="team-member">
 
                     <div class="team-avatar">
 
                     <div class="team-avatar">
 
                         <img src="https://picsum.photos/400/400?random=43" alt="Marketing Director">
 
                         <img src="https://picsum.photos/400/400?random=43" alt="Marketing Director">
 
@@ -513,7 +541,7 @@
 
                     <div class="team-name">Michael Brown</div>
 
                     <div class="team-name">Michael Brown</div>
 
                     <div class="team-role">Marketing Director</div>
 
                     <div class="team-role">Marketing Director</div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="team-member">
 
                 <div class="team-member">
 
                     <div class="team-avatar">
 
                     <div class="team-avatar">
 
                         <img src="https://picsum.photos/400/400?random=44" alt="Art Director">
 
                         <img src="https://picsum.photos/400/400?random=44" alt="Art Director">
 
@@ -521,7 +549,7 @@
 
                     <div class="team-name">Sophia Kim</div>
 
                     <div class="team-name">Sophia Kim</div>
 
                     <div class="team-role">Art Director</div>
 
                     <div class="team-role">Art Director</div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="team-member">
 
                 <div class="team-member">
 
                     <div class="team-avatar">
 
                     <div class="team-avatar">
 
                         <img src="https://picsum.photos/400/400?random=45" alt="Product Manager">
 
                         <img src="https://picsum.photos/400/400?random=45" alt="Product Manager">
 
@@ -531,17 +559,18 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </section>
 
         </section>
 
-        
+
 
         <section>
 
         <section>
 
             <h2>Contact Us</h2>
 
             <h2>Contact Us</h2>
 
-            <p>We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to reach out to our team.</p>
 
-            
+            <p>We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to
 
+                reach out to our team.</p>
 
+
 
             <div class="btn-container" style="text-align: center; margin-top: 30px;">
 
             <div class="btn-container" style="text-align: center; margin-top: 30px;">
 
                 <a href="#" class="btn">Contact Support</a>
 
                 <a href="#" class="btn">Contact Support</a>
 
             </div>
 
             </div>
 
         </section>
 
         </section>
 
     </main>
 
     </main>
 
-    
+
 
     <footer>
 
     <footer>
 
         <div class="container footer-content">
 
         <div class="container footer-content">
 
             <p>Yay! Coloring Pages - Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Yay! Coloring Pages - Free Printable Coloring Pages and Birthday Cards</p>
 
@@ -549,4 +578,5 @@
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 3 - 3
test/allcollection.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Coloring Page Collections - Art Number Coloring</title>
 
+  <title>Coloring Page Collections - Art Color</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -196,7 +196,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -297,7 +297,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 4 - 4
test/another-contact.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Contact - Art Number Coloring</title>
 
+    <title>Contact - Art Color</title>
 
     <style>
 
     <style>
 
         /* 基础样式 */
 
         /* 基础样式 */
 
         body {
 
         body {
 
@@ -414,7 +414,7 @@
 
                         <circle cx="70" cy="70" r="10" fill="#4ecdc4" />
 
                         <circle cx="70" cy="70" r="10" fill="#4ecdc4" />
 
                         <rect x="45" y="45" width="10" height="10" fill="white" />
 
                         <rect x="45" y="45" width="10" height="10" fill="white" />
 
                     </svg>
 
                     </svg>
 
-                    <span>Art Number Coloring</span>
 
+                    <span>Art Color</span>
 
                 </div>
 
                 </div>
 
                 <nav>
 
                 <nav>
 
                     <ul>
 
                     <ul>
 
@@ -539,7 +539,7 @@
 
                             <circle cx="70" cy="70" r="10" fill="#4ecdc4" />
 
                             <circle cx="70" cy="70" r="10" fill="#4ecdc4" />
 
                             <rect x="45" y="45" width="10" height="10" fill="white" />
 
                             <rect x="45" y="45" width="10" height="10" fill="white" />
 
                         </svg>
 
                         </svg>
 
-                        <span>Art Number Coloring</span>
 
+                        <span>Art Color</span>
 
                     </div>
 
                     </div>
 
                     <p class="footer-text">Free printable coloring pages and digital art resources for all ages.</p>
 
                     <p class="footer-text">Free printable coloring pages and digital art resources for all ages.</p>
 
                 </div>
 
                 </div>
 
@@ -585,7 +585,7 @@
 
             </div>
 
             </div>
 
 
 
             <div class="footer-bottom">
 
             <div class="footer-bottom">
 
-                <p class="copyright">© 2025 Art Number Coloring. All rights reserved.</p>
 
+                <p class="copyright">© 2025 Art Color. All rights reserved.</p>
 
                 <div class="footer-social">
 
                 <div class="footer-social">
 
                     <a href="#" aria-label="Facebook">Facebook</a>
 
                     <a href="#" aria-label="Facebook">Facebook</a>
 
                     <a href="#" aria-label="Twitter">Twitter</a>
 
                     <a href="#" aria-label="Twitter">Twitter</a>

+ 133 - 124
test/another-gallery.html
Vedi File 

@@ -1,10 +1,12 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta name="description" content="Explore our extensive gallery of coloring pages created by talented artists. Download and color beautiful designs for free!">
 
-    <title>Gallery - Art Number Coloring</title>
 
+    <meta name="description"
 
+        content="Explore our extensive gallery of coloring pages created by talented artists. Download and color beautiful designs for free!">
 
+    <title>Gallery - Art Color</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -14,26 +16,26 @@
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         /* 导航栏 */
 
         /* 导航栏 */
 
         .navbar {
 
         .navbar {
 
             background-color: white;
 
             background-color: white;
 
@@ -43,52 +45,52 @@
 
             top: 0;
 
             top: 0;
 
             z-index: 100;
 
             z-index: 100;
 
         }
 
         }
 
-        
+
 
         .navbar-content {
 
         .navbar-content {
 
             display: flex;
 
             display: flex;
 
             justify-content: space-between;
 
             justify-content: space-between;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .nav-logo {
 
         .nav-logo {
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .nav-logo img {
 
         .nav-logo img {
 
             width: 40px;
 
             width: 40px;
 
             height: 40px;
 
             height: 40px;
 
             margin-right: 10px;
 
             margin-right: 10px;
 
         }
 
         }
 
-        
+
 
         .nav-logo span {
 
         .nav-logo span {
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .nav-links {
 
         .nav-links {
 
             display: flex;
 
             display: flex;
 
             gap: 30px;
 
             gap: 30px;
 
         }
 
         }
 
-        
+
 
         .nav-links a {
 
         .nav-links a {
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
             font-weight: 500;
 
             font-weight: 500;
 
             transition: color 0.3s ease;
 
             transition: color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .nav-links a:hover,
 
         .nav-links a:hover,
 
         .nav-links a.active {
 
         .nav-links a.active {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .nav-cta {
 
         .nav-cta {
 
             display: flex;
 
             display: flex;
 
             gap: 15px;
 
             gap: 15px;
 
         }
 
         }
 
-        
+
 
         .btn {
 
         .btn {
 
             padding: 8px 16px;
 
             padding: 8px 16px;
 
             border-radius: 5px;
 
             border-radius: 5px;
 
@@ -96,28 +98,28 @@
 
             font-weight: 500;
 
             font-weight: 500;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .btn-primary {
 
         .btn-primary {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         .btn-primary:hover {
 
         .btn-primary:hover {
 
             background-color: #ff5252;
 
             background-color: #ff5252;
 
             transform: translateY(-2px);
 
             transform: translateY(-2px);
 
         }
 
         }
 
-        
+
 
         .btn-secondary {
 
         .btn-secondary {
 
             background-color: white;
 
             background-color: white;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             border: 1px solid var(--primary-color);
 
             border: 1px solid var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .btn-secondary:hover {
 
         .btn-secondary:hover {
 
             background-color: #fff5f5;
 
             background-color: #fff5f5;
 
             transform: translateY(-2px);
 
             transform: translateY(-2px);
 
         }
 
         }
 
-        
+
 
         /* 画廊页面头部 */
 
         /* 画廊页面头部 */
 
         .gallery-header {
 
         .gallery-header {
 
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 
@@ -126,25 +128,25 @@
 
             text-align: center;
 
             text-align: center;
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
         }
 
         }
 
-        
+
 
         .gallery-title {
 
         .gallery-title {
 
             font-size: 2.5rem;
 
             font-size: 2.5rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .gallery-subtitle {
 
         .gallery-subtitle {
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             max-width: 800px;
 
             max-width: 800px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         /* 分类筛选 */
 
         /* 分类筛选 */
 
         .gallery-filters {
 
         .gallery-filters {
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .filter-buttons {
 
         .filter-buttons {
 
             display: inline-flex;
 
             display: inline-flex;
 
             flex-wrap: wrap;
 
             flex-wrap: wrap;
 
@@ -152,7 +154,7 @@
 
             gap: 10px;
 
             gap: 10px;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .filter-btn {
 
         .filter-btn {
 
             padding: 8px 20px;
 
             padding: 8px 20px;
 
             background-color: white;
 
             background-color: white;
 
@@ -162,20 +164,20 @@
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
             font-weight: 500;
 
             font-weight: 500;
 
         }
 
         }
 
-        
+
 
         .filter-btn:hover,
 
         .filter-btn:hover,
 
         .filter-btn.active {
 
         .filter-btn.active {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
             border-color: var(--primary-color);
 
             border-color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .search-bar {
 
         .search-bar {
 
             max-width: 500px;
 
             max-width: 500px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .search-bar input {
 
         .search-bar input {
 
             width: 100%;
 
             width: 100%;
 
             padding: 12px 40px;
 
             padding: 12px 40px;
 
@@ -184,7 +186,7 @@
 
             outline: none;
 
             outline: none;
 
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 
         }
 
         }
 
-        
+
 
         .search-bar i {
 
         .search-bar i {
 
             position: absolute;
 
             position: absolute;
 
             left: 15px;
 
             left: 15px;
 
@@ -192,7 +194,7 @@
 
             transform: translateY(-50%);
 
             transform: translateY(-50%);
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         /* 画廊网格 */
 
         /* 画廊网格 */
 
         .gallery-grid {
 
         .gallery-grid {
 
             display: grid;
 
             display: grid;
 
@@ -200,7 +202,7 @@
 
             gap: 30px;
 
             gap: 30px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .gallery-item {
 
         .gallery-item {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 15px;
 
             border-radius: 15px;
 
@@ -208,34 +210,34 @@
 
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
 
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .gallery-item:hover {
 
         .gallery-item:hover {
 
             transform: translateY(-5px);
 
             transform: translateY(-5px);
 
         }
 
         }
 
-        
+
 
         .item-image {
 
         .item-image {
 
             height: 350px;
 
             height: 350px;
 
             overflow: hidden;
 
             overflow: hidden;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .item-image img {
 
         .item-image img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
             transition: transform 0.5s ease;
 
             transition: transform 0.5s ease;
 
         }
 
         }
 
-        
+
 
         .gallery-item:hover .item-image img {
 
         .gallery-item:hover .item-image img {
 
             transform: scale(1.05);
 
             transform: scale(1.05);
 
         }
 
         }
 
-        
+
 
         .item-overlay {
 
         .item-overlay {
 
             position: absolute;
 
             position: absolute;
 
             bottom: 0;
 
             bottom: 0;
 
             left: 0;
 
             left: 0;
 
             width: 100%;
 
             width: 100%;
 
-            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
 
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
 
             padding: 20px;
 
             padding: 20px;
 
             opacity: 0;
 
             opacity: 0;
 
             transition: opacity 0.3s ease;
 
             transition: opacity 0.3s ease;
 
@@ -243,11 +245,11 @@
 
             justify-content: space-between;
 
             justify-content: space-between;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .gallery-item:hover .item-overlay {
 
         .gallery-item:hover .item-overlay {
 
             opacity: 1;
 
             opacity: 1;
 
         }
 
         }
 
-        
+
 
         .overlay-btn {
 
         .overlay-btn {
 
             background-color: white;
 
             background-color: white;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
@@ -257,21 +259,21 @@
 
             text-decoration: none;
 
             text-decoration: none;
 
             transition: background-color 0.3s ease;
 
             transition: background-color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .overlay-btn:hover {
 
         .overlay-btn:hover {
 
             background-color: #f8f8f8;
 
             background-color: #f8f8f8;
 
         }
 
         }
 
-        
+
 
         .item-info {
 
         .item-info {
 
             padding: 20px;
 
             padding: 20px;
 
         }
 
         }
 
-        
+
 
         .item-title {
 
         .item-title {
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             font-weight: 600;
 
             font-weight: 600;
 
             margin-bottom: 5px;
 
             margin-bottom: 5px;
 
         }
 
         }
 
-        
+
 
         .item-meta {
 
         .item-meta {
 
             display: flex;
 
             display: flex;
 
             justify-content: space-between;
 
             justify-content: space-between;
 
@@ -279,12 +281,12 @@
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
         }
 
         }
 
-        
+
 
         .item-author {
 
         .item-author {
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .author-avatar {
 
         .author-avatar {
 
             width: 30px;
 
             width: 30px;
 
             height: 30px;
 
             height: 30px;
 
@@ -292,51 +294,51 @@
 
             overflow: hidden;
 
             overflow: hidden;
 
             margin-right: 10px;
 
             margin-right: 10px;
 
         }
 
         }
 
-        
+
 
         .author-avatar img {
 
         .author-avatar img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
         }
 
         }
 
-        
+
 
         /* 设计师展示区 */
 
         /* 设计师展示区 */
 
         .designers-section {
 
         .designers-section {
 
             background-color: white;
 
             background-color: white;
 
             padding: 80px 0;
 
             padding: 80px 0;
 
         }
 
         }
 
-        
+
 
         .designers-header {
 
         .designers-header {
 
             text-align: center;
 
             text-align: center;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .designers-title {
 
         .designers-title {
 
             font-size: 2rem;
 
             font-size: 2rem;
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .designers-subtitle {
 
         .designers-subtitle {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .designers-grid {
 
         .designers-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
             gap: 40px;
 
             gap: 40px;
 
         }
 
         }
 
-        
+
 
         .designer-card {
 
         .designer-card {
 
             text-align: center;
 
             text-align: center;
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .designer-card:hover {
 
         .designer-card:hover {
 
             transform: translateY(-8px);
 
             transform: translateY(-8px);
 
         }
 
         }
 
-        
+
 
         .designer-avatar {
 
         .designer-avatar {
 
             width: 140px;
 
             width: 140px;
 
             height: 140px;
 
             height: 140px;
 
@@ -346,18 +348,18 @@
 
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .designer-avatar img {
 
         .designer-avatar img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
             transition: transform 0.5s ease;
 
             transition: transform 0.5s ease;
 
         }
 
         }
 
-        
+
 
         .designer-card:hover .designer-avatar img {
 
         .designer-card:hover .designer-avatar img {
 
             transform: scale(1.05);
 
             transform: scale(1.05);
 
         }
 
         }
 
-        
+
 
         .designer-avatar::after {
 
         .designer-avatar::after {
 
             content: '';
 
             content: '';
 
             position: absolute;
 
             position: absolute;
 
@@ -365,44 +367,44 @@
 
             left: 0;
 
             left: 0;
 
             width: 100%;
 
             width: 100%;
 
             height: 40%;
 
             height: 40%;
 
-            background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
 
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
 
             opacity: 0;
 
             opacity: 0;
 
             transition: opacity 0.3s ease;
 
             transition: opacity 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .designer-card:hover .designer-avatar::after {
 
         .designer-card:hover .designer-avatar::after {
 
             opacity: 1;
 
             opacity: 1;
 
         }
 
         }
 
-        
+
 
         .designer-name {
 
         .designer-name {
 
             font-size: 1.3rem;
 
             font-size: 1.3rem;
 
             font-weight: 600;
 
             font-weight: 600;
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             margin-bottom: 5px;
 
             margin-bottom: 5px;
 
         }
 
         }
 
-        
+
 
         .designer-stats {
 
         .designer-stats {
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
             gap: 20px;
 
             gap: 20px;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .stat-item {
 
         .stat-item {
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .stat-number {
 
         .stat-number {
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .stat-label {
 
         .stat-label {
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .designer-cta {
 
         .designer-cta {
 
             display: inline-block;
 
             display: inline-block;
 
             padding: 8px 20px;
 
             padding: 8px 20px;
 
@@ -413,25 +415,25 @@
 
             font-weight: 500;
 
             font-weight: 500;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .designer-cta:hover {
 
         .designer-cta:hover {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         /* 分页 */
 
         /* 分页 */
 
         .pagination {
 
         .pagination {
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
             margin: 40px 0;
 
             margin: 40px 0;
 
         }
 
         }
 
-        
+
 
         .pagination ul {
 
         .pagination ul {
 
             list-style: none;
 
             list-style: none;
 
             display: flex;
 
             display: flex;
 
             gap: 10px;
 
             gap: 10px;
 
         }
 
         }
 
-        
+
 
         .pagination li {
 
         .pagination li {
 
             width: 40px;
 
             width: 40px;
 
             height: 40px;
 
             height: 40px;
 
@@ -442,59 +444,59 @@
 
             cursor: pointer;
 
             cursor: pointer;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .pagination li:hover,
 
         .pagination li:hover,
 
         .pagination li.active {
 
         .pagination li.active {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         /* 页脚 */
 
         /* 页脚 */
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
             color: white;
 
             color: white;
 
             padding: 60px 0;
 
             padding: 60px 0;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
             gap: 40px;
 
             gap: 40px;
 
         }
 
         }
 
-        
+
 
         .footer-section h3 {
 
         .footer-section h3 {
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .footer-section p {
 
         .footer-section p {
 
             color: rgba(255, 255, 255, 0.7);
 
             color: rgba(255, 255, 255, 0.7);
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .footer-links {
 
         .footer-links {
 
             list-style: none;
 
             list-style: none;
 
         }
 
         }
 
-        
+
 
         .footer-links li {
 
         .footer-links li {
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .footer-links a {
 
         .footer-links a {
 
             color: rgba(255, 255, 255, 0.7);
 
             color: rgba(255, 255, 255, 0.7);
 
             text-decoration: none;
 
             text-decoration: none;
 
             transition: color 0.3s ease;
 
             transition: color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .footer-links a:hover {
 
         .footer-links a:hover {
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         .social-links {
 
         .social-links {
 
             display: flex;
 
             display: flex;
 
             gap: 15px;
 
             gap: 15px;
 
         }
 
         }
 
-        
+
 
         .social-links a {
 
         .social-links a {
 
             width: 40px;
 
             width: 40px;
 
             height: 40px;
 
             height: 40px;
 
@@ -507,69 +509,70 @@
 
             color: white;
 
             color: white;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .social-links a:hover {
 
         .social-links a:hover {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .copyright {
 
         .copyright {
 
             text-align: center;
 
             text-align: center;
 
             margin-top: 40px;
 
             margin-top: 40px;
 
             padding-top: 20px;
 
             padding-top: 20px;
 
             border-top: 1px solid rgba(255, 255, 255, 0.1);
 
             border-top: 1px solid rgba(255, 255, 255, 0.1);
 
         }
 
         }
 
-        
+
 
         /* 响应式 */
 
         /* 响应式 */
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .navbar-content {
 
             .navbar-content {
 
                 flex-direction: column;
 
                 flex-direction: column;
 
                 gap: 20px;
 
                 gap: 20px;
 
             }
 
             }
 
-            
+
 
             .nav-links {
 
             .nav-links {
 
                 flex-wrap: wrap;
 
                 flex-wrap: wrap;
 
                 justify-content: center;
 
                 justify-content: center;
 
             }
 
             }
 
-            
+
 
             .gallery-title {
 
             .gallery-title {
 
                 font-size: 2rem;
 
                 font-size: 2rem;
 
             }
 
             }
 
-            
+
 
             .gallery-subtitle {
 
             .gallery-subtitle {
 
                 font-size: 1rem;
 
                 font-size: 1rem;
 
             }
 
             }
 
-            
+
 
             .filter-buttons {
 
             .filter-buttons {
 
                 padding: 0 10px;
 
                 padding: 0 10px;
 
             }
 
             }
 
-            
+
 
             .designers-title {
 
             .designers-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .designers-grid {
 
             .designers-grid {
 
                 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 
                 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 
             }
 
             }
 
-            
+
 
             .footer-content {
 
             .footer-content {
 
                 text-align: center;
 
                 text-align: center;
 
             }
 
             }
 
-            
+
 
             .social-links {
 
             .social-links {
 
                 justify-content: center;
 
                 justify-content: center;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <!-- 导航栏 -->
 
     <!-- 导航栏 -->
 
     <nav class="navbar">
 
     <nav class="navbar">
 
         <div class="container navbar-content">
 
         <div class="container navbar-content">
 
             <div class="nav-logo">
 
             <div class="nav-logo">
 
-                <img src="https://picsum.photos/40/40?random=100" alt="Art Number Coloring Logo">
 
-                <span>Art Number Coloring</span>
 
+                <img src="https://picsum.photos/40/40?random=100" alt="Art Color Logo">
 
+                <span>Art Color</span>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="nav-links">
 
             <div class="nav-links">
 
                 <a href="#" class="active">Home</a>
 
                 <a href="#" class="active">Home</a>
 
                 <a href="#">Gallery</a>
 
                 <a href="#">Gallery</a>
 
@@ -577,22 +580,23 @@
 
                 <a href="#">About</a>
 
                 <a href="#">About</a>
 
                 <a href="#">Contact</a>
 
                 <a href="#">Contact</a>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="nav-cta">
 
             <div class="nav-cta">
 
                 <a href="#" class="btn btn-secondary">Login</a>
 
                 <a href="#" class="btn btn-secondary">Login</a>
 
                 <a href="#" class="btn btn-primary">Sign Up</a>
 
                 <a href="#" class="btn btn-primary">Sign Up</a>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </nav>
 
     </nav>
 
-    
+
 
     <!-- 画廊页面头部 -->
 
     <!-- 画廊页面头部 -->
 
     <header class="gallery-header">
 
     <header class="gallery-header">
 
         <div class="container">
 
         <div class="container">
 
             <h1 class="gallery-title">Explore Our Gallery</h1>
 
             <h1 class="gallery-title">Explore Our Gallery</h1>
 
-            <p class="gallery-subtitle">Discover thousands of beautiful coloring pages created by talented artists from around the world.</p>
 
+            <p class="gallery-subtitle">Discover thousands of beautiful coloring pages created by talented artists from
 
+                around the world.</p>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <!-- 分类筛选 -->
 
     <!-- 分类筛选 -->
 
     <section class="gallery-filters container">
 
     <section class="gallery-filters container">
 
         <div class="filter-buttons">
 
         <div class="filter-buttons">
 
@@ -604,13 +608,13 @@
 
             <button class="filter-btn">Abstract</button>
 
             <button class="filter-btn">Abstract</button>
 
             <button class="filter-btn">Floral</button>
 
             <button class="filter-btn">Floral</button>
 
         </div>
 
         </div>
 
-        
+
 
         <div class="search-bar">
 
         <div class="search-bar">
 
             <i class="fa fa-search"></i>
 
             <i class="fa fa-search"></i>
 
             <input type="text" placeholder="Search for coloring pages...">
 
             <input type="text" placeholder="Search for coloring pages...">
 
         </div>
 
         </div>
 
     </section>
 
     </section>
 
-    
+
 
     <!-- 画廊网格 -->
 
     <!-- 画廊网格 -->
 
     <section class="gallery-grid container">
 
     <section class="gallery-grid container">
 
         <!-- 画廊项目1 -->
 
         <!-- 画廊项目1 -->
 
@@ -637,7 +641,7 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <!-- 画廊项目2 -->
 
         <!-- 画廊项目2 -->
 
         <div class="gallery-item">
 
         <div class="gallery-item">
 
             <div class="item-image">
 
             <div class="item-image">
 
@@ -662,7 +666,7 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <!-- 画廊项目3 -->
 
         <!-- 画廊项目3 -->
 
         <div class="gallery-item">
 
         <div class="gallery-item">
 
             <div class="item-image">
 
             <div class="item-image">
 
@@ -687,7 +691,7 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <!-- 画廊项目4 -->
 
         <!-- 画廊项目4 -->
 
         <div class="gallery-item">
 
         <div class="gallery-item">
 
             <div class="item-image">
 
             <div class="item-image">
 
@@ -712,7 +716,7 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <!-- 画廊项目5 -->
 
         <!-- 画廊项目5 -->
 
         <div class="gallery-item">
 
         <div class="gallery-item">
 
             <div class="item-image">
 
             <div class="item-image">
 
@@ -737,7 +741,7 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <!-- 画廊项目6 -->
 
         <!-- 画廊项目6 -->
 
         <div class="gallery-item">
 
         <div class="gallery-item">
 
             <div class="item-image">
 
             <div class="item-image">
 
@@ -763,7 +767,7 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
 
-    
+
 
     <!-- 分页 -->
 
     <!-- 分页 -->
 
     <div class="pagination container">
 
     <div class="pagination container">
 
         <ul>
 
         <ul>
 
@@ -776,15 +780,16 @@
 
             <li><i class="fa fa-angle-right"></i></li>
 
             <li><i class="fa fa-angle-right"></i></li>
 
         </ul>
 
         </ul>
 
     </div>
 
     </div>
 
-    
+
 
     <!-- 设计师展示区 -->
 
     <!-- 设计师展示区 -->
 
     <section class="designers-section">
 
     <section class="designers-section">
 
         <div class="container">
 
         <div class="container">
 
             <div class="designers-header">
 
             <div class="designers-header">
 
                 <h2 class="designers-title">Meet Our Talented Designers</h2>
 
                 <h2 class="designers-title">Meet Our Talented Designers</h2>
 
-                <p class="designers-subtitle">These creative artists are behind our beautiful collection of coloring pages. Each brings their unique style and vision.</p>
 
+                <p class="designers-subtitle">These creative artists are behind our beautiful collection of coloring
 
+                    pages. Each brings their unique style and vision.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="designers-grid">
 
             <div class="designers-grid">
 
                 <!-- 设计师1 -->
 
                 <!-- 设计师1 -->
 
                 <div class="designer-card">
 
                 <div class="designer-card">
 
@@ -804,7 +809,7 @@
 
                     </div>
 
                     </div>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <!-- 设计师2 -->
 
                 <!-- 设计师2 -->
 
                 <div class="designer-card">
 
                 <div class="designer-card">
 
                     <div class="designer-avatar">
 
                     <div class="designer-avatar">
 
@@ -823,7 +828,7 @@
 
                     </div>
 
                     </div>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <!-- 设计师3 -->
 
                 <!-- 设计师3 -->
 
                 <div class="designer-card">
 
                 <div class="designer-card">
 
                     <div class="designer-avatar">
 
                     <div class="designer-avatar">
 
@@ -842,7 +847,7 @@
 
                     </div>
 
                     </div>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <!-- 设计师4 -->
 
                 <!-- 设计师4 -->
 
                 <div class="designer-card">
 
                 <div class="designer-card">
 
                     <div class="designer-avatar">
 
                     <div class="designer-avatar">
 
@@ -861,7 +866,7 @@
 
                     </div>
 
                     </div>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <!-- 设计师5 -->
 
                 <!-- 设计师5 -->
 
                 <div class="designer-card">
 
                 <div class="designer-card">
 
                     <div class="designer-avatar">
 
                     <div class="designer-avatar">
 
@@ -880,7 +885,7 @@
 
                     </div>
 
                     </div>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                     <a href="#" class="designer-cta">View Profile</a>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <!-- 设计师6 -->
 
                 <!-- 设计师6 -->
 
                 <div class="designer-card">
 
                 <div class="designer-card">
 
                     <div class="designer-avatar">
 
                     <div class="designer-avatar">
 
@@ -902,13 +907,14 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
 
-    
+
 
     <!-- 页脚 -->
 
     <!-- 页脚 -->
 
     <footer>
 
     <footer>
 
         <div class="container footer-content">
 
         <div class="container footer-content">
 
             <div class="footer-section">
 
             <div class="footer-section">
 
-                <h3>About Art Number Coloring</h3>
 
-                <p>Art Number Coloring is the best app for adults and kids who love to color. With thousands of beautiful designs and daily updates, there's always something new to color.</p>
 
+                <h3>About Art Color</h3>
 
+                <p>Art Color is the best app for adults and kids who love to color. With thousands of beautiful designs
 
+                    and daily updates, there's always something new to color.</p>
 
                 <div class="social-links">
 
                 <div class="social-links">
 
                     <a href="#" class="fa fa-facebook"></a>
 
                     <a href="#" class="fa fa-facebook"></a>
 
                     <a href="#" class="fa fa-twitter"></a>
 
                     <a href="#" class="fa fa-twitter"></a>
 
@@ -916,7 +922,7 @@
 
                     <a href="#" class="fa fa-pinterest"></a>
 
                     <a href="#" class="fa fa-pinterest"></a>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="footer-section">
 
             <div class="footer-section">
 
                 <h3>Quick Links</h3>
 
                 <h3>Quick Links</h3>
 
                 <ul class="footer-links">
 
                 <ul class="footer-links">
 
@@ -927,7 +933,7 @@
 
                     <li><a href="#">Contact</a></li>
 
                     <li><a href="#">Contact</a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="footer-section">
 
             <div class="footer-section">
 
                 <h3>Support</h3>
 
                 <h3>Support</h3>
 
                 <ul class="footer-links">
 
                 <ul class="footer-links">
 
@@ -938,23 +944,25 @@
 
                     <li><a href="#">Feedback</a></li>
 
                     <li><a href="#">Feedback</a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="footer-section">
 
             <div class="footer-section">
 
                 <h3>Download App</h3>
 
                 <h3>Download App</h3>
 
                 <p>Get our app on your mobile device for the best experience.</p>
 
                 <p>Get our app on your mobile device for the best experience.</p>
 
                 <div class="app-badge-container">
 
                 <div class="app-badge-container">
 
                     <a href="#" class="app-badge">
 
                     <a href="#" class="app-badge">
 
-                        <img src="https://picsum.photos/140/50?random=5" alt="Download on the App Store" style="width:140px">
 
+                        <img src="https://picsum.photos/140/50?random=5" alt="Download on the App Store"
 
+                            style="width:140px">
 
                     </a>
 
                     </a>
 
                     <a href="#" class="app-badge">
 
                     <a href="#" class="app-badge">
 
-                        <img src="https://picsum.photos/140/50?random=6" alt="Get it on Google Play" style="width:140px">
 
+                        <img src="https://picsum.photos/140/50?random=6" alt="Get it on Google Play"
 
+                            style="width:140px">
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <div class="copyright">
 
         <div class="copyright">
 
-            <p>© 2025 Art Number Coloring. All rights reserved.</p>
 
+            <p>© 2025 Art Color. All rights reserved.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
 
 
@@ -962,4 +970,5 @@
 
     <script src="https://cdn.tailwindcss.com"></script>
 
     <script src="https://cdn.tailwindcss.com"></script>
 
     <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
     <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 161 - 131
test/app.html
Vedi File 

@@ -1,10 +1,12 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta name="description" content="Art Number Coloring - The best color by number app with daily updated HD pictures, offline coloring, and easy sharing. Free for everyone!">
 
-    <title>Art Number Coloring - Color by Number App</title>
 
+    <meta name="description"
 
+        content="Art Color - The best color by number app with daily updated HD pictures, offline coloring, and easy sharing. Free for everyone!">
 
+    <title>Art Color - Color by Number App</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -14,26 +16,26 @@
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         .app-header {
 
         .app-header {
 
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 
             color: white;
 
             color: white;
 
@@ -42,7 +44,7 @@
 
             position: relative;
 
             position: relative;
 
             overflow: hidden;
 
             overflow: hidden;
 
         }
 
         }
 
-        
+
 
         .app-header::before {
 
         .app-header::before {
 
             content: '';
 
             content: '';
 
             position: absolute;
 
             position: absolute;
 
@@ -53,55 +55,55 @@
 
             background: var(--background-color);
 
             background: var(--background-color);
 
             clip-path: polygon(0 100%, 100% 100%, 100% 0);
 
             clip-path: polygon(0 100%, 100% 100%, 100% 0);
 
         }
 
         }
 
-        
+
 
         .app-title {
 
         .app-title {
 
             font-size: 2.5rem;
 
             font-size: 2.5rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
         }
 
         }
 
-        
+
 
         .app-subtitle {
 
         .app-subtitle {
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto 40px;
 
             margin: 0 auto 40px;
 
         }
 
         }
 
-        
+
 
         .app-badge-container {
 
         .app-badge-container {
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
             gap: 20px;
 
             gap: 20px;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         .app-badge {
 
         .app-badge {
 
             width: 160px;
 
             width: 160px;
 
             height: auto;
 
             height: auto;
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .app-badge:hover {
 
         .app-badge:hover {
 
             transform: translateY(-5px);
 
             transform: translateY(-5px);
 
         }
 
         }
 
-        
+
 
         .app-features {
 
         .app-features {
 
             padding: 60px 0;
 
             padding: 60px 0;
 
         }
 
         }
 
-        
+
 
         .section-title {
 
         .section-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 2rem;
 
             font-size: 2rem;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .feature-grid {
 
         .feature-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
             gap: 40px;
 
             gap: 40px;
 
         }
 
         }
 
-        
+
 
         .feature-card {
 
         .feature-card {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 15px;
 
             border-radius: 15px;
 
@@ -110,11 +112,11 @@
 
             text-align: center;
 
             text-align: center;
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .feature-card:hover {
 
         .feature-card:hover {
 
             transform: translateY(-10px);
 
             transform: translateY(-10px);
 
         }
 
         }
 
-        
+
 
         .feature-icon {
 
         .feature-icon {
 
             width: 80px;
 
             width: 80px;
 
             height: 80px;
 
             height: 80px;
 
@@ -125,76 +127,78 @@
 
             align-items: center;
 
             align-items: center;
 
             margin: 0 auto 20px;
 
             margin: 0 auto 20px;
 
         }
 
         }
 
-        
+
 
         .feature-icon i {
 
         .feature-icon i {
 
             font-size: 2.5rem;
 
             font-size: 2.5rem;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .feature-title {
 
         .feature-title {
 
             font-size: 1.3rem;
 
             font-size: 1.3rem;
 
             font-weight: 600;
 
             font-weight: 600;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .feature-desc {
 
         .feature-desc {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .app-screenshots {
 
         .app-screenshots {
 
             padding: 60px 0;
 
             padding: 60px 0;
 
             background-color: white;
 
             background-color: white;
 
         }
 
         }
 
-        
+
 
         .screenshot-grid {
 
         .screenshot-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
             gap: 20px;
 
             gap: 20px;
 
             margin-top: 40px;
 
             margin-top: 40px;
 
         }
 
         }
 
-        
+
 
         .screenshot {
 
         .screenshot {
 
             border-radius: 15px;
 
             border-radius: 15px;
 
             overflow: hidden;
 
             overflow: hidden;
 
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .screenshot:hover {
 
         .screenshot:hover {
 
             transform: scale(1.03);
 
             transform: scale(1.03);
 
         }
 
         }
 
-        
+
 
         .screenshot img {
 
         .screenshot img {
 
             width: 100%;
 
             width: 100%;
 
             height: auto;
 
             height: auto;
 
             object-fit: cover;
 
             object-fit: cover;
 
         }
 
         }
 
-        
+
 
         /* 视频展示区域样式 */
 
         /* 视频展示区域样式 */
 
         .app-video {
 
         .app-video {
 
             padding: 60px 0;
 
             padding: 60px 0;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .video-container {
 
         .video-container {
 
             position: relative;
 
             position: relative;
 
             display: inline-block;
 
             display: inline-block;
 
-            max-width: 300px; /* 竖版视频宽度 */
 
+            max-width: 300px;
 
+            /* 竖版视频宽度 */
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         .video-wrapper {
 
         .video-wrapper {
 
             position: relative;
 
             position: relative;
 
             width: 100%;
 
             width: 100%;
 
             height: 0;
 
             height: 0;
 
-            padding-bottom: 177.78%; /* 竖版视频比例 9:16 */
 
+            padding-bottom: 177.78%;
 
+            /* 竖版视频比例 9:16 */
 
             background-color: #000;
 
             background-color: #000;
 
             border-radius: 20px;
 
             border-radius: 20px;
 
             overflow: hidden;
 
             overflow: hidden;
 
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 
         }
 
         }
 
-        
+
 
         .video-wrapper video {
 
         .video-wrapper video {
 
             position: absolute;
 
             position: absolute;
 
             top: 0;
 
             top: 0;
 
@@ -202,10 +206,11 @@
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
-            opacity: 0; /* 初始隐藏视频，加载完成后显示 */
 
+            opacity: 0;
 
+            /* 初始隐藏视频，加载完成后显示 */
 
             transition: opacity 0.3s ease;
 
             transition: opacity 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .play-button {
 
         .play-button {
 
             position: absolute;
 
             position: absolute;
 
             top: 50%;
 
             top: 50%;
 
@@ -222,12 +227,12 @@
 
             z-index: 10;
 
             z-index: 10;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .play-button:hover {
 
         .play-button:hover {
 
             background-color: rgba(255, 107, 107, 1);
 
             background-color: rgba(255, 107, 107, 1);
 
             transform: translate(-50%, -50%) scale(1.1);
 
             transform: translate(-50%, -50%) scale(1.1);
 
         }
 
         }
 
-        
+
 
         .play-button::after {
 
         .play-button::after {
 
             content: '';
 
             content: '';
 
             width: 0;
 
             width: 0;
 
@@ -237,7 +242,7 @@
 
             border-left: 20px solid white;
 
             border-left: 20px solid white;
 
             margin-left: 5px;
 
             margin-left: 5px;
 
         }
 
         }
 
-        
+
 
         /* 视频加载指示器 */
 
         /* 视频加载指示器 */
 
         .video-loading {
 
         .video-loading {
 
             position: absolute;
 
             position: absolute;
 
@@ -248,7 +253,7 @@
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             z-index: 5;
 
             z-index: 5;
 
         }
 
         }
 
-        
+
 
         /* 视频加载失败提示 */
 
         /* 视频加载失败提示 */
 
         .video-error {
 
         .video-error {
 
             position: absolute;
 
             position: absolute;
 
@@ -262,17 +267,17 @@
 
             display: none;
 
             display: none;
 
             z-index: 5;
 
             z-index: 5;
 
         }
 
         }
 
-        
+
 
         .app-testimonials {
 
         .app-testimonials {
 
             padding: 60px 0;
 
             padding: 60px 0;
 
         }
 
         }
 
-        
+
 
         .testimonial-grid {
 
         .testimonial-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
             gap: 30px;
 
             gap: 30px;
 
         }
 
         }
 
-        
+
 
         .testimonial-card {
 
         .testimonial-card {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 15px;
 
             border-radius: 15px;
 
@@ -280,17 +285,17 @@
 
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .testimonial-text {
 
         .testimonial-text {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .testimonial-author {
 
         .testimonial-author {
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .author-avatar {
 
         .author-avatar {
 
             width: 50px;
 
             width: 50px;
 
             height: 50px;
 
             height: 50px;
 
@@ -298,35 +303,35 @@
 
             overflow: hidden;
 
             overflow: hidden;
 
             margin-right: 15px;
 
             margin-right: 15px;
 
         }
 
         }
 
-        
+
 
         .author-avatar img {
 
         .author-avatar img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
         }
 
         }
 
-        
+
 
         .author-info {
 
         .author-info {
 
             font-weight: 600;
 
             font-weight: 600;
 
         }
 
         }
 
-        
+
 
         /* FAQ部分样式 */
 
         /* FAQ部分样式 */
 
         .app-faq {
 
         .app-faq {
 
             padding: 60px 0;
 
             padding: 60px 0;
 
             background-color: white;
 
             background-color: white;
 
         }
 
         }
 
-        
+
 
         .faq-container {
 
         .faq-container {
 
             max-width: 800px;
 
             max-width: 800px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         .faq-item {
 
         .faq-item {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             overflow: hidden;
 
             overflow: hidden;
 
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 
         }
 
         }
 
-        
+
 
         .faq-question {
 
         .faq-question {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             padding: 20px;
 
             padding: 20px;
 
@@ -336,22 +341,22 @@
 
             align-items: center;
 
             align-items: center;
 
             transition: background-color 0.3s ease;
 
             transition: background-color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-question:hover {
 
         .faq-question:hover {
 
             background-color: rgba(255, 107, 107, 0.05);
 
             background-color: rgba(255, 107, 107, 0.05);
 
         }
 
         }
 
-        
+
 
         .faq-question h3 {
 
         .faq-question h3 {
 
             font-size: 1.1rem;
 
             font-size: 1.1rem;
 
             font-weight: 600;
 
             font-weight: 600;
 
             color: var(--text-color);
 
             color: var(--text-color);
 
         }
 
         }
 
-        
+
 
         .faq-question i {
 
         .faq-question i {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-answer {
 
         .faq-answer {
 
             background-color: white;
 
             background-color: white;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
@@ -359,25 +364,25 @@
 
             overflow: hidden;
 
             overflow: hidden;
 
             transition: max-height 0.3s ease, padding 0.3s ease;
 
             transition: max-height 0.3s ease, padding 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-answer p {
 
         .faq-answer p {
 
             padding: 20px 0;
 
             padding: 20px 0;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .faq-item.active .faq-question {
 
         .faq-item.active .faq-question {
 
             background-color: rgba(255, 107, 107, 0.1);
 
             background-color: rgba(255, 107, 107, 0.1);
 
         }
 
         }
 
-        
+
 
         .faq-item.active .faq-question i {
 
         .faq-item.active .faq-question i {
 
             transform: rotate(180deg);
 
             transform: rotate(180deg);
 
         }
 
         }
 
-        
+
 
         .faq-item.active .faq-answer {
 
         .faq-item.active .faq-answer {
 
             max-height: 500px;
 
             max-height: 500px;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         .app-download {
 
         .app-download {
 
             background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
 
             background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
 
             color: white;
 
             color: white;
 
@@ -385,102 +390,105 @@
 
             text-align: center;
 
             text-align: center;
 
             margin-top: 60px;
 
             margin-top: 60px;
 
         }
 
         }
 
-        
+
 
         .download-title {
 
         .download-title {
 
             font-size: 2rem;
 
             font-size: 2rem;
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
         }
 
         }
 
-        
+
 
         .download-subtitle {
 
         .download-subtitle {
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto 40px;
 
             margin: 0 auto 40px;
 
         }
 
         }
 
-        
+
 
         .app-stats {
 
         .app-stats {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 
             gap: 20px;
 
             gap: 20px;
 
             margin: 40px 0;
 
             margin: 40px 0;
 
         }
 
         }
 
-        
+
 
         .stat-item {
 
         .stat-item {
 
             padding: 20px;
 
             padding: 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .stat-number {
 
         .stat-number {
 
             font-size: 2.5rem;
 
             font-size: 2.5rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .stat-label {
 
         .stat-label {
 
             font-size: 1rem;
 
             font-size: 1rem;
 
             color: rgba(255, 255, 255, 0.8);
 
             color: rgba(255, 255, 255, 0.8);
 
         }
 
         }
 
-        
+
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
             color: white;
 
             color: white;
 
             text-align: center;
 
             text-align: center;
 
             padding: 30px 0;
 
             padding: 30px 0;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .app-title {
 
             .app-title {
 
                 font-size: 2rem;
 
                 font-size: 2rem;
 
             }
 
             }
 
-            
+
 
             .app-subtitle {
 
             .app-subtitle {
 
                 font-size: 1rem;
 
                 font-size: 1rem;
 
             }
 
             }
 
-            
+
 
             .app-badge {
 
             .app-badge {
 
                 width: 140px;
 
                 width: 140px;
 
             }
 
             }
 
-            
+
 
             .section-title {
 
             .section-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
-            .feature-grid, .testimonial-grid, .screenshot-grid {
 
+
 
+            .feature-grid,
 
+            .testimonial-grid,
 
+            .screenshot-grid {
 
                 grid-template-columns: 1fr;
 
                 grid-template-columns: 1fr;
 
             }
 
             }
 
-            
+
 
             .download-title {
 
             .download-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .download-subtitle {
 
             .download-subtitle {
 
                 font-size: 1rem;
 
                 font-size: 1rem;
 
             }
 
             }
 
-            
+
 
             .stat-number {
 
             .stat-number {
 
                 font-size: 2rem;
 
                 font-size: 2rem;
 
             }
 
             }
 
-            
+
 
             .video-container {
 
             .video-container {
 
                 max-width: 250px;
 
                 max-width: 250px;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <!-- APP 头部 -->
 
     <!-- APP 头部 -->
 
     <div class="app-header">
 
     <div class="app-header">
 
         <div class="container">
 
         <div class="container">
 
-            <div class="app-title">🎨 Art Number Coloring - Color by Number 🎨</div>
 
+            <div class="app-title">🎨 Art Color - Color by Number 🎨</div>
 
             <div class="app-subtitle">
 
             <div class="app-subtitle">
 
-                is one of the best paint by number coloring book with various categories of coloring pages. 
-                Coloring Pages are update everyday, you can always find images suite to you. 
-                It is 💯 Free! We offer this free coloring book as a color therapy to release your stress. 
+                is one of the best paint by number coloring book with various categories of coloring pages.
 
+                Coloring Pages are update everyday, you can always find images suite to you.
 
+                It is 💯 Free! We offer this free coloring book as a color therapy to release your stress.
 
                 Share your artworks to your friends and color anytime & anywhere.
 
                 Share your artworks to your friends and color anytime & anywhere.
 
             </div>
 
             </div>
 
             <div class="app-badge-container">
 
             <div class="app-badge-container">
 
@@ -493,7 +501,7 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <!-- APP 特性 -->
 
     <!-- APP 特性 -->
 
     <div class="app-features container">
 
     <div class="app-features container">
 
         <h2 class="section-title">Why Choose Our App?</h2>
 
         <h2 class="section-title">Why Choose Our App?</h2>
 
@@ -504,56 +512,62 @@
 
                     <i class="fa fa-paint-brush"></i>
 
                     <i class="fa fa-paint-brush"></i>
 
                 </div>
 
                 </div>
 
                 <h3 class="feature-title">Great Coloring Experience</h3>
 
                 <h3 class="feature-title">Great Coloring Experience</h3>
 
-                <p class="feature-desc">Enjoy a smooth and intuitive coloring experience with our advanced number coloring system.</p>
 
+                <p class="feature-desc">Enjoy a smooth and intuitive coloring experience with our advanced number
 
+                    coloring system.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <!-- 特性2 -->
 
             <!-- 特性2 -->
 
             <div class="feature-card">
 
             <div class="feature-card">
 
                 <div class="feature-icon">
 
                 <div class="feature-icon">
 
                     <i class="fa fa-image"></i>
 
                     <i class="fa fa-image"></i>
 
                 </div>
 
                 </div>
 
                 <h3 class="feature-title">Massive HD Pictures</h3>
 
                 <h3 class="feature-title">Massive HD Pictures</h3>
 
-                <p class="feature-desc">Explore thousands of high-definition coloring pages across various themes and categories.</p>
 
+                <p class="feature-desc">Explore thousands of high-definition coloring pages across various themes and
 
+                    categories.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <!-- 特性3 -->
 
             <!-- 特性3 -->
 
             <div class="feature-card">
 
             <div class="feature-card">
 
                 <div class="feature-icon">
 
                 <div class="feature-icon">
 
                     <i class="fa fa-refresh"></i>
 
                     <i class="fa fa-refresh"></i>
 
                 </div>
 
                 </div>
 
                 <h3 class="feature-title">Daily Updated Gallery</h3>
 
                 <h3 class="feature-title">Daily Updated Gallery</h3>
 
-                <p class="feature-desc">Our gallery is updated daily with new and exciting coloring pages to keep you inspired.</p>
 
+                <p class="feature-desc">Our gallery is updated daily with new and exciting coloring pages to keep you
 
+                    inspired.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <!-- 特性4 -->
 
             <!-- 特性4 -->
 
             <div class="feature-card">
 
             <div class="feature-card">
 
                 <div class="feature-icon">
 
                 <div class="feature-icon">
 
                     <i class="fa fa-share-alt"></i>
 
                     <i class="fa fa-share-alt"></i>
 
                 </div>
 
                 </div>
 
                 <h3 class="feature-title">Easy Sharing</h3>
 
                 <h3 class="feature-title">Easy Sharing</h3>
 
-                <p class="feature-desc">Share your masterpieces with friends and family directly from the app to social media.</p>
 
+                <p class="feature-desc">Share your masterpieces with friends and family directly from the app to social
 
+                    media.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <!-- 特性5 -->
 
             <!-- 特性5 -->
 
             <div class="feature-card">
 
             <div class="feature-card">
 
                 <div class="feature-icon">
 
                 <div class="feature-icon">
 
                     <i class="fa fa-wifi"></i>
 
                     <i class="fa fa-wifi"></i>
 
                 </div>
 
                 </div>
 
                 <h3 class="feature-title">Offline Coloring</h3>
 
                 <h3 class="feature-title">Offline Coloring</h3>
 
-                <p class="feature-desc">Download your favorite coloring pages and enjoy them offline anytime, anywhere.</p>
 
+                <p class="feature-desc">Download your favorite coloring pages and enjoy them offline anytime, anywhere.
 
+                </p>
 
             </div>
 
             </div>
 
-            
+
 
             <!-- 特性6 -->
 
             <!-- 特性6 -->
 
             <div class="feature-card">
 
             <div class="feature-card">
 
                 <div class="feature-icon">
 
                 <div class="feature-icon">
 
                     <i class="fa fa-palette"></i>
 
                     <i class="fa fa-palette"></i>
 
                 </div>
 
                 </div>
 
                 <h3 class="feature-title">Free & Relaxing</h3>
 
                 <h3 class="feature-title">Free & Relaxing</h3>
 
-                <p class="feature-desc">Completely free with no hidden costs. A great way to relax and reduce stress.</p>
 
+                <p class="feature-desc">Completely free with no hidden costs. A great way to relax and reduce stress.
 
+                </p>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <!-- APP 截图 -->
 
     <!-- APP 截图 -->
 
     <div class="app-screenshots">
 
     <div class="app-screenshots">
 
         <div class="container">
 
         <div class="container">
 
@@ -574,7 +588,7 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <!-- 视频展示区域 -->
 
     <!-- 视频展示区域 -->
 
     <div class="app-video container">
 
     <div class="app-video container">
 
         <h2 class="section-title">Watch Our App in Action</h2>
 
         <h2 class="section-title">Watch Our App in Action</h2>
 
@@ -595,7 +609,7 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <!-- 用户评价 -->
 
     <!-- 用户评价 -->
 
     <div class="app-testimonials container">
 
     <div class="app-testimonials container">
 
         <h2 class="section-title">What Our Users Say</h2>
 
         <h2 class="section-title">What Our Users Say</h2>
 
@@ -603,7 +617,8 @@
 
             <!-- 评价1 -->
 
             <!-- 评价1 -->
 
             <div class="testimonial-card">
 
             <div class="testimonial-card">
 
                 <div class="testimonial-text">
 
                 <div class="testimonial-text">
 
-                    "This app is amazing! The quality of the coloring pages is outstanding, and I love that new ones are added daily. It's so relaxing after a long day at work."
 
+                    "This app is amazing! The quality of the coloring pages is outstanding, and I love that new ones are
 
+                    added daily. It's so relaxing after a long day at work."
 
                 </div>
 
                 </div>
 
                 <div class="testimonial-author">
 
                 <div class="testimonial-author">
 
                     <div class="author-avatar">
 
                     <div class="author-avatar">
 
@@ -612,11 +627,12 @@
 
                     <div class="author-info">Sarah Johnson</div>
 
                     <div class="author-info">Sarah Johnson</div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <!-- 评价2 -->
 
             <!-- 评价2 -->
 
             <div class="testimonial-card">
 
             <div class="testimonial-card">
 
                 <div class="testimonial-text">
 
                 <div class="testimonial-text">
 
-                    "My kids absolutely love this app! The offline feature is perfect for long car rides, and they've learned so much about colors and numbers while having fun."
 
+                    "My kids absolutely love this app! The offline feature is perfect for long car rides, and they've
 
+                    learned so much about colors and numbers while having fun."
 
                 </div>
 
                 </div>
 
                 <div class="testimonial-author">
 
                 <div class="testimonial-author">
 
                     <div class="author-avatar">
 
                     <div class="author-avatar">
 
@@ -625,11 +641,12 @@
 
                     <div class="author-info">Michael Chen</div>
 
                     <div class="author-info">Michael Chen</div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <!-- 评价3 -->
 
             <!-- 评价3 -->
 
             <div class="testimonial-card">
 
             <div class="testimonial-card">
 
                 <div class="testimonial-text">
 
                 <div class="testimonial-text">
 
-                    "I've tried many coloring apps, but this one is by far the best. The interface is intuitive, the colors are vibrant, and sharing my artwork is so easy!"
 
+                    "I've tried many coloring apps, but this one is by far the best. The interface is intuitive, the
 
+                    colors are vibrant, and sharing my artwork is so easy!"
 
                 </div>
 
                 </div>
 
                 <div class="testimonial-author">
 
                 <div class="testimonial-author">
 
                     <div class="author-avatar">
 
                     <div class="author-avatar">
 
@@ -640,7 +657,7 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <!-- FAQ部分 -->
 
     <!-- FAQ部分 -->
 
     <div class="app-faq">
 
     <div class="app-faq">
 
         <div class="container">
 
         <div class="container">
 
@@ -648,73 +665,85 @@
 
             <div class="faq-container">
 
             <div class="faq-container">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                     <div class="faq-question">
 
                     <div class="faq-question">
 
-                        <h3>Is Art Number Coloring really free?</h3>
 
+                        <h3>Is Art Color really free?</h3>
 
                         <i class="fa fa-chevron-down"></i>
 
                         <i class="fa fa-chevron-down"></i>
 
                     </div>
 
                     </div>
 
                     <div class="faq-answer">
 
                     <div class="faq-answer">
 
-                        <p>Yes! Art Number Coloring is completely free to download and use. There are no hidden costs or subscriptions required. You can color as many pictures as you like without any limitations.</p>
 
+                        <p>Yes! Art Color is completely free to download and use. There are no hidden costs or
 
+                            subscriptions required. You can color as many pictures as you like without any limitations.
 
+                        </p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                     <div class="faq-question">
 
                     <div class="faq-question">
 
                         <h3>Do I need an internet connection to use the app?</h3>
 
                         <h3>Do I need an internet connection to use the app?</h3>
 
                         <i class="fa fa-chevron-down"></i>
 
                         <i class="fa fa-chevron-down"></i>
 
                     </div>
 
                     </div>
 
                     <div class="faq-answer">
 
                     <div class="faq-answer">
 
-                        <p>You need an internet connection to download the app and access new coloring pages. However, once you've downloaded a coloring page, you can color it offline anytime without an internet connection.</p>
 
+                        <p>You need an internet connection to download the app and access new coloring pages. However,
 
+                            once you've downloaded a coloring page, you can color it offline anytime without an internet
 
+                            connection.</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                     <div class="faq-question">
 
                     <div class="faq-question">
 
                         <h3>How often are new coloring pages added?</h3>
 
                         <h3>How often are new coloring pages added?</h3>
 
                         <i class="fa fa-chevron-down"></i>
 
                         <i class="fa fa-chevron-down"></i>
 
                     </div>
 
                     </div>
 
                     <div class="faq-answer">
 
                     <div class="faq-answer">
 
-                        <p>We add new coloring pages to our gallery every day! Our team works hard to create a wide variety of designs across different themes to keep our users inspired and engaged.</p>
 
+                        <p>We add new coloring pages to our gallery every day! Our team works hard to create a wide
 
+                            variety of designs across different themes to keep our users inspired and engaged.</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                     <div class="faq-question">
 
                     <div class="faq-question">
 
                         <h3>Can I share my colored pictures with friends?</h3>
 
                         <h3>Can I share my colored pictures with friends?</h3>
 
                         <i class="fa fa-chevron-down"></i>
 
                         <i class="fa fa-chevron-down"></i>
 
                     </div>
 
                     </div>
 
                     <div class="faq-answer">
 
                     <div class="faq-answer">
 
-                        <p>Absolutely! You can easily share your completed artwork with friends and family through social media platforms, messaging apps, or email directly from the app. Your creations also save to your device's photo gallery.</p>
 
+                        <p>Absolutely! You can easily share your completed artwork with friends and family through
 
+                            social media platforms, messaging apps, or email directly from the app. Your creations also
 
+                            save to your device's photo gallery.</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                     <div class="faq-question">
 
                     <div class="faq-question">
 
-                        <h3>Is Art Number Coloring suitable for kids?</h3>
 
+                        <h3>Is Art Color suitable for kids?</h3>
 
                         <i class="fa fa-chevron-down"></i>
 
                         <i class="fa fa-chevron-down"></i>
 
                     </div>
 
                     </div>
 
                     <div class="faq-answer">
 
                     <div class="faq-answer">
 
-                        <p>Yes! Our app is designed to be kid-friendly and is a great way for children to learn about colors, numbers, and develop their creativity. We have many coloring pages specifically designed for children of all ages.</p>
 
+                        <p>Yes! Our app is designed to be kid-friendly and is a great way for children to learn about
 
+                            colors, numbers, and develop their creativity. We have many coloring pages specifically
 
+                            designed for children of all ages.</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                     <div class="faq-question">
 
                     <div class="faq-question">
 
                         <h3>How do I download coloring pages for offline use?</h3>
 
                         <h3>How do I download coloring pages for offline use?</h3>
 
                         <i class="fa fa-chevron-down"></i>
 
                         <i class="fa fa-chevron-down"></i>
 
                     </div>
 
                     </div>
 
                     <div class="faq-answer">
 
                     <div class="faq-answer">
 
-                        <p>Simply browse our gallery, find a coloring page you like, and tap the download icon. The page will be saved to your device, and you can access it anytime from your "My Downloads" section, even without an internet connection.</p>
 
+                        <p>Simply browse our gallery, find a coloring page you like, and tap the download icon. The page
 
+                            will be saved to your device, and you can access it anytime from your "My Downloads"
 
+                            section, even without an internet connection.</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <!-- 下载区域 -->
 
     <!-- 下载区域 -->
 
     <div class="app-download">
 
     <div class="app-download">
 
         <div class="container">
 
         <div class="container">
 
-            <h2 class="download-title">Download Art Number Coloring Today!</h2>
 
-            <p class="download-subtitle">Join thousands of happy users who have discovered the joy of coloring with numbers.</p>
 
-            
+            <h2 class="download-title">Download Art Color Today!</h2>
 
+            <p class="download-subtitle">Join thousands of happy users who have discovered the joy of coloring with
 
+                numbers.</p>
 
+
 
             <div class="app-stats">
 
             <div class="app-stats">
 
                 <div class="stat-item">
 
                 <div class="stat-item">
 
                     <div class="stat-number">100K+</div>
 
                     <div class="stat-number">100K+</div>
 
@@ -733,7 +762,7 @@
 
                     <div class="stat-label">Countries</div>
 
                     <div class="stat-label">Countries</div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="app-badge-container">
 
             <div class="app-badge-container">
 
                 <a href="#" class="app-badge">
 
                 <a href="#" class="app-badge">
 
                     <img src="https://picsum.photos/200/60?random=3" alt="Download on the App Store" style="width:100%">
 
                     <img src="https://picsum.photos/200/60?random=3" alt="Download on the App Store" style="width:100%">
 
@@ -744,11 +773,11 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <!-- 页脚 -->
 
     <!-- 页脚 -->
 
     <footer>
 
     <footer>
 
         <div class="container footer-content">
 
         <div class="container footer-content">
 
-            <p>Art Number Coloring - The Best Color by Number App</p>
 
+            <p>Art Color - The Best Color by Number App</p>
 
             <p>© 2025 All Rights Reserved</p>
 
             <p>© 2025 All Rights Reserved</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
@@ -756,26 +785,26 @@
 
     <!-- 字体图标库 -->
 
     <!-- 字体图标库 -->
 
     <script src="https://cdn.tailwindcss.com"></script>
 
     <script src="https://cdn.tailwindcss.com"></script>
 
     <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
     <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
-    
+
 
     <script>
 
     <script>
 
         // 视频控制
 
         // 视频控制
 
         const video = document.getElementById('appVideo');
 
         const video = document.getElementById('appVideo');
 
         const playButton = document.querySelector('.play-button');
 
         const playButton = document.querySelector('.play-button');
 
         const loadingIndicator = document.querySelector('.video-loading');
 
         const loadingIndicator = document.querySelector('.video-loading');
 
         const errorMessage = document.querySelector('.video-error');
 
         const errorMessage = document.querySelector('.video-error');
 
-        
+
 
         // 视频加载完成后显示
 
         // 视频加载完成后显示
 
-        video.addEventListener('loadeddata', function() {
 
+        video.addEventListener('loadeddata', function () {
 
             video.style.opacity = '1';
 
             video.style.opacity = '1';
 
             loadingIndicator.style.display = 'none';
 
             loadingIndicator.style.display = 'none';
 
         });
 
         });
 
-        
+
 
         // 视频加载失败处理
 
         // 视频加载失败处理
 
-        video.addEventListener('error', function() {
 
+        video.addEventListener('error', function () {
 
             loadingIndicator.style.display = 'none';
 
             loadingIndicator.style.display = 'none';
 
             errorMessage.style.display = 'block';
 
             errorMessage.style.display = 'block';
 
         });
 
         });
 
-        
+
 
         // 视频播放/暂停控制
 
         // 视频播放/暂停控制
 
         function toggleVideo() {
 
         function toggleVideo() {
 
             if (video.paused) {
 
             if (video.paused) {
 
@@ -792,16 +821,16 @@
 
                 playButton.style.display = 'flex';
 
                 playButton.style.display = 'flex';
 
             }
 
             }
 
         }
 
         }
 
-        
+
 
         // FAQ 折叠面板控制
 
         // FAQ 折叠面板控制
 
         function toggleFaq(item) {
 
         function toggleFaq(item) {
 
             const isActive = item.classList.contains('active');
 
             const isActive = item.classList.contains('active');
 
-            
+
 
             // 关闭所有FAQ项
 
             // 关闭所有FAQ项
 
             document.querySelectorAll('.faq-item').forEach(el => {
 
             document.querySelectorAll('.faq-item').forEach(el => {
 
                 el.classList.remove('active');
 
                 el.classList.remove('active');
 
             });
 
             });
 
-            
+
 
             // 切换当前FAQ项
 
             // 切换当前FAQ项
 
             if (!isActive) {
 
             if (!isActive) {
 
                 item.classList.add('active');
 
                 item.classList.add('active');
 
@@ -809,4 +838,5 @@
 
         }
 
         }
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 2 - 2
test/appsection.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Art Number Coloring - App Tutorial Section</title>
 
+  <title>Art Color - App Tutorial Section</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -205,7 +205,7 @@
 
           <div class="step">
 
           <div class="step">
 
             <div class="step-number">1</div>
 
             <div class="step-number">1</div>
 
             <div class="step-title">Download the App</div>
 
             <div class="step-title">Download the App</div>
 
-            <div class="step-desc">Visit your device's app store and search for "Art Number Coloring". Click download to
 
+            <div class="step-desc">Visit your device's app store and search for "Art Color". Click download to
 
               install the app on your phone or tablet.</div>
 
               install the app on your phone or tablet.</div>
 
           </div>
 
           </div>

+ 3 - 3
test/benifit.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>The Benefits of Coloring Pages - Art Number Coloring</title>
 
+  <title>The Benefits of Coloring Pages - Art Color</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -260,7 +260,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -398,7 +398,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 3 - 3
test/choosing-coloring-tools.html
Vedi File 

@@ -6,7 +6,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="description"
 
   <meta name="description"
 
     content="Discover how to choose the perfect coloring tools for your projects and keep them in top condition. Expert tips for beginners and advanced colorists.">
 
     content="Discover how to choose the perfect coloring tools for your projects and keep them in top condition. Expert tips for beginners and advanced colorists.">
 
-  <title>Choosing and Caring for Your Coloring Tools - Art Number Coloring</title>
 
+  <title>Choosing and Caring for Your Coloring Tools - Art Color</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -262,7 +262,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -430,7 +430,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 167 - 119
test/color-combinations-guide.html
Vedi File 

@@ -1,10 +1,12 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta name="description" content="Master color combinations for coloring pages with expert tips on complementary, analogous, and monochromatic schemes. Transform your artwork with harmonious color palettes.">
 
-    <title>Color Combinations That Work: A Complete Guide for Colorists - Art Number Coloring</title>
 
+    <meta name="description"
 
+        content="Master color combinations for coloring pages with expert tips on complementary, analogous, and monochromatic schemes. Transform your artwork with harmonious color palettes.">
 
+    <title>Color Combinations That Work: A Complete Guide for Colorists - Art Color</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -13,28 +15,29 @@
 
             --background-color: #f9f9f9;
 
             --background-color: #f9f9f9;
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
-            --online-color: #7b68ee; /* 在线填色功能专属色 */
 
+            --online-color: #7b68ee;
 
+            /* 在线填色功能专属色 */
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         header {
 
         header {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
@@ -42,35 +45,35 @@
 
             text-align: center;
 
             text-align: center;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .header-logo {
 
         .header-logo {
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
         }
 
         }
 
-        
+
 
         .breadcrumb {
 
         .breadcrumb {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .breadcrumb a {
 
         .breadcrumb a {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
 
-        
+
 
         .breadcrumb a:hover {
 
         .breadcrumb a:hover {
 
             text-decoration: underline;
 
             text-decoration: underline;
 
         }
 
         }
 
-        
+
 
         .page-title {
 
         .page-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-content {
 
         .blog-content {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -78,18 +81,18 @@
 
             padding: 40px;
 
             padding: 40px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .blog-meta {
 
         .blog-meta {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-meta span {
 
         .blog-meta span {
 
             margin: 0 10px;
 
             margin: 0 10px;
 
         }
 
         }
 
-        
+
 
         .blog-image {
 
         .blog-image {
 
             width: 100%;
 
             width: 100%;
 
             max-height: 400px;
 
             max-height: 400px;
 
@@ -97,27 +100,27 @@
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
         }
 
         }
 
-        
+
 
         .blog-content h2 {
 
         .blog-content h2 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 1.7rem;
 
             font-size: 1.7rem;
 
             margin: 30px 0 15px;
 
             margin: 30px 0 15px;
 
         }
 
         }
 
-        
+
 
         .blog-content p {
 
         .blog-content p {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             line-height: 1.7;
 
             line-height: 1.7;
 
         }
 
         }
 
-        
+
 
         .blog-content ul {
 
         .blog-content ul {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             padding-left: 40px;
 
             padding-left: 40px;
 
         }
 
         }
 
-        
+
 
         .blog-content li {
 
         .blog-content li {
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .cta-box {
 
         .cta-box {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -125,13 +128,13 @@
 
             margin: 40px 0;
 
             margin: 40px 0;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .cta-box h3 {
 
         .cta-box h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .cta-btn {
 
         .cta-btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
@@ -143,7 +146,7 @@
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
             margin: 15px 10px 0;
 
             margin: 15px 10px 0;
 
         }
 
         }
 
-        
+
 
         .cta-btn:hover {
 
         .cta-btn:hover {
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
         }
 
         }
 
@@ -160,12 +163,12 @@
 
             margin: 15px 10px 0;
 
             margin: 15px 10px 0;
 
             box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
 
             box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
 
         }
 
         }
 
-        
+
 
         .online-cta-btn:hover {
 
         .online-cta-btn:hover {
 
             background-color: #6a5acd;
 
             background-color: #6a5acd;
 
             transform: translateY(-2px);
 
             transform: translateY(-2px);
 
         }
 
         }
 
-        
+
 
         .color-comparison {
 
         .color-comparison {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: 1fr 1fr;
 
             grid-template-columns: 1fr 1fr;
 
@@ -175,46 +178,46 @@
 
             padding: 20px;
 
             padding: 20px;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
         }
 
         }
 
-        
+
 
         .comparison-item {
 
         .comparison-item {
 
             text-align: center;
 
             text-align: center;
 
             padding: 15px;
 
             padding: 15px;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
         }
 
         }
 
-        
+
 
         .comparison-title {
 
         .comparison-title {
 
             font-weight: bold;
 
             font-weight: bold;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .comparison-image {
 
         .comparison-image {
 
             max-width: 100%;
 
             max-width: 100%;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 
             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .comparison-image:hover {
 
         .comparison-image:hover {
 
             transform: scale(1.02);
 
             transform: scale(1.02);
 
         }
 
         }
 
-        
+
 
         .related-collections {
 
         .related-collections {
 
             margin-top: 60px;
 
             margin-top: 60px;
 
         }
 
         }
 
-        
+
 
         .related-collections h3 {
 
         .related-collections h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 25px;
 
             margin-bottom: 25px;
 
         }
 
         }
 
-        
+
 
         .collection-grid {
 
         .collection-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 
             gap: 25px;
 
             gap: 25px;
 
         }
 
         }
 
-        
+
 
         .collection-card {
 
         .collection-card {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -224,39 +227,39 @@
 
             text-decoration: none;
 
             text-decoration: none;
 
             display: block;
 
             display: block;
 
         }
 
         }
 
-        
+
 
         .collection-card:hover {
 
         .collection-card:hover {
 
             transform: translateY(-8px);
 
             transform: translateY(-8px);
 
         }
 
         }
 
-        
+
 
         .collection-image {
 
         .collection-image {
 
             height: 180px;
 
             height: 180px;
 
             background-color: #f0f0f0;
 
             background-color: #f0f0f0;
 
             overflow: hidden;
 
             overflow: hidden;
 
         }
 
         }
 
-        
+
 
         .collection-image img {
 
         .collection-image img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
             transition: transform 0.5s ease;
 
             transition: transform 0.5s ease;
 
         }
 
         }
 
-        
+
 
         .collection-card:hover .collection-image img {
 
         .collection-card:hover .collection-image img {
 
             transform: scale(1.05);
 
             transform: scale(1.05);
 
         }
 
         }
 
-        
+
 
         .collection-info {
 
         .collection-info {
 
             padding: 18px;
 
             padding: 18px;
 
         }
 
         }
 
-        
+
 
         .collection-title {
 
         .collection-title {
 
             font-weight: 700;
 
             font-weight: 700;
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .collection-desc {
 
         .collection-desc {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
@@ -274,18 +277,18 @@
 
             margin: 30px 0;
 
             margin: 30px 0;
 
             border-radius: 0 8px 8px 0;
 
             border-radius: 0 8px 8px 0;
 
         }
 
         }
 
-        
+
 
         .online-feature h3 {
 
         .online-feature h3 {
 
             color: var(--online-color);
 
             color: var(--online-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .online-feature h3 svg {
 
         .online-feature h3 svg {
 
             margin-right: 10px;
 
             margin-right: 10px;
 
         }
 
         }
 
-        
+
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
             color: white;
 
             color: white;
 
@@ -293,33 +296,33 @@
 
             padding: 30px 0;
 
             padding: 30px 0;
 
             margin-top: 50px;
 
             margin-top: 50px;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .blog-content {
 
             .blog-content {
 
                 padding: 25px;
 
                 padding: 25px;
 
             }
 
             }
 
-            
+
 
             .blog-content h2 {
 
             .blog-content h2 {
 
                 font-size: 1.5rem;
 
                 font-size: 1.5rem;
 
             }
 
             }
 
-            
+
 
             .cta-box {
 
             .cta-box {
 
                 padding: 25px;
 
                 padding: 25px;
 
             }
 
             }
 
-            
+
 
             .cta-box h3 {
 
             .cta-box h3 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
-            
+
 
             .collection-grid {
 
             .collection-grid {
 
                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
                 gap: 20px;
 
                 gap: 20px;
 
@@ -331,34 +334,45 @@
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
-            <div class="header-logo">Art Number Coloring</div>
 
+            <div class="header-logo">Art Color</div>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <div class="container">
 
     <div class="container">
 
         <div class="breadcrumb">
 
         <div class="breadcrumb">
 
             <a href="/">Home</a> &gt; <a href="/blog">Blog</a> &gt; Color Combinations That Work
 
             <a href="/">Home</a> &gt; <a href="/blog">Blog</a> &gt; Color Combinations That Work
 
         </div>
 
         </div>
 
-        
+
 
         <h1 class="page-title">Color Combinations That Work: A Complete Guide for Colorists</h1>
 
         <h1 class="page-title">Color Combinations That Work: A Complete Guide for Colorists</h1>
 
-        
+
 
         <div class="blog-content">
 
         <div class="blog-content">
 
             <div class="blog-meta">
 
             <div class="blog-meta">
 
                 <span>Posted on July 15, 2025</span>
 
                 <span>Posted on July 15, 2025</span>
 
                 <span>Category: Coloring Tips & Tricks</span>
 
                 <span>Category: Coloring Tips & Tricks</span>
 
             </div>
 
             </div>
 
-            
-            <img src="https://picsum.photos/1200/400?random=303" alt="Color wheel with complementary and analogous color examples" class="blog-image">
 
-          
-            <p>Choosing the right color combinations can transform your coloring pages from ordinary to extraordinary. Whether you're coloring a vibrant mandala, a serene landscape, or a playful animal scene, understanding how colors interact is key to creating harmonious and eye-catching artwork. <strong>Our professional designers have pre-colored thousands of pages with expert color schemes</strong>—explore our online coloring feature to follow guided color palettes with just a few taps!</p>
 
-            
+
 
+            <img src="https://picsum.photos/1200/400?random=303"
 
+                alt="Color wheel with complementary and analogous color examples" class="blog-image">
 
+
 
+            <p>Choosing the right color combinations can transform your coloring pages from ordinary to extraordinary.
 
+                Whether you're coloring a vibrant mandala, a serene landscape, or a playful animal scene, understanding
 
+                how colors interact is key to creating harmonious and eye-catching artwork. <strong>Our professional
 
+                    designers have pre-colored thousands of pages with expert color schemes</strong>—explore our online
 
+                coloring feature to follow guided color palettes with just a few taps!</p>
 
+
 
             <div class="online-feature">
 
             <div class="online-feature">
 
-                <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Try Our Online Coloring Feature</h3>
 
-                <p>Every coloring page on our site comes with a professionally colored example created by our design team. With our online coloring tool, you can:</p>
 
+                <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
 
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Try Our Online Coloring Feature</h3>
 
+                <p>Every coloring page on our site comes with a professionally colored example created by our design
 
+                    team. With our online coloring tool, you can:</p>
 
                 <ul>
 
                 <ul>
 
                     <li>Follow numbered guides to replicate expert color combinations</li>
 
                     <li>Follow numbered guides to replicate expert color combinations</li>
 
                     <li>Experiment with color palettes before printing</li>
 
                     <li>Experiment with color palettes before printing</li>
 
@@ -367,45 +381,63 @@
 
             </div>
 
             </div>
 
 
 
             <h2>The Basics of Color Theory</h2>
 
             <h2>The Basics of Color Theory</h2>
 
-            <p>Before diving into specific color combinations, it's helpful to understand the fundamentals of color theory. The color wheel is a foundational tool that shows the relationships between different colors. It consists of:</p>
 
-            
+            <p>Before diving into specific color combinations, it's helpful to understand the fundamentals of color
 
+                theory. The color wheel is a foundational tool that shows the relationships between different colors. It
 
+                consists of:</p>
 
+
 
             <ul>
 
             <ul>
 
-                <li><strong>Primary Colors:</strong> Red, blue, and yellow—the base colors from which all others are created.</li>
 
-                <li><strong>Secondary Colors:</strong> Orange, green, and purple—formed by mixing two primary colors.</li>
 
-                <li><strong>Tertiary Colors:</strong> Combinations of primary and secondary colors, such as red-orange, blue-green, and yellow-purple.</li>
 
-                <li><strong>Neutral Colors:</strong> Black, white, gray, and brown—often used as accents or to balance bold hues.</li>
 
+                <li><strong>Primary Colors:</strong> Red, blue, and yellow—the base colors from which all others are
 
+                    created.</li>
 
+                <li><strong>Secondary Colors:</strong> Orange, green, and purple—formed by mixing two primary colors.
 
+                </li>
 
+                <li><strong>Tertiary Colors:</strong> Combinations of primary and secondary colors, such as red-orange,
 
+                    blue-green, and yellow-purple.</li>
 
+                <li><strong>Neutral Colors:</strong> Black, white, gray, and brown—often used as accents or to balance
 
+                    bold hues.</li>
 
             </ul>
 
             </ul>
 
-            
-            <p>Understanding these relationships helps you create color combinations that are visually appealing and balanced. Let's explore some of the most popular color schemes and how to use them effectively in your coloring pages.</p>
 
-            
+
 
+            <p>Understanding these relationships helps you create color combinations that are visually appealing and
 
+                balanced. Let's explore some of the most popular color schemes and how to use them effectively in your
 
+                coloring pages.</p>
 
+
 
             <h2>5 Essential Color Schemes for Coloring Pages</h2>
 
             <h2>5 Essential Color Schemes for Coloring Pages</h2>
 
-            
+
 
             <h3>1. Complementary Colors: Bold and Contrasting</h3>
 
             <h3>1. Complementary Colors: Bold and Contrasting</h3>
 
-            <p>Complementary colors sit opposite each other on the color wheel, creating high contrast and visual energy. Examples include:</p>
 
+            <p>Complementary colors sit opposite each other on the color wheel, creating high contrast and visual
 
+                energy. Examples include:</p>
 
             <ul>
 
             <ul>
 
                 <li>Red & Green (perfect for holiday-themed pages)</li>
 
                 <li>Red & Green (perfect for holiday-themed pages)</li>
 
                 <li>Blue & Orange (ideal for ocean or sunset scenes)</li>
 
                 <li>Blue & Orange (ideal for ocean or sunset scenes)</li>
 
                 <li>Yellow & Purple (great for vibrant floral designs)</li>
 
                 <li>Yellow & Purple (great for vibrant floral designs)</li>
 
             </ul>
 
             </ul>
 
-            
-            <p><strong>Pro Tip:</strong> Use one color as the dominant hue and the other as an accent to avoid an overwhelming effect. For example, color a flower primarily purple with yellow centers for a striking contrast.</p>
 
-            
+
 
+            <p><strong>Pro Tip:</strong> Use one color as the dominant hue and the other as an accent to avoid an
 
+                overwhelming effect. For example, color a flower primarily purple with yellow centers for a striking
 
+                contrast.</p>
 
+
 
             <div class="color-comparison">
 
             <div class="color-comparison">
 
                 <div class="comparison-item">
 
                 <div class="comparison-item">
 
                     <div class="comparison-title">Line Art (Before)</div>
 
                     <div class="comparison-title">Line Art (Before)</div>
 
-                    <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5c9b4ad1396d4c5a4ea35efd.webp" alt="Complementary color line art" class="comparison-image">
 
+                    <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5c9b4ad1396d4c5a4ea35efd.webp"
 
+                        alt="Complementary color line art" class="comparison-image">
 
                 </div>
 
                 </div>
 
                 <div class="comparison-item">
 
                 <div class="comparison-item">
 
                     <div class="comparison-title">Colored Example (After)</div>
 
                     <div class="comparison-title">Colored Example (After)</div>
 
-                    <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/5c9b4ad1396d4c5a4ea35efd.webp" alt="Complementary color finished art" class="comparison-image">
 
+                    <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/5c9b4ad1396d4c5a4ea35efd.webp"
 
+                        alt="Complementary color finished art" class="comparison-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
 
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="/play/5c9b4ad1396d4c5a4ea35efd" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Paint This Example Now</a>
 
+                <a href="/play/5c9b4ad1396d4c5a4ea35efd" class="online-cta-btn" target="_blank"><svg
 
+                        xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
 
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Paint This Example Now</a>
 
                 <p>Follow the numbered guide to replicate this complementary color scheme</p>
 
                 <p>Follow the numbered guide to replicate this complementary color scheme</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>2. Analogous Colors: Harmonious and Calming</h3>
 
             <h3>2. Analogous Colors: Harmonious and Calming</h3>
 
             <p>Analogous colors are adjacent on the color wheel, creating a soft, cohesive look. Examples include:</p>
 
             <p>Analogous colors are adjacent on the color wheel, creating a soft, cohesive look. Examples include:</p>
 
             <ul>
 
             <ul>
 
@@ -413,9 +445,10 @@
 
                 <li>Red, Red-Orange, & Orange (perfect for autumn leaves or fire-themed designs)</li>
 
                 <li>Red, Red-Orange, & Orange (perfect for autumn leaves or fire-themed designs)</li>
 
                 <li>Purple, Purple-Pink, & Pink (great for romantic or whimsical pages)</li>
 
                 <li>Purple, Purple-Pink, & Pink (great for romantic or whimsical pages)</li>
 
             </ul>
 
             </ul>
 
-            
-            <p><strong>Pro Tip:</strong> Use a light shade of one color for backgrounds and darker shades of the adjacent colors for details. This creates depth without sacrificing harmony.</p>
 
-            
+
 
+            <p><strong>Pro Tip:</strong> Use a light shade of one color for backgrounds and darker shades of the
 
+                adjacent colors for details. This creates depth without sacrificing harmony.</p>
 
+
 
             <h3>3. Monochromatic Colors: Sophisticated and Elegant</h3>
 
             <h3>3. Monochromatic Colors: Sophisticated and Elegant</h3>
 
             <p>Monochromatic schemes use different shades, tints, and tones of a single color. For example:</p>
 
             <p>Monochromatic schemes use different shades, tints, and tones of a single color. For example:</p>
 
             <ul>
 
             <ul>
 
@@ -423,9 +456,10 @@
 
                 <li>Soft pink, hot pink, and maroon (perfect for floral designs or romantic themes)</li>
 
                 <li>Soft pink, hot pink, and maroon (perfect for floral designs or romantic themes)</li>
 
                 <li>Olive green, forest green, and teal (great for jungle or botanical pages)</li>
 
                 <li>Olive green, forest green, and teal (great for jungle or botanical pages)</li>
 
             </ul>
 
             </ul>
 
-            
-            <p><strong>Pro Tip:</strong> Add a neutral color like white or gray to lighten tints or black to deepen shades. This creates dimension while maintaining a cohesive palette.</p>
 
-            
+
 
+            <p><strong>Pro Tip:</strong> Add a neutral color like white or gray to lighten tints or black to deepen
 
+                shades. This creates dimension while maintaining a cohesive palette.</p>
 
+
 
             <h3>4. Triadic Colors: Balanced and Vibrant</h3>
 
             <h3>4. Triadic Colors: Balanced and Vibrant</h3>
 
             <p>Triadic colors are evenly spaced on the color wheel, forming a triangle. Examples include:</p>
 
             <p>Triadic colors are evenly spaced on the color wheel, forming a triangle. Examples include:</p>
 
             <ul>
 
             <ul>
 
@@ -433,9 +467,10 @@
 
                 <li>Orange, Green, & Purple (secondary triad for whimsical or fantasy pages)</li>
 
                 <li>Orange, Green, & Purple (secondary triad for whimsical or fantasy pages)</li>
 
                 <li>Teal, Magenta, & Gold (tertiary triad for bohemian or artistic styles)</li>
 
                 <li>Teal, Magenta, & Gold (tertiary triad for bohemian or artistic styles)</li>
 
             </ul>
 
             </ul>
 
-            
-            <p><strong>Pro Tip:</strong> Choose one color as the main hue and use the others as accents. For example, color a mandala primarily teal with magenta and gold details.</p>
 
-            
+
 
+            <p><strong>Pro Tip:</strong> Choose one color as the main hue and use the others as accents. For example,
 
+                color a mandala primarily teal with magenta and gold details.</p>
 
+
 
             <h3>5. Split-Complementary Colors: Subtle Contrast</h3>
 
             <h3>5. Split-Complementary Colors: Subtle Contrast</h3>
 
             <p>Split-complementary schemes use a color and the two colors adjacent to its complement. For example:</p>
 
             <p>Split-complementary schemes use a color and the two colors adjacent to its complement. For example:</p>
 
             <ul>
 
             <ul>
 
@@ -443,11 +478,13 @@
 
                 <li>Red (main color) with Blue-Green & Yellow-Green (instead of direct complement green)</li>
 
                 <li>Red (main color) with Blue-Green & Yellow-Green (instead of direct complement green)</li>
 
                 <li>Green (main color) with Red-Violet & Red-Orange (instead of direct complement red)</li>
 
                 <li>Green (main color) with Red-Violet & Red-Orange (instead of direct complement red)</li>
 
             </ul>
 
             </ul>
 
-            
-            <p><strong>Pro Tip:</strong> This scheme offers high contrast without the intensity of traditional complementary colors, making it ideal for detailed designs that need visual interest without overwhelming the eye.</p>
 
-            
+
 
+            <p><strong>Pro Tip:</strong> This scheme offers high contrast without the intensity of traditional
 
+                complementary colors, making it ideal for detailed designs that need visual interest without
 
+                overwhelming the eye.</p>
 
+
 
             <h2>Color Combinations for Different Coloring Themes</h2>
 
             <h2>Color Combinations for Different Coloring Themes</h2>
 
-            
+
 
             <h3>1. Nature and Landscapes</h3>
 
             <h3>1. Nature and Landscapes</h3>
 
             <p>For nature-themed pages, opt for earthy, calming palettes:</p>
 
             <p>For nature-themed pages, opt for earthy, calming palettes:</p>
 
             <ul>
 
             <ul>
 
@@ -455,7 +492,7 @@
 
                 <li>Monochromatic browns with green accents for woodland designs</li>
 
                 <li>Monochromatic browns with green accents for woodland designs</li>
 
                 <li>Warm yellows, oranges, and reds for sunset or autumn landscapes</li>
 
                 <li>Warm yellows, oranges, and reds for sunset or autumn landscapes</li>
 
             </ul>
 
             </ul>
 
-            
+
 
             <h3>2. Floral Designs</h3>
 
             <h3>2. Floral Designs</h3>
 
             <p>Flowers offer endless color possibilities:</p>
 
             <p>Flowers offer endless color possibilities:</p>
 
             <ul>
 
             <ul>
 
@@ -464,7 +501,7 @@
 
                 <li>Blues and purples for unique, fantasy-inspired flowers</li>
 
                 <li>Blues and purples for unique, fantasy-inspired flowers</li>
 
                 <li>Complementary red and green for classic poinsettias</li>
 
                 <li>Complementary red and green for classic poinsettias</li>
 
             </ul>
 
             </ul>
 
-            
+
 
             <h3>3. Mandalas and Abstract Patterns</h3>
 
             <h3>3. Mandalas and Abstract Patterns</h3>
 
             <p>Mandalas are perfect for bold, expressive color choices:</p>
 
             <p>Mandalas are perfect for bold, expressive color choices:</p>
 
             <ul>
 
             <ul>
 
@@ -472,7 +509,7 @@
 
                 <li>Complementary colors for high-contrast, eye-catching designs</li>
 
                 <li>Complementary colors for high-contrast, eye-catching designs</li>
 
                 <li>Monochromatic gradients for sophisticated, modern mandalas</li>
 
                 <li>Monochromatic gradients for sophisticated, modern mandalas</li>
 
             </ul>
 
             </ul>
 
-            
+
 
             <h3>4. Animals and Creatures</h3>
 
             <h3>4. Animals and Creatures</h3>
 
             <p>Bring animals to life with realistic or whimsical colors:</p>
 
             <p>Bring animals to life with realistic or whimsical colors:</p>
 
             <ul>
 
             <ul>
 
@@ -480,41 +517,49 @@
 
                 <li>Playful pinks, purples, and blues for fantasy creatures</li>
 
                 <li>Playful pinks, purples, and blues for fantasy creatures</li>
 
                 <li>Black and white with a pop of color for dramatic effect (e.g., a black cat with green eyes)</li>
 
                 <li>Black and white with a pop of color for dramatic effect (e.g., a black cat with green eyes)</li>
 
             </ul>
 
             </ul>
 
-            
+
 
             <div class="cta-box">
 
             <div class="cta-box">
 
                 <h3>Put Your Color Skills to the Test</h3>
 
                 <h3>Put Your Color Skills to the Test</h3>
 
-                <p>Ready to experiment with color combinations? Explore our gallery of free printable coloring pages, designed to inspire your creativity. From nature scenes to abstract patterns, you'll find the perfect canvas for your color experiments.</p>
 
+                <p>Ready to experiment with color combinations? Explore our gallery of free printable coloring pages,
 
+                    designed to inspire your creativity. From nature scenes to abstract patterns, you'll find the
 
+                    perfect canvas for your color experiments.</p>
 
                 <a href="/coloring-page-gallery" class="cta-btn" target="_blank">Browse Coloring Pages</a>
 
                 <a href="/coloring-page-gallery" class="cta-btn" target="_blank">Browse Coloring Pages</a>
 
                 <a href="/coloring-pages" class="cta-btn" target="_blank">Explore Themed Collections</a>
 
                 <a href="/coloring-pages" class="cta-btn" target="_blank">Explore Themed Collections</a>
 
             </div>
 
             </div>
 
-            
+
 
             <h2>Practical Tips for Applying Color Combinations</h2>
 
             <h2>Practical Tips for Applying Color Combinations</h2>
 
-            
+
 
             <h3>1. Start with a Color Plan</h3>
 
             <h3>1. Start with a Color Plan</h3>
 
-            <p>Before picking up your coloring tools, sketch out a rough color plan. Use a color wheel or online color picker to experiment with combinations before committing to your page.</p>
 
-            
+            <p>Before picking up your coloring tools, sketch out a rough color plan. Use a color wheel or online color
 
+                picker to experiment with combinations before committing to your page.</p>
 
+
 
             <h3>2. Use a Limited Palette</h3>
 
             <h3>2. Use a Limited Palette</h3>
 
-            <p>Limiting your palette to 3-5 main colors helps create a cohesive look. You can always add accents with neutral colors like black, white, or gray.</p>
 
-            
+            <p>Limiting your palette to 3-5 main colors helps create a cohesive look. You can always add accents with
 
+                neutral colors like black, white, or gray.</p>
 
+
 
             <h3>3. Consider the Mood</h3>
 
             <h3>3. Consider the Mood</h3>
 
-            <p>Think about the mood you want to convey. Warm colors (reds, oranges, yellows) evoke energy and happiness, while cool colors (blues, greens, purples) create calm and serenity.</p>
 
-            
+            <p>Think about the mood you want to convey. Warm colors (reds, oranges, yellows) evoke energy and happiness,
 
+                while cool colors (blues, greens, purples) create calm and serenity.</p>
 
+
 
             <h3>4. Pay Attention to Values</h3>
 
             <h3>4. Pay Attention to Values</h3>
 
-            <p>Value refers to the lightness or darkness of a color. Mixing light and dark values creates depth and dimension. For example, use a light blue for sky and a darker blue for shadows.</p>
 
-            
+            <p>Value refers to the lightness or darkness of a color. Mixing light and dark values creates depth and
 
+                dimension. For example, use a light blue for sky and a darker blue for shadows.</p>
 
+
 
             <h3>5. Experiment and Have Fun</h3>
 
             <h3>5. Experiment and Have Fun</h3>
 
-            <p>Don't be afraid to break the rules and experiment with unexpected combinations. The best way to learn is by practicing and discovering what works for you.</p>
 
-            
+            <p>Don't be afraid to break the rules and experiment with unexpected combinations. The best way to learn is
 
+                by practicing and discovering what works for you.</p>
 
+
 
             <h2>Recommended Tools for Perfect Color Combinations</h2>
 
             <h2>Recommended Tools for Perfect Color Combinations</h2>
 
             <p>Invest in high-quality coloring tools to achieve the best results:</p>
 
             <p>Invest in high-quality coloring tools to achieve the best results:</p>
 
             <ul>
 
             <ul>
 
                 <li><strong>Colored Pencils:</strong> Prismacolor, Faber-Castell, or Derwent for smooth blending</li>
 
                 <li><strong>Colored Pencils:</strong> Prismacolor, Faber-Castell, or Derwent for smooth blending</li>
 
                 <li><strong>Markers:</strong> Copic or Tombow for vibrant, consistent color</li>
 
                 <li><strong>Markers:</strong> Copic or Tombow for vibrant, consistent color</li>
 
                 <li><strong>Watercolor Pencils:</strong> Perfect for creating soft, blended effects</li>
 
                 <li><strong>Watercolor Pencils:</strong> Perfect for creating soft, blended effects</li>
 
-                <li><strong>Blending Tools:</strong> Blending stumps, tortillons, or odorless mineral spirits for pencil blending</li>
 
+                <li><strong>Blending Tools:</strong> Blending stumps, tortillons, or odorless mineral spirits for pencil
 
+                    blending</li>
 
                 <li><strong>Color Wheels:</strong> A physical or digital color wheel to help plan combinations</li>
 
                 <li><strong>Color Wheels:</strong> A physical or digital color wheel to help plan combinations</li>
 
             </ul>
 
             </ul>
 
-            
+
 
             <div class="related-collections">
 
             <div class="related-collections">
 
                 <h3>More Coloring Inspiration</h3>
 
                 <h3>More Coloring Inspiration</h3>
 
                 <div class="collection-grid">
 
                 <div class="collection-grid">
 
@@ -524,20 +569,22 @@
 
                         </div>
 
                         </div>
 
                         <div class="collection-info">
 
                         <div class="collection-info">
 
                             <div class="collection-title">Mandala Coloring Pages</div>
 
                             <div class="collection-title">Mandala Coloring Pages</div>
 
-                            <p class="collection-desc">Explore intricate patterns perfect for experimenting with bold color combinations.</p>
 
+                            <p class="collection-desc">Explore intricate patterns perfect for experimenting with bold
 
+                                color combinations.</p>
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
 
-                    
+
 
                     <a href="#" class="collection-card">
 
                     <a href="#" class="collection-card">
 
                         <div class="collection-image">
 
                         <div class="collection-image">
 
                             <img src="https://picsum.photos/600/400?random=306" alt="Nature coloring pages">
 
                             <img src="https://picsum.photos/600/400?random=306" alt="Nature coloring pages">
 
                         </div>
 
                         </div>
 
                         <div class="collection-info">
 
                         <div class="collection-info">
 
                             <div class="collection-title">Nature Scenes</div>
 
                             <div class="collection-title">Nature Scenes</div>
 
-                            <p class="collection-desc">Bring the outdoors to life with our beautiful nature-themed coloring pages.</p>
 
+                            <p class="collection-desc">Bring the outdoors to life with our beautiful nature-themed
 
+                                coloring pages.</p>
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
 
-                    
+
 
                     <a href="#" class="collection-card">
 
                     <a href="#" class="collection-card">
 
                         <div class="collection-image">
 
                         <div class="collection-image">
 
                             <img src="https://picsum.photos/600/400?random=307" alt="Floral coloring pages">
 
                             <img src="https://picsum.photos/600/400?random=307" alt="Floral coloring pages">
 
@@ -551,10 +598,10 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <footer>
 
     <footer>
 
         <div class="container footer-content">
 
         <div class="container footer-content">
 
-            <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+            <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
             <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
@@ -571,7 +618,7 @@
 
                 // 卡片本身是链接，无需额外处理
 
                 // 卡片本身是链接，无需额外处理
 
             });
 
             });
 
         });
 
         });
 
-        
+
 
         // 平滑滚动
 
         // 平滑滚动
 
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 
             anchor.addEventListener('click', function (e) {
 
             anchor.addEventListener('click', function (e) {
 
@@ -583,4 +630,5 @@
 
         });
 
         });
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 3 - 3
test/coloring-pages.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Art Number Coloring - Categories</title>
 
+  <title>Art Color - Categories</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -163,7 +163,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -276,7 +276,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 183 - 117
test/coloring-techniques-for-beginners.html
Vedi File 

@@ -1,10 +1,12 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta name="description" content="Learn essential coloring techniques for beginners, including blending, shading, and layering. Discover expert tips to transform your coloring pages with our guided online tools.">
 
-    <title>Coloring Techniques for Beginners - Art Number Coloring</title>
 
+    <meta name="description"
 
+        content="Learn essential coloring techniques for beginners, including blending, shading, and layering. Discover expert tips to transform your coloring pages with our guided online tools.">
 
+    <title>Coloring Techniques for Beginners - Art Color</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -13,28 +15,29 @@
 
             --background-color: #f9f9f9;
 
             --background-color: #f9f9f9;
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
-            --online-color: #7b68ee; /* 在线填色功能专属色 */
 
+            --online-color: #7b68ee;
 
+            /* 在线填色功能专属色 */
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         header {
 
         header {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
@@ -42,13 +45,13 @@
 
             text-align: center;
 
             text-align: center;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .header-logo {
 
         .header-logo {
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
         }
 
         }
 
-        
+
 
         .online-badge {
 
         .online-badge {
 
             position: absolute;
 
             position: absolute;
 
             top: 10px;
 
             top: 10px;
 
@@ -61,29 +64,29 @@
 
             font-weight: bold;
 
             font-weight: bold;
 
             box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
 
             box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
 
         }
 
         }
 
-        
+
 
         .breadcrumb {
 
         .breadcrumb {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .breadcrumb a {
 
         .breadcrumb a {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
 
-        
+
 
         .breadcrumb a:hover {
 
         .breadcrumb a:hover {
 
             text-decoration: underline;
 
             text-decoration: underline;
 
         }
 
         }
 
-        
+
 
         .page-title {
 
         .page-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-content {
 
         .blog-content {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -91,18 +94,18 @@
 
             padding: 40px;
 
             padding: 40px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .blog-meta {
 
         .blog-meta {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-meta span {
 
         .blog-meta span {
 
             margin: 0 10px;
 
             margin: 0 10px;
 
         }
 
         }
 
-        
+
 
         .blog-image {
 
         .blog-image {
 
             width: 100%;
 
             width: 100%;
 
             max-height: 400px;
 
             max-height: 400px;
 
@@ -110,27 +113,27 @@
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
         }
 
         }
 
-        
+
 
         .blog-content h2 {
 
         .blog-content h2 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 1.7rem;
 
             font-size: 1.7rem;
 
             margin: 30px 0 15px;
 
             margin: 30px 0 15px;
 
         }
 
         }
 
-        
+
 
         .blog-content p {
 
         .blog-content p {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             line-height: 1.7;
 
             line-height: 1.7;
 
         }
 
         }
 
-        
+
 
         .blog-content ul {
 
         .blog-content ul {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             padding-left: 40px;
 
             padding-left: 40px;
 
         }
 
         }
 
-        
+
 
         .blog-content li {
 
         .blog-content li {
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .cta-box {
 
         .cta-box {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -138,13 +141,13 @@
 
             margin: 40px 0;
 
             margin: 40px 0;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .cta-box h3 {
 
         .cta-box h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .cta-btn {
 
         .cta-btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
@@ -156,11 +159,11 @@
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
             margin: 15px 10px 0;
 
             margin: 15px 10px 0;
 
         }
 
         }
 
-        
+
 
         .cta-btn:hover {
 
         .cta-btn:hover {
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
         }
 
         }
 
-        
+
 
         .online-cta-btn {
 
         .online-cta-btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--online-color);
 
             background-color: var(--online-color);
 
@@ -173,12 +176,12 @@
 
             margin: 15px 10px 0;
 
             margin: 15px 10px 0;
 
             box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
 
             box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
 
         }
 
         }
 
-        
+
 
         .online-cta-btn:hover {
 
         .online-cta-btn:hover {
 
             background-color: #6a5acd;
 
             background-color: #6a5acd;
 
             transform: translateY(-2px);
 
             transform: translateY(-2px);
 
         }
 
         }
 
-        
+
 
         .technique-demo {
 
         .technique-demo {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: 1fr 1fr;
 
             grid-template-columns: 1fr 1fr;
 
@@ -188,30 +191,30 @@
 
             padding: 20px;
 
             padding: 20px;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
         }
 
         }
 
-        
+
 
         .demo-item {
 
         .demo-item {
 
             text-align: center;
 
             text-align: center;
 
             padding: 15px;
 
             padding: 15px;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
         }
 
         }
 
-        
+
 
         .demo-title {
 
         .demo-title {
 
             font-weight: bold;
 
             font-weight: bold;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .demo-image {
 
         .demo-image {
 
             max-width: 100%;
 
             max-width: 100%;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 
             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .demo-image:hover {
 
         .demo-image:hover {
 
             transform: scale(1.02);
 
             transform: scale(1.02);
 
         }
 
         }
 
-        
+
 
         .tool-guide {
 
         .tool-guide {
 
             background-color: rgba(255, 209, 102, 0.1);
 
             background-color: rgba(255, 209, 102, 0.1);
 
             border-left: 4px solid var(--accent-color);
 
             border-left: 4px solid var(--accent-color);
 
@@ -219,37 +222,37 @@
 
             margin: 30px 0;
 
             margin: 30px 0;
 
             border-radius: 0 8px 8px 0;
 
             border-radius: 0 8px 8px 0;
 
         }
 
         }
 
-        
+
 
         .tool-guide h3 {
 
         .tool-guide h3 {
 
             color: var(--accent-color);
 
             color: var(--accent-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .tool-grid {
 
         .tool-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
             gap: 20px;
 
             gap: 20px;
 
             margin-top: 20px;
 
             margin-top: 20px;
 
         }
 
         }
 
-        
+
 
         .tool-card {
 
         .tool-card {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
             padding: 15px;
 
             padding: 15px;
 
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
         }
 
         }
 
-        
+
 
         .tool-icon {
 
         .tool-icon {
 
             font-size: 2rem;
 
             font-size: 2rem;
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .tool-name {
 
         .tool-name {
 
             font-weight: bold;
 
             font-weight: bold;
 
             margin-bottom: 5px;
 
             margin-bottom: 5px;
 
         }
 
         }
 
-        
+
 
         .online-feature {
 
         .online-feature {
 
             background-color: rgba(123, 104, 238, 0.05);
 
             background-color: rgba(123, 104, 238, 0.05);
 
             border-left: 4px solid var(--online-color);
 
             border-left: 4px solid var(--online-color);
 
@@ -257,18 +260,18 @@
 
             margin: 30px 0;
 
             margin: 30px 0;
 
             border-radius: 0 8px 8px 0;
 
             border-radius: 0 8px 8px 0;
 
         }
 
         }
 
-        
+
 
         .online-feature h3 {
 
         .online-feature h3 {
 
             color: var(--online-color);
 
             color: var(--online-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .online-feature h3 svg {
 
         .online-feature h3 svg {
 
             margin-right: 10px;
 
             margin-right: 10px;
 
         }
 
         }
 
-        
+
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
             color: white;
 
             color: white;
 
@@ -276,73 +279,84 @@
 
             padding: 30px 0;
 
             padding: 30px 0;
 
             margin-top: 50px;
 
             margin-top: 50px;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .blog-content {
 
             .blog-content {
 
                 padding: 25px;
 
                 padding: 25px;
 
             }
 
             }
 
-            
+
 
             .blog-content h2 {
 
             .blog-content h2 {
 
                 font-size: 1.5rem;
 
                 font-size: 1.5rem;
 
             }
 
             }
 
-            
+
 
             .cta-box {
 
             .cta-box {
 
                 padding: 25px;
 
                 padding: 25px;
 
             }
 
             }
 
-            
+
 
             .cta-box h3 {
 
             .cta-box h3 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
-            
+
 
             .technique-demo {
 
             .technique-demo {
 
                 grid-template-columns: 1fr;
 
                 grid-template-columns: 1fr;
 
             }
 
             }
 
-            
+
 
             .tool-grid {
 
             .tool-grid {
 
                 grid-template-columns: 1fr;
 
                 grid-template-columns: 1fr;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
-            <div class="header-logo">Art Number Coloring</div>
 
+            <div class="header-logo">Art Color</div>
 
             <p>Free Printable & Online Coloring Pages</p>
 
             <p>Free Printable & Online Coloring Pages</p>
 
             <span class="online-badge">Try Online Coloring</span>
 
             <span class="online-badge">Try Online Coloring</span>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <div class="container">
 
     <div class="container">
 
         <div class="breadcrumb">
 
         <div class="breadcrumb">
 
             <a href="/">Home</a> &gt; <a href="/blog">Blog</a> &gt; Coloring Techniques for Beginners
 
             <a href="/">Home</a> &gt; <a href="/blog">Blog</a> &gt; Coloring Techniques for Beginners
 
         </div>
 
         </div>
 
-        
+
 
         <h1 class="page-title">Coloring Techniques for Beginners</h1>
 
         <h1 class="page-title">Coloring Techniques for Beginners</h1>
 
-        
+
 
         <div class="blog-content">
 
         <div class="blog-content">
 
             <div class="blog-meta">
 
             <div class="blog-meta">
 
                 <span>Posted on August 5, 2025</span>
 
                 <span>Posted on August 5, 2025</span>
 
                 <span>Category: Coloring Tips & Tricks</span>
 
                 <span>Category: Coloring Tips & Tricks</span>
 
                 <span>Perfect for Online & Offline Coloring</span>
 
                 <span>Perfect for Online & Offline Coloring</span>
 
             </div>
 
             </div>
 
-            
-            <img src="https://picsum.photos/1200/400?random=306" alt="Coloring tools and techniques for beginners" class="blog-image">
 
-            
-            <p>Embarking on your coloring journey can feel both exciting and overwhelming. Whether you're using traditional mediums like colored pencils, markers, or crayons, or exploring our digital coloring tools, mastering a few fundamental techniques will transform your artwork. In this guide, we'll cover essential skills for beginners, from basic shading to advanced blending, with step-by-step examples you can try right away.</p>
 
-            
+
 
+            <img src="https://picsum.photos/1200/400?random=306" alt="Coloring tools and techniques for beginners"
 
+                class="blog-image">
 
+
 
+            <p>Embarking on your coloring journey can feel both exciting and overwhelming. Whether you're using
 
+                traditional mediums like colored pencils, markers, or crayons, or exploring our digital coloring tools,
 
+                mastering a few fundamental techniques will transform your artwork. In this guide, we'll cover essential
 
+                skills for beginners, from basic shading to advanced blending, with step-by-step examples you can try
 
+                right away.</p>
 
+
 
             <div class="online-feature">
 
             <div class="online-feature">
 
-                <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Master Techniques with Online Practice</h3>
 
-                <p>Our online coloring platform makes it easy to practice these techniques with guided tutorials. Each page includes:</p>
 
+                <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
 
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Master Techniques with Online Practice</h3>
 
+                <p>Our online coloring platform makes it easy to practice these techniques with guided tutorials. Each
 
+                    page includes:</p>
 
                 <ul>
 
                 <ul>
 
                     <li>Step-by-step animation demonstrations</li>
 
                     <li>Step-by-step animation demonstrations</li>
 
                     <li>Adjustable stroke size and pressure</li>
 
                     <li>Adjustable stroke size and pressure</li>
 
@@ -350,9 +364,9 @@
 
                     <li>Save progress to continue learning later</li>
 
                     <li>Save progress to continue learning later</li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
-            
+
 
             <h2>Getting Started: Essential Tools for Beginners</h2>
 
             <h2>Getting Started: Essential Tools for Beginners</h2>
 
-            
+
 
             <div class="tool-guide">
 
             <div class="tool-guide">
 
                 <h3>Must-Have Coloring Tools</h3>
 
                 <h3>Must-Have Coloring Tools</h3>
 
                 <div class="tool-grid">
 
                 <div class="tool-grid">
 
@@ -378,23 +392,26 @@
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <h2>5 Fundamental Coloring Techniques</h2>
 
             <h2>5 Fundamental Coloring Techniques</h2>
 
-            
+
 
             <h3>1. Basic Coloring: Smooth and Even Fills</h3>
 
             <h3>1. Basic Coloring: Smooth and Even Fills</h3>
 
-            <p>The foundation of all coloring techniques is learning to apply smooth, even layers of color. This technique is essential for creating a clean base for more advanced effects.</p>
 
-            
+            <p>The foundation of all coloring techniques is learning to apply smooth, even layers of color. This
 
+                technique is essential for creating a clean base for more advanced effects.</p>
 
+
 
             <div class="technique-demo">
 
             <div class="technique-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Before: Uneven Coloring</div>
 
                     <div class="demo-title">Before: Uneven Coloring</div>
 
-                    <img src="https://picsum.photos/400/300?random=307" alt="Uneven coloring example" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=307" alt="Uneven coloring example"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">After: Smooth Application</div>
 
                     <div class="demo-title">After: Smooth Application</div>
 
-                    <img src="https://picsum.photos/400/300?random=308" alt="Smooth coloring example" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=308" alt="Smooth coloring example"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <p><strong>How to:</strong></p>
 
             <p><strong>How to:</strong></p>
 
             <ol>
 
             <ol>
 
                 <li>Hold your tool at a 45-degree angle for better control.</li>
 
                 <li>Hold your tool at a 45-degree angle for better control.</li>
 
@@ -402,15 +419,21 @@
 
                 <li>Apply multiple thin layers rather than one heavy layer to avoid smudging.</li>
 
                 <li>Apply multiple thin layers rather than one heavy layer to avoid smudging.</li>
 
                 <li>For digital coloring, use the "low opacity" setting for better control.</li>
 
                 <li>For digital coloring, use the "low opacity" setting for better control.</li>
 
             </ol>
 
             </ol>
 
-            
+
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Practice Smooth Fills Online</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Practice Smooth Fills Online</a>
 
                 <p>Try our guided smooth fill tutorial with adjustable pressure sensitivity</p>
 
                 <p>Try our guided smooth fill tutorial with adjustable pressure sensitivity</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>2. Shading: Adding Depth and Dimension</h3>
 
             <h3>2. Shading: Adding Depth and Dimension</h3>
 
-            <p>Shading is what transforms flat coloring into artwork with depth. By varying pressure and direction, you can create the illusion of light and shadow.</p>
 
-            
+            <p>Shading is what transforms flat coloring into artwork with depth. By varying pressure and direction, you
 
+                can create the illusion of light and shadow.</p>
 
+
 
             <div class="technique-demo">
 
             <div class="technique-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Flat Coloring</div>
 
                     <div class="demo-title">Flat Coloring</div>
 
@@ -418,10 +441,11 @@
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">With Shading</div>
 
                     <div class="demo-title">With Shading</div>
 
-                    <img src="https://picsum.photos/400/300?random=310" alt="Shaded coloring example" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=310" alt="Shaded coloring example"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <p><strong>How to:</strong></p>
 
             <p><strong>How to:</strong></p>
 
             <ol>
 
             <ol>
 
                 <li>Identify your light source (usually from the top left).</li>
 
                 <li>Identify your light source (usually from the top left).</li>
 
@@ -429,26 +453,33 @@
 
                 <li>Increase pressure for shadows (areas furthest from the light).</li>
 
                 <li>Increase pressure for shadows (areas furthest from the light).</li>
 
                 <li>Use a blending tool to soften transitions between light and dark.</li>
 
                 <li>Use a blending tool to soften transitions between light and dark.</li>
 
             </ol>
 
             </ol>
 
-            
+
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Try Shading Tutorial</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Try Shading Tutorial</a>
 
                 <p>Follow our interactive shading guide with adjustable light sources</p>
 
                 <p>Follow our interactive shading guide with adjustable light sources</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>3. Blending: Creating Smooth Color Transitions</h3>
 
             <h3>3. Blending: Creating Smooth Color Transitions</h3>
 
-            <p>Blending combines multiple colors seamlessly, creating gradients or realistic effects. This technique is particularly useful for landscapes, skies, and skin tones.</p>
 
-            
+            <p>Blending combines multiple colors seamlessly, creating gradients or realistic effects. This technique is
 
+                particularly useful for landscapes, skies, and skin tones.</p>
 
+
 
             <div class="technique-demo">
 
             <div class="technique-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Before Blending</div>
 
                     <div class="demo-title">Before Blending</div>
 
-                    <img src="https://picsum.photos/400/300?random=311" alt="Before blending example" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=311" alt="Before blending example"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">After Blending</div>
 
                     <div class="demo-title">After Blending</div>
 
                     <img src="https://picsum.photos/400/300?random=312" alt="After blending example" class="demo-image">
 
                     <img src="https://picsum.photos/400/300?random=312" alt="After blending example" class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <p><strong>How to:</strong></p>
 
             <p><strong>How to:</strong></p>
 
             <ol>
 
             <ol>
 
                 <li>Choose two or more colors that complement each other.</li>
 
                 <li>Choose two or more colors that complement each other.</li>
 
@@ -456,15 +487,21 @@
 
                 <li>Use a blending tool (or a white pencil) to smooth the transition between colors.</li>
 
                 <li>Use a blending tool (or a white pencil) to smooth the transition between colors.</li>
 
                 <li>For digital blending, use the "blur" or "smudge" tool with low intensity.</li>
 
                 <li>For digital blending, use the "blur" or "smudge" tool with low intensity.</li>
 
             </ol>
 
             </ol>
 
-            
+
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Explore Blending Techniques</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Explore Blending Techniques</a>
 
                 <p>Access our library of blending tutorials for different mediums</p>
 
                 <p>Access our library of blending tutorials for different mediums</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>4. Layering: Building Depth with Multiple Colors</h3>
 
             <h3>4. Layering: Building Depth with Multiple Colors</h3>
 
-            <p>Layering involves applying multiple colors on top of each other to create richness and complexity. This technique works especially well with colored pencils and digital tools.</p>
 
-            
+            <p>Layering involves applying multiple colors on top of each other to create richness and complexity. This
 
+                technique works especially well with colored pencils and digital tools.</p>
 
+
 
             <p><strong>How to:</strong></p>
 
             <p><strong>How to:</strong></p>
 
             <ol>
 
             <ol>
 
                 <li>Start with a base color using light pressure.</li>
 
                 <li>Start with a base color using light pressure.</li>
 
@@ -472,7 +509,7 @@
 
                 <li>Repeat with additional colors, always allowing the previous layer to show through.</li>
 
                 <li>Repeat with additional colors, always allowing the previous layer to show through.</li>
 
                 <li>Finish with a blending step to unify the layers.</li>
 
                 <li>Finish with a blending step to unify the layers.</li>
 
             </ol>
 
             </ol>
 
-            
+
 
             <div class="technique-demo">
 
             <div class="technique-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Single Layer</div>
 
                     <div class="demo-title">Single Layer</div>
 
@@ -480,76 +517,101 @@
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Multiple Layers</div>
 
                     <div class="demo-title">Multiple Layers</div>
 
-                    <img src="https://picsum.photos/400/300?random=314" alt="Multiple layers example" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=314" alt="Multiple layers example"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Master Layering Online</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Master Layering Online</a>
 
                 <p>Use our layer management tools to experiment with color combinations</p>
 
                 <p>Use our layer management tools to experiment with color combinations</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>5. Outlining: Defining Shapes with Precision</h3>
 
             <h3>5. Outlining: Defining Shapes with Precision</h3>
 
-            <p>A well-executed outline can elevate your artwork by defining shapes and adding emphasis. This technique requires patience and steady hands.</p>
 
-            
+            <p>A well-executed outline can elevate your artwork by defining shapes and adding emphasis. This technique
 
+                requires patience and steady hands.</p>
 
+
 
             <p><strong>How to:</strong></p>
 
             <p><strong>How to:</strong></p>
 
             <ol>
 
             <ol>
 
                 <li>Choose a fine-tip tool that contrasts with your base color (e.g., black for light colors).</li>
 
                 <li>Choose a fine-tip tool that contrasts with your base color (e.g., black for light colors).</li>
 
                 <li>Work slowly, following the contours of your design with consistent pressure.</li>
 
                 <li>Work slowly, following the contours of your design with consistent pressure.</li>
 
                 <li>For digital outlining, use the "stabilizer" feature for smoother lines.</li>
 
                 <li>For digital outlining, use the "stabilizer" feature for smoother lines.</li>
 
-                <li>For a professional touch, vary line thickness—use thicker lines for shadows and thinner for highlights.</li>
 
+                <li>For a professional touch, vary line thickness—use thicker lines for shadows and thinner for
 
+                    highlights.</li>
 
             </ol>
 
             </ol>
 
-            
+
 
             <div class="technique-demo">
 
             <div class="technique-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Without Outline</div>
 
                     <div class="demo-title">Without Outline</div>
 
-                    <img src="https://picsum.photos/400/300?random=315" alt="Without outline example" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=315" alt="Without outline example"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">With Outline</div>
 
                     <div class="demo-title">With Outline</div>
 
                     <img src="https://picsum.photos/400/300?random=316" alt="With outline example" class="demo-image">
 
                     <img src="https://picsum.photos/400/300?random=316" alt="With outline example" class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Practice Precision Outlining</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Practice Precision Outlining</a>
 
                 <p>Test your skills with our guided outlining exercises</p>
 
                 <p>Test your skills with our guided outlining exercises</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h2>Troubleshooting Common Beginner Mistakes</h2>
 
             <h2>Troubleshooting Common Beginner Mistakes</h2>
 
             <p>Even the most experienced artists started as beginners. Here's how to avoid common pitfalls:</p>
 
             <p>Even the most experienced artists started as beginners. Here's how to avoid common pitfalls:</p>
 
-            
+
 
             <div class="cta-box">
 
             <div class="cta-box">
 
                 <h3>Common Mistakes & Solutions</h3>
 
                 <h3>Common Mistakes & Solutions</h3>
 
                 <div class="tool-grid">
 
                 <div class="tool-grid">
 
                     <div class="tool-card">
 
                     <div class="tool-card">
 
                         <div class="tool-name">Pressing Too Hard</div>
 
                         <div class="tool-name">Pressing Too Hard</div>
 
-                        <p><strong>Solution:</strong> Use light pressure and build up layers. Heavy pressure can damage paper and make blending difficult.</p>
 
+                        <p><strong>Solution:</strong> Use light pressure and build up layers. Heavy pressure can damage
 
+                            paper and make blending difficult.</p>
 
                     </div>
 
                     </div>
 
                     <div class="tool-card">
 
                     <div class="tool-card">
 
                         <div class="tool-name">Color Bleeding</div>
 
                         <div class="tool-name">Color Bleeding</div>
 
-                        <p><strong>Solution:</strong> Use marker paper or test colors on a scrap piece first. For digital tools, adjust opacity.</p>
 
+                        <p><strong>Solution:</strong> Use marker paper or test colors on a scrap piece first. For
 
+                            digital tools, adjust opacity.</p>
 
                     </div>
 
                     </div>
 
                     <div class="tool-card">
 
                     <div class="tool-card">
 
                         <div class="tool-name">Uneven Edges</div>
 
                         <div class="tool-name">Uneven Edges</div>
 
-                        <p><strong>Solution:</strong> Use a ruler for straight lines or the "vector shape" tool in digital apps.</p>
 
+                        <p><strong>Solution:</strong> Use a ruler for straight lines or the "vector shape" tool in
 
+                            digital apps.</p>
 
                     </div>
 
                     </div>
 
                     <div class="tool-card">
 
                     <div class="tool-card">
 
                         <div class="tool-name">Color Mud</div>
 
                         <div class="tool-name">Color Mud</div>
 
-                        <p><strong>Solution:</strong> Limit blending to 2-3 colors at a time. Use complementary colors for contrast instead of mixing.</p>
 
+                        <p><strong>Solution:</strong> Limit blending to 2-3 colors at a time. Use complementary colors
 
+                            for contrast instead of mixing.</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <h2>Next Steps: Practice Makes Perfect</h2>
 
             <h2>Next Steps: Practice Makes Perfect</h2>
 
-            <p>The key to mastering these techniques is consistent practice. Start with simple shapes and gradually work your way up to more complex designs. And remember—there's no "right" or "wrong" way to color. The most important thing is to enjoy the process!</p>
 
-            
+            <p>The key to mastering these techniques is consistent practice. Start with simple shapes and gradually work
 
+                your way up to more complex designs. And remember—there's no "right" or "wrong" way to color. The most
 
+                important thing is to enjoy the process!</p>
 
+
 
             <div style="text-align: center; margin: 40px 0;">
 
             <div style="text-align: center; margin: 40px 0;">
 
                 <a href="#" class="cta-btn" target="_blank">Explore Our Beginner-Friendly Coloring Pages</a>
 
                 <a href="#" class="cta-btn" target="_blank">Explore Our Beginner-Friendly Coloring Pages</a>
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Start Coloring Online Now</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Start Coloring Online Now</a>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <div class="related-collections">
 
         <div class="related-collections">
 
             <h3>Recommended for Beginners</h3>
 
             <h3>Recommended for Beginners</h3>
 
             <div class="collection-grid">
 
             <div class="collection-grid">
 
@@ -559,7 +621,8 @@
 
                     </div>
 
                     </div>
 
                     <div class="collection-info">
 
                     <div class="collection-info">
 
                         <div class="collection-title">Geometric Patterns</div>
 
                         <div class="collection-title">Geometric Patterns</div>
 
-                        <div class="collection-desc">Perfect for practicing smooth fills and basic shading with simple shapes.</div>
 
+                        <div class="collection-desc">Perfect for practicing smooth fills and basic shading with simple
 
+                            shapes.</div>
 
                     </div>
 
                     </div>
 
                 </a>
 
                 </a>
 
                 <a href="#" class="collection-card">
 
                 <a href="#" class="collection-card">
 
@@ -568,7 +631,8 @@
 
                     </div>
 
                     </div>
 
                     <div class="collection-info">
 
                     <div class="collection-info">
 
                         <div class="collection-title">Cute Animals</div>
 
                         <div class="collection-title">Cute Animals</div>
 
-                        <div class="collection-desc">Learn to shade fur and add dimension to eyes with these adorable creatures.</div>
 
+                        <div class="collection-desc">Learn to shade fur and add dimension to eyes with these adorable
 
+                            creatures.</div>
 
                     </div>
 
                     </div>
 
                 </a>
 
                 </a>
 
                 <a href="#" class="collection-card">
 
                 <a href="#" class="collection-card">
 
@@ -577,18 +641,20 @@
 
                     </div>
 
                     </div>
 
                     <div class="collection-info">
 
                     <div class="collection-info">
 
                         <div class="collection-title">Floral Designs</div>
 
                         <div class="collection-title">Floral Designs</div>
 
-                        <div class="collection-desc">Practice blending techniques with these beautiful flower illustrations.</div>
 
+                        <div class="collection-desc">Practice blending techniques with these beautiful flower
 
+                            illustrations.</div>
 
                     </div>
 
                     </div>
 
                 </a>
 
                 </a>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <footer>
 
     <footer>
 
         <div class="footer-content">
 
         <div class="footer-content">
 
-            <p>© 2025 Art Number Coloring. All rights reserved.</p>
 
+            <p>© 2025 Art Color. All rights reserved.</p>
 
             <p>Explore our collection of free printable and online coloring pages for all ages.</p>
 
             <p>Explore our collection of free printable and online coloring pages for all ages.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 106 - 91
test/contact.html
Vedi File 

@@ -1,9 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Contact - Art Number Coloring</title>
 
+    <title>Contact - Art Color</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -13,26 +14,26 @@
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         header {
 
         header {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
@@ -40,7 +41,7 @@
 
             text-align: center;
 
             text-align: center;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .header-logo {
 
         .header-logo {
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
@@ -50,16 +51,16 @@
 
             font-weight: 700;
 
             font-weight: 700;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
         }
 
         }
 
-        
+
 
         .logo-icon {
 
         .logo-icon {
 
             width: 40px;
 
             width: 40px;
 
             height: 40px;
 
             height: 40px;
 
         }
 
         }
 
-        
+
 
         main {
 
         main {
 
             padding: 40px 0;
 
             padding: 40px 0;
 
         }
 
         }
 
-        
+
 
         section {
 
         section {
 
             margin-bottom: 50px;
 
             margin-bottom: 50px;
 
             background-color: white;
 
             background-color: white;
 
@@ -67,30 +68,30 @@
 
             padding: 30px;
 
             padding: 30px;
 
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 
         }
 
         }
 
-        
+
 
         h1 {
 
         h1 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         h2 {
 
         h2 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             margin: 25px 0 15px;
 
             margin: 25px 0 15px;
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
         }
 
         }
 
-        
+
 
         h3 {
 
         h3 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             margin: 20px 0 10px;
 
             margin: 20px 0 10px;
 
             font-size: 1.4rem;
 
             font-size: 1.4rem;
 
         }
 
         }
 
-        
+
 
         p {
 
         p {
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .btn {
 
         .btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
@@ -101,11 +102,11 @@
 
             font-size: 1rem;
 
             font-size: 1rem;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .btn:hover {
 
         .btn:hover {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         /* 联系表单样式 */
 
         /* 联系表单样式 */
 
         .contact-grid {
 
         .contact-grid {
 
             display: grid;
 
             display: grid;
 
@@ -113,29 +114,29 @@
 
             gap: 40px;
 
             gap: 40px;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         @media (min-width: 768px) {
 
         @media (min-width: 768px) {
 
             .contact-grid {
 
             .contact-grid {
 
                 grid-template-columns: 1fr 1fr;
 
                 grid-template-columns: 1fr 1fr;
 
             }
 
             }
 
         }
 
         }
 
-        
+
 
         .contact-form {
 
         .contact-form {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             padding: 30px;
 
             padding: 30px;
 
         }
 
         }
 
-        
+
 
         .form-group {
 
         .form-group {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .form-group label {
 
         .form-group label {
 
             display: block;
 
             display: block;
 
             margin-bottom: 8px;
 
             margin-bottom: 8px;
 
             font-weight: 500;
 
             font-weight: 500;
 
         }
 
         }
 
-        
+
 
         .form-group input,
 
         .form-group input,
 
         .form-group textarea {
 
         .form-group textarea {
 
             width: 100%;
 
             width: 100%;
 
@@ -145,30 +146,30 @@
 
             font-size: 1rem;
 
             font-size: 1rem;
 
             transition: border-color 0.3s ease;
 
             transition: border-color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .form-group input:focus,
 
         .form-group input:focus,
 
         .form-group textarea:focus {
 
         .form-group textarea:focus {
 
             outline: none;
 
             outline: none;
 
             border-color: var(--secondary-color);
 
             border-color: var(--secondary-color);
 
         }
 
         }
 
-        
+
 
         .form-group textarea {
 
         .form-group textarea {
 
             min-height: 150px;
 
             min-height: 150px;
 
             resize: vertical;
 
             resize: vertical;
 
         }
 
         }
 
-        
+
 
         .contact-info {
 
         .contact-info {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             padding: 30px;
 
             padding: 30px;
 
         }
 
         }
 
-        
+
 
         .info-item {
 
         .info-item {
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .info-icon {
 
         .info-icon {
 
             width: 40px;
 
             width: 40px;
 
             height: 40px;
 
             height: 40px;
 
@@ -180,16 +181,16 @@
 
             align-items: center;
 
             align-items: center;
 
             margin-right: 15px;
 
             margin-right: 15px;
 
         }
 
         }
 
-        
+
 
         .info-text h4 {
 
         .info-text h4 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             margin-bottom: 5px;
 
             margin-bottom: 5px;
 
         }
 
         }
 
-        
+
 
         .info-text p {
 
         .info-text p {
 
             margin-bottom: 0;
 
             margin-bottom: 0;
 
         }
 
         }
 
-        
+
 
         /* 地图样式 */
 
         /* 地图样式 */
 
         .map-container {
 
         .map-container {
 
             height: 400px;
 
             height: 400px;
 
@@ -198,7 +199,7 @@
 
             margin-top: 40px;
 
             margin-top: 40px;
 
             background-color: #f0f0f0;
 
             background-color: #f0f0f0;
 
         }
 
         }
 
-        
+
 
         /* 页脚样式 */
 
         /* 页脚样式 */
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
@@ -206,7 +207,7 @@
 
             padding: 50px 0;
 
             padding: 50px 0;
 
             margin-top: 80px;
 
             margin-top: 80px;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
@@ -215,7 +216,7 @@
 
             align-items: center;
 
             align-items: center;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .footer-logo {
 
         .footer-logo {
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
@@ -225,76 +226,76 @@
 
             font-weight: 700;
 
             font-weight: 700;
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
         }
 
         }
 
-        
+
 
         .footer-logo a {
 
         .footer-logo a {
 
             color: white;
 
             color: white;
 
             text-decoration: none;
 
             text-decoration: none;
 
             transition: color 0.3s ease;
 
             transition: color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .footer-logo a:hover {
 
         .footer-logo a:hover {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .footer-links {
 
         .footer-links {
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
         }
 
         }
 
-        
+
 
         .footer-links ul {
 
         .footer-links ul {
 
             list-style: none;
 
             list-style: none;
 
             display: flex;
 
             display: flex;
 
             gap: 20px;
 
             gap: 20px;
 
         }
 
         }
 
-        
+
 
         .footer-links ul li {
 
         .footer-links ul li {
 
             margin: 0 10px;
 
             margin: 0 10px;
 
         }
 
         }
 
-        
+
 
         .footer-links ul li a {
 
         .footer-links ul li a {
 
             color: white;
 
             color: white;
 
             text-decoration: none;
 
             text-decoration: none;
 
             font-size: 1rem;
 
             font-size: 1rem;
 
             transition: color 0.3s ease;
 
             transition: color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .footer-links ul li a:hover {
 
         .footer-links ul li a:hover {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .footer-contact {
 
         .footer-contact {
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             line-height: 1.8;
 
             line-height: 1.8;
 
         }
 
         }
 
-        
+
 
         .footer-contact a {
 
         .footer-contact a {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
             transition: color 0.3s ease;
 
             transition: color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .footer-contact a:hover {
 
         .footer-contact a:hover {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .footer-copyright {
 
         .footer-copyright {
 
             font-size: 0.8rem;
 
             font-size: 0.8rem;
 
             color: rgba(255, 255, 255, 0.7);
 
             color: rgba(255, 255, 255, 0.7);
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             h1 {
 
             h1 {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             h2 {
 
             h2 {
 
                 font-size: 1.5rem;
 
                 font-size: 1.5rem;
 
             }
 
             }
 
-            
+
 
             section {
 
             section {
 
                 padding: 20px;
 
                 padding: 20px;
 
             }
 
             }
 
-            
+
 
             .footer-links ul {
 
             .footer-links ul {
 
                 flex-direction: column;
 
                 flex-direction: column;
 
                 gap: 10px;
 
                 gap: 10px;
 
@@ -302,29 +303,31 @@
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
             <div class="header-logo">
 
             <div class="header-logo">
 
                 <svg class="logo-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 
                 <svg class="logo-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 
-                    <circle cx="50" cy="50" r="45" fill="#ff6b6b"/>
 
-                    <circle cx="30" cy="30" r="10" fill="#4ecdc4"/>
 
-                    <circle cx="70" cy="30" r="10" fill="#ffd166"/>
 
-                    <circle cx="30" cy="70" r="10" fill="#ffd166"/>
 
-                    <circle cx="70" cy="70" r="10" fill="#4ecdc4"/>
 
-                    <rect x="45" y="45" width="10" height="10" fill="white"/>
 
+                    <circle cx="50" cy="50" r="45" fill="#ff6b6b" />
 
+                    <circle cx="30" cy="30" r="10" fill="#4ecdc4" />
 
+                    <circle cx="70" cy="30" r="10" fill="#ffd166" />
 
+                    <circle cx="30" cy="70" r="10" fill="#ffd166" />
 
+                    <circle cx="70" cy="70" r="10" fill="#4ecdc4" />
 
+                    <rect x="45" y="45" width="10" height="10" fill="white" />
 
                 </svg>
 
                 </svg>
 
-                <span>Art Number Coloring</span>
 
+                <span>Art Color</span>
 
             </div>
 
             </div>
 
             <p>Free Printable Coloring Pages and Digital Art</p>
 
             <p>Free Printable Coloring Pages and Digital Art</p>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <main class="container">
 
     <main class="container">
 
         <section>
 
         <section>
 
             <h1>Contact Us</h1>
 
             <h1>Contact Us</h1>
 
-            <p>We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to reach out to our team using the form below or through our contact information.</p>
 
-            
+            <p>We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to
 
+                reach out to our team using the form below or through our contact information.</p>
 
+
 
             <div class="contact-grid">
 
             <div class="contact-grid">
 
                 <div class="contact-form">
 
                 <div class="contact-form">
 
                     <h2>Send Us a Message</h2>
 
                     <h2>Send Us a Message</h2>
 
@@ -333,48 +336,54 @@
 
                             <label for="name">Your Name</label>
 
                             <label for="name">Your Name</label>
 
                             <input type="text" id="name" name="name" required>
 
                             <input type="text" id="name" name="name" required>
 
                         </div>
 
                         </div>
 
-                        
+
 
                         <div class="form-group">
 
                         <div class="form-group">
 
                             <label for="email">Your Email</label>
 
                             <label for="email">Your Email</label>
 
                             <input type="email" id="email" name="email" required>
 
                             <input type="email" id="email" name="email" required>
 
                         </div>
 
                         </div>
 
-                        
+
 
                         <div class="form-group">
 
                         <div class="form-group">
 
                             <label for="subject">Subject</label>
 
                             <label for="subject">Subject</label>
 
                             <input type="text" id="subject" name="subject" required>
 
                             <input type="text" id="subject" name="subject" required>
 
                         </div>
 
                         </div>
 
-                        
+
 
                         <div class="form-group">
 
                         <div class="form-group">
 
                             <label for="message">Message</label>
 
                             <label for="message">Message</label>
 
                             <textarea id="message" name="message" required></textarea>
 
                             <textarea id="message" name="message" required></textarea>
 
                         </div>
 
                         </div>
 
-                        
+
 
                         <button type="submit" class="btn">Send Message</button>
 
                         <button type="submit" class="btn">Send Message</button>
 
                     </form>
 
                     </form>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="contact-info">
 
                 <div class="contact-info">
 
                     <h2>Contact Information</h2>
 
                     <h2>Contact Information</h2>
 
-                    
+
 
                     <div class="info-item">
 
                     <div class="info-item">
 
                         <div class="info-icon">
 
                         <div class="info-icon">
 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                <path d="M1.5 8.5A.5.5 0 0 1 2 8h12a.5.5 0 0 1 0 1H2a.5.5 0 0 1-.5-.5z"/>
 
-                                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
 
-                                <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-8a.5.5 0 0 0-1 0v8a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 0-1 0v8z"/>
 
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                viewBox="0 0 16 16">
 
+                                <path d="M1.5 8.5A.5.5 0 0 1 2 8h12a.5.5 0 0 1 0 1H2a.5.5 0 0 1-.5-.5z" />
 
+                                <path
 
+                                    d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
 
+                                <path fill-rule="evenodd"
 
+                                    d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-8a.5.5 0 0 0-1 0v8a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 0-1 0v8z" />
 
                             </svg>
 
                             </svg>
 
                         </div>
 
                         </div>
 
                         <div class="info-text">
 
                         <div class="info-text">
 
                             <h4>Email</h4>
 
                             <h4>Email</h4>
 
-                            <p><a href="mailto:art_number_coloring@jccy-tech.com">art_number_coloring@jccy-tech.com</a></p>
 
+                            <p><a href="mailto:art_number_coloring@jccy-tech.com">art_number_coloring@jccy-tech.com</a>
 
+                            </p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                    
+
 
                     <div class="info-item">
 
                     <div class="info-item">
 
                         <div class="info-icon">
 
                         <div class="info-icon">
 
                             <!-- 更换了地址图标 -->
 
                             <!-- 更换了地址图标 -->
 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
 
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                viewBox="0 0 16 16">
 
+                                <path
 
+                                    d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
 
                             </svg>
 
                             </svg>
 
                         </div>
 
                         </div>
 
                         <div class="info-text">
 
                         <div class="info-text">
 
@@ -382,13 +391,16 @@
 
                             <p>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
                             <p>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                    
+
 
                     <div class="info-item">
 
                     <div class="info-item">
 
                         <div class="info-icon">
 
                         <div class="info-icon">
 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                <path d="M12.792 3.953a.5.5 0 0 0-.59.04l-3.5 2.5a.5.5 0 0 0-.162.633l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5zm-3.5 1.617L11 5.633l-1 2.5-2.5-1.5zm-5.5 2.171L3 9.071l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5a.5.5 0 0 0-.59-.04l-3.5 2.5zm3.5 1.617L7 9.633l-1 2.5-2.5-1.5z"/>
 
-                                <path d="M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
 
-                                <path d="M8 1a2 2 0 0 0-2 2v2H3.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V6h2.5a.5.5 0 0 0 0-1H8V3a2 2 0 0 0-2-2zm6 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
 
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                viewBox="0 0 16 16">
 
+                                <path
 
+                                    d="M12.792 3.953a.5.5 0 0 0-.59.04l-3.5 2.5a.5.5 0 0 0-.162.633l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5zm-3.5 1.617L11 5.633l-1 2.5-2.5-1.5zm-5.5 2.171L3 9.071l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5a.5.5 0 0 0-.59-.04l-3.5 2.5zm3.5 1.617L7 9.633l-1 2.5-2.5-1.5z" />
 
+                                <path d="M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
 
+                                <path
 
+                                    d="M8 1a2 2 0 0 0-2 2v2H3.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V6h2.5a.5.5 0 0 0 0-1H8V3a2 2 0 0 0-2-2zm6 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
 
                             </svg>
 
                             </svg>
 
                         </div>
 
                         </div>
 
                         <div class="info-text">
 
                         <div class="info-text">
 
@@ -400,31 +412,32 @@
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <!-- 地图占位区域 -->
 
             <!-- 地图占位区域 -->
 
             <div class="map-container">
 
             <div class="map-container">
 
-                <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0;">
 
+                <div
 
+                    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0;">
 
                     <p>Map will be displayed here</p>
 
                     <p>Map will be displayed here</p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </section>
 
         </section>
 
     </main>
 
     </main>
 
-    
+
 
     <footer>
 
     <footer>
 
         <div class="container">
 
         <div class="container">
 
             <div class="footer-content">
 
             <div class="footer-content">
 
                 <div class="footer-logo">
 
                 <div class="footer-logo">
 
                     <svg class="logo-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 
                     <svg class="logo-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 
-                        <circle cx="50" cy="50" r="45" fill="#ff6b6b"/>
 
-                        <circle cx="30" cy="30" r="10" fill="#4ecdc4"/>
 
-                        <circle cx="70" cy="30" r="10" fill="#ffd166"/>
 
-                        <circle cx="30" cy="70" r="10" fill="#ffd166"/>
 
-                        <circle cx="70" cy="70" r="10" fill="#4ecdc4"/>
 
-                        <rect x="45" y="45" width="10" height="10" fill="white"/>
 
+                        <circle cx="50" cy="50" r="45" fill="#ff6b6b" />
 
+                        <circle cx="30" cy="30" r="10" fill="#4ecdc4" />
 
+                        <circle cx="70" cy="30" r="10" fill="#ffd166" />
 
+                        <circle cx="30" cy="70" r="10" fill="#ffd166" />
 
+                        <circle cx="70" cy="70" r="10" fill="#4ecdc4" />
 
+                        <rect x="45" y="45" width="10" height="10" fill="white" />
 
                     </svg>
 
                     </svg>
 
-                    <a href="/">Art Number Coloring</a>
 
+                    <a href="/">Art Color</a>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="footer-links">
 
                 <div class="footer-links">
 
                     <ul>
 
                     <ul>
 
                         <li><a href="/about">About Us</a></li>
 
                         <li><a href="/about">About Us</a></li>
 
@@ -433,17 +446,19 @@
 
                         <li><a href="/app">APP</a></li>
 
                         <li><a href="/app">APP</a></li>
 
                     </ul>
 
                     </ul>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="footer-contact">
 
                 <div class="footer-contact">
 
-                    <p>Email: <a href="mailto:art_number_coloring@jccy-tech.com">art_number_coloring@jccy-tech.com</a></p>
 
+                    <p>Email: <a href="mailto:art_number_coloring@jccy-tech.com">art_number_coloring@jccy-tech.com</a>
 
+                    </p>
 
                     <p>Address: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
                     <p>Address: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <div class="footer-copyright">
 
                 <div class="footer-copyright">
 
-                    <p>Copyright © 2025 Art Number Coloring All Rights Reserved.</p>
 
+                    <p>Copyright © 2025 Art Color All Rights Reserved.</p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 3 - 3
test/detail.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Art Number Coloring - Floral Pattern Coloring Detail</title>
 
+  <title>Art Color - Floral Pattern Coloring Detail</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -314,7 +314,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -434,7 +434,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 176 - 119
test/display-your-coloring-masterpieces.html
Vedi File 

@@ -1,10 +1,12 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta name="description" content="Discover creative ways to display your coloring masterpieces, from wall art to digital sharing. Learn expert tips to showcase your artwork with pride and preserve your coloring journey.">
 
-    <title>How to Display Your Coloring Masterpieces - Art Number Coloring</title>
 
+    <meta name="description"
 
+        content="Discover creative ways to display your coloring masterpieces, from wall art to digital sharing. Learn expert tips to showcase your artwork with pride and preserve your coloring journey.">
 
+    <title>How to Display Your Coloring Masterpieces - Art Color</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -13,28 +15,29 @@
 
             --background-color: #f9f9f9;
 
             --background-color: #f9f9f9;
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
-            --online-color: #7b68ee; /* 在线展示功能专属色 */
 
+            --online-color: #7b68ee;
 
+            /* 在线展示功能专属色 */
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         header {
 
         header {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
@@ -42,13 +45,13 @@
 
             text-align: center;
 
             text-align: center;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .header-logo {
 
         .header-logo {
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
         }
 
         }
 
-        
+
 
         .online-badge {
 
         .online-badge {
 
             position: absolute;
 
             position: absolute;
 
             top: 10px;
 
             top: 10px;
 
@@ -61,29 +64,29 @@
 
             font-weight: bold;
 
             font-weight: bold;
 
             box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
 
             box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
 
         }
 
         }
 
-        
+
 
         .breadcrumb {
 
         .breadcrumb {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .breadcrumb a {
 
         .breadcrumb a {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
 
-        
+
 
         .breadcrumb a:hover {
 
         .breadcrumb a:hover {
 
             text-decoration: underline;
 
             text-decoration: underline;
 
         }
 
         }
 
-        
+
 
         .page-title {
 
         .page-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-content {
 
         .blog-content {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -91,18 +94,18 @@
 
             padding: 40px;
 
             padding: 40px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .blog-meta {
 
         .blog-meta {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-meta span {
 
         .blog-meta span {
 
             margin: 0 10px;
 
             margin: 0 10px;
 
         }
 
         }
 
-        
+
 
         .blog-image {
 
         .blog-image {
 
             width: 100%;
 
             width: 100%;
 
             max-height: 400px;
 
             max-height: 400px;
 
@@ -110,27 +113,27 @@
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
         }
 
         }
 
-        
+
 
         .blog-content h2 {
 
         .blog-content h2 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 1.7rem;
 
             font-size: 1.7rem;
 
             margin: 30px 0 15px;
 
             margin: 30px 0 15px;
 
         }
 
         }
 
-        
+
 
         .blog-content p {
 
         .blog-content p {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             line-height: 1.7;
 
             line-height: 1.7;
 
         }
 
         }
 
-        
+
 
         .blog-content ul {
 
         .blog-content ul {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             padding-left: 40px;
 
             padding-left: 40px;
 
         }
 
         }
 
-        
+
 
         .blog-content li {
 
         .blog-content li {
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .cta-box {
 
         .cta-box {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -138,13 +141,13 @@
 
             margin: 40px 0;
 
             margin: 40px 0;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .cta-box h3 {
 
         .cta-box h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .cta-btn {
 
         .cta-btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
@@ -156,11 +159,11 @@
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
             margin: 15px 10px 0;
 
             margin: 15px 10px 0;
 
         }
 
         }
 
-        
+
 
         .cta-btn:hover {
 
         .cta-btn:hover {
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
         }
 
         }
 
-        
+
 
         .online-cta-btn {
 
         .online-cta-btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--online-color);
 
             background-color: var(--online-color);
 
@@ -173,12 +176,12 @@
 
             margin: 15px 10px 0;
 
             margin: 15px 10px 0;
 
             box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
 
             box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
 
         }
 
         }
 
-        
+
 
         .online-cta-btn:hover {
 
         .online-cta-btn:hover {
 
             background-color: #6a5acd;
 
             background-color: #6a5acd;
 
             transform: translateY(-2px);
 
             transform: translateY(-2px);
 
         }
 
         }
 
-        
+
 
         .display-demo {
 
         .display-demo {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: 1fr 1fr;
 
             grid-template-columns: 1fr 1fr;
 
@@ -188,30 +191,30 @@
 
             padding: 20px;
 
             padding: 20px;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
         }
 
         }
 
-        
+
 
         .demo-item {
 
         .demo-item {
 
             text-align: center;
 
             text-align: center;
 
             padding: 15px;
 
             padding: 15px;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
         }
 
         }
 
-        
+
 
         .demo-title {
 
         .demo-title {
 
             font-weight: bold;
 
             font-weight: bold;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .demo-image {
 
         .demo-image {
 
             max-width: 100%;
 
             max-width: 100%;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 
             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .demo-image:hover {
 
         .demo-image:hover {
 
             transform: scale(1.02);
 
             transform: scale(1.02);
 
         }
 
         }
 
-        
+
 
         .tool-guide {
 
         .tool-guide {
 
             background-color: rgba(255, 209, 102, 0.1);
 
             background-color: rgba(255, 209, 102, 0.1);
 
             border-left: 4px solid var(--accent-color);
 
             border-left: 4px solid var(--accent-color);
 
@@ -219,37 +222,37 @@
 
             margin: 30px 0;
 
             margin: 30px 0;
 
             border-radius: 0 8px 8px 0;
 
             border-radius: 0 8px 8px 0;
 
         }
 
         }
 
-        
+
 
         .tool-guide h3 {
 
         .tool-guide h3 {
 
             color: var(--accent-color);
 
             color: var(--accent-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .tool-grid {
 
         .tool-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
             gap: 20px;
 
             gap: 20px;
 
             margin-top: 20px;
 
             margin-top: 20px;
 
         }
 
         }
 
-        
+
 
         .tool-card {
 
         .tool-card {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
             padding: 15px;
 
             padding: 15px;
 
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
         }
 
         }
 
-        
+
 
         .tool-icon {
 
         .tool-icon {
 
             font-size: 2rem;
 
             font-size: 2rem;
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .tool-name {
 
         .tool-name {
 
             font-weight: bold;
 
             font-weight: bold;
 
             margin-bottom: 5px;
 
             margin-bottom: 5px;
 
         }
 
         }
 
-        
+
 
         .online-feature {
 
         .online-feature {
 
             background-color: rgba(123, 104, 238, 0.05);
 
             background-color: rgba(123, 104, 238, 0.05);
 
             border-left: 4px solid var(--online-color);
 
             border-left: 4px solid var(--online-color);
 
@@ -257,18 +260,18 @@
 
             margin: 30px 0;
 
             margin: 30px 0;
 
             border-radius: 0 8px 8px 0;
 
             border-radius: 0 8px 8px 0;
 
         }
 
         }
 
-        
+
 
         .online-feature h3 {
 
         .online-feature h3 {
 
             color: var(--online-color);
 
             color: var(--online-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .online-feature h3 svg {
 
         .online-feature h3 svg {
 
             margin-right: 10px;
 
             margin-right: 10px;
 
         }
 
         }
 
-        
+
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
             color: white;
 
             color: white;
 
@@ -276,73 +279,82 @@
 
             padding: 30px 0;
 
             padding: 30px 0;
 
             margin-top: 50px;
 
             margin-top: 50px;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .blog-content {
 
             .blog-content {
 
                 padding: 25px;
 
                 padding: 25px;
 
             }
 
             }
 
-            
+
 
             .blog-content h2 {
 
             .blog-content h2 {
 
                 font-size: 1.5rem;
 
                 font-size: 1.5rem;
 
             }
 
             }
 
-            
+
 
             .cta-box {
 
             .cta-box {
 
                 padding: 25px;
 
                 padding: 25px;
 
             }
 
             }
 
-            
+
 
             .cta-box h3 {
 
             .cta-box h3 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
-            
+
 
             .display-demo {
 
             .display-demo {
 
                 grid-template-columns: 1fr;
 
                 grid-template-columns: 1fr;
 
             }
 
             }
 
-            
+
 
             .tool-grid {
 
             .tool-grid {
 
                 grid-template-columns: 1fr;
 
                 grid-template-columns: 1fr;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
-            <div class="header-logo">Art Number Coloring</div>
 
+            <div class="header-logo">Art Color</div>
 
             <p>Free Printable & Online Coloring Pages</p>
 
             <p>Free Printable & Online Coloring Pages</p>
 
             <span class="online-badge">Try Online Gallery</span>
 
             <span class="online-badge">Try Online Gallery</span>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <div class="container">
 
     <div class="container">
 
         <div class="breadcrumb">
 
         <div class="breadcrumb">
 
             <a href="/">Home</a> &gt; <a href="/blog">Blog</a> &gt; How to Display Your Coloring Masterpieces
 
             <a href="/">Home</a> &gt; <a href="/blog">Blog</a> &gt; How to Display Your Coloring Masterpieces
 
         </div>
 
         </div>
 
-        
+
 
         <h1 class="page-title">How to Display Your Coloring Masterpieces</h1>
 
         <h1 class="page-title">How to Display Your Coloring Masterpieces</h1>
 
-        
+
 
         <div class="blog-content">
 
         <div class="blog-content">
 
             <div class="blog-meta">
 
             <div class="blog-meta">
 
                 <span>Posted on August 12, 2025</span>
 
                 <span>Posted on August 12, 2025</span>
 
                 <span>Category: Coloring Tips & Tricks</span>
 
                 <span>Category: Coloring Tips & Tricks</span>
 
                 <span>Perfect for Showcasing Your Artwork</span>
 
                 <span>Perfect for Showcasing Your Artwork</span>
 
             </div>
 
             </div>
 
-            
-            <img src="https://picsum.photos/1200/400?random=320" alt="Beautifully displayed coloring pages" class="blog-image">
 
-            
-            <p>You've spent hours perfecting your coloring techniques, creating stunning masterpieces that deserve to be seen. Now it's time to showcase your artwork with pride! In this guide, we'll explore creative ways to display your coloring pages, from traditional framing to digital galleries and interactive displays.</p>
 
-            
+
 
+            <img src="https://picsum.photos/1200/400?random=320" alt="Beautifully displayed coloring pages"
 
+                class="blog-image">
 
+
 
+            <p>You've spent hours perfecting your coloring techniques, creating stunning masterpieces that deserve to be
 
+                seen. Now it's time to showcase your artwork with pride! In this guide, we'll explore creative ways to
 
+                display your coloring pages, from traditional framing to digital galleries and interactive displays.</p>
 
+
 
             <div class="online-feature">
 
             <div class="online-feature">
 
-                <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Create Your Digital Gallery</h3>
 
-                <p>Our online gallery tool makes it easy to showcase your coloring pages with professional layouts. Features include:</p>
 
+                <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
 
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Create Your Digital Gallery</h3>
 
+                <p>Our online gallery tool makes it easy to showcase your coloring pages with professional layouts.
 
+                    Features include:</p>
 
                 <ul>
 
                 <ul>
 
                     <li>Customizable frames and backgrounds</li>
 
                     <li>Customizable frames and backgrounds</li>
 
                     <li>Virtual wall display with adjustable lighting</li>
 
                     <li>Virtual wall display with adjustable lighting</li>
 
@@ -350,62 +362,75 @@
 
                     <li>Download high-resolution images for printing</li>
 
                     <li>Download high-resolution images for printing</li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
-            
+
 
             <h2>10 Creative Ways to Display Your Coloring Pages</h2>
 
             <h2>10 Creative Ways to Display Your Coloring Pages</h2>
 
-            
+
 
             <h3>1. Traditional Framing</h3>
 
             <h3>1. Traditional Framing</h3>
 
-            <p>Nothing beats the classic look of a framed artwork on your wall. Framing not only protects your coloring page but also elevates it to gallery-worthy status.</p>
 
-            
+            <p>Nothing beats the classic look of a framed artwork on your wall. Framing not only protects your coloring
 
+                page but also elevates it to gallery-worthy status.</p>
 
+
 
             <div class="display-demo">
 
             <div class="display-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Simple Frame</div>
 
                     <div class="demo-title">Simple Frame</div>
 
-                    <img src="https://picsum.photos/400/300?random=321" alt="Coloring page in a simple white frame" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=321" alt="Coloring page in a simple white frame"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Matte & Frame Combo</div>
 
                     <div class="demo-title">Matte & Frame Combo</div>
 
-                    <img src="https://picsum.photos/400/300?random=322" alt="Coloring page with a colorful matte and wooden frame" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=322"
 
+                        alt="Coloring page with a colorful matte and wooden frame" class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <p><strong>Pro Tips:</strong></p>
 
             <p><strong>Pro Tips:</strong></p>
 
             <ul>
 
             <ul>
 
                 <li>Choose a frame that complements your artwork without overshadowing it</li>
 
                 <li>Choose a frame that complements your artwork without overshadowing it</li>
 
                 <li>Use acid-free matting to prevent yellowing over time</li>
 
                 <li>Use acid-free matting to prevent yellowing over time</li>
 
                 <li>Opt for UV-protective glass to shield your artwork from sun damage</li>
 
                 <li>Opt for UV-protective glass to shield your artwork from sun damage</li>
 
             </ul>
 
             </ul>
 
-            
+
 
             <h3>2. Floating Frame Displays</h3>
 
             <h3>2. Floating Frame Displays</h3>
 
-            <p>Floating frames create a modern, minimalist look by suspending your artwork within a clear acrylic frame, giving the illusion that it's floating.</p>
 
-            
+            <p>Floating frames create a modern, minimalist look by suspending your artwork within a clear acrylic frame,
 
+                giving the illusion that it's floating.</p>
 
+
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Design Virtual Floating Frames</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Design Virtual Floating Frames</a>
 
                 <p>Experiment with different floating frame styles for your artwork</p>
 
                 <p>Experiment with different floating frame styles for your artwork</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>3. Collage Wall</h3>
 
             <h3>3. Collage Wall</h3>
 
-            <p>Create a dynamic focal point by grouping multiple coloring pages together in a gallery wall arrangement. Mix sizes, themes, and framing styles for a playful look.</p>
 
-            
+            <p>Create a dynamic focal point by grouping multiple coloring pages together in a gallery wall arrangement.
 
+                Mix sizes, themes, and framing styles for a playful look.</p>
 
+
 
             <div class="display-demo">
 
             <div class="display-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Symmetrical Layout</div>
 
                     <div class="demo-title">Symmetrical Layout</div>
 
-                    <img src="https://picsum.photos/400/300?random=323" alt="Symmetrical gallery wall with matching frames" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=323"
 
+                        alt="Symmetrical gallery wall with matching frames" class="demo-image">
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Eclectic Mix</div>
 
                     <div class="demo-title">Eclectic Mix</div>
 
-                    <img src="https://picsum.photos/400/300?random=324" alt="Eclectic gallery wall with varied frames and sizes" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=324"
 
+                        alt="Eclectic gallery wall with varied frames and sizes" class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <p><strong>Layout Tips:</strong></p>
 
             <p><strong>Layout Tips:</strong></p>
 
             <ul>
 
             <ul>
 
                 <li>Plan your arrangement on the floor before hanging</li>
 
                 <li>Plan your arrangement on the floor before hanging</li>
 
                 <li>Leave 2-3 inches between each piece for visual breathing room</li>
 
                 <li>Leave 2-3 inches between each piece for visual breathing room</li>
 
                 <li>Use a common color theme or subject matter to tie the collection together</li>
 
                 <li>Use a common color theme or subject matter to tie the collection together</li>
 
             </ul>
 
             </ul>
 
-            
+
 
             <h3>4. Clipboards & Hanging Displays</h3>
 
             <h3>4. Clipboards & Hanging Displays</h3>
 
-            <p>For a quick, affordable, and changeable display solution, use clipboards, clothespins, or magnetic boards to showcase your artwork.</p>
 
-            
+            <p>For a quick, affordable, and changeable display solution, use clipboards, clothespins, or magnetic boards
 
+                to showcase your artwork.</p>
 
+
 
             <div class="tool-guide">
 
             <div class="tool-guide">
 
                 <h3>DIY Hanging Display Ideas</h3>
 
                 <h3>DIY Hanging Display Ideas</h3>
 
                 <div class="tool-grid">
 
                 <div class="tool-grid">
 
@@ -431,39 +456,48 @@
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>5. Shadow Boxes</h3>
 
             <h3>5. Shadow Boxes</h3>
 
-            <p>Add depth and dimension to your artwork by displaying it in a shadow box with layered elements like stickers, embellishments, or 3D objects.</p>
 
-            
+            <p>Add depth and dimension to your artwork by displaying it in a shadow box with layered elements like
 
+                stickers, embellishments, or 3D objects.</p>
 
+
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Design Virtual Shadow Boxes</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Design Virtual Shadow Boxes</a>
 
                 <p>Plan your shadow box layout with our interactive design tool</p>
 
                 <p>Plan your shadow box layout with our interactive design tool</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>6. Digital Display</h3>
 
             <h3>6. Digital Display</h3>
 
-            <p>Share your artwork with the world by creating a digital gallery. Upload your coloring pages to social media, personal websites, or our online gallery platform.</p>
 
-            
+            <p>Share your artwork with the world by creating a digital gallery. Upload your coloring pages to social
 
+                media, personal websites, or our online gallery platform.</p>
 
+
 
             <div class="display-demo">
 
             <div class="display-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Social Media Showcase</div>
 
                     <div class="demo-title">Social Media Showcase</div>
 
-                    <img src="https://picsum.photos/400/300?random=325" alt="Coloring page displayed on Instagram" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=325" alt="Coloring page displayed on Instagram"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Personal Website Gallery</div>
 
                     <div class="demo-title">Personal Website Gallery</div>
 
-                    <img src="https://picsum.photos/400/300?random=326" alt="Coloring page gallery on a personal website" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=326"
 
+                        alt="Coloring page gallery on a personal website" class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <p><strong>Digital Tips:</strong></p>
 
             <p><strong>Digital Tips:</strong></p>
 
             <ul>
 
             <ul>
 
                 <li>Use good lighting and a flat surface when photographing your artwork</li>
 
                 <li>Use good lighting and a flat surface when photographing your artwork</li>
 
                 <li>Edit photos to enhance colors and remove shadows</li>
 
                 <li>Edit photos to enhance colors and remove shadows</li>
 
                 <li>Add watermarks to protect your work from unauthorized use</li>
 
                 <li>Add watermarks to protect your work from unauthorized use</li>
 
             </ul>
 
             </ul>
 
-            
+
 
             <h3>7. Transform into Functional Art</h3>
 
             <h3>7. Transform into Functional Art</h3>
 
             <p>Give your coloring pages a practical purpose by turning them into functional items around your home.</p>
 
             <p>Give your coloring pages a practical purpose by turning them into functional items around your home.</p>
 
-            
+
 
             <div class="tool-guide">
 
             <div class="tool-guide">
 
                 <h3>Functional Art Ideas</h3>
 
                 <h3>Functional Art Ideas</h3>
 
                 <div class="tool-grid">
 
                 <div class="tool-grid">
 
@@ -489,48 +523,60 @@
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>8. Lightbox Displays</h3>
 
             <h3>8. Lightbox Displays</h3>
 
-            <p>Highlight the details of your coloring with a lightbox. These displays illuminate your artwork from behind, creating a stunning effect.</p>
 
-            
+            <p>Highlight the details of your coloring with a lightbox. These displays illuminate your artwork from
 
+                behind, creating a stunning effect.</p>
 
+
 
             <div style="text-align: center; margin: 20px 0;">
 
             <div style="text-align: center; margin: 20px 0;">
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Virtual Lightbox Preview</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Virtual Lightbox Preview</a>
 
                 <p>See how your artwork looks in a lightbox before purchasing</p>
 
                 <p>See how your artwork looks in a lightbox before purchasing</p>
 
             </div>
 
             </div>
 
-            
+
 
             <h3>9. Rotating Gallery</h3>
 
             <h3>9. Rotating Gallery</h3>
 
-            <p>Don't let your collection gather dust! Create a rotating gallery system so you can display different pieces throughout the year.</p>
 
-            
+            <p>Don't let your collection gather dust! Create a rotating gallery system so you can display different
 
+                pieces throughout the year.</p>
 
+
 
             <p><strong>How to:</strong></p>
 
             <p><strong>How to:</strong></p>
 
             <ol>
 
             <ol>
 
                 <li>Number your artwork and keep a log of what's currently on display</li>
 
                 <li>Number your artwork and keep a log of what's currently on display</li>
 
                 <li>Set a schedule to swap out pieces (e.g., monthly or seasonally)</li>
 
                 <li>Set a schedule to swap out pieces (e.g., monthly or seasonally)</li>
 
                 <li>Store un-displayed artwork in a protective portfolio or binder</li>
 
                 <li>Store un-displayed artwork in a protective portfolio or binder</li>
 
             </ol>
 
             </ol>
 
-            
+
 
             <h3>10. Collaborative Displays</h3>
 
             <h3>10. Collaborative Displays</h3>
 
-            <p>Share the joy of coloring by creating collaborative displays with friends, family, or fellow coloring enthusiasts.</p>
 
-            
+            <p>Share the joy of coloring by creating collaborative displays with friends, family, or fellow coloring
 
+                enthusiasts.</p>
 
+
 
             <div class="display-demo">
 
             <div class="display-demo">
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Family Gallery</div>
 
                     <div class="demo-title">Family Gallery</div>
 
-                    <img src="https://picsum.photos/400/300?random=327" alt="Family coloring pages displayed together" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=327" alt="Family coloring pages displayed together"
 
+                        class="demo-image">
 
                 </div>
 
                 </div>
 
                 <div class="demo-item">
 
                 <div class="demo-item">
 
                     <div class="demo-title">Community Project</div>
 
                     <div class="demo-title">Community Project</div>
 
-                    <img src="https://picsum.photos/400/300?random=328" alt="Community coloring project displayed in a public space" class="demo-image">
 
+                    <img src="https://picsum.photos/400/300?random=328"
 
+                        alt="Community coloring project displayed in a public space" class="demo-image">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <h2>Preserving Your Artwork for Long-Term Display</h2>
 
             <h2>Preserving Your Artwork for Long-Term Display</h2>
 
-            <p>To ensure your coloring pages stay vibrant and protected for years to come, follow these preservation tips:</p>
 
-            
+            <p>To ensure your coloring pages stay vibrant and protected for years to come, follow these preservation
 
+                tips:</p>
 
+
 
             <div class="cta-box">
 
             <div class="cta-box">
 
                 <h3>Artwork Preservation Tips</h3>
 
                 <h3>Artwork Preservation Tips</h3>
 
                 <div class="tool-grid">
 
                 <div class="tool-grid">
 
                     <div class="tool-card">
 
                     <div class="tool-card">
 
                         <div class="tool-name">Avoid Direct Sunlight</div>
 
                         <div class="tool-name">Avoid Direct Sunlight</div>
 
-                        <p>Sunlight can fade colors over time. Display artwork away from windows or use UV-protective glass.</p>
 
+                        <p>Sunlight can fade colors over time. Display artwork away from windows or use UV-protective
 
+                            glass.</p>
 
                     </div>
 
                     </div>
 
                     <div class="tool-card">
 
                     <div class="tool-card">
 
                         <div class="tool-name">Control Humidity</div>
 
                         <div class="tool-name">Control Humidity</div>
 
@@ -546,16 +592,23 @@
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
+
 
             <h2>Showcase Your Talent to the World</h2>
 
             <h2>Showcase Your Talent to the World</h2>
 
-            <p>Your coloring masterpieces deserve to be seen and celebrated. Whether you choose to display them in your home, share them online, or turn them into functional art, the most important thing is to take pride in your creations.</p>
 
-            
+            <p>Your coloring masterpieces deserve to be seen and celebrated. Whether you choose to display them in your
 
+                home, share them online, or turn them into functional art, the most important thing is to take pride in
 
+                your creations.</p>
 
+
 
             <div style="text-align: center; margin: 40px 0;">
 
             <div style="text-align: center; margin: 40px 0;">
 
                 <a href="#" class="cta-btn" target="_blank">Explore Display Supplies</a>
 
                 <a href="#" class="cta-btn" target="_blank">Explore Display Supplies</a>
 
-                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path><polyline points="12 2 12 12 16 14"></polyline></svg> Create Your Digital Gallery Now</a>
 
+                <a href="#" class="online-cta-btn" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20"
 
+                        height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 
+                        stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                    </svg> Create Your Digital Gallery Now</a>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <div class="related-collections">
 
         <div class="related-collections">
 
             <h3>Inspiration for Your Next Display</h3>
 
             <h3>Inspiration for Your Next Display</h3>
 
             <div class="collection-grid">
 
             <div class="collection-grid">
 
@@ -565,7 +618,8 @@
 
                     </div>
 
                     </div>
 
                     <div class="collection-info">
 
                     <div class="collection-info">
 
                         <div class="collection-title">Display Essentials</div>
 
                         <div class="collection-title">Display Essentials</div>
 
-                        <div class="collection-desc">Explore our selection of frames, mats, and tools for showcasing your artwork.</div>
 
+                        <div class="collection-desc">Explore our selection of frames, mats, and tools for showcasing
 
+                            your artwork.</div>
 
                     </div>
 
                     </div>
 
                 </a>
 
                 </a>
 
                 <a href="#" class="collection-card">
 
                 <a href="#" class="collection-card">
 
@@ -574,7 +628,8 @@
 
                     </div>
 
                     </div>
 
                     <div class="collection-info">
 
                     <div class="collection-info">
 
                         <div class="collection-title">Gallery Wall Ideas</div>
 
                         <div class="collection-title">Gallery Wall Ideas</div>
 
-                        <div class="collection-desc">Get inspired with these creative gallery wall layouts and design tips.</div>
 
+                        <div class="collection-desc">Get inspired with these creative gallery wall layouts and design
 
+                            tips.</div>
 
                     </div>
 
                     </div>
 
                 </a>
 
                 </a>
 
                 <a href="#" class="collection-card">
 
                 <a href="#" class="collection-card">
 
@@ -583,18 +638,20 @@
 
                     </div>
 
                     </div>
 
                     <div class="collection-info">
 
                     <div class="collection-info">
 
                         <div class="collection-title">DIY Display Projects</div>
 
                         <div class="collection-title">DIY Display Projects</div>
 
-                        <div class="collection-desc">Learn how to create unique display solutions with these easy DIY tutorials.</div>
 
+                        <div class="collection-desc">Learn how to create unique display solutions with these easy DIY
 
+                            tutorials.</div>
 
                     </div>
 
                     </div>
 
                 </a>
 
                 </a>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <footer>
 
     <footer>
 
         <div class="footer-content">
 
         <div class="footer-content">
 
-            <p>© 2025 Art Number Coloring. All rights reserved.</p>
 
+            <p>© 2025 Art Color. All rights reserved.</p>
 
             <p>Explore our collection of free printable and online coloring pages for all ages.</p>
 
             <p>Explore our collection of free printable and online coloring pages for all ages.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 3 - 3
test/fatherday.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Father's Day Coloring Pages - Art Number Coloring</title>
 
+  <title>Father's Day Coloring Pages - Art Color</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #e68a00;
 
       --primary-color: #e68a00;
 
@@ -233,7 +233,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -370,7 +370,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 3 - 3
test/flower-coloring-page.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Flower Coloring Pages - Art Number Coloring</title>
 
+  <title>Flower Coloring Pages - Art Color</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -372,7 +372,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -653,7 +653,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 3 - 3
test/gallery.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Art Number Coloring - Gallery</title>
 
+  <title>Art Color - Gallery</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -226,7 +226,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -436,7 +436,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 1 - 1
test/header.html
Vedi File 

@@ -5,7 +5,7 @@
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
-  <title>Art Number Coloring - Header Example</title>
 
+  <title>Art Color - Header Example</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;

+ 3 - 3
test/how-to-color-mandala.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>How to Color Mandala Coloring Pages - Art Number Coloring</title>
 
+    <title>How to Color Mandala Coloring Pages - Art Color</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -336,7 +336,7 @@
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
-            <div class="header-logo">Art Number Coloring</div>
 
+            <div class="header-logo">Art Color</div>
 
             <p>Free Printable & Online Coloring Pages</p>
 
             <p>Free Printable & Online Coloring Pages</p>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
@@ -629,7 +629,7 @@
 
 
 
     <footer>
 
     <footer>
 
         <div class="footer-content">
 
         <div class="footer-content">
 
-            <p>© 2025 Art Number Coloring. All rights reserved.</p>
 
+            <p>© 2025 Art Color. All rights reserved.</p>
 
             <p>Explore our collection of free printable and online coloring pages for all ages.</p>
 
             <p>Explore our collection of free printable and online coloring pages for all ages.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>

+ 3 - 3
test/how-to-coloring-online.html
Vedi File 

@@ -6,7 +6,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="description"
 
   <meta name="description"
 
     content="Learn how to color online with our digital coloring platform. Follow numbered guides to create stunning artwork with ease. Save, share, and download your masterpieces.">
 
     content="Learn how to color online with our digital coloring platform. Follow numbered guides to create stunning artwork with ease. Save, share, and download your masterpieces.">
 
-  <title>How to Color Online: A Complete Guide - Art Number Coloring</title>
 
+  <title>How to Color Online: A Complete Guide - Art Color</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -338,7 +338,7 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable & Online Coloring Pages</p>
 
       <p>Free Printable & Online Coloring Pages</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
@@ -578,7 +578,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="footer-content">
 
     <div class="footer-content">
 
-      <p>© 2025 Art Number Coloring. All rights reserved.</p>
 
+      <p>© 2025 Art Color. All rights reserved.</p>
 
       <p>Explore our collection of free printable and online coloring pages for all ages.</p>
 
       <p>Explore our collection of free printable and online coloring pages for all ages.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 5 - 5
test/index.html
Vedi File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Art Number Coloring - Free Printable Coloring Pages</title>
 
+  <title>Art Color - Free Printable Coloring Pages</title>
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
       --primary-color: #ff6b6b;
 
       --primary-color: #ff6b6b;
 
@@ -270,14 +270,14 @@
 
 <body>
 
 <body>
 
   <header>
 
   <header>
 
     <div class="container">
 
     <div class="container">
 
-      <div class="header-logo">Art Number Coloring</div>
 
+      <div class="header-logo">Art Color</div>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Free Printable Coloring Pages and Birthday Cards</p>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
 
 
   <main class="container">
 
   <main class="container">
 
     <section>
 
     <section>
 
-      <h1>Welcome to Art Number Coloring</h1>
 
+      <h1>Welcome to Art Color</h1>
 
       <p>Discover a world of creativity with our free printable coloring pages for all ages. Whether you're looking for
 
       <p>Discover a world of creativity with our free printable coloring pages for all ages. Whether you're looking for
 
         relaxation, a fun activity, or a way to express your artistry, we've got you covered.</p>
 
         relaxation, a fun activity, or a way to express your artistry, we've got you covered.</p>
 
     </section>
 
     </section>
 
@@ -350,7 +350,7 @@
 
 
 
     <section>
 
     <section>
 
       <h2>Unleash Your Creativity</h2>
 
       <h2>Unleash Your Creativity</h2>
 
-      <p>Art Number Coloring offers free printable coloring pages and tutorials for everyone. Whether you're a beginner
 
+      <p>Art Color offers free printable coloring pages and tutorials for everyone. Whether you're a beginner
 
         or an experienced artist, there's something for you here.</p>
 
         or an experienced artist, there's something for you here.</p>
 
 
 
       <div class="feature-grid">
 
       <div class="feature-grid">
 
@@ -380,7 +380,7 @@
 
 
 
   <footer>
 
   <footer>
 
     <div class="container footer-content">
 
     <div class="container footer-content">
 
-      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+      <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
       <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
     </div>
 
     </div>
 
   </footer>
 
   </footer>

+ 193 - 105
test/privacy.html
Vedi File 

@@ -1,9 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Privacy Policy - Art Number Coloring</title>
 
+    <title>Privacy Policy - Art Color</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -13,26 +14,26 @@
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         header {
 
         header {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
@@ -40,35 +41,35 @@
 
             text-align: center;
 
             text-align: center;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .header-logo {
 
         .header-logo {
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
         }
 
         }
 
-        
+
 
         .breadcrumb {
 
         .breadcrumb {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .breadcrumb a {
 
         .breadcrumb a {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
 
-        
+
 
         .breadcrumb a:hover {
 
         .breadcrumb a:hover {
 
             text-decoration: underline;
 
             text-decoration: underline;
 
         }
 
         }
 
-        
+
 
         .page-title {
 
         .page-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .privacy-content {
 
         .privacy-content {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -76,45 +77,45 @@
 
             padding: 40px;
 
             padding: 40px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .privacy-section {
 
         .privacy-section {
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
         }
 
         }
 
-        
+
 
         .privacy-section h2 {
 
         .privacy-section h2 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .privacy-section h3 {
 
         .privacy-section h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             margin-top: 25px;
 
             margin-top: 25px;
 
         }
 
         }
 
-        
+
 
         .privacy-section p {
 
         .privacy-section p {
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .privacy-section ul {
 
         .privacy-section ul {
 
             margin-left: 25px;
 
             margin-left: 25px;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .privacy-section li {
 
         .privacy-section li {
 
             margin-bottom: 8px;
 
             margin-bottom: 8px;
 
         }
 
         }
 
-        
+
 
         .last-updated {
 
         .last-updated {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-style: italic;
 
             font-style: italic;
 
             text-align: right;
 
             text-align: right;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
             color: white;
 
             color: white;
 
@@ -122,57 +123,67 @@
 
             padding: 30px 0;
 
             padding: 30px 0;
 
             margin-top: 50px;
 
             margin-top: 50px;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .privacy-content {
 
             .privacy-content {
 
                 padding: 30px 20px;
 
                 padding: 30px 20px;
 
             }
 
             }
 
-            
+
 
             .privacy-section h2 {
 
             .privacy-section h2 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
-            
+
 
             .privacy-section h3 {
 
             .privacy-section h3 {
 
                 font-size: 1.1rem;
 
                 font-size: 1.1rem;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
-            <div class="header-logo">Art Number Coloring</div>
 
+            <div class="header-logo">Art Color</div>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <div class="container">
 
     <div class="container">
 
         <div class="breadcrumb">
 
         <div class="breadcrumb">
 
             <a href="/">Home</a> &gt; Privacy Policy
 
             <a href="/">Home</a> &gt; Privacy Policy
 
         </div>
 
         </div>
 
-        
+
 
         <h1 class="page-title">Privacy Policy</h1>
 
         <h1 class="page-title">Privacy Policy</h1>
 
-        
+
 
         <div class="privacy-content">
 
         <div class="privacy-content">
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>1. Introduction</h2>
 
                 <h2>1. Introduction</h2>
 
-                <p>Welcome to Art Number Coloring ("we," "us," or "our"). We are committed to protecting your privacy and ensuring the security of your personal information. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website <a href="https://artnumbercoloring.com" style="color: var(--primary-color);">artnumbercoloring.com</a> (the "Website") or use our services.</p>
 
-                <p>By using our Website, you agree to the terms of this Privacy Policy. If you do not agree with our practices, please do not use our Website or services.</p>
 
-                <p>This Privacy Policy is designed to comply with the General Data Protection Regulation (GDPR) of the European Union and the California Consumer Privacy Act (CCPA). If you are located in the European Union or California, please review the additional information provided in Sections 11 and 12 respectively.</p>
 
+                <p>Welcome to Art Color ("we," "us," or "our"). We are committed to protecting your privacy and ensuring
 
+                    the security of your personal information. This Privacy Policy explains how we collect, use,
 
+                    disclose, and safeguard your information when you visit our website <a
 
+                        href="https://artnumbercoloring.com"
 
+                        style="color: var(--primary-color);">artnumbercoloring.com</a> (the "Website") or use our
 
+                    services.</p>
 
+                <p>By using our Website, you agree to the terms of this Privacy Policy. If you do not agree with our
 
+                    practices, please do not use our Website or services.</p>
 
+                <p>This Privacy Policy is designed to comply with the General Data Protection Regulation (GDPR) of the
 
+                    European Union and the California Consumer Privacy Act (CCPA). If you are located in the European
 
+                    Union or California, please review the additional information provided in Sections 11 and 12
 
+                    respectively.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>2. Information We Collect</h2>
 
                 <h2>2. Information We Collect</h2>
 
-                
+
 
                 <h3>2.1 Personal Information</h3>
 
                 <h3>2.1 Personal Information</h3>
 
                 <p>We may collect personal information that you voluntarily provide to us when you:</p>
 
                 <p>We may collect personal information that you voluntarily provide to us when you:</p>
 
                 <ul>
 
                 <ul>
 
@@ -181,8 +192,9 @@
 
                     <li>Contact us through our support channels</li>
 
                     <li>Contact us through our support channels</li>
 
                     <li>Participate in contests, surveys, or promotions</li>
 
                     <li>Participate in contests, surveys, or promotions</li>
 
                 </ul>
 
                 </ul>
 
-                <p>Examples of personal information we may collect include your name, email address, postal address, phone number, and any other information you choose to provide.</p>
 
-                
+                <p>Examples of personal information we may collect include your name, email address, postal address,
 
+                    phone number, and any other information you choose to provide.</p>
 
+
 
                 <h3>2.2 Non-Personal Information</h3>
 
                 <h3>2.2 Non-Personal Information</h3>
 
                 <p>We may automatically collect non-personal information about your visit to our Website, including:</p>
 
                 <p>We may automatically collect non-personal information about your visit to our Website, including:</p>
 
                 <ul>
 
                 <ul>
 
@@ -193,10 +205,13 @@
 
                     <li>Time and duration of your visit</li>
 
                     <li>Time and duration of your visit</li>
 
                     <li>Referral source</li>
 
                     <li>Referral source</li>
 
                 </ul>
 
                 </ul>
 
-                <p>We use this information to analyze trends, administer the site, track user movements, and gather demographic information for aggregate use.</p>
 
-                
+                <p>We use this information to analyze trends, administer the site, track user movements, and gather
 
+                    demographic information for aggregate use.</p>
 
+
 
                 <h3>2.3 Cookies and Tracking Technologies</h3>
 
                 <h3>2.3 Cookies and Tracking Technologies</h3>
 
-                <p>Our Website uses cookies and similar tracking technologies to enhance your experience. Cookies are small text files that are stored on your device. We use both session cookies (which expire when you close your browser) and persistent cookies (which remain on your device until deleted).</p>
 
+                <p>Our Website uses cookies and similar tracking technologies to enhance your experience. Cookies are
 
+                    small text files that are stored on your device. We use both session cookies (which expire when you
 
+                    close your browser) and persistent cookies (which remain on your device until deleted).</p>
 
                 <p>We use cookies for various purposes, including:</p>
 
                 <p>We use cookies for various purposes, including:</p>
 
                 <ul>
 
                 <ul>
 
                     <li>Remembering your preferences and settings</li>
 
                     <li>Remembering your preferences and settings</li>
 
@@ -204,14 +219,26 @@
 
                     <li>Personalizing your experience</li>
 
                     <li>Personalizing your experience</li>
 
                     <li>Advertising and marketing purposes</li>
 
                     <li>Advertising and marketing purposes</li>
 
                 </ul>
 
                 </ul>
 
-                <p>You can control cookies through your browser settings. However, if you choose to disable cookies, some features of our Website may not function properly.</p>
 
-                
+                <p>You can control cookies through your browser settings. However, if you choose to disable cookies,
 
+                    some features of our Website may not function properly.</p>
 
+
 
                 <h3>2.4 Google Analytics and Google AdSense</h3>
 
                 <h3>2.4 Google Analytics and Google AdSense</h3>
 
-                <p>We use Google Analytics, a web analytics service provided by Google, Inc. ("Google"), to help analyze how users interact with our Website. Google Analytics uses cookies to collect information such as how visitors navigate our Website. This information is used to compile reports and help us improve our Website. The information collected by Google Analytics is generally anonymous and aggregated.</p>
 
-                <p>We also use Google AdSense, an advertising service provided by Google, to display advertisements on our Website. Google AdSense uses cookies to serve ads based on your prior visits to our Website and other websites. These cookies do not contain personal information, but they may track your online activity across different websites.</p>
 
-                <p>Google's ability to use and share information collected by Google Analytics and Google AdSense is subject to Google's <a href="https://policies.google.com/privacy" style="color: var(--primary-color);">Privacy Policy</a>. You may opt out of Google Analytics by downloading and installing the <a href="https://tools.google.com/dlpage/gaoptout" style="color: var(--primary-color);">Google Analytics Opt-out Browser Add-on</a>.</p>
 
+                <p>We use Google Analytics, a web analytics service provided by Google, Inc. ("Google"), to help analyze
 
+                    how users interact with our Website. Google Analytics uses cookies to collect information such as
 
+                    how visitors navigate our Website. This information is used to compile reports and help us improve
 
+                    our Website. The information collected by Google Analytics is generally anonymous and aggregated.
 
+                </p>
 
+                <p>We also use Google AdSense, an advertising service provided by Google, to display advertisements on
 
+                    our Website. Google AdSense uses cookies to serve ads based on your prior visits to our Website and
 
+                    other websites. These cookies do not contain personal information, but they may track your online
 
+                    activity across different websites.</p>
 
+                <p>Google's ability to use and share information collected by Google Analytics and Google AdSense is
 
+                    subject to Google's <a href="https://policies.google.com/privacy"
 
+                        style="color: var(--primary-color);">Privacy Policy</a>. You may opt out of Google Analytics by
 
+                    downloading and installing the <a href="https://tools.google.com/dlpage/gaoptout"
 
+                        style="color: var(--primary-color);">Google Analytics Opt-out Browser Add-on</a>.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>3. How We Use Your Information</h2>
 
                 <h2>3. How We Use Your Information</h2>
 
                 <p>We use the information we collect for various purposes, including:</p>
 
                 <p>We use the information we collect for various purposes, including:</p>
 
@@ -219,134 +246,195 @@
 
                     <li>Providing, maintaining, and improving our Website and services</li>
 
                     <li>Providing, maintaining, and improving our Website and services</li>
 
                     <li>Understanding user preferences and providing personalized content</li>
 
                     <li>Understanding user preferences and providing personalized content</li>
 
                     <li>Responding to your inquiries and providing customer support</li>
 
                     <li>Responding to your inquiries and providing customer support</li>
 
-                    <li>Sending you updates, newsletters, and promotional materials (if you have subscribed to receive them)</li>
 
+                    <li>Sending you updates, newsletters, and promotional materials (if you have subscribed to receive
 
+                        them)</li>
 
                     <li>Conducting research and analysis to improve our offerings</li>
 
                     <li>Conducting research and analysis to improve our offerings</li>
 
                     <li>Detecting, preventing, and addressing technical issues</li>
 
                     <li>Detecting, preventing, and addressing technical issues</li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>4. Information Sharing and Disclosure</h2>
 
                 <h2>4. Information Sharing and Disclosure</h2>
 
-                <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except as described in this Privacy Policy.</p>
 
-                
+                <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your
 
+                    consent, except as described in this Privacy Policy.</p>
 
+
 
                 <h3>4.1 Service Providers</h3>
 
                 <h3>4.1 Service Providers</h3>
 
-                <p>We may engage third-party service providers to assist us in operating our Website, conducting our business, or providing services to you. These third parties have access to your personal information only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.</p>
 
-                
+                <p>We may engage third-party service providers to assist us in operating our Website, conducting our
 
+                    business, or providing services to you. These third parties have access to your personal information
 
+                    only to perform these tasks on our behalf and are obligated not to disclose or use it for any other
 
+                    purpose.</p>
 
+
 
                 <h3>4.2 Legal Requirements</h3>
 
                 <h3>4.2 Legal Requirements</h3>
 
-                <p>We may disclose your personal information if required to do so by law or in response to valid requests by public authorities (e.g., a court or government agency).</p>
 
-                
+                <p>We may disclose your personal information if required to do so by law or in response to valid
 
+                    requests by public authorities (e.g., a court or government agency).</p>
 
+
 
                 <h3>4.3 Business Transfers</h3>
 
                 <h3>4.3 Business Transfers</h3>
 
-                <p>If we are involved in a merger, acquisition, or sale of all or a portion of our assets, your personal information may be transferred as part of that transaction.</p>
 
-                
+                <p>If we are involved in a merger, acquisition, or sale of all or a portion of our assets, your personal
 
+                    information may be transferred as part of that transaction.</p>
 
+
 
                 <h3>4.4 Consent</h3>
 
                 <h3>4.4 Consent</h3>
 
-                <p>We may disclose your personal information with your consent, such as when you choose to share your information for a specific purpose.</p>
 
+                <p>We may disclose your personal information with your consent, such as when you choose to share your
 
+                    information for a specific purpose.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>5. Data Security</h2>
 
                 <h2>5. Data Security</h2>
 
-                <p>We take reasonable measures to protect your personal information from unauthorized access, use, or disclosure. However, no method of transmission over the internet or electronic storage is 100% secure, and we cannot guarantee absolute security.</p>
 
-                <p>You are responsible for maintaining the confidentiality of your account credentials, and you should notify us immediately of any unauthorized use of your account.</p>
 
+                <p>We take reasonable measures to protect your personal information from unauthorized access, use, or
 
+                    disclosure. However, no method of transmission over the internet or electronic storage is 100%
 
+                    secure, and we cannot guarantee absolute security.</p>
 
+                <p>You are responsible for maintaining the confidentiality of your account credentials, and you should
 
+                    notify us immediately of any unauthorized use of your account.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>6. Your Choices</h2>
 
                 <h2>6. Your Choices</h2>
 
-                
+
 
                 <h3>6.1 Communication Preferences</h3>
 
                 <h3>6.1 Communication Preferences</h3>
 
-                <p>You can unsubscribe from our marketing emails at any time by clicking the "Unsubscribe" link at the bottom of the email. You may also update your communication preferences by logging into your account and adjusting your settings.</p>
 
-                
+                <p>You can unsubscribe from our marketing emails at any time by clicking the "Unsubscribe" link at the
 
+                    bottom of the email. You may also update your communication preferences by logging into your account
 
+                    and adjusting your settings.</p>
 
+
 
                 <h3>6.2 Access, Correction, or Deletion</h3>
 
                 <h3>6.2 Access, Correction, or Deletion</h3>
 
-                <p>You have the right to access, correct, or delete the personal information we hold about you. To request access to or correction of your personal information, or to request that we delete your personal information, please contact us at <a href="mailto:privacy@artnumbercoloring.com" style="color: var(--primary-color);">privacy@artnumbercoloring.com</a>.</p>
 
-                
+                <p>You have the right to access, correct, or delete the personal information we hold about you. To
 
+                    request access to or correction of your personal information, or to request that we delete your
 
+                    personal information, please contact us at <a href="mailto:privacy@artnumbercoloring.com"
 
+                        style="color: var(--primary-color);">privacy@artnumbercoloring.com</a>.</p>
 
+
 
                 <h3>6.3 Opting Out of Cookies</h3>
 
                 <h3>6.3 Opting Out of Cookies</h3>
 
-                <p>You can disable cookies through your browser settings. However, disabling cookies may affect your experience on our Website.</p>
 
-                
+                <p>You can disable cookies through your browser settings. However, disabling cookies may affect your
 
+                    experience on our Website.</p>
 
+
 
                 <h3>6.4 Do Not Track Signals</h3>
 
                 <h3>6.4 Do Not Track Signals</h3>
 
-                <p>Our Website does not currently respond to "Do Not Track" signals from browsers. For more information about "Do Not Track," please visit <a href="https://www.allaboutdnt.org/" style="color: var(--primary-color);">https://www.allaboutdnt.org/</a>.</p>
 
+                <p>Our Website does not currently respond to "Do Not Track" signals from browsers. For more information
 
+                    about "Do Not Track," please visit <a href="https://www.allaboutdnt.org/"
 
+                        style="color: var(--primary-color);">https://www.allaboutdnt.org/</a>.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>7. Children's Privacy</h2>
 
                 <h2>7. Children's Privacy</h2>
 
-                <p>Our Website is not intended for children under the age of 13. We do not knowingly collect personal information from children under 13. If you believe we have inadvertently collected information from a child under 13, please contact us, and we will promptly delete the information.</p>
 
+                <p>Our Website is not intended for children under the age of 13. We do not knowingly collect personal
 
+                    information from children under 13. If you believe we have inadvertently collected information from
 
+                    a child under 13, please contact us, and we will promptly delete the information.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>8. Third-Party Links</h2>
 
                 <h2>8. Third-Party Links</h2>
 
-                <p>Our Website may contain links to third-party websites or services that are not owned or controlled by us. This Privacy Policy does not apply to those third-party websites or services. We encourage you to review the privacy policies of those third parties before using their services.</p>
 
+                <p>Our Website may contain links to third-party websites or services that are not owned or controlled by
 
+                    us. This Privacy Policy does not apply to those third-party websites or services. We encourage you
 
+                    to review the privacy policies of those third parties before using their services.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>9. Changes to This Privacy Policy</h2>
 
                 <h2>9. Changes to This Privacy Policy</h2>
 
-                <p>We may update this Privacy Policy from time to time. The date at the top of this page indicates when this Privacy Policy was last revised. We will notify you of any material changes by posting the new Privacy Policy on our Website. Your continued use of our Website after the effective date of the revised Privacy Policy constitutes your acceptance of the changes.</p>
 
+                <p>We may update this Privacy Policy from time to time. The date at the top of this page indicates when
 
+                    this Privacy Policy was last revised. We will notify you of any material changes by posting the new
 
+                    Privacy Policy on our Website. Your continued use of our Website after the effective date of the
 
+                    revised Privacy Policy constitutes your acceptance of the changes.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>10. Contact Us</h2>
 
                 <h2>10. Contact Us</h2>
 
-                <p>If you have any questions, concerns, or suggestions about our Privacy Policy, please contact us at:</p>
 
-                <p>Email: <a href="mailto:privacy@artnumbercoloring.com" style="color: var(--primary-color);">privacy@artnumbercoloring.com</a></p>
 
+                <p>If you have any questions, concerns, or suggestions about our Privacy Policy, please contact us at:
 
+                </p>
 
+                <p>Email: <a href="mailto:privacy@artnumbercoloring.com"
 
+                        style="color: var(--primary-color);">privacy@artnumbercoloring.com</a></p>
 
                 <p>Mail: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
                 <p>Mail: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>11. GDPR-Specific Information</h2>
 
                 <h2>11. GDPR-Specific Information</h2>
 
                 <p>If you are located in the European Union, the following additional information applies to you:</p>
 
                 <p>If you are located in the European Union, the following additional information applies to you:</p>
 
-                
+
 
                 <h3>11.1 Legal Basis for Processing</h3>
 
                 <h3>11.1 Legal Basis for Processing</h3>
 
                 <p>We process your personal information on the following legal bases:</p>
 
                 <p>We process your personal information on the following legal bases:</p>
 
                 <ul>
 
                 <ul>
 
-                    <li><strong>Consent:</strong> We may process your personal information when you have given us your explicit consent for specific purposes, such as subscribing to our newsletter.</li>
 
-                    <li><strong>Contract:</strong> We may process your personal information to fulfill our obligations under a contract with you, such as providing the services you have requested.</li>
 
-                    <li><strong>Legal Obligation:</strong> We may process your personal information to comply with applicable laws and regulations.</li>
 
-                    <li><strong>Legitimate Interests:</strong> We may process your personal information for our legitimate interests, such as improving our Website and services, ensuring security, and analyzing user behavior. Our legitimate interests do not override your rights and freedoms.</li>
 
+                    <li><strong>Consent:</strong> We may process your personal information when you have given us your
 
+                        explicit consent for specific purposes, such as subscribing to our newsletter.</li>
 
+                    <li><strong>Contract:</strong> We may process your personal information to fulfill our obligations
 
+                        under a contract with you, such as providing the services you have requested.</li>
 
+                    <li><strong>Legal Obligation:</strong> We may process your personal information to comply with
 
+                        applicable laws and regulations.</li>
 
+                    <li><strong>Legitimate Interests:</strong> We may process your personal information for our
 
+                        legitimate interests, such as improving our Website and services, ensuring security, and
 
+                        analyzing user behavior. Our legitimate interests do not override your rights and freedoms.</li>
 
                 </ul>
 
                 </ul>
 
-                
+
 
                 <h3>11.2 Your GDPR Rights</h3>
 
                 <h3>11.2 Your GDPR Rights</h3>
 
                 <p>In addition to the rights described in Section 6, you have the following rights under the GDPR:</p>
 
                 <p>In addition to the rights described in Section 6, you have the following rights under the GDPR:</p>
 
                 <ul>
 
                 <ul>
 
-                    <li><strong>Right to Object:</strong> You have the right to object to our processing of your personal information based on our legitimate interests.</li>
 
-                    <li><strong>Right to Restrict Processing:</strong> You have the right to request that we restrict the processing of your personal information in certain circumstances.</li>
 
-                    <li><strong>Right to Data Portability:</strong> You have the right to receive your personal information in a structured, commonly used, and machine-readable format and to transmit that information to another controller.</li>
 
-                    <li><strong>Right to Withdraw Consent:</strong> If we are processing your personal information based on your consent, you have the right to withdraw your consent at any time.</li>
 
+                    <li><strong>Right to Object:</strong> You have the right to object to our processing of your
 
+                        personal information based on our legitimate interests.</li>
 
+                    <li><strong>Right to Restrict Processing:</strong> You have the right to request that we restrict
 
+                        the processing of your personal information in certain circumstances.</li>
 
+                    <li><strong>Right to Data Portability:</strong> You have the right to receive your personal
 
+                        information in a structured, commonly used, and machine-readable format and to transmit that
 
+                        information to another controller.</li>
 
+                    <li><strong>Right to Withdraw Consent:</strong> If we are processing your personal information based
 
+                        on your consent, you have the right to withdraw your consent at any time.</li>
 
                 </ul>
 
                 </ul>
 
-                <p>To exercise any of these rights, please contact us at <a href="mailto:privacy@artnumbercoloring.com" style="color: var(--primary-color);">privacy@artnumbercoloring.com</a>.</p>
 
-                
+                <p>To exercise any of these rights, please contact us at <a href="mailto:privacy@artnumbercoloring.com"
 
+                        style="color: var(--primary-color);">privacy@artnumbercoloring.com</a>.</p>
 
+
 
                 <h3>11.3 Data Transfers</h3>
 
                 <h3>11.3 Data Transfers</h3>
 
-                <p>Our servers are located in [Country], and your personal information may be transferred to and processed in that country. If you are located in the European Union, please note that [Country] may not have been deemed by the European Commission to have an adequate level of data protection. However, we implement appropriate safeguards, such as Standard Contractual Clauses, to ensure that your personal information receives an adequate level of protection when transferred outside the European Union.</p>
 
+                <p>Our servers are located in [Country], and your personal information may be transferred to and
 
+                    processed in that country. If you are located in the European Union, please note that [Country] may
 
+                    not have been deemed by the European Commission to have an adequate level of data protection.
 
+                    However, we implement appropriate safeguards, such as Standard Contractual Clauses, to ensure that
 
+                    your personal information receives an adequate level of protection when transferred outside the
 
+                    European Union.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="privacy-section">
 
             <div class="privacy-section">
 
                 <h2>12. CCPA-Specific Information</h2>
 
                 <h2>12. CCPA-Specific Information</h2>
 
                 <p>If you are a California resident, the following additional information applies to you:</p>
 
                 <p>If you are a California resident, the following additional information applies to you:</p>
 
-                
+
 
                 <h3>12.1 CCPA Rights</h3>
 
                 <h3>12.1 CCPA Rights</h3>
 
                 <p>Under the CCPA, you have the following rights:</p>
 
                 <p>Under the CCPA, you have the following rights:</p>
 
                 <ul>
 
                 <ul>
 
-                    <li><strong>Right to Know:</strong> You have the right to request that we disclose the categories and specific pieces of personal information we have collected about you, the sources of that information, the business or commercial purpose for collecting or selling that information, and the categories of third parties with whom we have shared that information.</li>
 
-                    <li><strong>Right to Delete:</strong> You have the right to request that we delete your personal information, subject to certain exceptions.</li>
 
-                    <li><strong>Right to Opt-Out of Sale:</strong> You have the right to opt out of the "sale" of your personal information, as defined by the CCPA. We do not currently sell your personal information, but if we do so in the future, we will provide you with a mechanism to opt out.</li>
 
-                    <li><strong>Non-Discrimination:</strong> We will not discriminate against you for exercising your rights under the CCPA.</li>
 
+                    <li><strong>Right to Know:</strong> You have the right to request that we disclose the categories
 
+                        and specific pieces of personal information we have collected about you, the sources of that
 
+                        information, the business or commercial purpose for collecting or selling that information, and
 
+                        the categories of third parties with whom we have shared that information.</li>
 
+                    <li><strong>Right to Delete:</strong> You have the right to request that we delete your personal
 
+                        information, subject to certain exceptions.</li>
 
+                    <li><strong>Right to Opt-Out of Sale:</strong> You have the right to opt out of the "sale" of your
 
+                        personal information, as defined by the CCPA. We do not currently sell your personal
 
+                        information, but if we do so in the future, we will provide you with a mechanism to opt out.
 
+                    </li>
 
+                    <li><strong>Non-Discrimination:</strong> We will not discriminate against you for exercising your
 
+                        rights under the CCPA.</li>
 
                 </ul>
 
                 </ul>
 
-                
+
 
                 <h3>12.2 How to Exercise Your CCPA Rights</h3>
 
                 <h3>12.2 How to Exercise Your CCPA Rights</h3>
 
-                <p>To exercise your rights under the CCPA, please contact us at <a href="mailto:privacy@artnumbercoloring.com" style="color: var(--primary-color);">privacy@artnumbercoloring.com</a> or by mail at the address provided in Section 10. We will respond to your request within 45 days.</p>
 
-                
+                <p>To exercise your rights under the CCPA, please contact us at <a
 
+                        href="mailto:privacy@artnumbercoloring.com"
 
+                        style="color: var(--primary-color);">privacy@artnumbercoloring.com</a> or by mail at the address
 
+                    provided in Section 10. We will respond to your request within 45 days.</p>
 
+
 
                 <h3>12.3 Information We Collect and Disclose</h3>
 
                 <h3>12.3 Information We Collect and Disclose</h3>
 
-                <p>For more information about the categories of personal information we collect and disclose, please see Sections 2 and 4 of this Privacy Policy.</p>
 
-                
+                <p>For more information about the categories of personal information we collect and disclose, please see
 
+                    Sections 2 and 4 of this Privacy Policy.</p>
 
+
 
                 <h3>12.4 "Shine the Light" Law</h3>
 
                 <h3>12.4 "Shine the Light" Law</h3>
 
-                <p>California Civil Code Section 1798.83 permits California residents to request certain information regarding our disclosure of personal information to third parties for their direct marketing purposes. To make such a request, please contact us at <a href="mailto:privacy@artnumbercoloring.com" style="color: var(--primary-color);">privacy@artnumbercoloring.com</a>.</p>
 
+                <p>California Civil Code Section 1798.83 permits California residents to request certain information
 
+                    regarding our disclosure of personal information to third parties for their direct marketing
 
+                    purposes. To make such a request, please contact us at <a
 
+                        href="mailto:privacy@artnumbercoloring.com"
 
+                        style="color: var(--primary-color);">privacy@artnumbercoloring.com</a>.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="last-updated">
 
             <div class="last-updated">
 
                 <p>Last updated: July 4, 2025</p>
 
                 <p>Last updated: July 4, 2025</p>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <footer>
 
     <footer>
 
         <div class="container footer-content">
 
         <div class="container footer-content">
 
-            <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+            <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
             <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 157 - 82
test/terms-of-service.html
Vedi File 

@@ -1,9 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Terms of Service - Art Number Coloring</title>
 
+    <title>Terms of Service - Art Color</title>
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -13,26 +14,26 @@
 
             --text-color: #333;
 
             --text-color: #333;
 
             --light-text: #666;
 
             --light-text: #666;
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         header {
 
         header {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
@@ -40,35 +41,35 @@
 
             text-align: center;
 
             text-align: center;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .header-logo {
 
         .header-logo {
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
         }
 
         }
 
-        
+
 
         .breadcrumb {
 
         .breadcrumb {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .breadcrumb a {
 
         .breadcrumb a {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
 
-        
+
 
         .breadcrumb a:hover {
 
         .breadcrumb a:hover {
 
             text-decoration: underline;
 
             text-decoration: underline;
 
         }
 
         }
 
-        
+
 
         .page-title {
 
         .page-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .terms-content {
 
         .terms-content {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -76,54 +77,54 @@
 
             padding: 40px;
 
             padding: 40px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .terms-section {
 
         .terms-section {
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
         }
 
         }
 
-        
+
 
         .terms-section h2 {
 
         .terms-section h2 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .terms-section h3 {
 
         .terms-section h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             margin-top: 25px;
 
             margin-top: 25px;
 
         }
 
         }
 
-        
+
 
         .terms-section p {
 
         .terms-section p {
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .terms-section ul {
 
         .terms-section ul {
 
             margin-left: 25px;
 
             margin-left: 25px;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .terms-section li {
 
         .terms-section li {
 
             margin-bottom: 8px;
 
             margin-bottom: 8px;
 
         }
 
         }
 
-        
+
 
         .terms-section ol {
 
         .terms-section ol {
 
             margin-left: 25px;
 
             margin-left: 25px;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .terms-section ol li {
 
         .terms-section ol li {
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .last-updated {
 
         .last-updated {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-style: italic;
 
             font-style: italic;
 
             text-align: right;
 
             text-align: right;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         footer {
 
         footer {
 
             background-color: var(--text-color);
 
             background-color: var(--text-color);
 
             color: white;
 
             color: white;
 
@@ -131,164 +132,238 @@
 
             padding: 30px 0;
 
             padding: 30px 0;
 
             margin-top: 50px;
 
             margin-top: 50px;
 
         }
 
         }
 
-        
+
 
         .footer-content {
 
         .footer-content {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .terms-content {
 
             .terms-content {
 
                 padding: 30px 20px;
 
                 padding: 30px 20px;
 
             }
 
             }
 
-            
+
 
             .terms-section h2 {
 
             .terms-section h2 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
-            
+
 
             .terms-section h3 {
 
             .terms-section h3 {
 
                 font-size: 1.1rem;
 
                 font-size: 1.1rem;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
-            <div class="header-logo">Art Number Coloring</div>
 
+            <div class="header-logo">Art Color</div>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <div class="container">
 
     <div class="container">
 
         <div class="breadcrumb">
 
         <div class="breadcrumb">
 
             <a href="/">Home</a> &gt; Terms of Service
 
             <a href="/">Home</a> &gt; Terms of Service
 
         </div>
 
         </div>
 
-        
+
 
         <h1 class="page-title">Terms of Service</h1>
 
         <h1 class="page-title">Terms of Service</h1>
 
-        
+
 
         <div class="terms-content">
 
         <div class="terms-content">
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>1. Introduction</h2>
 
                 <h2>1. Introduction</h2>
 
-                <p>Welcome to Art Number Coloring ("we," "us," or "our"). These Terms of Service govern your use of our website <a href="https://artnumbercoloring.com" style="color: var(--primary-color);">artnumbercoloring.com</a> (the "Website") and all associated services (collectively, the "Services"). By accessing or using our Services, you agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our Services.</p>
 
+                <p>Welcome to Art Color ("we," "us," or "our"). These Terms of Service govern your use of our website <a
 
+                        href="https://artnumbercoloring.com"
 
+                        style="color: var(--primary-color);">artnumbercoloring.com</a> (the "Website") and all
 
+                    associated services (collectively, the "Services"). By accessing or using our Services, you agree to
 
+                    be bound by these Terms of Service. If you do not agree to these terms, please do not use our
 
+                    Services.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>2. Eligibility</h2>
 
                 <h2>2. Eligibility</h2>
 
-                <p>You must be at least 13 years old to use our Services. By using our Services, you represent and warrant that you are at least 13 years old. If you are under 13, you may not use our Services.</p>
 
-                <p>If you are using our Services on behalf of an organization, you represent and warrant that you have the authority to bind that organization to these Terms of Service. In such case, "you" and "your" will refer to that organization.</p>
 
+                <p>You must be at least 13 years old to use our Services. By using our Services, you represent and
 
+                    warrant that you are at least 13 years old. If you are under 13, you may not use our Services.</p>
 
+                <p>If you are using our Services on behalf of an organization, you represent and warrant that you have
 
+                    the authority to bind that organization to these Terms of Service. In such case, "you" and "your"
 
+                    will refer to that organization.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>3. Use of Our Services</h2>
 
                 <h2>3. Use of Our Services</h2>
 
-                
+
 
                 <h3>3.1 Permitted Use</h3>
 
                 <h3>3.1 Permitted Use</h3>
 
-                <p>Our Services are intended to provide you with access to free printable coloring pages, online coloring tools, and related content for personal, non-commercial use. You may use our Services only for lawful purposes and in accordance with these Terms of Service.</p>
 
-                
+                <p>Our Services are intended to provide you with access to free printable coloring pages, online
 
+                    coloring tools, and related content for personal, non-commercial use. You may use our Services only
 
+                    for lawful purposes and in accordance with these Terms of Service.</p>
 
+
 
                 <h3>3.2 Prohibited Activities</h3>
 
                 <h3>3.2 Prohibited Activities</h3>
 
                 <p>You agree not to:</p>
 
                 <p>You agree not to:</p>
 
                 <ul>
 
                 <ul>
 
                     <li>Use our Services for any commercial purpose without our prior written consent</li>
 
                     <li>Use our Services for any commercial purpose without our prior written consent</li>
 
-                    <li>Modify, adapt, sublicense, translate, sell, reverse engineer, decompile, or disassemble any part of our Services</li>
 
-                    <li>Attempt to gain unauthorized access to our Services, user accounts, computer systems, or networks associated with our Services</li>
 
-                    <li>Upload, post, transmit, or otherwise make available any content that is unlawful, harmful, threatening, abusive, harassing, defamatory, vulgar, obscene, pornographic, invasive of another's privacy, hateful, or racially, ethnically, or otherwise objectionable</li>
 
+                    <li>Modify, adapt, sublicense, translate, sell, reverse engineer, decompile, or disassemble any part
 
+                        of our Services</li>
 
+                    <li>Attempt to gain unauthorized access to our Services, user accounts, computer systems, or
 
+                        networks associated with our Services</li>
 
+                    <li>Upload, post, transmit, or otherwise make available any content that is unlawful, harmful,
 
+                        threatening, abusive, harassing, defamatory, vulgar, obscene, pornographic, invasive of
 
+                        another's privacy, hateful, or racially, ethnically, or otherwise objectionable</li>
 
                     <li>Interfere with or disrupt our Services or servers or networks connected to our Services</li>
 
                     <li>Interfere with or disrupt our Services or servers or networks connected to our Services</li>
 
-                    <li>Use any automated means, including robots, spiders, or scripts, to access, monitor, or copy our Services without our prior written permission</li>
 
-                    <li>Impersonate any person or entity, or falsely state or otherwise misrepresent your affiliation with a person or entity</li>
 
+                    <li>Use any automated means, including robots, spiders, or scripts, to access, monitor, or copy our
 
+                        Services without our prior written permission</li>
 
+                    <li>Impersonate any person or entity, or falsely state or otherwise misrepresent your affiliation
 
+                        with a person or entity</li>
 
                     <li>Use our Services to violate the intellectual property rights of others</li>
 
                     <li>Use our Services to violate the intellectual property rights of others</li>
 
                     <li>Create multiple accounts for the purpose of abusing our Services</li>
 
                     <li>Create multiple accounts for the purpose of abusing our Services</li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>4. Intellectual Property Rights</h2>
 
                 <h2>4. Intellectual Property Rights</h2>
 
-                <p>Our Services and all content available on or through our Services, including but not limited to text, graphics, logos, images, audio clips, video clips, software, and code (collectively, the "Content"), are the property of Art Number Coloring or our licensors and are protected by copyright, trademark, patent, and other intellectual property laws.</p>
 
-                <p>You may not use, reproduce, distribute, modify, display, perform, publish, license, create derivative works from, transfer, or sell any Content or our Services without our prior written permission, except as expressly permitted by these Terms of Service or our Services.</p>
 
-                <p>Art Number Coloring and our logos are trademarks or registered trademarks of Art Number Coloring. Other trademarks, names, and logos used on our Services may be the trademarks of their respective owners. You are not permitted to use any trademarks, names, or logos without our prior written permission or the permission of the respective trademark owner.</p>
 
+                <p>Our Services and all content available on or through our Services, including but not limited to text,
 
+                    graphics, logos, images, audio clips, video clips, software, and code (collectively, the "Content"),
 
+                    are the property of Art Color or our licensors and are protected by copyright, trademark, patent,
 
+                    and other intellectual property laws.</p>
 
+                <p>You may not use, reproduce, distribute, modify, display, perform, publish, license, create derivative
 
+                    works from, transfer, or sell any Content or our Services without our prior written permission,
 
+                    except as expressly permitted by these Terms of Service or our Services.</p>
 
+                <p>Art Color and our logos are trademarks or registered trademarks of Art Color. Other trademarks,
 
+                    names, and logos used on our Services may be the trademarks of their respective owners. You are not
 
+                    permitted to use any trademarks, names, or logos without our prior written permission or the
 
+                    permission of the respective trademark owner.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>5. User Submissions</h2>
 
                 <h2>5. User Submissions</h2>
 
-                <p>Our Services may allow you to submit, upload, post, or otherwise make available content, including but not limited to coloring pages you have created, comments, reviews, and other materials (collectively, "User Submissions"). By submitting User Submissions, you grant us a worldwide, non-exclusive, royalty-free, sublicenseable, and transferable license to use, reproduce, distribute, prepare derivative works of, display, and perform your User Submissions in connection with our Services and our business.</p>
 
+                <p>Our Services may allow you to submit, upload, post, or otherwise make available content, including
 
+                    but not limited to coloring pages you have created, comments, reviews, and other materials
 
+                    (collectively, "User Submissions"). By submitting User Submissions, you grant us a worldwide,
 
+                    non-exclusive, royalty-free, sublicenseable, and transferable license to use, reproduce, distribute,
 
+                    prepare derivative works of, display, and perform your User Submissions in connection with our
 
+                    Services and our business.</p>
 
                 <p>You represent and warrant that:</p>
 
                 <p>You represent and warrant that:</p>
 
                 <ul>
 
                 <ul>
 
-                    <li>You own or have the necessary rights to grant us the license described above for your User Submissions</li>
 
-                    <li>Your User Submissions do not violate these Terms of Service or the rights of any third party</li>
 
-                    <li>Your User Submissions do not contain any viruses, worms, Trojan horses, or other harmful code</li>
 
+                    <li>You own or have the necessary rights to grant us the license described above for your User
 
+                        Submissions</li>
 
+                    <li>Your User Submissions do not violate these Terms of Service or the rights of any third party
 
+                    </li>
 
+                    <li>Your User Submissions do not contain any viruses, worms, Trojan horses, or other harmful code
 
+                    </li>
 
                 </ul>
 
                 </ul>
 
-                <p>We reserve the right to remove or modify any User Submissions at any time for any reason, including but not limited to if we believe your User Submissions violate these Terms of Service or the rights of others.</p>
 
+                <p>We reserve the right to remove or modify any User Submissions at any time for any reason, including
 
+                    but not limited to if we believe your User Submissions violate these Terms of Service or the rights
 
+                    of others.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>6. Privacy Policy</h2>
 
                 <h2>6. Privacy Policy</h2>
 
-                <p>Our collection and use of your personal information is governed by our <a href="/privacy-policy" style="color: var(--primary-color);">Privacy Policy</a>. By using our Services, you consent to our collection and use of your personal information as described in our Privacy Policy.</p>
 
+                <p>Our collection and use of your personal information is governed by our <a href="/privacy-policy"
 
+                        style="color: var(--primary-color);">Privacy Policy</a>. By using our Services, you consent to
 
+                    our collection and use of your personal information as described in our Privacy Policy.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>7. Links to Third-Party Websites</h2>
 
                 <h2>7. Links to Third-Party Websites</h2>
 
-                <p>Our Services may contain links to third-party websites or services that are not owned or controlled by us. We have no control over, and assume no responsibility for, the content, privacy policies, or practices of any third-party websites or services. We do not warrant the offerings of any of these entities/individuals or their websites.</p>
 
-                <p>You acknowledge and agree that we shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods, or services available on or through any such third-party websites or services.</p>
 
-                <p>We strongly advise you to read the terms of service and privacy policies of any third-party websites or services that you visit.</p>
 
+                <p>Our Services may contain links to third-party websites or services that are not owned or controlled
 
+                    by us. We have no control over, and assume no responsibility for, the content, privacy policies, or
 
+                    practices of any third-party websites or services. We do not warrant the offerings of any of these
 
+                    entities/individuals or their websites.</p>
 
+                <p>You acknowledge and agree that we shall not be responsible or liable, directly or indirectly, for any
 
+                    damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any
 
+                    such content, goods, or services available on or through any such third-party websites or services.
 
+                </p>
 
+                <p>We strongly advise you to read the terms of service and privacy policies of any third-party websites
 
+                    or services that you visit.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>8. Disclaimer of Warranties</h2>
 
                 <h2>8. Disclaimer of Warranties</h2>
 
-                <p>Our Services are provided "as is" and "as available" without warranties of any kind, either express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, or non-infringement. We do not warrant that our Services will be uninterrupted, timely, secure, or error-free.</p>
 
-                <p>We do not warrant that the results that may be obtained from the use of our Services will be accurate or reliable.</p>
 
-                <p>You agree that your use of our Services is at your sole risk. We shall not be liable for any direct, indirect, incidental, special, consequential, or punitive damages, including but not limited to loss of profits, data, or other intangible losses, resulting from your use of or inability to use our Services.</p>
 
+                <p>Our Services are provided "as is" and "as available" without warranties of any kind, either express
 
+                    or implied, including but not limited to implied warranties of merchantability, fitness for a
 
+                    particular purpose, or non-infringement. We do not warrant that our Services will be uninterrupted,
 
+                    timely, secure, or error-free.</p>
 
+                <p>We do not warrant that the results that may be obtained from the use of our Services will be accurate
 
+                    or reliable.</p>
 
+                <p>You agree that your use of our Services is at your sole risk. We shall not be liable for any direct,
 
+                    indirect, incidental, special, consequential, or punitive damages, including but not limited to loss
 
+                    of profits, data, or other intangible losses, resulting from your use of or inability to use our
 
+                    Services.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>9. Limitation of Liability</h2>
 
                 <h2>9. Limitation of Liability</h2>
 
-                <p>In no event shall Art Number Coloring, our affiliates, or our licensors be liable for any damages whatsoever, including but not limited to any direct, indirect, special, incidental, or consequential damages, including but not limited to loss of use, data, or profits, arising out of or in any way connected with the use of or inability to use our Services, even if we have been advised of the possibility of such damages.</p>
 
-                <p>Because some states or jurisdictions do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation may not apply to you. In such states or jurisdictions, our liability shall be limited to the fullest extent permitted by law.</p>
 
+                <p>In no event shall Art Color, our affiliates, or our licensors be liable for any damages whatsoever,
 
+                    including but not limited to any direct, indirect, special, incidental, or consequential damages,
 
+                    including but not limited to loss of use, data, or profits, arising out of or in any way connected
 
+                    with the use of or inability to use our Services, even if we have been advised of the possibility of
 
+                    such damages.</p>
 
+                <p>Because some states or jurisdictions do not allow the exclusion or limitation of liability for
 
+                    consequential or incidental damages, the above limitation may not apply to you. In such states or
 
+                    jurisdictions, our liability shall be limited to the fullest extent permitted by law.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>10. Term and Termination</h2>
 
                 <h2>10. Term and Termination</h2>
 
-                <p>These Terms of Service shall remain in full force and effect while you use our Services. We may terminate your access to our Services at any time, for any reason, including but not limited to if you violate these Terms of Service.</p>
 
-                <p>Upon termination, you must immediately cease all use of our Services. Sections 3, 4, 5, 6, 8, 9, 10, 11, and 12 shall survive any termination of these Terms of Service.</p>
 
+                <p>These Terms of Service shall remain in full force and effect while you use our Services. We may
 
+                    terminate your access to our Services at any time, for any reason, including but not limited to if
 
+                    you violate these Terms of Service.</p>
 
+                <p>Upon termination, you must immediately cease all use of our Services. Sections 3, 4, 5, 6, 8, 9, 10,
 
+                    11, and 12 shall survive any termination of these Terms of Service.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>11. Changes to These Terms of Service</h2>
 
                 <h2>11. Changes to These Terms of Service</h2>
 
-                <p>We reserve the right to modify these Terms of Service at any time. If we make material changes to these Terms of Service, we will notify you by posting the new Terms of Service on our Website and updating the "Last Updated" date at the top of these Terms of Service. Your continued use of our Services after the effective date of the revised Terms of Service constitutes your acceptance of the changes.</p>
 
-                <p>It is your responsibility to review these Terms of Service periodically for changes. We encourage you to check this page frequently to ensure you are aware of the most current version of these Terms of Service.</p>
 
+                <p>We reserve the right to modify these Terms of Service at any time. If we make material changes to
 
+                    these Terms of Service, we will notify you by posting the new Terms of Service on our Website and
 
+                    updating the "Last Updated" date at the top of these Terms of Service. Your continued use of our
 
+                    Services after the effective date of the revised Terms of Service constitutes your acceptance of the
 
+                    changes.</p>
 
+                <p>It is your responsibility to review these Terms of Service periodically for changes. We encourage you
 
+                    to check this page frequently to ensure you are aware of the most current version of these Terms of
 
+                    Service.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>12. Governing Law and Jurisdiction</h2>
 
                 <h2>12. Governing Law and Jurisdiction</h2>
 
-                <p>These Terms of Service shall be governed by and construed in accordance with the laws of Beijing, China, without regard to its conflict of laws principles.</p>
 
-                <p>Any legal suit, action, or proceeding arising out of or related to these Terms of Service or our Services shall be instituted exclusively in the federal courts of Beijing, China or the courts of Beijing, China, and you consent to the personal jurisdiction of such courts and waive any and all objections to the exercise of jurisdiction over you by such courts and to venue in such courts.</p>
 
+                <p>These Terms of Service shall be governed by and construed in accordance with the laws of Beijing,
 
+                    China, without regard to its conflict of laws principles.</p>
 
+                <p>Any legal suit, action, or proceeding arising out of or related to these Terms of Service or our
 
+                    Services shall be instituted exclusively in the federal courts of Beijing, China or the courts of
 
+                    Beijing, China, and you consent to the personal jurisdiction of such courts and waive any and all
 
+                    objections to the exercise of jurisdiction over you by such courts and to venue in such courts.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>13. Entire Agreement</h2>
 
                 <h2>13. Entire Agreement</h2>
 
-                <p>These Terms of Service constitute the entire agreement between you and Art Number Coloring regarding the use of our Services and supersede all prior agreements and understandings, oral or written, relating to the same.</p>
 
+                <p>These Terms of Service constitute the entire agreement between you and Art Color regarding the use of
 
+                    our Services and supersede all prior agreements and understandings, oral or written, relating to the
 
+                    same.</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="terms-section">
 
             <div class="terms-section">
 
                 <h2>14. Contact Us</h2>
 
                 <h2>14. Contact Us</h2>
 
                 <p>If you have any questions about these Terms of Service, please contact us at:</p>
 
                 <p>If you have any questions about these Terms of Service, please contact us at:</p>
 
-                <p>Email: <a href="mailto:support@artnumbercoloring.com" style="color: var(--primary-color);">support@artnumbercoloring.com</a></p>
 
+                <p>Email: <a href="mailto:support@artnumbercoloring.com"
 
+                        style="color: var(--primary-color);">support@artnumbercoloring.com</a></p>
 
                 <p>Mail: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
                 <p>Mail: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div class="last-updated">
 
             <div class="last-updated">
 
                 <p>Last updated: July 1, 2025</p>
 
                 <p>Last updated: July 1, 2025</p>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <footer>
 
     <footer>
 
         <div class="container footer-content">
 
         <div class="container footer-content">
 
-            <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+            <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
             <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 94 - 82
test/video-colring-pages.html
Vedi File 

@@ -1,21 +1,24 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Video Story Coloring Pages - Art Number Coloring</title>
 
+    <title>Video Story Coloring Pages - Art Color</title>
 
     <!-- 引入HLS.js库 -->
 
     <!-- 引入HLS.js库 -->
 
     <script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.14/dist/hls.min.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.14/dist/hls.min.js"></script>
 
     <!-- SEO 元标签 -->
 
     <!-- SEO 元标签 -->
 
-    <meta name="description" content="Explore our collection of video story coloring pages! Watch fun videos and color the memorable moments. Perfect for kids and adults alike.">
 
+    <meta name="description"
 
+        content="Explore our collection of video story coloring pages! Watch fun videos and color the memorable moments. Perfect for kids and adults alike.">
 
     <meta name="keywords" content="coloring pages, video stories, printable coloring, art activities, kids crafts">
 
     <meta name="keywords" content="coloring pages, video stories, printable coloring, art activities, kids crafts">
 
     <meta name="robots" content="index, follow">
 
     <meta name="robots" content="index, follow">
 
-    <meta property="og:title" content="Video Story Coloring Pages - Art Number Coloring">
 
-    <meta property="og:description" content="Watch fascinating videos and turn them into beautiful coloring pages. Each video captures moments that our artists transform into detailed coloring designs.">
 
+    <meta property="og:title" content="Video Story Coloring Pages - Art Color">
 
+    <meta property="og:description"
 
+        content="Watch fascinating videos and turn them into beautiful coloring pages. Each video captures moments that our artists transform into detailed coloring designs.">
 
     <meta property="og:image" content="https://picsum.photos/1200/630?random=100">
 
     <meta property="og:image" content="https://picsum.photos/1200/630?random=100">
 
     <meta property="og:url" content="https://artnumbercoloring.com/video-stories">
 
     <meta property="og:url" content="https://artnumbercoloring.com/video-stories">
 
     <meta property="og:type" content="website">
 
     <meta property="og:type" content="website">
 
-    
+
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --primary-color: #ff6b6b;
 
             --primary-color: #ff6b6b;
 
@@ -25,26 +28,26 @@
 
             --light-text: #666;
 
             --light-text: #666;
 
             --background-color: #f9f9f9;
 
             --background-color: #f9f9f9;
 
         }
 
         }
 
-        
+
 
         * {
 
         * {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
         }
 
         }
 
-        
+
 
         body {
 
         body {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             line-height: 1.6;
 
             line-height: 1.6;
 
         }
 
         }
 
-        
+
 
         .container {
 
         .container {
 
             max-width: 1200px;
 
             max-width: 1200px;
 
             margin: 0 auto;
 
             margin: 0 auto;
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        
+
 
         header {
 
         header {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
@@ -52,42 +55,42 @@
 
             text-align: center;
 
             text-align: center;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .header-logo {
 
         .header-logo {
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
         }
 
         }
 
-        
+
 
         .breadcrumb {
 
         .breadcrumb {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         .breadcrumb a {
 
         .breadcrumb a {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
 
-        
+
 
         .breadcrumb a:hover {
 
         .breadcrumb a:hover {
 
             text-decoration: underline;
 
             text-decoration: underline;
 
         }
 
         }
 
-        
+
 
         .page-title {
 
         .page-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .page-description {
 
         .page-description {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             max-width: 800px;
 
             max-width: 800px;
 
             margin: 0 auto 50px;
 
             margin: 0 auto 50px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         /* 视频故事卡片样式 */
 
         /* 视频故事卡片样式 */
 
         .video-story-card {
 
         .video-story-card {
 
             background-color: white;
 
             background-color: white;
 
@@ -96,33 +99,34 @@
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
             overflow: hidden;
 
             overflow: hidden;
 
         }
 
         }
 
-        
+
 
         .story-content {
 
         .story-content {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: 1fr;
 
             grid-template-columns: 1fr;
 
             gap: 20px;
 
             gap: 20px;
 
         }
 
         }
 
-        
+
 
         @media (min-width: 768px) {
 
         @media (min-width: 768px) {
 
             .story-content {
 
             .story-content {
 
                 grid-template-columns: 1fr 1.5fr;
 
                 grid-template-columns: 1fr 1.5fr;
 
             }
 
             }
 
         }
 
         }
 
-        
+
 
         /* 视频区域 */
 
         /* 视频区域 */
 
         .video-wrapper {
 
         .video-wrapper {
 
             position: relative;
 
             position: relative;
 
             background-color: #000;
 
             background-color: #000;
 
             overflow: hidden;
 
             overflow: hidden;
 
-            aspect-ratio: 9/16; /* 竖版视频比例 */
 
+            aspect-ratio: 9/16;
 
+            /* 竖版视频比例 */
 
         }
 
         }
 
-        
+
 
         .video-wrapper video {
 
         .video-wrapper video {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
         }
 
         }
 
-        
+
 
         .play-button {
 
         .play-button {
 
             position: absolute;
 
             position: absolute;
 
             top: 50%;
 
             top: 50%;
 
@@ -139,12 +143,12 @@
 
             cursor: pointer;
 
             cursor: pointer;
 
             z-index: 10;
 
             z-index: 10;
 
         }
 
         }
 
-        
+
 
         .play-button:hover {
 
         .play-button:hover {
 
             background-color: rgba(255, 107, 107, 1);
 
             background-color: rgba(255, 107, 107, 1);
 
             transform: translate(-50%, -50%) scale(1.1);
 
             transform: translate(-50%, -50%) scale(1.1);
 
         }
 
         }
 
-        
+
 
         .play-button::after {
 
         .play-button::after {
 
             content: "";
 
             content: "";
 
             width: 0;
 
             width: 0;
 
@@ -154,30 +158,30 @@
 
             border-left: 20px solid white;
 
             border-left: 20px solid white;
 
             margin-left: 5px;
 
             margin-left: 5px;
 
         }
 
         }
 
-        
+
 
         /* 填色页预览区域 */
 
         /* 填色页预览区域 */
 
         .coloring-pages {
 
         .coloring-pages {
 
             padding: 20px;
 
             padding: 20px;
 
         }
 
         }
 
-        
+
 
         .story-title {
 
         .story-title {
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .story-description {
 
         .story-description {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .coloring-grid {
 
         .coloring-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 
             gap: 15px;
 
             gap: 15px;
 
         }
 
         }
 
-        
+
 
         .coloring-item {
 
         .coloring-item {
 
             position: relative;
 
             position: relative;
 
             border-radius: 8px;
 
             border-radius: 8px;
 
@@ -186,18 +190,19 @@
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
             cursor: pointer;
 
             cursor: pointer;
 
         }
 
         }
 
-        
+
 
         .coloring-item:hover {
 
         .coloring-item:hover {
 
             transform: translateY(-5px);
 
             transform: translateY(-5px);
 
         }
 
         }
 
-        
+
 
         .coloring-item img {
 
         .coloring-item img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
-            aspect-ratio: 1/1; /* 1:1 线稿缩略图 */
 
+            aspect-ratio: 1/1;
 
+            /* 1:1 线稿缩略图 */
 
         }
 
         }
 
-        
+
 
         .coloring-overlay {
 
         .coloring-overlay {
 
             position: absolute;
 
             position: absolute;
 
             bottom: 0;
 
             bottom: 0;
 
@@ -209,7 +214,7 @@
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             font-weight: 600;
 
             font-weight: 600;
 
         }
 
         }
 
-        
+
 
         /* 分页控件 */
 
         /* 分页控件 */
 
         .pagination {
 
         .pagination {
 
             display: flex;
 
             display: flex;
 
@@ -217,7 +222,7 @@
 
             align-items: center;
 
             align-items: center;
 
             margin: 40px 0;
 
             margin: 40px 0;
 
         }
 
         }
 
-        
+
 
         .pagination-item {
 
         .pagination-item {
 
             width: 35px;
 
             width: 35px;
 
             height: 35px;
 
             height: 35px;
 
@@ -230,26 +235,26 @@
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .pagination-item.active {
 
         .pagination-item.active {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         .pagination-item:hover:not(.active) {
 
         .pagination-item:hover:not(.active) {
 
             background-color: #f0f0f0;
 
             background-color: #f0f0f0;
 
         }
 
         }
 
-        
+
 
         /* 响应式设计 */
 
         /* 响应式设计 */
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .story-title {
 
             .story-title {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
-            
+
 
             .coloring-grid {
 
             .coloring-grid {
 
                 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 
                 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 
                 gap: 10px;
 
                 gap: 10px;
 
@@ -257,22 +262,24 @@
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <header>
 
     <header>
 
         <div class="container">
 
         <div class="container">
 
-            <div class="header-logo">Art Number Coloring</div>
 
+            <div class="header-logo">Art Color</div>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Free Printable Coloring Pages and Birthday Cards</p>
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 
-    
+
 
     <div class="container">
 
     <div class="container">
 
         <div class="breadcrumb">
 
         <div class="breadcrumb">
 
             <a href="/">Home</a> &gt; Video Story Coloring Pages
 
             <a href="/">Home</a> &gt; Video Story Coloring Pages
 
         </div>
 
         </div>
 
-        
+
 
         <h1 class="page-title">Video Story Coloring Pages</h1>
 
         <h1 class="page-title">Video Story Coloring Pages</h1>
 
-        <p class="page-description">Watch fascinating real-life stories and turn them into beautiful coloring pages. Each video captures moments that our artists transform into detailed coloring designs.</p>
 
-        
+        <p class="page-description">Watch fascinating real-life stories and turn them into beautiful coloring pages.
 
+            Each video captures moments that our artists transform into detailed coloring designs.</p>
 
+
 
         <!-- 视频故事卡片 -->
 
         <!-- 视频故事卡片 -->
 
         <div class="video-story-card" data-video-id="video1">
 
         <div class="video-story-card" data-video-id="video1">
 
             <div class="story-content">
 
             <div class="story-content">
 
@@ -283,12 +290,13 @@
 
                     </video>
 
                     </video>
 
                     <div class="play-button"></div>
 
                     <div class="play-button"></div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <!-- 填色页预览区域 -->
 
                 <!-- 填色页预览区域 -->
 
                 <div class="coloring-pages">
 
                 <div class="coloring-pages">
 
                     <h3 class="story-title">Summer at the Beach</h3>
 
                     <h3 class="story-title">Summer at the Beach</h3>
 
-                    <p class="story-description">Watch a beautiful summer day at the beach and color the memorable moments! Build sandcastles, play volleyball, and enjoy the sunset.</p>
 
-                    
+                    <p class="story-description">Watch a beautiful summer day at the beach and color the memorable
 
+                        moments! Build sandcastles, play volleyball, and enjoy the sunset.</p>
 
+
 
                     <div class="coloring-grid">
 
                     <div class="coloring-grid">
 
                         <div class="coloring-item" onclick="window.location.href='#coloring1'">
 
                         <div class="coloring-item" onclick="window.location.href='#coloring1'">
 
                             <img src="https://picsum.photos/400/400?random=11" alt="Beach sandcastle coloring page">
 
                             <img src="https://picsum.photos/400/400?random=11" alt="Beach sandcastle coloring page">
 
@@ -302,7 +310,7 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <div class="video-story-card" data-video-id="video2">
 
         <div class="video-story-card" data-video-id="video2">
 
             <div class="story-content">
 
             <div class="story-content">
 
                 <!-- 视频区域 -->
 
                 <!-- 视频区域 -->
 
@@ -312,12 +320,13 @@
 
                     </video>
 
                     </video>
 
                     <div class="play-button"></div>
 
                     <div class="play-button"></div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <!-- 填色页预览区域 -->
 
                 <!-- 填色页预览区域 -->
 
                 <div class="coloring-pages">
 
                 <div class="coloring-pages">
 
                     <h3 class="story-title">A Day at the Farm</h3>
 
                     <h3 class="story-title">A Day at the Farm</h3>
 
-                    <p class="story-description">Experience a day on the farm with our friendly animals. Feed the chickens, milk the cows, and harvest fresh vegetables.</p>
 
-                    
+                    <p class="story-description">Experience a day on the farm with our friendly animals. Feed the
 
+                        chickens, milk the cows, and harvest fresh vegetables.</p>
 
+
 
                     <div class="coloring-grid">
 
                     <div class="coloring-grid">
 
                         <div class="coloring-item" onclick="window.location.href='#coloring5'">
 
                         <div class="coloring-item" onclick="window.location.href='#coloring5'">
 
                             <img src="https://picsum.photos/400/400?random=21" alt="Farm chickens coloring page">
 
                             <img src="https://picsum.photos/400/400?random=21" alt="Farm chickens coloring page">
 
@@ -327,7 +336,7 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <div class="video-story-card" data-video-id="video3">
 
         <div class="video-story-card" data-video-id="video3">
 
             <div class="story-content">
 
             <div class="story-content">
 
                 <!-- 视频区域 -->
 
                 <!-- 视频区域 -->
 
@@ -337,12 +346,13 @@
 
                     </video>
 
                     </video>
 
                     <div class="play-button"></div>
 
                     <div class="play-button"></div>
 
                 </div>
 
                 </div>
 
-                
+
 
                 <!-- 填色页预览区域 -->
 
                 <!-- 填色页预览区域 -->
 
                 <div class="coloring-pages">
 
                 <div class="coloring-pages">
 
                     <h3 class="story-title">Under the Sea Adventure</h3>
 
                     <h3 class="story-title">Under the Sea Adventure</h3>
 
-                    <p class="story-description">Dive into the ocean and meet colorful fish, playful dolphins, and majestic whales in this exciting underwater journey.</p>
 
-                    
+                    <p class="story-description">Dive into the ocean and meet colorful fish, playful dolphins, and
 
+                        majestic whales in this exciting underwater journey.</p>
 
+
 
                     <div class="coloring-grid">
 
                     <div class="coloring-grid">
 
                         <div class="coloring-item" onclick="window.location.href='#coloring9'">
 
                         <div class="coloring-item" onclick="window.location.href='#coloring9'">
 
                             <img src="https://picsum.photos/400/400?random=31" alt="Underwater clownfish coloring page">
 
                             <img src="https://picsum.photos/400/400?random=31" alt="Underwater clownfish coloring page">
 
@@ -352,22 +362,23 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <!-- 分页控件 -->
 
         <!-- 分页控件 -->
 
         <div class="pagination">
 
         <div class="pagination">
 
-            <a href="#" class="pagination-item"><</a>
 
-            <a href="#" class="pagination-item active">1</a>
 
-            <a href="#" class="pagination-item">2</a>
 
-            <a href="#" class="pagination-item">3</a>
 
-            <span class="pagination-item">...</span>
 
-            <a href="#" class="pagination-item">10</a>
 
-            <a href="#" class="pagination-item">></a>
 
+            <a href="#" class="pagination-item">
 
+                << /a>
 
+                    <a href="#" class="pagination-item active">1</a>
 
+                    <a href="#" class="pagination-item">2</a>
 
+                    <a href="#" class="pagination-item">3</a>
 
+                    <span class="pagination-item">...</span>
 
+                    <a href="#" class="pagination-item">10</a>
 
+                    <a href="#" class="pagination-item">></a>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    
+
 
     <footer>
 
     <footer>
 
         <div class="container footer-content">
 
         <div class="container footer-content">
 
-            <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
 
+            <p>Art Color - Free Printable Coloring Pages and Birthday Cards</p>
 
             <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
             <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
@@ -379,34 +390,34 @@
 
             video2: 'https://example.com/video2.m3u8',
 
             video2: 'https://example.com/video2.m3u8',
 
             video3: 'https://example.com/video3.m3u8'
 
             video3: 'https://example.com/video3.m3u8'
 
         };
 
         };
 
-        
+
 
         // 当前播放的视频和HLS实例
 
         // 当前播放的视频和HLS实例
 
         let currentVideo = null;
 
         let currentVideo = null;
 
         let currentHls = null;
 
         let currentHls = null;
 
-        
+
 
         // 初始化所有视频播放器
 
         // 初始化所有视频播放器
 
         document.addEventListener('DOMContentLoaded', () => {
 
         document.addEventListener('DOMContentLoaded', () => {
 
             const videoCards = document.querySelectorAll('.video-story-card');
 
             const videoCards = document.querySelectorAll('.video-story-card');
 
-            
+
 
             videoCards.forEach(card => {
 
             videoCards.forEach(card => {
 
                 const videoId = card.getAttribute('data-video-id');
 
                 const videoId = card.getAttribute('data-video-id');
 
                 const videoWrapper = card.querySelector('.video-wrapper');
 
                 const videoWrapper = card.querySelector('.video-wrapper');
 
                 const video = videoWrapper.querySelector('video');
 
                 const video = videoWrapper.querySelector('video');
 
                 const playButton = videoWrapper.querySelector('.play-button');
 
                 const playButton = videoWrapper.querySelector('.play-button');
 
-                
+
 
                 // 初始化HLS播放器
 
                 // 初始化HLS播放器
 
                 initHlsPlayer(video, videoSources[videoId]);
 
                 initHlsPlayer(video, videoSources[videoId]);
 
-                
+
 
                 // 点击视频区域播放/暂停
 
                 // 点击视频区域播放/暂停
 
                 videoWrapper.addEventListener('click', (e) => {
 
                 videoWrapper.addEventListener('click', (e) => {
 
                     // 如果点击的是视频控件，则不处理
 
                     // 如果点击的是视频控件，则不处理
 
                     if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') {
 
                     if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') {
 
                         return;
 
                         return;
 
                     }
 
                     }
 
-                    
+
 
                     toggleVideoPlay(videoWrapper);
 
                     toggleVideoPlay(videoWrapper);
 
                 });
 
                 });
 
-                
+
 
                 // 视频结束时显示播放按钮
 
                 // 视频结束时显示播放按钮
 
                 video.addEventListener('ended', () => {
 
                 video.addEventListener('ended', () => {
 
                     playButton.style.display = 'flex';
 
                     playButton.style.display = 'flex';
 
@@ -414,7 +425,7 @@
 
                 });
 
                 });
 
             });
 
             });
 
         });
 
         });
 
-        
+
 
         // 初始化HLS播放器
 
         // 初始化HLS播放器
 
         function initHlsPlayer(videoElement, videoSrc) {
 
         function initHlsPlayer(videoElement, videoSrc) {
 
             if (Hls.isSupported()) {
 
             if (Hls.isSupported()) {
 
@@ -422,10 +433,10 @@
 
                     maxBufferLength: 30,
 
                     maxBufferLength: 30,
 
                     maxMaxBufferLength: 60
 
                     maxMaxBufferLength: 60
 
                 });
 
                 });
 
-                
+
 
                 hls.loadSource(videoSrc);
 
                 hls.loadSource(videoSrc);
 
                 hls.attachMedia(videoElement);
 
                 hls.attachMedia(videoElement);
 
-                
+
 
                 return hls;
 
                 return hls;
 
             }
 
             }
 
             // 浏览器原生支持HLS
 
             // 浏览器原生支持HLS
 
@@ -433,20 +444,20 @@
 
                 videoElement.src = videoSrc;
 
                 videoElement.src = videoSrc;
 
                 return null;
 
                 return null;
 
             }
 
             }
 
-            
+
 
             return null;
 
             return null;
 
         }
 
         }
 
-        
+
 
         // 切换视频播放状态
 
         // 切换视频播放状态
 
         function toggleVideoPlay(videoWrapper) {
 
         function toggleVideoPlay(videoWrapper) {
 
             const video = videoWrapper.querySelector('video');
 
             const video = videoWrapper.querySelector('video');
 
             const playButton = videoWrapper.querySelector('.play-button');
 
             const playButton = videoWrapper.querySelector('.play-button');
 
-            
+
 
             // 如果有其他视频正在播放，先停止
 
             // 如果有其他视频正在播放，先停止
 
             if (currentVideo && currentVideo !== videoWrapper) {
 
             if (currentVideo && currentVideo !== videoWrapper) {
 
                 stopCurrentVideo();
 
                 stopCurrentVideo();
 
             }
 
             }
 
-            
+
 
             if (video.paused) {
 
             if (video.paused) {
 
                 video.play().then(() => {
 
                 video.play().then(() => {
 
                     playButton.style.display = 'none';
 
                     playButton.style.display = 'none';
 
@@ -461,17 +472,18 @@
 
                 currentVideo = null;
 
                 currentVideo = null;
 
             }
 
             }
 
         }
 
         }
 
-        
+
 
         // 停止当前播放的视频
 
         // 停止当前播放的视频
 
         function stopCurrentVideo() {
 
         function stopCurrentVideo() {
 
             if (currentVideo) {
 
             if (currentVideo) {
 
                 const video = currentVideo.querySelector('video');
 
                 const video = currentVideo.querySelector('video');
 
                 const playButton = currentVideo.querySelector('.play-button');
 
                 const playButton = currentVideo.querySelector('.play-button');
 
-                
+
 
                 video.pause();
 
                 video.pause();
 
                 playButton.style.display = 'flex';
 
                 playButton.style.display = 'flex';
 
             }
 
             }
 
         }
 
         }
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 1 - 1
views/footer.ejs
Vedi File 

@@ -10,5 +10,5 @@
 
             <%= translate.policy[lang] %>
 
             <%= translate.policy[lang] %>
 
         </a>
 
         </a>
 
     </div>
 
     </div>
 
-    <p>Copyright &copy; 2025 Art Number Coloring All Rights Reserved.</p>
 
+    <p>Copyright &copy; 2025 Art Color All Rights Reserved.</p>
 
 </footer>
 
 </footer>

+ 4 - 4
views/header.ejs
Vedi File 

@@ -56,15 +56,15 @@
 
           <%= translate.policy[lang] %>
 
           <%= translate.policy[lang] %>
 
         </a>
 
         </a>
 
         <div class="divider"></div>
 
         <div class="divider"></div>
 
-        <p class="copyright">Copyright &copy; 2025 Art Number Coloring All Rights Reserved</p>
 
+        <p class="copyright">Copyright &copy; 2025 Art Color All Rights Reserved</p>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
 
 
-    <!-- <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , alt="Art Number Coloring"></a> -->
 
+    <!-- <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , alt="Art Color"></a> -->
 
 
 
     <a href="/<%= lang %>"><img src="/assets/icon/icon.webp" , class="logo" , width="42px" height="42px"
 
     <a href="/<%= lang %>"><img src="/assets/icon/icon.webp" , class="logo" , width="42px" height="42px"
 
-        alt="Art Number Coloring Logo"></a>
 
-    <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , width="160px" height="60px" alt="Art Number Coloring"></a>
 
+        alt="Art Color Logo"></a>
 
+    <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , width="160px" height="60px" alt="Art Color"></a>
 
 
 
   </div>
 
   </div>

+ 13 - 13
views/index.ejs
Vedi File 

@@ -11,7 +11,7 @@
 
       {
 
       {
 
         "@context": "https://schema.org",
 
         "@context": "https://schema.org",
 
         "@type": "WebPage",
 
         "@type": "WebPage",
 
-        "name": "Art Number Coloring",
 
+        "name": "Art Color",
 
         "description": "<%= description %>",
 
         "description": "<%= description %>",
 
         "url": "https://art.pcoloring.com",
 
         "url": "https://art.pcoloring.com",
 
         "mainEntityOfPage": "https://art.pcoloring.com",
 
         "mainEntityOfPage": "https://art.pcoloring.com",
 
@@ -49,19 +49,19 @@
 
 
 
 <body>
 
 <body>
 
   <%- include('header') %>
 
   <%- include('header') %>
 
-  <%- include('intro-section') %>
 
-  <%- include('video-story-section') %>
 
-  <%- include('tag-section') %>
 
-  <%- include('latest-section') %>
 
-  <%- include('album-section') %>
 
-  <%- include('designer-section') %>
 
-  <%- include('special-section') %>
 
-  <%- include('tag-cloud') %>
 
-  <%- include('footer') %>
 
-  <%- include('cookie-banner') %>
 
-  <div style="height: 50px;"></div>
 
+    <%- include('intro-section') %>
 
+      <%- include('video-story-section') %>
 
+        <%- include('tag-section') %>
 
+          <%- include('latest-section') %>
 
+            <%- include('album-section') %>
 
+              <%- include('designer-section') %>
 
+                <%- include('special-section') %>
 
+                  <%- include('tag-cloud') %>
 
+                    <%- include('footer') %>
 
+                      <%- include('cookie-banner') %>
 
+                        <div style="height: 50px;"></div>
 
 
 
-  <script src="/scripts/progress.js"></script>
 
+                        <script src="/scripts/progress.js"></script>
 
 </body>
 
 </body>

+ 1 - 1
views/info.ejs
Vedi File 

@@ -86,7 +86,7 @@
 
             </li>
 
             </li>
 
           </ul>
 
           </ul>
 
         </div>
 
         </div>
 
-        <div class="app-name">Art Number Coloring</div>
 
+        <div class="app-name">Art Color</div>
 
         <p class="app-description">
 
         <p class="app-description">
 
           <%= translate.appIntroduction[lang] %>
 
           <%= translate.appIntroduction[lang] %>
 
         </p>
 
         </p>

+ 1 - 1
views/intro-section.ejs
Vedi File 

@@ -2,7 +2,7 @@
 
   <h1>
 
   <h1>
 
     <%= translate.introTitle[lang] %>
 
     <%= translate.introTitle[lang] %>
 
   </h1>
 
   </h1>
 
-  <span style="font-size: 24px; font-weight: bold; color: #ff4081">Art Number Coloring</span>
 
+  <span style="font-size: 24px; font-weight: bold; color: #ff4081">Art Color</span>
 
   <span style="font-size: 18px;">
 
   <span style="font-size: 18px;">
 
     <%= translate.introText[lang] %>
 
     <%= translate.introText[lang] %>
 
   </span>
 
   </span>

+ 6 - 6
views/v2/about.ejs
Vedi File 

@@ -4,13 +4,13 @@
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>About - Art Number Coloring</title>
 
+    <title>About - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
             --art-color: #ff9f1c;
 
             --art-color: #ff9f1c;
 
-            /* 用于Art Number Coloring相关的高亮颜色 */
 
+            /* 用于Art Color相关的高亮颜色 */
 
         }
 
         }
 
 
 
         .about-grid {
 
         .about-grid {
 
@@ -103,7 +103,7 @@
 
             right: -10px;
 
             right: -10px;
 
         }
 
         }
 
 
 
-        /* Art Number Coloring相关里程碑的特殊样式 */
 
+        /* Art Color相关里程碑的特殊样式 */
 
         .timeline-item.art-related::after {
 
         .timeline-item.art-related::after {
 
             background-color: var(--art-color);
 
             background-color: var(--art-color);
 
             transform: scale(1.3);
 
             transform: scale(1.3);
 
@@ -297,7 +297,7 @@
 
         <main class="container">
 
         <main class="container">
 
             <section>
 
             <section>
 
                 <h1>About Us</h1>
 
                 <h1>About Us</h1>
 
-                <p>Welcome to Art Number Coloring, your go-to destination for high-quality, free printable coloring
 
+                <p>Welcome to Art Color, your go-to destination for high-quality, free printable coloring
 
                     pages and digital coloring experiences. We're passionate about bringing creativity and joy to people
 
                     pages and digital coloring experiences. We're passionate about bringing creativity and joy to people
 
                     of all ages through the art of coloring.</p>
 
                     of all ages through the art of coloring.</p>
 
 
 
@@ -309,7 +309,7 @@
 
                 <div class="about-grid">
 
                 <div class="about-grid">
 
                     <div class="about-item">
 
                     <div class="about-item">
 
                         <h3>Our Mission</h3>
 
                         <h3>Our Mission</h3>
 
-                        <p>At Art Number Coloring, our mission is to provide a diverse collection of coloring pages that
 
+                        <p>At Art Color, our mission is to provide a diverse collection of coloring pages that
 
                             inspire imagination, reduce stress, and promote relaxation, aiming to onboard 1 million new
 
                             inspire imagination, reduce stress, and promote relaxation, aiming to onboard 1 million new
 
                             artists to our platform by 2035. We believe that coloring is not just for kids—it's a
 
                             artists to our platform by 2035. We believe that coloring is not just for kids—it's a
 
                             therapeutic activity that can bring out the artist in everyone.</p>
 
                             therapeutic activity that can bring out the artist in everyone.</p>
 
@@ -372,7 +372,7 @@
 
 
 
                     <div class="timeline-item art-related">
 
                     <div class="timeline-item art-related">
 
                         <div class="timeline-year">2025</div>
 
                         <div class="timeline-year">2025</div>
 
-                        <p>Launches the web version of "Art Number Coloring", bringing high-quality coloring content to
 
+                        <p>Launches the web version of "Art Color", bringing high-quality coloring content to
 
                             a wider audience.</p>
 
                             a wider audience.</p>
 
                     </div>
 
                     </div>

+ 3 - 3
views/v2/album.ejs
Vedi File 

@@ -22,12 +22,12 @@
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <!-- **Universal Link 路径** -->
 
   <!-- **Universal Link 路径** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
-  <meta property="al:ios:app_name" content="Art Number Coloring Book" /> <!-- **iOS 应用名称** -->
 
+  <meta property="al:ios:app_name" content="Art Color Book" /> <!-- **iOS 应用名称** -->
 
 
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <!-- ** Universal Link 路径** -->
 
   <!-- ** Universal Link 路径** -->
 
-  <meta property="al:android:app_name" content="Art Number Coloring Book" /> <!-- **Android 应用名称** -->
 
+  <meta property="al:android:app_name" content="Art Color Book" /> <!-- **Android 应用名称** -->
 
 
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
 
 
@@ -235,7 +235,7 @@
 
         <h1>
 
         <h1>
 
           <%= data.title%>
 
           <%= data.title%>
 
         </h1>
 
         </h1>
 
-        <h4 style="margin-bottom: 40px;">By Art Number Coloring / <%=data.timeCreate%>
 
+        <h4 style="margin-bottom: 40px;">By Art Color / <%=data.timeCreate%>
 
         </h4>
 
         </h4>
 
         <div class="poster-image">
 
         <div class="poster-image">
 
           <img src="<%= data.cover %>" alt="<%= data.title%>">
 
           <img src="<%= data.cover %>" alt="<%= data.title%>">

+ 49 - 36
views/v2/albums.ejs
Vedi File 

@@ -6,12 +6,14 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <title>Free Printable Coloring Page Albums</title>
 
   <title>Free Printable Coloring Page Albums</title>
 
-  <meta name="description" content="Explore our collection of free art number coloring page albums. Download, print, or color online instantly—perfect for all ages. Find your favorite designs today!">
 
+  <meta name="description"
 
+    content="Explore our collection of free Art Color page albums. Download, print, or color online instantly—perfect for all ages. Find your favorite designs today!">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <style>
 
   <style>
 
     h1 {
 
     h1 {
 
       color: var(--secondary-color);
 
       color: var(--secondary-color);
 
     }
 
     }
 
+
 
     .collection-grid {
 
     .collection-grid {
 
       display: grid;
 
       display: grid;
 
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
@@ -88,7 +90,7 @@
 
     }
 
     }
 
   </style>
 
   </style>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "CollectionPage",
 
   "@type": "CollectionPage",
 
@@ -116,7 +118,9 @@
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
-  <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop' async='async'></script>
 
+  <script type='text/javascript'
 
+    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
 
+    async='async'></script>
 
 </head>
 
 </head>
 
 <!-- Google tag (gtag.js) -->
 
 <!-- Google tag (gtag.js) -->
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
@@ -127,50 +131,59 @@
 
 
 
   gtag('config', 'G-JBGGVGLHTP');
 
   gtag('config', 'G-JBGGVGLHTP');
 
 </script>
 
 </script>
 
+
 
 <body>
 
 <body>
 
   <%- include('header') %>
 
   <%- include('header') %>
 
 
 
-  <main class="container">
 
-    <div class="breadcrumb">
 
-      <a href="/">Home</a> &gt; Coloring Page Albums
 
-    </div>
 
-    <section>
 
-      <h1>Coloring Page Albums</h1>
 
-      <p>Dive into our vibrant collection of art number coloring page albums, where creativity knows no bounds. Every album is packed with captivating designs, and the best part? They’re all completely free to enjoy. Download your favorites with a single click, print them out for a hands-on coloring experience, or dive right in and color online—whatever suits your mood. Whether you’re a kid looking for fun or an adult seeking a relaxing pastime, our albums have something for everyone.</p>
 
-      
-      <div class="collection-grid">
 
-
 
-      <% data.forEach(item=> { %>
 
-
 
-        <a href="/coloring-page-album/<%= item._id %>">
 
-          <div class="collection-card">
 
-            <div class="collection-image">
 
-              <img src="<%= item.icon %>" alt="<%= item.title %>">
 
-            </div>
 
-            <div class="collection-content">
 
-              <h2 class="collection-title"><%= item.title %></h2>
 
-              <div class="collection-description"><%= item.slogon %></div>
 
-            </div>
 
-          </div>
 
-        </a>
 
-        
-      <% }); %>
 
+    <main class="container">
 
+      <div class="breadcrumb">
 
+        <a href="/">Home</a> &gt; Coloring Page Albums
 
+      </div>
 
+      <section>
 
+        <h1>Coloring Page Albums</h1>
 
+        <p>Dive into our vibrant collection of Art Color page albums, where creativity knows no bounds. Every album is
 
+          packed with captivating designs, and the best part? They’re all completely free to enjoy. Download your
 
+          favorites with a single click, print them out for a hands-on coloring experience, or dive right in and color
 
+          online—whatever suits your mood. Whether you’re a kid looking for fun or an adult seeking a relaxing pastime,
 
+          our albums have something for everyone.</p>
 
 
 
+        <div class="collection-grid">
 
+
 
+          <% data.forEach(item=> { %>
 
+
 
+            <a href="/coloring-page-album/<%= item._id %>">
 
+              <div class="collection-card">
 
+                <div class="collection-image">
 
+                  <img src="<%= item.icon %>" alt="<%= item.title %>">
 
+                </div>
 
+                <div class="collection-content">
 
+                  <h2 class="collection-title">
 
+                    <%= item.title %>
 
+                  </h2>
 
+                  <div class="collection-description">
 
+                    <%= item.slogon %>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </a>
 
+
 
+            <% }); %>
 
+
 
+
 
+        </div>
 
+      </section>
 
 
 
-      </div>
 
-    </section>
 
 
 
+    </main>
 
 
 
-  </main>
 
+    <%- include('footer') %>
 
 
 
-  <%- include('footer') %>
 
 
 
 
 
-  
-  <script src="/scripts/script.js"></script>
 
+      <script src="/scripts/script.js"></script>
 
 
 
-  <script>
 
-  </script>
 
+      <script>
 
+      </script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 11 - 11
views/v2/app.ejs
Vedi File 

@@ -5,8 +5,8 @@
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="description"
 
     <meta name="description"
 
-        content="Art Number Coloring - The best color by number app with daily updated HD pictures, offline coloring, and easy sharing. Free for everyone!">
 
-    <title>Art Number Coloring - Color by Number App</title>
 
+        content="Art Color - The best color by number app with daily updated HD pictures, offline coloring, and easy sharing. Free for everyone!">
 
+    <title>Art Color - Color by Number App</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <style>
 
     <style>
 
         :root {
 
         :root {
 
@@ -729,10 +729,10 @@
 
   "mainEntity": [
 
   "mainEntity": [
 
     {
 
     {
 
       "@type": "Question",
 
       "@type": "Question",
 
-      "name": "Is Art Number Coloring really free?",
 
+      "name": "Is Art Color really free?",
 
       "acceptedAnswer": {
 
       "acceptedAnswer": {
 
         "@type": "Answer",
 
         "@type": "Answer",
 
-        "text": "Yes! Art Number Coloring is completely free to download and use. There are no hidden costs or subscriptions required. You can color as many pictures as you like without any limitations."
 
+        "text": "Yes! Art Color is completely free to download and use. There are no hidden costs or subscriptions required. You can color as many pictures as you like without any limitations."
 
       }
 
       }
 
     },
 
     },
 
     {
 
     {
 
@@ -761,7 +761,7 @@
 
     },
 
     },
 
     {
 
     {
 
       "@type": "Question",
 
       "@type": "Question",
 
-      "name": "Is Art Number Coloring suitable for kids?",
 
+      "name": "Is Art Color suitable for kids?",
 
       "acceptedAnswer": {
 
       "acceptedAnswer": {
 
         "@type": "Answer",
 
         "@type": "Answer",
 
         "text": "Yes! Our app is designed to be kid-friendly and is a great way for children to learn about colors, numbers, and develop their creativity. We have many coloring pages specifically designed for children of all ages."
 
         "text": "Yes! Our app is designed to be kid-friendly and is a great way for children to learn about colors, numbers, and develop their creativity. We have many coloring pages specifically designed for children of all ages."
 
@@ -797,9 +797,9 @@
 
         <div class="container">
 
         <div class="container">
 
             <!-- APP 图标 -->
 
             <!-- APP 图标 -->
 
             <div class="app-icon">
 
             <div class="app-icon">
 
-                <img src="/assets/icon/logo_640x640.webp" alt="Art Number Coloring App Logo">
 
+                <img src="/assets/icon/logo_640x640.webp" alt="Art Color App Logo">
 
             </div>
 
             </div>
 
-            <h1 class="app-title">🎨 Art Number Coloring - Color by Number 🎨</h1>
 
+            <h1 class="app-title">🎨 Art Color - Color by Number 🎨</h1>
 
             <div class="app-subtitle">
 
             <div class="app-subtitle">
 
                 is one of the best paint by number coloring book with various categories of coloring pages.
 
                 is one of the best paint by number coloring book with various categories of coloring pages.
 
                 Coloring Pages are update everyday, you can always find images suite to you.
 
                 Coloring Pages are update everyday, you can always find images suite to you.
 
@@ -975,11 +975,11 @@
 
             <div class="faq-container">
 
             <div class="faq-container">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                     <div class="faq-question">
 
                     <div class="faq-question">
 
-                        <h3>Is Art Number Coloring really free?</h3>
 
+                        <h3>Is Art Color really free?</h3>
 
                         <i class="fa fa-chevron-down"></i>
 
                         <i class="fa fa-chevron-down"></i>
 
                     </div>
 
                     </div>
 
                     <div class="faq-answer">
 
                     <div class="faq-answer">
 
-                        <p>Yes! Art Number Coloring is completely free to download and use. There are no hidden costs or
 
+                        <p>Yes! Art Color is completely free to download and use. There are no hidden costs or
 
                             subscriptions required. You can color as many pictures as you like without any limitations.
 
                             subscriptions required. You can color as many pictures as you like without any limitations.
 
                         </p>
 
                         </p>
 
                     </div>
 
                     </div>
 
@@ -1022,7 +1022,7 @@
 
 
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                 <div class="faq-item" onclick="toggleFaq(this)">
 
                     <div class="faq-question">
 
                     <div class="faq-question">
 
-                        <h3>Is Art Number Coloring suitable for kids?</h3>
 
+                        <h3>Is Art Color suitable for kids?</h3>
 
                         <i class="fa fa-chevron-down"></i>
 
                         <i class="fa fa-chevron-down"></i>
 
                     </div>
 
                     </div>
 
                     <div class="faq-answer">
 
                     <div class="faq-answer">
 
@@ -1050,7 +1050,7 @@
 
     <!-- 下载区域 -->
 
     <!-- 下载区域 -->
 
     <div class="app-download">
 
     <div class="app-download">
 
         <div class="container">
 
         <div class="container">
 
-            <h2 class="download-title">Download Art Number Coloring Today!</h2>
 
+            <h2 class="download-title">Download Art Color Today!</h2>
 
             <p class="download-subtitle">Join thousands of happy users who have discovered the joy of coloring with
 
             <p class="download-subtitle">Join thousands of happy users who have discovered the joy of coloring with
 
                 numbers.</p>
 
                 numbers.</p>

+ 13 - 7
views/v2/benefit-of-coloring-pages.ejs
Vedi File 

@@ -65,10 +65,13 @@
 
     }
 
     }
 
 
 
     .blog-content .internal-link {
 
     .blog-content .internal-link {
 
-      color: var(--primary-color); /* 或者您喜欢的颜色 */
 
+      color: var(--primary-color);
 
+      /* 或者您喜欢的颜色 */
 
       text-decoration: underline;
 
       text-decoration: underline;
 
-      font-weight: bold; /* 稍微加粗，使其更明显 */
 
+      font-weight: bold;
 
+      /* 稍微加粗，使其更明显 */
 
     }
 
     }
 
+
 
     .blog-content .internal-link:hover {
 
     .blog-content .internal-link:hover {
 
       color: var(--secondary-color);
 
       color: var(--secondary-color);
 
     }
 
     }
 
@@ -200,7 +203,7 @@
 
     }
 
     }
 
   </style>
 
   </style>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "BlogPosting",
 
   "@type": "BlogPosting",
 
@@ -216,11 +219,11 @@
 
   "dateModified": "2025-06-26T00:00:00+00:00",
 
   "dateModified": "2025-06-26T00:00:00+00:00",
 
   "author": {
 
   "author": {
 
     "@type": "Person",
 
     "@type": "Person",
 
-    "name": "Art Number Coloring"
 
+    "name": "Art Color"
 
   },
 
   },
 
   "publisher": {
 
   "publisher": {
 
     "@type": "Organization",
 
     "@type": "Organization",
 
-    "name": "Art Number Coloring",
 
+    "name": "Art Color",
 
     "logo": {
 
     "logo": {
 
       "@type": "ImageObject",
 
       "@type": "ImageObject",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
@@ -328,7 +331,8 @@
 
             <a href="https://art.pcoloring.com" target="_blank">art.pcoloring.com</a> to browse our extensive gallery of
 
             <a href="https://art.pcoloring.com" target="_blank">art.pcoloring.com</a> to browse our extensive gallery of
 
             free, printable coloring pages. With thousands of designs across every theme imaginable, there's something
 
             free, printable coloring pages. With thousands of designs across every theme imaginable, there's something
 
             for
 
             for
 
-            everyone!</p>
 
+            everyone!
 
+          </p>
 
           <a href="/coloring-page-gallery" class="cta-btn" target="_blank">Visit Gallery</a>
 
           <a href="/coloring-page-gallery" class="cta-btn" target="_blank">Visit Gallery</a>
 
           <a href="/coloring-pages" class="cta-btn" target="_blank">Browse Collections</a>
 
           <a href="/coloring-pages" class="cta-btn" target="_blank">Browse Collections</a>
 
         </div>
 
         </div>
 
@@ -338,7 +342,9 @@
 
         <ul>
 
         <ul>
 
           <li><strong>Choose the Right Tools:</strong> Invest in high-quality coloring tools like colored pencils,
 
           <li><strong>Choose the Right Tools:</strong> Invest in high-quality coloring tools like colored pencils,
 
             markers, or gel pens for a smoother coloring experience.
 
             markers, or gel pens for a smoother coloring experience.
 
-            <a href="/tips-tricks/choose-the-right-coloring-tools" class="internal-link">Learn more about choosing the best tools for your needs.</a></li>
 
+            <a href="/tips-tricks/choose-the-right-coloring-tools" class="internal-link">Learn more about choosing the
 
+              best tools for your needs.</a>
 
+          </li>
 
           <li><strong>Create a Relaxing Space:</strong> Set up a comfortable, well-lit area where you can color without
 
           <li><strong>Create a Relaxing Space:</strong> Set up a comfortable, well-lit area where you can color without
 
             distractions.</li>
 
             distractions.</li>
 
           <li><strong>Experiment with Colors:</strong> Don't be afraid to mix and match colors to create unique and
 
           <li><strong>Experiment with Colors:</strong> Don't be afraid to mix and match colors to create unique and

+ 4 - 4
views/v2/choose-the-right-coloring-tools.ejs
Vedi File 

@@ -7,7 +7,7 @@
 
   <meta name="description"
 
   <meta name="description"
 
     content="Discover how to choose the perfect coloring tools for your projects and keep them in top condition. Expert tips for beginners and advanced colorists.">
 
     content="Discover how to choose the perfect coloring tools for your projects and keep them in top condition. Expert tips for beginners and advanced colorists.">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
-  <title>Choosing and Caring for Your Coloring Tools - Art Number Coloring</title>
 
+  <title>Choosing and Caring for Your Coloring Tools - Art Color</title>
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <style>
 
   <style>
 
     h3 {
 
     h3 {
 
@@ -195,7 +195,7 @@
 
     }
 
     }
 
   </style>
 
   </style>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "BlogPosting",
 
   "@type": "BlogPosting",
 
@@ -211,11 +211,11 @@
 
   "dateModified": "2025-07-10T00:00:00+00:00",
 
   "dateModified": "2025-07-10T00:00:00+00:00",
 
   "author": {
 
   "author": {
 
     "@type": "Person",
 
     "@type": "Person",
 
-    "name": "Art Number Coloring"
 
+    "name": "Art Color"
 
   },
 
   },
 
   "publisher": {
 
   "publisher": {
 
     "@type": "Organization",
 
     "@type": "Organization",
 
-    "name": "Art Number Coloring",
 
+    "name": "Art Color",
 
     "logo": {
 
     "logo": {
 
       "@type": "ImageObject",
 
       "@type": "ImageObject",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",

+ 17 - 9
views/v2/color-combinations-guide.ejs
Vedi File 

@@ -6,7 +6,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="description"
 
     <meta name="description"
 
         content="Master color combinations for coloring pages with expert tips on complementary, analogous, and monochromatic schemes. Transform your artwork with harmonious color palettes.">
 
         content="Master color combinations for coloring pages with expert tips on complementary, analogous, and monochromatic schemes. Transform your artwork with harmonious color palettes.">
 
-    <title>Color Combinations That Work: A Complete Guide for Colorists - Art Number Coloring</title>
 
+    <title>Color Combinations That Work: A Complete Guide for Colorists - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
@@ -75,10 +75,13 @@
 
 
 
 
 
         .blog-content .internal-link {
 
         .blog-content .internal-link {
 
-            color: var(--primary-color); /* 或者您喜欢的颜色 */
 
+            color: var(--primary-color);
 
+            /* 或者您喜欢的颜色 */
 
             text-decoration: underline;
 
             text-decoration: underline;
 
-            font-weight: bold; /* 稍微加粗，使其更明显 */
 
+            font-weight: bold;
 
+            /* 稍微加粗，使其更明显 */
 
         }
 
         }
 
+
 
         .blog-content .internal-link:hover {
 
         .blog-content .internal-link:hover {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
         }
 
         }
 
@@ -284,7 +287,7 @@
 
         }
 
         }
 
     </style>
 
     </style>
 
 
 
-<script type="application/ld+json">
 
+    <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "BlogPosting",
 
   "@type": "BlogPosting",
 
@@ -300,11 +303,11 @@
 
   "dateModified": "2025-06-15T00:00:00+00:00",
 
   "dateModified": "2025-06-15T00:00:00+00:00",
 
   "author": {
 
   "author": {
 
     "@type": "Person",
 
     "@type": "Person",
 
-    "name": "Art Number Coloring"
 
+    "name": "Art Color"
 
   },
 
   },
 
   "publisher": {
 
   "publisher": {
 
     "@type": "Organization",
 
     "@type": "Organization",
 
-    "name": "Art Number Coloring",
 
+    "name": "Art Color",
 
     "logo": {
 
     "logo": {
 
       "@type": "ImageObject",
 
       "@type": "ImageObject",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
@@ -355,14 +358,16 @@
 
                     <span>Category: Coloring Tips & Tricks</span>
 
                     <span>Category: Coloring Tips & Tricks</span>
 
                 </div>
 
                 </div>
 
 
 
-                <img src="/assets/tips-tricks/color-combinations-guide.webp" alt="Color wheel with complementary and analogous color examples" class="blog-image">
 
+                <img src="/assets/tips-tricks/color-combinations-guide.webp"
 
+                    alt="Color wheel with complementary and analogous color examples" class="blog-image">
 
 
 
                 <p>Choosing the right color combinations can transform your coloring pages from ordinary to
 
                 <p>Choosing the right color combinations can transform your coloring pages from ordinary to
 
                     extraordinary. Whether you're coloring a vibrant mandala, a serene landscape, or a playful animal
 
                     extraordinary. Whether you're coloring a vibrant mandala, a serene landscape, or a playful animal
 
                     scene, understanding how colors interact is key to creating harmonious and eye-catching artwork.
 
                     scene, understanding how colors interact is key to creating harmonious and eye-catching artwork.
 
                     <strong>Our professional designers have pre-colored thousands of pages with expert color
 
                     <strong>Our professional designers have pre-colored thousands of pages with expert color
 
                         schemes</strong>—explore our online coloring feature to follow guided color palettes with just a
 
                         schemes</strong>—explore our online coloring feature to follow guided color palettes with just a
 
-                    few taps!</p>
 
+                    few taps!
 
+                </p>
 
 
 
                 <div class="online-feature">
 
                 <div class="online-feature">
 
                     <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
 
                     <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
 
@@ -553,7 +558,10 @@
 
                     is by practicing and discovering what works for you.</p>
 
                     is by practicing and discovering what works for you.</p>
 
 
 
                 <h2>Recommended Tools for Perfect Color Combinations</h2>
 
                 <h2>Recommended Tools for Perfect Color Combinations</h2>
 
-                <p>Invest in high-quality coloring tools to achieve the best results. For a comprehensive guide on selecting and maintaining your art supplies, check out our article on <a href="/tips-tricks/choose-the-right-coloring-tools" class="internal-link">Choosing and Caring for Your Coloring Tools</a>.</p>
 
+                <p>Invest in high-quality coloring tools to achieve the best results. For a comprehensive guide on
 
+                    selecting and maintaining your art supplies, check out our article on <a
 
+                        href="/tips-tricks/choose-the-right-coloring-tools" class="internal-link">Choosing and Caring
 
+                        for Your Coloring Tools</a>.</p>
 
                 <ul>
 
                 <ul>
 
                     <li><strong>Colored Pencils:</strong> Prismacolor, Faber-Castell, or Derwent for smooth blending
 
                     <li><strong>Colored Pencils:</strong> Prismacolor, Faber-Castell, or Derwent for smooth blending
 
                     </li>
 
                     </li>

+ 47 - 33
views/v2/coloring-page-collection.ejs
Vedi File 

@@ -5,7 +5,9 @@
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="description" content="<%= data.seoDescription %>">
 
   <meta name="description" content="<%= data.seoDescription %>">
 
-  <title><%= data.seoTitle %></title>
 
+  <title>
 
+    <%= data.seoTitle %>
 
+  </title>
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <style>
 
   <style>
 
@@ -152,7 +154,7 @@
 
     }
 
     }
 
   </style>
 
   </style>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "CollectionPage",
 
   "@type": "CollectionPage",
 
@@ -183,7 +185,9 @@
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
-  <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop' async='async'></script>
 
+  <script type='text/javascript'
 
+    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
 
+    async='async'></script>
 
 </head>
 
 </head>
 
 <!-- Google tag (gtag.js) -->
 
 <!-- Google tag (gtag.js) -->
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
@@ -207,7 +211,7 @@
 
         <h1>
 
         <h1>
 
           <%= data.title%>
 
           <%= data.title%>
 
         </h1>
 
         </h1>
 
-        <h4 style="margin-bottom: 40px;">By Art Number Coloring / <%=data.date%>
 
+        <h4 style="margin-bottom: 40px;">By Art Color / <%=data.date%>
 
         </h4>
 
         </h4>
 
         <div class="poster-image">
 
         <div class="poster-image">
 
           <img src="/assets/coloring-pages/<%=data.tag%>-3-1.webp" alt="<%= data.title%>">
 
           <img src="/assets/coloring-pages/<%=data.tag%>-3-1.webp" alt="<%= data.title%>">
 
@@ -233,16 +237,26 @@
 
                 <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
 
                 <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
 
               </div>
 
               </div>
 
               <div class="coloring-content">
 
               <div class="coloring-content">
 
-                <div class="coloring-title"><%= item.title %></div>
 
-                <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>"><%= item.user.username %></a></div>
 
+                <div class="coloring-title">
 
+                  <%= item.title %>
 
+                </div>
 
+                <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>">
 
+                    <%= item.user.username %>
 
+                  </a></div>
 
                 <div class="coloring-meta">
 
                 <div class="coloring-meta">
 
-                  <div class="date"><%= item.publishTime %></div>
 
-                  <div class="views"><%= item.totalStartCount ? item.totalStartCount : 0 %></div>
 
+                  <div class="date">
 
+                    <%= item.publishTime %>
 
+                  </div>
 
+                  <div class="views">
 
+                    <%= item.totalStartCount ? item.totalStartCount : 0 %>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="coloring-tags">
 
                 <div class="coloring-tags">
 
                   <% item.tags.forEach(tag=> { %>
 
                   <% item.tags.forEach(tag=> { %>
 
-                    <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>"><%= tag %></span></a>
 
-                  <% }); %>
 
+                    <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>">
 
+                        <%= tag %>
 
+                      </span></a>
 
+                    <% }); %>
 
                 </div>
 
                 </div>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
@@ -262,33 +276,33 @@
 
 
 
       <%- include(data.tips) %>
 
       <%- include(data.tips) %>
 
 
 
-      <section>
 
-        <h2>More Free Coloring Fun</h2>
 
-        <p>
 
-          <%=data.morefun.title %>
 
-        </p>
 
-        <ul>
 
-          <% data.morefun.links.forEach(item=> { %>
 
-            <li><a href="<%= item.link %>">
 
-                <%= item.title %>
 
-              </a></li>
 
-            <% }); %>
 
-        </ul>
 
-        <p>Or visit gallery to explore more coloring pages </p>
 
-        <ul>
 
-          <li><a href="/coloring-page-gallery">Coloring Page Gallery</a></li>
 
-        </ul>
 
-        <h2>Color With Us</h2>
 
-        <p>Don’t forget to follow us on social media where we post updates about our latest coloring pages!</p>
 
-      </section>
 
-
 
-      <%- include('comment') %>
 
+        <section>
 
+          <h2>More Free Coloring Fun</h2>
 
+          <p>
 
+            <%=data.morefun.title %>
 
+          </p>
 
+          <ul>
 
+            <% data.morefun.links.forEach(item=> { %>
 
+              <li><a href="<%= item.link %>">
 
+                  <%= item.title %>
 
+                </a></li>
 
+              <% }); %>
 
+          </ul>
 
+          <p>Or visit gallery to explore more coloring pages </p>
 
+          <ul>
 
+            <li><a href="/coloring-page-gallery">Coloring Page Gallery</a></li>
 
+          </ul>
 
+          <h2>Color With Us</h2>
 
+          <p>Don’t forget to follow us on social media where we post updates about our latest coloring pages!</p>
 
+        </section>
 
+
 
+        <%- include('comment') %>
 
     </main>
 
     </main>
 
 
 
     <%- include('footer') %>
 
     <%- include('footer') %>
 
 
 
-    <script src="/scripts/script.js"></script>
 
-    <script src="/scripts/progress2.js"></script>
 
+      <script src="/scripts/script.js"></script>
 
+      <script src="/scripts/progress2.js"></script>
 
 
 
 </body>
 
 </body>

+ 65 - 46
views/v2/coloring-pages.ejs
Vedi File 

@@ -6,12 +6,14 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <title>Free Printable Coloring Page Collections</title>
 
   <title>Free Printable Coloring Page Collections</title>
 
-  <meta name="description" content="Discover our extensive collection of coloring pages categorized by themes. Each category offers a variety of designs to suit every interest and skill level.">
 
+  <meta name="description"
 
+    content="Discover our extensive collection of coloring pages categorized by themes. Each category offers a variety of designs to suit every interest and skill level.">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <style>
 
   <style>
 
     h1 {
 
     h1 {
 
       color: var(--secondary-color);
 
       color: var(--secondary-color);
 
     }
 
     }
 
+
 
     .collection-grid {
 
     .collection-grid {
 
       display: grid;
 
       display: grid;
 
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
@@ -88,7 +90,7 @@
 
     }
 
     }
 
   </style>
 
   </style>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "CollectionPage",
 
   "@type": "CollectionPage",
 
@@ -127,7 +129,9 @@
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
-  <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop' async='async'></script>
 
+  <script type='text/javascript'
 
+    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
 
+    async='async'></script>
 
 </head>
 
 </head>
 
 <!-- Google tag (gtag.js) -->
 
 <!-- Google tag (gtag.js) -->
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
@@ -138,63 +142,78 @@
 
 
 
   gtag('config', 'G-JBGGVGLHTP');
 
   gtag('config', 'G-JBGGVGLHTP');
 
 </script>
 
 </script>
 
+
 
 <body>
 
 <body>
 
   <%- include('header') %>
 
   <%- include('header') %>
 
 
 
-  <main class="container">
 
-    <div class="breadcrumb">
 
-      <a href="/">Home</a> &gt; Coloring Page Collections
 
-    </div>
 
-    <section>
 
-      <h1>Coloring Page Collections</h1>
 
-      <p>Our carefully curated collection of coloring pages is a paradise for color enthusiasts! With a diverse range of styles, it includes simple patterns perfect for young children to develop color recognition skills, as well as intricate floral designs that satisfy adults seeking immersive creative experiences. Every piece is an exclusive original by Art Number Coloring, crafted with meticulous care.</p>
 
-      <p>You can <strong>download high-definition PDF</strong> versions of our collections, print them at any time to start your creative journey, or <strong>color digitally online</strong>—just tap to bring vibrant hues to life. No painting experience is required—even beginners can easily master the process, turning each coloring session into a magical journey of creating stunning artworks.</p>
 
-      
-      <div class="collection-grid">
 
-
 
-        <a href="/video-coloring-pages">
 
-          <div class="collection-card">
 
-            <div class="collection-image">
 
-              <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/vs-poster/480/67b2b23b9c09d12e648ea25a.webp" alt="Video Story Coloring Pages">
 
-            </div>
 
-            <div class="collection-content">
 
-              <h2 class="collection-title">Video Story Coloring Pages</h2>
 
-              <div class="collection-description">Watch fascinating videos and turn them into beautiful coloring pages. Each video captures moments that our artists transform into detailed coloring designs.</div>
 
+    <main class="container">
 
+      <div class="breadcrumb">
 
+        <a href="/">Home</a> &gt; Coloring Page Collections
 
+      </div>
 
+      <section>
 
+        <h1>Coloring Page Collections</h1>
 
+        <p>Our carefully curated collection of coloring pages is a paradise for color enthusiasts! With a diverse range
 
+          of styles, it includes simple patterns perfect for young children to develop color recognition skills, as well
 
+          as intricate floral designs that satisfy adults seeking immersive creative experiences. Every piece is an
 
+          exclusive original by Art Color, crafted with meticulous care.</p>
 
+        <p>You can <strong>download high-definition PDF</strong> versions of our collections, print them at any time to
 
+          start your creative journey, or <strong>color digitally online</strong>—just tap to bring vibrant hues to
 
+          life. No painting experience is required—even beginners can easily master the process, turning each coloring
 
+          session into a magical journey of creating stunning artworks.</p>
 
+
 
+        <div class="collection-grid">
 
+
 
+          <a href="/video-coloring-pages">
 
+            <div class="collection-card">
 
+              <div class="collection-image">
 
+                <img
 
+                  src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/vs-poster/480/67b2b23b9c09d12e648ea25a.webp"
 
+                  alt="Video Story Coloring Pages">
 
+              </div>
 
+              <div class="collection-content">
 
+                <h2 class="collection-title">Video Story Coloring Pages</h2>
 
+                <div class="collection-description">Watch fascinating videos and turn them into beautiful coloring
 
+                  pages. Each video captures moments that our artists transform into detailed coloring designs.</div>
 
+              </div>
 
             </div>
 
             </div>
 
-          </div>
 
-        </a>
 
+          </a>
 
 
 
-      <% list.forEach(item=> { %>
 
+          <% list.forEach(item=> { %>
 
 
 
-        <a href="<%= item.uri %>">
 
-          <div class="collection-card">
 
-            <div class="collection-image">
 
-              <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/<%= item.id %>.webp" alt="<%= item.title %>">
 
-            </div>
 
-            <div class="collection-content">
 
-              <h2 class="collection-title"><%= item.title %></h2>
 
-              <div class="collection-description"><%= item.description %></div>
 
-            </div>
 
-          </div>
 
-        </a>
 
-        
-      <% }); %>
 
+            <a href="<%= item.uri %>">
 
+              <div class="collection-card">
 
+                <div class="collection-image">
 
+                  <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/<%= item.id %>.webp"
 
+                    alt="<%= item.title %>">
 
+                </div>
 
+                <div class="collection-content">
 
+                  <h2 class="collection-title">
 
+                    <%= item.title %>
 
+                  </h2>
 
+                  <div class="collection-description">
 
+                    <%= item.description %>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </a>
 
 
 
+            <% }); %>
 
+
 
+
 
+        </div>
 
+      </section>
 
 
 
-      </div>
 
-    </section>
 
 
 
+    </main>
 
 
 
-  </main>
 
+    <%- include('footer') %>
 
 
 
-  <%- include('footer') %>
 
 
 
 
 
-  
-  <script src="/scripts/script.js"></script>
 
+      <script src="/scripts/script.js"></script>
 
 
 
-  <script>
 
-  </script>
 
+      <script>
 
+      </script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 12 - 7
views/v2/coloring-techniques-for-beginners.ejs
Vedi File 

@@ -6,7 +6,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="description"
 
     <meta name="description"
 
         content="Learn essential coloring techniques for beginners, including blending, shading, and layering. Discover expert tips to transform your coloring pages with our guided online tools.">
 
         content="Learn essential coloring techniques for beginners, including blending, shading, and layering. Discover expert tips to transform your coloring pages with our guided online tools.">
 
-    <title>Coloring Techniques for Beginners - Art Number Coloring</title>
 
+    <title>Coloring Techniques for Beginners - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
@@ -74,10 +74,13 @@
 
         }
 
         }
 
 
 
         .blog-content .internal-link {
 
         .blog-content .internal-link {
 
-            color: var(--primary-color); /* 或者您喜欢的颜色 */
 
+            color: var(--primary-color);
 
+            /* 或者您喜欢的颜色 */
 
             text-decoration: underline;
 
             text-decoration: underline;
 
-            font-weight: bold; /* 稍微加粗，使其更明显 */
 
+            font-weight: bold;
 
+            /* 稍微加粗，使其更明显 */
 
         }
 
         }
 
+
 
         .blog-content .internal-link:hover {
 
         .blog-content .internal-link:hover {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
         }
 
         }
 
@@ -319,7 +322,7 @@
 
         }
 
         }
 
     </style>
 
     </style>
 
 
 
-<script type="application/ld+json">
 
+    <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "BlogPosting",
 
   "@type": "BlogPosting",
 
@@ -345,11 +348,11 @@
 
   "dateModified": "2025-05-05T00:00:00+00:00",
 
   "dateModified": "2025-05-05T00:00:00+00:00",
 
   "author": {
 
   "author": {
 
     "@type": "Person",
 
     "@type": "Person",
 
-    "name": "Art Number Coloring"
 
+    "name": "Art Color"
 
   },
 
   },
 
   "publisher": {
 
   "publisher": {
 
     "@type": "Organization",
 
     "@type": "Organization",
 
-    "name": "Art Number Coloring",
 
+    "name": "Art Color",
 
     "logo": {
 
     "logo": {
 
       "@type": "ImageObject",
 
       "@type": "ImageObject",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
@@ -414,7 +417,9 @@
 
 
 
                 <div class="tool-guide">
 
                 <div class="tool-guide">
 
                     <h3>Must-Have Coloring Tools</h3>
 
                     <h3>Must-Have Coloring Tools</h3>
 
-                    <p>For a detailed breakdown of each tool and recommendations, check out our comprehensive guide: <a href="/tips-tricks/choose-the-right-coloring-tools" class="internal-link">Choosing and Caring for Your Coloring Tools</a>.</p>
 
+                    <p>For a detailed breakdown of each tool and recommendations, check out our comprehensive guide: <a
 
+                            href="/tips-tricks/choose-the-right-coloring-tools" class="internal-link">Choosing and
 
+                            Caring for Your Coloring Tools</a>.</p>
 
                     <div class="tool-grid">
 
                     <div class="tool-grid">
 
                         <div class="tool-card">
 
                         <div class="tool-card">
 
                             <div class="tool-icon">🖍️</div>
 
                             <div class="tool-icon">🖍️</div>

+ 235 - 213
views/v2/contact.ejs
Vedi File 

@@ -1,9 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Contact - Art Number Coloring</title>
 
+    <title>Contact - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
@@ -14,29 +15,29 @@
 
             gap: 40px;
 
             gap: 40px;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .contact-grid {
 
             .contact-grid {
 
                 grid-template-columns: 1fr;
 
                 grid-template-columns: 1fr;
 
             }
 
             }
 
         }
 
         }
 
-        
+
 
         .contact-form {
 
         .contact-form {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             padding: 30px;
 
             padding: 30px;
 
         }
 
         }
 
-        
+
 
         .form-group {
 
         .form-group {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .form-group label {
 
         .form-group label {
 
             display: block;
 
             display: block;
 
             margin-bottom: 8px;
 
             margin-bottom: 8px;
 
             font-weight: 500;
 
             font-weight: 500;
 
         }
 
         }
 
-        
+
 
         .form-group input,
 
         .form-group input,
 
         .form-group textarea {
 
         .form-group textarea {
 
             width: 100%;
 
             width: 100%;
 
@@ -46,30 +47,30 @@
 
             font-size: 1rem;
 
             font-size: 1rem;
 
             transition: border-color 0.3s ease;
 
             transition: border-color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .form-group input:focus,
 
         .form-group input:focus,
 
         .form-group textarea:focus {
 
         .form-group textarea:focus {
 
             outline: none;
 
             outline: none;
 
             border-color: var(--secondary-color);
 
             border-color: var(--secondary-color);
 
         }
 
         }
 
-        
+
 
         .form-group textarea {
 
         .form-group textarea {
 
             min-height: 150px;
 
             min-height: 150px;
 
             resize: vertical;
 
             resize: vertical;
 
         }
 
         }
 
-        
+
 
         .contact-info {
 
         .contact-info {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             padding: 30px;
 
             padding: 30px;
 
         }
 
         }
 
-        
+
 
         .info-item {
 
         .info-item {
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .info-icon {
 
         .info-icon {
 
             width: 40px;
 
             width: 40px;
 
             height: 40px;
 
             height: 40px;
 
@@ -81,31 +82,31 @@
 
             align-items: center;
 
             align-items: center;
 
             margin-right: 15px;
 
             margin-right: 15px;
 
         }
 
         }
 
-        
+
 
         .info-text h4 {
 
         .info-text h4 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             margin-bottom: 5px;
 
             margin-bottom: 5px;
 
         }
 
         }
 
-        
+
 
         .info-text p {
 
         .info-text p {
 
             margin-bottom: 0;
 
             margin-bottom: 0;
 
         }
 
         }
 
-        
+
 
         /* 社交媒体链接样式 */
 
         /* 社交媒体链接样式 */
 
         .social-links {
 
         .social-links {
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         .social-links h3 {
 
         .social-links h3 {
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .social-item {
 
         .social-item {
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .social-icon {
 
         .social-icon {
 
             width: 40px;
 
             width: 40px;
 
             height: 40px;
 
             height: 40px;
 
@@ -117,27 +118,29 @@
 
             margin-right: 15px;
 
             margin-right: 15px;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .social-icon:hover {
 
         .social-icon:hover {
 
             transform: scale(1.1);
 
             transform: scale(1.1);
 
         }
 
         }
 
-        
+
 
         .social-text a {
 
         .social-text a {
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             text-decoration: none;
 
             text-decoration: none;
 
             transition: color 0.3s ease;
 
             transition: color 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .social-text a:hover {
 
         .social-text a:hover {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .facebook-icon {
 
         .facebook-icon {
 
-            background-color: #1877f2; /* Facebook颜色 */
 
+            background-color: #1877f2;
 
+            /* Facebook颜色 */
 
         }
 
         }
 
-        
+
 
         .twitter-icon {
 
         .twitter-icon {
 
-            background-color: #1da1f2; /* Twitter颜色 */
 
+            background-color: #1da1f2;
 
+            /* Twitter颜色 */
 
         }
 
         }
 
 
 
 
 
@@ -160,221 +163,240 @@
 
             color: #721c24;
 
             color: #721c24;
 
             border: 1px solid #f5c6cb;
 
             border: 1px solid #f5c6cb;
 
         }
 
         }
 
-        
-        @media (max-width: 768px) {
 
 
 
-        }
 
+        @media (max-width: 768px) {}
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 
 
 <!-- Google tag (gtag.js) -->
 
 <!-- Google tag (gtag.js) -->
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script>
 
 <script>
 
-  window.dataLayer = window.dataLayer || [];
 
-  function gtag() { dataLayer.push(arguments); }
 
-  gtag('js', new Date());
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
 
 
-  gtag('config', 'G-JBGGVGLHTP');
 
+    gtag('config', 'G-JBGGVGLHTP');
 
 </script>
 
 </script>
 
 
 
 <body>
 
 <body>
 
     <%- include('header') %>
 
     <%- include('header') %>
 
-    
-    <main class="container">
 
-        <section>
 
-            <h1>Contact Us</h1>
 
-            <p>We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to reach out to our team using the form below or through our contact information.</p>
 
-            
-            <div class="contact-grid">
 
-                <div class="contact-form">
 
-                    <h2>Send Us a Message</h2>
 
-                    <form id="contact-form">
 
-                        <div class="form-group">
 
-                            <label for="name">Your Name</label>
 
-                            <input type="text" id="name" name="name" required>
 
-                        </div>
 
-                        
-                        <div class="form-group">
 
-                            <label for="email">Your Email</label>
 
-                            <input type="email" id="email" name="email" required>
 
-                        </div>
 
-                        
-                        <div class="form-group">
 
-                            <label for="subject">Subject</label>
 
-                            <input type="text" id="subject" name="subject" required>
 
-                        </div>
 
-                        
-                        <div class="form-group">
 
-                            <label for="message">Message</label>
 
-                            <textarea id="message" name="message" required></textarea>
 
-                        </div>
 
-                        
-                        <button type="submit" class="btn">Send Message</button>
 
-                    </form>
 
-                </div>
 
-                
-                <div class="contact-info">
 
-                    <h2>Contact Information</h2>
 
-                    
-                    <div class="info-item">
 
-                        <div class="info-icon">
 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                <path d="M1.5 8.5A.5.5 0 0 1 2 8h12a.5.5 0 0 1 0 1H2a.5.5 0 0 1-.5-.5z"/>
 
-                                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
 
-                                <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-8a.5.5 0 0 0-1 0v8a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 0-1 0v8z"/>
 
-                            </svg>
 
-                        </div>
 
-                        <div class="info-text">
 
-                            <h4>Email</h4>
 
-                            <p><a href="mailto:art_number_coloring@jccy-tech.com">art_number_coloring@jccy-tech.com</a></p>
 
-                        </div>
 
-                    </div>
 
 
 
-                    <div class="info-item">
 
-                        <div class="info-icon">
 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                <path d="M12.792 3.953a.5.5 0 0 0-.59.04l-3.5 2.5a.5.5 0 0 0-.162.633l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5zm-3.5 1.617L11 5.633l-1 2.5-2.5-1.5zm-5.5 2.171L3 9.071l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5a.5.5 0 0 0-.59-.04l-3.5 2.5zm3.5 1.617L7 9.633l-1 2.5-2.5-1.5z"/>
 
-                                <path d="M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
 
-                                <path d="M8 1a2 2 0 0 0-2 2v2H3.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V6h2.5a.5.5 0 0 0 0-1H8V3a2 2 0 0 0-2-2zm6 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
 
-                            </svg>
 
-                        </div>
 
-                        <div class="info-text">
 
-                            <h4>Phone</h4>
 
-                            <p><a href="tel:+8601062387471">+86 (010) 6238-7471</a></p>
 
-                        </div>
 
-                    </div>
 
-                    
-                    <div class="info-item">
 
-                        <div class="info-icon">
 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
 
-                            </svg>
 
-                        </div>
 
-                        <div class="info-text">
 
-                            <h4>Address</h4>
 
-                            <p>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
-                        </div>
 
+        <main class="container">
 
+            <section>
 
+                <h1>Contact Us</h1>
 
+                <p>We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel
 
+                    free to reach out to our team using the form below or through our contact information.</p>
 
+
 
+                <div class="contact-grid">
 
+                    <div class="contact-form">
 
+                        <h2>Send Us a Message</h2>
 
+                        <form id="contact-form">
 
+                            <div class="form-group">
 
+                                <label for="name">Your Name</label>
 
+                                <input type="text" id="name" name="name" required>
 
+                            </div>
 
+
 
+                            <div class="form-group">
 
+                                <label for="email">Your Email</label>
 
+                                <input type="email" id="email" name="email" required>
 
+                            </div>
 
+
 
+                            <div class="form-group">
 
+                                <label for="subject">Subject</label>
 
+                                <input type="text" id="subject" name="subject" required>
 
+                            </div>
 
+
 
+                            <div class="form-group">
 
+                                <label for="message">Message</label>
 
+                                <textarea id="message" name="message" required></textarea>
 
+                            </div>
 
+
 
+                            <button type="submit" class="btn">Send Message</button>
 
+                        </form>
 
                     </div>
 
                     </div>
 
 
 
-                    <div class="info-item">
 
-                        <div class="info-icon">
 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.993zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789zm1.834 1.79a7.01 7.01 0 0 0-1.034-.265l.596-.767a8.02 8.02 0 0 1 1.07.85z"/>
 
-                                <path d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0zm-1 0a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0zM5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/>
 
-                            </svg>
 
+                    <div class="contact-info">
 
+                        <h2>Contact Information</h2>
 
+
 
+                        <div class="info-item">
 
+                            <div class="info-icon">
 
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                    viewBox="0 0 16 16">
 
+                                    <path d="M1.5 8.5A.5.5 0 0 1 2 8h12a.5.5 0 0 1 0 1H2a.5.5 0 0 1-.5-.5z" />
 
+                                    <path
 
+                                        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
 
+                                    <path fill-rule="evenodd"
 
+                                        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-8a.5.5 0 0 0-1 0v8a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 0-1 0v8z" />
 
+                                </svg>
 
+                            </div>
 
+                            <div class="info-text">
 
+                                <h4>Email</h4>
 
+                                <p><a
 
+                                        href="mailto:art_number_coloring@jccy-tech.com">art_number_coloring@jccy-tech.com</a>
 
+                                </p>
 
+                            </div>
 
                         </div>
 
                         </div>
 
-                        <div class="info-text">
 
-                            <h4>Business Hours</h4>
 
-                            <p>Monday - Friday: 9:00 AM - 6:00 PM</p>
 
-                            <p>Saturday: 10:00 AM - 4:00 PM</p>
 
-                            <p>Sunday: Closed</p>
 
+
 
+                        <div class="info-item">
 
+                            <div class="info-icon">
 
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                    viewBox="0 0 16 16">
 
+                                    <path
 
+                                        d="M12.792 3.953a.5.5 0 0 0-.59.04l-3.5 2.5a.5.5 0 0 0-.162.633l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5zm-3.5 1.617L11 5.633l-1 2.5-2.5-1.5zm-5.5 2.171L3 9.071l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5a.5.5 0 0 0-.59-.04l-3.5 2.5zm3.5 1.617L7 9.633l-1 2.5-2.5-1.5z" />
 
+                                    <path d="M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
 
+                                    <path
 
+                                        d="M8 1a2 2 0 0 0-2 2v2H3.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V6h2.5a.5.5 0 0 0 0-1H8V3a2 2 0 0 0-2-2zm6 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
 
+                                </svg>
 
+                            </div>
 
+                            <div class="info-text">
 
+                                <h4>Phone</h4>
 
+                                <p><a href="tel:+8601062387471">+86 (010) 6238-7471</a></p>
 
+                            </div>
 
                         </div>
 
                         </div>
 
-                    </div>
 
-                    
-                    <!-- 社交媒体链接 -->
 
-                    <div class="social-links">
 
-                        <h3>Follow on Social</h3>
 
-                        <div class="social-item">
 
-                            <div class="social-icon facebook-icon">
 
-                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                    <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
 
+
 
+                        <div class="info-item">
 
+                            <div class="info-icon">
 
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                    viewBox="0 0 16 16">
 
+                                    <path
 
+                                        d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
 
                                 </svg>
 
                                 </svg>
 
                             </div>
 
                             </div>
 
-                            <div class="social-text">
 
-                                <a href="https://www.facebook.com/artcoloring" target="_blank">Facebook Community</a>
 
+                            <div class="info-text">
 
+                                <h4>Address</h4>
 
+                                <p>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China
 
+                                </p>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
-                        
-                        <div class="social-item">
 
-                            <div class="social-icon twitter-icon">
 
-                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
 
-                                    <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
 
+
 
+                        <div class="info-item">
 
+                            <div class="info-icon">
 
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                    viewBox="0 0 16 16">
 
+                                    <path
 
+                                        d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.993zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789zm1.834 1.79a7.01 7.01 0 0 0-1.034-.265l.596-.767a8.02 8.02 0 0 1 1.07.85z" />
 
+                                    <path
 
+                                        d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0zm-1 0a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0zM5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z" />
 
                                 </svg>
 
                                 </svg>
 
                             </div>
 
                             </div>
 
-                            <div class="social-text">
 
-                                <a href="#" target="_blank">Twitter</a>
 
+                            <div class="info-text">
 
+                                <h4>Business Hours</h4>
 
+                                <p>Monday - Friday: 9:00 AM - 6:00 PM</p>
 
+                                <p>Saturday: 10:00 AM - 4:00 PM</p>
 
+                                <p>Sunday: Closed</p>
 
+                            </div>
 
+                        </div>
 
+
 
+                        <!-- 社交媒体链接 -->
 
+                        <div class="social-links">
 
+                            <h3>Follow on Social</h3>
 
+                            <div class="social-item">
 
+                                <div class="social-icon facebook-icon">
 
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                        viewBox="0 0 16 16">
 
+                                        <path
 
+                                            d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
 
+                                    </svg>
 
+                                </div>
 
+                                <div class="social-text">
 
+                                    <a href="https://www.facebook.com/artcoloring" target="_blank">Facebook
 
+                                        Community</a>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <div class="social-item">
 
+                                <div class="social-icon twitter-icon">
 
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 
+                                        viewBox="0 0 16 16">
 
+                                        <path
 
+                                            d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
 
+                                    </svg>
 
+                                </div>
 
+                                <div class="social-text">
 
+                                    <a href="#" target="_blank">Twitter</a>
 
+                                </div>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-        </section>
 
-    </main>
 
-    
-  <%- include('footer') %>
 
-
 
-  <script src="/scripts/script.js"></script>
 
-  <script>
 
-    document.addEventListener('DOMContentLoaded', function() {
 
-    const contactForm = document.getElementById('contact-form');
 
-    
-    if (contactForm) {
 
-        contactForm.addEventListener('submit', function(e) {
 
-            e.preventDefault();
 
-            
-            // 显示加载状态
 
-            const submitButton = contactForm.querySelector('button[type="submit"]');
 
-            const originalText = submitButton.innerHTML;
 
-            submitButton.disabled = true;
 
-            submitButton.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 发送中...';
 
-            
-            // 收集表单数据
 
-            const formData = {
 
-                name: contactForm.querySelector('#name').value,
 
-                email: contactForm.querySelector('#email').value,
 
-                subject: contactForm.querySelector('#subject').value,
 
-                message: contactForm.querySelector('#message').value
 
-            };
 
-            
-            // 发送数据到后端
 
-            fetch('/api/contact', {
 
-                method: 'POST',
 
-                headers: {
 
-                    'Content-Type': 'application/json'
 
-                },
 
-                body: JSON.stringify(formData)
 
-            })
 
-            .then(response => response.json())
 
-            .then(data => {
 
-                // 恢复按钮状态
 
-                submitButton.disabled = false;
 
-                submitButton.innerHTML = originalText;
 
-                
-                // 显示响应消息
 
-                const messageContainer = document.createElement('div');
 
-                messageContainer.className = data.success ? 'alert alert-success' : 'alert alert-danger';
 
-                messageContainer.textContent = data.message;
 
-                
-                // 添加到表单之前
 
-                contactForm.parentNode.insertBefore(messageContainer, contactForm);
 
-                
-                // 如果成功，清空表单
 
-                if (data.success) {
 
-                    contactForm.reset();
 
-                    
-                    // 5秒后移除消息
 
-                    setTimeout(() => {
 
-                        messageContainer.remove();
 
-                    }, 5000);
 
-                }
 
-            })
 
-            .catch(error => {
 
-                console.error('Error:', error);
 
-                submitButton.disabled = false;
 
-                submitButton.innerHTML = originalText;
 
-                
-                const errorContainer = document.createElement('div');
 
-                errorContainer.className = 'alert alert-danger';
 
-                errorContainer.textContent = '发送失败，请稍后再试';
 
-                contactForm.parentNode.insertBefore(errorContainer, contactForm);
 
-                
-                setTimeout(() => {
 
-                    errorContainer.remove();
 
-                }, 5000);
 
-            });
 
-        });
 
-    }
 
-});
 
-  </script>
 
+            </section>
 
+        </main>
 
+
 
+        <%- include('footer') %>
 
+
 
+            <script src="/scripts/script.js"></script>
 
+            <script>
 
+                document.addEventListener('DOMContentLoaded', function () {
 
+                    const contactForm = document.getElementById('contact-form');
 
+
 
+                    if (contactForm) {
 
+                        contactForm.addEventListener('submit', function (e) {
 
+                            e.preventDefault();
 
+
 
+                            // 显示加载状态
 
+                            const submitButton = contactForm.querySelector('button[type="submit"]');
 
+                            const originalText = submitButton.innerHTML;
 
+                            submitButton.disabled = true;
 
+                            submitButton.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 发送中...';
 
+
 
+                            // 收集表单数据
 
+                            const formData = {
 
+                                name: contactForm.querySelector('#name').value,
 
+                                email: contactForm.querySelector('#email').value,
 
+                                subject: contactForm.querySelector('#subject').value,
 
+                                message: contactForm.querySelector('#message').value
 
+                            };
 
+
 
+                            // 发送数据到后端
 
+                            fetch('/api/contact', {
 
+                                method: 'POST',
 
+                                headers: {
 
+                                    'Content-Type': 'application/json'
 
+                                },
 
+                                body: JSON.stringify(formData)
 
+                            })
 
+                                .then(response => response.json())
 
+                                .then(data => {
 
+                                    // 恢复按钮状态
 
+                                    submitButton.disabled = false;
 
+                                    submitButton.innerHTML = originalText;
 
+
 
+                                    // 显示响应消息
 
+                                    const messageContainer = document.createElement('div');
 
+                                    messageContainer.className = data.success ? 'alert alert-success' : 'alert alert-danger';
 
+                                    messageContainer.textContent = data.message;
 
+
 
+                                    // 添加到表单之前
 
+                                    contactForm.parentNode.insertBefore(messageContainer, contactForm);
 
+
 
+                                    // 如果成功，清空表单
 
+                                    if (data.success) {
 
+                                        contactForm.reset();
 
+
 
+                                        // 5秒后移除消息
 
+                                        setTimeout(() => {
 
+                                            messageContainer.remove();
 
+                                        }, 5000);
 
+                                    }
 
+                                })
 
+                                .catch(error => {
 
+                                    console.error('Error:', error);
 
+                                    submitButton.disabled = false;
 
+                                    submitButton.innerHTML = originalText;
 
+
 
+                                    const errorContainer = document.createElement('div');
 
+                                    errorContainer.className = 'alert alert-danger';
 
+                                    errorContainer.textContent = '发送失败，请稍后再试';
 
+                                    contactForm.parentNode.insertBefore(errorContainer, contactForm);
 
+
 
+                                    setTimeout(() => {
 
+                                        errorContainer.remove();
 
+                                    }, 5000);
 
+                                });
 
+                        });
 
+                    }
 
+                });
 
+            </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 3 - 3
views/v2/detail.ejs
Vedi File 

@@ -22,12 +22,12 @@
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <!-- **Universal Link 路径** -->
 
   <!-- **Universal Link 路径** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
-  <meta property="al:ios:app_name" content="Art Number Coloring Book" /> <!-- **iOS 应用名称** -->
 
+  <meta property="al:ios:app_name" content="Art Color Book" /> <!-- **iOS 应用名称** -->
 
 
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <!-- ** Universal Link 路径** -->
 
   <!-- ** Universal Link 路径** -->
 
-  <meta property="al:android:app_name" content="Art Number Coloring Book" /> <!-- **Android 应用名称** -->
 
+  <meta property="al:android:app_name" content="Art Color Book" /> <!-- **Android 应用名称** -->
 
 
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
 
 
@@ -242,7 +242,7 @@
 
         "mainEntityOfPage": "https://art.pcoloring.com<%= uri %>",
 
         "mainEntityOfPage": "https://art.pcoloring.com<%= uri %>",
 
         "publisher": {
 
         "publisher": {
 
             "@type": "Organization",
 
             "@type": "Organization",
 
-            "name": "Art Number Coloring",
 
+            "name": "Art Color",
 
             "logo": {
 
             "logo": {
 
               "@type": "ImageObject",
 
               "@type": "ImageObject",
 
               "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
               "url": "https://art.pcoloring.com/assets/icon/icon.webp",

+ 1 - 1
views/v2/display-your-coloring-masterpieces.ejs
Vedi File 

@@ -6,7 +6,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="description"
 
     <meta name="description"
 
         content="Discover creative ways to display your coloring masterpieces, from wall art to digital sharing. Learn expert tips to showcase your artwork with pride and preserve your coloring journey.">
 
         content="Discover creative ways to display your coloring masterpieces, from wall art to digital sharing. Learn expert tips to showcase your artwork with pride and preserve your coloring journey.">
 
-    <title>How to Display Your Coloring Masterpieces - Art Number Coloring</title>
 
+    <title>How to Display Your Coloring Masterpieces - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>

+ 318 - 266
views/v2/faq.ejs
Vedi File 

@@ -1,10 +1,12 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta name="description" content="Find answers to frequently asked questions about our coloring pages, online coloring tools, downloads, and more at Yay! Coloring Pages.">
 
-    <title>FAQ - Art Number Coloring</title>
 
+    <meta name="description"
 
+        content="Find answers to frequently asked questions about our coloring pages, online coloring tools, downloads, and more at Yay! Coloring Pages.">
 
+    <title>FAQ - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
@@ -14,21 +16,21 @@
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .page-description {
 
         .page-description {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             max-width: 800px;
 
             max-width: 800px;
 
             margin: 0 auto 50px;
 
             margin: 0 auto 50px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         /* FAQ 搜索框 */
 
         /* FAQ 搜索框 */
 
         .faq-search {
 
         .faq-search {
 
             max-width: 600px;
 
             max-width: 600px;
 
             margin: 0 auto 40px;
 
             margin: 0 auto 40px;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        
+
 
         .faq-search input {
 
         .faq-search input {
 
             width: 100%;
 
             width: 100%;
 
             padding: 12px 40px 12px 20px;
 
             padding: 12px 40px 12px 20px;
 
@@ -38,12 +40,12 @@
 
             outline: none;
 
             outline: none;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-search input:focus {
 
         .faq-search input:focus {
 
             border-color: var(--secondary-color);
 
             border-color: var(--secondary-color);
 
             box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
 
             box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
 
         }
 
         }
 
-        
+
 
         .faq-search i {
 
         .faq-search i {
 
             position: absolute;
 
             position: absolute;
 
             right: 15px;
 
             right: 15px;
 
@@ -51,7 +53,7 @@
 
             transform: translateY(-50%);
 
             transform: translateY(-50%);
 
             color: var(--light-text);
 
             color: var(--light-text);
 
         }
 
         }
 
-        
+
 
         /* FAQ 分类导航 */
 
         /* FAQ 分类导航 */
 
         .faq-categories {
 
         .faq-categories {
 
             display: flex;
 
             display: flex;
 
@@ -59,7 +61,7 @@
 
             justify-content: center;
 
             justify-content: center;
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
         }
 
         }
 
-        
+
 
         .faq-category {
 
         .faq-category {
 
             padding: 10px 20px;
 
             padding: 10px 20px;
 
             margin: 5px;
 
             margin: 5px;
 
@@ -70,27 +72,27 @@
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 
         }
 
         }
 
-        
+
 
         .faq-category:hover {
 
         .faq-category:hover {
 
             background-color: #f0f0f0;
 
             background-color: #f0f0f0;
 
         }
 
         }
 
-        
+
 
         .faq-category.active {
 
         .faq-category.active {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         /* FAQ 部分样式 */
 
         /* FAQ 部分样式 */
 
         .faq-section {
 
         .faq-section {
 
             margin: 40px 0;
 
             margin: 40px 0;
 
         }
 
         }
 
-        
+
 
         .faq-category-title {
 
         .faq-category-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.8rem;
 
             font-size: 1.8rem;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         .faq-item {
 
         .faq-item {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -99,7 +101,7 @@
 
             overflow: hidden;
 
             overflow: hidden;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-question {
 
         .faq-question {
 
             padding: 20px;
 
             padding: 20px;
 
             font-size: 1.1rem;
 
             font-size: 1.1rem;
 
@@ -111,12 +113,12 @@
 
             align-items: center;
 
             align-items: center;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-question:hover {
 
         .faq-question:hover {
 
             background-color: #f8f9fa;
 
             background-color: #f8f9fa;
 
             padding-left: 25px;
 
             padding-left: 25px;
 
         }
 
         }
 
-        
+
 
         .faq-question::after {
 
         .faq-question::after {
 
             content: '+';
 
             content: '+';
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
@@ -124,11 +126,11 @@
 
             transition: transform 0.5s ease;
 
             transition: transform 0.5s ease;
 
             margin-left: 10px;
 
             margin-left: 10px;
 
         }
 
         }
 
-        
+
 
         .faq-item.active .faq-question::after {
 
         .faq-item.active .faq-question::after {
 
             transform: rotate(45deg);
 
             transform: rotate(45deg);
 
         }
 
         }
 
-        
+
 
         .faq-answer {
 
         .faq-answer {
 
             padding: 0 20px 0 40px;
 
             padding: 0 20px 0 40px;
 
             color: var(--light-text);
 
             color: var(--light-text);
 
@@ -136,13 +138,13 @@
 
             overflow: hidden;
 
             overflow: hidden;
 
             transition: max-height 0.5s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
 
             transition: max-height 0.5s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-item.active .faq-answer {
 
         .faq-item.active .faq-answer {
 
             max-height: 500px;
 
             max-height: 500px;
 
             padding-top: 10px;
 
             padding-top: 10px;
 
             padding-bottom: 20px;
 
             padding-bottom: 20px;
 
         }
 
         }
 
-        
+
 
         /* 联系我们提示 */
 
         /* 联系我们提示 */
 
         .faq-contact {
 
         .faq-contact {
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
@@ -152,18 +154,18 @@
 
             text-align: center;
 
             text-align: center;
 
             margin: 60px 0;
 
             margin: 60px 0;
 
         }
 
         }
 
-        
+
 
         .faq-contact h3 {
 
         .faq-contact h3 {
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         .faq-contact p {
 
         .faq-contact p {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         .faq-contact a {
 
         .faq-contact a {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: white;
 
             background-color: white;
 
@@ -174,304 +176,354 @@
 
             text-decoration: none;
 
             text-decoration: none;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-contact a:hover {
 
         .faq-contact a:hover {
 
             background-color: var(--accent-color);
 
             background-color: var(--accent-color);
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-      
-        
+
 
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .faq-category-title {
 
             .faq-category-title {
 
                 font-size: 1.5rem;
 
                 font-size: 1.5rem;
 
             }
 
             }
 
-            
+
 
             .faq-question {
 
             .faq-question {
 
                 font-size: 1rem;
 
                 font-size: 1rem;
 
                 padding: 15px;
 
                 padding: 15px;
 
             }
 
             }
 
-            
+
 
             .faq-answer {
 
             .faq-answer {
 
                 padding: 0 15px 0 30px;
 
                 padding: 0 15px 0 30px;
 
             }
 
             }
 
-            
+
 
             .faq-question:hover {
 
             .faq-question:hover {
 
                 padding-left: 20px;
 
                 padding-left: 20px;
 
             }
 
             }
 
-            
+
 
             .faq-contact h3 {
 
             .faq-contact h3 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <%- include('header') %>
 
     <%- include('header') %>
 
-    
-    <div class="container">
 
-        <div class="breadcrumb">
 
-            <a href="/">Home</a> &gt; FAQ
 
-        </div>
 
-        
-        <h1 class="page-title">Frequently Asked Questions</h1>
 
-        <p class="page-description">Can't find what you're looking for? Check out our most frequently asked questions below. If you still have questions, feel free to <a href="/contact" style="color: var(--primary-color);">contact us</a>.</p>
 
-        
-        <!-- FAQ 搜索框 -->
 
-        <div class="faq-search">
 
-            <input type="text" id="faq-search" placeholder="Search for answers...">
 
-            <i class="fa fa-search"></i>
 
-        </div>
 
-        
-        <!-- FAQ 分类导航 -->
 
-        <div class="faq-categories">
 
-            <div class="faq-category active" data-category="all">All Categories</div>
 
-            <div class="faq-category" data-category="finding">Finding Pages</div>
 
-            <div class="faq-category" data-category="downloading">Downloading & Printing</div>
 
-            <div class="faq-category" data-category="online">Online Coloring</div>
 
-            <div class="faq-category" data-category="account">Account & Registration</div>
 
-            <div class="faq-category" data-category="commercial">Commercial Use</div>
 
-            <div class="faq-category" data-category="app">Mobile App</div>
 
-        </div>
 
-        
-        <!-- FAQ 内容 -->
 
-        <div class="faq-content">
 
-            <!-- 查找页面分类 -->
 
-            <div class="faq-section" data-category="finding">
 
-                <h2 class="faq-category-title">Finding Coloring Pages</h2>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">How to find my favorite coloring page?</div>
 
-                    <div class="faq-answer">
 
-                        <p>You can use our <a href="/coloring-page-gallery" style="color: var(--primary-color);">Gallery</a> page, which features over 20,000 coloring pages. It supports searching by various themes, or you can use the search box at the top of the page to look for specific topics.</p>
 
+
 
+        <div class="container">
 
+            <div class="breadcrumb">
 
+                <a href="/">Home</a> &gt; FAQ
 
+            </div>
 
+
 
+            <h1 class="page-title">Frequently Asked Questions</h1>
 
+            <p class="page-description">Can't find what you're looking for? Check out our most frequently asked
 
+                questions below. If you still have questions, feel free to <a href="/contact"
 
+                    style="color: var(--primary-color);">contact us</a>.</p>
 
+
 
+            <!-- FAQ 搜索框 -->
 
+            <div class="faq-search">
 
+                <input type="text" id="faq-search" placeholder="Search for answers...">
 
+                <i class="fa fa-search"></i>
 
+            </div>
 
+
 
+            <!-- FAQ 分类导航 -->
 
+            <div class="faq-categories">
 
+                <div class="faq-category active" data-category="all">All Categories</div>
 
+                <div class="faq-category" data-category="finding">Finding Pages</div>
 
+                <div class="faq-category" data-category="downloading">Downloading & Printing</div>
 
+                <div class="faq-category" data-category="online">Online Coloring</div>
 
+                <div class="faq-category" data-category="account">Account & Registration</div>
 
+                <div class="faq-category" data-category="commercial">Commercial Use</div>
 
+                <div class="faq-category" data-category="app">Mobile App</div>
 
+            </div>
 
+
 
+            <!-- FAQ 内容 -->
 
+            <div class="faq-content">
 
+                <!-- 查找页面分类 -->
 
+                <div class="faq-section" data-category="finding">
 
+                    <h2 class="faq-category-title">Finding Coloring Pages</h2>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">How to find my favorite coloring page?</div>
 
+                        <div class="faq-answer">
 
+                            <p>You can use our <a href="/coloring-page-gallery"
 
+                                    style="color: var(--primary-color);">Gallery</a> page, which features over 20,000
 
+                                coloring pages. It supports searching by various themes, or you can use the search box
 
+                                at the top of the page to look for specific topics.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">Do you have coloring pages for specific holidays or seasons?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Yes! We have a wide selection of holiday and seasonal coloring pages, including Christmas, Halloween, Easter, Valentine's Day, summer, winter, and more. You can find them by using the category filters in our gallery or by searching for the specific holiday or season.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">Do you have coloring pages for specific holidays or seasons?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Yes! We have a wide selection of holiday and seasonal coloring pages, including
 
+                                Christmas, Halloween, Easter, Valentine's Day, summer, winter, and more. You can find
 
+                                them by using the category filters in our gallery or by searching for the specific
 
+                                holiday or season.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">How often do you add new coloring pages?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Our team adds new coloring pages daily! We're constantly expanding our collection with fresh designs across various themes. To stay updated with our latest additions, you can subscribe to our newsletter or follow us on social media.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">How often do you add new coloring pages?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Our team adds new coloring pages daily! We're constantly expanding our collection with
 
+                                fresh designs across various themes. To stay updated with our latest additions, you can
 
+                                subscribe to our newsletter or follow us on social media.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-            
-            <!-- 下载和打印分类 -->
 
-            <div class="faq-section" data-category="downloading">
 
-                <h2 class="faq-category-title">Downloading & Printing</h2>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">How to download a coloring page?</div>
 
-                    <div class="faq-answer">
 
-                        <p>On any coloring page detail page, click the "Download" button. You can choose between different formats (PDF or PNG) depending on your needs. The download will start automatically.</p>
 
+
 
+                <!-- 下载和打印分类 -->
 
+                <div class="faq-section" data-category="downloading">
 
+                    <h2 class="faq-category-title">Downloading & Printing</h2>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">How to download a coloring page?</div>
 
+                        <div class="faq-answer">
 
+                            <p>On any coloring page detail page, click the "Download" button. You can choose between
 
+                                different formats (PDF or PNG) depending on your needs. The download will start
 
+                                automatically.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">How to print a coloring page?</div>
 
-                    <div class="faq-answer">
 
-                        <p>After downloading the coloring page, open the file (PDF or PNG). Use your browser's print function (usually Ctrl+P on Windows/Linux or Command+P on Mac) to print the page. Make sure to select the appropriate printer settings for the best results.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">How to print a coloring page?</div>
 
+                        <div class="faq-answer">
 
+                            <p>After downloading the coloring page, open the file (PDF or PNG). Use your browser's print
 
+                                function (usually Ctrl+P on Windows/Linux or Command+P on Mac) to print the page. Make
 
+                                sure to select the appropriate printer settings for the best results.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">The downloaded file is not opening. What should I do?</div>
 
-                    <div class="faq-answer">
 
-                        <p>If you're having trouble opening the downloaded file, try the following:</p>
 
-                        <ul>
 
-                            <li>Make sure you have the appropriate software installed (Adobe Reader for PDF files or an image viewer for PNG files).</li>
 
-                            <li>Try downloading the file again.</li>
 
-                            <li>Check if your internet connection was stable during the download.</li>
 
-                            <li>Try using a different browser to download the file.</li>
 
-                        </ul>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">The downloaded file is not opening. What should I do?</div>
 
+                        <div class="faq-answer">
 
+                            <p>If you're having trouble opening the downloaded file, try the following:</p>
 
+                            <ul>
 
+                                <li>Make sure you have the appropriate software installed (Adobe Reader for PDF files or
 
+                                    an image viewer for PNG files).</li>
 
+                                <li>Try downloading the file again.</li>
 
+                                <li>Check if your internet connection was stable during the download.</li>
 
+                                <li>Try using a different browser to download the file.</li>
 
+                            </ul>
 
+                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-            
-            <!-- 在线填色分类 -->
 
-            <div class="faq-section" data-category="online">
 
-                <h2 class="faq-category-title">Online Coloring</h2>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">How to color online?</div>
 
-                    <div class="faq-answer">
 
-                        <p>On any coloring page detail page, click the "Paint Now!" button. This will take you to our online coloring studio. Here, you can color digitally using your mouse or touchscreen. Each section is numbered, and you just need to select the corresponding color from the palette and click on the sections to fill them in.</p>
 
+
 
+                <!-- 在线填色分类 -->
 
+                <div class="faq-section" data-category="online">
 
+                    <h2 class="faq-category-title">Online Coloring</h2>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">How to color online?</div>
 
+                        <div class="faq-answer">
 
+                            <p>On any coloring page detail page, click the "Paint Now!" button. This will take you to
 
+                                our online coloring studio. Here, you can color digitally using your mouse or
 
+                                touchscreen. Each section is numbered, and you just need to select the corresponding
 
+                                color from the palette and click on the sections to fill them in.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">Can I save my online coloring progress?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Yes! In the online coloring studio, click the "Save" button at any time to save your progress. All your saved projects can be found in your "My Works" section. You can return to them later to continue coloring.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">Can I save my online coloring progress?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Yes! In the online coloring studio, click the "Save" button at any time to save your
 
+                                progress. All your saved projects can be found in your "My Works" section. You can
 
+                                return to them later to continue coloring.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">How to share my colored artwork?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Once you've completed your artwork in the online studio, click the "Share" button. You can share your creation directly to social media platforms like Facebook, Twitter, or Pinterest, or generate a shareable link to send to friends and family.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">How to share my colored artwork?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Once you've completed your artwork in the online studio, click the "Share" button. You
 
+                                can share your creation directly to social media platforms like Facebook, Twitter, or
 
+                                Pinterest, or generate a shareable link to send to friends and family.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">I see you support numbered coloring. Do you also support free coloring with custom brushes and colors?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Yes! In addition to our numbered coloring pages, we also offer a free coloring mode that allows you to choose any brush and color you like. This feature is currently available on our iOS app. You can download it from the <a href="itms-apps://itunes.apple.com/app/id1626214585" style="color: var(--primary-color);">App Store</a> to start creating freely.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">I see you support numbered coloring. Do you also support free coloring
 
+                            with custom brushes and colors?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Yes! In addition to our numbered coloring pages, we also offer a free coloring mode that
 
+                                allows you to choose any brush and color you like. This feature is currently available
 
+                                on our iOS app. You can download it from the <a
 
+                                    href="itms-apps://itunes.apple.com/app/id1626214585"
 
+                                    style="color: var(--primary-color);">App Store</a> to start creating freely.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-            
-            <!-- 账户和注册分类 -->
 
-            <div class="faq-section" data-category="account">
 
-                <h2 class="faq-category-title">Account & Registration</h2>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">Do I need to create an account to use the site?</div>
 
-                    <div class="faq-answer">
 
-                        <p>You don't need an account to browse and download coloring pages. However, creating an account allows you to save your online coloring progress, access your colored artwork anytime, and participate in community features like sharing your creations.</p>
 
+
 
+                <!-- 账户和注册分类 -->
 
+                <div class="faq-section" data-category="account">
 
+                    <h2 class="faq-category-title">Account & Registration</h2>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">Do I need to create an account to use the site?</div>
 
+                        <div class="faq-answer">
 
+                            <p>You don't need an account to browse and download coloring pages. However, creating an
 
+                                account allows you to save your online coloring progress, access your colored artwork
 
+                                anytime, and participate in community features like sharing your creations.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">How do I reset my password?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Click on the "Forgot Password?" link on the login page. Enter the email address associated with your account, and we'll send you a password reset link. Follow the instructions in the email to reset your password.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">How do I reset my password?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Click on the "Forgot Password?" link on the login page. Enter the email address
 
+                                associated with your account, and we'll send you a password reset link. Follow the
 
+                                instructions in the email to reset your password.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">Can I delete my account?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Yes, you can delete your account at any time. Log in to your account, go to your profile settings, and click on the "Delete Account" option. Please note that deleting your account will permanently remove all your saved artwork and account information.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">Can I delete my account?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Yes, you can delete your account at any time. Log in to your account, go to your profile
 
+                                settings, and click on the "Delete Account" option. Please note that deleting your
 
+                                account will permanently remove all your saved artwork and account information.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-            
-            <!-- 商业使用分类 -->
 
-            <div class="faq-section" data-category="commercial">
 
-                <h2 class="faq-category-title">Commercial Use</h2>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">Can I use your coloring pages commercially?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Our coloring pages are for personal and non-commercial use only. You can print, color, and share them for personal enjoyment. However, you may not sell or redistribute our coloring pages in any form without prior written permission.</p>
 
+
 
+                <!-- 商业使用分类 -->
 
+                <div class="faq-section" data-category="commercial">
 
+                    <h2 class="faq-category-title">Commercial Use</h2>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">Can I use your coloring pages commercially?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Our coloring pages are for personal and non-commercial use only. You can print, color,
 
+                                and share them for personal enjoyment. However, you may not sell or redistribute our
 
+                                coloring pages in any form without prior written permission.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">How can I get permission for commercial use?</div>
 
-                    <div class="faq-answer">
 
-                        <p>For commercial use inquiries, please <a href="/contact" style="color: var(--primary-color);">contact us</a> with details about your intended use. We offer licensing options for businesses, publishers, and organizations. Our team will review your request and provide you with the necessary information and pricing.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">How can I get permission for commercial use?</div>
 
+                        <div class="faq-answer">
 
+                            <p>For commercial use inquiries, please <a href="/contact"
 
+                                    style="color: var(--primary-color);">contact us</a> with details about your intended
 
+                                use. We offer licensing options for businesses, publishers, and organizations. Our team
 
+                                will review your request and provide you with the necessary information and pricing.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-            
-            <!-- 移动应用分类 -->
 
-            <div class="faq-section" data-category="app">
 
-                <h2 class="faq-category-title">Mobile App</h2>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">Do you have a mobile app?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Yes! We have a dedicated mobile app available for both Android and iOS devices. The app offers all the features of our web platform with additional benefits like offline coloring and enhanced touch controls. You can download it from the <a href="itms-apps://itunes.apple.com/app/id1575480118" style="color: var(--primary-color);">App Store</a> or <a href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&pcampaignid=web_share" style="color: var(--primary-color);">Google Play</a>.</p>
 
+
 
+                <!-- 移动应用分类 -->
 
+                <div class="faq-section" data-category="app">
 
+                    <h2 class="faq-category-title">Mobile App</h2>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">Do you have a mobile app?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Yes! We have a dedicated mobile app available for both Android and iOS devices. The app
 
+                                offers all the features of our web platform with additional benefits like offline
 
+                                coloring and enhanced touch controls. You can download it from the <a
 
+                                    href="itms-apps://itunes.apple.com/app/id1575480118"
 
+                                    style="color: var(--primary-color);">App Store</a> or <a
 
+                                    href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&pcampaignid=web_share"
 
+                                    style="color: var(--primary-color);">Google Play</a>.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">Can I sync my progress between the app and the website?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Yes, if you log in to your account on both the app and the website, your saved projects and progress will be synced automatically. This allows you to start coloring on one device and continue on another.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">Can I sync my progress between the app and the website?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Yes, if you log in to your account on both the app and the website, your saved projects
 
+                                and progress will be synced automatically. This allows you to start coloring on one
 
+                                device and continue on another.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="faq-item">
 
-                    <div class="faq-question">Is the app free to download?</div>
 
-                    <div class="faq-answer">
 
-                        <p>Yes, our mobile app is free to download and use. There are also in-app purchases available for additional coloring pages and premium features.</p>
 
+
 
+                    <div class="faq-item">
 
+                        <div class="faq-question">Is the app free to download?</div>
 
+                        <div class="faq-answer">
 
+                            <p>Yes, our mobile app is free to download and use. There are also in-app purchases
 
+                                available for additional coloring pages and premium features.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
+
 
+            <!-- 联系我们提示 -->
 
+            <div class="faq-contact">
 
+                <h3>Still have questions?</h3>
 
+                <p>Our support team is here to help. Contact us if you can't find the answer to your question in our
 
+                    FAQ.</p>
 
+                <a href="/contact">Contact Support</a>
 
+            </div>
 
         </div>
 
         </div>
 
-        
-        <!-- 联系我们提示 -->
 
-        <div class="faq-contact">
 
-            <h3>Still have questions?</h3>
 
-            <p>Our support team is here to help. Contact us if you can't find the answer to your question in our FAQ.</p>
 
-            <a href="/contact">Contact Support</a>
 
-        </div>
 
-    </div>
 
-    
-    <%- include('footer') %>
 
-
 
-    <script src="/scripts/script.js"></script>
 
-
 
-    <script>
 
-        // FAQ 折叠功能
 
-        const faqQuestions = document.querySelectorAll('.faq-question');
 
-        faqQuestions.forEach(question => {
 
-            question.addEventListener('click', () => {
 
-                const faqItem = question.parentElement;
 
-                faqItem.classList.toggle('active');
 
-                
-                // 关闭其他打开的FAQ项
 
-                document.querySelectorAll('.faq-item.active').forEach(item => {
 
-                    if (item !== faqItem) {
 
-                        item.classList.remove('active');
 
-                    }
 
+
 
+        <%- include('footer') %>
 
+
 
+            <script src="/scripts/script.js"></script>
 
+
 
+            <script>
 
+                // FAQ 折叠功能
 
+                const faqQuestions = document.querySelectorAll('.faq-question');
 
+                faqQuestions.forEach(question => {
 
+                    question.addEventListener('click', () => {
 
+                        const faqItem = question.parentElement;
 
+                        faqItem.classList.toggle('active');
 
+
 
+                        // 关闭其他打开的FAQ项
 
+                        document.querySelectorAll('.faq-item.active').forEach(item => {
 
+                            if (item !== faqItem) {
 
+                                item.classList.remove('active');
 
+                            }
 
+                        });
 
+                    });
 
+                });
 
+
 
+                // FAQ 分类筛选
 
+                const faqCategories = document.querySelectorAll('.faq-category');
 
+                const faqSections = document.querySelectorAll('.faq-section');
 
+
 
+                faqCategories.forEach(category => {
 
+                    category.addEventListener('click', () => {
 
+                        // 更新活动分类样式
 
+                        faqCategories.forEach(cat => cat.classList.remove('active'));
 
+                        category.classList.add('active');
 
+
 
+                        const selectedCategory = category.getAttribute('data-category');
 
+
 
+                        // 显示匹配的FAQ部分
 
+                        faqSections.forEach(section => {
 
+                            if (selectedCategory === 'all' || section.getAttribute('data-category') === selectedCategory) {
 
+                                section.style.display = 'block';
 
+                            } else {
 
+                                section.style.display = 'none';
 
+                            }
 
+                        });
 
+                    });
 
                 });
 
                 });
 
-            });
 
-        });
 
-        
-        // FAQ 分类筛选
 
-        const faqCategories = document.querySelectorAll('.faq-category');
 
-        const faqSections = document.querySelectorAll('.faq-section');
 
-        
-        faqCategories.forEach(category => {
 
-            category.addEventListener('click', () => {
 
-                // 更新活动分类样式
 
-                faqCategories.forEach(cat => cat.classList.remove('active'));
 
-                category.classList.add('active');
 
-                
-                const selectedCategory = category.getAttribute('data-category');
 
-                
-                // 显示匹配的FAQ部分
 
-                faqSections.forEach(section => {
 
-                    if (selectedCategory === 'all' || section.getAttribute('data-category') === selectedCategory) {
 
-                        section.style.display = 'block';
 
-                    } else {
 
-                        section.style.display = 'none';
 
-                    }
 
+
 
+                // FAQ 搜索功能
 
+                const searchInput = document.getElementById('faq-search');
 
+
 
+                searchInput.addEventListener('input', () => {
 
+                    const searchTerm = searchInput.value.toLowerCase().trim();
 
+                    const faqItems = document.querySelectorAll('.faq-item');
 
+
 
+                    faqItems.forEach(item => {
 
+                        const question = item.querySelector('.faq-question').textContent.toLowerCase();
 
+                        const answer = item.querySelector('.faq-answer').textContent.toLowerCase();
 
+
 
+                        if (question.includes(searchTerm) || answer.includes(searchTerm)) {
 
+                            item.style.display = 'block';
 
+                        } else {
 
+                            item.style.display = 'none';
 
+                        }
 
+                    });
 
                 });
 
                 });
 
-            });
 
-        });
 
-        
-        // FAQ 搜索功能
 
-        const searchInput = document.getElementById('faq-search');
 
-        
-        searchInput.addEventListener('input', () => {
 
-            const searchTerm = searchInput.value.toLowerCase().trim();
 
-            const faqItems = document.querySelectorAll('.faq-item');
 
-            
-            faqItems.forEach(item => {
 
-                const question = item.querySelector('.faq-question').textContent.toLowerCase();
 
-                const answer = item.querySelector('.faq-answer').textContent.toLowerCase();
 
-                
-                if (question.includes(searchTerm) || answer.includes(searchTerm)) {
 
-                    item.style.display = 'block';
 
-                } else {
 
-                    item.style.display = 'none';
 
-                }
 
-            });
 
-        });
 
-    </script>
 
+            </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 17 - 12
views/v2/footer.ejs
Vedi File 

@@ -2,13 +2,16 @@
 
     <div class="container">
 
     <div class="container">
 
         <div class="footer-grid">
 
         <div class="footer-grid">
 
             <div>
 
             <div>
 
-                <a href="/" style="color: white;"><div class="footer-logo">
 
-                    <img src="/assets/icon/logo3.webp" alt="Art Number Coloring Logo">
 
-                    <span>Art Number Coloring</span>
 
-                </div></a>
 
-                <p class="footer-text">Free printable coloring pages and digital art resources for all ages. Color Online!</p>
 
+                <a href="/" style="color: white;">
 
+                    <div class="footer-logo">
 
+                        <img src="/assets/icon/logo3.webp" alt="Art Color Logo">
 
+                        <span>Art Color</span>
 
+                    </div>
 
+                </a>
 
+                <p class="footer-text">Free printable coloring pages and digital art resources for all ages. Color
 
+                    Online!</p>
 
             </div>
 
             </div>
 
-            
+
 
             <div>
 
             <div>
 
                 <h3 class="footer-title">Quick Links</h3>
 
                 <h3 class="footer-title">Quick Links</h3>
 
                 <ul class="footer-links">
 
                 <ul class="footer-links">
 
@@ -19,7 +22,7 @@
 
                     <li><a href="/about">About Us</a></li>
 
                     <li><a href="/about">About Us</a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
-            
+
 
             <div>
 
             <div>
 
                 <h3 class="footer-title">Resources</h3>
 
                 <h3 class="footer-title">Resources</h3>
 
                 <ul class="footer-links">
 
                 <ul class="footer-links">
 
@@ -30,7 +33,7 @@
 
                     <li><a href="/contact">Contact</a></li>
 
                     <li><a href="/contact">Contact</a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
-            
+
 
             <div>
 
             <div>
 
                 <h3 class="footer-title">Contact Us</h3>
 
                 <h3 class="footer-title">Contact Us</h3>
 
                 <ul class="footer-links">
 
                 <ul class="footer-links">
 
@@ -43,17 +46,19 @@
 
                     <li>
 
                     <li>
 
                         <div class="flex items-center">
 
                         <div class="flex items-center">
 
                             <span style="margin-right: 10px;">📍</span>
 
                             <span style="margin-right: 10px;">📍</span>
 
-                            <span>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</span>
 
+                            <span>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing,
 
+                                China</span>
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
+
 
         <div class="footer-bottom">
 
         <div class="footer-bottom">
 
-            <p class="copyright">© 2025 Art Number Coloring. All rights reserved.</p>
 
+            <p class="copyright">© 2025 Art Color. All rights reserved.</p>
 
             <div class="footer-social">
 
             <div class="footer-social">
 
-                <a href="https://www.facebook.com/artcoloring" aria-label="Facebook"><img src="/assets/svg/facebook.svg" alt="Facebook"></a>
 
+                <a href="https://www.facebook.com/artcoloring" aria-label="Facebook"><img src="/assets/svg/facebook.svg"
 
+                        alt="Facebook"></a>
 
                 <a href="#" aria-label="Twitter"><img src="/assets/svg/twitter.svg" alt="Twitter"></a>
 
                 <a href="#" aria-label="Twitter"><img src="/assets/svg/twitter.svg" alt="Twitter"></a>
 
                 <a href="#" aria-label="Instagram"><img src="/assets/svg/instagram.svg" alt="Instagram"></a>
 
                 <a href="#" aria-label="Instagram"><img src="/assets/svg/instagram.svg" alt="Instagram"></a>
 
                 <a href="#" aria-label="Pinterest"><img src="/assets/svg/pinterest.svg" alt="Pinterest"></a>
 
                 <a href="#" aria-label="Pinterest"><img src="/assets/svg/pinterest.svg" alt="Pinterest"></a>

+ 269 - 241
views/v2/gallery.ejs
Vedi File 

@@ -5,8 +5,9 @@
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
-  <title>Free Printable Coloring Pages Gallery - 20,000+ Designs | Art Number Coloring</title>
 
-  <meta name="description" content="Explore our massive collection of over 20,000 free coloring pages! Find endless printable designs from animals to mandalas, cartoons, and more. Perfect for kids and adults – start your creative journey today!">
 
+  <title>Free Printable Coloring Pages Gallery - 20,000+ Designs | Art Color</title>
 
+  <meta name="description"
 
+    content="Explore our massive collection of over 20,000 free coloring pages! Find endless printable designs from animals to mandalas, cartoons, and more. Perfect for kids and adults – start your creative journey today!">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <style>
 
   <style>
 
     .search-container {
 
     .search-container {
 
@@ -14,7 +15,7 @@
 
       max-width: 600px;
 
       max-width: 600px;
 
       position: relative;
 
       position: relative;
 
     }
 
     }
 
-    
+
 
     .search-input {
 
     .search-input {
 
       width: 100%;
 
       width: 100%;
 
       padding: 15px 20px;
 
       padding: 15px 20px;
 
@@ -30,7 +31,7 @@
 
       border-color: var(--primary-color);
 
       border-color: var(--primary-color);
 
       box-shadow: 0 0 10px rgba(230, 138, 0, 0.2);
 
       box-shadow: 0 0 10px rgba(230, 138, 0, 0.2);
 
     }
 
     }
 
-    
+
 
     .search-button {
 
     .search-button {
 
       position: absolute;
 
       position: absolute;
 
       right: 15px;
 
       right: 15px;
 
@@ -45,16 +46,16 @@
 
     }
 
     }
 
 
 
     .search-button:hover {
 
     .search-button:hover {
 
-        color: var(--primary-color);
 
-      }
 
-      
+      color: var(--primary-color);
 
+    }
 
+
 
     .search-hint {
 
     .search-hint {
 
       text-align: center;
 
       text-align: center;
 
       margin-top: 15px;
 
       margin-top: 15px;
 
       color: var(--light-text);
 
       color: var(--light-text);
 
       font-size: 0.9rem;
 
       font-size: 0.9rem;
 
     }
 
     }
 
-    
+
 
 
 
     .category-filters {
 
     .category-filters {
 
       display: flex;
 
       display: flex;
 
@@ -128,114 +129,118 @@
 
     }
 
     }
 
 
 
     .tag-cloud .tag-item:hover {
 
     .tag-cloud .tag-item:hover {
 
-      transform: scale(2.0); /* 悬停时放大 */
 
+      transform: scale(2.0);
 
+      /* 悬停时放大 */
 
     }
 
     }
 
 
 
-      /* 设计师模块样式 */
 
-  .designers-section {
 
-    background-color: white;
 
-    border-radius: 10px;
 
-    padding: 30px;
 
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 
-    margin-bottom: 50px;
 
-  }
 
-  
-  .designers-grid {
 
-    display: grid;
 
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
-    gap: 30px;
 
-    margin-top: 30px;
 
-  }
 
-  
-  .designer-card {
 
-    background-color: var(--background-color);
 
-    border-radius: 10px;
 
-    padding: 20px;
 
-    text-align: center;
 
-    transition: all 0.3s ease;
 
-    cursor: pointer;
 
-  }
 
-  
-  .designer-card:hover {
 
-    transform: translateY(-5px);
 
-    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 
-  }
 
-  
-  .designer-avatar {
 
-    width: 120px;
 
-    height: 120px;
 
-    border-radius: 50%;
 
-    overflow: hidden;
 
-    margin: 0 auto 15px;
 
-    border: 3px solid var(--secondary-color);
 
-    transition: all 0.3s ease;
 
-  }
 
-  
-  .designer-card:hover .designer-avatar {
 
-    border-color: var(--primary-color);
 
-  }
 
-  
-  .designer-avatar img {
 
-    width: 100%;
 
-    height: 100%;
 
-    object-fit: cover;
 
-  }
 
-  
-  .designer-name {
 
-    font-size: 1.2rem;
 
-    font-weight: 600;
 
-    color: var(--text-color);
 
-    margin-bottom: 5px;
 
-  }
 
-  
-  .designer-specialty {
 
-    font-size: 0.9rem;
 
-    color: var(--light-text);
 
-    margin-bottom: 10px;
 
-  }
 
-  
-  .designer-stats {
 
-    display: flex;
 
-    justify-content: center;
 
-    gap: 15px;
 
-    margin-bottom: 0;
 
-  }
 
-  
-  .designer-stat {
 
-    text-align: center;
 
-  }
 
-  
-  .stat-number {
 
-    font-size: 1.3rem;
 
-    font-weight: 700;
 
-    color: var(--primary-color);
 
-  }
 
-  
-  .stat-label {
 
-    font-size: 0.8rem;
 
-    color: var(--light-text);
 
-  }
 
-
 
-
 
-  @media (max-width: 768px) {
 
-    .container {
 
-      padding: 0;
 
+    /* 设计师模块样式 */
 
+    .designers-section {
 
+      background-color: white;
 
+      border-radius: 10px;
 
+      padding: 30px;
 
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 
+      margin-bottom: 50px;
 
     }
 
     }
 
-    .category-filters {
 
-      justify-content: flex-start;
 
+
 
+    .designers-grid {
 
+      display: grid;
 
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
+      gap: 30px;
 
+      margin-top: 30px;
 
     }
 
     }
 
 
 
-    .category-btn {
 
-      padding: 8px 15px;
 
+    .designer-card {
 
+      background-color: var(--background-color);
 
+      border-radius: 10px;
 
+      padding: 20px;
 
+      text-align: center;
 
+      transition: all 0.3s ease;
 
+      cursor: pointer;
 
+    }
 
+
 
+    .designer-card:hover {
 
+      transform: translateY(-5px);
 
+      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 
+    }
 
+
 
+    .designer-avatar {
 
+      width: 120px;
 
+      height: 120px;
 
+      border-radius: 50%;
 
+      overflow: hidden;
 
+      margin: 0 auto 15px;
 
+      border: 3px solid var(--secondary-color);
 
+      transition: all 0.3s ease;
 
+    }
 
+
 
+    .designer-card:hover .designer-avatar {
 
+      border-color: var(--primary-color);
 
+    }
 
+
 
+    .designer-avatar img {
 
+      width: 100%;
 
+      height: 100%;
 
+      object-fit: cover;
 
+    }
 
+
 
+    .designer-name {
 
+      font-size: 1.2rem;
 
+      font-weight: 600;
 
+      color: var(--text-color);
 
+      margin-bottom: 5px;
 
+    }
 
+
 
+    .designer-specialty {
 
       font-size: 0.9rem;
 
       font-size: 0.9rem;
 
+      color: var(--light-text);
 
+      margin-bottom: 10px;
 
     }
 
     }
 
 
 
-    .designers-grid {
 
-      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 
+    .designer-stats {
 
+      display: flex;
 
+      justify-content: center;
 
+      gap: 15px;
 
+      margin-bottom: 0;
 
+    }
 
+
 
+    .designer-stat {
 
+      text-align: center;
 
+    }
 
+
 
+    .stat-number {
 
+      font-size: 1.3rem;
 
+      font-weight: 700;
 
+      color: var(--primary-color);
 
+    }
 
+
 
+    .stat-label {
 
+      font-size: 0.8rem;
 
+      color: var(--light-text);
 
+    }
 
+
 
+
 
+    @media (max-width: 768px) {
 
+      .container {
 
+        padding: 0;
 
+      }
 
+
 
+      .category-filters {
 
+        justify-content: flex-start;
 
+      }
 
+
 
+      .category-btn {
 
+        padding: 8px 15px;
 
+        font-size: 0.9rem;
 
+      }
 
+
 
+      .designers-grid {
 
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 
+      }
 
     }
 
     }
 
-  }
 
   </style>
 
   </style>
 
-  <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop' async='async'></script>
 
+  <script type='text/javascript'
 
+    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
 
+    async='async'></script>
 
 </head>
 
 </head>
 
 <!-- Google tag (gtag.js) -->
 
 <!-- Google tag (gtag.js) -->
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
@@ -246,152 +251,175 @@
 
 
 
   gtag('config', 'G-JBGGVGLHTP');
 
   gtag('config', 'G-JBGGVGLHTP');
 
 </script>
 
 </script>
 
+
 
 <body>
 
 <body>
 
   <%- include('header') %>
 
   <%- include('header') %>
 
 
 
-  <main class="container">
 
-    <section>
 
-      <h1>Explore Coloring Pages</h1>
 
-      <p>Discover over 20,000 free printable coloring pages for all ages. Browse our categories and find your next coloring project!</p>
 
-
 
-      <!-- 搜索框 -->
 
-      <div class="search-container">
 
-        <input type="text" class="search-input" placeholder="Search for coloring pages..." value="<%= searchTerm || '' %>">
 
-        <button class="search-button">🔍</button>
 
-      </div>
 
-      <div class="search-hint">Still haven't found the coloring page you want? Try a direct search.</div>
 
-      
-
 
-      <div class="category-filters">
 
-        <a href="/coloring-page-gallery"><button class="category-btn" data-category="latest">Latest</button></a>
 
-        <a href="?category=data_good"><button class="category-btn" data-category="data_good">Popular</button></a>
 
-        <a href="?category=animal"><button class="category-btn" data-category="animal">Animal</button></a>
 
-        <a href="?category=mandala"><button class="category-btn" data-category="mandala">Mandala</button></a>
 
-        <a href="?category=people"><button class="category-btn" data-category="people">People</button></a>
 
-        <a href="?category=scenery"><button class="category-btn" data-category="scenery">Scenery</button></a>
 
-        <a href="?category=life"><button class="category-btn" data-category="life">Life</button></a>
 
-        <a href="?category=fantasy"><button class="category-btn" data-category="fantasy">Fantasy</button></a>
 
-        <a href="?category=place"><button class="category-btn" data-category="place">Places</button></a>
 
-        <a href="?category=special_date"><button class="category-btn" data-category="special_date">Holiday</button></a>
 
-        <a href="?category=food"><button class="category-btn" data-category="food">Food</button></a>
 
-        <a href="?category=simple"><button class="category-btn" data-category="simple">Easy</button></a>
 
-        <a href="?category=culture"><button class="category-btn" data-category="culture">Culture</button></a>
 
-        <a href="?category=famous"><button class="category-btn" data-category="famous">Famous</button></a>
 
-        <a href="?category=patterns"><button class="category-btn" data-category="patterns">Patterns</button></a>
 
-        <a href="?category=zentangle"><button class="category-btn" data-category="zentangle">Zentangle</button></a>
 
-        <a href="?category=zen"><button class="category-btn" data-category="zen">Zen</button></a>
 
-        <a href="?category=bird"><button class="category-btn" data-category="bird">Bird</button></a>
 
-      </div>
 
-
 
-      <div class="coloring-grid">
 
-        <% data.forEach(item=> { %>
 
-          <div class="coloring-card">
 
-            <div data-content-id="<%= item._id %>" class="coloring-image">
 
-              <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
 
-            </div>
 
-            <div class="coloring-content">
 
-              <div class="coloring-title"><%= item.title %></div>
 
-              <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>"><%= item.user.username %></a></div>
 
-              <div class="coloring-meta">
 
-                <div class="date"><%= item.publishTime %></div>
 
-                <div class="views"><%= item.totalStartCount %></div>
 
+    <main class="container">
 
+      <section>
 
+        <h1>Explore Coloring Pages</h1>
 
+        <p>Discover over 20,000 free printable coloring pages for all ages. Browse our categories and find your next
 
+          coloring project!</p>
 
+
 
+        <!-- 搜索框 -->
 
+        <div class="search-container">
 
+          <input type="text" class="search-input" placeholder="Search for coloring pages..."
 
+            value="<%= searchTerm || '' %>">
 
+          <button class="search-button">🔍</button>
 
+        </div>
 
+        <div class="search-hint">Still haven't found the coloring page you want? Try a direct search.</div>
 
+
 
+
 
+        <div class="category-filters">
 
+          <a href="/coloring-page-gallery"><button class="category-btn" data-category="latest">Latest</button></a>
 
+          <a href="?category=data_good"><button class="category-btn" data-category="data_good">Popular</button></a>
 
+          <a href="?category=animal"><button class="category-btn" data-category="animal">Animal</button></a>
 
+          <a href="?category=mandala"><button class="category-btn" data-category="mandala">Mandala</button></a>
 
+          <a href="?category=people"><button class="category-btn" data-category="people">People</button></a>
 
+          <a href="?category=scenery"><button class="category-btn" data-category="scenery">Scenery</button></a>
 
+          <a href="?category=life"><button class="category-btn" data-category="life">Life</button></a>
 
+          <a href="?category=fantasy"><button class="category-btn" data-category="fantasy">Fantasy</button></a>
 
+          <a href="?category=place"><button class="category-btn" data-category="place">Places</button></a>
 
+          <a href="?category=special_date"><button class="category-btn"
 
+              data-category="special_date">Holiday</button></a>
 
+          <a href="?category=food"><button class="category-btn" data-category="food">Food</button></a>
 
+          <a href="?category=simple"><button class="category-btn" data-category="simple">Easy</button></a>
 
+          <a href="?category=culture"><button class="category-btn" data-category="culture">Culture</button></a>
 
+          <a href="?category=famous"><button class="category-btn" data-category="famous">Famous</button></a>
 
+          <a href="?category=patterns"><button class="category-btn" data-category="patterns">Patterns</button></a>
 
+          <a href="?category=zentangle"><button class="category-btn" data-category="zentangle">Zentangle</button></a>
 
+          <a href="?category=zen"><button class="category-btn" data-category="zen">Zen</button></a>
 
+          <a href="?category=bird"><button class="category-btn" data-category="bird">Bird</button></a>
 
+        </div>
 
+
 
+        <div class="coloring-grid">
 
+          <% data.forEach(item=> { %>
 
+            <div class="coloring-card">
 
+              <div data-content-id="<%= item._id %>" class="coloring-image">
 
+                <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
 
               </div>
 
               </div>
 
-              <div class="coloring-tags">
 
-                <% item.tags.forEach(tag=> { %>
 
-                  <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>"><%= tag %></span></a>
 
-                <% }); %>
 
+              <div class="coloring-content">
 
+                <div class="coloring-title">
 
+                  <%= item.title %>
 
+                </div>
 
+                <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>">
 
+                    <%= item.user.username %>
 
+                  </a></div>
 
+                <div class="coloring-meta">
 
+                  <div class="date">
 
+                    <%= item.publishTime %>
 
+                  </div>
 
+                  <div class="views">
 
+                    <%= item.totalStartCount %>
 
+                  </div>
 
+                </div>
 
+                <div class="coloring-tags">
 
+                  <% item.tags.forEach(tag=> { %>
 
+                    <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>">
 
+                        <%= tag %>
 
+                      </span></a>
 
+                    <% }); %>
 
+                </div>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
-          </div>
 
-        <% }); %>
 
-        <% if (!data || data.length <= 0) { %>
 
-          <div class="no-results" style="grid-column: 1 / -1; text-align: center; padding: 50px 0;">
 
-            <img src="/assets/icon/noresult.webp" alt="No Results" style="width: 400px; margin-bottom: 20px; opacity: 0.5;border-radius: 20px;">
 
-            <h3>No coloring pages found</h3>
 
-            <p>Try adjusting your search terms or filters.</p>
 
-          </div>
 
-        <% } %>
 
-      </div>
 
-      
-      <% if (data && data.length > 0) { %>
 
-        <%- include('pagination') %>
 
-      <% } %>
 
-    </section>
 
-
 
-    <section>
 
-      <h2>More categories to explore your favorite coloring pages</h2>
 
-      <div class="tag-cloud">
 
-      <% tags.forEach(item=> { %>
 
-        <a href="?category=<%= item.tag %>" class="tag-item <%= item.tag == tag ? 'active' : '' %>" style="color: <%= item.color %>;"><%= item.tag == 'data_good' ? 'popular' : item.tag %></a>
 
-      <% }); %>
 
-      </div>
 
-    </section>
 
-
 
-    <section class="designers-section">
 
-      <h2>Meet Our Creative Designers</h2>
 
-      <p>These talented artists create all the beautiful coloring pages you find on our site. Each designer brings their unique style and expertise to our collection.</p>
 
-
 
-      <div class="designers-grid">
 
-        <% designers.forEach(item=> { %>
 
-        <a href="/coloring-page-gallery?author=<%= item.username %>">
 
-          <div class="designer-card" data-author="<%= item.username %>">
 
-              <div class="designer-avatar">
 
-                <img src="<%= item.avatar %>" alt="<%= item.username %>">
 
-              </div>
 
-              <div class="designer-name"><%= item.username %></div>
 
-              <div class="designer-stats">
 
-                <div class="designer-stat">
 
-                  <div class="stat-number"><%= item.count %></div>
 
-                  <div class="stat-label">Designs</div>
 
+            <% }); %>
 
+              <% if (!data || data.length <=0) { %>
 
+                <div class="no-results" style="grid-column: 1 / -1; text-align: center; padding: 50px 0;">
 
+                  <img src="/assets/icon/noresult.webp" alt="No Results"
 
+                    style="width: 400px; margin-bottom: 20px; opacity: 0.5;border-radius: 20px;">
 
+                  <h3>No coloring pages found</h3>
 
+                  <p>Try adjusting your search terms or filters.</p>
 
+                </div>
 
+                <% } %>
 
+        </div>
 
+
 
+        <% if (data && data.length> 0) { %>
 
+          <%- include('pagination') %>
 
+            <% } %>
 
+      </section>
 
+
 
+      <section>
 
+        <h2>More categories to explore your favorite coloring pages</h2>
 
+        <div class="tag-cloud">
 
+          <% tags.forEach(item=> { %>
 
+            <a href="?category=<%= item.tag %>" class="tag-item <%= item.tag == tag ? 'active' : '' %>"
 
+              style="color: <%= item.color %>;">
 
+              <%= item.tag=='data_good' ? 'popular' : item.tag %>
 
+            </a>
 
+            <% }); %>
 
+        </div>
 
+      </section>
 
+
 
+      <section class="designers-section">
 
+        <h2>Meet Our Creative Designers</h2>
 
+        <p>These talented artists create all the beautiful coloring pages you find on our site. Each designer brings
 
+          their unique style and expertise to our collection.</p>
 
+
 
+        <div class="designers-grid">
 
+          <% designers.forEach(item=> { %>
 
+            <a href="/coloring-page-gallery?author=<%= item.username %>">
 
+              <div class="designer-card" data-author="<%= item.username %>">
 
+                <div class="designer-avatar">
 
+                  <img src="<%= item.avatar %>" alt="<%= item.username %>">
 
+                </div>
 
+                <div class="designer-name">
 
+                  <%= item.username %>
 
+                </div>
 
+                <div class="designer-stats">
 
+                  <div class="designer-stat">
 
+                    <div class="stat-number">
 
+                      <%= item.count %>
 
+                    </div>
 
+                    <div class="stat-label">Designs</div>
 
+                  </div>
 
                 </div>
 
                 </div>
 
               </div>
 
               </div>
 
-          </div>
 
-        </a>
 
-        <% }); %>
 
-      </div>
 
-    </section>
 
-
 
-  </main>
 
-
 
-  <%- include('footer') %>
 
-
 
-
 
-  
-  <script src="/scripts/script.js"></script>
 
-  <script src="/scripts/progress2.js"></script>
 
+            </a>
 
+            <% }); %>
 
+        </div>
 
+      </section>
 
+
 
+    </main>
 
+
 
+    <%- include('footer') %>
 
+
 
+
 
+
 
+      <script src="/scripts/script.js"></script>
 
+      <script src="/scripts/progress2.js"></script>
 
+
 
+      <script>
 
+        // 分类选中
 
+        const categoryButtons = document.querySelectorAll('.category-btn');
 
+        categoryButtons.forEach(button => {
 
+          const category = button.getAttribute('data-category');
 
+          if (category == '<%= tag %>') {
 
+            button.classList.add('active');
 
+          }
 
+        });
 
+
 
+        // 搜索功能
 
+        const searchInput = document.querySelector('.search-input');
 
+        const searchButton = document.querySelector('.search-button');
 
+
 
+        function performSearch() {
 
+          const searchTerm = searchInput.value.trim();
 
+          if (searchTerm) {
 
+            window.location.href = `?search=${encodeURIComponent(searchTerm)}`;
 
+          } else {
 
+            // 如果搜索框为空，显示所有结果
 
+            window.location.href = '';
 
+          }
 
+        }
 
 
 
-  <script>
 
-    // 分类选中
 
-    const categoryButtons = document.querySelectorAll('.category-btn');
 
-    categoryButtons.forEach(button => {
 
-      const category = button.getAttribute('data-category');
 
-      if (category == '<%= tag %>') {
 
-        button.classList.add('active');
 
-      }
 
-    });
 
-
 
-    // 搜索功能
 
-    const searchInput = document.querySelector('.search-input');
 
-    const searchButton = document.querySelector('.search-button');
 
-    
-    function performSearch() {
 
-      const searchTerm = searchInput.value.trim();
 
-      if (searchTerm) {
 
-          window.location.href = `?search=${encodeURIComponent(searchTerm)}`;
 
-      } else {
 
-          // 如果搜索框为空，显示所有结果
 
-          window.location.href = '';
 
-      }
 
-    }
 
-    
-    searchButton.addEventListener('click', performSearch);
 
-    searchInput.addEventListener('keypress', (e) => {
 
-        if (e.key === 'Enter') {
 
+        searchButton.addEventListener('click', performSearch);
 
+        searchInput.addEventListener('keypress', (e) => {
 
+          if (e.key === 'Enter') {
 
             performSearch();
 
             performSearch();
 
-        }
 
-    });
 
+          }
 
+        });
 
 
 
-  </script>
 
+      </script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 12 - 7
views/v2/header.ejs
Vedi File 

@@ -1,14 +1,15 @@
 
 <header id="main-header">
 
 <header id="main-header">
 
   <div class="header-container">
 
   <div class="header-container">
 
     <div class="nav-logo">
 
     <div class="nav-logo">
 
-      <a href="/"><img src="/assets/icon/logo3.webp" id="logo-img" class="logo" alt="Art Number Coloring Logo"></a>
 
-      <!-- <span>Art Number Coloring</span> -->
 
+      <a href="/"><img src="/assets/icon/logo3.webp" id="logo-img" class="logo" alt="Art Color Logo"></a>
 
+      <!-- <span>Art Color</span> -->
 
     </div>
 
     </div>
 
     <button class="menu-btn" id="menuBtn">☰</button>
 
     <button class="menu-btn" id="menuBtn">☰</button>
 
 
 
     <nav class="nav-menu">
 
     <nav class="nav-menu">
 
       <li class="dropdown-menu">
 
       <li class="dropdown-menu">
 
-        <a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>" style="padding: 30px 0 30px 0">COLORING PAGES
 
+        <a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>"
 
+          style="padding: 30px 0 30px 0">COLORING PAGES
 
           <span><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 
           <span><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 
               version="1.1" x="0px" y="0px" width="15px" height="10px" viewBox="57 35.171 26 16.043"
 
               version="1.1" x="0px" y="0px" width="15px" height="10px" viewBox="57 35.171 26 16.043"
 
               enable-background="new 57 35.171 26 16.043" xml:space="preserve">
 
               enable-background="new 57 35.171 26 16.043" xml:space="preserve">
 
@@ -17,12 +18,14 @@
 
         </a>
 
         </a>
 
         <div class="dropdown-menu-btn">
 
         <div class="dropdown-menu-btn">
 
           <a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>">Collections</a>
 
           <a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>">Collections</a>
 
-          <a href="/coloring-page-albums" class="<%= uri.includes(`/coloring-page-albums`) ? 'active' : '' %>">Albums</a>
 
+          <a href="/coloring-page-albums"
 
+            class="<%= uri.includes(`/coloring-page-albums`) ? 'active' : '' %>">Albums</a>
 
           <!-- <a href="#">ANIMALs</a>
 
           <!-- <a href="#">ANIMALs</a>
 
           <a href="#">HOLIDAYS</a> -->
 
           <a href="#">HOLIDAYS</a> -->
 
         </div>
 
         </div>
 
       </li>
 
       </li>
 
-      <li><a href="/coloring-page-gallery" class="<%= uri.includes(`/coloring-page-gallery`) ? 'active' : '' %>">GALLERY</a></li>
 
+      <li><a href="/coloring-page-gallery"
 
+          class="<%= uri.includes(`/coloring-page-gallery`) ? 'active' : '' %>">GALLERY</a></li>
 
       <li><a href="/tips-tricks" class="<%= uri.includes(`/tips-tricks`) ? 'active' : '' %>">TIPS & TRICKS</a></li>
 
       <li><a href="/tips-tricks" class="<%= uri.includes(`/tips-tricks`) ? 'active' : '' %>">TIPS & TRICKS</a></li>
 
       <li><a href="/app" target="_blank" class="<%= uri.includes(`/app`) ? 'active' : '' %>">APP</a></li>
 
       <li><a href="/app" target="_blank" class="<%= uri.includes(`/app`) ? 'active' : '' %>">APP</a></li>
 
       <li><a href="/myworks" class="<%= uri.includes(`/myworks`) ? 'active' : '' %>">MY WORKS</a></li>
 
       <li><a href="/myworks" class="<%= uri.includes(`/myworks`) ? 'active' : '' %>">MY WORKS</a></li>
 
@@ -31,8 +34,10 @@
 
 
 
   <div class="mobile-menu" id="mobileMenu">
 
   <div class="mobile-menu" id="mobileMenu">
 
     <ul>
 
     <ul>
 
-      <li><a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>">COLORING PAGES</a></li>
 
-      <li><a href="/coloring-page-gallery" class="<%= uri.includes(`/coloring-page-gallery`) ? 'active' : '' %>">GALLERY</a></li>
 
+      <li><a href="/coloring-pages" class="<%= uri.includes(`/coloring-pages`) ? 'active' : '' %>">COLORING PAGES</a>
 
+      </li>
 
+      <li><a href="/coloring-page-gallery"
 
+          class="<%= uri.includes(`/coloring-page-gallery`) ? 'active' : '' %>">GALLERY</a></li>
 
       <li><a href="/tips-tricks" class="<%= uri.includes(`/tips-tricks`) ? 'active' : '' %>">TIPS & TRICKS</a></li>
 
       <li><a href="/tips-tricks" class="<%= uri.includes(`/tips-tricks`) ? 'active' : '' %>">TIPS & TRICKS</a></li>
 
       <li><a href="/app" target="_blank" class="<%= uri.includes(`/app`) ? 'active' : '' %>">APP</a></li>
 
       <li><a href="/app" target="_blank" class="<%= uri.includes(`/app`) ? 'active' : '' %>">APP</a></li>
 
       <li><a href="/myworks" class="<%= uri.includes(`/myworks`) ? 'active' : '' %>">MY WORKS</a></li>
 
       <li><a href="/myworks" class="<%= uri.includes(`/myworks`) ? 'active' : '' %>">MY WORKS</a></li>

+ 364 - 306
views/v2/how-to-color-mandala.ejs
Vedi File 

@@ -1,10 +1,12 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta name="description" content="Unlock the tranquility of Mandala coloring with our guide. Learn essential tools and techniques, from color theory to advanced blending, and discover how these intricate designs promote mindfulness and creativity. Start your meditative art journey online!">
 
-    <title>How to Color Mandala Coloring Pages - Art Number Coloring</title>
 
+    <meta name="description"
 
+        content="Unlock the tranquility of Mandala coloring with our guide. Learn essential tools and techniques, from color theory to advanced blending, and discover how these intricate designs promote mindfulness and creativity. Start your meditative art journey online!">
 
+    <title>How to Color Mandala Coloring Pages - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
@@ -12,13 +14,14 @@
 
             --online-color: #7b68ee;
 
             --online-color: #7b68ee;
 
             /* 在线填色功能专属色 */
 
             /* 在线填色功能专属色 */
 
         }
 
         }
 
+
 
         .page-title {
 
         .page-title {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 2.2rem;
 
             font-size: 2.2rem;
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-content {
 
         .blog-content {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -26,18 +29,18 @@
 
             padding: 40px;
 
             padding: 40px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .blog-meta {
 
         .blog-meta {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-size: 0.9rem;
 
             font-size: 0.9rem;
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-meta span {
 
         .blog-meta span {
 
             margin: 0 10px;
 
             margin: 0 10px;
 
         }
 
         }
 
-        
+
 
         .blog-image {
 
         .blog-image {
 
             width: 100%;
 
             width: 100%;
 
             max-height: 400px;
 
             max-height: 400px;
 
@@ -45,27 +48,27 @@
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
         }
 
         }
 
-        
+
 
         .blog-content h2 {
 
         .blog-content h2 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 1.7rem;
 
             font-size: 1.7rem;
 
             margin: 30px 0 15px;
 
             margin: 30px 0 15px;
 
         }
 
         }
 
-        
+
 
         .blog-content p {
 
         .blog-content p {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             line-height: 1.7;
 
             line-height: 1.7;
 
         }
 
         }
 
-        
+
 
         .blog-content ul {
 
         .blog-content ul {
 
             margin: 20px 0;
 
             margin: 20px 0;
 
             padding-left: 40px;
 
             padding-left: 40px;
 
         }
 
         }
 
-        
+
 
         .blog-content li {
 
         .blog-content li {
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .cta-box {
 
         .cta-box {
 
             background-color: var(--background-color);
 
             background-color: var(--background-color);
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -73,13 +76,13 @@
 
             margin: 40px 0;
 
             margin: 40px 0;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .cta-box h3 {
 
         .cta-box h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .cta-btn {
 
         .cta-btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
@@ -91,7 +94,7 @@
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
             margin: 15px 10px 0;
 
             margin: 15px 10px 0;
 
         }
 
         }
 
-        
+
 
         .cta-btn:hover {
 
         .cta-btn:hover {
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
         }
 
         }
 
@@ -113,14 +116,14 @@
 
             background-color: #6a5acd;
 
             background-color: #6a5acd;
 
             transform: translateY(-2px);
 
             transform: translateY(-2px);
 
         }
 
         }
 
-        
+
 
         .feature-grid {
 
         .feature-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: 1fr 1fr;
 
             grid-template-columns: 1fr 1fr;
 
             gap: 30px;
 
             gap: 30px;
 
             margin: 40px 0;
 
             margin: 40px 0;
 
         }
 
         }
 
-        
+
 
         .feature-card {
 
         .feature-card {
 
             background-color: #f8f9fa;
 
             background-color: #f8f9fa;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -128,24 +131,24 @@
 
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .feature-card:hover {
 
         .feature-card:hover {
 
             transform: translateY(-5px);
 
             transform: translateY(-5px);
 
         }
 
         }
 
-        
+
 
         .feature-icon {
 
         .feature-icon {
 
             font-size: 2.5rem;
 
             font-size: 2.5rem;
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .feature-title {
 
         .feature-title {
 
             font-size: 1.3rem;
 
             font-size: 1.3rem;
 
             font-weight: 600;
 
             font-weight: 600;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .app-demo {
 
         .app-demo {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: 1fr 1fr;
 
             grid-template-columns: 1fr 1fr;
 
@@ -153,39 +156,39 @@
 
             margin: 40px 0;
 
             margin: 40px 0;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
 
-        
+
 
         .app-screenshot {
 
         .app-screenshot {
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .app-screenshot img {
 
         .app-screenshot img {
 
             max-width: 80%;
 
             max-width: 80%;
 
             border-radius: 15px;
 
             border-radius: 15px;
 
             box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
 
             box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
 
         }
 
         }
 
-        
+
 
         .app-stores {
 
         .app-stores {
 
             margin-top: 20px;
 
             margin-top: 20px;
 
         }
 
         }
 
-        
+
 
         .app-stores a {
 
         .app-stores a {
 
             display: inline-block;
 
             display: inline-block;
 
             margin: 10px;
 
             margin: 10px;
 
         }
 
         }
 
-        
+
 
         .app-stores img {
 
         .app-stores img {
 
             height: 50px;
 
             height: 50px;
 
         }
 
         }
 
-        
+
 
         .step-by-step {
 
         .step-by-step {
 
             margin: 50px 0;
 
             margin: 50px 0;
 
         }
 
         }
 
-        
+
 
         .step {
 
         .step {
 
             display: flex;
 
             display: flex;
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
         }
 
         }
 
-        
+
 
         .step-number {
 
         .step-number {
 
             min-width: 60px;
 
             min-width: 60px;
 
             height: 60px;
 
             height: 60px;
 
@@ -199,25 +202,25 @@
 
             font-weight: bold;
 
             font-weight: bold;
 
             margin-right: 25px;
 
             margin-right: 25px;
 
         }
 
         }
 
-        
+
 
         .step-content {
 
         .step-content {
 
             flex: 1;
 
             flex: 1;
 
         }
 
         }
 
-        
+
 
         .step-title {
 
         .step-title {
 
             font-size: 1.3rem;
 
             font-size: 1.3rem;
 
             font-weight: 600;
 
             font-weight: 600;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
         }
 
         }
 
-        
+
 
         .gallery {
 
         .gallery {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(3, 1fr);
 
             grid-template-columns: repeat(3, 1fr);
 
             gap: 20px;
 
             gap: 20px;
 
             margin: 40px 0;
 
             margin: 40px 0;
 
         }
 
         }
 
-        
+
 
         .gallery-item {
 
         .gallery-item {
 
             overflow: hidden;
 
             overflow: hidden;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -225,17 +228,17 @@
 
             position: relative;
 
             position: relative;
 
             transition: transform 0.3s ease;
 
             transition: transform 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .gallery-item:hover {
 
         .gallery-item:hover {
 
             transform: translateY(-5px);
 
             transform: translateY(-5px);
 
         }
 
         }
 
-        
+
 
         .gallery-item img {
 
         .gallery-item img {
 
             width: 100%;
 
             width: 100%;
 
             height: 300px;
 
             height: 300px;
 
             object-fit: cover;
 
             object-fit: cover;
 
         }
 
         }
 
-        
+
 
         .gallery-overlay {
 
         .gallery-overlay {
 
             position: absolute;
 
             position: absolute;
 
             bottom: 0;
 
             bottom: 0;
 
@@ -248,44 +251,45 @@
 
             opacity: 0;
 
             opacity: 0;
 
             transition: opacity 0.3s ease;
 
             transition: opacity 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .gallery-item:hover .gallery-overlay {
 
         .gallery-item:hover .gallery-overlay {
 
             opacity: 1;
 
             opacity: 1;
 
         }
 
         }
 
-        
-        
+
 
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .blog-content {
 
             .blog-content {
 
                 padding: 25px;
 
                 padding: 25px;
 
             }
 
             }
 
-            
+
 
             .blog-content h2 {
 
             .blog-content h2 {
 
                 font-size: 1.5rem;
 
                 font-size: 1.5rem;
 
             }
 
             }
 
-            
-            .feature-grid, .app-demo {
 
+
 
+            .feature-grid,
 
+            .app-demo {
 
                 grid-template-columns: 1fr;
 
                 grid-template-columns: 1fr;
 
             }
 
             }
 
-            
+
 
             .step {
 
             .step {
 
                 flex-direction: column;
 
                 flex-direction: column;
 
             }
 
             }
 
-            
+
 
             .step-number {
 
             .step-number {
 
                 margin-bottom: 20px;
 
                 margin-bottom: 20px;
 
             }
 
             }
 
-            
+
 
             .gallery {
 
             .gallery {
 
                 grid-template-columns: 1fr 1fr;
 
                 grid-template-columns: 1fr 1fr;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 
 
-<script type="application/ld+json">
 
+    <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "BlogPosting",
 
   "@type": "BlogPosting",
 
@@ -311,11 +315,11 @@
 
   "dateModified": "2025-06-29T00:00:00+00:00",
 
   "dateModified": "2025-06-29T00:00:00+00:00",
 
   "author": {
 
   "author": {
 
     "@type": "Person",
 
     "@type": "Person",
 
-    "name": "Art Number Coloring"
 
+    "name": "Art Color"
 
   },
 
   },
 
   "publisher": {
 
   "publisher": {
 
     "@type": "Organization",
 
     "@type": "Organization",
 
-    "name": "Art Number Coloring",
 
+    "name": "Art Color",
 
     "logo": {
 
     "logo": {
 
       "@type": "ImageObject",
 
       "@type": "ImageObject",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
@@ -337,9 +341,9 @@
 
 </script>
 
 </script>
 
 
 
 
 
-<script type='text/javascript'
 
-    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
 
-    async='async'></script>
 
+    <script type='text/javascript'
 
+        src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
 
+        async='async'></script>
 
 
 
 </head>
 
 </head>
 
 
 
@@ -355,294 +359,348 @@
 
 
 
 <body>
 
 <body>
 
     <%- include('header') %>
 
     <%- include('header') %>
 
-    
-    <div class="container">
 
-        <div class="breadcrumb">
 
-            <a href="/">Home</a> &gt; <a href="/tips-tricks">Tips & Tricks</a> &gt; How to Color Mandala Coloring Pages
 
-        </div>
 
-        
-        <h1 class="page-title">How to Color Mandala Coloring Pages</h1>
 
-        
-        <div class="blog-content">
 
-            <div class="blog-meta">
 
-                <span>Posted on June 29, 2025</span>
 
-                <span>Category: Coloring Tips & Tricks</span>
 
+
 
+        <div class="container">
 
+            <div class="breadcrumb">
 
+                <a href="/">Home</a> &gt; <a href="/tips-tricks">Tips & Tricks</a> &gt; How to Color Mandala Coloring
 
+                Pages
 
             </div>
 
             </div>
 
-            
-            <img src="/assets/tips-tricks/how-to-color-mandala.webp" alt="Beautiful mandala coloring page" class="blog-image">
 
-            
-            <p>Mandala coloring pages are more than just a creative outlet—they're a journey into mindfulness and self-expression. These intricate, symmetrical designs have captivated artists and enthusiasts for centuries, offering a therapeutic escape and a chance to create stunning works of art. In this guide, we'll explore the art of coloring mandalas, from choosing the right tools to advanced techniques that will transform your coloring experience.</p>
 
-            
-            <h2>Why Mandala Coloring?</h2>
 
-            
-            <div class="feature-grid">
 
-                <div class="feature-card">
 
-                    <div class="feature-icon">🧘</div>
 
-                    <div class="feature-title">Mindfulness in Motion</div>
 
-                    <p>Coloring mandalas helps you enter a meditative state, reducing stress and anxiety while increasing focus and concentration.</p>
 
-                </div>
 
-                
-                <div class="feature-card">
 
-                    <div class="feature-icon">🌈</div>
 
-                    <div class="feature-title">Creative Expression</div>
 
-                    <p>With endless patterns and color combinations, mandalas allow you to express your unique style and artistic vision.</p>
 
-                </div>
 
-                
-                <div class="feature-card">
 
-                    <div class="feature-icon">🌌</div>
 
-                    <div class="feature-title">Symmetry & Balance</div>
 
-                    <p>The symmetrical nature of mandalas reflects harmony and balance, creating a sense of order in your artwork.</p>
 
-                </div>
 
-                
-                <div class="feature-card">
 
-                    <div class="feature-icon">🎨</div>
 
-                    <div class="feature-title">Skill Development</div>
 
-                    <p>Coloring mandalas enhances fine motor skills, hand-eye coordination, and color theory knowledge.</p>
 
+
 
+            <h1 class="page-title">How to Color Mandala Coloring Pages</h1>
 
+
 
+            <div class="blog-content">
 
+                <div class="blog-meta">
 
+                    <span>Posted on June 29, 2025</span>
 
+                    <span>Category: Coloring Tips & Tricks</span>
 
                 </div>
 
                 </div>
 
-            </div>
 
-            
-            <h2>Getting Started: Tools for Mandala Coloring</h2>
 
-            
-            <div class="step-by-step">
 
-                <div class="step">
 
-                    <div class="step-number">1</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Choose Your Coloring Medium</div>
 
-                        <p>Select tools that match your style and preferences:</p>
 
-                        <ul>
 
-                            <li><strong>Colored Pencils:</strong> Ideal for blending, shading, and detailed work</li>
 
-                            <li><strong>Markers:</strong> Vibrant colors and quick coverage, perfect for bold designs</li>
 
-                            <li><strong>Watercolor Pencils:</strong> Create beautiful watercolor effects when blended with water</li>
 
-                            <li><strong>Gel Pens:</strong> Add sparkle and shine to your mandalas with metallic or glitter gel pens</li>
 
-                        </ul>
 
-                        <img src="/assets/tips-tricks/coloring-tools-for-mandala.webp" alt="Coloring tools for mandalas" class="blog-image" style="max-height: 300px;">
 
+
 
+                <img src="/assets/tips-tricks/how-to-color-mandala.webp" alt="Beautiful mandala coloring page"
 
+                    class="blog-image">
 
+
 
+                <p>Mandala coloring pages are more than just a creative outlet—they're a journey into mindfulness and
 
+                    self-expression. These intricate, symmetrical designs have captivated artists and enthusiasts for
 
+                    centuries, offering a therapeutic escape and a chance to create stunning works of art. In this
 
+                    guide, we'll explore the art of coloring mandalas, from choosing the right tools to advanced
 
+                    techniques that will transform your coloring experience.</p>
 
+
 
+                <h2>Why Mandala Coloring?</h2>
 
+
 
+                <div class="feature-grid">
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🧘</div>
 
+                        <div class="feature-title">Mindfulness in Motion</div>
 
+                        <p>Coloring mandalas helps you enter a meditative state, reducing stress and anxiety while
 
+                            increasing focus and concentration.</p>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="step">
 
-                    <div class="step-number">2</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Select Quality Paper</div>
 
-                        <p>Choose thick, smooth paper that won't bleed or warp. Options include:</p>
 
-                        <ul>
 
-                            <li>Coloring books designed for markers or pencils</li>
 
-                            <li>Watercolor paper for water-based mediums</li>
 
-                            <li>Heavyweight drawing paper</li>
 
-                        </ul>
 
-                        <p>Tip: Use a protective sheet under your paper to prevent colors from bleeding through.</p>
 
+
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🌈</div>
 
+                        <div class="feature-title">Creative Expression</div>
 
+                        <p>With endless patterns and color combinations, mandalas allow you to express your unique style
 
+                            and artistic vision.</p>
 
+                    </div>
 
+
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🌌</div>
 
+                        <div class="feature-title">Symmetry & Balance</div>
 
+                        <p>The symmetrical nature of mandalas reflects harmony and balance, creating a sense of order in
 
+                            your artwork.</p>
 
+                    </div>
 
+
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🎨</div>
 
+                        <div class="feature-title">Skill Development</div>
 
+                        <p>Coloring mandalas enhances fine motor skills, hand-eye coordination, and color theory
 
+                            knowledge.</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                
-                <div class="step">
 
-                    <div class="step-number">3</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Gather Essential Supplies</div>
 
-                        <p>Don't forget these helpful tools:</p>
 
-                        <ul>
 
-                            <li>A sharpener for colored pencils</li>
 
-                            <li>A blending stump or tortillon for smooth color transitions</li>
 
-                            <li>A ruler or straight edge for creating precise lines</li>
 
-                            <li>A magnifying glass for detailed sections</li>
 
-                        </ul>
 
+
 
+                <h2>Getting Started: Tools for Mandala Coloring</h2>
 
+
 
+                <div class="step-by-step">
 
+                    <div class="step">
 
+                        <div class="step-number">1</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Choose Your Coloring Medium</div>
 
+                            <p>Select tools that match your style and preferences:</p>
 
+                            <ul>
 
+                                <li><strong>Colored Pencils:</strong> Ideal for blending, shading, and detailed work
 
+                                </li>
 
+                                <li><strong>Markers:</strong> Vibrant colors and quick coverage, perfect for bold
 
+                                    designs</li>
 
+                                <li><strong>Watercolor Pencils:</strong> Create beautiful watercolor effects when
 
+                                    blended with water</li>
 
+                                <li><strong>Gel Pens:</strong> Add sparkle and shine to your mandalas with metallic or
 
+                                    glitter gel pens</li>
 
+                            </ul>
 
+                            <img src="/assets/tips-tricks/coloring-tools-for-mandala.webp"
 
+                                alt="Coloring tools for mandalas" class="blog-image" style="max-height: 300px;">
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="step">
 
+                        <div class="step-number">2</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Select Quality Paper</div>
 
+                            <p>Choose thick, smooth paper that won't bleed or warp. Options include:</p>
 
+                            <ul>
 
+                                <li>Coloring books designed for markers or pencils</li>
 
+                                <li>Watercolor paper for water-based mediums</li>
 
+                                <li>Heavyweight drawing paper</li>
 
+                            </ul>
 
+                            <p>Tip: Use a protective sheet under your paper to prevent colors from bleeding through.</p>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="step">
 
+                        <div class="step-number">3</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Gather Essential Supplies</div>
 
+                            <p>Don't forget these helpful tools:</p>
 
+                            <ul>
 
+                                <li>A sharpener for colored pencils</li>
 
+                                <li>A blending stump or tortillon for smooth color transitions</li>
 
+                                <li>A ruler or straight edge for creating precise lines</li>
 
+                                <li>A magnifying glass for detailed sections</li>
 
+                            </ul>
 
+                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-            
-            <h2>Step-by-Step Guide to Coloring Mandalas</h2>
 
-            
-            <div class="step-by-step">
 
-                <div class="step">
 
-                    <div class="step-number">1</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Choose Your Mandala Design</div>
 
-                        <p>Select a mandala that resonates with you. Start with simpler designs if you're new to coloring, then progress to more complex patterns as you gain confidence.</p>
 
-                        
+
 
+                <h2>Step-by-Step Guide to Coloring Mandalas</h2>
 
+
 
+                <div class="step-by-step">
 
+                    <div class="step">
 
+                        <div class="step-number">1</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Choose Your Mandala Design</div>
 
+                            <p>Select a mandala that resonates with you. Start with simpler designs if you're new to
 
+                                coloring, then progress to more complex patterns as you gain confidence.</p>
 
+
 
                             <h3>Simple Mandala Coloring Pages</h3>
 
                             <h3>Simple Mandala Coloring Pages</h3>
 
-                            <p>Ready to create your own mandala masterpiece? Browse these simple mandala coloring pages and start coloring today!</p>
 
+                            <p>Ready to create your own mandala masterpiece? Browse these simple mandala coloring pages
 
+                                and start coloring today!</p>
 
                             <div class="gallery">
 
                             <div class="gallery">
 
                                 <div class="gallery-item">
 
                                 <div class="gallery-item">
 
-                                    <a href="/coloring-page/5ce60bbcfbc2ad36b982f5d0" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5d6f8dfcdc2edd625108eaaf.webp" style="height: 280px;" alt="Geometric mandala"></a>
 
+                                    <a href="/coloring-page/5ce60bbcfbc2ad36b982f5d0" target="_blank"><img
 
+                                            src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5d6f8dfcdc2edd625108eaaf.webp"
 
+                                            style="height: 280px;" alt="Geometric mandala"></a>
 
                                     <div class="gallery-overlay">Cosmic Geometry Mandala</div>
 
                                     <div class="gallery-overlay">Cosmic Geometry Mandala</div>
 
                                 </div>
 
                                 </div>
 
-                                
+
 
                                 <div class="gallery-item">
 
                                 <div class="gallery-item">
 
-                                    <a href="/coloring-page/5ce60b1dfbc2ad36b982f5cf" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5ce60b1dfbc2ad36b982f5cf.webp" style="height: 280px;" alt="Animal mandala"></a>
 
+                                    <a href="/coloring-page/5ce60b1dfbc2ad36b982f5cf" target="_blank"><img
 
+                                            src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5ce60b1dfbc2ad36b982f5cf.webp"
 
+                                            style="height: 280px;" alt="Animal mandala"></a>
 
                                     <div class="gallery-overlay">ButterCosmic Mandala</div>
 
                                     <div class="gallery-overlay">ButterCosmic Mandala</div>
 
                                 </div>
 
                                 </div>
 
-                                
+
 
                                 <div class="gallery-item">
 
                                 <div class="gallery-item">
 
-                                    <a href="/coloring-page/5ce60b1dfbc2ad36b982f5cf" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5ce60bc88f3094369fbb5843.webp" style="height: 280px;" alt="Floral mandala"></a>
 
+                                    <a href="/coloring-page/5ce60b1dfbc2ad36b982f5cf" target="_blank"><img
 
+                                            src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5ce60bc88f3094369fbb5843.webp"
 
+                                            style="height: 280px;" alt="Floral mandala"></a>
 
                                     <div class="gallery-overlay">Floral Harmony Mandala</div>
 
                                     <div class="gallery-overlay">Floral Harmony Mandala</div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
-                            <a href="/coloring-page-gallery?category=mandala" target="_blank" class="cta-btn">More Mandala Pages >></a>
 
-                        
+                            <a href="/coloring-page-gallery?category=mandala" target="_blank" class="cta-btn">More
 
+                                Mandala Pages >></a>
 
+
 
 
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="step">
 
-                    <div class="step-number">2</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Plan Your Color Scheme</div>
 
-                        <p>Decide on a color palette before you start. Options include:</p>
 
-                        <ul>
 
-                            <li>Monochromatic: Different shades of a single color</li>
 
-                            <li>Complementary: Colors opposite each other on the color wheel</li>
 
-                            <li>Analogous: Colors adjacent to each other on the color wheel</li>
 
-                            <li>Rainbow: A spectrum of colors in sequence</li>
 
-                        </ul>
 
-                        <p>Additionally, you can directly color online on our website.</p>
 
-                        <img src="/assets/tips-tricks/mandala-play.webp" alt="Color Mandala Online"
 
-                            class="blog-image" style="max-height: 460px;">
 
-                        <div style="text-align: center; margin: 20px 0;">
 
-                            <a href="/play/6613db7bfb44d25a07461d88" class="online-cta-btn" target="_blank"><svg
 
-                                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
 
-                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
-                                <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
-                                <polyline points="12 2 12 12 16 14"></polyline>
 
-                            </svg> Paint This Mandala Online Now!</a>
 
-                            <p>Try this online digital coloring work and experience the fun of online coloring.</p>
 
+
 
+                    <div class="step">
 
+                        <div class="step-number">2</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Plan Your Color Scheme</div>
 
+                            <p>Decide on a color palette before you start. Options include:</p>
 
+                            <ul>
 
+                                <li>Monochromatic: Different shades of a single color</li>
 
+                                <li>Complementary: Colors opposite each other on the color wheel</li>
 
+                                <li>Analogous: Colors adjacent to each other on the color wheel</li>
 
+                                <li>Rainbow: A spectrum of colors in sequence</li>
 
+                            </ul>
 
+                            <p>Additionally, you can directly color online on our website.</p>
 
+                            <img src="/assets/tips-tricks/mandala-play.webp" alt="Color Mandala Online"
 
+                                class="blog-image" style="max-height: 460px;">
 
+                            <div style="text-align: center; margin: 20px 0;">
 
+                                <a href="/play/6613db7bfb44d25a07461d88" class="online-cta-btn" target="_blank"><svg
 
+                                        xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
 
+                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
 
+                                        stroke-linejoin="round">
 
+                                        <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
 
+                                        <polyline points="12 2 12 12 16 14"></polyline>
 
+                                    </svg> Paint This Mandala Online Now!</a>
 
+                                <p>Try this online digital coloring work and experience the fun of online coloring.</p>
 
+                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="step">
 
-                    <div class="step-number">3</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Start from the Center</div>
 
-                        <p>Begin coloring at the center of the mandala and work your way outward. This helps maintain symmetry and balance in your design.</p>
 
+
 
+                    <div class="step">
 
+                        <div class="step-number">3</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Start from the Center</div>
 
+                            <p>Begin coloring at the center of the mandala and work your way outward. This helps
 
+                                maintain symmetry and balance in your design.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="step">
 
-                    <div class="step-number">4</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Work in Sections</div>
 
-                        <p>Focus on one section or element at a time. This reduces overwhelm and ensures consistent coloring.</p>
 
+
 
+                    <div class="step">
 
+                        <div class="step-number">4</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Work in Sections</div>
 
+                            <p>Focus on one section or element at a time. This reduces overwhelm and ensures consistent
 
+                                coloring.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="step">
 
-                    <div class="step-number">5</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Use Layers for Depth</div>
 
-                        <p>Build up colors in layers for richer, more vibrant results. Start with a light base layer, then add darker shades for depth.</p>
 
+
 
+                    <div class="step">
 
+                        <div class="step-number">5</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Use Layers for Depth</div>
 
+                            <p>Build up colors in layers for richer, more vibrant results. Start with a light base
 
+                                layer, then add darker shades for depth.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="step">
 
-                    <div class="step-number">6</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Blend for Smooth Transitions</div>
 
-                        <p>Blend colors using a blending stump, tortillon, or your coloring tool. This creates seamless transitions between colors.</p>
 
+
 
+                    <div class="step">
 
+                        <div class="step-number">6</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Blend for Smooth Transitions</div>
 
+                            <p>Blend colors using a blending stump, tortillon, or your coloring tool. This creates
 
+                                seamless transitions between colors.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                
-                <div class="step">
 
-                    <div class="step-number">7</div>
 
-                    <div class="step-content">
 
-                        <div class="step-title">Add Highlights and Details</div>
 
-                        <p>Use white gel pens, metallic markers, or glitter pens to add highlights and accents to your mandala.</p>
 
+
 
+                    <div class="step">
 
+                        <div class="step-number">7</div>
 
+                        <div class="step-content">
 
+                            <div class="step-title">Add Highlights and Details</div>
 
+                            <p>Use white gel pens, metallic markers, or glitter pens to add highlights and accents to
 
+                                your mandala.</p>
 
+                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-            
-            <h2>Advanced Techniques for Stunning Mandalas</h2>
 
-            
-            <div class="feature-grid">
 
-                <div class="feature-card">
 
-                    <div class="feature-icon">🖌️</div>
 
-                    <div class="feature-title">Gradient Coloring</div>
 
-                    <p>Create smooth color transitions by blending two or more colors. Start with a light color and gradually add darker shades.</p>
 
-                </div>
 
-                
-                <div class="feature-card">
 
-                    <div class="feature-icon">✨</div>
 
-                    <div class="feature-title">Ombre Effect</div>
 
-                    <p>Use the same color in varying intensities to create a soft, flowing effect. Perfect for mandala petals or circular elements.</p>
 
-                </div>
 
-                
-                <div class="feature-card">
 
-                    <div class="feature-icon">🔄</div>
 
-                    <div class="feature-title">Symmetrical Coloring</div>
 
-                    <p>Mirror colors across the mandala's center to enhance symmetry. This technique creates a harmonious, balanced look.</p>
 
-                </div>
 
-                
-                <div class="feature-card">
 
-                    <div class="feature-icon">🌈</div>
 
-                    <div class="feature-title">Contrasting Colors</div>
 
-                    <p>Use complementary colors (opposite on the color wheel) to make certain elements pop. This adds visual interest and drama.</p>
 
-                </div>
 
-                
-                <div class="feature-card">
 
-                    <div class="feature-icon">🌟</div>
 
-                    <div class="feature-title">Metallic Accents</div>
 
-                    <p>Add metallic markers or gel pens to highlight specific areas, such as the center or intricate details.</p>
 
-                </div>
 
-                
-                <div class="feature-card">
 
-                    <div class="feature-icon">🎨</div>
 
-                    <div class="feature-title">Negative Space Coloring</div>
 
-                    <p>Color the background around the mandala design instead of the design itself. This creates a striking visual effect.</p>
 
-                </div>
 
-            </div>
 
-            
-            <h2>Tips for a Perfect Mandala Coloring Experience</h2>
 
-            
-            <ul>
 
-                <li><strong>Work on a Flat Surface:</strong> Ensure your paper is flat to prevent uneven coloring.</li>
 
-                <li><strong>Protect Your Work:</strong> Use a piece of scrap paper under your hand to avoid smudging wet mediums.</li>
 
-                <li><strong>Sharpen Regularly:</strong> Keep your colored pencils sharp for precise details.</li>
 
-                <li><strong>Take Breaks:</strong> Coloring for long periods can cause fatigue. Step away and return with fresh eyes.</li>
 
-                <li><strong>Experiment:</strong> Don't be afraid to try new techniques or color combinations!</li>
 
-            </ul>
 
-            
-            <h2>Gallery of Mandala Inspiration</h2>
 
-            
-            <p>Get inspired by these beautiful mandala creations from our community. Click on any image to see more details:</p>
 
-            
-            <div class="gallery">
 
-                <div class="gallery-item">
 
-                    <a href="/coloring-page/63ec947e8b781267fb7c8b5b" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/63ec947e8b781267fb7c8b5b.webp" alt="Colorful Mandala Pattern"></a>
 
-                    <div class="gallery-overlay">Colorful Mandala Pattern</div>
 
-                </div>
 
-                
-                <div class="gallery-item">
 
-                    <a href="/coloring-page/641942974698734ae9041978" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/641942974698734ae9041978.webp" alt="Colorful Patterned Owl"></a>
 
-                    <div class="gallery-overlay">Colorful Patterned Owl</div>
 
-                </div>
 
-                
-                <div class="gallery-item">
 
-                    <a href="/coloring-page/64672ee3fb8d33471c574b96" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/64672ee3fb8d33471c574b96.webp" alt="Colorful Mandala Pattern"></a>
 
-                    <div class="gallery-overlay">Colorful Mandala Pattern</div>
 
-                </div>
 
-                
-                <div class="gallery-item">
 
-                    <a href="/coloring-page/646ae571fb8d33471c574e4a" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/646ae571fb8d33471c574e4a.webp" alt="Flower Mandala"></a>
 
-                    <div class="gallery-overlay">Flower Mandala</div>
 
+
 
+                <h2>Advanced Techniques for Stunning Mandalas</h2>
 
+
 
+                <div class="feature-grid">
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🖌️</div>
 
+                        <div class="feature-title">Gradient Coloring</div>
 
+                        <p>Create smooth color transitions by blending two or more colors. Start with a light color and
 
+                            gradually add darker shades.</p>
 
+                    </div>
 
+
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">✨</div>
 
+                        <div class="feature-title">Ombre Effect</div>
 
+                        <p>Use the same color in varying intensities to create a soft, flowing effect. Perfect for
 
+                            mandala petals or circular elements.</p>
 
+                    </div>
 
+
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🔄</div>
 
+                        <div class="feature-title">Symmetrical Coloring</div>
 
+                        <p>Mirror colors across the mandala's center to enhance symmetry. This technique creates a
 
+                            harmonious, balanced look.</p>
 
+                    </div>
 
+
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🌈</div>
 
+                        <div class="feature-title">Contrasting Colors</div>
 
+                        <p>Use complementary colors (opposite on the color wheel) to make certain elements pop. This
 
+                            adds visual interest and drama.</p>
 
+                    </div>
 
+
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🌟</div>
 
+                        <div class="feature-title">Metallic Accents</div>
 
+                        <p>Add metallic markers or gel pens to highlight specific areas, such as the center or intricate
 
+                            details.</p>
 
+                    </div>
 
+
 
+                    <div class="feature-card">
 
+                        <div class="feature-icon">🎨</div>
 
+                        <div class="feature-title">Negative Space Coloring</div>
 
+                        <p>Color the background around the mandala design instead of the design itself. This creates a
 
+                            striking visual effect.</p>
 
+                    </div>
 
                 </div>
 
                 </div>
 
-                
-                <div class="gallery-item">
 
-                    <a href="/coloring-page/63523682e50613739808683d" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/63523682e50613739808683d.webp" alt="Bear Mandala"></a>
 
-                    <div class="gallery-overlay">Bear Mandala</div>
 
+
 
+                <h2>Tips for a Perfect Mandala Coloring Experience</h2>
 
+
 
+                <ul>
 
+                    <li><strong>Work on a Flat Surface:</strong> Ensure your paper is flat to prevent uneven coloring.
 
+                    </li>
 
+                    <li><strong>Protect Your Work:</strong> Use a piece of scrap paper under your hand to avoid smudging
 
+                        wet mediums.</li>
 
+                    <li><strong>Sharpen Regularly:</strong> Keep your colored pencils sharp for precise details.</li>
 
+                    <li><strong>Take Breaks:</strong> Coloring for long periods can cause fatigue. Step away and return
 
+                        with fresh eyes.</li>
 
+                    <li><strong>Experiment:</strong> Don't be afraid to try new techniques or color combinations!</li>
 
+                </ul>
 
+
 
+                <h2>Gallery of Mandala Inspiration</h2>
 
+
 
+                <p>Get inspired by these beautiful mandala creations from our community. Click on any image to see more
 
+                    details:</p>
 
+
 
+                <div class="gallery">
 
+                    <div class="gallery-item">
 
+                        <a href="/coloring-page/63ec947e8b781267fb7c8b5b" target="_blank"><img
 
+                                src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/63ec947e8b781267fb7c8b5b.webp"
 
+                                alt="Colorful Mandala Pattern"></a>
 
+                        <div class="gallery-overlay">Colorful Mandala Pattern</div>
 
+                    </div>
 
+
 
+                    <div class="gallery-item">
 
+                        <a href="/coloring-page/641942974698734ae9041978" target="_blank"><img
 
+                                src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/641942974698734ae9041978.webp"
 
+                                alt="Colorful Patterned Owl"></a>
 
+                        <div class="gallery-overlay">Colorful Patterned Owl</div>
 
+                    </div>
 
+
 
+                    <div class="gallery-item">
 
+                        <a href="/coloring-page/64672ee3fb8d33471c574b96" target="_blank"><img
 
+                                src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/64672ee3fb8d33471c574b96.webp"
 
+                                alt="Colorful Mandala Pattern"></a>
 
+                        <div class="gallery-overlay">Colorful Mandala Pattern</div>
 
+                    </div>
 
+
 
+                    <div class="gallery-item">
 
+                        <a href="/coloring-page/646ae571fb8d33471c574e4a" target="_blank"><img
 
+                                src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/646ae571fb8d33471c574e4a.webp"
 
+                                alt="Flower Mandala"></a>
 
+                        <div class="gallery-overlay">Flower Mandala</div>
 
+                    </div>
 
+
 
+                    <div class="gallery-item">
 
+                        <a href="/coloring-page/63523682e50613739808683d" target="_blank"><img
 
+                                src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/63523682e50613739808683d.webp"
 
+                                alt="Bear Mandala"></a>
 
+                        <div class="gallery-overlay">Bear Mandala</div>
 
+                    </div>
 
+
 
+                    <div class="gallery-item">
 
+                        <a href="/coloring-page/61dfb724a447b71961676590" target="_blank"><img
 
+                                src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/61dfb724a447b71961676590.webp"
 
+                                alt="Zentangle mandala"></a>
 
+                        <div class="gallery-overlay">Walrus Mandala</div>
 
+                    </div>
 
                 </div>
 
                 </div>
 
-                
-                <div class="gallery-item">
 
-                    <a href="/coloring-page/61dfb724a447b71961676590" target="_blank"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/61dfb724a447b71961676590.webp" alt="Zentangle mandala"></a>
 
-                    <div class="gallery-overlay">Walrus Mandala</div>
 
+
 
+                <div class="cta-box">
 
+                    <h3>Explore Our Mandala Collection</h3>
 
+                    <p>Ready to create your own mandala masterpiece? Browse our extensive collection of free printable
 
+                        mandala coloring pages and start coloring today!</p>
 
+                    <a href="/mandala-coloring-pages" class="cta-btn">Browse Mandala Pages</a>
 
+                    <a href="https://www.facebook.com/artcoloring" class="cta-btn">Join Our Coloring Community</a>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-            
-            <div class="cta-box">
 
-                <h3>Explore Our Mandala Collection</h3>
 
-                <p>Ready to create your own mandala masterpiece? Browse our extensive collection of free printable mandala coloring pages and start coloring today!</p>
 
-                <a href="/mandala-coloring-pages" class="cta-btn">Browse Mandala Pages</a>
 
-                <a href="https://www.facebook.com/artcoloring" class="cta-btn">Join Our Coloring Community</a>
 
-            </div>
 
         </div>
 
         </div>
 
-    </div>
 
-    
-    <%- include('footer') %>
 
+
 
+        <%- include('footer') %>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 10 - 9
views/v2/how-to-color-online.ejs
Vedi File 

@@ -4,8 +4,9 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <meta name="description" content="Learn how to color online with our digital coloring platform. Follow numbered guides to create stunning artwork with ease. Save, share, and download your masterpieces.">
 
-  <title>How to Color Online: A Complete Guide - Art Number Coloring</title>
 
+  <meta name="description"
 
+    content="Learn how to color online with our digital coloring platform. Follow numbered guides to create stunning artwork with ease. Save, share, and download your masterpieces.">
 
+  <title>How to Color Online: A Complete Guide - Art Color</title>
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <style>
 
   <style>
 
@@ -355,7 +356,7 @@
 
     }
 
     }
 
   </style>
 
   </style>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "BlogPosting",
 
   "@type": "BlogPosting",
 
@@ -380,11 +381,11 @@
 
   "dateModified": "2025-07-03T00:00:00+00:00",
 
   "dateModified": "2025-07-03T00:00:00+00:00",
 
   "author": {
 
   "author": {
 
     "@type": "Person",
 
     "@type": "Person",
 
-    "name": "Art Number Coloring"
 
+    "name": "Art Color"
 
   },
 
   },
 
   "publisher": {
 
   "publisher": {
 
     "@type": "Organization",
 
     "@type": "Organization",
 
-    "name": "Art Number Coloring",
 
+    "name": "Art Color",
 
     "logo": {
 
     "logo": {
 
       "@type": "ImageObject",
 
       "@type": "ImageObject",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
@@ -403,12 +404,12 @@
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "VideoObject",
 
   "@type": "VideoObject",
 
-  "name": "Art Number Coloring App Tutorial",
 
-  "description": "Learn how to easily get started and use the Art Number Coloring mobile app with this quick video guide. Discover features like numbered coloring, saving progress, and sharing masterpieces.",
 
+  "name": "Art Color App Tutorial",
 
+  "description": "Learn how to easily get started and use the Art Color mobile app with this quick video guide. Discover features like numbered coloring, saving progress, and sharing masterpieces.",
 
   "uploadDate": "2025-04-02T00:00:00+00:00",
 
   "uploadDate": "2025-04-02T00:00:00+00:00",
 
   "thumbnailUrl": "https://art.pcoloring.com/assets/icon/app.webp",
 
   "thumbnailUrl": "https://art.pcoloring.com/assets/icon/app.webp",
 
   "contentUrl": "https://art.pcoloring.com/assets/video/paint-by-number.mp4",
 
   "contentUrl": "https://art.pcoloring.com/assets/video/paint-by-number.mp4",
 
@@ -416,7 +417,7 @@
 
   "duration": "PT0M30S",
 
   "duration": "PT0M30S",
 
   "publisher": {
 
   "publisher": {
 
     "@type": "Organization",
 
     "@type": "Organization",
 
-    "name": "Art Number Coloring",
 
+    "name": "Art Color",
 
     "logo": {
 
     "logo": {
 
       "@type": "ImageObject",
 
       "@type": "ImageObject",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
       "url": "https://art.pcoloring.com/assets/icon/icon.webp",

+ 42 - 31
views/v2/index.ejs
Vedi File 

@@ -5,10 +5,10 @@
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
-  <title>Art Number Coloring - Free Printable Coloring Pages | Paint Online</title>
 
+  <title>Art Color - Free Printable Coloring Pages | Paint Online</title>
 
   <meta name="description"
 
   <meta name="description"
 
     content="Explore over 20,000+ FREE printable coloring pages! Dive into a massive collection for all ages, perfect for instant download, home printing, or even online coloring directly in your browser.">
 
     content="Explore over 20,000+ FREE printable coloring pages! Dive into a massive collection for all ages, perfect for instant download, home printing, or even online coloring directly in your browser.">
 
-  <meta property="og:title" content="Art Number Coloring - Free Printable Coloring Pages | Paint Online">
 
+  <meta property="og:title" content="Art Color - Free Printable Coloring Pages | Paint Online">
 
   <meta property="og:description"
 
   <meta property="og:description"
 
     content="Explore over 20,000+ FREE printable coloring pages! Dive into a massive collection for all ages, perfect for instant download, home printing, or even online coloring directly in your browser.">
 
     content="Explore over 20,000+ FREE printable coloring pages! Dive into a massive collection for all ages, perfect for instant download, home printing, or even online coloring directly in your browser.">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
@@ -410,13 +410,13 @@
 
   {
 
   {
 
     "@context": "https://schema.org",
 
     "@context": "https://schema.org",
 
     "@type": "WebSite",
 
     "@type": "WebSite",
 
-    "name": "Art Number Coloring",
 
+    "name": "Art Color",
 
     "description": "Explore over 20,000+ FREE printable coloring pages! Dive into a massive collection for all ages, perfect for instant download, home printing, or even online coloring directly in your browser.",
 
     "description": "Explore over 20,000+ FREE printable coloring pages! Dive into a massive collection for all ages, perfect for instant download, home printing, or even online coloring directly in your browser.",
 
     "url": "https://art.pcoloring.com",
 
     "url": "https://art.pcoloring.com",
 
     "mainEntityOfPage": "https://art.pcoloring.com",
 
     "mainEntityOfPage": "https://art.pcoloring.com",
 
     "publisher": {
 
     "publisher": {
 
       "@type": "Organization",
 
       "@type": "Organization",
 
-      "name": "Art Number Coloring",
 
+      "name": "Art Color",
 
       "logo": {
 
       "logo": {
 
         "@type": "ImageObject",
 
         "@type": "ImageObject",
 
         "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
         "url": "https://art.pcoloring.com/assets/icon/icon.webp",
 
@@ -442,7 +442,7 @@
 
   }
 
   }
 
 </script>
 
 </script>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "VideoObject",
 
   "@type": "VideoObject",
 
@@ -467,12 +467,12 @@
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
-<script type="application/ld+json">
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "VideoObject",
 
   "@type": "VideoObject",
 
-  "name": "How to Use Art Number Coloring App for Digital Coloring",
 
-  "description": "Learn how to download, browse, color, save, and share your artworks seamlessly using the Art Number Coloring mobile and tablet app. Unleash your creativity on the go!",
 
+  "name": "How to Use Art Color App for Digital Coloring",
 
+  "description": "Learn how to download, browse, color, save, and share your artworks seamlessly using the Art Color mobile and tablet app. Unleash your creativity on the go!",
 
   "thumbnailUrl": "https://art.pcoloring.com/assets/images/app-tutorial-poster.webp",
 
   "thumbnailUrl": "https://art.pcoloring.com/assets/images/app-tutorial-poster.webp",
 
   "uploadDate": "2025-06-15T10:00:00+08:00",
 
   "uploadDate": "2025-06-15T10:00:00+08:00",
 
   "contentUrl": "https://art.pcoloring.com/assets/video/art-number-coloring.mp4",
 
   "contentUrl": "https://art.pcoloring.com/assets/video/art-number-coloring.mp4",
 
@@ -513,7 +513,7 @@
 
   <%- include('header') %>
 
   <%- include('header') %>
 
     <main class="container">
 
     <main class="container">
 
       <section>
 
       <section>
 
-        <h1>Welcome to Art Number Coloring</h1>
 
+        <h1>Welcome to Art Color</h1>
 
         <p>Your ultimate destination for creative expression! Dive into a massive universe of over <strong><a
 
         <p>Your ultimate destination for creative expression! Dive into a massive universe of over <strong><a
 
               href="/coloring-page-gallery">20,000
 
               href="/coloring-page-gallery">20,000
 
               stunning coloring pages</a></strong>, meticulously crafted to spark joy and relaxation for all ages.
 
               stunning coloring pages</a></strong>, meticulously crafted to spark joy and relaxation for all ages.
 
@@ -526,8 +526,8 @@
 
               coloring tool</a></strong>, available directly in your browser!
 
               coloring tool</a></strong>, available directly in your browser!
 
         </p>
 
         </p>
 
         <p>But the fun doesn't stop there. Take your passion for coloring anywhere with our dedicated
 
         <p>But the fun doesn't stop there. Take your passion for coloring anywhere with our dedicated
 
-          <strong><a href="/app">mobile and tablet apps</a></strong>. Whether you're at home or on the go, Art Number
 
-          Coloring provides a seamless and
 
+          <strong><a href="/app">mobile and tablet apps</a></strong>. Whether you're at home or on the go, Art Color
 
+          provides a seamless and
 
           engaging experience, perfectly designed to meet all your coloring needs and help you unleash your full
 
           engaging experience, perfectly designed to meet all your coloring needs and help you unleash your full
 
           creative potential. Start your colorful journey with us today!
 
           creative potential. Start your colorful journey with us today!
 
         </p>
 
         </p>
 
@@ -650,32 +650,43 @@
 
 
 
       <section>
 
       <section>
 
         <h2>Explore over 20,000 free printable coloring pages for all ages</h2>
 
         <h2>Explore over 20,000 free printable coloring pages for all ages</h2>
 
-        <p style="text-align: start;">Dive into our <strong><a href="/coloring-page-gallery">Coloring Page Gallery</a></strong> with 20,000+ free printable designs! Explore
 
+        <p style="text-align: start;">Dive into our <strong><a href="/coloring-page-gallery">Coloring Page
 
+              Gallery</a></strong> with 20,000+ free printable designs! Explore
 
           via intuitive search filters—find themes, styles, or difficulty levels in seconds. Print your favorites or
 
           via intuitive search filters—find themes, styles, or difficulty levels in seconds. Print your favorites or
 
           color online with our digital tools—all completely free. Unleash creativity today!</p>
 
           color online with our digital tools—all completely free. Unleash creativity today!</p>
 
 
 
         <h3>2025 Latest Coloring Pages:</h3>
 
         <h3>2025 Latest Coloring Pages:</h3>
 
         <div class="coloring-grid">
 
         <div class="coloring-grid">
 
-        <% latest.forEach(item=> { %>
 
-          <div class="coloring-card">
 
-            <div data-content-id="<%= item._id %>" class="coloring-image">
 
-              <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
 
-            </div>
 
-            <div class="coloring-content">
 
-              <div class="coloring-title"><%= item.title %></div>
 
-              <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>"><%= item.user.username %></a></div>
 
-              <div class="coloring-meta">
 
-                <div class="date"><%= item.publishTime %></div>
 
-                <div class="views"><%= item.totalStartCount %></div>
 
+          <% latest.forEach(item=> { %>
 
+            <div class="coloring-card">
 
+              <div data-content-id="<%= item._id %>" class="coloring-image">
 
+                <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
 
               </div>
 
               </div>
 
-              <div class="coloring-tags">
 
-                <% item.tags.forEach(tag=> { %>
 
-                  <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>"><%= tag %></span></a>
 
-                <% }); %>
 
+              <div class="coloring-content">
 
+                <div class="coloring-title">
 
+                  <%= item.title %>
 
+                </div>
 
+                <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>">
 
+                    <%= item.user.username %>
 
+                  </a></div>
 
+                <div class="coloring-meta">
 
+                  <div class="date">
 
+                    <%= item.publishTime %>
 
+                  </div>
 
+                  <div class="views">
 
+                    <%= item.totalStartCount %>
 
+                  </div>
 
+                </div>
 
+                <div class="coloring-tags">
 
+                  <% item.tags.forEach(tag=> { %>
 
+                    <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>">
 
+                        <%= tag %>
 
+                      </span></a>
 
+                    <% }); %>
 
+                </div>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
-          </div>
 
-        <% }); %>
 
+            <% }); %>
 
         </div>
 
         </div>
 
 
 
         <a href="/coloring-page-gallery" class="cta-btn">More Coloring Pages >></a>
 
         <a href="/coloring-page-gallery" class="cta-btn">More Coloring Pages >></a>
 
@@ -698,7 +709,7 @@
 
               <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
 
               <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
 
               <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
 
               <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
 
             </svg>
 
             </svg>
 
-            Stay updated with Art Number Coloring community dynamics in real time
 
+            Stay updated with Art Color community dynamics in real time
 
           </div>
 
           </div>
 
           <div class="benefit">
 
           <div class="benefit">
 
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
@@ -725,7 +736,7 @@
 
 
 
       <section>
 
       <section>
 
         <h2>Unleash Your Creativity</h2>
 
         <h2>Unleash Your Creativity</h2>
 
-        <p>Art Number Coloring offers free printable coloring pages and tutorials for everyone. Whether you're a
 
+        <p>Art Color offers free printable coloring pages and tutorials for everyone. Whether you're a
 
           beginner
 
           beginner
 
           or an experienced artist, there's something for you here.</p>
 
           or an experienced artist, there's something for you here.</p>

+ 94 - 86
views/v2/myworks.ejs
Vedi File 

@@ -5,8 +5,9 @@
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
-  <title>My Coloring Page Works | Art Number Coloring</title>
 
-  <meta name="description" content="Explore our massive collection of over 20,000 free coloring pages! Find endless printable designs from animals to mandalas, cartoons, and more. Perfect for kids and adults – start your creative journey today!">
 
+  <title>My Coloring Page Works | Art Color</title>
 
+  <meta name="description"
 
+    content="Explore our massive collection of over 20,000 free coloring pages! Find endless printable designs from animals to mandalas, cartoons, and more. Perfect for kids and adults – start your creative journey today!">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <style>
 
   <style>
 
     /* 标签导航样式 */
 
     /* 标签导航样式 */
 
@@ -55,13 +56,20 @@
 
     }
 
     }
 
 
 
     @keyframes fadeIn {
 
     @keyframes fadeIn {
 
-      from { opacity: 0; transform: translateY(10px); }
 
-      to { opacity: 1; transform: translateY(0); }
 
+      from {
 
+        opacity: 0;
 
+        transform: translateY(10px);
 
+      }
 
+
 
+      to {
 
+        opacity: 1;
 
+        transform: translateY(0);
 
+      }
 
     }
 
     }
 
 
 
     /* 响应式设计, 如果是手机屏幕 */
 
     /* 响应式设计, 如果是手机屏幕 */
 
     @media (max-width: 768px) {
 
     @media (max-width: 768px) {
 
-      .tab-button  {
 
+      .tab-button {
 
         font-size: 1.0rem;
 
         font-size: 1.0rem;
 
         padding: 1rem 1rem;
 
         padding: 1rem 1rem;
 
       }
 
       }
 
@@ -80,90 +88,90 @@
 
 
 
 <body>
 
 <body>
 
   <%- include('header') %>
 
   <%- include('header') %>
 
-  <main class="container">
 
-    <section>
 
-      <!-- 标签导航 -->
 
-      <nav class="tab-nav">
 
-        <button class="tab-button active" data-tab="ongoing">In Progress</button>
 
-        <button class="tab-button" data-tab="completed">Completed</button>
 
-        <button class="tab-button" data-tab="favorite">Favorite</button>
 
-      </nav>
 
-
 
-      <!-- 进行中内容 -->
 
-      <div id="ongoing" class="tab-content active">
 
-        <div class="coloring-grid">
 
+    <main class="container">
 
+      <section>
 
+        <!-- 标签导航 -->
 
+        <nav class="tab-nav">
 
+          <button class="tab-button active" data-tab="ongoing">In Progress</button>
 
+          <button class="tab-button" data-tab="completed">Completed</button>
 
+          <button class="tab-button" data-tab="favorite">Favorite</button>
 
+        </nav>
 
+
 
+        <!-- 进行中内容 -->
 
+        <div id="ongoing" class="tab-content active">
 
+          <div class="coloring-grid">
 
+          </div>
 
         </div>
 
         </div>
 
-      </div>
 
 
 
-      <!-- 已完成内容 -->
 
-      <div id="completed" class="tab-content">
 
-        <div class="coloring-grid">
 
+        <!-- 已完成内容 -->
 
+        <div id="completed" class="tab-content">
 
+          <div class="coloring-grid">
 
+          </div>
 
         </div>
 
         </div>
 
-      </div>
 
 
 
-      <!-- 收藏内容 -->
 
-      <div id="favorite" class="tab-content">
 
-        <div class="coloring-grid">
 
+        <!-- 收藏内容 -->
 
+        <div id="favorite" class="tab-content">
 
+          <div class="coloring-grid">
 
+          </div>
 
         </div>
 
         </div>
 
-      </div>
 
-    </section>
 
-  </main>
 
+      </section>
 
+    </main>
 
 
 
-  <script src="/scripts/script.js"></script>
 
+    <script src="/scripts/script.js"></script>
 
 
 
-  <script>
 
-    const host = '<%= host %>';
 
+    <script>
 
+      const host = '<%= host %>';
 
 
 
-    // 标签切换功能
 
-    const tabButtons = document.querySelectorAll('.tab-button');
 
-    const tabContents = document.querySelectorAll('.tab-content');
 
+      // 标签切换功能
 
+      const tabButtons = document.querySelectorAll('.tab-button');
 
+      const tabContents = document.querySelectorAll('.tab-content');
 
 
 
-    tabButtons.forEach(button => {
 
-      button.addEventListener('click', () => {
 
-        const targetTab = button.dataset.tab;
 
+      tabButtons.forEach(button => {
 
+        button.addEventListener('click', () => {
 
+          const targetTab = button.dataset.tab;
 
 
 
-        // 移除所有激活状态
 
-        tabButtons.forEach(btn => btn.classList.remove('active'));
 
-        tabContents.forEach(content => content.classList.remove('active'));
 
+          // 移除所有激活状态
 
+          tabButtons.forEach(btn => btn.classList.remove('active'));
 
+          tabContents.forEach(content => content.classList.remove('active'));
 
 
 
-        // 添加当前激活状态
 
-        button.classList.add('active');
 
-        document.getElementById(targetTab).classList.add('active');
 
+          // 添加当前激活状态
 
+          button.classList.add('active');
 
+          document.getElementById(targetTab).classList.add('active');
 
+        });
 
       });
 
       });
 
-    });
 
-
 
-
 
-    // 加载
 
-    const loadWorks = (tabType) => {
 
-      let data = {};
 
-      if (tabType === 'favorite') {
 
-        const raw = localStorage.getItem('_storage_collection__') || '{}';
 
-        data = JSON.parse(raw);
 
-      } else {
 
-        const rawMeta = localStorage.getItem('__storage_metadata__') || '{}';
 
-        const metaData = JSON.parse(rawMeta);
 
-        data = Object.entries(metaData).filter(([_, item]) =>
 
-          tabType === 'ongoing' ? item.progress < 100 : item.progress >= 100
 
-        ).reduce((acc, [id, item]) => ({ ...acc, [id]: item }), {});
 
-      }
 
 
 
-      return Object.entries(data).map(([id, item]) => ({
 
-        id,
 
-        uri: `/coloring-page/${id}`,
 
-        thumbnail: `${host}/thumbs/coloring-page/${item.progress >= 100 ? 'work' : 'page'}/480/${id}.png`, // 缩略图拼接规则‌:ml-citation{ref="7" data="citationList"}
 
-        progress: item.progress,
 
-        timestamp: item.timestamp
 
-      })).sort((a, b) => b.timestamp - a.timestamp); // 时间倒序排列
 
-    };
 
-
 
-
 
-    // 动态渲染
 
-    const renderWorks = (container, items) => {
 
-      container.innerHTML = '';
 
-      items.forEach(item => {
 
-        const card = document.createElement('div');
 
-        card.className = 'coloring-card';
 
-        card.innerHTML = `
 
+
 
+      // 加载
 
+      const loadWorks = (tabType) => {
 
+        let data = {};
 
+        if (tabType === 'favorite') {
 
+          const raw = localStorage.getItem('_storage_collection__') || '{}';
 
+          data = JSON.parse(raw);
 
+        } else {
 
+          const rawMeta = localStorage.getItem('__storage_metadata__') || '{}';
 
+          const metaData = JSON.parse(rawMeta);
 
+          data = Object.entries(metaData).filter(([_, item]) =>
 
+            tabType === 'ongoing' ? item.progress < 100 : item.progress >= 100
 
+          ).reduce((acc, [id, item]) => ({ ...acc, [id]: item }), {});
 
+        }
 
+
 
+        return Object.entries(data).map(([id, item]) => ({
 
+          id,
 
+          uri: `/coloring-page/${id}`,
 
+          thumbnail: `${host}/thumbs/coloring-page/${item.progress >= 100 ? 'work' : 'page'}/480/${id}.png`, // 缩略图拼接规则‌:ml-citation{ref="7" data="citationList"}
 
+          progress: item.progress,
 
+          timestamp: item.timestamp
 
+        })).sort((a, b) => b.timestamp - a.timestamp); // 时间倒序排列
 
+      };
 
+
 
+
 
+      // 动态渲染
 
+      const renderWorks = (container, items) => {
 
+        container.innerHTML = '';
 
+        items.forEach(item => {
 
+          const card = document.createElement('div');
 
+          card.className = 'coloring-card';
 
+          card.innerHTML = `
 
           <div data-content-id="${item.id}" class="coloring-image">
 
           <div data-content-id="${item.id}" class="coloring-image">
 
             <a href="${item.uri}"><img src="${item.thumbnail}"></a>
 
             <a href="${item.uri}"><img src="${item.thumbnail}"></a>
 
             <div class="progress-badge" style="background-color: ${item.progress >= 100 ? 'var(--secondary-color)' : 'var(--primary-color)'}; transition: background-color 0.3s ease; ">
 
             <div class="progress-badge" style="background-color: ${item.progress >= 100 ? 'var(--secondary-color)' : 'var(--primary-color)'}; transition: background-color 0.3s ease; ">
 
@@ -172,19 +180,19 @@
 
           </div>
 
           </div>
 
           `;
 
           `;
 
 
 
-        container.appendChild(card);
 
-      });
 
-    };
 
+          container.appendChild(card);
 
+        });
 
+      };
 
 
 
 
 
-    document.querySelectorAll('.tab-content').forEach(container => {
 
-      const tabType = container.id;
 
-      const works = loadWorks(tabType);
 
-      const grid = container.querySelector('.coloring-grid');
 
-      renderWorks(grid, works);
 
-    });
 
+      document.querySelectorAll('.tab-content').forEach(container => {
 
+        const tabType = container.id;
 
+        const works = loadWorks(tabType);
 
+        const grid = container.querySelector('.coloring-grid');
 
+        renderWorks(grid, works);
 
+      });
 
 
 
-  </script>
 
+    </script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 3 - 3
views/v2/play.ejs
Vedi File 

@@ -20,12 +20,12 @@
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <!-- **Universal Link 路径** -->
 
   <!-- **Universal Link 路径** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
-  <meta property="al:ios:app_name" content="Art Number Coloring Book" /> <!-- **iOS 应用名称** -->
 
+  <meta property="al:ios:app_name" content="Art Color Book" /> <!-- **iOS 应用名称** -->
 
 
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <!-- ** Universal Link 路径** -->
 
   <!-- ** Universal Link 路径** -->
 
-  <meta property="al:android:app_name" content="Art Number Coloring Book" /> <!-- **Android 应用名称** -->
 
+  <meta property="al:android:app_name" content="Art Color Book" /> <!-- **Android 应用名称** -->
 
 
 
 
 
   <script type="module" crossorigin src="/assets/main-DXhg_pv8.js"></script>
 
   <script type="module" crossorigin src="/assets/main-DXhg_pv8.js"></script>
 
@@ -199,7 +199,7 @@
 
         </div>
 
         </div>
 
       </a>
 
       </a>
 
       <div id="finish-share" class="tools-btn st-custom-button" data-network="sharethis" data-url="<%= sharePageUrl %>"
 
       <div id="finish-share" class="tools-btn st-custom-button" data-network="sharethis" data-url="<%= sharePageUrl %>"
 
-        data-title="Come experience this artwork in the Art Number Coloring App!"
 
+        data-title="Come experience this artwork in the Art Color App!"
 
         data-description="My latest coloring artwork, waiting for you to play!" data-services="facebook">
 
         data-description="My latest coloring artwork, waiting for you to play!" data-services="facebook">
 
         <img class="btn-img"
 
         <img class="btn-img"
 
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAwFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+ZmZn9/f2goKCdnZ319fX5+fny8vLc3NywsLDZ2dmlpaW7u7uoqKjV1dXm5ubFxcXu7u7g4ODR0dHCwsK+vr62trbj4+PLy8utra3q6uqysrKqqqqioqKP/bhpAAAAInRSTlMA7Po2BsZV35ljSSkcE8L17+fi0su7ubKspaKLe2tLQC0Brj0GYQAABFdJREFUaN601tl6okAQBeACAXWMxn03mgMo7vsSo5n3f6uZzw6fCtJi0/xXenXooqsKepnWM9rNql5KKqqqJEt6tdk2ehrFK9OpJ/FQst7JUDyy6UYBXIVGOkuSaUZNRQhqzZBZ9UQqj9DyqQTJ0a3gRZUuRfdHhwD9T9QilyGoHKXg2RQiSIle8c+0gkiU9CcJeMshstwbvexDgQTKB71Ga0GSlvZSmXVIo79Q7kwREhUzoZtXgVRKIuSseodk76HmmKFCOtUIcV4VMVCfnjnxjli8J4groyAmSobbv0XEpsjpZ01HjHSNgrQQq1bgXkDMPgJesIKYKW8P934Osct9kl8aUay352nf/tmPHPCkySerQNxwb7r+LiwEU7LklYK4jW3eOA8QLOUblRA3Me/Necne0VmGsKXpNeZUu+zZSRBmzU2fLYLd7ykdwrYms1o6w9E3+207CJSjG12IY1n2iR1/xZInCNalqwqEDVnSCIw1vvydIVhFzpX+ugRN4dqwiw2OhJQennhOOLj874Ph97KWByA32AZHXiPGAI/8UsMgpoYIBvfX2Pp2K8BRY7lZFVGM2Utdstyde8l51KyEfYijyey+BuvJ3DdAONuxgQjWM/OBBfgal+ACGNE97He2wFeg/zIQNdyZD/04eCZDRB2IGez65kMHB091iKj+/GSbxXZ0su5jVzex9upa8ukEIdSJKAkua+Guuv0QLud4E9tfDYDh4vBjT8e7jYUwkkQauJZT82pl/cba97ECNOqBZ+H5pnFY7NVuACE9/qAemaY3eXsby6ovwqA2gq3997YfOZZpUxPBDiYzn63GvmeYrRFBk6oIdGIJ9ujSUwdJsUyV9315ZMV1I26SDydEpFMJTODCO+LXwK32eYnISrz5wVr45HmQ+RISJElBIHZCB669u/IkUEiFD//EI8ig/mPO3FYTCIIgirpGTRAScg8JgYqyMZcHQYX1+v9/JczLKA0zTB9B6wdW3O3uqlPmwdl33OgUapu/OvtVj+cjcbXsx5Wf4/8//uheYpwSm2s7E9R9aoHEXW31C4eqa1Zm4jqdclc/mSORvsfTDbrFUW/2LGYcSLM6uJHLbzn1nk1s1nP9ROgRZ6su81y6ylif6DKno4Pfsvs6nq16YVxm1vpUKpN1mdtZMy711aqCvXWoDpTFnSR6wdD7NAlxzZed9AIijLQOs+VJi/pAoS3OVmk+1g2MqWG2yomA7ngw18TBQPQKUAShPhoA+AI4l9pDgJsA2dPz2QAbQIqA3uq2AhAV8Gr1ATYGhF7qAFAOOgk9gmoAtDDSJyhDQO+kLqp/3E2bdM0KL2e3KD3gis/VpkodUGoS9UGNS9QaguKaaHBJVf2+ezsgAACEYRjm3zUagA3a+0ie4AQWx+gDFB65KSMjIqtqQjIqnWthQTKPbIBQOoFNo18Dcw7Cbg9lz+B9V1e4DRrOknKacNztaDdazahl+Uz3rQ8uGhTrMQRabC8AAAAASUVORK5CYII=" />
 
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAwFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+ZmZn9/f2goKCdnZ319fX5+fny8vLc3NywsLDZ2dmlpaW7u7uoqKjV1dXm5ubFxcXu7u7g4ODR0dHCwsK+vr62trbj4+PLy8utra3q6uqysrKqqqqioqKP/bhpAAAAInRSTlMA7Po2BsZV35ljSSkcE8L17+fi0su7ubKspaKLe2tLQC0Brj0GYQAABFdJREFUaN601tl6okAQBeACAXWMxn03mgMo7vsSo5n3f6uZzw6fCtJi0/xXenXooqsKepnWM9rNql5KKqqqJEt6tdk2ehrFK9OpJ/FQst7JUDyy6UYBXIVGOkuSaUZNRQhqzZBZ9UQqj9DyqQTJ0a3gRZUuRfdHhwD9T9QilyGoHKXg2RQiSIle8c+0gkiU9CcJeMshstwbvexDgQTKB71Ga0GSlvZSmXVIo79Q7kwREhUzoZtXgVRKIuSseodk76HmmKFCOtUIcV4VMVCfnjnxjli8J4groyAmSobbv0XEpsjpZ01HjHSNgrQQq1bgXkDMPgJesIKYKW8P934Osct9kl8aUay352nf/tmPHPCkySerQNxwb7r+LiwEU7LklYK4jW3eOA8QLOUblRA3Me/Necne0VmGsKXpNeZUu+zZSRBmzU2fLYLd7ykdwrYms1o6w9E3+207CJSjG12IY1n2iR1/xZInCNalqwqEDVnSCIw1vvydIVhFzpX+ugRN4dqwiw2OhJQennhOOLj874Ph97KWByA32AZHXiPGAI/8UsMgpoYIBvfX2Pp2K8BRY7lZFVGM2Utdstyde8l51KyEfYijyey+BuvJ3DdAONuxgQjWM/OBBfgal+ACGNE97He2wFeg/zIQNdyZD/04eCZDRB2IGez65kMHB091iKj+/GSbxXZ0su5jVzex9upa8ukEIdSJKAkua+Guuv0QLud4E9tfDYDh4vBjT8e7jYUwkkQauJZT82pl/cba97ECNOqBZ+H5pnFY7NVuACE9/qAemaY3eXsby6ovwqA2gq3997YfOZZpUxPBDiYzn63GvmeYrRFBk6oIdGIJ9ujSUwdJsUyV9315ZMV1I26SDydEpFMJTODCO+LXwK32eYnISrz5wVr45HmQ+RISJElBIHZCB669u/IkUEiFD//EI8ig/mPO3FYTCIIgirpGTRAScg8JgYqyMZcHQYX1+v9/JczLKA0zTB9B6wdW3O3uqlPmwdl33OgUapu/OvtVj+cjcbXsx5Wf4/8//uheYpwSm2s7E9R9aoHEXW31C4eqa1Zm4jqdclc/mSORvsfTDbrFUW/2LGYcSLM6uJHLbzn1nk1s1nP9ROgRZ6su81y6ylif6DKno4Pfsvs6nq16YVxm1vpUKpN1mdtZMy711aqCvXWoDpTFnSR6wdD7NAlxzZed9AIijLQOs+VJi/pAoS3OVmk+1g2MqWG2yomA7ngw18TBQPQKUAShPhoA+AI4l9pDgJsA2dPz2QAbQIqA3uq2AhAV8Gr1ATYGhF7qAFAOOgk9gmoAtDDSJyhDQO+kLqp/3E2bdM0KL2e3KD3gis/VpkodUGoS9UGNS9QaguKaaHBJVf2+ezsgAACEYRjm3zUagA3a+0ie4AQWx+gDFB65KSMjIqtqQjIqnWthQTKPbIBQOoFNo18Dcw7Cbg9lz+B9V1e4DRrOknKacNztaDdazahl+Uz3rQ8uGhTrMQRabC8AAAAASUVORK5CYII=" />

+ 296 - 203
views/v2/privacy.ejs
Vedi File 

@@ -1,9 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Privacy Policy - Art Number Coloring</title>
 
+    <title>Privacy Policy - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
@@ -13,7 +14,7 @@
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .privacy-content {
 
         .privacy-content {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -21,58 +22,58 @@
 
             padding: 40px;
 
             padding: 40px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .privacy-section {
 
         .privacy-section {
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
         }
 
         }
 
-        
+
 
         .privacy-section h2 {
 
         .privacy-section h2 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .privacy-section h3 {
 
         .privacy-section h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             margin-top: 25px;
 
             margin-top: 25px;
 
         }
 
         }
 
-        
+
 
         .privacy-section p {
 
         .privacy-section p {
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .privacy-section ul {
 
         .privacy-section ul {
 
             margin-left: 25px;
 
             margin-left: 25px;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .privacy-section li {
 
         .privacy-section li {
 
             margin-bottom: 8px;
 
             margin-bottom: 8px;
 
         }
 
         }
 
-        
+
 
         .last-updated {
 
         .last-updated {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-style: italic;
 
             font-style: italic;
 
             text-align: right;
 
             text-align: right;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .privacy-content {
 
             .privacy-content {
 
                 padding: 30px 20px;
 
                 padding: 30px 20px;
 
             }
 
             }
 
-            
+
 
             .privacy-section h2 {
 
             .privacy-section h2 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
-            
+
 
             .privacy-section h3 {
 
             .privacy-section h3 {
 
                 font-size: 1.1rem;
 
                 font-size: 1.1rem;
 
             }
 
             }
 
@@ -83,205 +84,297 @@
 
 <!-- Google tag (gtag.js) -->
 
 <!-- Google tag (gtag.js) -->
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script>
 
 <script>
 
-  window.dataLayer = window.dataLayer || [];
 
-  function gtag() { dataLayer.push(arguments); }
 
-  gtag('js', new Date());
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
 
 
-  gtag('config', 'G-JBGGVGLHTP');
 
+    gtag('config', 'G-JBGGVGLHTP');
 
 </script>
 
 </script>
 
 
 
 <body>
 
 <body>
 
     <%- include('header') %>
 
     <%- include('header') %>
 
-    
-    <div class="container">
 
-        <div class="breadcrumb">
 
-            <a href="/">Home</a> &gt; Privacy Policy
 
-        </div>
 
-        
-        <h1 class="page-title">Privacy Policy</h1>
 
-        
-        <div class="privacy-content">
 
-            <div class="last-updated">
 
-                <p>Last updated: July 4, 2025</p>
 
-            </div>
 
-            <div class="privacy-section">
 
-                <h2>1. Introduction</h2>
 
-                <p>Welcome to Art Number Coloring ("we," "us," or "our"). We are committed to protecting your privacy and ensuring the security of your personal information. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website <a href="https://art.pcoloring.com" style="color: var(--primary-color);">art.pcoloring.com</a> (the "Website") or use our mobile applications and other related services (collectively, the "Services").</p>
 
-                <p>By using our Website, you agree to the terms of this Privacy Policy. If you do not agree with our practices, please do not use our Website or services.</p>
 
-                <p>This Privacy Policy is designed to comply with the General Data Protection Regulation (GDPR) of the European Union and the California Consumer Privacy Act (CCPA). If you are located in the European Union or California, please review the additional information provided in Sections 11 and 12 respectively.</p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>2. Information We Collect</h2>
 
-                
-                <h3>2.1 Personal Information</h3>
 
-                <p>We may collect personal information that you voluntarily provide to us when you:</p>
 
-                <ul>
 
-                    <li>Create an account on our Website</li>
 
-                    <li>Subscribe to our newsletter or email updates</li>
 
-                    <li>Contact us through our support channels</li>
 
-                    <li>Participate in contests, surveys, or promotions</li>
 
-                </ul>
 
-                <p>Examples of personal information we may collect include your name, email address, postal address, phone number, and any other information you choose to provide.</p>
 
-                
-                <h3>2.2 Non-Personal Information</h3>
 
-                <p>We may automatically collect non-personal information about your visit to our Website, including:</p>
 
-                <ul>
 
-                    <li>Your IP address</li>
 
-                    <li>Browser type and version</li>
 
-                    <li>Operating system</li>
 
-                    <li>Pages visited and actions taken on our Website</li>
 
-                    <li>Time and duration of your visit</li>
 
-                    <li>Referral source</li>
 
-                </ul>
 
-                <p>We use this information to analyze trends, administer the site, track user movements, and gather demographic information for aggregate use.</p>
 
-                
-                <h3>2.3 Cookies and Tracking Technologies</h3>
 
-                <p>Our Website uses cookies and similar tracking technologies to enhance your experience. Cookies are small text files that are stored on your device. We use both session cookies (which expire when you close your browser) and persistent cookies (which remain on your device until deleted).</p>
 
-                <p>We use cookies for various purposes, including:</p>
 
-                <ul>
 
-                    <li>Remembering your preferences and settings</li>
 
-                    <li>Analyzing website traffic and performance</li>
 
-                    <li>Personalizing your experience</li>
 
-                    <li>Advertising and marketing purposes</li>
 
-                </ul>
 
-                <p>You can control cookies through your browser settings. However, if you choose to disable cookies, some features of our Website may not function properly.</p>
 
-                
-                <h3>2.4 Google Analytics and Google AdSense</h3>
 
-                <p>We use Google Analytics, a web analytics service provided by Google, Inc. ("Google"), to help analyze how users interact with our Website. Google Analytics uses cookies to collect information such as how visitors navigate our Website. This information is used to compile reports and help us improve our Website. The information collected by Google Analytics is generally anonymous and aggregated.</p>
 
-                <p>We also use Google AdSense, an advertising service provided by Google, to display advertisements on our Website. Google AdSense uses cookies to serve ads based on your prior visits to our Website and other websites. These cookies do not contain personal information, but they may track your online activity across different websites.</p>
 
-                <p>Google's ability to use and share information collected by Google Analytics and Google AdSense is subject to Google's <a href="https://policies.google.com/privacy" style="color: var(--primary-color);">Privacy Policy</a>. You may opt out of Google Analytics by downloading and installing the <a href="https://tools.google.com/dlpage/gaoptout" style="color: var(--primary-color);">Google Analytics Opt-out Browser Add-on</a>.</p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>3. How We Use Your Information</h2>
 
-                <p>We use the information we collect for various purposes, including:</p>
 
-                <ul>
 
-                    <li>Providing, maintaining, and improving our Website and services</li>
 
-                    <li>Understanding user preferences and providing personalized content</li>
 
-                    <li>Responding to your inquiries and providing customer support</li>
 
-                    <li>Sending you updates, newsletters, and promotional materials (if you have subscribed to receive them)</li>
 
-                    <li>Conducting research and analysis to improve our offerings</li>
 
-                    <li>Detecting, preventing, and addressing technical issues</li>
 
-                </ul>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>4. Information Sharing and Disclosure</h2>
 
-                <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except as described in this Privacy Policy.</p>
 
-                
-                <h3>4.1 Service Providers</h3>
 
-                <p>We may engage third-party service providers to assist us in operating our Website, conducting our business, or providing services to you. These third parties have access to your personal information only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.</p>
 
-                
-                <h3>4.2 Legal Requirements</h3>
 
-                <p>We may disclose your personal information if required to do so by law or in response to valid requests by public authorities (e.g., a court or government agency).</p>
 
-                
-                <h3>4.3 Business Transfers</h3>
 
-                <p>If we are involved in a merger, acquisition, or sale of all or a portion of our assets, your personal information may be transferred as part of that transaction.</p>
 
-                
-                <h3>4.4 Consent</h3>
 
-                <p>We may disclose your personal information with your consent, such as when you choose to share your information for a specific purpose.</p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>5. Data Security</h2>
 
-                <p>We take reasonable measures to protect your personal information from unauthorized access, use, or disclosure. However, no method of transmission over the internet or electronic storage is 100% secure, and we cannot guarantee absolute security.</p>
 
-                <p>You are responsible for maintaining the confidentiality of your account credentials, and you should notify us immediately of any unauthorized use of your account.</p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>6. Your Choices</h2>
 
-                
-                <h3>6.1 Communication Preferences</h3>
 
-                <p>You can unsubscribe from our marketing emails at any time by clicking the "Unsubscribe" link at the bottom of the email. You may also update your communication preferences by logging into your account and adjusting your settings.</p>
 
-                
-                <h3>6.2 Access, Correction, or Deletion</h3>
 
-                <p>You have the right to access, correct, or delete the personal information we hold about you. To request access to or correction of your personal information, or to request that we delete your personal information, please contact us at <a href="mailto:privacy@jccy-tech.com" style="color: var(--primary-color);">privacy@jccy-tech.com</a>.</p>
 
-                
-                <h3>6.3 Opting Out of Cookies</h3>
 
-                <p>You can disable cookies through your browser settings. However, disabling cookies may affect your experience on our Website.</p>
 
-                
-                <h3>6.4 Do Not Track Signals</h3>
 
-                <p>Our Website does not currently respond to "Do Not Track" signals from browsers. </p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>7. Children's Privacy</h2>
 
-                <p>Our Website is not intended for children under the age of 13. We do not knowingly collect personal information from children under 13. If you believe we have inadvertently collected information from a child under 13, please contact us, and we will promptly delete the information.</p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>8. Third-Party Links</h2>
 
-                <p>Our Website may contain links to third-party websites or services that are not owned or controlled by us. This Privacy Policy does not apply to those third-party websites or services. We encourage you to review the privacy policies of those third parties before using their services.</p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>9. Changes to This Privacy Policy</h2>
 
-                <p>We may update this Privacy Policy from time to time. The date at the top of this page indicates when this Privacy Policy was last revised. We will notify you of any material changes by posting the new Privacy Policy on our Website. Your continued use of our Website after the effective date of the revised Privacy Policy constitutes your acceptance of the changes.</p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>10. Contact Us</h2>
 
-                <p>If you have any questions, concerns, or suggestions about our Privacy Policy, please contact us at:</p>
 
-                <p>Email: <a href="mailto:privacy@jccy-tech.com" style="color: var(--primary-color);">privacy@jccy-tech.com</a></p>
 
-                <p>Mail: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
-            </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>11. GDPR-Specific Information</h2>
 
-                <p>If you are located in the European Union, the following additional information applies to you:</p>
 
-                
-                <h3>11.1 Legal Basis for Processing</h3>
 
-                <p>We process your personal information on the following legal bases:</p>
 
-                <ul>
 
-                    <li><strong>Consent:</strong> We may process your personal information when you have given us your explicit consent for specific purposes, such as subscribing to our newsletter.</li>
 
-                    <li><strong>Contract:</strong> We may process your personal information to fulfill our obligations under a contract with you, such as providing the services you have requested.</li>
 
-                    <li><strong>Legal Obligation:</strong> We may process your personal information to comply with applicable laws and regulations.</li>
 
-                    <li><strong>Legitimate Interests:</strong> We may process your personal information for our legitimate interests, such as improving our Website and services, ensuring security, and analyzing user behavior. Our legitimate interests do not override your rights and freedoms.</li>
 
-                </ul>
 
-                
-                <h3>11.2 Your GDPR Rights</h3>
 
-                <p>In addition to the rights described in Section 6, you have the following rights under the GDPR:</p>
 
-                <ul>
 
-                    <li><strong>Right to Object:</strong> You have the right to object to our processing of your personal information based on our legitimate interests.</li>
 
-                    <li><strong>Right to Restrict Processing:</strong> You have the right to request that we restrict the processing of your personal information in certain circumstances.</li>
 
-                    <li><strong>Right to Data Portability:</strong> You have the right to receive your personal information in a structured, commonly used, and machine-readable format and to transmit that information to another controller.</li>
 
-                    <li><strong>Right to Withdraw Consent:</strong> If we are processing your personal information based on your consent, you have the right to withdraw your consent at any time.</li>
 
-                </ul>
 
-                <p>To exercise any of these rights, please contact us at <a href="mailto:privacy@jccy-tech.com" style="color: var(--primary-color);">privacy@jccy-tech.com</a>.</p>
 
-                
-                <h3>11.3 Data Transfers</h3>
 
-                <p>Our servers are located in United States, and your personal information may be transferred to and processed in that country. If you are located in the European Union, please note that [Country] may not have been deemed by the European Commission to have an adequate level of data protection. However, we implement appropriate safeguards, such as Standard Contractual Clauses, to ensure that your personal information receives an adequate level of protection when transferred outside the European Union.</p>
 
+
 
+        <div class="container">
 
+            <div class="breadcrumb">
 
+                <a href="/">Home</a> &gt; Privacy Policy
 
             </div>
 
             </div>
 
-            
-            <div class="privacy-section">
 
-                <h2>12. CCPA-Specific Information</h2>
 
-                <p>If you are a California resident, the following additional information applies to you:</p>
 
-                
-                <h3>12.1 CCPA Rights</h3>
 
-                <p>Under the CCPA, you have the following rights:</p>
 
-                <ul>
 
-                    <li><strong>Right to Know:</strong> You have the right to request that we disclose the categories and specific pieces of personal information we have collected about you, the sources of that information, the business or commercial purpose for collecting or selling that information, and the categories of third parties with whom we have shared that information.</li>
 
-                    <li><strong>Right to Delete:</strong> You have the right to request that we delete your personal information, subject to certain exceptions.</li>
 
-                    <li><strong>Right to Opt-Out of Sale:</strong> You have the right to opt out of the "sale" of your personal information, as defined by the CCPA. We do not currently sell your personal information, but if we do so in the future, we will provide you with a mechanism to opt out.</li>
 
-                    <li><strong>Non-Discrimination:</strong> We will not discriminate against you for exercising your rights under the CCPA.</li>
 
-                </ul>
 
-                
-                <h3>12.2 How to Exercise Your CCPA Rights</h3>
 
-                <p>To exercise your rights under the CCPA, please contact us at <a href="mailto:privacy@jccy-tech.com" style="color: var(--primary-color);">privacy@jccy-tech.com</a> or by mail at the address provided in Section 10. We will respond to your request within 45 days.</p>
 
-                
-                <h3>12.3 Information We Collect and Disclose</h3>
 
-                <p>For more information about the categories of personal information we collect and disclose, please see Sections 2 and 4 of this Privacy Policy.</p>
 
-                
-                <h3>12.4 "Shine the Light" Law</h3>
 
-                <p>California Civil Code Section 1798.83 permits California residents to request certain information regarding our disclosure of personal information to third parties for their direct marketing purposes. To make such a request, please contact us at <a href="mailto:privacy@jccy-tech.com" style="color: var(--primary-color);">privacy@jccy-tech.com</a>.</p>
 
+
 
+            <h1 class="page-title">Privacy Policy</h1>
 
+
 
+            <div class="privacy-content">
 
+                <div class="last-updated">
 
+                    <p>Last updated: July 4, 2025</p>
 
+                </div>
 
+                <div class="privacy-section">
 
+                    <h2>1. Introduction</h2>
 
+                    <p>Welcome to Art Color ("we," "us," or "our"). We are committed to protecting your privacy and
 
+                        ensuring the security of your personal information. This Privacy Policy explains how we collect,
 
+                        use, disclose, and safeguard your information when you visit our website <a
 
+                            href="https://art.pcoloring.com" style="color: var(--primary-color);">art.pcoloring.com</a>
 
+                        (the "Website") or use our mobile applications and other related services (collectively, the
 
+                        "Services").</p>
 
+                    <p>By using our Website, you agree to the terms of this Privacy Policy. If you do not agree with our
 
+                        practices, please do not use our Website or services.</p>
 
+                    <p>This Privacy Policy is designed to comply with the General Data Protection Regulation (GDPR) of
 
+                        the European Union and the California Consumer Privacy Act (CCPA). If you are located in the
 
+                        European Union or California, please review the additional information provided in Sections 11
 
+                        and 12 respectively.</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>2. Information We Collect</h2>
 
+
 
+                    <h3>2.1 Personal Information</h3>
 
+                    <p>We may collect personal information that you voluntarily provide to us when you:</p>
 
+                    <ul>
 
+                        <li>Create an account on our Website</li>
 
+                        <li>Subscribe to our newsletter or email updates</li>
 
+                        <li>Contact us through our support channels</li>
 
+                        <li>Participate in contests, surveys, or promotions</li>
 
+                    </ul>
 
+                    <p>Examples of personal information we may collect include your name, email address, postal address,
 
+                        phone number, and any other information you choose to provide.</p>
 
+
 
+                    <h3>2.2 Non-Personal Information</h3>
 
+                    <p>We may automatically collect non-personal information about your visit to our Website, including:
 
+                    </p>
 
+                    <ul>
 
+                        <li>Your IP address</li>
 
+                        <li>Browser type and version</li>
 
+                        <li>Operating system</li>
 
+                        <li>Pages visited and actions taken on our Website</li>
 
+                        <li>Time and duration of your visit</li>
 
+                        <li>Referral source</li>
 
+                    </ul>
 
+                    <p>We use this information to analyze trends, administer the site, track user movements, and gather
 
+                        demographic information for aggregate use.</p>
 
+
 
+                    <h3>2.3 Cookies and Tracking Technologies</h3>
 
+                    <p>Our Website uses cookies and similar tracking technologies to enhance your experience. Cookies
 
+                        are small text files that are stored on your device. We use both session cookies (which expire
 
+                        when you close your browser) and persistent cookies (which remain on your device until deleted).
 
+                    </p>
 
+                    <p>We use cookies for various purposes, including:</p>
 
+                    <ul>
 
+                        <li>Remembering your preferences and settings</li>
 
+                        <li>Analyzing website traffic and performance</li>
 
+                        <li>Personalizing your experience</li>
 
+                        <li>Advertising and marketing purposes</li>
 
+                    </ul>
 
+                    <p>You can control cookies through your browser settings. However, if you choose to disable cookies,
 
+                        some features of our Website may not function properly.</p>
 
+
 
+                    <h3>2.4 Google Analytics and Google AdSense</h3>
 
+                    <p>We use Google Analytics, a web analytics service provided by Google, Inc. ("Google"), to help
 
+                        analyze how users interact with our Website. Google Analytics uses cookies to collect
 
+                        information such as how visitors navigate our Website. This information is used to compile
 
+                        reports and help us improve our Website. The information collected by Google Analytics is
 
+                        generally anonymous and aggregated.</p>
 
+                    <p>We also use Google AdSense, an advertising service provided by Google, to display advertisements
 
+                        on our Website. Google AdSense uses cookies to serve ads based on your prior visits to our
 
+                        Website and other websites. These cookies do not contain personal information, but they may
 
+                        track your online activity across different websites.</p>
 
+                    <p>Google's ability to use and share information collected by Google Analytics and Google AdSense is
 
+                        subject to Google's <a href="https://policies.google.com/privacy"
 
+                            style="color: var(--primary-color);">Privacy Policy</a>. You may opt out of Google Analytics
 
+                        by downloading and installing the <a href="https://tools.google.com/dlpage/gaoptout"
 
+                            style="color: var(--primary-color);">Google Analytics Opt-out Browser Add-on</a>.</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>3. How We Use Your Information</h2>
 
+                    <p>We use the information we collect for various purposes, including:</p>
 
+                    <ul>
 
+                        <li>Providing, maintaining, and improving our Website and services</li>
 
+                        <li>Understanding user preferences and providing personalized content</li>
 
+                        <li>Responding to your inquiries and providing customer support</li>
 
+                        <li>Sending you updates, newsletters, and promotional materials (if you have subscribed to
 
+                            receive them)</li>
 
+                        <li>Conducting research and analysis to improve our offerings</li>
 
+                        <li>Detecting, preventing, and addressing technical issues</li>
 
+                    </ul>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>4. Information Sharing and Disclosure</h2>
 
+                    <p>We do not sell, trade, or otherwise transfer your personal information to third parties without
 
+                        your consent, except as described in this Privacy Policy.</p>
 
+
 
+                    <h3>4.1 Service Providers</h3>
 
+                    <p>We may engage third-party service providers to assist us in operating our Website, conducting our
 
+                        business, or providing services to you. These third parties have access to your personal
 
+                        information only to perform these tasks on our behalf and are obligated not to disclose or use
 
+                        it for any other purpose.</p>
 
+
 
+                    <h3>4.2 Legal Requirements</h3>
 
+                    <p>We may disclose your personal information if required to do so by law or in response to valid
 
+                        requests by public authorities (e.g., a court or government agency).</p>
 
+
 
+                    <h3>4.3 Business Transfers</h3>
 
+                    <p>If we are involved in a merger, acquisition, or sale of all or a portion of our assets, your
 
+                        personal information may be transferred as part of that transaction.</p>
 
+
 
+                    <h3>4.4 Consent</h3>
 
+                    <p>We may disclose your personal information with your consent, such as when you choose to share
 
+                        your information for a specific purpose.</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>5. Data Security</h2>
 
+                    <p>We take reasonable measures to protect your personal information from unauthorized access, use,
 
+                        or disclosure. However, no method of transmission over the internet or electronic storage is
 
+                        100% secure, and we cannot guarantee absolute security.</p>
 
+                    <p>You are responsible for maintaining the confidentiality of your account credentials, and you
 
+                        should notify us immediately of any unauthorized use of your account.</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>6. Your Choices</h2>
 
+
 
+                    <h3>6.1 Communication Preferences</h3>
 
+                    <p>You can unsubscribe from our marketing emails at any time by clicking the "Unsubscribe" link at
 
+                        the bottom of the email. You may also update your communication preferences by logging into your
 
+                        account and adjusting your settings.</p>
 
+
 
+                    <h3>6.2 Access, Correction, or Deletion</h3>
 
+                    <p>You have the right to access, correct, or delete the personal information we hold about you. To
 
+                        request access to or correction of your personal information, or to request that we delete your
 
+                        personal information, please contact us at <a href="mailto:privacy@jccy-tech.com"
 
+                            style="color: var(--primary-color);">privacy@jccy-tech.com</a>.</p>
 
+
 
+                    <h3>6.3 Opting Out of Cookies</h3>
 
+                    <p>You can disable cookies through your browser settings. However, disabling cookies may affect your
 
+                        experience on our Website.</p>
 
+
 
+                    <h3>6.4 Do Not Track Signals</h3>
 
+                    <p>Our Website does not currently respond to "Do Not Track" signals from browsers. </p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>7. Children's Privacy</h2>
 
+                    <p>Our Website is not intended for children under the age of 13. We do not knowingly collect
 
+                        personal information from children under 13. If you believe we have inadvertently collected
 
+                        information from a child under 13, please contact us, and we will promptly delete the
 
+                        information.</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>8. Third-Party Links</h2>
 
+                    <p>Our Website may contain links to third-party websites or services that are not owned or
 
+                        controlled by us. This Privacy Policy does not apply to those third-party websites or services.
 
+                        We encourage you to review the privacy policies of those third parties before using their
 
+                        services.</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>9. Changes to This Privacy Policy</h2>
 
+                    <p>We may update this Privacy Policy from time to time. The date at the top of this page indicates
 
+                        when this Privacy Policy was last revised. We will notify you of any material changes by posting
 
+                        the new Privacy Policy on our Website. Your continued use of our Website after the effective
 
+                        date of the revised Privacy Policy constitutes your acceptance of the changes.</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>10. Contact Us</h2>
 
+                    <p>If you have any questions, concerns, or suggestions about our Privacy Policy, please contact us
 
+                        at:</p>
 
+                    <p>Email: <a href="mailto:privacy@jccy-tech.com"
 
+                            style="color: var(--primary-color);">privacy@jccy-tech.com</a></p>
 
+                    <p>Mail: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>11. GDPR-Specific Information</h2>
 
+                    <p>If you are located in the European Union, the following additional information applies to you:
 
+                    </p>
 
+
 
+                    <h3>11.1 Legal Basis for Processing</h3>
 
+                    <p>We process your personal information on the following legal bases:</p>
 
+                    <ul>
 
+                        <li><strong>Consent:</strong> We may process your personal information when you have given us
 
+                            your explicit consent for specific purposes, such as subscribing to our newsletter.</li>
 
+                        <li><strong>Contract:</strong> We may process your personal information to fulfill our
 
+                            obligations under a contract with you, such as providing the services you have requested.
 
+                        </li>
 
+                        <li><strong>Legal Obligation:</strong> We may process your personal information to comply with
 
+                            applicable laws and regulations.</li>
 
+                        <li><strong>Legitimate Interests:</strong> We may process your personal information for our
 
+                            legitimate interests, such as improving our Website and services, ensuring security, and
 
+                            analyzing user behavior. Our legitimate interests do not override your rights and freedoms.
 
+                        </li>
 
+                    </ul>
 
+
 
+                    <h3>11.2 Your GDPR Rights</h3>
 
+                    <p>In addition to the rights described in Section 6, you have the following rights under the GDPR:
 
+                    </p>
 
+                    <ul>
 
+                        <li><strong>Right to Object:</strong> You have the right to object to our processing of your
 
+                            personal information based on our legitimate interests.</li>
 
+                        <li><strong>Right to Restrict Processing:</strong> You have the right to request that we
 
+                            restrict the processing of your personal information in certain circumstances.</li>
 
+                        <li><strong>Right to Data Portability:</strong> You have the right to receive your personal
 
+                            information in a structured, commonly used, and machine-readable format and to transmit that
 
+                            information to another controller.</li>
 
+                        <li><strong>Right to Withdraw Consent:</strong> If we are processing your personal information
 
+                            based on your consent, you have the right to withdraw your consent at any time.</li>
 
+                    </ul>
 
+                    <p>To exercise any of these rights, please contact us at <a href="mailto:privacy@jccy-tech.com"
 
+                            style="color: var(--primary-color);">privacy@jccy-tech.com</a>.</p>
 
+
 
+                    <h3>11.3 Data Transfers</h3>
 
+                    <p>Our servers are located in United States, and your personal information may be transferred to and
 
+                        processed in that country. If you are located in the European Union, please note that [Country]
 
+                        may not have been deemed by the European Commission to have an adequate level of data
 
+                        protection. However, we implement appropriate safeguards, such as Standard Contractual Clauses,
 
+                        to ensure that your personal information receives an adequate level of protection when
 
+                        transferred outside the European Union.</p>
 
+                </div>
 
+
 
+                <div class="privacy-section">
 
+                    <h2>12. CCPA-Specific Information</h2>
 
+                    <p>If you are a California resident, the following additional information applies to you:</p>
 
+
 
+                    <h3>12.1 CCPA Rights</h3>
 
+                    <p>Under the CCPA, you have the following rights:</p>
 
+                    <ul>
 
+                        <li><strong>Right to Know:</strong> You have the right to request that we disclose the
 
+                            categories and specific pieces of personal information we have collected about you, the
 
+                            sources of that information, the business or commercial purpose for collecting or selling
 
+                            that information, and the categories of third parties with whom we have shared that
 
+                            information.</li>
 
+                        <li><strong>Right to Delete:</strong> You have the right to request that we delete your personal
 
+                            information, subject to certain exceptions.</li>
 
+                        <li><strong>Right to Opt-Out of Sale:</strong> You have the right to opt out of the "sale" of
 
+                            your personal information, as defined by the CCPA. We do not currently sell your personal
 
+                            information, but if we do so in the future, we will provide you with a mechanism to opt out.
 
+                        </li>
 
+                        <li><strong>Non-Discrimination:</strong> We will not discriminate against you for exercising
 
+                            your rights under the CCPA.</li>
 
+                    </ul>
 
+
 
+                    <h3>12.2 How to Exercise Your CCPA Rights</h3>
 
+                    <p>To exercise your rights under the CCPA, please contact us at <a
 
+                            href="mailto:privacy@jccy-tech.com"
 
+                            style="color: var(--primary-color);">privacy@jccy-tech.com</a> or by mail at the address
 
+                        provided in Section 10. We will respond to your request within 45 days.</p>
 
+
 
+                    <h3>12.3 Information We Collect and Disclose</h3>
 
+                    <p>For more information about the categories of personal information we collect and disclose, please
 
+                        see Sections 2 and 4 of this Privacy Policy.</p>
 
+
 
+                    <h3>12.4 "Shine the Light" Law</h3>
 
+                    <p>California Civil Code Section 1798.83 permits California residents to request certain information
 
+                        regarding our disclosure of personal information to third parties for their direct marketing
 
+                        purposes. To make such a request, please contact us at <a href="mailto:privacy@jccy-tech.com"
 
+                            style="color: var(--primary-color);">privacy@jccy-tech.com</a>.</p>
 
+                </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-    </div>
 
-    
-  <%- include('footer') %>
 
 
 
-  <script src="/scripts/script.js"></script>
 
+        <%- include('footer') %>
 
+
 
+            <script src="/scripts/script.js"></script>
 
 
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 57 - 35
views/v2/share.ejs
Vedi File 

@@ -3,14 +3,14 @@
 
 
 
 <head>
 
 <head>
 
   <meta http-equiv="x-ua-compatible" content="ie=edge">
 
   <meta http-equiv="x-ua-compatible" content="ie=edge">
 
-  <title>Art Number Coloring</title>
 
+  <title>Art Color</title>
 
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="description" content="Free Coloring Pages Paint Online!">
 
   <meta name="description" content="Free Coloring Pages Paint Online!">
 
   <meta name="keywords" content="color, paint, app, ios, android, game">
 
   <meta name="keywords" content="color, paint, app, ios, android, game">
 
 
 
   <meta property="og:site_name" content="art.pcoloring.com">
 
   <meta property="og:site_name" content="art.pcoloring.com">
 
-  <meta property="og:title" content="Art Number Coloring">
 
+  <meta property="og:title" content="Art Color">
 
   <meta property="og:description" content="Free Coloring Pages Paint Online!">
 
   <meta property="og:description" content="Free Coloring Pages Paint Online!">
 
   <meta property="og:image" content="<%= imageUrl %>">
 
   <meta property="og:image" content="<%= imageUrl %>">
 
   <meta property="og:type" content="website">
 
   <meta property="og:type" content="website">
 
@@ -20,11 +20,11 @@
 
   <meta property="og:url" content="<%= applink %>" /> <!-- **Universal Link 路径** -->
 
   <meta property="og:url" content="<%= applink %>" /> <!-- **Universal Link 路径** -->
 
   <meta property="al:ios:url" content="<%= applink %>" /> <!-- **Universal Link 路径** -->
 
   <meta property="al:ios:url" content="<%= applink %>" /> <!-- **Universal Link 路径** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
-  <meta property="al:ios:app_name" content="Art Number Coloring Book" /> <!-- **iOS 应用名称** -->
 
+  <meta property="al:ios:app_name" content="Art Color Book" /> <!-- **iOS 应用名称** -->
 
 
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:url" content="<%= applink %>" /> <!-- ** Universal Link 路径** -->
 
   <meta property="al:android:url" content="<%= applink %>" /> <!-- ** Universal Link 路径** -->
 
-  <meta property="al:android:app_name" content="Art Number Coloring Book" /> <!-- **Android 应用名称** -->
 
+  <meta property="al:android:app_name" content="Art Color Book" /> <!-- **Android 应用名称** -->
 
 
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
 
 
@@ -49,13 +49,18 @@
 
     body {
 
     body {
 
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
       display: flex;
 
       display: flex;
 
-      flex-direction: column; /* 垂直方向排列子元素 */
 
-      justify-content: center; /* 垂直居中 */
 
-      align-items: center;     /* 水平居中 */
 
-      min-height: 100vh;       /* 最小高度为视口高度，确保垂直居中 */
 
+      flex-direction: column;
 
+      /* 垂直方向排列子元素 */
 
+      justify-content: center;
 
+      /* 垂直居中 */
 
+      align-items: center;
 
+      /* 水平居中 */
 
+      min-height: 100vh;
 
+      /* 最小高度为视口高度，确保垂直居中 */
 
       margin: 0;
 
       margin: 0;
 
       padding: 20px;
 
       padding: 20px;
 
-      box-sizing: border-box; /* 盒模型为边框盒 */
 
+      box-sizing: border-box;
 
+      /* 盒模型为边框盒 */
 
       background-color: var(--background-color);
 
       background-color: var(--background-color);
 
       color: var(--text-color);
 
       color: var(--text-color);
 
       line-height: 1.6;
 
       line-height: 1.6;
 
@@ -65,21 +70,30 @@
 
     /* 父容器，用于包裹图片和 Canvas，并使其相对定位 */
 
     /* 父容器，用于包裹图片和 Canvas，并使其相对定位 */
 
     .image-canvas-container {
 
     .image-canvas-container {
 
       position: relative;
 
       position: relative;
 
-      max-width: 90%; /* 限制容器最大宽度 */
 
+      max-width: 90%;
 
+      /* 限制容器最大宽度 */
 
       height: auto;
 
       height: auto;
 
-      display: inline-block; /* 确保容器根据图片尺寸收缩 */
 
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */
 
-      border-radius: 12px; /* 圆角 */
 
-      overflow: hidden; /* 隐藏超出容器的内容 */
 
+      display: inline-block;
 
+      /* 确保容器根据图片尺寸收缩 */
 
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 
+      /* 添加阴影效果 */
 
+      border-radius: 12px;
 
+      /* 圆角 */
 
+      overflow: hidden;
 
+      /* 隐藏超出容器的内容 */
 
     }
 
     }
 
 
 
     /* 图片样式：使其响应式并填充容器 */
 
     /* 图片样式：使其响应式并填充容器 */
 
     .image-canvas-container img {
 
     .image-canvas-container img {
 
       position: relative;
 
       position: relative;
 
-      display: block; /* 移除图片底部空白 */
 
-      max-width: 100%; /* 最大宽度为父容器的100% */
 
-      height: auto;    /* 高度自动调整，保持图片比例 */
 
-      border-radius: 12px; /* 与容器相同的圆角 */
 
+      display: block;
 
+      /* 移除图片底部空白 */
 
+      max-width: 100%;
 
+      /* 最大宽度为父容器的100% */
 
+      height: auto;
 
+      /* 高度自动调整，保持图片比例 */
 
+      border-radius: 12px;
 
+      /* 与容器相同的圆角 */
 
       z-index: 100;
 
       z-index: 100;
 
     }
 
     }
 
 
 
@@ -90,7 +104,8 @@
 
       left: 0;
 
       left: 0;
 
       width: 100%;
 
       width: 100%;
 
       height: 100%;
 
       height: 100%;
 
-      border-radius: 12px; /* 与容器相同的圆角 */
 
+      border-radius: 12px;
 
+      /* 与容器相同的圆角 */
 
       z-index: 50;
 
       z-index: 50;
 
     }
 
     }
 
 
 
@@ -172,9 +187,12 @@
 
       left: 0;
 
       left: 0;
 
       width: 100%;
 
       width: 100%;
 
       height: 100%;
 
       height: 100%;
 
-      background-color: rgba(0, 0, 0, 0.75); /* 半透明黑色背景 */
 
-      z-index: 9999; /* 确保在最上层 */
 
-      display: none; /* 默认隐藏 */
 
+      background-color: rgba(0, 0, 0, 0.75);
 
+      /* 半透明黑色背景 */
 
+      z-index: 9999;
 
+      /* 确保在最上层 */
 
+      display: none;
 
+      /* 默认隐藏 */
 
       justify-content: center;
 
       justify-content: center;
 
       align-items: center;
 
       align-items: center;
 
       color: white;
 
       color: white;
 
@@ -186,29 +204,33 @@
 
     }
 
     }
 
 
 
     .wechat-guide-overlay.active {
 
     .wechat-guide-overlay.active {
 
-      display: flex; /* 显示引导层 */
 
+      display: flex;
 
+      /* 显示引导层 */
 
     }
 
     }
 
 
 
     .wechat-guide-arrow {
 
     .wechat-guide-arrow {
 
       position: absolute;
 
       position: absolute;
 
-      top: 10px; /* 箭头位置靠近右上角 */
 
+      top: 10px;
 
+      /* 箭头位置靠近右上角 */
 
       right: 20px;
 
       right: 20px;
 
       width: 80px;
 
       width: 80px;
 
       height: 80px;
 
       height: 80px;
 
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" transform="rotate(90 12 12)"/></svg>') no-repeat center center;
 
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" transform="rotate(90 12 12)"/></svg>') no-repeat center center;
 
       background-size: contain;
 
       background-size: contain;
 
-      transform: rotate(90deg); /* 旋转箭头指向右下 */
 
+      transform: rotate(90deg);
 
+      /* 旋转箭头指向右下 */
 
     }
 
     }
 
 
 
     .wechat-guide-text {
 
     .wechat-guide-text {
 
-      margin-top: 100px; /* 留出箭头空间 */
 
+      margin-top: 100px;
 
+      /* 留出箭头空间 */
 
       line-height: 1.8;
 
       line-height: 1.8;
 
     }
 
     }
 
 
 
     .wechat-guide-text strong {
 
     .wechat-guide-text strong {
 
-      color: var(--accent-color); /* 突出显示关键文字 */
 
+      color: var(--accent-color);
 
+      /* 突出显示关键文字 */
 
     }
 
     }
 
-
 
   </style>
 
   </style>
 
 </head>
 
 </head>
 
 
 
@@ -224,16 +246,16 @@
 
 
 
 <body>
 
 <body>
 
   <div class="image-canvas-container">
 
   <div class="image-canvas-container">
 
-    <img id="poster-img" src="<%= imageUrl %>" alt="Art Number Coloring" />
 
+    <img id="poster-img" src="<%= imageUrl %>" alt="Art Color" />
 
     <canvas id="canvas"></canvas>
 
     <canvas id="canvas"></canvas>
 
     <div id="play-button" class="play-button"></div>
 
     <div id="play-button" class="play-button"></div>
 
   </div>
 
   </div>
 
-      <div class="buttons">
 
-        <a href="/">Home</a>
 
-        <a href="<%= downlink %>" class="btn btn-secondary">Download App</a>
 
-        <a href="/coloring-page/<%= id %>">Detail>></a>
 
-      </div>
 
-    </div>
 
+  <div class="buttons">
 
+    <a href="/">Home</a>
 
+    <a href="<%= downlink %>" class="btn btn-secondary">Download App</a>
 
+    <a href="/coloring-page/<%= id %>">Detail>></a>
 
+  </div>
 
+  </div>
 
   </div>
 
   </div>
 
 
 
   <!-- MARK: 微信引导层 -->
 
   <!-- MARK: 微信引导层 -->

+ 215 - 139
views/v2/terms-of-service.ejs
Vedi File 

@@ -1,9 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Terms of Service - Art Number Coloring</title>
 
+    <title>Terms of Service - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
@@ -13,7 +14,7 @@
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .terms-content {
 
         .terms-content {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -21,67 +22,67 @@
 
             padding: 40px;
 
             padding: 40px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .terms-section {
 
         .terms-section {
 
             margin-bottom: 40px;
 
             margin-bottom: 40px;
 
         }
 
         }
 
-        
+
 
         .terms-section h2 {
 
         .terms-section h2 {
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .terms-section h3 {
 
         .terms-section h3 {
 
             color: var(--secondary-color);
 
             color: var(--secondary-color);
 
             font-size: 1.2rem;
 
             font-size: 1.2rem;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
             margin-top: 25px;
 
             margin-top: 25px;
 
         }
 
         }
 
-        
+
 
         .terms-section p {
 
         .terms-section p {
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .terms-section ul {
 
         .terms-section ul {
 
             margin-left: 25px;
 
             margin-left: 25px;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .terms-section li {
 
         .terms-section li {
 
             margin-bottom: 8px;
 
             margin-bottom: 8px;
 
         }
 
         }
 
-        
+
 
         .terms-section ol {
 
         .terms-section ol {
 
             margin-left: 25px;
 
             margin-left: 25px;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .terms-section ol li {
 
         .terms-section ol li {
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
         }
 
         }
 
-        
+
 
         .last-updated {
 
         .last-updated {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-style: italic;
 
             font-style: italic;
 
             text-align: right;
 
             text-align: right;
 
             margin-top: 30px;
 
             margin-top: 30px;
 
         }
 
         }
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .terms-content {
 
             .terms-content {
 
                 padding: 30px 20px;
 
                 padding: 30px 20px;
 
             }
 
             }
 
-            
+
 
             .terms-section h2 {
 
             .terms-section h2 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
-            
+
 
             .terms-section h3 {
 
             .terms-section h3 {
 
                 font-size: 1.1rem;
 
                 font-size: 1.1rem;
 
             }
 
             }
 
@@ -92,138 +93,213 @@
 
 <!-- Google tag (gtag.js) -->
 
 <!-- Google tag (gtag.js) -->
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
 
 <script>
 
 <script>
 
-  window.dataLayer = window.dataLayer || [];
 
-  function gtag() { dataLayer.push(arguments); }
 
-  gtag('js', new Date());
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
 
 
-  gtag('config', 'G-JBGGVGLHTP');
 
+    gtag('config', 'G-JBGGVGLHTP');
 
 </script>
 
 </script>
 
 
 
 <body>
 
 <body>
 
     <%- include('header') %>
 
     <%- include('header') %>
 
-    
-    <div class="container">
 
-        <div class="breadcrumb">
 
-            <a href="/">Home</a> &gt; Terms of Service
 
-        </div>
 
-        
-        <h1 class="page-title">Terms of Service</h1>
 
-        
-        <div class="terms-content">
 
-            <div class="last-updated">
 
-                <p>Last updated: July 1, 2025</p>
 
-            </div>
 
-            <div class="terms-section">
 
-                <h2>1. Introduction</h2>
 
-                <p>Welcome to Art Number Coloring ("we," "us," or "our"). These Terms of Service govern your use of our website <a href="https://art.pcoloring.com" style="color: var(--primary-color);">art.pcoloring.com</a> (the "Website") and all associated services (collectively, the "Services"). By accessing or using our Services, you agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our Services.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>2. Eligibility</h2>
 
-                <p>You must be at least 13 years old to use our Services. By using our Services, you represent and warrant that you are at least 13 years old. If you are under 13, you may not use our Services.</p>
 
-                <p>If you are using our Services on behalf of an organization, you represent and warrant that you have the authority to bind that organization to these Terms of Service. In such case, "you" and "your" will refer to that organization.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>3. Use of Our Services</h2>
 
-                
-                <h3>3.1 Permitted Use</h3>
 
-                <p>Our Services are intended to provide you with access to free printable coloring pages, online coloring tools, and related content for personal, non-commercial use. You may use our Services only for lawful purposes and in accordance with these Terms of Service.</p>
 
-                
-                <h3>3.2 Prohibited Activities</h3>
 
-                <p>You agree not to:</p>
 
-                <ul>
 
-                    <li>Use our Services for any commercial purpose without our prior written consent</li>
 
-                    <li>Modify, adapt, sublicense, translate, sell, reverse engineer, decompile, or disassemble any part of our Services</li>
 
-                    <li>Attempt to gain unauthorized access to our Services, user accounts, computer systems, or networks associated with our Services</li>
 
-                    <li>Upload, post, transmit, or otherwise make available any content that is unlawful, harmful, threatening, abusive, harassing, defamatory, vulgar, obscene, pornographic, invasive of another's privacy, hateful, or racially, ethnically, or otherwise objectionable</li>
 
-                    <li>Interfere with or disrupt our Services or servers or networks connected to our Services</li>
 
-                    <li>Use any automated means, including robots, spiders, or scripts, to access, monitor, or copy our Services without our prior written permission</li>
 
-                    <li>Impersonate any person or entity, or falsely state or otherwise misrepresent your affiliation with a person or entity</li>
 
-                    <li>Use our Services to violate the intellectual property rights of others</li>
 
-                    <li>Create multiple accounts for the purpose of abusing our Services</li>
 
-                </ul>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>4. Intellectual Property Rights</h2>
 
-                <p>Our Services and all content available on or through our Services, including but not limited to text, graphics, logos, images, audio clips, video clips, software, and code (collectively, the "Content"), are the property of Art Number Coloring or our licensors and are protected by copyright, trademark, patent, and other intellectual property laws.</p>
 
-                <p>You may not use, reproduce, distribute, modify, display, perform, publish, license, create derivative works from, transfer, or sell any Content or our Services without our prior written permission, except as expressly permitted by these Terms of Service or our Services.</p>
 
-                <p>Art Number Coloring and our logos are trademarks or registered trademarks of Art Number Coloring. Other trademarks, names, and logos used on our Services may be the trademarks of their respective owners. You are not permitted to use any trademarks, names, or logos without our prior written permission or the permission of the respective trademark owner.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>5. User Submissions</h2>
 
-                <p>Our Services may allow you to submit, upload, post, or otherwise make available content, including but not limited to coloring pages you have created, comments, reviews, and other materials (collectively, "User Submissions"). By submitting User Submissions, you grant us a worldwide, non-exclusive, royalty-free, sublicenseable, and transferable license to use, reproduce, distribute, prepare derivative works of, display, and perform your User Submissions in connection with our Services and our business.</p>
 
-                <p>You represent and warrant that:</p>
 
-                <ul>
 
-                    <li>You own or have the necessary rights to grant us the license described above for your User Submissions</li>
 
-                    <li>Your User Submissions do not violate these Terms of Service or the rights of any third party</li>
 
-                    <li>Your User Submissions do not contain any viruses, worms, Trojan horses, or other harmful code</li>
 
-                </ul>
 
-                <p>We reserve the right to remove or modify any User Submissions at any time for any reason, including but not limited to if we believe your User Submissions violate these Terms of Service or the rights of others.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>6. Privacy Policy</h2>
 
-                <p>Our collection and use of your personal information is governed by our <a href="/privacy-policy" style="color: var(--primary-color);">Privacy Policy</a>. By using our Services, you consent to our collection and use of your personal information as described in our Privacy Policy.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>7. Links to Third-Party Websites</h2>
 
-                <p>Our Services may contain links to third-party websites or services that are not owned or controlled by us. We have no control over, and assume no responsibility for, the content, privacy policies, or practices of any third-party websites or services. We do not warrant the offerings of any of these entities/individuals or their websites.</p>
 
-                <p>You acknowledge and agree that we shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods, or services available on or through any such third-party websites or services.</p>
 
-                <p>We strongly advise you to read the terms of service and privacy policies of any third-party websites or services that you visit.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>8. Disclaimer of Warranties</h2>
 
-                <p>Our Services are provided "as is" and "as available" without warranties of any kind, either express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, or non-infringement. We do not warrant that our Services will be uninterrupted, timely, secure, or error-free.</p>
 
-                <p>We do not warrant that the results that may be obtained from the use of our Services will be accurate or reliable.</p>
 
-                <p>You agree that your use of our Services is at your sole risk. We shall not be liable for any direct, indirect, incidental, special, consequential, or punitive damages, including but not limited to loss of profits, data, or other intangible losses, resulting from your use of or inability to use our Services.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>9. Limitation of Liability</h2>
 
-                <p>In no event shall Art Number Coloring, our affiliates, or our licensors be liable for any damages whatsoever, including but not limited to any direct, indirect, special, incidental, or consequential damages, including but not limited to loss of use, data, or profits, arising out of or in any way connected with the use of or inability to use our Services, even if we have been advised of the possibility of such damages.</p>
 
-                <p>Because some states or jurisdictions do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation may not apply to you. In such states or jurisdictions, our liability shall be limited to the fullest extent permitted by law.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>10. Term and Termination</h2>
 
-                <p>These Terms of Service shall remain in full force and effect while you use our Services. We may terminate your access to our Services at any time, for any reason, including but not limited to if you violate these Terms of Service.</p>
 
-                <p>Upon termination, you must immediately cease all use of our Services. Sections 3, 4, 5, 6, 8, 9, 10, 11, and 12 shall survive any termination of these Terms of Service.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>11. Changes to These Terms of Service</h2>
 
-                <p>We reserve the right to modify these Terms of Service at any time. If we make material changes to these Terms of Service, we will notify you by posting the new Terms of Service on our Website and updating the "Last Updated" date at the top of these Terms of Service. Your continued use of our Services after the effective date of the revised Terms of Service constitutes your acceptance of the changes.</p>
 
-                <p>It is your responsibility to review these Terms of Service periodically for changes. We encourage you to check this page frequently to ensure you are aware of the most current version of these Terms of Service.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>12. Governing Law and Jurisdiction</h2>
 
-                <p>These Terms of Service shall be governed by and construed in accordance with the laws of Beijing, China, without regard to its conflict of laws principles.</p>
 
-                <p>Any legal suit, action, or proceeding arising out of or related to these Terms of Service or our Services shall be instituted exclusively in the federal courts of Beijing, China or the courts of Beijing, China, and you consent to the personal jurisdiction of such courts and waive any and all objections to the exercise of jurisdiction over you by such courts and to venue in such courts.</p>
 
-            </div>
 
-            
-            <div class="terms-section">
 
-                <h2>13. Entire Agreement</h2>
 
-                <p>These Terms of Service constitute the entire agreement between you and Art Number Coloring regarding the use of our Services and supersede all prior agreements and understandings, oral or written, relating to the same.</p>
 
+
 
+        <div class="container">
 
+            <div class="breadcrumb">
 
+                <a href="/">Home</a> &gt; Terms of Service
 
             </div>
 
             </div>
 
-            
-            <div class="terms-section">
 
-                <h2>14. Contact Us</h2>
 
-                <p>If you have any questions about these Terms of Service, please contact us at:</p>
 
-                <p>Email: <a href="mailto:art_number_coloring@jccy-tech.com" style="color: var(--primary-color);">art_number_coloring@jccy-tech.com</a></p>
 
-                <p>Mail: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
+
 
+            <h1 class="page-title">Terms of Service</h1>
 
+
 
+            <div class="terms-content">
 
+                <div class="last-updated">
 
+                    <p>Last updated: July 1, 2025</p>
 
+                </div>
 
+                <div class="terms-section">
 
+                    <h2>1. Introduction</h2>
 
+                    <p>Welcome to Art Color ("we," "us," or "our"). These Terms of Service govern your use of our
 
+                        website <a href="https://art.pcoloring.com"
 
+                            style="color: var(--primary-color);">art.pcoloring.com</a> (the "Website") and all
 
+                        associated services (collectively, the "Services"). By accessing or using our Services, you
 
+                        agree to be bound by these Terms of Service. If you do not agree to these terms, please do not
 
+                        use our Services.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>2. Eligibility</h2>
 
+                    <p>You must be at least 13 years old to use our Services. By using our Services, you represent and
 
+                        warrant that you are at least 13 years old. If you are under 13, you may not use our Services.
 
+                    </p>
 
+                    <p>If you are using our Services on behalf of an organization, you represent and warrant that you
 
+                        have the authority to bind that organization to these Terms of Service. In such case, "you" and
 
+                        "your" will refer to that organization.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>3. Use of Our Services</h2>
 
+
 
+                    <h3>3.1 Permitted Use</h3>
 
+                    <p>Our Services are intended to provide you with access to free printable coloring pages, online
 
+                        coloring tools, and related content for personal, non-commercial use. You may use our Services
 
+                        only for lawful purposes and in accordance with these Terms of Service.</p>
 
+
 
+                    <h3>3.2 Prohibited Activities</h3>
 
+                    <p>You agree not to:</p>
 
+                    <ul>
 
+                        <li>Use our Services for any commercial purpose without our prior written consent</li>
 
+                        <li>Modify, adapt, sublicense, translate, sell, reverse engineer, decompile, or disassemble any
 
+                            part of our Services</li>
 
+                        <li>Attempt to gain unauthorized access to our Services, user accounts, computer systems, or
 
+                            networks associated with our Services</li>
 
+                        <li>Upload, post, transmit, or otherwise make available any content that is unlawful, harmful,
 
+                            threatening, abusive, harassing, defamatory, vulgar, obscene, pornographic, invasive of
 
+                            another's privacy, hateful, or racially, ethnically, or otherwise objectionable</li>
 
+                        <li>Interfere with or disrupt our Services or servers or networks connected to our Services</li>
 
+                        <li>Use any automated means, including robots, spiders, or scripts, to access, monitor, or copy
 
+                            our Services without our prior written permission</li>
 
+                        <li>Impersonate any person or entity, or falsely state or otherwise misrepresent your
 
+                            affiliation with a person or entity</li>
 
+                        <li>Use our Services to violate the intellectual property rights of others</li>
 
+                        <li>Create multiple accounts for the purpose of abusing our Services</li>
 
+                    </ul>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>4. Intellectual Property Rights</h2>
 
+                    <p>Our Services and all content available on or through our Services, including but not limited to
 
+                        text, graphics, logos, images, audio clips, video clips, software, and code (collectively, the
 
+                        "Content"), are the property of Art Color or our licensors and are protected by copyright,
 
+                        trademark, patent, and other intellectual property laws.</p>
 
+                    <p>You may not use, reproduce, distribute, modify, display, perform, publish, license, create
 
+                        derivative works from, transfer, or sell any Content or our Services without our prior written
 
+                        permission, except as expressly permitted by these Terms of Service or our Services.</p>
 
+                    <p>Art Color and our logos are trademarks or registered trademarks of Art Color. Other trademarks,
 
+                        names, and logos used on our Services may be the trademarks of their respective owners. You are
 
+                        not permitted to use any trademarks, names, or logos without our prior written permission or the
 
+                        permission of the respective trademark owner.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>5. User Submissions</h2>
 
+                    <p>Our Services may allow you to submit, upload, post, or otherwise make available content,
 
+                        including but not limited to coloring pages you have created, comments, reviews, and other
 
+                        materials (collectively, "User Submissions"). By submitting User Submissions, you grant us a
 
+                        worldwide, non-exclusive, royalty-free, sublicenseable, and transferable license to use,
 
+                        reproduce, distribute, prepare derivative works of, display, and perform your User Submissions
 
+                        in connection with our Services and our business.</p>
 
+                    <p>You represent and warrant that:</p>
 
+                    <ul>
 
+                        <li>You own or have the necessary rights to grant us the license described above for your User
 
+                            Submissions</li>
 
+                        <li>Your User Submissions do not violate these Terms of Service or the rights of any third party
 
+                        </li>
 
+                        <li>Your User Submissions do not contain any viruses, worms, Trojan horses, or other harmful
 
+                            code</li>
 
+                    </ul>
 
+                    <p>We reserve the right to remove or modify any User Submissions at any time for any reason,
 
+                        including but not limited to if we believe your User Submissions violate these Terms of Service
 
+                        or the rights of others.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>6. Privacy Policy</h2>
 
+                    <p>Our collection and use of your personal information is governed by our <a href="/privacy-policy"
 
+                            style="color: var(--primary-color);">Privacy Policy</a>. By using our Services, you consent
 
+                        to our collection and use of your personal information as described in our Privacy Policy.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>7. Links to Third-Party Websites</h2>
 
+                    <p>Our Services may contain links to third-party websites or services that are not owned or
 
+                        controlled by us. We have no control over, and assume no responsibility for, the content,
 
+                        privacy policies, or practices of any third-party websites or services. We do not warrant the
 
+                        offerings of any of these entities/individuals or their websites.</p>
 
+                    <p>You acknowledge and agree that we shall not be responsible or liable, directly or indirectly, for
 
+                        any damage or loss caused or alleged to be caused by or in connection with the use of or
 
+                        reliance on any such content, goods, or services available on or through any such third-party
 
+                        websites or services.</p>
 
+                    <p>We strongly advise you to read the terms of service and privacy policies of any third-party
 
+                        websites or services that you visit.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>8. Disclaimer of Warranties</h2>
 
+                    <p>Our Services are provided "as is" and "as available" without warranties of any kind, either
 
+                        express or implied, including but not limited to implied warranties of merchantability, fitness
 
+                        for a particular purpose, or non-infringement. We do not warrant that our Services will be
 
+                        uninterrupted, timely, secure, or error-free.</p>
 
+                    <p>We do not warrant that the results that may be obtained from the use of our Services will be
 
+                        accurate or reliable.</p>
 
+                    <p>You agree that your use of our Services is at your sole risk. We shall not be liable for any
 
+                        direct, indirect, incidental, special, consequential, or punitive damages, including but not
 
+                        limited to loss of profits, data, or other intangible losses, resulting from your use of or
 
+                        inability to use our Services.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>9. Limitation of Liability</h2>
 
+                    <p>In no event shall Art Color, our affiliates, or our licensors be liable for any damages
 
+                        whatsoever, including but not limited to any direct, indirect, special, incidental, or
 
+                        consequential damages, including but not limited to loss of use, data, or profits, arising out
 
+                        of or in any way connected with the use of or inability to use our Services, even if we have
 
+                        been advised of the possibility of such damages.</p>
 
+                    <p>Because some states or jurisdictions do not allow the exclusion or limitation of liability for
 
+                        consequential or incidental damages, the above limitation may not apply to you. In such states
 
+                        or jurisdictions, our liability shall be limited to the fullest extent permitted by law.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>10. Term and Termination</h2>
 
+                    <p>These Terms of Service shall remain in full force and effect while you use our Services. We may
 
+                        terminate your access to our Services at any time, for any reason, including but not limited to
 
+                        if you violate these Terms of Service.</p>
 
+                    <p>Upon termination, you must immediately cease all use of our Services. Sections 3, 4, 5, 6, 8, 9,
 
+                        10, 11, and 12 shall survive any termination of these Terms of Service.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>11. Changes to These Terms of Service</h2>
 
+                    <p>We reserve the right to modify these Terms of Service at any time. If we make material changes to
 
+                        these Terms of Service, we will notify you by posting the new Terms of Service on our Website
 
+                        and updating the "Last Updated" date at the top of these Terms of Service. Your continued use of
 
+                        our Services after the effective date of the revised Terms of Service constitutes your
 
+                        acceptance of the changes.</p>
 
+                    <p>It is your responsibility to review these Terms of Service periodically for changes. We encourage
 
+                        you to check this page frequently to ensure you are aware of the most current version of these
 
+                        Terms of Service.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>12. Governing Law and Jurisdiction</h2>
 
+                    <p>These Terms of Service shall be governed by and construed in accordance with the laws of Beijing,
 
+                        China, without regard to its conflict of laws principles.</p>
 
+                    <p>Any legal suit, action, or proceeding arising out of or related to these Terms of Service or our
 
+                        Services shall be instituted exclusively in the federal courts of Beijing, China or the courts
 
+                        of Beijing, China, and you consent to the personal jurisdiction of such courts and waive any and
 
+                        all objections to the exercise of jurisdiction over you by such courts and to venue in such
 
+                        courts.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>13. Entire Agreement</h2>
 
+                    <p>These Terms of Service constitute the entire agreement between you and Art Color regarding the
 
+                        use of our Services and supersede all prior agreements and understandings, oral or written,
 
+                        relating to the same.</p>
 
+                </div>
 
+
 
+                <div class="terms-section">
 
+                    <h2>14. Contact Us</h2>
 
+                    <p>If you have any questions about these Terms of Service, please contact us at:</p>
 
+                    <p>Email: <a href="mailto:art_number_coloring@jccy-tech.com"
 
+                            style="color: var(--primary-color);">art_number_coloring@jccy-tech.com</a></p>
 
+                    <p>Mail: 17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China</p>
 
+                </div>
 
+
 
             </div>
 
             </div>
 
-            
         </div>
 
         </div>
 
-    </div>
 
-    
-  <%- include('footer') %>
 
 
 
-  <script src="/scripts/script.js"></script>
 
+        <%- include('footer') %>
 
+
 
+            <script src="/scripts/script.js"></script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 176 - 148
views/v2/tips-tricks.ejs
Vedi File 

@@ -1,10 +1,12 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta name="description" content="Explore our collection of coloring tips, tricks, and tutorials at Art Number Coloring. Discover expert advice, creative techniques, and inspiration for your next coloring project.">
 
-    <title>Coloring Tips & Tricks - Art Number Coloring</title>
 
+    <meta name="description"
 
+        content="Explore our collection of coloring tips, tricks, and tutorials at Art Color. Discover expert advice, creative techniques, and inspiration for your next coloring project.">
 
+    <title>Coloring Tips & Tricks - Art Color</title>
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
     <style>
 
     <style>
 
@@ -14,21 +16,21 @@
 
             margin: 40px 0 20px;
 
             margin: 40px 0 20px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .page-description {
 
         .page-description {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             max-width: 800px;
 
             max-width: 800px;
 
             margin: 0 auto 50px;
 
             margin: 0 auto 50px;
 
             text-align: center;
 
             text-align: center;
 
         }
 
         }
 
-        
+
 
         .blog-grid {
 
         .blog-grid {
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
             gap: 30px;
 
             gap: 30px;
 
             margin-bottom: 60px;
 
             margin-bottom: 60px;
 
         }
 
         }
 
-        
+
 
         .blog-card {
 
         .blog-card {
 
             background-color: white;
 
             background-color: white;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
@@ -40,48 +42,48 @@
 
             flex-direction: column;
 
             flex-direction: column;
 
             height: 100%;
 
             height: 100%;
 
         }
 
         }
 
-        
+
 
         .blog-card:hover {
 
         .blog-card:hover {
 
             transform: translateY(-8px);
 
             transform: translateY(-8px);
 
         }
 
         }
 
-        
+
 
         .blog-image {
 
         .blog-image {
 
             height: 200px;
 
             height: 200px;
 
             background-color: #f0f0f0;
 
             background-color: #f0f0f0;
 
             overflow: hidden;
 
             overflow: hidden;
 
         }
 
         }
 
-        
+
 
         .blog-image img {
 
         .blog-image img {
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
             object-fit: cover;
 
             object-fit: cover;
 
             transition: transform 0.5s ease;
 
             transition: transform 0.5s ease;
 
         }
 
         }
 
-        
+
 
         .blog-card:hover .blog-image img {
 
         .blog-card:hover .blog-image img {
 
             transform: scale(1.05);
 
             transform: scale(1.05);
 
         }
 
         }
 
-        
+
 
         .blog-info {
 
         .blog-info {
 
             padding: 20px;
 
             padding: 20px;
 
             flex-grow: 1;
 
             flex-grow: 1;
 
             display: flex;
 
             display: flex;
 
             flex-direction: column;
 
             flex-direction: column;
 
         }
 
         }
 
-        
+
 
         .blog-meta {
 
         .blog-meta {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-size: 0.85rem;
 
             font-size: 0.85rem;
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
         }
 
         }
 
-        
+
 
         .blog-title {
 
         .blog-title {
 
             font-weight: 700;
 
             font-weight: 700;
 
             font-size: 1.3rem;
 
             font-size: 1.3rem;
 
             margin-bottom: 12px;
 
             margin-bottom: 12px;
 
             color: var(--primary-color);
 
             color: var(--primary-color);
 
         }
 
         }
 
-        
+
 
         .blog-desc {
 
         .blog-desc {
 
             color: var(--light-text);
 
             color: var(--light-text);
 
             font-size: 0.95rem;
 
             font-size: 0.95rem;
 
@@ -93,7 +95,7 @@
 
             overflow: hidden;
 
             overflow: hidden;
 
             flex-grow: 1;
 
             flex-grow: 1;
 
         }
 
         }
 
-        
+
 
         .read-more-btn {
 
         .read-more-btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
@@ -108,18 +110,18 @@
 
             text-align: center;
 
             text-align: center;
 
             width: fit-content;
 
             width: fit-content;
 
         }
 
         }
 
-        
+
 
         .read-more-btn:hover {
 
         .read-more-btn:hover {
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
         }
 
         }
 
-        
+
 
         .pagination {
 
         .pagination {
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
             align-items: center;
 
             align-items: center;
 
             margin: 40px 0;
 
             margin: 40px 0;
 
         }
 
         }
 
-        
+
 
         .pagination-item {
 
         .pagination-item {
 
             width: 35px;
 
             width: 35px;
 
             height: 35px;
 
             height: 35px;
 
@@ -132,16 +134,16 @@
 
             color: var(--text-color);
 
             color: var(--text-color);
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .pagination-item.active {
 
         .pagination-item.active {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         .pagination-item:hover:not(.active) {
 
         .pagination-item:hover:not(.active) {
 
             background-color: #f0f0f0;
 
             background-color: #f0f0f0;
 
         }
 
         }
 
-        
+
 
         /* FAQ链接区域样式 */
 
         /* FAQ链接区域样式 */
 
         .faq-link-section {
 
         .faq-link-section {
 
             background-color: var(--secondary-color);
 
             background-color: var(--secondary-color);
 
@@ -151,18 +153,18 @@
 
             text-align: center;
 
             text-align: center;
 
             margin: 60px 0;
 
             margin: 60px 0;
 
         }
 
         }
 
-        
+
 
         .faq-link-section h3 {
 
         .faq-link-section h3 {
 
             font-size: 1.5rem;
 
             font-size: 1.5rem;
 
             margin-bottom: 15px;
 
             margin-bottom: 15px;
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         .faq-link-section p {
 
         .faq-link-section p {
 
             margin-bottom: 20px;
 
             margin-bottom: 20px;
 
             color: white;
 
             color: white;
 
         }
 
         }
 
-        
+
 
         .faq-link-btn {
 
         .faq-link-btn {
 
             display: inline-block;
 
             display: inline-block;
 
             background-color: white;
 
             background-color: white;
 
@@ -173,167 +175,193 @@
 
             text-decoration: none;
 
             text-decoration: none;
 
             transition: all 0.3s ease;
 
             transition: all 0.3s ease;
 
         }
 
         }
 
-        
+
 
         .faq-link-btn:hover {
 
         .faq-link-btn:hover {
 
             background-color: var(--accent-color);
 
             background-color: var(--accent-color);
 
             color: white;
 
             color: white;
 
         }
 
         }
 
 
 
-        
+
 
         @media (max-width: 768px) {
 
         @media (max-width: 768px) {
 
             .page-title {
 
             .page-title {
 
                 font-size: 1.8rem;
 
                 font-size: 1.8rem;
 
             }
 
             }
 
-            
+
 
             .blog-grid {
 
             .blog-grid {
 
                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
                 gap: 20px;
 
                 gap: 20px;
 
             }
 
             }
 
-            
+
 
             .blog-image {
 
             .blog-image {
 
                 height: 180px;
 
                 height: 180px;
 
             }
 
             }
 
-            
+
 
             .blog-info {
 
             .blog-info {
 
                 padding: 15px;
 
                 padding: 15px;
 
             }
 
             }
 
-            
+
 
             .blog-title {
 
             .blog-title {
 
                 font-size: 1.2rem;
 
                 font-size: 1.2rem;
 
             }
 
             }
 
+
 
             .faq-link-section h3 {
 
             .faq-link-section h3 {
 
                 font-size: 1.3rem;
 
                 font-size: 1.3rem;
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
 
 
-<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop' async='async'></script>
 
+    <script type='text/javascript'
 
+        src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
 
+        async='async'></script>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <%- include('header') %>
 
     <%- include('header') %>
 
-    
-    <div class="container">
 
-        <div class="breadcrumb">
 
-            <a href="/">Home</a> &gt; Tips & Tricks
 
-        </div>
 
-        
-        <h1 class="page-title">Coloring Tips & Tricks</h1>
 
-        <p class="page-description">Explore our collection of expert advice, creative techniques, and inspiration for making the most of your coloring experience.</p>
 
-        
-        <div class="blog-grid">
 
-            <a href="/tips-tricks/how-to-color-online" class="blog-card">
 
-                <div class="blog-image">
 
-                    <img src="/assets/tips-tricks/how-to-color-online.webp" alt="Color Online">
 
-                </div>
 
-                <div class="blog-info">
 
-                    <div class="blog-meta">July 3, 2025 • Coloring Tips & Tricks</div>
 
-                    <h3 class="blog-title">How to Color Online</h3>
 
-                    <p class="blog-desc">Learn how to color online with our digital coloring platform. Follow numbered guides to create stunning artwork with ease. Save, share, and download your masterpieces.</p>
 
-                    <button class="read-more-btn">Read More</button>
 
-                </div>
 
-            </a>
 
-
 
-            <a href="/tips-tricks/how-to-color-mandala-coloring-page" class="blog-card">
 
-                <div class="blog-image">
 
-                    <img src="/assets/tips-tricks/how-to-color-mandala.webp" alt="How to Display Your Coloring Masterpieces">
 
-                </div>
 
-                <div class="blog-info">
 
-                    <div class="blog-meta">June 29, 2025 • Coloring Tips & Tricks</div>
 
-                    <h3 class="blog-title">How to Color Mandala Coloring Pages</h3>
 
-                    <p class="blog-desc">Mandala coloring pages are more than just a creative outlet—they're a journey into mindfulness and self-expression. These intricate, symmetrical designs have captivated artists and enthusiasts for centuries, offering a therapeutic escape and a chance to create stunning works of art. In this guide, we'll explore the art of coloring mandalas, from choosing the right tools to advanced techniques that will transform your coloring experience.</p>
 
-                    <button class="read-more-btn">Read More</button>
 
-                </div>
 
-            </a>
 
-
 
-            <a href="/tips-tricks/benefit-of-coloring-pages" class="blog-card">
 
-                <div class="blog-image">
 
-                    <img src="/assets/tips-tricks/benefit-of-coloring-pages-600x400.webp" alt="The Therapeutic Benefits of Coloring Pages">
 
-                </div>
 
-                <div class="blog-info">
 
-                    <div class="blog-meta">June 26, 2025 • Coloring Tips & Tricks</div>
 
-                    <h3 class="blog-title">The Therapeutic Benefits of Coloring Pages</h3>
 
-                    <p class="blog-desc">Discover how coloring can reduce stress, improve focus, and enhance creativity for people of all ages. Learn why this simple activity has become a popular form of mindfulness...</p>
 
-                    <button class="read-more-btn">Read More</button>
 
-                </div>
 
-            </a>
 
-            
-            <a href="/tips-tricks/choose-the-right-coloring-tools" class="blog-card">
 
-                <div class="blog-image">
 
-                    <img src="/assets/tips-tricks/choose-the-right-coloring-tools.webp" alt="Choosing the Right Coloring Tools">
 
-                </div>
 
-                <div class="blog-info">
 
-                    <div class="blog-meta">June 15, 2025 • Coloring Tips & Tricks</div>
 
-                    <h3 class="blog-title">Choosing the Right Coloring Tools</h3>
 
-                    <p class="blog-desc">Not all coloring tools are created equal. Learn about the different types of colored pencils, markers, and crayons available, and how to choose the best ones for your coloring style...</p>
 
-                    <button class="read-more-btn">Read More</button>
 
-                </div>
 
-            </a>
 
-            
-            <a href="/tips-tricks/color-combinations-guide" class="blog-card">
 
-                <div class="blog-image">
 
-                    <img src="/assets/tips-tricks/color-combinations-guide.webp" alt="Color Combinations That Work">
 
-                </div>
 
-                <div class="blog-info">
 
-                    <div class="blog-meta">June 5, 2025 • Coloring Tips & Tricks</div>
 
-                    <h3 class="blog-title">Color Combinations That Work</h3>
 
-                    <p class="blog-desc">Transform your coloring pages with these expert-approved color combinations. Whether you prefer bold and vibrant or soft and subtle, these tips will help you create stunning artwork...</p>
 
-                    <button class="read-more-btn">Read More</button>
 
-                </div>
 
-            </a>
 
-            
-            <a href="/tips-tricks/coloring-techniques-for-beginners" class="blog-card">
 
-                <div class="blog-image">
 
-                    <img src="/assets/tips-tricks/coloring-techniques-for-beginnersl.webp" alt="Coloring Techniques for Beginners">
 
-                </div>
 
-                <div class="blog-info">
 
-                    <div class="blog-meta">May 28, 2025 • Coloring Tips & Tricks</div>
 
-                    <h3 class="blog-title">Coloring Techniques for Beginners</h3>
 
-                    <p class="blog-desc">Master the basics with these essential coloring techniques. From blending and shading to layering and texture, these easy-to-follow tips will take your coloring skills to the next level...</p>
 
-                    <button class="read-more-btn">Read More</button>
 
-                </div>
 
-            </a>
 
 
 
-        </div>
 
+        <div class="container">
 
+            <div class="breadcrumb">
 
+                <a href="/">Home</a> &gt; Tips & Tricks
 
+            </div>
 
+
 
+            <h1 class="page-title">Coloring Tips & Tricks</h1>
 
+            <p class="page-description">Explore our collection of expert advice, creative techniques, and inspiration
 
+                for making the most of your coloring experience.</p>
 
+
 
+            <div class="blog-grid">
 
+                <a href="/tips-tricks/how-to-color-online" class="blog-card">
 
+                    <div class="blog-image">
 
+                        <img src="/assets/tips-tricks/how-to-color-online.webp" alt="Color Online">
 
+                    </div>
 
+                    <div class="blog-info">
 
+                        <div class="blog-meta">July 3, 2025 • Coloring Tips & Tricks</div>
 
+                        <h3 class="blog-title">How to Color Online</h3>
 
+                        <p class="blog-desc">Learn how to color online with our digital coloring platform. Follow
 
+                            numbered guides to create stunning artwork with ease. Save, share, and download your
 
+                            masterpieces.</p>
 
+                        <button class="read-more-btn">Read More</button>
 
+                    </div>
 
+                </a>
 
+
 
+                <a href="/tips-tricks/how-to-color-mandala-coloring-page" class="blog-card">
 
+                    <div class="blog-image">
 
+                        <img src="/assets/tips-tricks/how-to-color-mandala.webp"
 
+                            alt="How to Display Your Coloring Masterpieces">
 
+                    </div>
 
+                    <div class="blog-info">
 
+                        <div class="blog-meta">June 29, 2025 • Coloring Tips & Tricks</div>
 
+                        <h3 class="blog-title">How to Color Mandala Coloring Pages</h3>
 
+                        <p class="blog-desc">Mandala coloring pages are more than just a creative outlet—they're a
 
+                            journey into mindfulness and self-expression. These intricate, symmetrical designs have
 
+                            captivated artists and enthusiasts for centuries, offering a therapeutic escape and a chance
 
+                            to create stunning works of art. In this guide, we'll explore the art of coloring mandalas,
 
+                            from choosing the right tools to advanced techniques that will transform your coloring
 
+                            experience.</p>
 
+                        <button class="read-more-btn">Read More</button>
 
+                    </div>
 
+                </a>
 
+
 
+                <a href="/tips-tricks/benefit-of-coloring-pages" class="blog-card">
 
+                    <div class="blog-image">
 
+                        <img src="/assets/tips-tricks/benefit-of-coloring-pages-600x400.webp"
 
+                            alt="The Therapeutic Benefits of Coloring Pages">
 
+                    </div>
 
+                    <div class="blog-info">
 
+                        <div class="blog-meta">June 26, 2025 • Coloring Tips & Tricks</div>
 
+                        <h3 class="blog-title">The Therapeutic Benefits of Coloring Pages</h3>
 
+                        <p class="blog-desc">Discover how coloring can reduce stress, improve focus, and enhance
 
+                            creativity for people of all ages. Learn why this simple activity has become a popular form
 
+                            of mindfulness...</p>
 
+                        <button class="read-more-btn">Read More</button>
 
+                    </div>
 
+                </a>
 
+
 
+                <a href="/tips-tricks/choose-the-right-coloring-tools" class="blog-card">
 
+                    <div class="blog-image">
 
+                        <img src="/assets/tips-tricks/choose-the-right-coloring-tools.webp"
 
+                            alt="Choosing the Right Coloring Tools">
 
+                    </div>
 
+                    <div class="blog-info">
 
+                        <div class="blog-meta">June 15, 2025 • Coloring Tips & Tricks</div>
 
+                        <h3 class="blog-title">Choosing the Right Coloring Tools</h3>
 
+                        <p class="blog-desc">Not all coloring tools are created equal. Learn about the different types
 
+                            of colored pencils, markers, and crayons available, and how to choose the best ones for your
 
+                            coloring style...</p>
 
+                        <button class="read-more-btn">Read More</button>
 
+                    </div>
 
+                </a>
 
+
 
+                <a href="/tips-tricks/color-combinations-guide" class="blog-card">
 
+                    <div class="blog-image">
 
+                        <img src="/assets/tips-tricks/color-combinations-guide.webp" alt="Color Combinations That Work">
 
+                    </div>
 
+                    <div class="blog-info">
 
+                        <div class="blog-meta">June 5, 2025 • Coloring Tips & Tricks</div>
 
+                        <h3 class="blog-title">Color Combinations That Work</h3>
 
+                        <p class="blog-desc">Transform your coloring pages with these expert-approved color
 
+                            combinations. Whether you prefer bold and vibrant or soft and subtle, these tips will help
 
+                            you create stunning artwork...</p>
 
+                        <button class="read-more-btn">Read More</button>
 
+                    </div>
 
+                </a>
 
+
 
+                <a href="/tips-tricks/coloring-techniques-for-beginners" class="blog-card">
 
+                    <div class="blog-image">
 
+                        <img src="/assets/tips-tricks/coloring-techniques-for-beginnersl.webp"
 
+                            alt="Coloring Techniques for Beginners">
 
+                    </div>
 
+                    <div class="blog-info">
 
+                        <div class="blog-meta">May 28, 2025 • Coloring Tips & Tricks</div>
 
+                        <h3 class="blog-title">Coloring Techniques for Beginners</h3>
 
+                        <p class="blog-desc">Master the basics with these essential coloring techniques. From blending
 
+                            and shading to layering and texture, these easy-to-follow tips will take your coloring
 
+                            skills to the next level...</p>
 
+                        <button class="read-more-btn">Read More</button>
 
+                    </div>
 
+                </a>
 
+
 
+            </div>
 
+
 
+            <!-- FAQ链接区域 -->
 
+            <div class="faq-link-section">
 
+                <h3>Can't find what you're looking for?</h3>
 
+                <p>Check out our Frequently Asked Questions for answers to common questions about our coloring pages,
 
+                    tools, and techniques.</p>
 
+                <a href="/faq" class="faq-link-btn">Visit FAQ Page</a>
 
+            </div>
 
 
 
-        <!-- FAQ链接区域 -->
 
-        <div class="faq-link-section">
 
-            <h3>Can't find what you're looking for?</h3>
 
-            <p>Check out our Frequently Asked Questions for answers to common questions about our coloring pages, tools, and techniques.</p>
 
-            <a href="/faq" class="faq-link-btn">Visit FAQ Page</a>
 
         </div>
 
         </div>
 
 
 
-    </div>
 
-    
-    <%- include('footer') %>
 
-
 
-    <script src="/scripts/script.js"></script>
 
-    <script>
 
-        // 博客卡片点击事件增强
 
-        const blogCards = document.querySelectorAll('.blog-card');
 
-        blogCards.forEach(card => {
 
-            card.addEventListener('click', (e) => {
 
-                // 阻止按钮点击冒泡到卡片链接
 
-                if (e.target.closest('.read-more-btn')) {
 
-                    return;
 
-                }
 
-                // 卡片本身是链接，无需额外处理
 
-            });
 
-        });
 
+        <%- include('footer') %>
 
+
 
+            <script src="/scripts/script.js"></script>
 
+            <script>
 
+                // 博客卡片点击事件增强
 
+                const blogCards = document.querySelectorAll('.blog-card');
 
+                blogCards.forEach(card => {
 
+                    card.addEventListener('click', (e) => {
 
+                        // 阻止按钮点击冒泡到卡片链接
 
+                        if (e.target.closest('.read-more-btn')) {
 
+                            return;
 
+                        }
 
+                        // 卡片本身是链接，无需额外处理
 
+                    });
 
+                });
 
                 // FAQ 折叠功能
 
                 // FAQ 折叠功能
 
-        const faqQuestions = document.querySelectorAll('.faq-question');
 
-        faqQuestions.forEach(question => {
 
-            question.addEventListener('click', () => {
 
-                const faqItem = question.parentElement;
 
-                faqItem.classList.toggle('active');
 
-                
-                // 关闭其他打开的FAQ项
 
-                document.querySelectorAll('.faq-item.active').forEach(item => {
 
-                    if (item !== faqItem) {
 
-                        item.classList.remove('active');
 
-                    }
 
+                const faqQuestions = document.querySelectorAll('.faq-question');
 
+                faqQuestions.forEach(question => {
 
+                    question.addEventListener('click', () => {
 
+                        const faqItem = question.parentElement;
 
+                        faqItem.classList.toggle('active');
 
+
 
+                        // 关闭其他打开的FAQ项
 
+                        document.querySelectorAll('.faq-item.active').forEach(item => {
 
+                            if (item !== faqItem) {
 
+                                item.classList.remove('active');
 
+                            }
 
+                        });
 
+                    });
 
                 });
 
                 });
 
-            });
 
-        });
 
-    </script>
 
+            </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 3 - 3
views/v2/video-coloring-page.ejs
Vedi File 

@@ -22,12 +22,12 @@
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <!-- **Universal Link 路径** -->
 
   <!-- **Universal Link 路径** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
 
-  <meta property="al:ios:app_name" content="Art Number Coloring Book" /> <!-- **iOS 应用名称** -->
 
+  <meta property="al:ios:app_name" content="Art Color Book" /> <!-- **iOS 应用名称** -->
 
 
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <!-- ** Universal Link 路径** -->
 
   <!-- ** Universal Link 路径** -->
 
-  <meta property="al:android:app_name" content="Art Number Coloring Book" /> <!-- **Android 应用名称** -->
 
+  <meta property="al:android:app_name" content="Art Color Book" /> <!-- **Android 应用名称** -->
 
 
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
 
 
@@ -281,7 +281,7 @@
 
         <h1>
 
         <h1>
 
           <%= title%>
 
           <%= title%>
 
         </h1>
 
         </h1>
 
-        <h4 style="margin-bottom: 40px;">By Art Number Coloring / <%=data.timeCreate%>
 
+        <h4 style="margin-bottom: 40px;">By Art Color / <%=data.timeCreate%>
 
         </h4>
 
         </h4>

+ 196 - 159
views/v2/video-coloring-pages.ejs
Vedi File 

@@ -4,20 +4,21 @@
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <meta name="description" content="Watch fascinating videos and turn them into beautiful coloring pages. Each video captures moments that our artists transform into detailed coloring designs.">
 
+  <meta name="description"
 
+    content="Watch fascinating videos and turn them into beautiful coloring pages. Each video captures moments that our artists transform into detailed coloring designs.">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
-  <title>Video Story Coloring Pages - Art Number Coloring</title>
 
+  <title>Video Story Coloring Pages - Art Color</title>
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <link rel="stylesheet" href="/stylesheets/v2/styles.css">
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
-        --online-color: #7b68ee;
 
-        /* 在线填色功能专属色 */
 
+      --online-color: #7b68ee;
 
+      /* 在线填色功能专属色 */
 
     }
 
     }
 
 
 
     h3 {
 
     h3 {
 
       color: var(--text-color);
 
       color: var(--text-color);
 
     }
 
     }
 
-    
+
 
     ul {
 
     ul {
 
       padding: 20px;
 
       padding: 20px;
 
     }
 
     }
 
@@ -99,7 +100,8 @@
 
       border-radius: 8px;
 
       border-radius: 8px;
 
       overflow: hidden;
 
       overflow: hidden;
 
       cursor: pointer;
 
       cursor: pointer;
 
-      aspect-ratio: 1/1; /* 修改为1:1比例 */
 
+      aspect-ratio: 1/1;
 
+      /* 修改为1:1比例 */
 
     }
 
     }
 
 
 
     .video-player video {
 
     .video-player video {
 
@@ -144,15 +146,18 @@
 
       position: relative;
 
       position: relative;
 
       border-radius: 8px;
 
       border-radius: 8px;
 
       overflow: hidden;
 
       overflow: hidden;
 
-      aspect-ratio: 1/1; /* 修改为1:1比例 */
 
+      aspect-ratio: 1/1;
 
+      /* 修改为1:1比例 */
 
       background-color: #f5f5f5;
 
       background-color: #f5f5f5;
 
     }
 
     }
 
 
 
     .lineart-container img {
 
     .lineart-container img {
 
       width: 100%;
 
       width: 100%;
 
       height: 100%;
 
       height: 100%;
 
-      object-fit: contain; /* 使用contain保持图像比例 */
 
-      padding: 15px; /* 添加内边距，使图像不贴边 */
 
+      object-fit: contain;
 
+      /* 使用contain保持图像比例 */
 
+      padding: 15px;
 
+      /* 添加内边距，使图像不贴边 */
 
     }
 
     }
 
 
 
     /* 线稿图悬停效果 */
 
     /* 线稿图悬停效果 */
 
@@ -169,24 +174,25 @@
 
     }
 
     }
 
 
 
     .lineart-container:hover .lineart-overlay {
 
     .lineart-container:hover .lineart-overlay {
 
-        opacity: 1;
 
+      opacity: 1;
 
     }
 
     }
 
 
 
     .lineart-title {
 
     .lineart-title {
 
-        font-weight: 600;
 
-        margin-bottom: 5px;
 
+      font-weight: 600;
 
+      margin-bottom: 5px;
 
     }
 
     }
 
 
 
     .lineart-desc {
 
     .lineart-desc {
 
-        font-size: 0.9rem;
 
-        opacity: 0.9;
 
+      font-size: 0.9rem;
 
+      opacity: 0.9;
 
     }
 
     }
 
 
 
 
 
 
 
     .video-play-icon {
 
     .video-play-icon {
 
       width: 20px !important;
 
       width: 20px !important;
 
-      height: 20px !important;;
 
+      height: 20px !important;
 
+      ;
 
       position: absolute;
 
       position: absolute;
 
       top: 10px;
 
       top: 10px;
 
       right: 10px;
 
       right: 10px;
 
@@ -194,7 +200,8 @@
 
 
 
     /*弹出框样式*/
 
     /*弹出框样式*/
 
     .popup {
 
     .popup {
 
-      display: none; /* 默认隐藏 */
 
+      display: none;
 
+      /* 默认隐藏 */
 
       position: fixed;
 
       position: fixed;
 
       z-index: 11000;
 
       z-index: 11000;
 
       left: 0;
 
       left: 0;
 
@@ -236,7 +243,8 @@
 
       max-height: 90vh;
 
       max-height: 90vh;
 
       aspect-ratio: 9/16;
 
       aspect-ratio: 9/16;
 
       overflow: auto;
 
       overflow: auto;
 
-      border-top-right-radius: 8px;     /* 卡片圆角 */
 
+      border-top-right-radius: 8px;
 
+      /* 卡片圆角 */
 
       border-bottom-right-radius: 8px;
 
       border-bottom-right-radius: 8px;
 
     }
 
     }
 
 
 
@@ -272,10 +280,12 @@
 
         margin: 0 auto;
 
         margin: 0 auto;
 
         aspect-ratio: null;
 
         aspect-ratio: null;
 
       }
 
       }
 
+
 
       .popup-content-left {
 
       .popup-content-left {
 
         width: 100%;
 
         width: 100%;
 
         height: 80vh;
 
         height: 80vh;
 
       }
 
       }
 
+
 
       .popup-content-right {
 
       .popup-content-right {
 
         width: 100%;
 
         width: 100%;
 
         max-width: 100%;
 
         max-width: 100%;
 
@@ -413,8 +423,8 @@
 
       }
 
       }
 
     }
 
     }
 
   </style>
 
   </style>
 
-  
-<script type="application/ld+json">
 
+
 
+  <script type="application/ld+json">
 
 {
 
 {
 
   "@context": "https://schema.org",
 
   "@context": "https://schema.org",
 
   "@type": "VideoObject",
 
   "@type": "VideoObject",
 
@@ -439,7 +449,9 @@
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
-<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop' async='async'></script>
 
+  <script type='text/javascript'
 
+    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
 
+    async='async'></script>
 
 </head>
 
 </head>
 
 
 
 <!-- Google tag (gtag.js) -->
 
 <!-- Google tag (gtag.js) -->
 
@@ -455,39 +467,53 @@
 
 <body>
 
 <body>
 
   <%- include('header') %>
 
   <%- include('header') %>
 
 
 
-  <div class="container">
 
-    <div class="breadcrumb">
 
+    <div class="container">
 
+      <div class="breadcrumb">
 
         <a href="/">Home</a> &gt; <a href="/coloring-pages">Coloring Pages</a> &gt; Video Coloring Pages
 
         <a href="/">Home</a> &gt; <a href="/coloring-pages">Coloring Pages</a> &gt; Video Coloring Pages
 
-    </div>
 
+      </div>
 
 
 
-    <h1 class="page-title">Video Story Coloring Pages: Transform vibrant video moments into one-of-a-kind coloring fun</h1>
 
-
 
-    <div class="blog-content">
 
-      <img src="/assets/coloring-pages/video-coloring-pages.webp" alt="Video Story Coloring Pages" class="blog-image">
 
-      <p>Get ready for a coloring adventure that's truly one-of-a-kind! Here at Art Number Coloring, we're excited to unveil our exclusive collection of Video Story Coloring Pages. Our talented designers take delightful and engaging snippets from everyday life, capturing those special, fun moments in short videos – and then transform them into unique coloring page masterpieces!</p>
 
-      <p>Witness the inspiration behind your next coloring project! See the playful antics, the charming scenes, the little moments of joy that sparked these original designs. It's a fresh and exciting way to connect with the art and bring these lively stories to life with your own colors. Explore our growing collection of <strong>Video Story Coloring Pages</strong> and discover the magic of coloring inspired by real-life fun! You won't find anything else like it!</p>
 
-    
-      <div class="content-container">
 
-        <!-- 左侧视频播放器 -->
 
-        <div class="video-player" id="storyVideo">
 
-          <video poster="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/vs-poster/320/67b2b23b9c09d12e648ea25a.webp" controls>
 
-            <source src="https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8" type="application/x-mpegURL">
 
-            Your browser does not support the video tag.
 
-          </video>
 
-          <div class="play-button"></div>
 
-        </div>
 
-        
-        <!-- 右侧线稿图 -->
 
-        <div class="lineart-container">
 
-          <a href="/coloring-page/676be5cb86bb4d3392aac198"><img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/640/676be5cb86bb4d3392aac198.webp" alt="Coloring Line Art"></a>
 
-          <div class="lineart-overlay">
 
+      <h1 class="page-title">Video Story Coloring Pages: Transform vibrant video moments into one-of-a-kind coloring fun
 
+      </h1>
 
+
 
+      <div class="blog-content">
 
+        <img src="/assets/coloring-pages/video-coloring-pages.webp" alt="Video Story Coloring Pages" class="blog-image">
 
+        <p>Get ready for a coloring adventure that's truly one-of-a-kind! Here at Art Color, we're excited to unveil our
 
+          exclusive collection of Video Story Coloring Pages. Our talented designers take delightful and engaging
 
+          snippets from everyday life, capturing those special, fun moments in short videos – and then transform them
 
+          into unique coloring page masterpieces!</p>
 
+        <p>Witness the inspiration behind your next coloring project! See the playful antics, the charming scenes, the
 
+          little moments of joy that sparked these original designs. It's a fresh and exciting way to connect with the
 
+          art and bring these lively stories to life with your own colors. Explore our growing collection of
 
+          <strong>Video Story Coloring Pages</strong> and discover the magic of coloring inspired by real-life fun! You
 
+          won't find anything else like it!</p>
 
+
 
+        <div class="content-container">
 
+          <!-- 左侧视频播放器 -->
 
+          <div class="video-player" id="storyVideo">
 
+            <video
 
+              poster="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/vs-poster/320/67b2b23b9c09d12e648ea25a.webp"
 
+              controls>
 
+              <source
 
+                src="https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8"
 
+                type="application/x-mpegURL">
 
+              Your browser does not support the video tag.
 
+            </video>
 
+            <div class="play-button"></div>
 
+          </div>
 
+
 
+          <!-- 右侧线稿图 -->
 
+          <div class="lineart-container">
 
+            <a href="/coloring-page/676be5cb86bb4d3392aac198"><img
 
+                src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/640/676be5cb86bb4d3392aac198.webp"
 
+                alt="Coloring Line Art"></a>
 
+            <div class="lineart-overlay">
 
               <div class="lineart-title">Dog Riding an Electric Scooter</div>
 
               <div class="lineart-title">Dog Riding an Electric Scooter</div>
 
               <div class="lineart-desc">Click to download or color online along with the video</div>
 
               <div class="lineart-desc">Click to download or color online along with the video</div>
 
+            </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-      </div>
 
 
 
-    </div>
 
+      </div>
 
 
 
       <section>
 
       <section>
 
         <h2>Video Stories</h2>
 
         <h2>Video Stories</h2>
 
@@ -497,7 +523,8 @@
 
               <div data-content-id="<%= item._id %>" class="coloring-image">
 
               <div data-content-id="<%= item._id %>" class="coloring-image">
 
                 <a href="javascript:;" onclick="onPlay(`<%= item.url %>`, `<%= item.jsonStr %>`)">
 
                 <a href="javascript:;" onclick="onPlay(`<%= item.url %>`, `<%= item.jsonStr %>`)">
 
                   <img src="<%= item.poster %>" alt="<%= item.seoTitle %>">
 
                   <img src="<%= item.poster %>" alt="<%= item.seoTitle %>">
 
-                  <img src="/assets/svg/play-button.svg" , class="video-play-icon" width="20px" height="20px" alt="Coloring Page Video Play Button">
 
+                  <img src="/assets/svg/play-button.svg" , class="video-play-icon" width="20px" height="20px"
 
+                    alt="Coloring Page Video Play Button">
 
                 </a>
 
                 </a>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
@@ -507,13 +534,22 @@
 
 
 
       <section>
 
       <section>
 
         <h2>The Heart Behind Our Video Stories: Capturing and Sharing Joy 💖</h2>
 
         <h2>The Heart Behind Our Video Stories: Capturing and Sharing Joy 💖</h2>
 
-        <p>At Art Number Coloring, our <strong>Video Story Coloring Pages</strong> are born from a simple, yet profound idea: to <strong>discover and preserve the beautiful, fleeting moments of everyday life</strong>. 
-          We believe that true art lies not only in grand masterpieces but also in the small, heartwarming scenes that unfold around us daily. Our artists lovingly select these captivating video snippets, 
-          whether it's a playful pet, a stunning natural phenomenon, or a charming human interaction, and meticulously transform them into unique, colorable line art. It's our way of helping you pause, appreciate, and bring those wonderful moments to life with your own creative touch.<p>
 
+        <p>At Art Color, our <strong>Video Story Coloring Pages</strong> are born from a simple, yet profound idea: to
 
+          <strong>discover and preserve the beautiful, fleeting moments of everyday life</strong>.
 
+          We believe that true art lies not only in grand masterpieces but also in the small, heartwarming scenes that
 
+          unfold around us daily. Our artists lovingly select these captivating video snippets,
 
+          whether it's a playful pet, a stunning natural phenomenon, or a charming human interaction, and meticulously
 
+          transform them into unique, colorable line art. It's our way of helping you pause, appreciate, and bring those
 
+          wonderful moments to life with your own creative touch.
 
+        <p>
 
 
 
         <h2>Share Your Spark! Got a Video Idea? 💡</h2>
 
         <h2>Share Your Spark! Got a Video Idea? 💡</h2>
 
-        <p>Have you recently watched a captivating video on YouTube, TikTok, or any other social media platform that made you smile, wonder, or simply feel good? Do you think it would make an amazing coloring page? We'd love to see it!</p>
 
-        <p>We invite you to share your favorite video clips with us. Our designers are always looking for new inspiration, and your suggestion might just be the next featured Video Story Coloring Page for our community!</p>
 
+        <p>Have you recently watched a captivating video on YouTube, TikTok, or any other social media platform that
 
+          made you smile, wonder, or simply feel good? Do you think it would make an amazing coloring page? We'd love to
 
+          see it!</p>
 
+        <p>We invite you to share your favorite video clips with us. Our designers are always looking for new
 
+          inspiration, and your suggestion might just be the next featured Video Story Coloring Page for our community!
 
+        </p>
 
         <p><strong><a href="/contact">Contact us here to share your video ideas!</a></strong></p>
 
         <p><strong><a href="/contact">Contact us here to share your video ideas!</a></strong></p>
 
       </section>
 
       </section>
 
 
 
@@ -521,7 +557,8 @@
 
       <section>
 
       <section>
 
         <h2>More Free Coloring Fun</h2>
 
         <h2>More Free Coloring Fun</h2>
 
         <p>
 
         <p>
 
-          We hope these video story coloring pages bring you aesthetic joy! If you want more free coloring pages, feel free to browse the collections below.
 
+          We hope these video story coloring pages bring you aesthetic joy! If you want more free coloring pages, feel
 
+          free to browse the collections below.
 
         </p>
 
         </p>
 
         <ul>
 
         <ul>
 
           <li><a href="/mandala-coloring-pages">Mandala Coloring Pages</a></li>
 
           <li><a href="/mandala-coloring-pages">Mandala Coloring Pages</a></li>
 
@@ -537,7 +574,7 @@
 
 
 
       <%- include('comment') %>
 
       <%- include('comment') %>
 
 
 
-  </div>
 
+    </div>
 
 
 
 
 
     <!-- 弹出层 -->
 
     <!-- 弹出层 -->
 
@@ -553,113 +590,113 @@
 
     </div>
 
     </div>
 
 
 
 
 
-  <%- include('footer') %>
 
-  <script src="/scripts/script.js"></script>
 
-  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 
-  <script>
 
-      const storyVideo = document.getElementById('storyVideo');
 
-      const video = storyVideo.querySelector('video');
 
-      const playButton = storyVideo.querySelector('.play-button');
 
-      // 视频播放控制
 
-      if (Hls.isSupported()) {
 
-        var hls = new Hls();
 
-        var url = 'https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8';
 
-        hls.loadSource(url);
 
-        hls.attachMedia(video);
 
-      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
 
-        // Safari 不支持 hls.js 但原生支持 HLS
 
-        video.src = 'https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8';
 
-      } else {
 
-        // 浏览器不支持 HLS
 
-        console.error('Your browser does not support HLS.');
 
-      }
 
-      
-      playButton.addEventListener('click', () => {
 
+    <%- include('footer') %>
 
+      <script src="/scripts/script.js"></script>
 
+      <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 
+      <script>
 
+        const storyVideo = document.getElementById('storyVideo');
 
+        const video = storyVideo.querySelector('video');
 
+        const playButton = storyVideo.querySelector('.play-button');
 
+        // 视频播放控制
 
+        if (Hls.isSupported()) {
 
+          var hls = new Hls();
 
+          var url = 'https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8';
 
+          hls.loadSource(url);
 
+          hls.attachMedia(video);
 
+        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
 
+          // Safari 不支持 hls.js 但原生支持 HLS
 
+          video.src = 'https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8';
 
+        } else {
 
+          // 浏览器不支持 HLS
 
+          console.error('Your browser does not support HLS.');
 
+        }
 
+
 
+        playButton.addEventListener('click', () => {
 
           video.play();
 
           video.play();
 
           playButton.style.display = 'none';
 
           playButton.style.display = 'none';
 
-      });
 
-
 
-      // 视频播放时隐藏play button
 
-      video.addEventListener('play', () => {
 
-        playButton.style.display = 'none';
 
-      });
 
-
 
-      // 视频暂停时显示播放按钮
 
-      video.addEventListener('pause', () => {
 
-        playButton.style.display = 'flex';
 
-      });
 
-      
-      // 视频结束时显示播放按钮
 
-      video.addEventListener('ended', () => {
 
-        playButton.style.display = 'flex';
 
-      });
 
-      
-  </script>
 
-
 
-  <script>
 
-
 
-  function onPlay(url, videoJson) {
 
-    // alert(url);
 
-    // return;
 
-    console.log(url);
 
-    console.log(videoJson);
 
-
 
-    var video = JSON.parse(`${videoJson}`);
 
-    generateVideoContent(video);
 
-
 
-    var videoPopup = document.getElementById('video-popup');
 
-    var videoPlayer = document.getElementById('video-player');
 
-
 
-    videoPopup.style.display = 'block';
 
-
 
-    if (Hls.isSupported()) {
 
-      var hls = new Hls();
 
-      hls.loadSource(url);
 
-      hls.attachMedia(videoPlayer);
 
-      hls.on(Hls.Events.MANIFEST_PARSED, function () {
 
-        videoPlayer.play();
 
-      });
 
-    } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
 
-      videoPlayer.src = url;
 
-      videoPlayer.addEventListener('canplay', function () {
 
-        videoPlayer.play();
 
-      });
 
-    }
 
-
 
-    window.closeVideoPopup = function () {
 
-      videoPopup.style.display = 'none';
 
-      videoPlayer.pause(); // 停止视频播放
 
-      videoPlayer.src = ''; // 重置视频源，避免浏览器缓存问题
 
-    };
 
-
 
-    // 点击模态对话框外部时关闭对话框（可选，但推荐添加）
 
-    videoPopup.addEventListener('click', function (event) {
 
-      if (event.target === videoPopup) {
 
-        closeVideoPopup();
 
-      }
 
-    });
 
-
 
-    // 防止点击关闭按钮时事件冒泡到弹出层导致关闭（因为我们已经为关闭按钮单独绑定了事件）
 
-    var closeButton = document.querySelector('.close');
 
-    if (closeButton) {
 
-      closeButton.addEventListener('click', function (event) {
 
-        event.stopPropagation();
 
-      });
 
-    }
 
-  }
 
+        });
 
 
 
-  function generateVideoContent(video) {
 
-    var div = document.getElementById('video-content');
 
-
 
-    div.innerHTML = `
 
+        // 视频播放时隐藏play button
 
+        video.addEventListener('play', () => {
 
+          playButton.style.display = 'none';
 
+        });
 
+
 
+        // 视频暂停时显示播放按钮
 
+        video.addEventListener('pause', () => {
 
+          playButton.style.display = 'flex';
 
+        });
 
+
 
+        // 视频结束时显示播放按钮
 
+        video.addEventListener('ended', () => {
 
+          playButton.style.display = 'flex';
 
+        });
 
+
 
+      </script>
 
+
 
+      <script>
 
+
 
+        function onPlay(url, videoJson) {
 
+          // alert(url);
 
+          // return;
 
+          console.log(url);
 
+          console.log(videoJson);
 
+
 
+          var video = JSON.parse(`${videoJson}`);
 
+          generateVideoContent(video);
 
+
 
+          var videoPopup = document.getElementById('video-popup');
 
+          var videoPlayer = document.getElementById('video-player');
 
+
 
+          videoPopup.style.display = 'block';
 
+
 
+          if (Hls.isSupported()) {
 
+            var hls = new Hls();
 
+            hls.loadSource(url);
 
+            hls.attachMedia(videoPlayer);
 
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
 
+              videoPlayer.play();
 
+            });
 
+          } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
 
+            videoPlayer.src = url;
 
+            videoPlayer.addEventListener('canplay', function () {
 
+              videoPlayer.play();
 
+            });
 
+          }
 
+
 
+          window.closeVideoPopup = function () {
 
+            videoPopup.style.display = 'none';
 
+            videoPlayer.pause(); // 停止视频播放
 
+            videoPlayer.src = ''; // 重置视频源，避免浏览器缓存问题
 
+          };
 
+
 
+          // 点击模态对话框外部时关闭对话框（可选，但推荐添加）
 
+          videoPopup.addEventListener('click', function (event) {
 
+            if (event.target === videoPopup) {
 
+              closeVideoPopup();
 
+            }
 
+          });
 
+
 
+          // 防止点击关闭按钮时事件冒泡到弹出层导致关闭（因为我们已经为关闭按钮单独绑定了事件）
 
+          var closeButton = document.querySelector('.close');
 
+          if (closeButton) {
 
+            closeButton.addEventListener('click', function (event) {
 
+              event.stopPropagation();
 
+            });
 
+          }
 
+        }
 
+
 
+        function generateVideoContent(video) {
 
+          var div = document.getElementById('video-content');
 
+
 
+          div.innerHTML = `
 
       <h3>${video.seoTitle}</h3>
 
       <h3>${video.seoTitle}</h3>
 
     `;
 
     `;
 
 
 
-    var contentHTML = '<div>';
 
+          var contentHTML = '<div>';
 
 
 
 
 
-    video.contents.forEach(item => {
 
-      contentHTML += `
 
+          video.contents.forEach(item => {
 
+            contentHTML += `
 
         <div class="coloring-card">
 
         <div class="coloring-card">
 
           <div data-content-id="${item._id}" class="coloring-image">
 
           <div data-content-id="${item._id}" class="coloring-image">
 
             <a href=${item.uri}><img src=${item.thumb} alt='${item.title}'></a>
 
             <a href=${item.uri}><img src=${item.thumb} alt='${item.title}'></a>
 
@@ -669,16 +706,16 @@
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       `
 
       `
 
-    });
 
+          });
 
 
 
-    contentHTML += '</div>';
 
+          contentHTML += '</div>';
 
 
 
-    div.innerHTML += contentHTML;
 
+          div.innerHTML += contentHTML;
 
 
 
-  }
 
+        }
 
+
 
+      </script>
 
 
 
-</script>
 
-  
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>