HTML后台

ui-kit — HTML 后台模板

作者 CloudArsenal

Cloud Arsenal UI Kit 是一组面向云运维仪表盘的深色主题 HTML 模板，包含凭据、总览、AWS、Azure、安全、成本、设置七个页面，零依赖，可直接在浏览器中打开。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-15查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

七个独立 HTML 模板覆盖凭据、总览、AWS、Azure、安全、成本、设置场景

零依赖，无需构建步骤或 npm install，克隆后可直接在浏览器打开

通过 CDN 使用 Tailwind CSS、Google Fonts 与 Material Symbols 图标

四套基于 CSS 变量的主题，通过 data-theme 属性切换

MIT 许可，可用于个人和商业项目

模板详细介绍

Cloud Arsenal UI Kit 提供七个独立的 HTML 模板，用于云运维仪表盘界面：Credentials（玻璃拟态认证弹窗，含邮箱 SSO 检测、多云提供商选择、两步向导）、Overview（主仪表盘，含指标条、图表、AI 命令栏、提供商徽章）、AWS（多账户 AWS 支出趋势、服务拆分、资源磁贴）、Azure（多订阅 Azure 的 VM、AKS、SQL 与成本拆分）、Security（CIS 基准、关键问题列表、合规进度条）、Cost（AI 成本查询结果、节省建议、闲置检测）、Settings（MCP 服务器注册表、SSO 配置、AI 提供商切换）。

每个模板是独立 HTML 文件，通过 CDN 引入 Tailwind CSS、Google Fonts（Space Grotesk、Inter、JetBrains Mono）和 Material Symbols 图标，无需构建步骤或 npm install，克隆后直接在浏览器打开即可。主题基于 CSS 变量，提供 minimal、deeptech、quartz、infrared 四套配色，通过修改 data-theme 属性切换。

该 UI Kit 是 Cloud Arsenal 多云端运维平台的设计基础，采用 MIT 许可，可用于个人和商业项目。README 未说明模板的浏览器兼容范围、无障碍支持、组件复用方式或与主应用的集成细节。

HTML后台

适合你的项目吗？

适用场景

快速搭建云运维仪表盘的界面原型
为多云端管理平台准备深色主题的页面模板
在无构建工具的环境中直接预览和调整页面样式

适合人群

需要云运维仪表盘界面原型的开发者或设计者
希望以纯 HTML 加 CDN 方式起步、不引入构建流程的项目
需要多套深色配色方案进行界面比选的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库：git clone https://github.com/CloudArsenal/ui-kit
2
直接在浏览器中打开 index.html 或 templates 目录下的任一模板
3
切换主题时修改页面上的 data-theme 属性为 minimal、deeptech、quartz 或 infrared

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
模板通过 CDN 引入 Tailwind CSS，使用时依赖该外部 CDN 服务可用。
模板通过 Google Fonts 加载 Space Grotesk、Inter、JetBrains Mono 字体，依赖 Google 字体服务。
图标使用 Google 的 Material Symbols 字体服务，需联网加载。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

- [Tailwind CSS](https://tailwindcss.com) via CDN
README 原文

- [Google Fonts](https://fonts.google.com) — Space Grotesk, Inter, JetBrains Mono
README 原文

- [Material Symbols](https://fonts.google.com/icons) for icons
README 原文

https://github.com/CloudArsenal/ui-kit/blob/main/LICENSE https://github.com/CloudArsenal/ui-kit/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-15。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 80 / 100
技术栈: HTML
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-03-31
截图检查日期: 2026-10-15

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: e79389e8f5f3f86263b467574463f2166079300c48943bc5f126fd030868458a

2026-10-15T06:04:03.543Z

来源文件 / 仓库

# Cloud Arsenal UI Kit

Dark-themed UI templates for cloud operations dashboards. Zero dependencies. Drop into any project.

**[Live Preview →](https://cloudArsenal.github.io/ui-kit)**

---

## Templates

| Template | Description |
|---|---|
| [Credentials](templates/credentials.html) | Glassmorphism auth modal — email SSO detection, multi-cloud provider select, 2-step wizard |
| [Overview](templates/overview.html) | Main dashboard — metric strip, charts, AI command bar, provider badges |
| [AWS](templates/aws.html) | Multi-account AWS — spend trend, service breakdown, resource tiles |
| [Azure](templates/azure.html) | Multi-subscription Azure — VMs, AKS, SQL, cost breakdown |
| [Security](templates/security.html) | CIS benchmarks, critical issues list, compliance progress bars |
| [Cost](templates/cost.html) | AI cost query results, savings recommendations, idle detection |
| [Settings](templates/settings.html) | MCP server registry, SSO config, AI provider switcher |

---

## Usage

Clone and open any template directly in a browser — no build step, no npm install.

```bash
git clone https://github.com/CloudArsenal/ui-kit
open ui-kit/index.html
```

Each template is a standalone HTML file using:
- [Tailwind CSS](https://tailwindcss.com) via CDN
- [Google Fonts](https://fonts.google.com) — Space Grotesk, Inter, JetBrains Mono
- [Material Symbols](https://fonts.google.com/icons) for icons

---

## Themes

4 CSS variable-based themes — switch by changing the `data-theme` attribute:

| Theme | Background | Accent |
|---|---|---|
| `minimal` | `#0E0E12` | `#52B6FF` ice blue |
| `deeptech` | `#050814` | `#4F46E5` + `#22D3EE` neon |
| `quartz` | `#0B0B14` | `#C678DD` violet |
| `infrared` | `#0D0806` | `#FF6B35` warm orange |

---

## Part of Cloud Arsenal

This UI kit is the design foundation for [Cloud Arsenal](https://cloud-arsenal.com) — an open-source AI-driven multi-cloud operations platform.

- Main app: [cloud-arsenal/app](https://github.com/CloudArsenal/app)
- AWS MCP server: [cloud-arsenal/aws-server](https://github.com/CloudArsenal/aws-server)
- Azure MCP server: [cloud-arsenal/azure-server](https://github.com/CloudArsenal/azure-server)

---

## License

MIT — use freely in personal and commercial projects.

反馈内容错误