1336 lines
70 KiB
HTML
1336 lines
70 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Paper Burner X - 开源的、在浏览器中即开即用的 AI 工作站，专为扫除海量的 PDF 文献、复杂的公式和跨语言的障碍。支持前端 Agent 驱动的智能检索、高性能批量处理和完全本地化部署。">
|
||
<title>Paper Burner X - 开源 AI 文献工作站</title>
|
||
<link rel="icon" type="image/svg+xml" href="../../public/pure.svg">
|
||
<!-- Tailwind CSS & 依赖库 -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://gcore.jsdelivr.net/npm/iconify-icon@2.0.0/dist/iconify-icon.min.js"></script>
|
||
<!-- GitHub Stars 统一获取模块 -->
|
||
<script src="../../js/utils/github-stars.js"></script>
|
||
<!-- 后端模式未登录门禁（在有后端部署时，直接要求登录） -->
|
||
<script src="/js/boot/backend-gate.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
||
<style>
|
||
/* 谷歌字体 Inter (更专业、现代) */
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
|
||
/* 基础字体设置 */
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
/* 背景渐变 - 更加细腻 */
|
||
.gradient-bg {
|
||
/* background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%); */
|
||
background-color: #F3F6FA; /* 主题背景色 */
|
||
}
|
||
/* 卡片渐变 */
|
||
.gradient-card {
|
||
background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%);
|
||
}
|
||
/* 通用过渡效果 */
|
||
.transition-all {
|
||
transition: all 0.3s ease;
|
||
}
|
||
/* 文件列表项样式 */
|
||
.file-list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: 0.5rem;
|
||
background-color: #f8f9fa;
|
||
margin-bottom: 0.5rem;
|
||
border: 1px solid #e9ecef;
|
||
}
|
||
.file-list-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
/* API Key 输入框样式 */
|
||
textarea.api-key-input {
|
||
min-height: 60px; /* 最小高度 */
|
||
resize: vertical; /* 允许垂直方向调整大小 */
|
||
}
|
||
/* 闪烁提示动画基类 */
|
||
.flash-tip-anim {
|
||
opacity: 0;
|
||
transition: opacity 0.5s;
|
||
will-change: opacity;
|
||
}
|
||
/* 闪烁提示显示状态 */
|
||
.flash-tip-anim.show {
|
||
opacity: 1;
|
||
}
|
||
/* 闪烁提示隐藏状态 */
|
||
.flash-tip-anim.hide {
|
||
opacity: 0;
|
||
}
|
||
/* Skeleton Character Rows */
|
||
.skeleton-bg .skeleton-row {
|
||
border-radius: 8px;
|
||
background: linear-gradient(90deg, #e5e7eb 25%, #f3f6fa 50%, #e5e7eb 75%);
|
||
background-size: 200% 100%;
|
||
animation: shimmer 1.8s infinite linear;
|
||
}
|
||
.skeleton-fake-text {
|
||
color: #d1d5db;
|
||
font-size: 1rem;
|
||
font-family: 'Fira Mono', 'Consolas', monospace;
|
||
font-weight: bold;
|
||
opacity: 0.5;
|
||
letter-spacing: 0.1em;
|
||
animation: shimmer 1.8s infinite linear;
|
||
user-select: none;
|
||
}
|
||
.skeleton-fake-text.text-lg {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
/* Premium Commercial Gradient Background - 增强纵深感 */
|
||
.ocean-gradient-bg {
|
||
background-color: #FAFBFC;
|
||
background-image:
|
||
radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.15) 0px, transparent 50%),
|
||
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.12) 0px, transparent 50%),
|
||
radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.1) 0px, transparent 50%),
|
||
radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.13) 0px, transparent 50%),
|
||
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.12) 0px, transparent 50%),
|
||
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.12) 0px, transparent 50%),
|
||
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.12) 0px, transparent 50%);
|
||
background-attachment: fixed; /* 视差效果 */
|
||
}
|
||
|
||
/* Modern Sticky Header */
|
||
.glass-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 50;
|
||
padding: 1rem 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: all 0.3s ease;
|
||
background: transparent;
|
||
}
|
||
.glass-header.scrolled {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
backdrop-filter: blur(16px) saturate(180%);
|
||
border-bottom: 1px solid rgba(209, 213, 219, 0.3);
|
||
padding-top: 0.75rem;
|
||
padding-bottom: 0.75rem;
|
||
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
/* Hero Premium Card */
|
||
.hero-premium-card {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
box-shadow:
|
||
0 20px 60px -12px rgba(50, 50, 93, 0.15),
|
||
0 8px 24px -8px rgba(0, 0, 0, 0.08),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
/* Hero Carousel */
|
||
.hero-carousel-item {
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
transition: opacity 0.6s ease-in-out;
|
||
pointer-events: none;
|
||
}
|
||
.hero-carousel-item.active {
|
||
opacity: 1;
|
||
position: relative;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* Carousel Indicators */
|
||
.carousel-indicators {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
justify-content: center;
|
||
margin-top: 2rem;
|
||
}
|
||
.carousel-indicator {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: rgba(99, 102, 241, 0.3);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.carousel-indicator.active {
|
||
width: 32px;
|
||
border-radius: 5px;
|
||
background: rgba(99, 102, 241, 0.8);
|
||
}
|
||
.carousel-indicator:hover {
|
||
background: rgba(99, 102, 241, 0.6);
|
||
}
|
||
|
||
/* Mobile optimization for carousel indicators */
|
||
@media (max-width: 767px) {
|
||
.carousel-indicators {
|
||
gap: 0.35rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
.carousel-indicator {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
.carousel-indicator.active {
|
||
width: 20px;
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
.stats-badge {
|
||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(147, 197, 253, 0.12));
|
||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: default;
|
||
}
|
||
.stats-badge:hover {
|
||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 197, 253, 0.2));
|
||
border-color: rgba(59, 130, 246, 0.35);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
||
}
|
||
.stats-badge iconify-icon {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.stats-badge:hover iconify-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* Mobile optimization for badges */
|
||
@media (max-width: 767px) {
|
||
.feature-badges-container {
|
||
display: none !important;
|
||
}
|
||
.hero-carousel-container {
|
||
min-height: 420px !important;
|
||
}
|
||
}
|
||
|
||
.select-anim {
|
||
/* 原有文字渐变动画可删除或保留 */
|
||
}
|
||
.select-anim-bg {
|
||
position: relative;
|
||
display: inline-block;
|
||
z-index: 1;
|
||
font-weight: bold;
|
||
}
|
||
.select-anim-bg::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);
|
||
opacity: 0.2;
|
||
z-index: -1;
|
||
border-radius: 4px;
|
||
transition: none;
|
||
animation: select-bg-sweep 1.8s cubic-bezier(.4,0,.2,1) 1;
|
||
}
|
||
@keyframes select-bg-sweep {
|
||
0% { width: 0; }
|
||
15% { width: 0; }
|
||
100% { width: 100%; }
|
||
}
|
||
.feature-card-modern {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 16px;
|
||
padding: clamp(24px, 3vw, 36px);
|
||
background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFB 100%);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
box-shadow:
|
||
0 1px 2px 0 rgba(0, 0, 0, 0.05),
|
||
0 20px 40px -12px rgba(50, 50, 93, 0.08);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
min-height: 280px;
|
||
}
|
||
.feature-card-modern::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(59, 130, 246, 0.05));
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.feature-card-modern::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, #6366F1, #3B82F6, #06B6D4);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.feature-card-modern:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow:
|
||
0 1px 2px 0 rgba(0, 0, 0, 0.05),
|
||
0 32px 64px -16px rgba(50, 50, 93, 0.15);
|
||
border-color: rgba(99, 102, 241, 0.2);
|
||
}
|
||
.feature-card-modern:hover::before {
|
||
opacity: 1;
|
||
}
|
||
.feature-card-modern:hover::after {
|
||
transform: scaleX(1);
|
||
}
|
||
.feature-card-modern > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.feature-icon-ring {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: clamp(56px, 4.5vw, 68px);
|
||
height: clamp(56px, 4.5vw, 68px);
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, #FFFFFF, #F8FAFB);
|
||
box-shadow:
|
||
0 2px 8px -2px rgba(0, 0, 0, 0.08),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||
}
|
||
.feature-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.45rem;
|
||
margin-top: 1.1rem;
|
||
}
|
||
.feature-meta span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.35rem 0.85rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.01em;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.vision-card {
|
||
position: relative;
|
||
padding: clamp(20px, 2.4vw, 32px);
|
||
border-radius: 20px;
|
||
background: linear-gradient(130deg, rgba(243,246,250,0.85), rgba(255,255,255,0.96));
|
||
border: 1px solid rgba(87,130,243,0.12);
|
||
box-shadow: 0 10px 24px rgba(87,130,243,0.14);
|
||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||
height: 100%;
|
||
}
|
||
.vision-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 14px 28px rgba(87,130,243,0.18);
|
||
}
|
||
.vision-card h3 {
|
||
font-weight: 600;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.vision-card .vision-meta {
|
||
margin-top: 1.1rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.4rem;
|
||
}
|
||
.vision-card .vision-meta span {
|
||
padding: 0.35rem 0.75rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
background: rgba(87,130,243,0.18);
|
||
color: #2f4bb8;
|
||
font-weight: 600;
|
||
}
|
||
.vision-card--mission {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: clamp(16px, 1.8vw, 24px);
|
||
}
|
||
.vision-card--mission p {
|
||
text-align: left;
|
||
}
|
||
.vision-card--mission .vision-meta {
|
||
justify-content: flex-start;
|
||
}
|
||
.vision-card--upgrade {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: clamp(16px, 1.8vw, 24px);
|
||
}
|
||
|
||
.upgrade-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: clamp(12px, 1.2vw, 16px);
|
||
margin-top: 0.75rem;
|
||
}
|
||
.upgrade-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
padding: clamp(14px, 1.6vw, 18px);
|
||
border-radius: 20px;
|
||
background: linear-gradient(135deg, rgba(87,130,243,0.08), rgba(255,255,255,0.98));
|
||
border: 1px solid rgba(87,130,243,0.12);
|
||
box-shadow: 0 10px 24px rgba(87,130,243,0.14);
|
||
}
|
||
.upgrade-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 14px;
|
||
background: rgba(87,130,243,0.18);
|
||
color: #2950d6;
|
||
}
|
||
.upgrade-item h4 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
.upgrade-item p {
|
||
font-size: 0.85rem;
|
||
color: #4b5563;
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Header Elements */
|
||
.header-logo img {
|
||
height: 36px;
|
||
width: auto;
|
||
transition: all 0.3s ease;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.header-logo img { height: 42px; }
|
||
}
|
||
|
||
.header-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 12px;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
backdrop-filter: blur(8px);
|
||
border: 1px solid rgba(99, 102, 241, 0.15);
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
color: #4338ca;
|
||
box-shadow: 0 2px 6px rgba(99, 102, 241, 0.06);
|
||
transition: all 0.2s ease;
|
||
animation: banner-slide-down 0.5s ease-out forwards;
|
||
}
|
||
.header-pill:hover {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border-color: rgba(99, 102, 241, 0.3);
|
||
transform: translateY(1px);
|
||
}
|
||
@keyframes banner-slide-down {
|
||
from { opacity: 0; transform: translateY(-20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.github-btn-modern {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 16px;
|
||
background: rgba(31, 41, 55, 0.9); /* Dark background for contrast */
|
||
color: white;
|
||
border-radius: 12px;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
transition: all 0.2s ease;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.github-btn-modern:hover {
|
||
background: rgba(0, 0, 0, 1);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* How it works Section */
|
||
.steps-section {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.step-card {
|
||
background: rgba(255, 255, 255, 0.6);
|
||
backdrop-filter: blur(12px);
|
||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
border-radius: 24px;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
||
}
|
||
.step-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
|
||
background: rgba(255, 255, 255, 0.8);
|
||
}
|
||
.step-icon-wrapper {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin: 0 auto 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20px;
|
||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||
color: #0ea5e9;
|
||
font-size: 2.5rem;
|
||
position: relative;
|
||
}
|
||
.step-number {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: -10px;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #3b82f6;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
border: 2px solid white;
|
||
}
|
||
|
||
/* Mobile optimization for steps */
|
||
@media (max-width: 767px) {
|
||
.step-card {
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
text-align: left;
|
||
gap: 1rem;
|
||
}
|
||
.step-icon-wrapper {
|
||
width: 60px;
|
||
height: 60px;
|
||
font-size: 1.8rem;
|
||
margin: 0; /* Reset margin for flex layout */
|
||
flex-shrink: 0;
|
||
}
|
||
.step-card h3 {
|
||
margin-top: 0.5rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="ocean-gradient-bg min-h-screen">
|
||
|
||
<!-- ===================== -->
|
||
<!-- Modern Sticky Header -->
|
||
<!-- ===================== -->
|
||
<header id="mainHeader" class="glass-header">
|
||
<!-- Left: Logo -->
|
||
<div class="header-logo flex-shrink-0">
|
||
<img src="../../public/h_with_name.svg" alt="Paper Burner X">
|
||
</div>
|
||
|
||
<!-- Center: Update Pill (Optional, can be hidden if needed) -->
|
||
<div id="headerBannerPill" class="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center">
|
||
<div class="header-pill cursor-pointer" onclick="this.style.display='none'">
|
||
<iconify-icon icon="carbon:information-filled" class="text-blue-500" width="16"></iconify-icon>
|
||
<span>📚 全新 Agent 升级，支持多种检索工具</span>
|
||
<iconify-icon icon="carbon:close" class="text-gray-400 hover:text-gray-600 ml-1" width="14"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Actions -->
|
||
<div class="flex items-center gap-3 md:gap-4 flex-shrink-0">
|
||
<!-- GitHub Button -->
|
||
<a href="https://github.com/Feather-2/paper-burner" target="_blank" rel="noopener noreferrer" class="github-btn-modern group">
|
||
<iconify-icon icon="carbon:logo-github" width="20"></iconify-icon>
|
||
<span class="hidden sm:inline">Star on GitHub</span>
|
||
<div id="githubStarsTag" class="hidden items-center gap-1 px-2 py-0.5 bg-white/20 rounded-full text-xs font-medium ml-1">
|
||
<iconify-icon icon="carbon:star-filled" class="text-yellow-400" width="12"></iconify-icon>
|
||
<span id="githubStarsCount"></span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===================== -->
|
||
<!-- Landing Page Content -->
|
||
<!-- ===================== -->
|
||
<div id="landingPageSection" class="min-h-screen flex flex-col items-center justify-start pt-24 sm:pt-32 p-4 sm:p-8 text-gray-800 relative" style="opacity: 0; transition: opacity 0.5s ease-in-out;">
|
||
|
||
<div class="max-w-6xl w-full space-y-16 md:space-y-24 text-center landing-content-container relative z-[2]">
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero-section pt-12 md:pt-16 min-h-[85vh] flex flex-col justify-center">
|
||
<div class="mb-6 md:mb-8 animate-float">
|
||
<img src="../../public/pure.svg" alt="Paper Burner X Logo" class="w-28 h-28 sm:w-36 sm:h-36 md:w-44 md:h-44 mx-auto drop-shadow-lg">
|
||
</div>
|
||
|
||
<!-- Hero Carousel Container -->
|
||
<div class="hero-carousel-container relative" style="min-height: 520px;">
|
||
|
||
<!-- Slide 1: 阅读优先 -->
|
||
<div class="hero-carousel-item active">
|
||
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
|
||
先读懂，再借助 AI<br class="hidden sm:block">
|
||
<span class="select-anim-bg">让深度阅读与智能辅助完美结合</span>
|
||
</h1>
|
||
<p class="text-xs text-gray-500 mb-4 max-w-3xl mx-auto italic">
|
||
"在学习初期阶段延迟引入 AI 工具，优先促进自我驱动的认知建构。此种模式可在不牺牲工具效率的前提下，最大化长期神经发展与认知自主性（cognitive autonomy）"
|
||
<a href="https://arxiv.org/pdf/2506.08872v1" target="_blank" class="text-blue-600 hover:underline ml-1">[arXiv:2506.08872]</a>
|
||
</p>
|
||
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
|
||
原译对照阅读、学术公式增强、长文本智能检索，陪你读懂每一篇论文
|
||
</p>
|
||
|
||
<!-- Feature Badges -->
|
||
<div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:view" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
原译对照
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:rule" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
公式增强
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:bot" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
长文本 Agent
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:notebook" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
标注高亮
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
|
||
<iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
|
||
开始使用
|
||
<span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
|
||
</a>
|
||
<a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
|
||
<iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
|
||
了解功能特性
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 2: 高效翻译 -->
|
||
<div class="hero-carousel-item">
|
||
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
|
||
专业翻译，也可以很快<br class="hidden sm:block">
|
||
<span class="select-anim-bg">术语一致、批量处理、自由配置</span>
|
||
</h1>
|
||
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
|
||
不只是翻译，更懂你的专业领域和翻译偏好<br>
|
||
<span class="text-base text-gray-500">自定义术语库、提示词池、多模型并发，甚至支持整个代码库的翻译</span>
|
||
</p>
|
||
|
||
<!-- Feature Badges -->
|
||
<div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:book" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
术语库
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:flash" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
批量并发
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:settings-adjust" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
提示词池
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:code" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
GitHub 仓库
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
|
||
<iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
|
||
开始使用
|
||
<span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
|
||
</a>
|
||
<a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
|
||
<iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
|
||
了解功能特性
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 3: 分享协作 -->
|
||
<div class="hero-carousel-item">
|
||
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
|
||
知识需要流转和分享<br class="hidden sm:block">
|
||
<span class="select-anim-bg">让阅读成果轻松传递给团队</span>
|
||
</h1>
|
||
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
|
||
从个人阅读到团队协作，一步之遥<br>
|
||
<span class="text-base text-gray-500">多格式导出、保留文档结构、快速分享，让知识不止于个人</span>
|
||
</p>
|
||
|
||
<!-- Feature Badges -->
|
||
<div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:document-export" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
多格式导出
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:folder" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
保留结构
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:share" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
快速分享
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:cloud-offline" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
纯浏览器端
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
|
||
<iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
|
||
开始使用
|
||
<span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
|
||
</a>
|
||
<a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
|
||
<iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
|
||
了解功能特性
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 4: 简单部署 -->
|
||
<div class="hero-carousel-item">
|
||
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
|
||
无需繁琐部署，打开即用<br class="hidden sm:block">
|
||
<span class="select-anim-bg">你的 API Key，你的数据，你做主</span>
|
||
</h1>
|
||
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
|
||
纯前端项目，无需服务器，无需配置环境<br>
|
||
<span class="text-base text-gray-500">BYOK（自带密钥）设计，让你安心使用自己的 AI 服务，数据完全掌控</span>
|
||
</p>
|
||
|
||
<!-- Feature Badges -->
|
||
<div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:cloud-offline" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
纯前端项目
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:license" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
BYOK 设计
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:rocket" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
开箱即用
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:security" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
数据安全
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
|
||
<iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
|
||
开始使用
|
||
<span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
|
||
</a>
|
||
<a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
|
||
<iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
|
||
了解功能特性
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 5: Agent 智能助手 -->
|
||
<div class="hero-carousel-item">
|
||
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
|
||
和学术 Agent 一起<br class="hidden sm:block">
|
||
<span class="select-anim-bg">点燃你的阅读力！</span>
|
||
</h1>
|
||
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
|
||
全新升级的智能 Agent，专为长文本场景深度优化<br>
|
||
<span class="text-base text-gray-500">内置向量检索、多轮对话、上下文理解，让 AI 真正读懂你的论文</span>
|
||
</p>
|
||
|
||
<!-- Feature Badges -->
|
||
<div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:upgrade" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
Agent 升级
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:search-advanced" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
向量检索
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:chat-bot" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
多轮对话
|
||
</div>
|
||
<div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
|
||
<iconify-icon icon="carbon:network-3" class="inline-block mr-1.5" width="16"></iconify-icon>
|
||
上下文理解
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
|
||
<iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
|
||
开始使用
|
||
<span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
|
||
</a>
|
||
<a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
|
||
<iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
|
||
了解功能特性
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Carousel Indicators -->
|
||
<div class="carousel-indicators">
|
||
<div class="carousel-indicator active" data-slide="0"></div>
|
||
<div class="carousel-indicator" data-slide="1"></div>
|
||
<div class="carousel-indicator" data-slide="2"></div>
|
||
<div class="carousel-indicator" data-slide="3"></div>
|
||
<div class="carousel-indicator" data-slide="4"></div>
|
||
</div>
|
||
|
||
<!-- Social Proof / Stats -->
|
||
<div class="mt-16 grid grid-cols-2 md:grid-cols-5 gap-6 max-w-5xl mx-auto">
|
||
<div class="text-center group">
|
||
<div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
|
||
<iconify-icon icon="carbon:bot" class="text-3xl text-purple-600"></iconify-icon>
|
||
</div>
|
||
<div class="text-sm text-gray-700 font-semibold">对话式阅读</div>
|
||
</div>
|
||
<div class="text-center group">
|
||
<div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-orange-50 to-orange-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
|
||
<iconify-icon icon="carbon:flash" class="text-3xl text-orange-600"></iconify-icon>
|
||
</div>
|
||
<div class="text-sm text-gray-700 font-semibold">高速并发翻译</div>
|
||
</div>
|
||
<div class="text-center group">
|
||
<div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
|
||
<iconify-icon icon="carbon:book" class="text-3xl text-blue-600"></iconify-icon>
|
||
</div>
|
||
<div class="text-sm text-gray-700 font-semibold">术语库协同</div>
|
||
</div>
|
||
<div class="text-center group">
|
||
<div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-indigo-50 to-indigo-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
|
||
<iconify-icon icon="carbon:document-multiple-02" class="text-3xl text-indigo-600"></iconify-icon>
|
||
</div>
|
||
<div class="text-sm text-gray-700 font-semibold">多格式支持</div>
|
||
</div>
|
||
<div class="text-center group col-span-2 md:col-span-1">
|
||
<div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
|
||
<iconify-icon icon="carbon:cloud-offline" class="text-3xl text-green-600"></iconify-icon>
|
||
</div>
|
||
<div class="text-sm text-gray-700 font-semibold">本地隐私保护</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Moved and Restyled Tip Paragraph -->
|
||
<p class="text-xs text-gray-500 mt-16 max-w-2xl mx-auto">
|
||
💡 纯浏览器端运行，无需安装配置，即开即用
|
||
</p>
|
||
</section>
|
||
|
||
<!-- How it works Section -->
|
||
<section class="steps-section py-16 md:py-24">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 tracking-tight">
|
||
只需三步，开启深度阅读
|
||
</h2>
|
||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
||
简单直观的工作流，让复杂的文献处理变得轻松自如
|
||
</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
|
||
<!-- Step 1 -->
|
||
<div class="step-card group">
|
||
<div class="step-icon-wrapper group-hover:scale-110 transition-transform">
|
||
<iconify-icon icon="carbon:cloud-upload"></iconify-icon>
|
||
<div class="step-number">1</div>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-900 mb-3">上传文档</h3>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
拖拽 PDF、Word 或 Markdown 文件到浏览器。所有处理均在本地完成，安全快速。
|
||
</p>
|
||
</div>
|
||
<!-- Step 2 -->
|
||
<div class="step-card group">
|
||
<div class="step-icon-wrapper group-hover:scale-110 transition-transform" style="background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); color: #8b5cf6;">
|
||
<iconify-icon icon="carbon:data-enrichment"></iconify-icon>
|
||
<div class="step-number" style="background: #8b5cf6;">2</div>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-900 mb-3">智能解析</h3>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
AI 自动识别文档结构、提取目录、解析公式和表格，生成精准的对照译文。
|
||
</p>
|
||
</div>
|
||
<!-- Step 3 -->
|
||
<div class="step-card group">
|
||
<div class="step-icon-wrapper group-hover:scale-110 transition-transform" style="background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #10b981;">
|
||
<iconify-icon icon="carbon:chat-bot"></iconify-icon>
|
||
<div class="step-number" style="background: #10b981;">3</div>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-900 mb-3">对话阅读</h3>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
在阅读界面与 AI 助手实时对话。划词翻译、深度追问、整理笔记，一气呵成。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section - Updated -->
|
||
<section id="features" class="features-section py-16 md:py-20 bg-white/70 backdrop-blur-md shadow-2xl rounded-3xl p-8 md:p-14">
|
||
<div class="text-center mb-14">
|
||
<span class="inline-block px-5 py-2.5 bg-gradient-to-r from-blue-50 to-cyan-50 text-blue-700 rounded-full text-sm font-bold mb-5 border border-blue-100">核心功能</span>
|
||
<h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-5 features-title">
|
||
让文献阅读更高效的工具
|
||
</h2>
|
||
<p class="text-base md:text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
|
||
从智能对话到翻译管理，覆盖文献阅读的全流程需求
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Bento Grid Layout -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||
|
||
<!-- Feature 1: Agent (Span 2 cols) -->
|
||
<article class="feature-card-modern text-left h-full md:col-span-2">
|
||
<div class="flex flex-col md:flex-row gap-6 h-full">
|
||
<div class="flex-1">
|
||
<div class="feature-icon-ring mb-5 text-purple-600">
|
||
<iconify-icon icon="carbon:bot" width="32"></iconify-icon>
|
||
</div>
|
||
<h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">智能对话式阅读</h3>
|
||
<p class="text-sm md:text-base text-gray-600 leading-relaxed mb-6">
|
||
看不懂某个概念？想快速了解某段内容？直接问 AI 助手。内置多轮对话与长文本检索引擎，支持上下文理解和知识关联，让复杂论文的理解变得轻松自然。
|
||
</p>
|
||
<div class="feature-meta">
|
||
<span class="bg-purple-50 text-purple-700 border border-purple-200">多轮对话</span>
|
||
<span class="bg-purple-50 text-purple-700 border border-purple-200">智能检索</span>
|
||
<span class="bg-purple-50 text-purple-700 border border-purple-200">上下文理解</span>
|
||
</div>
|
||
</div>
|
||
<!-- Optional: Add an illustrative image or graphic here for larger cards -->
|
||
<div class="hidden md:block w-1/3 bg-purple-50/50 rounded-xl border border-purple-100/50"></div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Feature 3: Config (Span 1 col) - Moved up for Bento effect -->
|
||
<article class="feature-card-modern text-left h-full md:col-span-1">
|
||
<div class="feature-icon-ring mb-5 text-blue-600">
|
||
<iconify-icon icon="carbon:settings-adjust" width="32"></iconify-icon>
|
||
</div>
|
||
<h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">灵活的模型配置</h3>
|
||
<p class="text-sm md:text-base text-gray-600 leading-relaxed mb-4">
|
||
自由选择 AI 服务商，配置自定义模型端点和 API Key。支持多源轮询和提示词管理，打造专属工作流。
|
||
</p>
|
||
<div class="feature-meta mt-auto">
|
||
<span class="bg-blue-50 text-blue-700 border border-blue-200">BYOK</span>
|
||
<span class="bg-blue-50 text-blue-700 border border-blue-200">多源轮询</span>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Feature 2: Translation (Span 1 col) -->
|
||
<article class="feature-card-modern text-left h-full md:col-span-1">
|
||
<div class="feature-icon-ring mb-5 text-orange-600">
|
||
<iconify-icon icon="carbon:flash" width="32"></iconify-icon>
|
||
</div>
|
||
<h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">高效翻译与术语管理</h3>
|
||
<p class="text-sm md:text-base text-gray-600 leading-relaxed mb-4">
|
||
支持多文件并发翻译，配合智能任务队列，长篇论文也能在数十秒内完成。专业术语库协同工作，确保准确性。
|
||
</p>
|
||
<div class="feature-meta mt-auto">
|
||
<span class="bg-orange-50 text-orange-700 border border-orange-200">并发处理</span>
|
||
<span class="bg-orange-50 text-orange-700 border border-orange-200">术语库</span>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Feature 4: Toolchain (Span 2 cols) -->
|
||
<article class="feature-card-modern text-left h-full md:col-span-2">
|
||
<div class="flex flex-col md:flex-row-reverse gap-6 h-full">
|
||
<div class="flex-1">
|
||
<div class="feature-icon-ring mb-5 text-indigo-600">
|
||
<iconify-icon icon="carbon:document-multiple-02" width="32"></iconify-icon>
|
||
</div>
|
||
<h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">完整的阅读工具链</h3>
|
||
<p class="text-sm md:text-base text-gray-600 leading-relaxed mb-6">
|
||
原译对照、历史版本、TOC 快速导航、多彩标注笔记，支持 PDF、DOCX、Markdown 等多格式导入导出。一站式满足从阅读到整理的全部需求。
|
||
</p>
|
||
<div class="feature-meta">
|
||
<span class="bg-indigo-50 text-indigo-700 border border-indigo-200">多格式支持</span>
|
||
<span class="bg-indigo-50 text-indigo-700 border border-indigo-200">原译对照</span>
|
||
<span class="bg-indigo-50 text-indigo-700 border border-indigo-200">版本管理</span>
|
||
</div>
|
||
</div>
|
||
<!-- Optional: Add an illustrative image or graphic here for larger cards -->
|
||
<div class="hidden md:block w-1/3 bg-indigo-50/50 rounded-xl border border-indigo-100/50"></div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<!-- Button for Features Section -->
|
||
<div class="mt-10 text-center">
|
||
<a href="../../index.html" id="enterOcrFeaturesBtn" class="px-6 py-3 bg-gradient-to-r from-[#2563eb] to-[#38bdf8] text-white rounded-xl hover:from-[#1d4ed8] hover:to-[#0ea5e9] transition-all focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-md font-semibold inline-flex items-center mx-auto shadow-lg hover:shadow-xl transform hover:scale-105">
|
||
<iconify-icon icon="carbon:rocket" class="mr-2" width="20"></iconify-icon>
|
||
开始使用 Paper Burner X
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Vision & Roadmap Section -->
|
||
<section class="combined-info-section py-12 md:py-16">
|
||
<div class="max-w-5xl mx-auto space-y-10">
|
||
<div class="text-center">
|
||
<h2 class="text-3xl md:text-4xl font-semibold text-gray-800 flex items-center justify-center">
|
||
<iconify-icon icon="carbon:compass" class="mr-3 text-[#5782F3]" width="36"></iconify-icon>
|
||
愿景与路线
|
||
</h2>
|
||
<p class="mt-4 text-sm md:text-base text-gray-500 max-w-2xl mx-auto leading-relaxed">
|
||
我们持续打磨浏览器端的 Paper Burner X，让文献处理真正做到「即开即用、一步到位」。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
|
||
<article class="vision-card vision-card--mission md:col-span-2">
|
||
<h3 class="text-xl md:text-2xl text-gray-700 mb-3 flex items-center">
|
||
<iconify-icon icon="carbon:earth" class="mr-2 text-[#5782F3]" width="24"></iconify-icon>
|
||
我们的愿景
|
||
</h3>
|
||
<p class="text-gray-600 text-sm md:text-base leading-relaxed">
|
||
我们希望每个研究者都能轻松地阅读和理解文献，把更多时间用在真正重要的研究上。Paper Burner X 集成了智能对话、翻译、术语管理与阅读工具，完全运行在浏览器中，无需安装、配置简单，随时随地都能开始工作。
|
||
</p>
|
||
<div class="vision-meta">
|
||
<span>纯浏览器端</span>
|
||
<span>开箱即用</span>
|
||
<span>智能辅助</span>
|
||
<span>隐私保护</span>
|
||
</div>
|
||
<p class="mt-4 text-xs text-gray-400 italic">
|
||
灵感来自
|
||
<a href="https://github.com/baoyudu/paper-burner" target="_blank" class="text-[#5782F3] hover:text-blue-600 underline">Paper Burner</a>
|
||
开源项目，我们在此基础上持续优化迭代<br>
|
||
OCR功能基于
|
||
<a href="https://mistral.ai" target="_blank" class="text-[#5782F3] hover:text-blue-600 underline">Mistral OCR</a>
|
||
，我们将在此基础上持续适配更多OCR
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<!-- <script src="https://unpkg.com/iconify-icon@1.0.7/dist/iconify-icon.min.js"></script> -->
|
||
<script>
|
||
// Landing Page Logic
|
||
(function() {
|
||
var landingPage = document.getElementById('landingPageSection');
|
||
var githubStarsSpan = document.getElementById('githubStars');
|
||
var enterOcrFeaturesBtn = document.getElementById('enterOcrFeaturesBtn');
|
||
|
||
// Initialize a global store for stoppable animations (e.g., looping ones)
|
||
window.stoppableLandingPageAnimations = [];
|
||
|
||
// Fetch GitHub Stars (使用统一模块)
|
||
var githubStarsTag = document.getElementById('githubStarsTag');
|
||
var githubStarsCount = document.getElementById('githubStarsCount');
|
||
if (githubStarsTag && githubStarsCount && window.GitHubStars) {
|
||
window.GitHubStars.getStars()
|
||
.then(result => {
|
||
githubStarsCount.textContent = result.formatted;
|
||
githubStarsTag.classList.remove('hidden');
|
||
githubStarsTag.classList.add('flex');
|
||
})
|
||
.catch(error => {
|
||
console.error('[LandingPage] Error fetching GitHub stars:', error);
|
||
});
|
||
}
|
||
|
||
// Header Scroll Effect
|
||
window.addEventListener('scroll', () => {
|
||
const header = document.getElementById('mainHeader');
|
||
if (window.scrollY > 20) {
|
||
header.classList.add('scrolled');
|
||
} else {
|
||
header.classList.remove('scrolled');
|
||
}
|
||
});
|
||
|
||
function setLandingPageShownAndRedirect(event) {
|
||
event.preventDefault(); // Prevent default link behavior
|
||
localStorage.setItem('paperBurnerLandingPageShown', 'true');
|
||
// Stop any ongoing stoppable animations before redirecting
|
||
if (window.stoppableLandingPageAnimations) {
|
||
window.stoppableLandingPageAnimations.forEach(anim => anim.pause());
|
||
}
|
||
window.location.href = event.currentTarget.href; // Proceed to the link's href
|
||
}
|
||
|
||
// Bind click events to all CTA buttons
|
||
var enterAppButtons = document.querySelectorAll('.cta-enter-app');
|
||
enterAppButtons.forEach(function(btn) {
|
||
btn.addEventListener('click', setLandingPageShownAndRedirect);
|
||
});
|
||
|
||
if (enterOcrFeaturesBtn) {
|
||
enterOcrFeaturesBtn.addEventListener('click', setLandingPageShownAndRedirect);
|
||
}
|
||
|
||
function initLandingPageAnimations() {
|
||
if (!landingPage) return;
|
||
|
||
landingPage.style.opacity = '1'; // Fade in landing page
|
||
|
||
// Hero Carousel Logic
|
||
var currentSlide = 0;
|
||
var slides = document.querySelectorAll('.hero-carousel-item');
|
||
var indicators = document.querySelectorAll('.carousel-indicator');
|
||
var autoPlayInterval;
|
||
var isFirstCycle = true; // Track if it's the first cycle
|
||
var cycleCount = 0; // Count how many slides have been shown
|
||
|
||
function showSlide(index) {
|
||
// Remove active class from all slides and indicators
|
||
slides.forEach(function(slide) {
|
||
slide.classList.remove('active');
|
||
});
|
||
indicators.forEach(function(indicator) {
|
||
indicator.classList.remove('active');
|
||
});
|
||
|
||
// Add active class to current slide and indicator
|
||
slides[index].classList.add('active');
|
||
indicators[index].classList.add('active');
|
||
currentSlide = index;
|
||
}
|
||
|
||
function nextSlide() {
|
||
var next = (currentSlide + 1) % slides.length;
|
||
showSlide(next);
|
||
|
||
cycleCount++;
|
||
|
||
// If we've completed a full cycle (5 slides shown), switch to slow speed
|
||
if (isFirstCycle && cycleCount >= slides.length) {
|
||
isFirstCycle = false;
|
||
stopAutoPlay();
|
||
startAutoPlay(); // Restart with slower speed
|
||
}
|
||
}
|
||
|
||
// Auto play with dynamic speed
|
||
function startAutoPlay() {
|
||
var interval = isFirstCycle ? 5000 : 8000; // 5s for first cycle, 8s afterwards
|
||
autoPlayInterval = setInterval(nextSlide, interval);
|
||
}
|
||
|
||
function stopAutoPlay() {
|
||
if (autoPlayInterval) {
|
||
clearInterval(autoPlayInterval);
|
||
}
|
||
}
|
||
|
||
// Indicator click events
|
||
indicators.forEach(function(indicator, index) {
|
||
indicator.addEventListener('click', function() {
|
||
stopAutoPlay();
|
||
showSlide(index);
|
||
startAutoPlay(); // Restart auto play after manual selection
|
||
});
|
||
});
|
||
|
||
// Start auto play
|
||
startAutoPlay();
|
||
|
||
// Pause on hover
|
||
var carouselContainer = document.querySelector('.hero-carousel-container');
|
||
if (carouselContainer) {
|
||
carouselContainer.addEventListener('mouseenter', stopAutoPlay);
|
||
carouselContainer.addEventListener('mouseleave', startAutoPlay);
|
||
}
|
||
|
||
// Hero Section Animations (Immediate)
|
||
anime({
|
||
targets: '.hero-title',
|
||
translateY: [20, 0],
|
||
opacity: [0, 1],
|
||
duration: 800,
|
||
easing: 'easeOutExpo',
|
||
delay: 200
|
||
});
|
||
anime({
|
||
targets: '.hero-subtitle',
|
||
translateY: [20, 0],
|
||
opacity: [0, 1],
|
||
duration: 800,
|
||
easing: 'easeOutExpo',
|
||
delay: 400
|
||
});
|
||
anime({
|
||
targets: '.hero-cta',
|
||
translateY: [20, 0],
|
||
opacity: [0, 1],
|
||
duration: 800,
|
||
easing: 'easeOutExpo',
|
||
delay: 600
|
||
});
|
||
const rocketAnimation = anime({
|
||
targets: '.animate-float', // Rocket icon
|
||
translateY: ['-10px', '10px'],
|
||
direction: 'alternate',
|
||
loop: true,
|
||
duration: 2000,
|
||
easing: 'easeInOutSine'
|
||
});
|
||
window.stoppableLandingPageAnimations.push(rocketAnimation); // Add looping animation to stoppable list
|
||
|
||
// Intersection Observer options
|
||
const observerOptions = {
|
||
root: null, // relative to document viewport
|
||
rootMargin: '0px',
|
||
threshold: 0.1 // 10% of item is visible
|
||
};
|
||
|
||
// Observer for Features Section
|
||
const featuresSection = document.querySelector('.features-section');
|
||
if (featuresSection) {
|
||
const featuresObserver = new IntersectionObserver((entries, observer) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
anime({
|
||
targets: '.features-title',
|
||
opacity: [0, 1],
|
||
translateY: [20,0],
|
||
duration: 800,
|
||
easing: 'easeOutExpo',
|
||
delay: 100
|
||
});
|
||
// No longer animating .feature-card directly, but its children
|
||
// observer.unobserve(entry.target); // Unobserve the whole section once title is animated
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
featuresObserver.observe(featuresSection);
|
||
}
|
||
|
||
// Observer for individual Feature Cards skeleton animation
|
||
document.querySelectorAll('.feature-card').forEach(card => {
|
||
const cardObserver = new IntersectionObserver((entries, observer) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const skeleton = entry.target.querySelector('.skeleton-loader');
|
||
const content = entry.target.querySelector('.actual-content');
|
||
|
||
// Skeleton animation: pulse + fade out
|
||
const tl = anime.timeline({
|
||
easing: 'easeOutExpo',
|
||
});
|
||
|
||
tl.add({
|
||
targets: skeleton.querySelectorAll('.skeleton-icon, .skeleton-title, .skeleton-line'),
|
||
opacity: [0.5, 1, 0.5, 1, 0.3], // Pulse effect
|
||
duration: 700,
|
||
delay: anime.stagger(50, {from: 'center'})
|
||
})
|
||
.add({
|
||
targets: skeleton,
|
||
opacity: 0,
|
||
duration: 400,
|
||
complete: function() {
|
||
skeleton.style.display = 'none'; // Hide skeleton after fade
|
||
}
|
||
}, '-=200') // Overlap with previous animation slightly
|
||
.add({
|
||
targets: content,
|
||
opacity: [0, 1],
|
||
translateY: [10, 0],
|
||
duration: 500,
|
||
begin: function(){
|
||
content.style.opacity = '0'; // Ensure it starts from 0 if quickly re-intersecting (though unobserve helps)
|
||
}
|
||
}, '-=300'); // Start content animation before skeleton fully disappears
|
||
|
||
observer.unobserve(entry.target); // Animate only once per card
|
||
}
|
||
});
|
||
}, {...observerOptions, threshold: 0.2}); // Trigger when 20% of card is visible
|
||
cardObserver.observe(card);
|
||
});
|
||
|
||
// Observer for About Section
|
||
const aboutSection = document.querySelector('.about-section');
|
||
if (aboutSection) {
|
||
const aboutObserver = new IntersectionObserver((entries, observer) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
anime({
|
||
targets: '.about-card',
|
||
opacity: [0, 1],
|
||
translateY: [30, 0],
|
||
duration: 800,
|
||
easing: 'easeOutExpo',
|
||
delay: 200
|
||
});
|
||
observer.unobserve(entry.target); // Animate only once
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
aboutObserver.observe(aboutSection);
|
||
}
|
||
}
|
||
// Show landing page and initialize animations
|
||
if (landingPage) {
|
||
setTimeout(initLandingPageAnimations, 100); // Delay animations slightly
|
||
}
|
||
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|