|
|
<!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%; |
|
|
} |
|
|
|
|
|
#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; |
|
|
} |
|
|
|
|
|
|
|
|
#fish-canvas { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100px; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
|
|
|
#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 { |
|
|
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 { |
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
@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>© 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); |
|
|
} |
|
|
|
|
|
|
|
|
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') || '[]'); |
|
|
|
|
|
|
|
|
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() |
|
|
}); |
|
|
|
|
|
|
|
|
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%'; |
|
|
|
|
|
|
|
|
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> |
|
|
|
|
|
</body> |
|
|
</html> |
