Spaces:

kfckfcv50
/

jx

Running

File size: 46,986 Bytes

f8dc0b6

<!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://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&family=Kiwi+Maru:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #7c4dff;
            --primary-light: rgba(124, 77, 255, 0.2);
            --primary-dark: #5e35b1;
            --text-color: #333;
            --bg-color: rgba(255, 255, 255, 0.7);
            --card-bg: rgba(255, 255, 255, 0.8);
            --shadow-color: rgba(0, 0, 0, 0.1);
            --border-color: rgba(0, 0, 0, 0.1);
            --loading-bg: rgba(255, 255, 255, 0.85);
        }

        [data-theme="dark"] {
            --primary-color: #9575cd;
            --primary-light: rgba(149, 117, 205, 0.2);
            --primary-dark: #7e57c2;
            --text-color: #f5f5f5;
            --bg-color: rgba(35, 35, 45, 0.7);
            --card-bg: rgba(45, 45, 55, 0.8);
            --shadow-color: rgba(0, 0, 0, 0.3);
            --border-color: rgba(255, 255, 255, 0.1);
            --loading-bg: rgba(35, 35, 45, 0.85);
        }

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

        body {
            font-family: 'Nunito', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            background-color: #f5f5f5;
            background-image: url('https://api.suyanw.cn/api/comic3.php');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            min-height: 100vh;
            transition: all 0.3s ease;
            position: relative;
            overflow-x: hidden;
        }

        #main-container {
            max-width: 1000px;
            margin: 80px auto 120px;
            padding: 30px;
            background: var(--bg-color);
            border-radius: 15px;
            box-shadow: 0 10px 30px var(--shadow-color);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            position: relative;
            z-index: 10;
        }

        #header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            font-family: 'Kiwi Maru', serif;
            font-weight: 500;
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 2.2rem;
        }

        p {
            color: var(--text-color);
            margin-bottom: 20px;
        }

        #platform-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            background: var(--card-bg);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 5px 15px var(--shadow-color);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .platform-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            border-radius: 8px;
            transition: all 0.3s ease;
            cursor: pointer;
            background: transparent;
            border: 1px solid var(--border-color);
            min-width: 60px;
        }

        .platform-btn img {
            width: 30px;
            height: 30px;
            object-fit: contain;
            margin-bottom: 5px;
        }

        .platform-btn span {
            font-size: 12px;
            color: var(--text-color);
        }

        .platform-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px var(--shadow-color);
            border-color: var(--primary-color);
        }

        #parser-container {
            background: var(--card-bg);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px var(--shadow-color);
            margin-bottom: 30px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        #input-container {
            position: relative;
            margin-bottom: 20px;
        }

        #video-url {
            width: 100%;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-family: 'Nunito', sans-serif;
            font-size: 16px;
            background: var(--bg-color);
            color: var(--text-color);
            transition: all 0.3s ease;
        }

        #video-url:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

        #clipboard-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: var(--primary-color);
            cursor: pointer;
            font-size: 20px;
        }

        .btn {
            display: inline-block;
            padding: 12px 25px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-family: 'Nunito', sans-serif;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px var(--shadow-color);
        }

        .btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 7px 18px var(--shadow-color);
        }

        .btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px var(--shadow-color);
        }

        #parse-btn {
            width: 100%;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        #random-quote {
            text-align: center;
            font-style: italic;
            margin-bottom: 15px;
            color: var(--text-color);
            opacity: 0.8;
        }

        #result-container {
            display: none;
            margin-top: 30px;
            background: var(--card-bg);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px var(--shadow-color);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        #video-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary-color);
        }

        #video-player-container {
            margin: 20px 0;
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }

        #video-player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            box-shadow: 0 5px 15px var(--shadow-color);
        }

        #image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .gallery-img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .gallery-img:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px var(--shadow-color);
        }

        #download-btn {
            margin-top: 20px;
        }

        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--loading-bg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            display: none;
        }

        #loading-spinner {
            width: 60px;
            height: 60px;
            margin-bottom: 20px;
            border: 6px solid var(--primary-light);
            border-radius: 50%;
            border-top: 6px solid var(--primary-color);
            animation: spin 1s linear infinite;
        }

        #progress-container {
            width: 300px;
            background: var(--bg-color);
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            margin: 15px 0;
        }

        #progress-bar {
            width: 0;
            height: 100%;
            background: var(--primary-color);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .section-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--primary-color);
            margin: 30px 0 15px;
            border-left: 4px solid var(--primary-color);
            padding-left: 10px;
        }

        #faq-section {
            background: var(--card-bg);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px var(--shadow-color);
            margin-top: 30px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .faq-item {
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 15px;
        }

        .faq-question {
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            color: var(--primary-color);
        }

        .faq-question i {
            margin-right: 8px;
        }

        .faq-answer {
            padding-left: 24px;
        }

        #history-section {
            background: var(--card-bg);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px var(--shadow-color);
            margin-top: 30px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        #history-list {
            list-style: none;
            margin-top: 15px;
        }

        .history-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 10px;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
        }

        .history-item:hover {
            background: var(--primary-light);
        }

        .history-thumb {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 15px;
        }

        .history-info {
            flex-grow: 1;
        }

        .history-title {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--primary-color);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .history-url {
            font-size: 12px;
            color: var(--text-color);
            opacity: 0.7;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .history-actions {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .history-btn {
            font-size: 14px;
            padding: 5px 8px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .history-btn:hover {
            background: var(--primary-dark);
        }

        footer {
            text-align: center;
            padding: 15px;
            color: var(--text-color);
            background: var(--bg-color);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            position: relative;
            margin-top: 30px;
        }

        footer a {
            color: var(--primary-color);
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* Canvas for fish animation */
        #fish-canvas {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            z-index: -1;
        }

        /* Top buttons */
        #top-buttons {
            position: fixed;
            top: 15px;
            right: 15px;
            display: flex;
            gap: 10px;
            z-index: 100;
        }

        .top-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: var(--primary-color);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 10px var(--shadow-color);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .top-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px var(--shadow-color);
        }

        /* Feedback modal */
        #feedback-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        #feedback-modal.active {
            opacity: 1;
            visibility: visible;
        }

        #feedback-content {
            width: 90%;
            max-width: 500px;
            background: var(--card-bg);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 10px 30px var(--shadow-color);
            transform: translateY(-20px);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        #feedback-modal.active #feedback-content {
            transform: translateY(0);
        }

        #feedback-form textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin: 15px 0;
            font-family: 'Nunito', sans-serif;
            font-size: 16px;
            background: var(--bg-color);
            color: var(--text-color);
            resize: none;
        }

        #feedback-form textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

        /* Image modal */
        #image-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        #image-modal.active {
            opacity: 1;
            visibility: visible;
        }

        #modal-image {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }

        #close-modal {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 30px;
            color: white;
            background: transparent;
            border: none;
            cursor: pointer;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            #main-container {
                margin: 60px 15px 90px;
                padding: 20px;
            }

            h1 {
                font-size: 1.8rem;
            }

            .platform-btn {
                min-width: 50px;
                padding: 8px;
            }

            .platform-btn img {
                width: 24px;
                height: 24px;
            }

            #parser-container, #result-container, #faq-section, #history-section {
                padding: 15px;
            }

            #image-gallery {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }

            .gallery-img {
                height: 120px;
            }

            #feedback-content {
                width: 95%;
                padding: 20px;
            }
        }

        @media (max-width: 480px) {
            #main-container {
                margin: 50px 10px 70px;
                padding: 15px;
            }

            h1 {
                font-size: 1.5rem;
            }

            #platform-nav {
                gap: 8px;
                padding: 10px;
            }

            .platform-btn {
                min-width: 40px;
                padding: 5px;
            }

            .platform-btn img {
                width: 20px;
                height: 20px;
            }

            .platform-btn span {
                font-size: 10px;
            }

            .btn {
                padding: 10px 20px;
                font-size: 14px;
            }

            #video-title {
                font-size: 16px;
            }

            #image-gallery {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: 10px;
            }

            .gallery-img {
                height: 100px;
            }

            .history-thumb {
                width: 50px;
                height: 50px;
            }

            .history-btn {
                font-size: 12px;
                padding: 4px 6px;
            }
        }
    </style>
</head>
<body>
    <div id="top-buttons">
        <button id="theme-btn" class="top-btn" title="切换明暗模式">
            <i class="fas fa-moon"></i>
        </button>
        <button id="color-btn" class="top-btn" title="切换主题色">
            <i class="fas fa-palette"></i>
        </button>
        <button id="feedback-btn" class="top-btn" title="意见反馈">
            <i class="fas fa-comment"></i>
        </button>
    </div>

    <div id="main-container">
        <div id="header">
            <h1>短视频无水印解析</h1>
            <p>支持抖音、快手、火山、小红书等多平台短视频解析下载，去除水印</p>
        </div>

        <div id="platform-nav">
            <div class="platform-btn" data-platform="抖音">
                <img src="https://img.zlee.de/file/logo图片/1747377427291_dy.png" alt="抖音">
                <span>抖音</span>
            </div>
            <div class="platform-btn" data-platform="快手">
                <img src="https://img.zlee.de/file/logo图片/1747377484677_OIP-C.png" alt="快手">
                <span>快手</span>
            </div>
            <div class="platform-btn" data-platform="火山">
                <img src="https://img.zlee.de/file/logo图片/1747377480732_hssp.png" alt="火山">
                <span>火山</span>
            </div>
            <div class="platform-btn" data-platform="西瓜">
                <img src="https://img.zlee.de/file/logo图片/1747377479737_xgsp-black.png" alt="西瓜">
                <span>西瓜</span>
            </div>
            <div class="platform-btn" data-platform="皮皮虾">
                <img src="https://img.zlee.de/file/logo图片/1747377485180_ppx.png" alt="皮皮虾">
                <span>皮皮虾</span>
            </div>
            <div class="platform-btn" data-platform="秒拍">
                <img src="https://img.zlee.de/file/logo图片/1747377885467_mp (1).png" alt="秒拍">
                <span>秒拍</span>
            </div>
            <div class="platform-btn" data-platform="头条">
                <img src="https://img.zlee.de/file/logo图片/1747377883945_ttsp.png" alt="头条">
                <span>头条</span>
            </div>
            <div class="platform-btn" data-platform="微视">
                <img src="https://img.zlee.de/file/logo图片/1747377891436_腾讯微视.png" alt="微视">
                <span>微视</span>
            </div>
            <div class="platform-btn" data-platform="美图">
                <img src="https://img.zlee.de/file/logo图片/1747377886033_mtxx.png" alt="美图">
                <span>美图</span>
            </div>
            <div class="platform-btn" data-platform="美拍">
                <img src="https://img.zlee.de/file/logo图片/1747377887635_mp.png" alt="美拍">
                <span>美拍</span>
            </div>
            <div class="platform-btn" data-platform="微博">
                <img src="https://img.zlee.de/file/logo图片/1747377888691_wb.png" alt="微博">
                <span>微博</span>
            </div>
            <div class="platform-btn" data-platform="小红书">
                <img src="https://img.zlee.de/file/logo图片/1747377889452_xhs.png" alt="小红书">
                <span>小红书</span>
            </div>
            <div class="platform-btn" data-platform="网易云">
                <img src="https://img.zlee.de/file/logo图片/1747377894287_wyy.png" alt="网易云">
                <span>网易云</span>
            </div>
        </div>

        <div id="parser-container">
            <div id="input-container">
                <input type="text" id="video-url" placeholder="粘贴短视频分享链接..." autocomplete="off">
                <button id="clipboard-btn" title="粘贴"><i class="fas fa-paste"></i></button>
            </div>
            <button id="parse-btn" class="btn"><i class="fas fa-magic"></i> 魔法解析</button>
            <div id="random-quote">加载中...</div>
        </div>

        <div id="result-container">
            <div id="video-title"></div>
            <div id="video-player-container">
                <video id="video-player" controls playsinline></video>
            </div>
            <div id="image-gallery"></div>
            <button id="download-btn" class="btn"><i class="fas fa-download"></i> 保存视频</button>
        </div>

        <div id="history-section">
            <div class="section-title">解析历史</div>
            <ul id="history-list">
                <!-- 历史记录将在这里动态生成 -->
                <li>暂无解析历史</li>
            </ul>
        </div>

        <div id="faq-section">
            <div class="section-title">常见问题</div>
            
            <div class="faq-item">
                <div class="faq-question"><i class="fas fa-question-circle"></i> 为什么安卓手机无法下载视频？</div>
                <div class="faq-answer">安卓手机需要长按视频后选择"保存视频"选项。如果没有此选项，请尝试使用系统浏览器或其他下载器。</div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question"><i class="fas fa-question-circle"></i> 苹果手机如何保存视频？</div>
                <div class="faq-answer">苹果设备可以长按视频，然后选择"添加到相册"或"保存视频"选项。或者点击下方的"保存视频"按钮后复制链接，在浏览器中打开并长按保存。</div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question"><i class="fas fa-question-circle"></i> 解析后的视频仍有水印怎么办？</div>
                <div class="faq-answer">部分平台会在视频中嵌入水印，这种情况下无法完全去除。本工具主要去除平台叠加的悬浮水印，提升视频观看体验。</div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question"><i class="fas fa-question-circle"></i> 解析失败怎么办？</div>
                <div class="faq-answer">请确保您复制的是完整的分享链接，包含http或https前缀。如果仍然失败，可能是该平台暂不支持或接口临时故障，您可以反馈给我们。</div>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; 2023 短视频解析 | <a href="javascript:void(0)" id="footer-feedback">意见反馈</a></p>
        <canvas id="fish-canvas"></canvas>
    </footer>

    <div id="loading">
        <div id="loading-spinner"></div>
        <p>解析中，请稍候...</p>
        <div id="progress-container">
            <div id="progress-bar"></div>
        </div>
    </div>

    <div id="feedback-modal">
        <div id="feedback-content">
            <h2 style="color: var(--primary-color);margin-bottom:15px;">意见反馈</h2>
            <p>如果您遇到问题或有建议，请在下方留言：</p>
            <form id="feedback-form">
                <textarea id="feedback-text" placeholder="请描述您的问题或建议..."></textarea>
                <div style="display:flex;justify-content:flex-end;gap:10px;">
                    <button type="button" id="cancel-feedback" class="btn" style="background:gray;">取消</button>
                    <button type="submit" id="send-feedback" class="btn">发送</button>
                </div>
            </form>
        </div>
    </div>

    <div id="image-modal">
        <img id="modal-image" src="" alt="预览图">
        <button id="close-modal"><i class="fas fa-times"></i></button>
    </div>

    <script>
        // 初始化主题
        function initTheme() {
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);
            
            const themeBtn = document.getElementById('theme-btn');
            if (savedTheme === 'dark') {
                themeBtn.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                themeBtn.innerHTML = '<i class="fas fa-moon"></i>';
            }
        }

        // 初始化主题色
        function initThemeColor() {
            const themeColors = [
                {primary: '#7c4dff', light: 'rgba(124, 77, 255, 0.2)', dark: '#5e35b1'}, // 默认深紫
                {primary: '#42a5f5', light: 'rgba(66, 165, 245, 0.2)', dark: '#1976d2'}, // 淡蓝
                {primary: '#ec407a', light: 'rgba(236, 64, 122, 0.2)', dark: '#d81b60'}, // 淡粉
                {primary: '#66bb6a', light: 'rgba(102, 187, 106, 0.2)', dark: '#43a047'}, // 淡绿
                {primary: '#ff9800', light: 'rgba(255, 152, 0, 0.2)', dark: '#f57c00'}, // 淡橙
            ];
            
            const colorIndex = parseInt(localStorage.getItem('colorIndex') || '0');
            const color = themeColors[colorIndex];
            
            document.documentElement.style.setProperty('--primary-color', color.primary);
            document.documentElement.style.setProperty('--primary-light', color.light);
            document.documentElement.style.setProperty('--primary-dark', color.dark);
            
            document.getElementById('color-btn').onclick = function() {
                const nextIndex = (colorIndex + 1) % themeColors.length;
                localStorage.setItem('colorIndex', nextIndex);
                initThemeColor();
            };
        }

        // 加载樱花特效
        function loadSakuraEffect() {
            const script = document.createElement('script');
            script.src = 'https://api.suyanw.cn/api/mouse/yinghua.js';
            document.body.appendChild(script);
        }

        // 加载Live2D看板娘
        function loadLive2D() {
            const live2d_script1 = document.createElement('script');
            live2d_script1.src = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js';
            document.body.appendChild(live2d_script1);
        }

        // 鱼游动画
        function initFishAnimation() {
            const canvas = document.getElementById('fish-canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
            
            const fishes = [];
            for (let i = 0; i < 8; i++) {
                fishes.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    size: 5 + Math.random() * 10,
                    speed: 0.5 + Math.random() * 1.5,
                    angle: Math.random() * Math.PI * 2,
                    color: getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
                });
            }
            
            function updateFishes() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                for (const fish of fishes) {
                    // 更新位置
                    fish.x += Math.cos(fish.angle) * fish.speed;
                    fish.y += Math.sin(fish.angle) * fish.speed;
                    
                    // 边界检查
                    if (fish.x < 0) fish.x = canvas.width;
                    if (fish.x > canvas.width) fish.x = 0;
                    if (fish.y < 0) fish.y = canvas.height;
                    if (fish.y > canvas.height) fish.y = 0;
                    
                    // 随机变换方向
                    if (Math.random() < 0.02) {
                        fish.angle += (Math.random() - 0.5) * 0.5;
                    }
                    
                    // 绘制鱼
                    ctx.fillStyle = fish.color;
                    ctx.beginPath();
                    ctx.moveTo(fish.x, fish.y);
                    ctx.lineTo(fish.x - fish.size * 1.5, fish.y - fish.size / 2);
                    ctx.lineTo(fish.x - fish.size * 1.5, fish.y + fish.size / 2);
                    ctx.closePath();
                    ctx.fill();
                    
                    // 绘制尾巴
                    ctx.beginPath();
                    ctx.moveTo(fish.x - fish.size * 1.2, fish.y);
                    ctx.lineTo(fish.x - fish.size * 1.8, fish.y - fish.size * 0.8);
                    ctx.lineTo(fish.x - fish.size * 1.8, fish.y + fish.size * 0.8);
                    ctx.closePath();
                    ctx.fill();
                }
                
                requestAnimationFrame(updateFishes);
            }
            
            updateFishes();
            
            // 响应窗口大小变化
            window.addEventListener('resize', () => {
                canvas.width = canvas.offsetWidth;
                canvas.height = canvas.offsetHeight;
            });
        }

        // 获取随机文案
        async function fetchRandomQuote() {
            try {
                const response = await fetch('https://api.suyanw.cn/api/weimei.php');
                if (!response.ok) throw new Error('网络错误');
                const text = await response.text();
                document.getElementById('random-quote').textContent = text || "每一个视频背后，都有一个想被分享的故事";
            } catch (error) {
                document.getElementById('random-quote').textContent = "每一个视频背后，都有一个想被分享的故事";
                console.error('获取随机文案失败:', error);
            }
        }

        // 加载历史记录
        function loadHistory() {
            const historyList = document.getElementById('history-list');
            const history = JSON.parse(localStorage.getItem('parseHistory') || '[]');
            
            if (history.length === 0) {
                historyList.innerHTML = '<li>暂无解析历史</li>';
                return;
            }
            
            historyList.innerHTML = '';
            history.forEach((item, index) => {
                const li = document.createElement('li');
                li.className = 'history-item';
                li.innerHTML = `
                    <img class="history-thumb" src="${item.cover || 'https://via.placeholder.com/60'}" alt="缩略图">
                    <div class="history-info">
                        <div class="history-title">${item.title || '未知标题'}</div>
                        <div class="history-url">${item.url}</div>
                    </div>
                    <div class="history-actions">
                        <button class="history-btn history-reparse" data-url="${item.url}"><i class="fas fa-redo"></i> 重新解析</button>
                        <button class="history-btn history-delete" data-index="${index}"><i class="fas fa-trash"></i> 删除</button>
                    </div>
                `;
                historyList.appendChild(li);
            });
            
            // 绑定重新解析按钮
            document.querySelectorAll('.history-reparse').forEach(btn => {
                btn.addEventListener('click', function() {
                    const url = this.getAttribute('data-url');
                    document.getElementById('video-url').value = url;
                    document.getElementById('parse-btn').click();
                });
            });
            
            // 绑定删除按钮
            document.querySelectorAll('.history-delete').forEach(btn => {
                btn.addEventListener('click', function() {
                    const index = parseInt(this.getAttribute('data-index'));
                    const history = JSON.parse(localStorage.getItem('parseHistory') || '[]');
                    history.splice(index, 1);
                    localStorage.setItem('parseHistory', JSON.stringify(history));
                    loadHistory();
                });
            });
        }

        // 保存到历史记录
        function saveToHistory(data) {
            if (!data || !data.url) return;
            
            let history = JSON.parse(localStorage.getItem('parseHistory') || '[]');
            
            // 检查是否已经存在相同的URL
            const exists = history.findIndex(item => item.url === data.url);
            if (exists > -1) {
                history.splice(exists, 1);
            }
            
            // 添加到历史记录开头
            history.unshift({
                url: data.url,
                title: data.title || '',
                cover: data.cover || '',
                timestamp: new Date().getTime()
            });
            
            // 保持历史记录不超过10条
            if (history.length > 10) {
                history = history.slice(0, 10);
            }
            
            localStorage.setItem('parseHistory', JSON.stringify(history));
            loadHistory();
        }

        // 解析视频
        async function parseVideo(url) {
            if (!url) {
                alert('请输入有效的视频链接');
                return;
            }

            // 显示加载动画和进度条
            const loading = document.getElementById('loading');
            const progressBar = document.getElementById('progress-bar');
            loading.style.display = 'flex';
            progressBar.style.width = '0%';

            // API列表
            const apiList = [
                `https://api.kxzjoker.cn/api/parse?url=${encodeURIComponent(url)}`,
                `https://api.kxzjoker.cn/api/parse2?url=${encodeURIComponent(url)}`,
                `https://api.kxzjoker.cn/api/parse3?url=${encodeURIComponent(url)}`
            ];

            let successData = null;
            let apiIndex = 0;

            while (apiIndex < apiList.length && !successData) {
                try {
                    // 更新进度条
                    const progress = (apiIndex / apiList.length) * 90;
                    progressBar.style.width = `${progress}%`;

                    // 模拟网络延迟
                    await new Promise(resolve => setTimeout(resolve, 800));

                    const response = await fetch(apiList[apiIndex]);
                    const data = await response.json();

                    if (data && data.code === 200) {
                        successData = data.data;
                        break;
                    }
                } catch (error) {
                    console.error(`API ${apiIndex + 1} 解析失败:`, error);
                }

                apiIndex++;
            }

            // 最终进度
            progressBar.style.width = '100%';
            await new Promise(resolve => setTimeout(resolve, 500));

            // 隐藏加载动画
            loading.style.display = 'none';

            if (successData) {
                displayResult(successData, url);
                saveToHistory({
                    url: url,
                    title: successData.title || '',
                    cover: successData.cover || successData.thumbnail || ''
                });
            } else {
                alert('解析失败，请检查链接是否正确或尝试其他平台的视频');
            }
        }

        // 显示解析结果
        function displayResult(data, originalUrl) {
            const resultContainer = document.getElementById('result-container');
            const videoTitle = document.getElementById('video-title');
            const videoPlayer = document.getElementById('video-player');
            const imageGallery = document.getElementById('image-gallery');
            const downloadBtn = document.getElementById('download-btn');

            // 清空旧内容
            videoTitle.textContent = '';
            videoPlayer.src = '';
            imageGallery.innerHTML = '';

            // 显示标题
            videoTitle.textContent = data.title || '视频标题';

            // 线性滚动到结果区域
            resultContainer.style.display = 'block';
            setTimeout(() => {
                resultContainer.scrollIntoView({ behavior: 'smooth' });
            }, 300);

            // 根据结果类型显示内容
            if (data.images && data.images.length > 0) {
                // 图集
                videoPlayer.style.display = 'none';
                imageGallery.style.display = 'grid';
                downloadBtn.style.display = 'none';

                data.images.forEach(imgUrl => {
                    const imgContainer = document.createElement('div');
                    imgContainer.className = 'gallery-img-wrapper';

                    const img = document.createElement('img');
                    img.className = 'gallery-img';
                    img.src = imgUrl;
                    img.alt = '图集';
                    img.onclick = function() {
                        document.getElementById('modal-image').src = imgUrl;
                        document.getElementById('image-modal').classList.add('active');
                    };

                    imgContainer.appendChild(img);
                    imageGallery.appendChild(imgContainer);
                });
            } else {
                // 视频
                videoPlayer.style.display = 'block';
                imageGallery.style.display = 'none';
                downloadBtn.style.display = 'block';

                videoPlayer.src = data.url || '';
                videoPlayer.poster = data.cover || data.thumbnail || '';

                downloadBtn.onclick = function() {
                    const videoUrl = data.url;
                    if (!videoUrl) {
                        alert('获取下载链接失败');
                        return;
                    }

                    // 复制视频链接到粘贴板
                    navigator.clipboard.writeText(videoUrl).then(() => {
                        console.log('视频链接已复制到粘贴板');
                    }).catch(err => {
                        console.error('复制失败:', err);
                    });

                    // 尝试创建一个下载链接并点击
                    try {
                        const a = document.createElement('a');
                        a.href = videoUrl;
                        a.download = `${data.title || 'video'}.mp4`;
                        a.target = '_blank';
                        a.click();
                        alert('电脑端请右键视频选择"另存为"。手机端请长按视频选择"保存视频"。视频链接已复制到剪贴板，您也可以在浏览器中打开链接下载。');
                    } catch (error) {
                        alert('请在视频上长按选择保存视频，或使用视频下载器下载');
                        console.error('下载失败:', error);
                    }
                };
            }
        }

        // 监听剪贴板
        function monitorClipboard() {
            const videoUrlInput = document.getElementById('video-url');
            const pasteButton = document.getElementById('clipboard-btn');
            
            pasteButton.addEventListener('click', async function() {
                try {
                    const text = await navigator.clipboard.readText();
                    if (text && (text.includes('http://') || text.includes('https://'))) {
                        videoUrlInput.value = text;
                    }
                } catch (error) {
                    console.error('无法访问剪贴板:', error);
                    alert('请手动粘贴链接到输入框');
                }
            });
            
            // 监听获取焦点事件，自动读取剪贴板
            videoUrlInput.addEventListener('focus', async function() {
                if (this.value === '') {
                    try {
                        const text = await navigator.clipboard.readText();
                        if (text && (text.includes('http://') || text.includes('https://'))) {
                            this.value = text;
                        }
                    } catch (error) {
                        console.error('无法自动读取剪贴板，用户可能未授权或浏览器不支持');
                    }
                }
            });
        }

        // 页面加载完成时执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化主题
            initTheme();
            initThemeColor();
            
            // 加载特效
            loadSakuraEffect();
            loadLive2D();
            initFishAnimation();
            
            // 加载文案和历史记录
            fetchRandomQuote();
            loadHistory();
            
            // 监听剪贴板
            monitorClipboard();
            
            // 绑定事件
            document.getElementById('theme-btn').addEventListener('click', function() {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                document.documentElement.setAttribute('data-theme', newTheme);
                localStorage.setItem('theme', newTheme);
                
                // 更新按钮图标
                this.innerHTML = newTheme === 'dark' ? 
                    '<i class="fas fa-sun"></i>' : 
                    '<i class="fas fa-moon"></i>';
            });
            
            document.getElementById('parse-btn').addEventListener('click', function() {
                const url = document.getElementById('video-url').value.trim();
                parseVideo(url);
            });
            
            document.getElementById('feedback-btn').addEventListener('click', function() {
                document.getElementById('feedback-modal').classList.add('active');
            });
            
            document.getElementById('footer-feedback').addEventListener('click', function() {
                document.getElementById('feedback-modal').classList.add('active');
            });
            
            document.getElementById('cancel-feedback').addEventListener('click', function() {
                document.getElementById('feedback-modal').classList.remove('active');
            });
            
            document.getElementById('feedback-form').addEventListener('submit', function(e) {
                e.preventDefault();
                const feedback = document.getElementById('feedback-text').value.trim();
                if (!feedback) {
                    alert('请输入反馈内容');
                    return;
                }
                console.log('用户反馈:', feedback);
                alert('感谢您的反馈！我们会尽快处理。');
                document.getElementById('feedback-text').value = '';
                document.getElementById('feedback-modal').classList.remove('active');
            });
            
            document.getElementById('close-modal').addEventListener('click', function() {
                document.getElementById('image-modal').classList.remove('active');
            });
            
            // 平台点击事件
            document.querySelectorAll('.platform-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const platform = this.getAttribute('data-platform');
                    
                    // 这里只是显示提示，因为不同平台的链接格式不同
                    let videoUrl = document.getElementById('video-url');
                    if (!videoUrl.value) {
                        videoUrl.placeholder = `请粘贴${platform}分享链接...`;
                    }
                });
            });
        });
    </script>
    <!-- 可以在这里添加Live2D的引用 -->
</body>
</html>