video list
目前為
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/498124/1395424/video.js
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">×</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>
`;
}