kura/p2p-explorer-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增语言

Browse Source
This commit is contained in:
kura 2026-05-11 16:11:57 +08:00
parent 2a8e85faa6
commit 05d68f10b6
3 changed files with 1428 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

707
readme/index-en.html Normal file
View File

@ -0,0 +1,707 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p2p-explorer-web - Secure & Efficient P2P Transfer Tool</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;
}
.nav-links .lang-link {
font-size: 13px;
padding: 4px 10px;
border-radius: 6px;
transition: all 0.2s;
}
.nav-links .lang-link:hover {
background: #eee;
color: var(--primary);
}
.nav-links .lang-link.active {
background: var(--primary);
color: white;
}
/* --- 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>Features</span></a>
<a href="#screenshots"><i class="fa-solid fa-image"></i> <span>Screenshots</span></a>
<a href="#architecture"><i class="fa-solid fa-layer-group"></i> <span>Architecture</span></a>
<a href="https://kuraa.cc" target="_blank"><i class="fa-solid fa-circle-user"></i> <span>Blog</span></a>
<a href="index.html" class="lang-link">中文</a>
<a href="index-en.html" class="lang-link active">English</a>
<a href="index-ja.html" class="lang-link">日本語</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> Secure P2P Connection Based on WebRTC
</div>
<h1>File Transfer <span style="color:var(--primary)">Back to Peer-to-Peer</span></h1>
<p class="tagline">No client installation, no intermediate server. Achieve blazing-fast, private remote file
browsing, transfer, and real-time desktop sharing right in your browser.</p>
<div class="hero-btns">
<a href="https://explorer.kuraa.cc?lang=en-US" class="btn btn-main" target="_blank">
<i class="fa-solid fa-rocket"></i> Try Online Now
</a>
<a href="#quickstart" class="btn btn-secondary">
<i class="fa-solid fa-book"></i> Quick Start
</a>
</div>
</div>
</header>
<section id="features">
<div class="container">
<div class="section-header">
<h2>All-in-One Collaboration Toolkit</h2>
<p>Break down device barriers — access remote devices as easily as your local hard drive</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 Streaming</h3>
<p>Based on WebRTC DataChannel, large files are transferred in chunks with no throttling and no
server bandwidth usage.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fa-solid fa-desktop"></i></div>
<h3>Remote Desktop</h3>
<p>Real-time screen sharing with audio sync, perfect for remote technical support and collaborative
previews.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fa-solid fa-folder-tree"></i></div>
<h3>Remote File Management</h3>
<p>Complete directory structure browsing with read and write permission controls for full security.
</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fa-solid fa-microphone-lines"></i></div>
<h3>Voice & Video Calls</h3>
<p>Built-in end-to-end encrypted voice and camera sharing for seamless communication during
transfers.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fa-solid fa-clipboard"></i></div>
<h3>Cross-Device Clipboard</h3>
<p>Sync remote device clipboard text with one click, dramatically improving productivity.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fa-solid fa-mobile-screen-button"></i></div>
<h3>PWA Offline Support</h3>
<p>Install to your desktop like a native app for a cleaner, more immersive experience.</p>
</div>
</div>
</div>
</section>
<section id="screenshots" style="background: #fff;">
<div class="container">
<div class="section-header">
<h2>Screenshots</h2>
<p>Clean and intuitive interface with powerful P2P features at your fingertips</p>
</div>
<div class="screenshots-grid">
<div class="screenshot-card" onclick="openLightbox(this)">
<img src="./桌面预览.png" alt="Desktop Preview">
<div class="caption"><i class="fa-solid fa-display"></i> Remote Desktop Sharing</div>
</div>
<div class="screenshot-card" onclick="openLightbox(this)">
<img src="./文件同步.png" alt="File Sync">
<div class="caption"><i class="fa-solid fa-arrow-right-arrow-left"></i> File Transfer & Management
</div>
</div>
<div class="screenshot-card" onclick="openLightbox(this)">
<img src="./语音摄像头.png" alt="Voice and Camera">
<div class="caption"><i class="fa-solid fa-camera"></i> Voice & Video Calls</div>
</div>
</div>
</div>
</section>
<section id="architecture" style="background: #fff;">
<div class="container">
<div class="section-header">
<h2>Transparent Architecture, Absolute Security</h2>
<p>We only help establish the connection — your data belongs to you</p>
</div>
<div class="arch-card">
<table class="arch-table">
<thead>
<tr>
<th>Service Type</th>
<th>Purpose</th>
<th>Data Security</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>PeerJS Signaling</strong></td>
<td>Exchange ICE candidates, establish handshake</td>
<td><span class="status-pill status-safe"><i class="fa-solid fa-check"></i> Handshake only,
no data touch</span>
</td>
</tr>
<tr>
<td><strong>STUN Server</strong></td>
<td>Get public IP, assist UDP hole punching</td>
<td><span class="status-pill status-safe"><i class="fa-solid fa-check"></i> Network metadata
only</span>
</td>
</tr>
<tr>
<td><strong>TURN Server</strong></td>
<td>Relay in extreme network environments</td>
<td><span class="status-pill status-warning"><i
class="fa-solid fa-triangle-exclamation"></i> Self-host recommended for full
privacy</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="quickstart">
<div class="container">
<div class="section-header">
<h2>Developer Deployment</h2>
<p>Three steps to set up your private transfer node</p>
</div>
<div class="code-window">
<div style="margin-bottom: 20px; color: #888;"># 1. Clone and install dependencies</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. Start development server</div>
<div><span style="color: #aaa;">yarn dev</span></div>
<div style="margin: 20px 0; color: #888;"># 3. Build for production</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;">A next-generation file transfer tool built on WebRTC
technology, focused on privacy, speed, and convenience.</p>
</div>
<div>
<h4 class="footer-title">Quick Links</h4>
<ul class="footer-links">
<li><a href="#features">Features</a></li>
<li><a href="#architecture">Architecture</a></li>
<li><a href="https://explorer.kuraa.cc?lang=en-US">Online Demo</a></li>
</ul>
</div>
<div>
<h4 class="footer-title">About Author</h4>
<ul class="footer-links">
<li><a href="https://kuraa.cc" target="_blank"><i class="fa-solid fa-link"></i> Blog</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> Contact</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)">&times;</button>
<img id="lightbox-img" src="" alt="Enlarged preview">
</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>

699
readme/index-ja.html Normal file
View File

@ -0,0 +1,699 @@
<!DOCTYPE html>
<html lang="ja-JP">
<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, "Hiragino Kaku Gothic ProN", "Noto Sans JP", 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;
}
.nav-links .lang-link {
font-size: 13px;
padding: 4px 10px;
border-radius: 6px;
transition: all 0.2s;
}
.nav-links .lang-link:hover {
background: #eee;
color: var(--primary);
}
.nav-links .lang-link.active {
background: var(--primary);
color: white;
}
/* --- 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="index.html" class="lang-link">中文</a>
<a href="index-en.html" class="lang-link">English</a>
<a href="index-ja.html" class="lang-link active">日本語</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ベースの安全なP2P接続
</div>
<h1>ファイル転送を<span style="color:var(--primary)">ピアツーピアに</span></h1>
<p class="tagline">クライアントインストール不要、中間サーバー不要。ブラウザ上で高速かつプライベートなリモートファイルの閲覧、転送、リアルタイムデスクトップ共有を実現します。</p>
<div class="hero-btns">
<a href="https://explorer.kuraa.cc?lang=ja-JP" 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>3ステップでプライベート転送ノードを構築</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?lang=ja-JP">オンラインデモ</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)">&times;</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>

24
readme/index.html
View File

@ -103,6 +103,23 @@
border-radius: 8px;
}
.nav-links .lang-link {
font-size: 13px;
padding: 4px 10px;
border-radius: 6px;
transition: all 0.2s;
}
.nav-links .lang-link:hover {
background: #eee;
color: var(--primary);
}
.nav-links .lang-link.active {
background: var(--primary);
color: white;
}
/* --- Hero Section --- */
.hero {
padding: 160px 0 100px;
@ -467,6 +484,9 @@
<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="index.html" class="lang-link active">中文</a>
<a href="index-en.html" class="lang-link">English</a>
<a href="index-ja.html" class="lang-link">日本語</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>
@ -482,7 +502,7 @@
<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">
<a href="https://explorer.kuraa.cc?lang=zh-CN" class="btn btn-main" target="_blank">
<i class="fa-solid fa-rocket"></i> 立即在线体验
</a>
<a href="#quickstart" class="btn btn-secondary">
@ -630,7 +650,7 @@
<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>
<li><a href="https://explorer.kuraa.cc?lang=zh-CN">在线体验</a></li>
</ul>
</div>
<div>