mirror of
https://github.com/jason5ng32/MyIP.git
synced 2026-11-04 08:55:47 +00:00
UX Improvements
This commit is contained in:
1 parent
df8daf2729
commit
24dc59fe2a
7 files changed
+21
-28
No files matched your search
+1
-1
@@ -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">
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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(':'),
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
|
||||
// 清空卡片数据
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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="{
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user