545 lines
13 KiB
HTML
545 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<link rel="icon" href="https://free.picui.cn/free/2025/08/10/689845496a283.png" type="image/x-icon">
|
|
|
|
<title>安全跳转中...</title>
|
|
<style type="text/css">
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 20px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.avatar-placeholder,
|
|
.avatar {
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 50%;
|
|
margin-bottom: 16px;
|
|
display: block;
|
|
}
|
|
|
|
.avatar {
|
|
display: none;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
background: rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.description {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 14px;
|
|
margin: 6px 0 22px;
|
|
color: #c4c4c4;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.loading {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 28px;
|
|
border-radius: 26px;
|
|
animation: fadein 0.6s ease;
|
|
width: 460px;
|
|
max-width: calc(100vw - 32px);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.url-text {
|
|
margin-bottom: 12px;
|
|
font-size: 15px;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.jump-url {
|
|
position: relative;
|
|
display: block;
|
|
margin-top: 5px;
|
|
margin-bottom: 22px;
|
|
padding: 16px 68px 16px 16px;
|
|
border-radius: 18px;
|
|
min-height: 58px;
|
|
text-align: left;
|
|
word-break: break-all;
|
|
line-height: 1.6;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.jump-url-text {
|
|
display: block;
|
|
display: -webkit-box;
|
|
padding-right: 2px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.6;
|
|
max-height: 3.2em;
|
|
word-break: break-all;
|
|
overflow-wrap: anywhere;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.copy-btn-container {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.copy-toast {
|
|
position: absolute;
|
|
top: -34px;
|
|
right: 0;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
pointer-events: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.loading[data-copy-state="success"] .copy-toast,
|
|
.loading[data-copy-state="error"] .copy-toast {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.copy-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
border: 1px solid #a4a4a4;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease-in-out;
|
|
}
|
|
|
|
.copy-btn-container svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.countdown-text {
|
|
margin-top: 12px;
|
|
margin-bottom: 0;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.countdown-number {
|
|
display: inline-block;
|
|
margin: 0 2px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.button-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.button {
|
|
padding: 0 20px;
|
|
border-radius: 14px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
height: 44px;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.cancel-button {
|
|
color: black;
|
|
}
|
|
|
|
.confirm-button {
|
|
color: white;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
height: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.progress {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: width 1s linear;
|
|
}
|
|
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #364f6b, #222831);
|
|
}
|
|
|
|
.loading {
|
|
border: 1px solid #6d7682;
|
|
background: rgba(57, 62, 70, 0.92);
|
|
color: #efefef;
|
|
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
|
|
}
|
|
|
|
.loading:hover {
|
|
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.description {
|
|
color: #f3f3f3;
|
|
}
|
|
|
|
.url-text,
|
|
.countdown-text {
|
|
color: #efefef;
|
|
}
|
|
|
|
.jump-url {
|
|
border: 1px solid #737b86;
|
|
background-color: #333940;
|
|
color: #efefef;
|
|
}
|
|
|
|
.copy-toast {
|
|
background: rgba(239, 239, 239, 0.95);
|
|
color: #222831;
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.copy-btn {
|
|
background-color: #222831;
|
|
border-color: #737b86;
|
|
color: #c8d0da;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
color: #ffffff;
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.cancel-button {
|
|
background-color: rgba(135, 44, 44, 0.16);
|
|
color: #ffd5d5;
|
|
border: 1px solid rgba(255, 118, 118, 0.12);
|
|
}
|
|
|
|
.confirm-button {
|
|
background: linear-gradient(135deg, #28566f, #2f6f90);
|
|
color: #fff;
|
|
border-color: rgba(86, 148, 182, 0.2);
|
|
box-shadow: 0 12px 24px rgba(40, 86, 111, 0.26);
|
|
}
|
|
|
|
.progress-bar {
|
|
background-color: #444;
|
|
}
|
|
|
|
.progress {
|
|
background-color: #888;
|
|
}
|
|
|
|
|
|
@media (max-width: 520px) {
|
|
body {
|
|
overflow: auto;
|
|
}
|
|
|
|
.container {
|
|
padding: 16px;
|
|
}
|
|
|
|
.loading {
|
|
padding: 22px 18px;
|
|
}
|
|
|
|
.button-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
function GetQueryString(name) {
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
var r = window.location.search.substr(1).match(reg);
|
|
return r ? decodeURI(r[2]) : null;
|
|
}
|
|
|
|
function decodeSafeUrlParam(paramStr) {
|
|
if (!paramStr) {
|
|
return paramStr;
|
|
}
|
|
var base64 = paramStr.replace(/-/g, "+").replace(/_/g, "/");
|
|
var paddingLength = (4 - (base64.length % 4)) % 4;
|
|
if (paddingLength) {
|
|
base64 += "=".repeat(paddingLength);
|
|
}
|
|
return decodeURIComponent(atob(base64).split("").map(function (char) {
|
|
return "%" + ("00" + char.charCodeAt(0).toString(16)).slice(-2);
|
|
}).join(""));
|
|
}
|
|
|
|
let countdown = 10;
|
|
let jump_url = GetQueryString('u');
|
|
let copyToastTimer = null;
|
|
|
|
|
|
try {
|
|
jump_url = decodeSafeUrlParam(jump_url);
|
|
} catch (error) {
|
|
jump_url = null;
|
|
}
|
|
|
|
|
|
const UrlReg = /^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser|ftp|rtsp|mms):\/\//i;
|
|
if (!jump_url || !UrlReg.test(jump_url)) {
|
|
document.title = '参数错误，正在返回首页...';
|
|
jump_url = location.origin;
|
|
}
|
|
|
|
let progressElement;
|
|
let countdownElement;
|
|
let countdownTextElement;
|
|
let jumpUrlElement;
|
|
let loadingElement;
|
|
|
|
function updateCopyToast(state, message) {
|
|
if (!loadingElement) {
|
|
return;
|
|
}
|
|
loadingElement.setAttribute("data-copy-state", state);
|
|
document.getElementById("copy-toast").textContent = message;
|
|
if (copyToastTimer) {
|
|
clearTimeout(copyToastTimer);
|
|
}
|
|
if (state === "success" || state === "error") {
|
|
copyToastTimer = setTimeout(function () {
|
|
loadingElement.setAttribute("data-copy-state", "idle");
|
|
}, 1600);
|
|
}
|
|
}
|
|
|
|
function updateCountdown() {
|
|
if (countdown < 0) {
|
|
countdownTextElement.textContent = "💡请自行确认链接安全后再继续跳转";
|
|
if (progressElement) {
|
|
progressElement.style.width = "100%";
|
|
}
|
|
return;
|
|
}
|
|
|
|
countdownElement.textContent = countdown;
|
|
if (progressElement && 10 > 0) {
|
|
progressElement.style.width = (countdown / 10 * 100) + "%";
|
|
}
|
|
|
|
if (countdown === 0) {
|
|
jump();
|
|
} else {
|
|
countdown--;
|
|
setTimeout(updateCountdown, 1000);
|
|
}
|
|
}
|
|
|
|
function jump() {
|
|
location.href = jump_url;
|
|
}
|
|
|
|
function closeWindow() {
|
|
function isWeChat() {
|
|
return /MicroMessenger/i.test(navigator.userAgent);
|
|
}
|
|
|
|
function isQQ() {
|
|
return /QQ/i.test(navigator.userAgent) && !/MicroMessenger/i.test(navigator.userAgent);
|
|
}
|
|
|
|
if (isWeChat()) {
|
|
if (typeof WeixinJSBridge !== "undefined") {
|
|
WeixinJSBridge.call("closeWindow");
|
|
} else {
|
|
document.addEventListener("WeixinJSBridgeReady", function () {
|
|
WeixinJSBridge.call("closeWindow");
|
|
}, false);
|
|
}
|
|
} else if (isQQ()) {
|
|
if (typeof mqq !== "undefined" && mqq.ui && mqq.ui.closeWebView) {
|
|
mqq.ui.closeWebView();
|
|
} else {
|
|
window.history.back();
|
|
}
|
|
} else {
|
|
window.opener = null;
|
|
window.open("", "_self");
|
|
window.close();
|
|
}
|
|
}
|
|
|
|
function fallbackCopyText(text) {
|
|
const tempInput = document.createElement("input");
|
|
tempInput.value = text;
|
|
document.body.appendChild(tempInput);
|
|
tempInput.select();
|
|
tempInput.setSelectionRange(0, text.length);
|
|
const copied = document.execCommand("copy");
|
|
document.body.removeChild(tempInput);
|
|
if (!copied) {
|
|
throw new Error("copy failed");
|
|
}
|
|
}
|
|
|
|
function copyToClipboard() {
|
|
const urlText = document.getElementById("jump-url-text").textContent;
|
|
if (!urlText) {
|
|
updateCopyToast("error", "暂无可复制内容");
|
|
return;
|
|
}
|
|
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
navigator.clipboard.writeText(urlText).then(function () {
|
|
updateCopyToast("success", "复制成功");
|
|
}).catch(function () {
|
|
try {
|
|
fallbackCopyText(urlText);
|
|
updateCopyToast("success", "复制成功");
|
|
} catch (error) {
|
|
updateCopyToast("error", "复制失败");
|
|
}
|
|
});
|
|
} else {
|
|
try {
|
|
fallbackCopyText(urlText);
|
|
updateCopyToast("success", "复制成功");
|
|
} catch (error) {
|
|
updateCopyToast("error", "复制失败");
|
|
}
|
|
}
|
|
}
|
|
|
|
async function loadAvatar() {
|
|
const avatarImg = document.querySelector(".avatar");
|
|
const placeholder = document.querySelector(".avatar-placeholder");
|
|
const img = new Image();
|
|
img.src = "https://free.picui.cn/free/2025/08/10/689845496a283.png";
|
|
img.onload = function () {
|
|
avatarImg.src = img.src;
|
|
avatarImg.style.display = "block";
|
|
placeholder.style.display = "none";
|
|
};
|
|
}
|
|
|
|
window.addEventListener("load", function () {
|
|
loadAvatar();
|
|
loadingElement = document.querySelector(".loading");
|
|
progressElement = document.getElementById("progress");
|
|
countdownElement = document.getElementById("countdown");
|
|
countdownTextElement = document.querySelector(".countdown-text");
|
|
jumpUrlElement = document.getElementById("jump-url-text");
|
|
jumpUrlElement.textContent = jump_url;
|
|
updateCountdown();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="avatar-placeholder"></div>
|
|
<img src="" alt="头像" class="avatar">
|
|
<div class="description">Bi's Blog</div>
|
|
<div class="subtitle">安全中心</div>
|
|
|
|
<div class="loading" data-copy-state="idle">
|
|
<div class="content">
|
|
<div class="url-text">您即将离开本站，跳转到：</div>
|
|
<div class="jump-url" id="jump-url">
|
|
<span class="jump-url-text" id="jump-url-text"></span>
|
|
<div class="copy-btn-container">
|
|
<span class="copy-toast" id="copy-toast">复制成功</span>
|
|
<button class="copy-btn" onclick="copyToClipboard()" aria-label="复制链接">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
|
<path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="countdown-text">⚡将在<span class="countdown-number" id="countdown"></span>秒后跳转，请自行确认链接安全性</div>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" id="progress"></div>
|
|
</div>
|
|
|
|
|
|
<div class="button-container">
|
|
<button class="button cancel-button" onclick="closeWindow()">取消跳转</button>
|
|
<button class="button confirm-button" onclick="jump()">立即跳转</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|