Files
NebulaShell/website/index.html
Falck a615b2af0f 重构文档中心与视差效果
- 删除旧版 docs.html API 文档,改为手写 6 个独立 HTML 页面
  (index/why-python/architecture/quickstart/plugins/development)
- 新增 css/docs.css 文档页样式(左侧导航树 + 右侧内容区)
- 添加左下角固定 "获取更多信息" 按钮跳转 Gitee Wiki
- dock.js 增加 getPathPrefix() 自动计算相对路径,修复子页面导航跳转
- 首页 3D 立方体:替换 logo 为纯白交互正方体,悬停弹出对话框展示项目特点
- parallax.js 自动检测文档页和首页,统一景深速度为 1.0 (100px 最大移动)
- 删除 logo.svg、旧版构建脚本及 API 版文档文件
2026-04-06 16:09:00 +08:00

91 lines
5.2 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>Future OSS - 一切皆为插件的开发者工具运行时框架</title>
<meta name="description" content="Future OSS 是一个一切皆为插件的开发者工具运行时框架。支持插件热插拔、依赖自动解析、熔断降级、事件驱动,打造企业级稳定运行时。" />
<meta name="keywords" content="OSS, Future OSS, 插件化, 插件框架, Python框架, 开发者工具, 运行时, 微服务, 热插拔, 依赖解析, 事件驱动, 熔断降级" />
<meta name="author" content="Falck" />
<meta property="og:title" content="Future OSS - 一切皆为插件" />
<meta property="og:description" content="一切皆为插件的开发者工具运行时框架" />
<meta property="og:type" content="website" />
<link rel="canonical" href="https://oss-runtime.dev/" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/dock.css" />
<link rel="stylesheet" href="css/hero.css" />
</head>
<body>
<canvas id="particles"></canvas>
<!-- Dock 侧边栏 (由 js/dock.js 动态生成) -->
<div id="dock-container"></div>
<!-- 首页 Hero -->
<main class="page-hero" data-parallax-speed="0.05">
<div class="hero-container">
<div class="hero-content" data-parallax-speed="0.12">
<div class="badge">
<span class="badge-dot"></span>
<span>2026 · 插件驱动 · 一切皆可扩展</span>
</div>
<h1 class="hero-title">
<span class="title-line gradient-text">Future</span>
<span class="title-line gradient-text">OSS</span>
</h1>
<p class="hero-subtitle">一切皆为插件的开发者工具运行时框架</p>
<p class="hero-desc">协议、中间件、通知渠道……所有功能均以插件形式加载。内置熔断降级、依赖自动解析、事件驱动等企业级稳定性机制。</p>
<div class="hero-actions">
<a href="quickstart.html" class="btn btn-primary">
快速开始
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
<a href="features.html" class="btn btn-outline">了解更多</a>
</div>
<div class="hero-stats">
<div class="stat"><span class="stat-num">100+</span><span class="stat-label">配置参数</span></div>
<div class="stat"><span class="stat-num">10</span><span class="stat-label">插件类型</span></div>
<div class="stat"><span class="stat-num">自动</span><span class="stat-label">依赖解析</span></div>
</div>
</div>
<div class="hero-visual">
<div class="orbit orbit-1"><div class="orbit-dot"></div></div>
<div class="orbit orbit-2"><div class="orbit-dot orbit-dot-lg"></div></div>
<div class="ripple-container">
<div class="ripple ripple-1"></div>
<div class="ripple ripple-2"></div>
<div class="ripple ripple-3"></div>
<div class="ripple ripple-4"></div>
<div class="ripple ripple-5"></div>
<div class="cube-scene">
<div class="cube is-spinning" id="feature-cube">
<div class="cube-face cube-face-front" data-face="front"></div>
<div class="cube-face cube-face-back" data-face="back"></div>
<div class="cube-face cube-face-right" data-face="right"></div>
<div class="cube-face cube-face-left" data-face="left"></div>
<div class="cube-face cube-face-top" data-face="top"></div>
<div class="cube-face cube-face-bottom" data-face="bottom"></div>
</div>
<div class="cube-tooltip" id="cube-tooltip">
<div class="cube-tooltip-icon"></div>
<div class="cube-tooltip-title"></div>
<div class="cube-tooltip-desc"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="js/dock.js"></script>
<script src="js/particles.js"></script>
<script src="js/parallax.js"></script>
<script src="js/animations.js"></script>
<script src="js/cube.js"></script>
</body>
</html>