feat(frontend): unify landing style and add product/scenes/start pages
This commit is contained in:
157
frontend/start.html
Normal file
157
frontend/start.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>快速开始 - 玩玩云</title>
|
||||
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
|
||||
<link rel="stylesheet" href="landing.css?v=20260212006">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="site-header">
|
||||
<div class="container site-header-inner">
|
||||
<a class="brand" href="index.html">
|
||||
<i class="fas fa-cloud"></i>
|
||||
<span>玩玩云</span>
|
||||
</a>
|
||||
|
||||
<nav class="top-nav">
|
||||
<a href="product.html">产品能力</a>
|
||||
<a href="scenes.html">应用场景</a>
|
||||
<a href="start.html" class="active">快速开始</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<a href="app.html?action=login" class="btn btn-secondary">
|
||||
<i class="fas fa-circle-user"></i>
|
||||
登录
|
||||
</a>
|
||||
<a href="app.html?action=register" class="btn btn-primary">
|
||||
<i class="fas fa-user-plus"></i>
|
||||
免费注册
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="container">
|
||||
<section class="page-banner">
|
||||
<h1>快速开始</h1>
|
||||
<p>3 分钟完成首次体验：注册账号、上传文件、创建安全分享。后续可按业务需要配置存储与权限策略。</p>
|
||||
<div class="kpi-row">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">上手成本</div>
|
||||
<div class="kpi-value">低学习门槛</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">部署方式</div>
|
||||
<div class="kpi-value">Docker / Node.js</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">推荐起步</div>
|
||||
<div class="kpi-value">默认 1GB 配额</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title"><i class="fas fa-list-check"></i>上手流程</h2>
|
||||
<div class="step-line">
|
||||
<article class="step-item">
|
||||
<span class="step-num">1</span>
|
||||
<div class="step-content">
|
||||
<h3>注册并登录</h3>
|
||||
<p>创建用户账号后进入“我的文件”，系统会自动使用默认存储策略与配额。</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step-item">
|
||||
<span class="step-num">2</span>
|
||||
<div class="step-content">
|
||||
<h3>上传并整理文件</h3>
|
||||
<p>通过“上传文件”与“新建文件夹”完成基础目录结构，便于后续共享与检索。</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step-item">
|
||||
<span class="step-num">3</span>
|
||||
<div class="step-content">
|
||||
<h3>创建分享链接</h3>
|
||||
<p>按需设置密码、有效期和访问次数，将资料安全地发送给目标对象。</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step-item">
|
||||
<span class="step-num">4</span>
|
||||
<div class="step-content">
|
||||
<h3>管理员精细配置</h3>
|
||||
<p>在管理员面板配置用户存储类型（本地/OSS）与配额限制，保证资源可控。</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title"><i class="fas fa-circle-question"></i>常见问题</h2>
|
||||
<div class="matrix">
|
||||
<article class="matrix-card">
|
||||
<h3>默认配额是多少？</h3>
|
||||
<p>如果管理员未单独设置，系统默认使用 1GB 配额策略，后续可动态调整。</p>
|
||||
</article>
|
||||
<article class="matrix-card">
|
||||
<h3>如何选择存储方式？</h3>
|
||||
<p>支持本地与 OSS 模式。管理员可统一控制，也可在授权下由用户自行切换。</p>
|
||||
</article>
|
||||
<article class="matrix-card">
|
||||
<h3>如何提升分享安全性？</h3>
|
||||
<p>建议启用访问密码、较短有效期和访问次数上限，避免链接扩散风险。</p>
|
||||
</article>
|
||||
<article class="matrix-card">
|
||||
<h3>移动端是否可用？</h3>
|
||||
<p>支持移动端上传、预览、下载与分享操作，常用流程已完成触控优化。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="cta-panel">
|
||||
<div>
|
||||
<h3 style="font-size:16px;margin-bottom:4px;">准备好了就开始吧</h3>
|
||||
<p>你可以立即注册体验，也可以先登录已有账号继续使用。</p>
|
||||
</div>
|
||||
<div style="display:inline-flex;gap:8px;flex-wrap:wrap;">
|
||||
<a href="app.html?action=register" class="btn btn-primary"><i class="fas fa-rocket"></i>立即注册</a>
|
||||
<a href="app.html?action=login" class="btn btn-secondary"><i class="fas fa-circle-user"></i>去登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<div>玩玩云 © 2026</div>
|
||||
<div class="footer-tech">
|
||||
<span><i class="fab fa-node-js"></i> Node.js</span>
|
||||
<span><i class="fab fa-vuejs"></i> Vue.js</span>
|
||||
<span><i class="fas fa-database"></i> SQLite</span>
|
||||
<span><i class="fab fa-docker"></i> Docker</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(async function() {
|
||||
try {
|
||||
const response = await fetch('/api/public/theme');
|
||||
const data = await response.json();
|
||||
if (data.success && data.theme === 'dark') {
|
||||
document.body.classList.add('theme-dark');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('主题加载失败，使用默认主题');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user