starlight-apk/NebulaShell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增简易的8080面板😊

Browse Source
This commit is contained in:
Falck
2026-04-17 23:15:15 +08:00
parent c38d2f66d1
commit 9d19d09821
465 changed files with 9235 additions and 35285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
video/index.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FutureOSS - 视频展示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', sans-serif;
background: #0a0a0a;
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
header {
padding: 40px 20px;
text-align: center;
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
header h1 { font-size: 2.5rem; margin-bottom: 10px; }
header p { opacity: 0.8; font-size: 1.1rem; }
.container {
max-width: 1200px;
padding: 40px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
width: 100%;
}
.card {
background: #1a1a1a;
border-radius: 16px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}
.card-thumb {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
.card:nth-child(1) .card-thumb { background: linear-gradient(135deg, #667eea, #764ba2); }
.card:nth-child(2) .card-thumb { background: linear-gradient(135deg, #f093fb, #f5576c); }
.card:nth-child(3) .card-thumb { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.card-info { padding: 20px; }
.card-info h3 { margin-bottom: 8px; font-size: 1.2rem; }
.card-info p { color: #888; font-size: 0.9rem; }
.play-btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 8px 16px;
background: #667eea;
border-radius: 8px;
font-size: 0.9rem;
transition: background 0.2s;
}
.card:hover .play-btn { background: #764ba2; }
footer {
padding: 30px;
text-align: center;
color: #666;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>🎬 FutureOSS 视频展示</h1>
<p>用动画和声音了解我们的项目</p>
</header>
<div class="container">
<div class="card" onclick="location.href='intro.html'">
<div class="card-thumb">📦</div>
<div class="card-info">
<h3>项目特性展示</h3>
<p>立方体动画演示核心特性，插件化、安全性、实时监控...</p>
<div class="play-btn">▶ 点击播放</div>
</div>
</div>
<div class="card" onclick="location.href='plugin-demo.html'">
<div class="card-thumb">🔌</div>
<div class="card-info">
<h3>插件开发演示</h3>
<p>从零开发一个插件，看这里就对了</p>
<div class="play-btn">▶ 点击播放</div>
</div>
</div>
<div class="card" onclick="location.href='architecture.html'">
<div class="card-thumb">🏗️</div>
<div class="card-info">
<h3>架构解析</h3>
<p>深入了解 FutureOSS 的技术架构和设计思想</p>
<div class="play-btn">▶ 点击播放</div>
</div>
</div>
</div>
<footer>
<p>FutureOSS © 2026 — 一切皆为插件</p>
</footer>
</body>
</html>