Hermes Skills Manager
6770bc9b9d
- Trading skills (OKX, dividend, lottery, quantitative) - Creative skills (ASCII art, diagrams, video) - Development skills (GitHub, debugging, TDD) - Research skills (arXiv, blog monitoring) - Productivity skills (email, documents, notes) - MCP integration skills - Custom user skills
305 lines
7.7 KiB
HTML
305 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>演示文稿</title>
|
|
|
|
<!-- TailwindCSS CDN -->
|
|
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/3.0.23/tailwind.min.js"></script>
|
|
|
|
<!-- 字体 -->
|
|
<link href="https://fonts.loli.net/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Noto Sans SC', 'Inter', sans-serif;
|
|
background: #000;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 幻灯片容器 */
|
|
.slides-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
/* 单个幻灯片 */
|
|
.slide {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 450px;
|
|
max-height: 800px;
|
|
aspect-ratio: 9/16;
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
|
|
}
|
|
|
|
.slide.active {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.slide.prev {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
/* 动态光斑 */
|
|
.light-spot {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(100px);
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.light-spot-1 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: #3b82f6;
|
|
top: -100px;
|
|
right: -100px;
|
|
animation: float1 20s ease-in-out infinite;
|
|
}
|
|
|
|
.light-spot-2 {
|
|
width: 250px;
|
|
height: 250px;
|
|
background: #8b5cf6;
|
|
bottom: -80px;
|
|
left: -80px;
|
|
animation: float2 25s ease-in-out infinite;
|
|
}
|
|
|
|
.light-spot-3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: #06b6d4;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: float3 18s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float1 {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
25% { transform: translate(-50px, 30px); }
|
|
50% { transform: translate(30px, 50px); }
|
|
75% { transform: translate(50px, -20px); }
|
|
}
|
|
|
|
@keyframes float2 {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
33% { transform: translate(40px, -40px); }
|
|
66% { transform: translate(-30px, 30px); }
|
|
}
|
|
|
|
@keyframes float3 {
|
|
0%, 100% { transform: translate(-50%, -50%) scale(1); }
|
|
50% { transform: translate(-50%, -50%) scale(1.2); }
|
|
}
|
|
|
|
/* 内容层 */
|
|
.slide-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 进度条 */
|
|
.progress-bar {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 8px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.progress-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.3);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.progress-dot.active {
|
|
background: #fff;
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
.progress-dot:hover {
|
|
background: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
/* 页码 */
|
|
.page-number {
|
|
position: fixed;
|
|
bottom: 50px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 0.875rem;
|
|
color: rgba(255,255,255,0.4);
|
|
z-index: 100;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="slides-container">
|
|
|
|
<!-- 幻灯片 1: 封面页 -->
|
|
<div class="slide active">
|
|
<div class="light-spot light-spot-1"></div>
|
|
<div class="light-spot light-spot-2"></div>
|
|
<div class="slide-content">
|
|
<h1 class="text-5xl font-black mb-6 leading-tight">主标题</h1>
|
|
<p class="text-xl font-light text-gray-400">副标题</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 2: 标题冲击页 -->
|
|
<div class="slide">
|
|
<div class="light-spot light-spot-2"></div>
|
|
<div class="light-spot light-spot-3"></div>
|
|
<div class="slide-content">
|
|
<h1 class="text-4xl font-black leading-tight">
|
|
冲击力标题<br>第二行
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 3: 金句强调页 -->
|
|
<div class="slide">
|
|
<div class="light-spot light-spot-1"></div>
|
|
<div class="light-spot light-spot-3"></div>
|
|
<div class="slide-content">
|
|
<span class="text-6xl text-gray-600 block mb-2">"</span>
|
|
<p class="text-2xl font-bold mb-6">金句内容</p>
|
|
<span class="text-lg font-light text-gray-500">— 来源</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 幻灯片 4: 结尾行动页 -->
|
|
<div class="slide">
|
|
<div class="light-spot light-spot-1"></div>
|
|
<div class="light-spot light-spot-2"></div>
|
|
<div class="light-spot light-spot-3"></div>
|
|
<div class="slide-content">
|
|
<h1 class="text-3xl font-bold mb-8">总结金句</h1>
|
|
<p class="text-xl font-light text-gray-400">行动号召</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 进度条 -->
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
|
|
<!-- 页码 -->
|
|
<div class="page-number" id="pageNumber">1 / 4</div>
|
|
|
|
<script>
|
|
const slides = document.querySelectorAll('.slide');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const pageNumber = document.getElementById('pageNumber');
|
|
let currentSlide = 0;
|
|
|
|
// 初始化进度条
|
|
slides.forEach((_, index) => {
|
|
const dot = document.createElement('div');
|
|
dot.className = `progress-dot ${index === 0 ? 'active' : ''}`;
|
|
dot.addEventListener('click', () => goToSlide(index));
|
|
progressBar.appendChild(dot);
|
|
});
|
|
|
|
function updateSlides() {
|
|
slides.forEach((slide, index) => {
|
|
slide.classList.remove('active', 'prev');
|
|
if (index === currentSlide) {
|
|
slide.classList.add('active');
|
|
} else if (index < currentSlide) {
|
|
slide.classList.add('prev');
|
|
}
|
|
});
|
|
|
|
// 更新进度条
|
|
document.querySelectorAll('.progress-dot').forEach((dot, index) => {
|
|
dot.classList.toggle('active', index === currentSlide);
|
|
});
|
|
|
|
// 更新页码
|
|
pageNumber.textContent = `${currentSlide + 1} / ${slides.length}`;
|
|
}
|
|
|
|
function nextSlide() {
|
|
if (currentSlide < slides.length - 1) {
|
|
currentSlide++;
|
|
updateSlides();
|
|
}
|
|
}
|
|
|
|
function prevSlide() {
|
|
if (currentSlide > 0) {
|
|
currentSlide--;
|
|
updateSlides();
|
|
}
|
|
}
|
|
|
|
function goToSlide(index) {
|
|
currentSlide = index;
|
|
updateSlides();
|
|
}
|
|
|
|
// 键盘控制
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') {
|
|
nextSlide();
|
|
} else if (e.key === 'ArrowLeft') {
|
|
prevSlide();
|
|
}
|
|
});
|
|
|
|
// 触摸滑动支持
|
|
let touchStartX = 0;
|
|
document.addEventListener('touchstart', (e) => {
|
|
touchStartX = e.touches[0].clientX;
|
|
});
|
|
|
|
document.addEventListener('touchend', (e) => {
|
|
const touchEndX = e.changedTouches[0].clientX;
|
|
const diff = touchStartX - touchEndX;
|
|
if (Math.abs(diff) > 50) {
|
|
if (diff > 0) nextSlide();
|
|
else prevSlide();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|