Skip to content

Commit

Permalink
improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
@jason5ng32
jason5ng32 committed Nov 24, 2023
1 parent e6495e1 commit 3873333
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 80 deletions.
156 changes: 85 additions & 71 deletions index_new.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,95 +27,109 @@
align-items: center;
flex-direction: row;
}

.jn-alert {
z-index: 9999;
position: fixed;
width: 100%;
top: 0;
}
.jn-card {
box-shadow: 0 0 10pt #0000001c;
}
</style>
</head>

<body>
<div id="app" class="container mt-5">
<!-- IP 数据容器 -->
<div class="ip-data-section mb-4">
<div class="row jn-title">
<h2>IP 数据</h2>
</div>
<div class="card-deck">
<div v-for="card in ipDataCards" :key="card.id" class="card">
<div class="card-header jn-ip-title" style="font-weight: bold;">
<span>来源: {{ card.source }}</span>
<button @click="refreshCard(card)" class="btn btn-light">
<i class="bi bi-arrow-clockwise"></i></button>
</div>
<iframe class="card-img-top" :src="card.mapUrl" width="100%" height="200" frameborder="0"
style="border:0;" allowfullscreen>
</iframe>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">IP 地址: {{ card.ip }}</li>
<li class="list-group-item">
国家: <span v-if="card.country_code"
:class="'flag-icon flag-icon-' + card.country_code.toLowerCase()"></span>&nbsp;{{
card.country_name }}
</li>
<li class="list-group-item">地区: {{ card.region }}</li>
<li class="list-group-item">经纬度: {{ card.latitude }}, {{ card.longitude }}</li>
<li class="list-group-item">ISP: {{ card.isp }}</li>
<li class="list-group-item">ASN: {{ card.asn }}</li>
</ul>
</div>
<div id="app">
<div v-if="showAlert" class="jn-alert" :class="alertStyle" id="alert">{{ alertMessage }}</div>
<div class="container mt-5">
<!-- IP 数据容器 -->
<div class="ip-data-section mb-4">
<div class="row jn-title">
<h2>IP 数据</h2>
</div>
<div class="card-deck">
<div v-for="card in ipDataCards" :key="card.id" class="card jn-card">
<div class="card-header jn-ip-title" style="font-weight: bold;">
<span>来源: {{ card.source }}</span>
<button @click="refreshCard(card)" class="btn btn-light">
<i class="bi bi-arrow-clockwise"></i></button>
</div>
<iframe class="card-img-top" :src="card.mapUrl" width="100%" height="200" frameborder="0"
style="border:0;" allowfullscreen>
</iframe>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">IP 地址: {{ card.ip }}</li>
<li class="list-group-item">
国家: <span v-if="card.country_code"
:class="'flag-icon flag-icon-' + card.country_code.toLowerCase()"></span>&nbsp;{{
card.country_name }}
</li>
<li class="list-group-item">地区: {{ card.region }}</li>
<li class="list-group-item">经纬度: {{ card.latitude }}, {{ card.longitude }}</li>
<li class="list-group-item">ISP: {{ card.isp }}</li>
<li class="list-group-item">ASN: {{ card.asn }}</li>
</ul>
</div>

</div>
</div>
</div>
</div>

<!-- 可用性测试容器 -->
<div class="availability-test-section mb-4">
<div class="row jn-title">
<h2>可用性测试</h2>
<button @click="checkAllConnectivity" class="btn btn-light"><i
class="bi bi-arrow-clockwise"></i></button>
</div>
<div class="row">
<div v-for="test in connectivityTests" :key="test.id" class="col-md-3 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ test.name }}</h5>
<p class="card-text"
:class="{'text-info': test.status === '检查中...', 'text-success': test.status.includes('可用'), 'text-danger': test.status === '不可用' || test.status === '超时或不可用'}"
v-html="test.status">
</p>

<!-- 可用性测试容器 -->
<div class="availability-test-section mb-4">
<div class="row jn-title">
<h2>可用性测试</h2>
<button @click="checkAllConnectivity" class="btn btn-light"><i
class="bi bi-arrow-clockwise"></i></button>
</div>
<div class="row">
<div v-for="test in connectivityTests" :key="test.id" class="col-md-3 mb-4">
<div class="card jn-card">
<div class="card-body">
<h5 class="card-title">{{ test.name }}</h5>
<p class="card-text"
:class="{'text-info': test.status === '检查中...', 'text-success': test.status.includes('可用'), 'text-danger': test.status === '不可用' || test.status === '超时或不可用'}"
v-html="test.status">
</p>
</div>
</div>
</div>
</div>
</div>
</div>


</div>
</div>

<button id="ip-btn" class="btn btn-primary position-fixed" style="bottom: 20px; right: 20px; z-index: 9999;">IP 查询</button>
<div id="ip-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-height: 50vh;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">IP 查询</h5>

</div>
<div class="modal-body">
<input id="ip-input" type="text" class="form-control" placeholder="请输入 IP 地址">
<button id="query-btn" class="btn btn-primary mt-2" disabled>查询</button>
<div id="error-message" class="text-danger"></div>
<div id="result-container" class="mt-3"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button id="ip-btn" class="btn btn-primary position-fixed" style="bottom: 20px; right: 20px; z-index: 1000;">IP
查询</button>
<div id="ip-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-height: 50vh;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">IP 查询</h5>

</div>
<div class="modal-body">
<input id="ip-input" type="text" class="form-control" placeholder="请输入 IP 地址">
<button id="query-btn" class="btn btn-primary mt-2" disabled>查询</button>
<div id="error-message" class="text-danger"></div>
<div id="result-container" class="mt-3"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p class="text-center">90% Code by ChatGPT</p>
</footer>
<script src="res/checkip.js"></script>
<footer>
<p class="text-center">90% Code by ChatGPT</p>
</footer>

<script src="res/checkip.js"></script>

<!-- 引入 Vue.js -->
<script src="res/vue.js"></script>
Expand Down
39 changes: 30 additions & 9 deletions res/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ new Vue({
{ id: 'github', name: 'Github', url: 'https://raw.githubusercontent.com/jason5ng32/fulian4/master/background.jpg?', status: '待检测' },
{ id: 'chatgpt', name: 'ChatGPT', url: 'https://chat.openai.com/favicon.ico?', status: '待检测' }

]
],
showAlert: false,
alertMessage: ''
},
methods: {
getIPFromIpapi() {
Expand Down Expand Up @@ -103,19 +105,38 @@ new Vue({
var img = new Image();
var timeout = setTimeout(() => {
test.status = "不可用";
if (test.id === 'google') {
this.showAlert = true;
this.alertStyle = "alert alert-warning";
this.alertMessage = "你当前似乎没有翻墙，部分内容无法显示。";
}
}, 3 * 1000);

img.onload = () => {
clearTimeout(timeout);
test.status = `可用 ( ${+ new Date() - beginTime} ms )`;
if (test.id === 'google') {
this.showAlert = true;
this.alertStyle = "alert alert-success";
this.alertMessage = "你当前已经翻墙，欢迎来到新世界。";
}
};

img.onerror = () => {
clearTimeout(timeout);
test.status = "不可用";
if (test.id === 'google') {
this.showAlert = true;
this.alertStyle = "alert alert-warning";
this.alertMessage = "你当前似乎没有翻墙，部分内容无法显示。";
}
};

img.src = `${test.url}${Date.now()}`;

setTimeout(() => {
this.showAlert = false;
}, 10000);
},

checkAllConnectivity() {
Expand All @@ -124,14 +145,14 @@ new Vue({
});
},
async fetchCloudflareTrace() {
try {
const response = await fetch('https://cloudflare.com/cdn-cgi/trace');
const data = await response.text();
console.log('Cloudflare Trace Data:', data);
} catch (error) {
console.error('Error fetching Cloudflare trace data:', error);
}
},
try {
const response = await fetch('https://cloudflare.com/cdn-cgi/trace');
const data = await response.text();
console.log('Cloudflare Trace Data:', data);
} catch (error) {
console.error('Error fetching Cloudflare trace data:', error);
}
},
},
mounted() {
this.checkAllConnectivity();
Expand Down

0 comments on commit 3873333

Please sign in to comment.