334 lines
18 KiB
HTML
334 lines
18 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>EasyShell - 赛博朋克风格跨平台远程 Shell 管理终端</title>
|
||
<meta name="description" content="赛博朋克风格的跨平台远程 Shell 管理终端，支持 SSH、SFTP、主机监控、云端同步等功能">
|
||
<meta name="keywords" content="SSH, SFTP, 终端, Shell, 远程管理, 赛博朋克, Electron, Capacitor">
|
||
<link rel="icon" type="image/svg+xml" href="easyshell_icon.svg">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
|
||
<body class="easyshell-page">
|
||
<!-- 背景装饰 - 赛博朋克风格 -->
|
||
<div class="bg-decoration cyber-bg">
|
||
<div class="gradient-orb orb-1 orb-cyan"></div>
|
||
<div class="gradient-orb orb-2 orb-magenta"></div>
|
||
<div class="gradient-orb orb-3 orb-cyan"></div>
|
||
<div class="cyber-grid"></div>
|
||
<div class="scan-line"></div>
|
||
<div class="noise-overlay"></div>
|
||
</div>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-cyber">
|
||
<div class="container">
|
||
<a href="index.html" class="logo">
|
||
<span class="logo-icon">⚡</span>
|
||
<span class="logo-text">Ethan's DevTools</span>
|
||
</a>
|
||
<div class="nav-links">
|
||
<a href="index.html">首页</a>
|
||
<a href="phper.html">PHPer</a>
|
||
<a href="easyshell.html" class="active">EasyShell</a>
|
||
<a href="easysql.html">EasySQL</a>
|
||
<a href="https://github.com/ethanfly/easyshell" target="_blank" class="btn btn-nav btn-nav-cyber">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||
</svg>
|
||
GitHub
|
||
</a>
|
||
</div>
|
||
<button class="mobile-menu-btn" aria-label="菜单">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero 区域 -->
|
||
<header class="hero detail-hero cyber-hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-badge hero-badge-cyber">
|
||
<span class="badge-dot badge-dot-cyber"></span>
|
||
跨平台 · 开源免费
|
||
</div>
|
||
<h1 class="hero-title cyber-title">
|
||
<img src="easyshell_icon.svg" alt="EasyShell" class="product-logo-img">
|
||
<span class="title-line title-cyber">EasyShell</span>
|
||
</h1>
|
||
<p class="hero-tagline cyber-tagline">赛博朋克风格的跨平台远程 Shell 管理终端</p>
|
||
<p class="hero-description">
|
||
支持 <span class="highlight-cyber">Windows</span> ·
|
||
<span class="highlight-cyber">macOS</span> ·
|
||
<span class="highlight-cyber">Linux</span> ·
|
||
<span class="highlight-cyber">Android</span> 多平台运行
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="https://github.com/ethanfly/easyshell/releases" target="_blank" class="btn btn-cyber btn-lg">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||
<polyline points="7 10 12 15 17 10" />
|
||
<line x1="12" y1="15" x2="12" y2="3" />
|
||
</svg>
|
||
下载最新版本
|
||
</a>
|
||
<a href="https://github.com/ethanfly/easyshell" target="_blank" class="btn btn-ghost-cyber btn-lg">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||
</svg>
|
||
查看源码
|
||
</a>
|
||
</div>
|
||
<div class="hero-stats cyber-stats">
|
||
<div class="stat">
|
||
<span class="stat-value stat-value-cyber">4</span>
|
||
<span class="stat-label">支持平台</span>
|
||
</div>
|
||
<div class="stat-divider stat-divider-cyber"></div>
|
||
<div class="stat">
|
||
<span class="stat-value stat-value-cyber">SSH</span>
|
||
<span class="stat-label">安全连接</span>
|
||
</div>
|
||
<div class="stat-divider stat-divider-cyber"></div>
|
||
<div class="stat">
|
||
<span class="stat-value stat-value-cyber">☁️</span>
|
||
<span class="stat-label">云端同步</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 界面预览 -->
|
||
<section id="screenshots" class="section screenshots cyber-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag section-tag-cyber">界面预览</span>
|
||
<h2 class="section-title">霓虹光效与深色主题<span class="gradient-text-cyber">完美融合</span></h2>
|
||
<p class="section-desc">精心设计的赛博朋克风格界面，独特视觉体验</p>
|
||
</div>
|
||
<div class="screenshot-tabs cyber-tabs">
|
||
<button class="tab-btn tab-btn-cyber active" data-tab="welcome">🏠 欢迎</button>
|
||
<button class="tab-btn tab-btn-cyber" data-tab="addhost">➕ 添加主机</button>
|
||
<button class="tab-btn tab-btn-cyber" data-tab="sync">☁️ 云端同步</button>
|
||
<button class="tab-btn tab-btn-cyber" data-tab="terminal">💻 SSH 终端</button>
|
||
<button class="tab-btn tab-btn-cyber" data-tab="sftp">📁 SFTP</button>
|
||
<button class="tab-btn tab-btn-cyber" data-tab="info">📊 主机信息</button>
|
||
<button class="tab-btn tab-btn-cyber" data-tab="command">⌨️ 快捷命令</button>
|
||
<button class="tab-btn tab-btn-cyber" data-tab="hostmanager">🗂️ 主机管理</button>
|
||
</div>
|
||
<div class="screenshot-container">
|
||
<div class="screenshot-frame cyber-frame">
|
||
<div class="screenshot-window-bar cyber-window-bar">
|
||
<div class="window-buttons">
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
<span class="window-title">EasyShell</span>
|
||
</div>
|
||
<div class="screenshot-wrapper">
|
||
<img src="docs-easyshell/1.png" alt="欢迎界面" class="screenshot-img active" data-tab="welcome">
|
||
<img src="docs-easyshell/2.png" alt="添加主机" class="screenshot-img" data-tab="addhost">
|
||
<img src="docs-easyshell/3.png" alt="云端同步" class="screenshot-img" data-tab="sync">
|
||
<img src="docs-easyshell/4.png" alt="SSH终端" class="screenshot-img" data-tab="terminal">
|
||
<img src="docs-easyshell/5.png" alt="SFTP文件管理器" class="screenshot-img" data-tab="sftp">
|
||
<img src="docs-easyshell/6.png" alt="主机信息面板" class="screenshot-img" data-tab="info">
|
||
<img src="docs-easyshell/7.png" alt="快捷命令" class="screenshot-img" data-tab="command">
|
||
<img src="docs-easyshell/8.png" alt="主机管理" class="screenshot-img" data-tab="hostmanager">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 功能特性 -->
|
||
<section id="features" class="section features cyber-features">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag section-tag-cyber">功能特性</span>
|
||
<h2 class="section-title">强大功能<br><span class="gradient-text-cyber">一应俱全</span></h2>
|
||
<p class="section-desc">为远程服务器管理而生的专业工具</p>
|
||
</div>
|
||
<div class="features-grid cyber-grid-features">
|
||
<div class="feature-card feature-card-cyber">
|
||
<div class="feature-icon">🎨</div>
|
||
<h3>赛博朋克 UI</h3>
|
||
<p>霓虹色调、玻璃拟态、动态光效，打造独特视觉体验</p>
|
||
</div>
|
||
<div class="feature-card feature-card-cyber">
|
||
<div class="feature-icon">🖥️</div>
|
||
<h3>SSH 终端</h3>
|
||
<p>完整的 xterm.js 终端模拟，支持各种终端操作</p>
|
||
</div>
|
||
<div class="feature-card feature-card-cyber">
|
||
<div class="feature-icon">📁</div>
|
||
<h3>SFTP 文件管理</h3>
|
||
<p>远程文件浏览、上传、下载、权限修改</p>
|
||
</div>
|
||
<div class="feature-card feature-card-cyber">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>主机监控</h3>
|
||
<p>实时 CPU、内存、磁盘使用率监控</p>
|
||
</div>
|
||
<div class="feature-card feature-card-cyber">
|
||
<div class="feature-icon">⌨️</div>
|
||
<h3>快捷命令</h3>
|
||
<p>内置常用命令，Ctrl+K 快速调出</p>
|
||
</div>
|
||
<div class="feature-card feature-card-cyber">
|
||
<div class="feature-icon">☁️</div>
|
||
<h3>云端同步</h3>
|
||
<p>MySQL 数据库同步，多设备配置共享</p>
|
||
</div>
|
||
<div class="feature-card feature-card-cyber">
|
||
<div class="feature-icon">🏷️</div>
|
||
<h3>分组管理</h3>
|
||
<p>主机分组、颜色标识、便捷管理</p>
|
||
</div>
|
||
<div class="feature-card feature-card-cyber">
|
||
<div class="feature-icon">📱</div>
|
||
<h3>跨平台</h3>
|
||
<p>桌面端和移动端统一体验</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 快捷键 -->
|
||
<section class="section shortcuts cyber-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag section-tag-cyber">快捷键</span>
|
||
<h2 class="section-title">键盘<span class="gradient-text-cyber">快捷操作</span></h2>
|
||
</div>
|
||
<div class="shortcuts-grid">
|
||
<div class="shortcut-item">
|
||
<kbd>Ctrl</kbd> + <kbd>K</kbd>
|
||
<span>打开命令面板</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<kbd>Ctrl</kbd> + <kbd>F</kbd>
|
||
<span>SFTP 搜索文件</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<kbd>Enter</kbd>
|
||
<span>执行选中命令</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<kbd>Esc</kbd>
|
||
<span>关闭面板/弹窗</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 平台支持 -->
|
||
<section class="section platforms cyber-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag section-tag-cyber">平台支持</span>
|
||
<h2 class="section-title">随时随地<span class="gradient-text-cyber">管理服务器</span></h2>
|
||
</div>
|
||
<div class="platforms-grid">
|
||
<div class="platform-card">
|
||
<div class="platform-icon">🪟</div>
|
||
<h3>Windows</h3>
|
||
<p>Electron 原生应用</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<div class="platform-icon">🍎</div>
|
||
<h3>macOS</h3>
|
||
<p>Electron 原生应用</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<div class="platform-icon">🐧</div>
|
||
<h3>Linux</h3>
|
||
<p>Electron 原生应用</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<div class="platform-icon">📱</div>
|
||
<h3>Android</h3>
|
||
<p>Capacitor 移动端</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技术栈 -->
|
||
<section class="section tech-stack cyber-section">
|
||
<div class="container">
|
||
<div class="tech-content">
|
||
<h3>🛠️ 技术栈</h3>
|
||
<div class="tech-tags cyber-tech-tags">
|
||
<span class="tech-tag tech-tag-cyber">React 18</span>
|
||
<span class="tech-tag tech-tag-cyber">Tailwind CSS</span>
|
||
<span class="tech-tag tech-tag-cyber">Electron 28</span>
|
||
<span class="tech-tag tech-tag-cyber">Capacitor 5</span>
|
||
<span class="tech-tag tech-tag-cyber">xterm.js</span>
|
||
<span class="tech-tag tech-tag-cyber">ssh2</span>
|
||
<span class="tech-tag tech-tag-cyber">Socket.IO</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA 区域 -->
|
||
<section class="section cta cta-cyber">
|
||
<div class="container">
|
||
<div class="cta-content">
|
||
<h2>准备好连接你的服务器了吗？</h2>
|
||
<p>下载 EasyShell，开启赛博朋克式的远程管理体验</p>
|
||
<div class="cta-actions">
|
||
<a href="https://github.com/ethanfly/easyshell/releases" target="_blank" class="btn btn-cyber btn-lg">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||
<polyline points="7 10 12 15 17 10" />
|
||
<line x1="12" y1="15" x2="12" y2="3" />
|
||
</svg>
|
||
免费下载
|
||
</a>
|
||
<a href="https://github.com/ethanfly/easyshell" target="_blank" class="btn btn-outline-cyber btn-lg">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||
</svg>
|
||
Star on GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer footer-cyber">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-brand">
|
||
<img src="easyshell_icon.svg" alt="EasyShell" class="footer-icon">
|
||
<span class="logo-text logo-text-cyber">EasyShell</span>
|
||
</div>
|
||
<p class="footer-text">Made with ❤️ and ⚡ by EasyShell Team</p>
|
||
<div class="footer-links">
|
||
<a href="index.html">首页</a>
|
||
<a href="phper.html">PHPer</a>
|
||
<a href="easysql.html">EasySQL</a>
|
||
<a href="https://github.com/ethanfly/easyshell" target="_blank">GitHub</a>
|
||
<a href="https://github.com/ethanfly/easyshell/issues" target="_blank">反馈问题</a>
|
||
</div>
|
||
<p class="copyright">© 2024 EasyShell - Cyberpunk Edition. 基于 MIT 协议开源.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
|
||
</html>
|
||
|