video

video list
目前为 2024-06-17 提交的版本。查看最新版本。
此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/498124/1395424/video.js
提问、发表评价，或者举报这个脚本。
Wrap lines
function generateJsonIndexContent(finalData) {
    return `
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }
        .video-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            max-width: 1200px;
            margin-bottom: 20px;
        }
        .notification {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            z-index: 1000;
        }
        .video {
            width: 48%;
            position: relative;
            max-width: 48%;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        .network-label {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 4px;
            font-size: 10px;
        }
        .video img {
            width: 100%;
            height: auto;
        }
        .video video {
            width: 100%;
            height: auto;
        }
        .video-title {
            margin: 10px 0;
            font-weight: bold;
            text-align: center;
        }
        .video-mark {
            color: gray;
            text-align: center;
        }
        @media (min-width: 768px) {
            .video {
                width: 23.5%;
                max-width: 23.5%;
            }
        }
        .sidebar {
            position: fixed;
            right: -300px;
            top: 0;
            width: 300px;
            height: 100%;
            background-color: #f1f1f1;
            box-shadow: -2px 0 5px rgba(0,0,0,0.5);
            transition: right 0.3s;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }
        .sidebar.open {
            right: 0;
        }
        .sidebar-button {
            position: fixed;
            right: -70px;
            top: 95%;
            transform: translateY(-50%);
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            z-index: 1000;
            transition: right 0.3s ease;
        }
        .sidebar-button:hover,
        .sidebar-button:focus {
            right: 20px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content.dark-mode {
            background-color: var(--background-dark);
            color: var(--text-dark);
            border-color: var(--border-dark);
        }
        .modal-content {
            background-color: var(--background-light);
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            color: var(--text-light);
        }
        .modal-close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .detail-button {
            background-color: var(--button-background-light);
            color: var(--button-text-light);
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            outline: none;
            border-radius: 4px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        [data-theme="dark"] .detail-button {
            background-color: var(--button-background-dark);
            color: var(--button-text-dark);
        }
        .detail-button:hover {
            background-color: #45a049;
        }
        .detail-button:focus {
            background-color: #388e3c;
        }
        :root {
            --background-light: #ffffff;
            --background-dark: #000000;
            --text-light: #000000;
            --text-dark: #ffffff;
            --border-light: #cccccc;
            --border-dark: #333333;
            --modal-background-light: #fefefe;
            --modal-background-dark: #1c1c1c;
            --button-background-light: #4CAF50;
            --button-background-dark: #444444;
            --button-text-light: white;
            --button-text-dark: white;
            --message-background-light: #f1f1f1;
            --message-background-dark: #333333;
            --message-border-light: #ccc;
            --message-border-dark: #555;
        }
        [data-theme="light"] {
            background-color: var(--background-light);
            color: var(--text-light);
        }
        [data-theme="dark"] {
            background-color: var(--background-dark);
            color: var(--text-dark);
        }
        [data-theme="light"] .sun {
            display: none;
        }
        [data-theme="dark"] .moon {
            display: none;
        }
        [data-theme="light"] input, [data-theme="light"] button {
            background-color: #ffffff;
            border: 1px solid var(--border-light);
            color: var(--text-light);
        }
        [data-theme="dark"] .modal-content {
            background-color: var(--modal-background-dark);
            color: var(--text-dark);
            border-color: var(--border-dark);
        }
        .message {
            text-align: center;
            padding: 10px;
            margin-top: 20px;
            background-color: var(--message-background-light);
            border: 1px solid var(--message-border-light);
            transition: background-color 0.3s, border-color 0.3s, color 0.3s;
        }
        [data-theme="dark"] .message {
            background-color: var(--message-background-dark);
            border-color: var(--message-border-dark);
            color: var(--text-dark);
        }
        [data-theme="dark"] input, [data-theme="dark"] button {
            background-color: #333333;
            border: 1px solid var(--border-dark);
            color: var(--text-dark);
        }
        .toggle {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            border-radius: 4px;
            background-color: #fff;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            position: fixed;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <button class="toggle">
        <svg class="sun" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="
            <svg class="moon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11-11-4.925-11-11 4.925-11 11-11zM12 3a8 8 0 100 16 8 8 0 000-16z"></path></svg>
    </button>
    <div class="notification">
        This is a notification!
    </div>
    <div class="sidebar">
        <button class="sidebar-button">></button>
        <div class="modal">
            <div class="modal-content">
                <span class="modal-close">&times;</span>
                <h2>Modal Header</h2>
                <p>Some text inside the modal.</p>
            </div>
        </div>
    </div>
    <div class="video-row">
        ${finalData.map(video => `
        <div class="video">
            ${video.type === 'image' ? `<img src="${video.url}" alt="${video.title}">` : `<video controls><source src="${video.url}" type="${video.mime_type}"></video>`}
            <div class="video-title">${video.title}</div>
            <div class="video-mark">${video.type === 'image' ? 'Image' : 'Video'}</div>
            <div class="network-label">${video.network}</div>
        </div>`).join('')}
    </div>
    <script>
        const jsonData = ${JSON.stringify(finalData, null, 4)};
        console.log(jsonData); // Just for demonstration
        // Your other JavaScript code here
    </script>
</body>
</html>
`;
}
欢迎访问Greasy Fork镜像
