【新升级版】跳转页面美化子比主题美化

01157

 

记得先备份跳转页面原文件，避免后续出现一定的不兼容。

记得先备份跳转页面原文件，避免后续出现一定的不兼容。

使用方法打开子比主题根目录找到 “go.php” 文件替换里面内容

图片[1]-【新升级版】跳转页面美化子比主题美化-拾忆资源

<?php
session_start();

// 生成CSRF令牌
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// 检查请求URI是否异常
if (strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64")) {
    header("HTTP/1.1 414 Request-URI Too Long");
    header("Status: 414 Request-URI Too Long");
    header("Connection: Close");
    exit;
}

// 定义一个用于清理URL的函数
function sanitizeUrl(string $url): string {
    $url = htmlspecialchars($url, ENT_QUOTES, "UTF-8");
    $url = str_replace(["'", '"'], ["'", """], $url);
    $url = str_replace(["\r", "\n", "\t", "\x0B", "\x0C", "\x0D"], ["
", "
", "	", "", "", "
"], $url);
    return $url;
}

// 获取目标URL
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);

if (!empty($t_url)) {
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url = base64_decode($t_url);
    }
    $t_url = sanitizeUrl($t_url);

    preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
    if ($matches) {
        $url = $t_url;
        $title = '页面加载中,请稍候...';
    } else {
        preg_match('/\./i', $t_url, $matche);
        if ($matche) {
            $url = 'http://' . $t_url;
            $title = '页面加载中,请稍候...';
        } else {
            $url = 'http://' . $_SERVER['HTTP_HOST'];
            $title = '参数错误，正在返回首页...';
        }
    }
} else {
    $title = '参数缺失，正在返回首页...';
    $url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'];
}

// 验证referer，防止CSRF攻击
$host = zib_get_url_top_host($_SERVER['HTTP_HOST']);
$referer = $_SERVER['HTTP_REFERER'] ?? '';
if (!empty($referer) && !preg_match('/' . preg_quote($host, '/') . '/i', $referer)) {
    $url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'];
    $title = '非法请求，正在返回首页...';
}

$url = str_replace('&', '&', $url);

// 设置背景图片的URL
$background_image_url = 'https://6.xudaozai.cn/wp-content/themes/zibll/img1/backiee-217610-landscape.jpg';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安全跳转</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
            background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%),
                        linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
            background-blend-mode: multiply;
            font-family: 'Raleway', sans-serif;
            font-weight: bold;
            color: #ffffff;
            overflow: hidden;
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

       .neon-button,.neon-link {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: #03e9f4;
            text-decoration: none;
            text-transform: uppercase;
            transition: 0.5s;
            letter-spacing: 4px;
            overflow: hidden;
            margin: 10px 5px;
            background: rgba(255, 255, 255, 0.1);
            white-space: normal;
            word-break: break-all;
            overflow-wrap: anywhere;
            border-radius: 5px;
            border: 1px solid #03e9f4;
            font-size: 0.8em;
            line-height: 1.2;
            max-width: 100%;
        }

       .neon-link span {
            display: none;
        }

       .neon-button:hover,.neon-link:hover {
            background: rgba(3, 233, 244, 0.1);
            color: #03e9f4;
            box-shadow: 0 0 8px #03e9f4, 0 0 16px #03e9f4, 0 0 24px #03e9f4, 0 0 32px #03e9f4;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
        }

       .neon-link:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #03e9f4;
            box-shadow: none;
        }

       .neon-button span {
            position: absolute;
            display: block;
        }

       .home-button span:nth-child(1),
       .visit-button span:nth-child(1) {
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            animation: animate1 1s linear infinite;
        }

       .home-button span:nth-child(2),
       .visit-button span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }

       .home-button span:nth-child(3),
       .visit-button span:nth-child(3) {
            bottom: 0;
            right: 0;
            width: 100%;
            height: 2px;
            animation: animate3 1s linear infinite;
            animation-delay: 0.50s;
        }

       .home-button span:nth-child(4),
       .visit-button span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }

        @keyframes animate1 {
            0% {
                left: -100%;
            }
            50%, 100% {
                left: 100%;
            }
        }

        @keyframes animate2 {
            0% {
                top: -100%;
            }
            50%, 100% {
                top: 100%;
            }
        }

        @keyframes animate3 {
            0% {
                right: -100%;
            }
            50%, 100% {
                right: 100%;
            }
        }

        @keyframes animate4 {
            0% {
                bottom: -100%;
            }
            50%, 100% {
                bottom: 100%;
            }
        }

       .home-button span:nth-child(1),
       .home-button span:nth-child(2),
       .home-button span:nth-child(3),
       .home-button span:nth-child(4) {
            background: linear-gradient(90deg, transparent, #00ff00);
        }

       .visit-button span:nth-child(1),
       .visit-button span:nth-child(2),
       .visit-button span:nth-child(3),
       .visit-button span:nth-child(4) {
            background: linear-gradient(90deg, transparent, #ff0000);
        }

       .button-effect {
            position: relative;
            min-width: 100px;
            padding: 8px 12px;
            border: 0;
            border-radius: 7px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.1);
            color: rgb(255, 255, 255, 0.66);
            transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
        }

       .button-effect::before {
            content: "";
            width: 70%;
            height: 1px;
            position: absolute;
            bottom: 0;
            left: 15%;
            background: rgb(255, 255, 255);
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            opacity: 0.2;
            transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
        }

       .button-effect:hover {
            color: rgb(255, 255, 255, 1);
            transform: scale(1.1) translateY(-3px);
        }

       .button-effect:hover::before {
            opacity: 1;
        }

       .glass-container {
            width: 90%;
            max-width: 700px;
            height: auto;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px;
            border-radius: 10px;
            backdrop-filter: blur(0px);
            background-color: rgba(255, 255, 255, 0.1);
            box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
            position: relative;
            overflow: hidden;
            animation: bounceInDown 1s both;
            text-align: center;
        }

        @keyframes lightning-border {
            0% {
                border-image-slice: 1;
            }
            50% {
                border-image-slice: 10;
            }
            100% {
                border-image-slice: 1;
            }
        }

       .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }

        @keyframes bounceInDown {
            from,
            60%,
            75%,
            90%,
            to {
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            }

            0% {
                opacity: 0;
                transform: translate3d(0, -3000px, 0) scaleY(3);
            }

            60% {
                opacity: 1;
                transform: translate3d(0, 25px, 0) scaleY(0.9);
            }

            75% {
                transform: translate3d(0, -10px, 0) scaleY(0.95);
            }

            90% {
                transform: translate3d(0, 5px, 0) scaleY(0.985);
            }

            to {
                transform: translate3d(0, 0, 0);
            }
        }

       .message {
            padding: 20px;
            background: linear-gradient(to right, #00c6ff, #0072ff);
            color: white;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            font-weight: bold;
            margin-bottom: 25px;
            font-size: 1.2em;
            text-align: center;
        }

       .flex-row {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            text-align: center;
            flex-wrap: wrap;
            overflow: hidden;
            white-space: normal;
            width: 100%;
        }

       .text {
            margin-right: 10px;
            white-space: nowrap;
        }

       .alert-box {
            padding: 10px;
            font-size: 0.8em;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #147ab8;
            color: #ffffff;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            text-align: center;
        }

       .alert-icon {
            margin-right: 10px;
            font-size: 1.5em;
        }

       .alert-message {
            font-size: 1.2em;
        }

        @media (max-width: 1200px) {
           .glass-container {
                width: 80%;
            }
        }

        @media (max-width: 768px) {
           .message {
                font-size: 1em;
            }
           .flex-row {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
           .text,.link {
                margin: 5px 0;
            }
           .link {
                word-break: break-word;
            }
        }

        @media (max-width: 480px) {
           .message {
                font-size: 0.9em;
            }
           .flex-row {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
           .text,.link {
                margin: 3px 0;
            }
           .link {
                word-break: break-word;
            }
        }

       .home-button:hover {
            background: rgba(76, 175, 80, 0.05);
            color: #4CAF50;
            box-shadow: 0 0 8px #4CAF50, 0 0 16px #4CAF50, 0 0 24px #4CAF50, 0 0 32px #4CAF50;
        }

       .visit-button:hover {
            background: rgba(244, 67, 54, 0.05);
            color: #F44336;
            box-shadow: 0 0 8px #F44336, 0 0 16px #F44336, 0 0 24px #F44336, 0 0 32px #F44336;
        }

    </style>
</head>
<body>
    <div class="glass-container animated bounceInDown" style="border:none;">
        <div id="loading" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div class="alert-box">
            <div class="alert-icon"><i class="fas fa-exclamation-triangle"></i></div>
            <div class="alert-message">安全性未知，是否继续</div>
        </div>
        <div class="flex-row">
            <span class="text">即将跳转到外部网站</span>
            <a class="neon-link button-effect external-link" href="<?php echo $url;?>">
                <?php echo $url;?>
            </a>
        </div>
        <div class="d-flex justify-content-center">
            <a href="/" class="neon-button button-effect home-button">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                返回网站
            </a>
            <a href="<?php echo $url;?>" class="neon-button button-effect visit-button">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                立即访问
            </a>
        </div>
        <script>
            function showLoading() {
                document.getElementById('loading').style.display = 'block';
            }

            document.addEventListener("DOMContentLoaded", function() {
                var img = new Image();
                img.src = "<?php echo $background_image_url;?>";
                img.onload = function() {
                    document.body.style.background = "url('<?php echo $background_image_url;?>') no-repeat center center/cover";
                };
            });
        </script>
    </div>
</body>
</html>

记得先备份跳转页面原文件，避免后续出现一定的不兼容。

记得先备份跳转页面原文件，避免后续出现一定的不兼容。

记得先备份跳转页面原文件，避免后续出现一定的不兼容。

使用方法打开子比主题根目录找到 “go.php” 文件替换里面内容

图片[2]-【新升级版】跳转页面美化子比主题美化-拾忆资源

<?php
session_start();

// 生成CSRF令牌
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// 检查请求URI是否异常
if (strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64")) {
    header("HTTP/1.1 414 Request-URI Too Long");
    header("Status: 414 Request-URI Too Long");
    header("Connection: Close");
    exit;
}

// 定义一个用于清理URL的函数
function sanitizeUrl(string $url): string {
    $url = htmlspecialchars($url, ENT_QUOTES, "UTF-8");
    $url = str_replace(["'", '"'], ["'", """], $url);
    $url = str_replace(["\r", "\n", "\t", "\x0B", "\x0C", "\x0D"], ["
", "
", "	", "", "", "
"], $url);
    return $url;
}

// 获取目标URL
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);

if (!empty($t_url)) {
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url = base64_decode($t_url);
    }
    $t_url = sanitizeUrl($t_url);

    preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
    if ($matches) {
        $url = $t_url;
        $title = '页面加载中,请稍候...';
    } else {
        preg_match('/\./i', $t_url, $matche);
        if ($matche) {
            $url = 'http://' . $t_url;
            $title = '页面加载中,请稍候...';
        } else {
            $url = 'http://' . $_SERVER['HTTP_HOST'];
            $title = '参数错误，正在返回首页...';
        }
    }
} else {
    $title = '参数缺失，正在返回首页...';
    $url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'];
}

// 验证referer，防止CSRF攻击
$host = zib_get_url_top_host($_SERVER['HTTP_HOST']);
$referer = $_SERVER['HTTP_REFERER'] ?? '';
if (!empty($referer) && !preg_match('/' . preg_quote($host, '/') . '/i', $referer)) {
    $url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'];
    $title = '非法请求，正在返回首页...';
}

$url = str_replace('&', '&', $url);

// 设置背景图片的URL
$background_image_url = 'https://6.xudaozai.cn/wp-content/themes/zibll/img1/backiee-217610-landscape.jpg';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安全跳转</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
            background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%),
                        linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
            background-blend-mode: multiply;
            font-family: 'Raleway', sans-serif;
            font-weight: bold;
            color: #ffffff;
            overflow: hidden;
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .neon-button, .neon-link {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: #03e9f4;
            text-decoration: none;
            text-transform: uppercase;
            transition: 0.5s;
            letter-spacing: 4px;
            overflow: hidden;
            margin: 10px 5px;
            background: rgba(255, 255, 255, 0.1);
            white-space: normal;
            word-break: break-all;
            overflow-wrap: anywhere;
            border-radius: 5px;
            border: 1px solid #03e9f4;
            font-size: 0.8em;
            line-height: 1.2;
            max-width: 100%;
        }

        .neon-link span {
            display: none;
        }

        .neon-button:hover, .neon-link:hover {
            background: rgba(3, 233, 244, 0.1);
            color: #03e9f4;
            box-shadow: 0 0 8px #03e9f4, 0 0 16px #03e9f4, 0 0 24px #03e9f4, 0 0 32px #03e9f4;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
        }

        .neon-link:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #03e9f4;
            box-shadow: none;
        }

        .neon-button span {
            position: absolute;
            display: block;
        }

        .home-button span:nth-child(1),
        .visit-button span:nth-child(1) {
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            animation: animate1 1s linear infinite;
        }

        .home-button span:nth-child(2),
        .visit-button span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }

        .home-button span:nth-child(3),
        .visit-button span:nth-child(3) {
            bottom: 0;
            right: 0;
            width: 100%;
            height: 2px;
            animation: animate3 1s linear infinite;
            animation-delay: 0.50s;
        }

        .home-button span:nth-child(4),
        .visit-button span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }

        @keyframes animate1 {
            0% {
                left: -100%;
            }
            50%, 100% {
                left: 100%;
            }
        }

        @keyframes animate2 {
            0% {
                top: -100%;
            }
            50%, 100% {
                top: 100%;
            }
        }

        @keyframes animate3 {
            0% {
                right: -100%;
            }
            50%, 100% {
                right: 100%;
            }
        }

        @keyframes animate4 {
            0% {
                bottom: -100%;
            }
            50%, 100% {
                bottom: 100%;
            }
        }

        .home-button span:nth-child(1),
        .home-button span:nth-child(2),
        .home-button span:nth-child(3),
        .home-button span:nth-child(4) {
            background: linear-gradient(90deg, transparent, #00ff00);
        }

        .visit-button span:nth-child(1),
        .visit-button span:nth-child(2),
        .visit-button span:nth-child(3),
        .visit-button span:nth-child(4) {
            background: linear-gradient(90deg, transparent, #ff0000);
        }

        .button-effect {
            position: relative;
            min-width: 100px;
            padding: 8px 12px;
            border: 0;
            border-radius: 7px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.1);
            color: rgb(255, 255, 255, 0.66);
            transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
        }

        .button-effect::before {
            content: "";
            width: 70%;
            height: 1px;
            position: absolute;
            bottom: 0;
            left: 15%;
            background: rgb(255, 255, 255);
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            opacity: 0.2;
            transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
        }

        .button-effect:hover {
            color: rgb(255, 255, 255, 1);
            transform: scale(1.1) translateY(-3px);
        }

        .button-effect:hover::before {
            opacity: 1;
        }

        .glass-container {
            width: 90%;
            max-width: 700px;
            height: auto;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px;
            border-radius: 10px;
            backdrop-filter: blur(0px);
            background-color: rgba(255, 255, 255, 0.1);
            box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
            position: relative;
            overflow: hidden;
            animation: bounceInDown 1s both;
            text-align: center;
        }

        @keyframes lightning-border {
            0% {
                border-image-slice: 1;
            }
            50% {
                border-image-slice: 10;
            }
            100% {
                border-image-slice: 1;
            }
        }

        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }

        @keyframes bounceInDown {
            from,
            60%,
            75%,
            90%,
            to {
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            }

            0% {
                opacity: 0;
                transform: translate3d(0, -3000px, 0) scaleY(3);
            }

            60% {
                opacity: 1;
                transform: translate3d(0, 25px, 0) scaleY(0.9);
            }

            75% {
                transform: translate3d(0, -10px, 0) scaleY(0.95);
            }

            90% {
                transform: translate3d(0, 5px, 0) scaleY(0.985);
            }

            to {
                transform: translate3d(0, 0, 0);
            }
        }

        .message {
            padding: 20px;
            background: linear-gradient(to right, #00c6ff, #0072ff);
            color: white;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            font-weight: bold;
            margin-bottom: 25px;
            font-size: 1.2em;
            text-align: center;
        }

        .flex-row {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            text-align: center;
            flex-wrap: wrap;
            overflow: hidden;
            white-space: normal;
            width: 100%;
        }

        .text {
            margin-right: 10px;
            white-space: nowrap;
        }

        .progress-bar-container {
            width: 100%;
            background: #e0e0e0;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .progress-bar {
            height: 15px;
            background: linear-gradient(270deg, #ff4b1f, #1fddff);
            background-size: 400% 400%;
            animation: gradientAnimation 3s ease infinite;
            transition: width 1s ease;
        }

        @keyframes gradientAnimation {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .alert-box {
            padding: 10px;
            font-size: 0.8em;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #147ab8;
            color: #ffffff;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            text-align: center;
        }

        .alert-icon {
            margin-right: 10px;
            font-size: 1.5em;
        }

        .alert-message {
            font-size: 1.2em;
        }

        .countdown-container {
            text-align: center;
            margin-top: 20px;
            position: relative;
        }

        .countdown {
            font-size: 2em;
            font-weight: bold;
            color: #333;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            width: 150px;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            position: relative;
            font-family: 'Courier New', Courier, monospace;
        }

        .countdown svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            width: 100%;
            height: 100%;
        }

        .countdown circle {
            fill: none;
            stroke-width: 10;
            stroke-linecap: round;
        }

        .countdown .bg {
            stroke: #e6e6e6;
        }

        .countdown .progress {
            stroke: #4caf50;
            stroke-dasharray: 282.6;
            stroke-dashoffset: 282.6;
            transition: stroke-dashoffset 1s linear;
        }

        @media (max-width: 1200px) {
            .glass-container {
                width: 80%;
            }
        }

        @media (max-width: 768px) {
            .message {
                font-size: 1em;
            }
            .progress-bar {
                height: 12px;
            }
            .flex-row {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
            .text, .link {
                margin: 5px 0;
            }
            .link {
                word-break: break-word;
            }
            .countdown {
                font-size: 1.5em;
                width: 120px;
                height: 120px;
            }
            .countdown svg {
                width: 120px;
                height: 120px;
            }
        }

        @media (max-width: 480px) {
            .message {
                font-size: 0.9em;
            }
            .progress-bar {
                height: 10px;
            }
            .flex-row {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
            .text, .link {
                margin: 3px 0;
            }
            .link {
                word-break: break-word;
            }
            .countdown {
                font-size: 1.2em;
                width: 100px;
                height: 100px;
            }
            .countdown svg {
                width: 100px;
                height: 100px;
            }
        }

        .home-button:hover {
            background: rgba(76, 175, 80, 0.05);
            color: #4CAF50;
            box-shadow: 0 0 8px #4CAF50, 0 0 16px #4CAF50, 0 0 24px #4CAF50, 0 0 32px #4CAF50;
        }

        .visit-button:hover {
            background: rgba(244, 67, 54, 0.05);
            color: #F44336;
            box-shadow: 0 0 8px #F44336, 0 0 16px #F44336, 0 0 24px #F44336, 0 0 32px #F44336;
        }

    </style>
</head>
<body>
    <div class="glass-container animated bounceInDown" style="border:none;">
        <div id="loading" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div class="countdown-container">
            <div class="countdown">
                <svg viewBox="0 0 100 100">
                    <circle class="bg" cx="50" cy="50" r="45"></circle>
                    <circle class="progress" cx="50" cy="50" r="45"></circle>
                </svg>
                <div id="countdown">15</div>
            </div>
        </div>
        <div class="progress-bar-container my-3">
            <div id="progress-bar" class="progress-bar"></div>
        </div>
        <div class="alert-box">
            <div class="alert-icon"><i class="fas fa-exclamation-triangle"></i></div>
            <div class="alert-message">安全性未知，是否继续</div>
        </div>
        <div class="flex-row">
            <span class="text">即将跳转到外部网站</span>
            <a class="neon-link button-effect external-link" href="<?php echo $url; ?>">
                <?php echo $url; ?>
            </a>
        </div>
        <div class="d-flex justify-content-center">
            <a href="/" class="neon-button button-effect home-button">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                返回网站
            </a>
            <a href="<?php echo $url; ?>" class="neon-button button-effect visit-button">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                立即访问
            </a>
        </div>
        <script>
            var countdownElement = document.getElementById('countdown');
            var progressBar = document.getElementById('progress-bar');
            var progressCircle = document.querySelector('.countdown .progress');
            var totalSeconds = 15;
            var initialDashoffset = 282.6;
            var timer;

            function updateTimer() {
                totalSeconds--;
                var minutes = Math.floor(totalSeconds / 60);
                var seconds = totalSeconds % 60;
                countdownElement.textContent = (minutes < 10 ? '0' : '') + minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
                progressBar.style.width = ((15 - totalSeconds) / 15 * 100) + "%";
                var progressOffset = initialDashoffset - (initialDashoffset * ((15 - totalSeconds) / 15));
                progressCircle.style.strokeDashoffset = progressOffset;
                if (totalSeconds <= 0) {
                    clearInterval(timer);
                    window.location.href = "<?php echo $url; ?>";
                }
            }

            function startTimer() {
                timer = setInterval(updateTimer, 1000);
            }

            function showLoading() {
                document.getElementById('loading').style.display = 'block';
            }

            startTimer();

            document.addEventListener("DOMContentLoaded", function() {
                var img = new Image();
                img.src = "<?php echo $background_image_url; ?>";
                img.onload = function() {
                    document.body.style.background = "url('<?php echo $background_image_url; ?>') no-repeat center center/cover";
                };
            });
        </script>
    </div>
</body>
</html>

© 版权声明
版权声明 1 本网站名称：拾忆资源
2 本站永久网址：https://yujiashiyi.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1336244931进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大都存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7 如无特别声明本文即为原创文章仅代表个人观点，版权归《拾忆资源》所有，欢迎转载，转载请保留原文链接。
THE END
子比美化电脑软件资源分享
# 子比主题美化# 跳转页面美化
喜欢就支持一下吧
点赞7 分享
拾忆的头像-拾忆资源钻石会员
 哪吒之魔童闹海TS国语-拾忆资源
 哪吒之魔童闹海TS国语
 哪吒之魔童闹海TS国语
4个月前 1608
一键玩IDE函数脚本函数LUA语言-拾忆资源
一键玩IDE函数脚本函数LUA语言
一键玩IDE函数脚本函数LUA语言
7个月前 1019
4500套Excel模板【最全面】-拾忆资源
4500套Excel模板【最全面】
4500套Excel模板【最全面】
7个月前 799
Excel表格制作excel表格学习视频集合-拾忆资源
Excel表格制作excel表格学习视频集合
Excel表格制作excel表格学习视频集合
7个月前 795
添加文章自定义前缀本站同款-拾忆资源
添加文章自定义前缀本站同款
添加文章自定义前缀本站同款
5个月前 184
文章卡片下载按钮样式美化-拾忆资源
文章卡片下载按钮样式美化
文章卡片下载按钮样式美化
5个月前 64
相关推荐
一键玩IDE函数脚本函数LUA语言-拾忆资源
一键玩IDE函数脚本函数LUA语言
一键玩IDE函数脚本函数LUA语言
7个月前 1019
4500套Excel模板【最全面】-拾忆资源
4500套Excel模板【最全面】
4500套Excel模板【最全面】
7个月前 799
Excel表格制作excel表格学习视频集合-拾忆资源
Excel表格制作excel表格学习视频集合
Excel表格制作excel表格学习视频集合
7个月前 795
添加文章自定义前缀本站同款-拾忆资源
添加文章自定义前缀本站同款
添加文章自定义前缀本站同款
5个月前 184
【新升级版】跳转页面美化子比主题美化-拾忆资源
【新升级版】跳转页面美化子比主题美化
【新升级版】跳转页面美化子比主题美化
7个月前 115
文章卡片下载按钮样式美化-拾忆资源
文章卡片下载按钮样式美化
文章卡片下载按钮样式美化
5个月前 64
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容