686d94e178
- 替换 prompt() 为 InputDialog Vue 模态组件 - 替换 alert()/confirm() 为 Electron showMessageBox IPC - 添加 dialog:showMessage / dialog:showConfirm IPC 通道
420 lines
17 KiB
HTML
420 lines
17 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>Web2App - 将网站转化为独立的桌面应用</title>
|
||
<style>
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
:root {
|
||
--primary: #4f46e5;
|
||
--primary-hover: #4338ca;
|
||
--primary-light: #eef2ff;
|
||
--primary-glow: rgba(79,70,229,0.15);
|
||
--bg: #f8fafc;
|
||
--surface: #ffffff;
|
||
--border: #e2e8f0;
|
||
--text: #1e293b;
|
||
--text-secondary: #64748b;
|
||
--text-muted: #94a3b8;
|
||
--radius: 12px;
|
||
--shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||
--shadow-md: 0 4px 20px rgba(0,0,0,0.08);
|
||
--shadow-lg: 0 10px 40px rgba(0,0,0,0.1);
|
||
--max-width: 1100px;
|
||
}
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
font-size: 16px;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
a { color: var(--primary); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
img { max-width: 100%; }
|
||
|
||
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
|
||
|
||
/* Nav */
|
||
nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
background: rgba(255,255,255,0.85); backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
nav .container {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
height: 64px;
|
||
}
|
||
nav .logo { font-size: 20px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; }
|
||
nav .logo svg { width: 28px; height: 28px; }
|
||
nav .nav-links { display: flex; gap: 32px; align-items: center; }
|
||
nav .nav-links a { color: var(--text-secondary); font-weight: 500; font-size: 15px; transition: color 0.2s; }
|
||
nav .nav-links a:hover { color: var(--primary); text-decoration: none; }
|
||
.nav-cta {
|
||
background: var(--primary); color: #fff !important; padding: 8px 20px;
|
||
border-radius: 8px; font-weight: 600;
|
||
}
|
||
.nav-cta:hover { background: var(--primary-hover) !important; }
|
||
|
||
/* Hero */
|
||
.hero {
|
||
padding: 140px 0 80px; text-align: center;
|
||
background: linear-gradient(180deg, var(--primary-light) 0%, var(--bg) 100%);
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
background: rgba(79,70,229,0.1); color: var(--primary);
|
||
padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero h1 {
|
||
font-size: 56px; font-weight: 800; line-height: 1.15; letter-spacing: -1px;
|
||
background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.hero p {
|
||
font-size: 20px; color: var(--text-secondary); max-width: 640px;
|
||
margin: 20px auto 36px;
|
||
}
|
||
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 14px 32px; border-radius: 10px; font-size: 16px;
|
||
font-weight: 600; border: none; cursor: pointer;
|
||
transition: all 0.2s ease; text-decoration: none;
|
||
}
|
||
.btn-primary {
|
||
background: var(--primary); color: #fff; box-shadow: 0 4px 14px var(--primary-glow);
|
||
}
|
||
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); text-decoration: none; }
|
||
.btn-secondary {
|
||
background: var(--surface); color: var(--text); border: 1px solid var(--border);
|
||
}
|
||
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
|
||
|
||
/* Sections */
|
||
section { padding: 80px 0; }
|
||
.section-label {
|
||
display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase;
|
||
letter-spacing: 1px; color: var(--primary); margin-bottom: 8px;
|
||
}
|
||
.section-title {
|
||
font-size: 36px; font-weight: 700; margin-bottom: 16px;
|
||
}
|
||
.section-sub {
|
||
font-size: 18px; color: var(--text-secondary); max-width: 600px;
|
||
}
|
||
|
||
/* Features */
|
||
#features { text-align: center; }
|
||
#features .section-sub { margin: 0 auto 48px; }
|
||
.features-grid {
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px; text-align: left;
|
||
}
|
||
.feature-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: var(--radius); padding: 32px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.feature-card:hover {
|
||
border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px);
|
||
}
|
||
.feature-icon {
|
||
width: 48px; height: 48px; border-radius: 12px;
|
||
background: var(--primary-light); color: var(--primary);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 24px; margin-bottom: 16px;
|
||
}
|
||
.feature-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
|
||
.feature-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
|
||
|
||
/* Workflow */
|
||
#workflow { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||
#workflow .container { text-align: center; }
|
||
#workflow .section-sub { margin: 0 auto 48px; }
|
||
.steps { display: flex; gap: 0; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
|
||
.step {
|
||
flex: 1; min-width: 180px; max-width: 220px; padding: 0 16px;
|
||
position: relative;
|
||
}
|
||
.step-num {
|
||
width: 48px; height: 48px; border-radius: 50%;
|
||
background: var(--primary); color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px; font-weight: 700; margin: 0 auto 16px;
|
||
}
|
||
.step h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
|
||
.step p { font-size: 14px; color: var(--text-secondary); }
|
||
.step-arrow {
|
||
font-size: 24px; color: var(--text-muted);
|
||
position: absolute; right: -12px; top: 12px;
|
||
}
|
||
.steps .step:last-child .step-arrow { display: none; }
|
||
|
||
/* Install */
|
||
#download { text-align: center; }
|
||
#download .section-sub { margin: 0 auto 48px; }
|
||
.platforms { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
|
||
.platform-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: var(--radius); padding: 36px 40px; min-width: 200px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.platform-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
|
||
.platform-icon { font-size: 40px; margin-bottom: 12px; }
|
||
.platform-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
|
||
.platform-card .version { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
|
||
.platform-card .btn { width: 100%; justify-content: center; }
|
||
.platform-card .coming-soon {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 14px 32px; border-radius: 10px; font-size: 16px; font-weight: 600;
|
||
background: #f1f5f9; color: var(--text-muted); cursor: not-allowed; width: 100%; justify-content: center;
|
||
}
|
||
|
||
/* Architecture */
|
||
#architecture { background: var(--surface); border-top: 1px solid var(--border); }
|
||
#architecture .container { text-align: center; }
|
||
#architecture .section-sub { margin: 0 auto 48px; }
|
||
.arch-diagram {
|
||
display: flex; flex-direction: column; align-items: center; gap: 12px;
|
||
max-width: 700px; margin: 0 auto;
|
||
}
|
||
.arch-box {
|
||
background: var(--bg); border: 1px solid var(--border);
|
||
border-radius: var(--radius); padding: 20px 32px; width: 100%;
|
||
font-weight: 600; font-size: 15px;
|
||
}
|
||
.arch-box.primary { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
|
||
.arch-box .arch-sub {
|
||
display: flex; gap: 16px; justify-content: center; margin-top: 12px; flex-wrap: wrap;
|
||
}
|
||
.arch-box .arch-sub span {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
padding: 6px 16px; border-radius: 6px; font-weight: 400; font-size: 13px;
|
||
}
|
||
.arch-arrow { color: var(--text-muted); font-size: 20px; }
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 40px 0; border-top: 1px solid var(--border);
|
||
text-align: center; color: var(--text-muted); font-size: 14px;
|
||
}
|
||
footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
|
||
footer a { color: var(--text-secondary); }
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.hero h1 { font-size: 36px; }
|
||
.hero p { font-size: 17px; }
|
||
section { padding: 60px 0; }
|
||
.section-title { font-size: 28px; }
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
.steps { flex-direction: column; align-items: center; gap: 24px; }
|
||
.step-arrow { display: none !important; }
|
||
nav .nav-links a:not(.nav-cta) { display: none; }
|
||
footer .container { flex-direction: column; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<div class="container">
|
||
<a href="#" class="logo">
|
||
<svg viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="2" y="4" width="24" height="16" rx="3" />
|
||
<path d="M8 2v4M20 2v4M2 12h24M10 20v4M18 20v4" />
|
||
</svg>
|
||
Web2App
|
||
</a>
|
||
<div class="nav-links">
|
||
<a href="#features">功能特性</a>
|
||
<a href="#workflow">工作流程</a>
|
||
<a href="#download" class="nav-cta">立即下载</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="hero-badge">
|
||
<span>v1.0.0</span>
|
||
</div>
|
||
<h1>将任意网站<br>转化为独立的桌面应用</h1>
|
||
<p>导入网站资源，配置应用信息，一键打包为跨平台安装包 —— 无需编写代码，无需配置运行环境。</p>
|
||
<div class="hero-buttons">
|
||
<a href="#download" class="btn btn-primary">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
|
||
下载安装包
|
||
</a>
|
||
<a href="#features" class="btn btn-secondary">了解更多</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section id="features">
|
||
<div class="container">
|
||
<span class="section-label">功能特性</span>
|
||
<h2 class="section-title">强大而简洁</h2>
|
||
<p class="section-sub">从资源导入到打包发布，Web2App 提供一站式的网站转桌面应用解决方案。</p>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📦</div>
|
||
<h3>一键打包</h3>
|
||
<p>将完整的网站资源（HTML、JS、CSS、图片等）打包为独立的安装包，内置 Electron 运行时，目标机无需任何预装环境。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🖥️</div>
|
||
<h3>跨平台支持</h3>
|
||
<p>一次打包，多平台分发。支持 Windows（.exe）、macOS（.dmg）、Linux（.AppImage）三大桌面平台。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⚙️</div>
|
||
<h3>灵活配置</h3>
|
||
<p>自定义应用名称、图标、版本号、窗口尺寸、作者版权信息，支持指定入口文件和后端服务入口。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🌐</div>
|
||
<h3>内嵌后端服务</h3>
|
||
<p>应用内嵌 HTTP 服务器与 SQLite 数据库，支持运行 Node.js 后端脚本，自动检测端口占用，无需外部 Web 服务器。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📂</div>
|
||
<h3>资源管理</h3>
|
||
<p>以目录树形式管理所有导入资源，支持批量导入、文件增删改、保留目录结构，资源状态一目了然。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3>离线可用 · 安全可靠</h3>
|
||
<p>打包过程完全离线，不上传任何数据至外网。生成 SHA256 校验值确保安装包完整性，安装过程引导清晰。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Workflow -->
|
||
<section id="workflow">
|
||
<div class="container">
|
||
<span class="section-label">工作流程</span>
|
||
<h2 class="section-title">四步完成打包</h2>
|
||
<p class="section-sub">从网站资源到可分发安装包，只需简单四步。</p>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<h4>导入网站资源</h4>
|
||
<p>导入 HTML、JS、CSS、图片等文件，自动检测入口文件，保留目录结构。</p>
|
||
<span class="step-arrow">→</span>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h4>配置应用信息</h4>
|
||
<p>设置名称、图标、版本、窗口尺寸、后端入口等，一切可视化操作。</p>
|
||
<span class="step-arrow">→</span>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h4>一键打包</h4>
|
||
<p>点击打包，实时查看进度与日志，自动嵌入 Electron 运行时生成安装包。</p>
|
||
<span class="step-arrow">→</span>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<h4>分发与运行</h4>
|
||
<p>将安装包分发给用户，安装后即可独立运行，无需任何环境配置。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Download -->
|
||
<section id="download">
|
||
<div class="container">
|
||
<span class="section-label">下载安装</span>
|
||
<h2 class="section-title">选择你的平台</h2>
|
||
<p class="section-sub">Web2App 支持主流桌面平台，下载对应版本即可开始使用。</p>
|
||
<div class="platforms">
|
||
<div class="platform-card">
|
||
<div class="platform-icon">🪟</div>
|
||
<h4>Windows</h4>
|
||
<p class="version">v1.0.0 · x64</p>
|
||
<a href="https://web2app.qmiweb.com/resource/Web2App%20Setup%201.0.0.exe" class="btn btn-primary">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
|
||
下载安装包
|
||
</a>
|
||
<div style="margin-top:10px;font-size:13px;color:var(--text-muted);">Windows 7+ / x64 · 含安装向导</div>
|
||
</div>
|
||
<div class="platform-card">
|
||
<div class="platform-icon">🍎</div>
|
||
<h4>macOS</h4>
|
||
<p class="version">v1.0.0 · Intel / Apple Silicon</p>
|
||
<span class="coming-soon">即将发布</span>
|
||
<div style="margin-top:8px;font-size:12px;color:var(--text-muted);">可通过源码自行构建</div>
|
||
</div>
|
||
<div class="platform-card">
|
||
<div class="platform-icon">🐧</div>
|
||
<h4>Linux</h4>
|
||
<p class="version">v1.0.0 · .AppImage / .deb</p>
|
||
<span class="coming-soon">即将发布</span>
|
||
<div style="margin-top:8px;font-size:12px;color:var(--text-muted);">可通过源码自行构建</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Architecture -->
|
||
<section id="architecture">
|
||
<div class="container">
|
||
<span class="section-label">技术架构</span>
|
||
<h2 class="section-title">基于 Electron 构建</h2>
|
||
<p class="section-sub">Web2App 生成的桌面应用采用分层架构设计，确保性能与可扩展性。</p>
|
||
<div class="arch-diagram">
|
||
<div class="arch-box">
|
||
<div>前端界面（用户网站 HTML / JS / CSS）</div>
|
||
<div class="arch-sub">
|
||
<span>Chromium 渲染引擎</span>
|
||
<span>Vue 3 / React</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-arrow">⬇ HTTP 本地通信 ⬇</div>
|
||
<div class="arch-box">
|
||
<div>后端服务</div>
|
||
<div class="arch-sub">
|
||
<span>Node.js 运行时</span>
|
||
<span>Express 路由</span>
|
||
<span>SQLite 数据库</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-arrow">⬇</div>
|
||
<div class="arch-box primary">
|
||
<div>Electron 主进程</div>
|
||
<div class="arch-sub">
|
||
<span>窗口管理</span>
|
||
<span>系统托盘</span>
|
||
<span>自动启动后端</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-arrow">⬇</div>
|
||
<div class="arch-box">
|
||
操作系统 (Windows / macOS / Linux)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<span>© 2026 Web2App. MIT License.</span>
|
||
<a href="https://git.qmikeji.cn/gmh/Web2App.git" target="_blank">Git 仓库</a>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|