From c3a9cd8d910e14416a565fbda88a4abaa5d87fc0 Mon Sep 17 00:00:00 2001
From: Bamboo Yang <celebrateyang@gmail.com>
Date: Sat, 23 Nov 2024 16:07:32 +0700
Subject: [PATCH] 1.add donate 2. trust google ad for adsense review

---
 web/i18n/en/donate.json                       |  2 +-
 web/i18n/th/donate.json                       |  2 +-
 web/i18n/zh/donate.json                       |  2 +-
 web/src/routes/+page.svelte                   | 85 ++++++++++++++-----
 web/src/routes/guide/+layout.svelte           |  0
 web/src/routes/guide/+page.svelte             |  0
 .../routes/guide/_sections/facebook.svelte    |  0
 web/src/routes/guide/_sections/formats.svelte |  0
 web/src/routes/guide/_sections/youtube.svelte |  0
 web/svelte.config.js                          |  4 +-
 10 files changed, 70 insertions(+), 25 deletions(-)
 create mode 100644 web/src/routes/guide/+layout.svelte
 create mode 100644 web/src/routes/guide/+page.svelte
 create mode 100644 web/src/routes/guide/_sections/facebook.svelte
 create mode 100644 web/src/routes/guide/_sections/formats.svelte
 create mode 100644 web/src/routes/guide/_sections/youtube.svelte

diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json
index 6907e4c4..01380b67 100644
--- a/web/i18n/en/donate.json
+++ b/web/i18n/en/donate.json
@@ -1,5 +1,5 @@
 {
-    "banner.title": "Support a safe\nand open Internet",
+    "banner.title": "This website is great, a little appreciation!",
     "banner.subtitle": "donate to imput or share the\njoy of cobalt with a friend",
 
     "body.motivation": "cobalt helps producers, educators, video makers, and many others to do what they love. it's a different kind of service that is made with love, not for profit.",
diff --git a/web/i18n/th/donate.json b/web/i18n/th/donate.json
index ee081306..a6571660 100644
--- a/web/i18n/th/donate.json
+++ b/web/i18n/th/donate.json
@@ -1,5 +1,5 @@
 {
-    "banner.title": "สนับสนุนอินเทอร์เน็ตที่ปลอดภัย\nและเปิดกว้าง",
+    "banner.title": "เว็บไซต์นี้ดีมาก ขอยกนิ้วให้!",
     "banner.subtitle": "บริจาคให้กับ imput หรือแบ่งปัน\nความสุขของ cobalt กับเพื่อนของคุณ",
 
     "body.motivation": "cobalt ช่วยผู้ผลิต นักการศึกษา นักทำวิดีโอ และอีกหลายๆ คนในการทำสิ่งที่พวกเขารัก นี่เป็นบริการประเภทที่แตกต่างซึ่งสร้างขึ้นด้วยความรัก ไม่ใช่เพื่อแสวงหากำไร",
diff --git a/web/i18n/zh/donate.json b/web/i18n/zh/donate.json
index d1b59f29..51340d36 100644
--- a/web/i18n/zh/donate.json
+++ b/web/i18n/zh/donate.json
@@ -1,5 +1,5 @@
 {
-    "banner.title": "支持一个安全\n且开放的互联网",
+    "banner.title": "这个网站很好，赞赏赞赏!",
     "banner.subtitle": "捐赠给 Imput 或与朋友分享\nCobalt 的乐趣",
     "body.motivation": "Cobalt 帮助制作人、教育者、视频创作者以及许多其他人做他们热爱的事情。这是一种不同的服务，充满了爱，而非为了盈利。",
     "body.no_bullshit": "我们相信互联网不必可怕，这就是为什么 Cobalt 永远不会有广告或其他恶意内容。这是我们坚守的承诺。我们所做的一切都以隐私、可访问性和易用性为核心，使 Cobalt 可供所有人使用。",
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 972bebf5..2700a7d9 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,5 +1,5 @@
-<script>
-    import { t } from "$lib/i18n/translations";
+<script lang="ts">
+    import { t,INTERNAL_locale } from "$lib/i18n/translations";
 
     import Omnibox from "$components/save/Omnibox.svelte";
     import Meowbalt from "$components/misc/Meowbalt.svelte";
@@ -7,11 +7,21 @@
     import UserGuide from "$components/misc/UseGuide.svelte"
     /*import Header from "$components/misc/Header.svelte"; // 导航栏组件
     import BlogPreview from "$components/blog/BlogPreview.svelte"; // 博客预览组件*/
+    const donateLinks: Record<'en' | 'th' | 'zh' | 'ru', string> = {
+        en: "https://buy.stripe.com/8wM5o6bHMeoO9oc8wz",
+        th: "https://buy.stripe.com/dR6bMu5jobcC57W3ce",
+        zh: "https://buy.stripe.com/5kAeYG7rwgwW43S4gh",
+        ru: "https://buy.stripe.com/5kAeYG7rwgwW43S4gh",
+    };
+    let key: string = $INTERNAL_locale;
+    const donateLink = donateLinks[key as keyof typeof donateLinks];
+
 </script>
 
 <svelte:head>
     <title>{$t("general.cobalt")}</title>
     <meta property="og:title" content={$t("general.cobalt")} />
+
 </svelte:head>
 
 <!--<Header />-->
@@ -29,20 +39,20 @@
         <!--<UserGuide/>-->
     </main>
     <!-- 添加教程和博客文章部分 -->
-    <section id="tutorials">
+    <!--<section id="tutorials">
         <h2>如何使用我们的下载工具</h2>
         <p>使用我们的在线下载工具可以快速下载你喜欢的视频和音频文件。以下是一些常见的使用场景：</p>
         <ul>
-            <!--<li><a href="/guide#youtube">如何下载 YouTube 视频？</a></li>
+            <li><a href="/guide#youtube">如何下载 YouTube 视频？</a></li>
             <li><a href="/guide#facebook">如何从 Facebook 保存视频？</a></li>
-            <li><a href="/guide#formats">支持的平台和格式有哪些？</a></li>-->
+            <li><a href="/guide#formats">支持的平台和格式有哪些？</a></li>
         </ul>
-        <!--<a href="/guide" class="button">查看完整教程</a>-->
-    </section>
+        <a href="/guide">查看完整教程</a>
 
-    <section id="blog">
-        <h2>最新博客文章</h2>
+    </section>-->
 
+    <section id="donate">
+        <a href={donateLink} class="button">{$t("donate.banner.title")}</a>
     </section>
     <!--<div id="terms-note">
         {$t("save.terms.note.agreement")}
@@ -66,12 +76,18 @@
         gap: 15px;
     }
 
-    #tutorials, #blog {
+    #tutorials, #donate {
+        display: flex;
+        flex-direction: column;
         padding: var(--padding);
         background-color: var(--popup-bg);
         border-radius: var(--border-radius);
         margin-bottom: var(--padding);
         width: 100%;
+        max-width: 640px; /* 限制最大宽度，类似 Omnibox */
+        box-sizing: border-box;
+        gap: 15px; /* 增加内容之间的间距 */
+        transition: all 0.3s ease; /* 添加平滑过渡效果 */
     }
 
     h2 {
@@ -97,23 +113,50 @@
         text-align: center;
     }
 
-    #terms-note {
-        bottom: 0;
-        color: var(--gray);
-        font-size: 13px;
-        text-align: center;
-        padding-bottom: var(--padding);
-        font-weight: 500;
+    /* 响应式设计：中等屏幕 */
+    @media screen and (max-width: 768px) {
+        #tutorials, #donate {
+            padding: calc(var(--padding) / 1.5);
+            gap: 10px;
+        }
+
+        h2 {
+            font-size: 1.1rem;
+        }
+
+        p {
+            font-size: 0.95rem;
+        }
     }
 
+    /* 响应式设计：小屏幕 */
+    @media screen and (max-width: 440px) {
+        #tutorials, #donate {
+            width: 100%; /* 占满屏幕宽度 */
+            padding: calc(var(--padding) / 2);
+            gap: 8px;
+        }
+
+        h2 {
+            font-size: 1rem;
+        }
+
+        p {
+            font-size: 0.9rem;
+        }
+
+        .button {
+            width: 100%; /* 按钮在小屏幕占满宽度 */
+            text-align: center;
+        }
+    }
+
+
     @media screen and (max-width: 535px) {
         #cobalt-save-container {
             padding-top: calc(var(--padding) / 2);
         }
 
-        #terms-note {
-            font-size: 11px;
-            padding-bottom: 0;
-        }
+
     }
 </style>
diff --git a/web/src/routes/guide/+layout.svelte b/web/src/routes/guide/+layout.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/web/src/routes/guide/+page.svelte b/web/src/routes/guide/+page.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/web/src/routes/guide/_sections/facebook.svelte b/web/src/routes/guide/_sections/facebook.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/web/src/routes/guide/_sections/formats.svelte b/web/src/routes/guide/_sections/formats.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/web/src/routes/guide/_sections/youtube.svelte b/web/src/routes/guide/_sections/youtube.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/web/svelte.config.js b/web/svelte.config.js
index a97efe0b..c33c3633 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -69,7 +69,8 @@ const config = {
                     "pagead2.googlesyndication.com",
                     "googleads.g.doubleclick.net",
                     "tpc.googlesyndication.com",
-                    "www.google.com"
+                    "www.google.com",
+                    "https://ep2.adtrafficquality.google"
                 ],
 
                 "script-src": [
@@ -82,6 +83,7 @@ const config = {
                     "googleads.g.doubleclick.net",
                     "tpc.googlesyndication.com",
                     "www.google.com",
+                    "https://ep2.adtrafficquality.google",
                     // eslint-disable-next-line no-undef
                     process.env.WEB_PLAUSIBLE_HOST ? process.env.WEB_PLAUSIBLE_HOST : "",