From 24dc59fe2acafff58ba7909286733315ec6d82d7 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Mon, 5 Feb 2024 12:52:31 +0800
Subject: [PATCH] UX Improvements

---
 index.html                      |  2 +-
 src/components/connectivity.vue |  3 +--
 src/components/dnsleaks.vue     |  2 +-
 src/components/ipcheck.vue      | 26 +++++++-------------------
 src/components/speedtest.vue    |  8 ++++----
 src/components/webrtc.vue       |  2 +-
 src/style.css                   |  6 ++++++
 7 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index 1325693c..af0b71c2 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="theme-color" content="#f8f9fa">
   <meta name="background-color" content="#ffffff">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="apple-touch-icon" href="/logo-512.png">
   <title>IPCheck.ing - Check My IP Address and Geolocation - Check WebRTC Connection IP - DNS Leak Test - Speed Test - Jason Ng Open Source </title>
   <link rel="icon" href="logo.svg">
diff --git a/src/components/connectivity.vue b/src/components/connectivity.vue
index 3b52a0c0..69c91e41 100644
--- a/src/components/connectivity.vue
+++ b/src/components/connectivity.vue
@@ -30,8 +30,7 @@
         <div v-for="test in connectivityTests" :key="test.id" class="col-6 col-md-3 mb-4">
           <div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
             <div class="card-body">
-              <h5 class="card-title"><i class="bi" :class="'bi-' + test.icon"></i> {{ test.name }}</h5>
-
+              <p class="jn-con-title card-title"><i class="bi" :class="'bi-' + test.icon"></i> {{ test.name }}</p>
               <p class="card-text" :class="{
                 'text-info': test.status === $t('connectivity.StatusWait'),
                 'text-success': test.status.includes($t('connectivity.StatusAvailable')) && test.time < 200,
diff --git a/src/components/dnsleaks.vue b/src/components/dnsleaks.vue
index fc2f21cb..12dee7b6 100644
--- a/src/components/dnsleaks.vue
+++ b/src/components/dnsleaks.vue
@@ -14,7 +14,7 @@
       <div v-for="leak in leakTest" :key="leak.id" class="col-lg-3 col-md-6 col-12 mb-4">
         <div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
           <div class="card-body">
-            <h5 class="card-title"><i class="bi bi-heart-pulse-fill"></i> {{ leak.name }}</h5>
+            <p class="jn-con-title card-title"><i class="bi bi-heart-pulse-fill"></i> {{ leak.name }}</p>
             <p class="card-text" :class="{
               'text-info': leak.ip === $t('dnsleaktest.StatusWait') || leak.ip === $t('dnsleaktest.StatusError'),
               'text-success': leak.ip.includes('.') || leak.ip.includes(':'),
diff --git a/src/components/ipcheck.vue b/src/components/ipcheck.vue
index 8c2162b2..77fe82b1 100644
--- a/src/components/ipcheck.vue
+++ b/src/components/ipcheck.vue
@@ -512,25 +512,13 @@ export default {
     },
 
     // 检查所有 IP 地址
-    checkAllIPs() {
-      setTimeout(() => {
-        this.getIPFromSpecial();
-      }, 500);
-      setTimeout(() => {
-        this.getIPFromTaobao();
-      }, 500);
-      setTimeout(() => {
-        this.getIPFromCloudflare_V4();
-      }, 500);
-      setTimeout(() => {
-        this.getIPFromCloudflare_V6();
-      }, 100);
-      setTimeout(() => {
-        this.getIPFromIpify_V4();
-      }, 500);
-      setTimeout(() => {
-        this.getIPFromIpify_V6();
-      }, 100);
+    async checkAllIPs() {
+      this.getIPFromSpecial();
+      this.getIPFromTaobao();
+      this.getIPFromCloudflare_V4();
+      this.getIPFromCloudflare_V6();
+      this.getIPFromIpify_V4();
+      this.getIPFromIpify_V6();
     },
 
     // 清空卡片数据
diff --git a/src/components/speedtest.vue b/src/components/speedtest.vue
index 99fcb23c..1c2a8be2 100644
--- a/src/components/speedtest.vue
+++ b/src/components/speedtest.vue
@@ -25,28 +25,28 @@
             </div>
             <div class="row" style="margin-bottom: 10pt;">
               <div :class="['text-center', isMobile ? 'col-6' : 'col-3']">
-                <h5 class="speedtest-h5">{{ $t('speedtest.Download') }}</h5>
+                <p class="speedtest-h5 jn-con-title">{{ $t('speedtest.Download') }}</p>
                 <p id="download-speed" class="speedtest-h5" :class="updateSpeedTestColor(speedTestStatus)">
                   <span class="jn-speedtest-number">{{ speedTest.downloadSpeed }}</span>
                   <span v-if="speedTestStatus !== 'idle'">Mb/s</span>
                 </p>
               </div>
               <div :class="['text-center', isMobile ? 'col-6' : 'col-3']">
-                <h5 class="speedtest-h5">{{ $t('speedtest.Upload') }}</h5>
+                <p class="speedtest-h5 jn-con-title">{{ $t('speedtest.Upload') }}</p>
                 <p id="upload-speed" class="speedtest-h5" :class="updateSpeedTestColor(speedTestStatus)">
                   <span class="jn-speedtest-number">{{ speedTest.uploadSpeed }}</span>
                   <span v-if="speedTestStatus !== 'idle'">Mb/s</span>
                 </p>
               </div>
               <div :class="['text-center', isMobile ? 'col-6' : 'col-3']">
-                <h5 class="speedtest-h5">{{ $t('speedtest.Latency') }}</h5>
+                <p class="speedtest-h5 jn-con-title">{{ $t('speedtest.Latency') }}</p>
                 <p id="latency" class="speedtest-h5" :class="updateSpeedTestColor(speedTestStatus)">
                   <span class="jn-speedtest-number">{{ speedTest.latency }}</span>
                   <span v-if="speedTestStatus !== 'idle'">ms</span>
                 </p>
               </div>
               <div :class="['text-center', isMobile ? 'col-6' : 'col-3']">
-                <h5 class="speedtest-h5">{{ $t('speedtest.Jitter') }}</h5>
+                <p class="speedtest-h5 jn-con-title">{{ $t('speedtest.Jitter') }}</p>
                 <p id="jitter" class="speedtest-h5" :class="updateSpeedTestColor(speedTestStatus)">
                   <span class="jn-speedtest-number">{{ speedTest.jitter }}</span>
                   <span v-if="speedTestStatus !== 'idle'">ms</span>
diff --git a/src/components/webrtc.vue b/src/components/webrtc.vue
index 0926335b..1decf31e 100644
--- a/src/components/webrtc.vue
+++ b/src/components/webrtc.vue
@@ -13,7 +13,7 @@
       <div v-for="stun in stunServers" :key="stun.id" class="col-lg-3 col-md-6 col-12 mb-4">
         <div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
           <div class="card-body">
-            <h5 class="card-title"><i class="bi bi-sign-merge-left-fill"></i> {{ stun.name }}</h5>
+            <p class="card-title jn-con-title"><i class="bi bi-sign-merge-left-fill"></i> {{ stun.name }}</p>
             <p class="card-text text-secondary" style="font-size: 10pt;"><i class="bi bi-hdd-network-fill"></i> {{
               stun.url }}</p>
             <p class="card-text" :class="{
diff --git a/src/style.css b/src/style.css
index 42dec65b..34e01cea 100644
--- a/src/style.css
+++ b/src/style.css
@@ -67,6 +67,12 @@
   max-width: 1400px;
 }
 
+.jn-con-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
 .jn-text {
 height: fit-content;
 }