From f576b4bb2f8d83c54ec14185c11639e6315ca949 Mon Sep 17 00:00:00 2001
From: KOWX712 <leecc0503@gmail.com>
Date: Sat, 7 Dec 2024 20:52:01 +0800
Subject: [PATCH] link redirect quick fix

---
 module/webroot/index.html | 10 +---------
 module/webroot/index.js   | 28 ++++++++++++++++++++++++++--
 module/webroot/styles.css | 35 +++++++++++++++++++++++++++--------
 3 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/module/webroot/index.html b/module/webroot/index.html
index 1ed25fe..3b58931 100644
--- a/module/webroot/index.html
+++ b/module/webroot/index.html
@@ -125,15 +125,7 @@
                 <p data-i18n="disclaimer"></p>
                 <br>
                 <p>
-                    <span data-i18n="telegram_channel"></span>
-                    <br>
-                    <span>t.me/kowchannel</span>
-                </p>
-                <br>
-                <p>
-                    <span data-i18n="github"></span>
-                    <br>
-                    <span>github.com/KOWX712/Tricky-Addon-Update-Target-List</span>
+                    <span id="telegram" data-i18n="telegram_channel"></span><span id="github" data-i18n="github"></span>
                 </p>
                 <br>
                 <p data-i18n="acknowledgment"></p>
diff --git a/module/webroot/index.js b/module/webroot/index.js
index e81b130..9d73ec0 100644
--- a/module/webroot/index.js
+++ b/module/webroot/index.js
@@ -41,6 +41,10 @@ const loadingIndicator = document.querySelector('.loading');
 const floatingBtn = document.querySelector('.floating-btn');
 const prompt = document.getElementById('prompt');
 
+// About Elements
+const telegramLink = document.getElementById('telegram');
+const githubLink = document.getElementById('github');
+
 const basePath = "set-path";
 const ADDITIONAL_APPS = [
     "com.google.android.gms",
@@ -769,8 +773,28 @@ document.addEventListener('DOMContentLoaded', async () => {
 });
 
 // Redirect to GitHub release page
-updateCard.addEventListener('click', () => {
-  window.location.href = 'https://github.com/KOWX712/Tricky-Addon-Update-Target-List/releases/latest';
+updateCard.addEventListener('click', async() => {
+    try {
+        await execCommand('am start -a android.intent.action.VIEW -d https://github.com/KOWX712/Tricky-Addon-Update-Target-List/releases/latest');
+    } catch (error) {
+        console.error('Error opening GitHub Release link:', error);
+    }
+});
+
+telegramLink.addEventListener('click', async () => {
+  try {
+    await execCommand('am start -a android.intent.action.VIEW -d https://t.me/kowchannel');
+  } catch (error) {
+    console.error('Error opening Telegram link:', error);
+  }
+});
+
+githubLink.addEventListener('click', async () => {
+  try {
+    await execCommand('am start -a android.intent.action.VIEW -d https://github.com/KOWX712/Tricky-Addon-Update-Target-List');
+  } catch (error) {
+    console.error('Error opening GitHub link:', error);
+  }
 });
 
 // Function to execute shell commands
diff --git a/module/webroot/styles.css b/module/webroot/styles.css
index 67af318..dcf05dc 100644
--- a/module/webroot/styles.css
+++ b/module/webroot/styles.css
@@ -348,14 +348,6 @@ body {
     font-size: 14px;
 }
 
-.about-content p span[data-i18n="telegram_channel"] {
-    font-weight: bold;
-}
-
-.about-content p span[data-i18n="github"] {
-    font-weight: bold;
-}
-
 .about-content p[data-i18n="disclaimer"] {
     font-style: italic;
 }
@@ -369,6 +361,25 @@ body {
     font-size: 16px;
 }
 
+#telegram {
+    font-weight: bold;
+    padding: 5px 10px;
+    background-color: #38A7ED;
+    color: #fff;
+    border-radius: 8px;
+    margin-right: 5px;
+    transition: background-color 0.2s ease;
+}
+
+#github {
+    font-weight: bold;
+    padding: 5px 10px;
+    background-color: #1E1E1E;
+    color: #fff;
+    border-radius: 8px;
+    transition: background-color 0.2s ease;
+}
+
 .search-menu-container {
     display: flex;
     position: fixed;
@@ -753,6 +764,14 @@ body {
     background-color: #830000;
 }
 
+#telegram:active {
+    background-color: #1A78B3;
+}
+
+#github:active {
+    background-color: #585858;
+}
+
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #121212;