UX Improvements

This commit is contained in:
jason5ng32 committed 2024-02-05 12:52:31 +08:00
1 parent df8daf2729
commit 24dc59fe2a
7 files changed
+21 -28

No files matched your search

+1 -1
View File
@@ -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">
+1 -2
View File
@@ -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,
+1 -1
View File
@@ -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(':'),
+7 -19
View File
@@ -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();
},
// 清空卡片数据
+4 -4
View File
@@ -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>
+1 -1
View File
@@ -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="{
+6
View File
@@ -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;
}