karin-plugin-kkk
Version:
Karin 的「抖音」「B 站」视频解析/动态推送插件
242 lines (216 loc) • 6.42 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{filename}}</title>
<style>
/* Base styles */
:root {
--bg-color: #121212;
--card-bg: rgba(255, 255, 255, 0.08);
--text-color: rgba(255, 255, 255, 0.9);
--accent-color: #3a86ff;
--shadow-color: rgba(0, 0, 0, 0.2);
--timer-bg: rgba(255, 255, 255, 0.1);
}
@media (prefers-color-scheme: light) {
:root {
--bg-color: #f8f9fa;
--card-bg: rgba(255, 255, 255, 0.7);
--text-color: rgba(0, 0, 0, 0.8);
--accent-color: #2563eb;
--shadow-color: rgba(0, 0, 0, 0.08);
--timer-bg: rgba(255, 255, 255, 0.8);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
transition: background-color 0.3s ease;
}
/* Video container with acrylic effect */
.video-container {
width: 100%;
max-width: 1200px;
background: var(--card-bg);
border-radius: 16px;
overflow: hidden;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.1),
0 1px 8px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
video {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
/* Countdown timer with acrylic effect */
.countdown-container {
margin-top: 24px;
position: relative;
z-index: 10;
}
.countdown-card {
background: var(--timer-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
padding: 16px 24px;
display: flex;
align-items: center;
gap: 12px;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.08),
0 1px 5px rgba(0, 0, 0, 0.12),
inset 0 1px 1px rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
@media (prefers-color-scheme: light) {
.countdown-card {
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.05),
0 1px 5px rgba(0, 0, 0, 0.08),
inset 0 1px 1px rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.3);
}
}
.notice {
color: var(--text-color);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.2px;
}
.timer-display {
display: flex;
align-items: center;
gap: 4px;
margin-left: 4px;
}
#countdown {
color: var(--accent-color);
font-weight: 600;
font-size: 16px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
position: relative;
padding: 4px 8px;
border-radius: 8px;
background: rgba(58, 134, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
@media (prefers-color-scheme: light) {
#countdown {
background: rgba(37, 99, 235, 0.08);
}
}
.countdown-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(58, 134, 255, 0.1);
color: var(--accent-color);
transition: all 0.3s ease;
}
@media (prefers-color-scheme: light) {
.countdown-icon {
background: rgba(37, 99, 235, 0.08);
}
}
.countdown-icon svg {
width: 18px;
height: 18px;
stroke: var(--accent-color);
stroke-width: 2;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.video-container {
border-radius: 12px;
}
.countdown-card {
padding: 12px 18px;
}
.notice {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="video-container">
<video controls autoplay>
<source src="{{videoDataUrl}}" type='video/mp4'>
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<div class="countdown-container">
<div class="countdown-card">
<div class="countdown-icon">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="notice">
页面有效期剩余
<span class="timer-display">
<span id="countdown">10:00</span>
</span>
</div>
</div>
</div>
<script>
let timeLeft = 600;
function updateCountdown() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
const display = document.getElementById('countdown');
display.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
// Add visual feedback when time is running low
if (timeLeft <= 60) {
display.style.color = '#ef4444';
display.style.background = 'rgba(239, 68, 68, 0.1)';
}
if (timeLeft > 0) {
timeLeft--;
setTimeout(updateCountdown, 1000);
} else {
// Optional: Add some visual feedback when time is up
const countdownCard = document.querySelector('.countdown-card');
countdownCard.style.background = 'rgba(239, 68, 68, 0.1)';
countdownCard.style.borderColor = 'rgba(239, 68, 68, 0.3)';
}
}
// Start the countdown when the page loads
document.addEventListener('DOMContentLoaded', () => {
updateCountdown();
// Add subtle animation to the countdown card
const countdownCard = document.querySelector('.countdown-card');
setTimeout(() => {
countdownCard.style.transform = 'translateY(0)';
countdownCard.style.opacity = '1';
}, 300);
});
</script>
</body>
</html>