677 lines
22 KiB
HTML
677 lines
22 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>p2p-explorer-web - 安全高效的 P2P 传输工具</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--primary: #8b5cf6;
|
||
--primary-hover: #7c3aed;
|
||
--secondary: #111111;
|
||
--accent: #333333;
|
||
--bg: #f5f5f5;
|
||
--text-main: #111111;
|
||
--text-muted: #888888;
|
||
--glass: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
color: var(--text-main);
|
||
background: var(--bg);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
/* --- Navigation --- */
|
||
nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 70px;
|
||
background: var(--glass);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
z-index: 1000;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.logo {
|
||
font-weight: 800;
|
||
font-size: 1.2rem;
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 24px;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-links a {
|
||
text-decoration: none;
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: color 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.nav-links .btn-github {
|
||
background: #24292f;
|
||
color: white;
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* --- Hero Section --- */
|
||
.hero {
|
||
padding: 160px 0 100px;
|
||
background: radial-gradient(circle at top right, rgba(0, 0, 0, 0.03), transparent),
|
||
radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.03), transparent);
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: white;
|
||
padding: 6px 16px;
|
||
border-radius: 99px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(40px, 8vw, 64px);
|
||
font-weight: 900;
|
||
line-height: 1.1;
|
||
margin-bottom: 24px;
|
||
letter-spacing: -2px;
|
||
}
|
||
|
||
.hero p.tagline {
|
||
font-size: 1.2rem;
|
||
color: var(--text-muted);
|
||
max-width: 700px;
|
||
margin: 0 auto 40px;
|
||
}
|
||
|
||
.hero-btns {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn {
|
||
padding: 14px 32px;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.btn-main {
|
||
background: var(--primary);
|
||
color: white;
|
||
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-main:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.25);
|
||
background: var(--primary-hover);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: white;
|
||
color: var(--text-main);
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #eee;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* --- Feature Grid --- */
|
||
section {
|
||
padding: 100px 0;
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 24px;
|
||
border: 1px solid #eee;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
border-color: var(--primary);
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: #f0f0f0;
|
||
color: var(--primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 16px;
|
||
font-size: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
/* --- Architecture Table --- */
|
||
.arch-card {
|
||
background: white;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
border: 1px solid #eee;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.arch-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.arch-table th {
|
||
background: #f5f5f5;
|
||
padding: 20px;
|
||
text-align: left;
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.arch-table td {
|
||
padding: 20px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.status-pill {
|
||
padding: 4px 12px;
|
||
border-radius: 99px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-safe {
|
||
background: #e8e8e8;
|
||
color: #222;
|
||
}
|
||
|
||
.status-warning {
|
||
background: #ccc;
|
||
color: #111;
|
||
}
|
||
|
||
/* --- Code Window --- */
|
||
.code-window {
|
||
background: #1a1a1a;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
color: #ccc;
|
||
font-family: 'Fira Code', monospace;
|
||
font-size: 14px;
|
||
line-height: 2;
|
||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* --- Screenshots --- */
|
||
.screenshots-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.screenshot-card {
|
||
background: white;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
border: 1px solid #eee;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.screenshot-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.screenshot-card {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.screenshot-card img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
aspect-ratio: 16 / 10;
|
||
object-fit: cover;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.screenshot-card .caption {
|
||
padding: 20px 24px;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
color: var(--text-main);
|
||
pointer-events: none;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.screenshots-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* --- Lightbox --- */
|
||
.lightbox {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
z-index: 9999;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px;
|
||
}
|
||
|
||
.lightbox.active {
|
||
display: flex;
|
||
}
|
||
|
||
.lightbox img {
|
||
max-width: 90vw;
|
||
max-height: 85vh;
|
||
border-radius: 16px;
|
||
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
|
||
object-fit: contain;
|
||
}
|
||
|
||
.lightbox .close-btn {
|
||
position: fixed;
|
||
top: 24px;
|
||
right: 32px;
|
||
color: white;
|
||
font-size: 32px;
|
||
cursor: pointer;
|
||
opacity: 0.7;
|
||
transition: opacity 0.2s;
|
||
background: none;
|
||
border: none;
|
||
line-height: 1;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.lightbox .close-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.lightbox {
|
||
padding: 16px;
|
||
}
|
||
|
||
.lightbox img {
|
||
max-width: 100vw;
|
||
max-height: 80vh;
|
||
}
|
||
}
|
||
|
||
/* --- Footer --- */
|
||
footer {
|
||
background: #000;
|
||
color: white;
|
||
padding: 80px 0 40px;
|
||
}
|
||
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr;
|
||
gap: 40px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.footer-logo {
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
margin-bottom: 20px;
|
||
display: block;
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer-title {
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
color: #999;
|
||
text-transform: uppercase;
|
||
font-size: 12px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.footer-links {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-links li {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: #bbb;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: white;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links a span {
|
||
display: none;
|
||
}
|
||
|
||
.hero-btns {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.footer-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<nav>
|
||
<div class="container nav-content">
|
||
<a href="#" class="logo">P2P Explorer</a>
|
||
<div class="nav-links">
|
||
<a href="#features"><i class="fa-solid fa-wand-magic-sparkles"></i> <span>特性</span></a>
|
||
<a href="#screenshots"><i class="fa-solid fa-image"></i> <span>截图</span></a>
|
||
<a href="#architecture"><i class="fa-solid fa-layer-group"></i> <span>架构</span></a>
|
||
<a href="https://kuraa.cc" target="_blank"><i class="fa-solid fa-circle-user"></i> <span>个人博客</span></a>
|
||
<a href="https://github.com/AndySkaura/p2p-explorer-web" target="_blank" class="btn-github">
|
||
<i class="fa-brands fa-github"></i> <span>GitHub</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<div class="container">
|
||
<div class="hero-badge">
|
||
<i class="fa-solid fa-shield-halved"></i> 基于 WebRTC 的安全直连
|
||
</div>
|
||
<h1>让文件传输<span style="color:var(--primary)">回归点对点</span></h1>
|
||
<p class="tagline">无需安装客户端，无需中间服务器。在浏览器中实现极速、私密的远程文件浏览、传输与实时桌面共享。</p>
|
||
<div class="hero-btns">
|
||
<a href="https://explorer.kuraa.cc" class="btn btn-main" target="_blank">
|
||
<i class="fa-solid fa-rocket"></i> 立即在线体验
|
||
</a>
|
||
<a href="#quickstart" class="btn btn-secondary">
|
||
<i class="fa-solid fa-book"></i> 快速开始
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="features">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>全能协作工具箱</h2>
|
||
<p>打破设备壁垒，像访问本地硬盘一样访问远程设备</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-bolt-lightning"></i></div>
|
||
<h3>P2P 流式传输</h3>
|
||
<p>基于 WebRTC DataChannel，大文件直接分片传输，不限速，不占服务器带宽。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-desktop"></i></div>
|
||
<h3>远程桌面共享</h3>
|
||
<p>实时同步对方屏幕画面，支持音频同步，适用于远程技术支持和协作预览。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-folder-tree"></i></div>
|
||
<h3>远程文件管理</h3>
|
||
<p>完整的目录结构浏览，支持远程读取与写入权限管控，安全尽在掌握。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-microphone-lines"></i></div>
|
||
<h3>实时语音通话</h3>
|
||
<p>内置端到端加密的语音与摄像头共享，文件传输时也能无缝沟通。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-clipboard"></i></div>
|
||
<h3>跨设备剪贴板</h3>
|
||
<p>一键同步远程设备的剪贴板文本，大幅提升办公效率。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fa-solid fa-mobile-screen-button"></i></div>
|
||
<h3>PWA 离线支持</h3>
|
||
<p>支持安装到桌面，像原生应用一样运行，享受更纯净的交互体验。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="screenshots" style="background: #fff;">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>应用截图一览</h2>
|
||
<p>简洁直观的界面，强大的 P2P 功能触手可及</p>
|
||
</div>
|
||
<div class="screenshots-grid">
|
||
<div class="screenshot-card" onclick="openLightbox(this)">
|
||
<img src="./桌面预览.png" alt="桌面预览界面">
|
||
<div class="caption"><i class="fa-solid fa-display"></i> 远程桌面共享</div>
|
||
</div>
|
||
<div class="screenshot-card" onclick="openLightbox(this)">
|
||
<img src="./文件同步.png" alt="文件同步界面">
|
||
<div class="caption"><i class="fa-solid fa-arrow-right-arrow-left"></i> 文件传输与管理</div>
|
||
</div>
|
||
<div class="screenshot-card" onclick="openLightbox(this)">
|
||
<img src="./语音摄像头.png" alt="语音摄像头界面">
|
||
<div class="caption"><i class="fa-solid fa-camera"></i> 语音与视频通话</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="architecture" style="background: #fff;">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>透明的架构，绝对的安全</h2>
|
||
<p>我们只负责建立连接，数据属于你自己</p>
|
||
</div>
|
||
<div class="arch-card">
|
||
<table class="arch-table">
|
||
<thead>
|
||
<tr>
|
||
<th>服务类型</th>
|
||
<th>具体用途</th>
|
||
<th>数据安全性</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>PeerJS 信令</strong></td>
|
||
<td>交换 ICE 候选信息，建立握手</td>
|
||
<td><span class="status-pill status-safe"><i class="fa-solid fa-check"></i> 仅握手，不触碰数据</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>STUN 服务器</strong></td>
|
||
<td>获取公网 IP，辅助 UDP 打洞</td>
|
||
<td><span class="status-pill status-safe"><i class="fa-solid fa-check"></i> 仅交换网络元数据</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>TURN 服务器</strong></td>
|
||
<td>极端网络环境下的中继中转</td>
|
||
<td><span class="status-pill status-warning"><i
|
||
class="fa-solid fa-triangle-exclamation"></i> 建议自建以获得完全隐私</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="quickstart">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>开发者部署</h2>
|
||
<p>只需三步，搭建你私有的传输节点</p>
|
||
</div>
|
||
<div class="code-window">
|
||
<div style="margin-bottom: 20px; color: #888;"># 1. 克隆并安装依赖</div>
|
||
<div><span style="color: #f0f0f0;">git clone</span> https://github.com/AndySkaura/p2p-explorer-web.git
|
||
</div>
|
||
<div><span style="color: #f0f0f0;">cd</span> p2p-explorer-web && <span style="color: #aaa;">yarn
|
||
install</span></div>
|
||
|
||
<div style="margin: 20px 0; color: #888;"># 2. 启动开发环境</div>
|
||
<div><span style="color: #aaa;">yarn dev</span></div>
|
||
|
||
<div style="margin: 20px 0; color: #888;"># 3. 生产环境构建</div>
|
||
<div><span style="color: #aaa;">yarn build</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<a href="#" class="footer-logo">P2P Explorer</a>
|
||
<p style="color: #999; max-width: 300px;">基于 WebRTC 技术构建的下一代文件传输工具，专注于隐私、速度与便捷性。</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="footer-title">快速链接</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="#features">功能特性</a></li>
|
||
<li><a href="#architecture">架构说明</a></li>
|
||
<li><a href="https://explorer.kuraa.cc">在线体验</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="footer-title">关于作者</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="https://kuraa.cc" target="_blank"><i class="fa-solid fa-link"></i> 个人博客</a></li>
|
||
<li><a href="https://github.com/AndySkaura" target="_blank"><i class="fa-brands fa-github"></i>
|
||
GitHub</a></li>
|
||
<li><a href="#"><i class="fa-solid fa-envelope"></i> 联系我</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="border-top: 1px solid #222; padding-top: 40px; text-align: center; color: #666; font-size: 13px;">
|
||
<p>Released under the MIT License. Copyright © 2024 kuraa</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Lightbox -->
|
||
<div class="lightbox" id="lightbox" onclick="closeLightbox(event)">
|
||
<button class="close-btn" onclick="closeLightbox(event)">×</button>
|
||
<img id="lightbox-img" src="" alt="放大预览">
|
||
</div>
|
||
|
||
<script>
|
||
function openLightbox(card) {
|
||
var img = card.querySelector('img');
|
||
if (!img) return;
|
||
document.getElementById('lightbox-img').src = img.src;
|
||
document.getElementById('lightbox').classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeLightbox(e) {
|
||
if (e && e.target !== e.currentTarget && e.target.className !== 'close-btn') return;
|
||
document.getElementById('lightbox').classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |