Compare commits

...

2 Commits

Author SHA1 Message Date
671112aed2 feat: 优化 2026-03-28 17:26:49 +08:00
b6747b1c44 chore: 删除所有文本文件 2026-03-28 17:20:10 +08:00
9 changed files with 103 additions and 2042 deletions

103
CLAUDE.md Normal file
View File

@@ -0,0 +1,103 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## 项目概述
模拟所 (Monisuo) — 虚拟货币模拟交易平台。全栈 monorepo三个子系统共用一个 MySQL 数据库。
## 构建与运行命令
### Java 后端 (Maven, Java 8, Spring Boot 2.2.4)
```bash
mvn spring-boot:run # 开发服务,端口 5010
mvn compile # 仅编译
mvn test # 运行测试
mvn clean package -DskipTests # 打包 JAR → target/monisuo-1.0.jar
```
### Flutter 移动端/Web (`flutter_monisuo/`)
```bash
cd flutter_monisuo
flutter pub get # 安装依赖
flutter run -d chrome # 开发 (Web)
flutter run -d android # 开发 (Android)
flutter analyze # 代码检查
flutter test # 运行测试
flutter build web --release --dart-define=ENV=prod # 生产 Web 构建 → build/web/
flutter build apk --release --dart-define=ENV=prod # 生产 APK 构建 → build/app/outputs/
```
通过 `--dart-define=ENV=prod|dev` 切换环境API 地址自动切换。
### Vue 管理后台 (`monisuo-admin/`)
```bash
cd monisuo-admin
pnpm install # 安装依赖(需 pnpm >=10, node >=22.15
pnpm dev # Vite 开发服务
pnpm build # 生产构建vue-tsc + vite→ dist/
pnpm lint / pnpm lint:fix # 代码检查,使用 @antfu/eslint-config
```
### 部署
```bash
deploy/build_local.sh # 本地构建 Flutter + Admin
deploy/deploy_server.sh # 完整服务器部署(前端同步 + Maven 构建 + JAR 重启)
deploy/deploy_server.sh frontend # 仅部署前端
deploy/deploy_server.sh backend # 仅部署后端
```
服务器:`8.155.172.147`,后端端口 `5010`。Flutter Web → `/www/wwwroot/monisuo-h5/`,管理后台 → `/www/wwwroot/monisuo-admin/`
## 架构
### 后端 (`src/main/java/com/it/rattan/`)
分层架构:**Controller → Service → Mapper → Entity**。
- JWT 认证:`TokenFilter` + `UserContext`ThreadLocal。接口前缀`/api/`(用户端)、`/admin/`(管理端)。
- 统一响应封装:`Result<T>`code/msg/data`PageResult` 分页。
- `GlobalExceptionHandler` 全局异常处理BCrypt 密码加密。
- `bean-searcher` 动态查询构建,用于管理端列表接口。
- 数据库MySQL`monisuo`ORM 用 MyBatis-Plus。建表脚本 `sql/init.sql`11 张表)。
### Flutter 应用 (`flutter_monisuo/lib/`)
- **状态管理**ProviderChangeNotifier`providers/` 消费 `data/services/`,底层调用 `core/network/DioClient`
- **UI**shadcn_ui + 自定义主题系统(`core/theme/`)。深色主题为主,颜色集中管理在 `AppColorScheme`
- **数据流**`data/services/`API 调用)→ `providers/`(状态)→ `ui/pages/`(视图)。
- 页面auth、home、market、trade、asset、mine、orders、onboarding。
### Vue 管理后台 (`monisuo-admin/src/`)
- **路由**:基于文件系统的路由,`unplugin-vue-router``pages/` 目录)。路由层有鉴权守卫。
- **状态管理**Piniaauth、theme+ TanStack Vue Query服务端状态
- **HTTP**Axixos 通过 `composables/use-axios.ts` 封装。Vite 代理 `/api``localhost:5010`(去除前缀)。
- **UI**shadcn-vue 组件在 `components/ui/`(自动注册,已排除 tsconfig
- **自动导入**Vue composables、stores、constants 通过 `unplugin-auto-import` 自动导入。
- **代码检查**ESLint 9 flat config + `@antfu/eslint-config`。Pre-commit 钩子通过 `simple-git-hooks` + `lint-staged`
### 核心业务领域
双账户体系:
- **资金账户** (`account_fund`):与用户 1:1USDT 余额,用于充提。充值需管理员审批。
- **交易账户** (`account_trade`):与用户 1:N每币种一个持有币种数量和加权平均成本价。
- 资金流转:充值 → 资金账户 → 划转至交易账户(USDT) → 买卖币种。所有操作记录在 `account_flow`
- 盈亏计算:`(持仓数量 × 当前价格) - (持仓数量 × 平均成本价)`
- 详细流程图见 `ACCOUNT_SYSTEM_DESIGN.md`
### 数据库核心表
`sys_user``sys_admin``coin``price_type`: 1=实时, 2=管理定价)、`account_fund``account_trade`(唯一索引 `user_id+coin_code`)、`order_trade``order_fund`(充提订单,状态驱动的审批流)、`account_flow``sys_config``user_favorite``cold_wallet`
## 代码规范
### Git 提交
Conventional Commits 格式:`feat(module): 描述``fix(module): 描述``chore(scope): 描述`。提交正文可用中文。
### Flutter 代码规范
- 遵循 Effective Dart 规范,提交前运行 `flutter analyze`
- 使用 `AppSpacing``AppRadius``AppColorScheme` 主题常量,禁止硬编码颜色。
- 修改主题/UI 时不要改动业务逻辑/API/Provider 层。
### Java 代码规范
- 使用 Lombok 简化代码MyBatis-Plus `LambdaUpdateWrapper` 做更新操作。
- 所有涉及资金变动的方法必须加 `@Transactional(rollbackFor = Exception.class)`
- RESTful API 设计Swagger 文档springfox 2.9.2)。
### 管理后台代码规范
- TypeScript strict 模式lint 规则强制 `<script lang="ts">`
- shadcn-vue 组件自动管理,不要手动编辑 `components/ui/`
- 用 TanStack Vue Query 做数据请求Pinia 仅用于客户端状态。

View File

@@ -1,140 +0,0 @@
#!/bin/bash
# ============================================
# Monisuo CI/CD 部署脚本 - 宝塔 Webhook
# ============================================
# ============ 环境配置 ============
# JDK 路径(根据实际修改)
export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk
export PATH=$JAVA_HOME/bin:$PATH
# Maven 路径(如果手动安装)
export MAVEN_HOME=/opt/maven
export PATH=$MAVEN_HOME/bin:$PATH
# ============ 项目配置 ============
PROJECT_PATH="/opt/monisuo"
GIT_REPO="http://sion:woshisaw.@8.155.172.147:3001/sion/monisuo.git"
JAR_NAME="monisuo-1.0.jar"
LOG_FILE="/opt/monisuo/deploy.log"
WEBHOOK_SECRET=""
# ============ 日志函数 ============
log() {
echo "[$(date '+%Y-%m-%d %H:%M:%S')] $1" >> $LOG_FILE
}
# ============ 错误处理 ============
error_exit() {
log "❌ 错误: $1"
echo "Error: $1"
exit 1
}
# ============ 主流程 ============
log "=========================================="
log "🚀 开始 CI/CD 部署"
log "=========================================="
# 记录环境信息
log "Java 版本: $(java -version 2>&1 | head -1)"
log "Maven 版本: $(mvn -version 2>&1 | head -1)"
log "当前目录: $(pwd)"
# 1. 检查/克隆项目
if [ ! -d "$PROJECT_PATH/.git" ]; then
log "📥 首次部署,克隆项目..."
mkdir -p $PROJECT_PATH
git clone $GIT_REPO $PROJECT_PATH >> $LOG_FILE 2>&1 || error_exit "Git 克隆失败"
fi
cd $PROJECT_PATH || error_exit "无法进入项目目录"
# 2. 拉取最新代码
log "📥 拉取最新代码..."
git fetch origin >> $LOG_FILE 2>&1
git reset --hard origin/main >> $LOG_FILE 2>&1 || error_exit "Git 拉取失败"
# 获取提交信息
COMMIT_HASH=$(git rev-parse --short HEAD)
COMMIT_MSG=$(git log -1 --pretty=%s)
log "📝 最新提交: $COMMIT_HASH - $COMMIT_MSG"
# 3. 检查文件变更
CHANGED_FILES=$(git diff --name-only HEAD~1 HEAD 2>/dev/null)
log "📁 变更文件: $CHANGED_FILES"
# 4. 后端构建和部署
if echo "$CHANGED_FILES" | grep -qE "^src/|^pom.xml"; then
log "🔨 检测到后端代码变更,开始构建..."
cd $PROJECT_PATH
mvn clean package -DskipTests >> $LOG_FILE 2>&1
if [ $? -ne 0 ]; then
error_exit "Maven 构建失败"
fi
log "✅ Maven 构建成功"
else
log "⏭️ 后端代码无变更,跳过构建"
fi
# 5. 停止旧服务
log "🛑 停止旧服务..."
pkill -f $JAR_NAME 2>/dev/null
sleep 3
# 检查是否停止成功
if pgrep -f $JAR_NAME > /dev/null; then
log "⚠️ 进程未停止,强制终止..."
pkill -9 -f $JAR_NAME 2>/dev/null
sleep 2
fi
# 6. 启动新服务
log "🚀 启动新服务..."
cd $PROJECT_PATH
nohup java -jar \
-Xms256m \
-Xmx512m \
-XX:+UseG1GC \
target/$JAR_NAME \
--spring.profiles.active=dev \
> $PROJECT_PATH/app.log 2>&1 &
# 7. 检查服务状态
sleep 5
if pgrep -f $JAR_NAME > /dev/null; then
PID=$(pgrep -f $JAR_NAME)
log "✅ 服务启动成功 (PID: $PID)"
else
log "❌ 服务启动失败,查看日志:"
tail -50 $PROJECT_PATH/app.log >> $LOG_FILE
error_exit "服务启动失败"
fi
# 8. 健康检查
log "🔍 健康检查..."
sleep 5
HEALTH_CHECK=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:5010/ 2>/dev/null || echo "000")
if [ "$HEALTH_CHECK" = "200" ] || [ "$HEALTH_CHECK" = "404" ]; then
log "✅ 健康检查通过 (HTTP $HEALTH_CHECK)"
else
log "⚠️ 健康检查异常 (HTTP $HEALTH_CHECK)"
fi
# 9. 清理旧日志
log "🧹 清理旧日志..."
find $PROJECT_PATH -name "*.log" -mtime +7 -delete 2>/dev/null
# 10. 完成
log "=========================================="
log "✅ CI/CD 部署完成"
log " 提交: $COMMIT_HASH"
log " 时间: $(date '+%Y-%m-%d %H:%M:%S')"
log "=========================================="
echo "Deploy Success! Commit: $COMMIT_HASH"

View File

@@ -1,477 +0,0 @@
# Changelog
## v0.7.7
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.6...v0.7.7)
### 🩹 Fixes
- Unify routing metadata format and adjust YAML indentation ([#59](https://github.com/Whbbit1999/shadcn-vue-admin/pull/59))
- Update VSCode extensions and settings for improved spell checking and add package manager version update ([86188e7](https://github.com/Whbbit1999/shadcn-vue-admin/commit/86188e7))
- Update environment error handling and toast notification delay; remove markdown support from Vite config ([9071161](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9071161))
### 💅 Refactors
- Refactor layout components and improve sidebar navigation ([#60](https://github.com/Whbbit1999/shadcn-vue-admin/pull/60))
### 🏡 Chore
- **release:** V0.7.6 ([e5a53ce](https://github.com/Whbbit1999/shadcn-vue-admin/commit/e5a53ce))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.7.6
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.5...v0.7.6)
### 🚀 Enhancements
- Enhance authentication flow with redirect handling ([#54](https://github.com/Whbbit1999/shadcn-vue-admin/pull/54))
- Add pagination constants and integrate into data table components ([#56](https://github.com/Whbbit1999/shadcn-vue-admin/pull/56))
- Enhance talk footer with dropdown menu and improved input group layout ([b29a41a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b29a41a))
### 🩹 Fixes
- When the sidebar is collapsed, the user is redirected to another page, and the collapsed state is lost. #57 ([#58](https://github.com/Whbbit1999/shadcn-vue-admin/pull/58), [#57](https://github.com/Whbbit1999/shadcn-vue-admin/issues/57))
- Update pagination handling for server-side pagination support ([d190ae0](https://github.com/Whbbit1999/shadcn-vue-admin/commit/d190ae0))
### 💅 Refactors
- Pressing command + k or ctrl + k brings up the command-menu-panel for faster and more intuitive operation. ([#53](https://github.com/Whbbit1999/shadcn-vue-admin/pull/53))
### 🏡 Chore
- **release:** V0.7.5 ([38fb489](https://github.com/Whbbit1999/shadcn-vue-admin/commit/38fb489))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.7.5
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.4...v0.7.5)
### 🚀 Enhancements
- Add InlineTip component and integrate into SVA Components page ([#51](https://github.com/Whbbit1999/shadcn-vue-admin/pull/51))
### 💅 Refactors
- Remove unused styles and improve component structure ([#52](https://github.com/Whbbit1999/shadcn-vue-admin/pull/52))
### 📦 Build
- Update shadcn-vue components ([#50](https://github.com/Whbbit1999/shadcn-vue-admin/pull/50))
### 🏡 Chore
- **release:** V0.7.4 ([1d7f3e2](https://github.com/Whbbit1999/shadcn-vue-admin/commit/1d7f3e2))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.7.4
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.3...v0.7.4)
### 🚀 Enhancements
- Add server pagination support to data table components ([#46](https://github.com/Whbbit1999/shadcn-vue-admin/pull/46))
- Implement task management API functions and response types ([#47](https://github.com/Whbbit1999/shadcn-vue-admin/pull/47))
- Use shadcn-vue chart,remove vue-charts ([#49](https://github.com/Whbbit1999/shadcn-vue-admin/pull/49))
### 🩹 Fixes
- Typo Update README.md ([#48](https://github.com/Whbbit1999/shadcn-vue-admin/pull/48))
### 🏡 Chore
- **release:** V0.7.3 ([1808df2](https://github.com/Whbbit1999/shadcn-vue-admin/commit/1808df2))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
- WuMingDao ([@WuMingDao](https://github.com/WuMingDao))
## v0.7.3
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.2...v0.7.3)
### 🩹 Fixes
- The issue with no dynamic updates when deleting multiple rows in a batch demo task or when selecting multiple rows. ([435b0aa](https://github.com/Whbbit1999/shadcn-vue-admin/commit/435b0aa))
### 💅 Refactors
- Update CHANGELOG.md ([b4eb09b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b4eb09b))
- Reorganize plugin setup and improve imports ([b5cd1be](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b5cd1be))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.7.2
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.1...v0.7.2)
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.7.1
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.0...v0.7.1)
### 🚀 Enhancements
- Add TwoLayout in global layouts, example in settings/components… ([#38](https://github.com/Whbbit1999/shadcn-vue-admin/pull/38))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.7.0
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.6.1...v0.7.0)
### 🚀 Enhancements
- StatusBadge component And Copy component #25,#26 ([#29](https://github.com/Whbbit1999/shadcn-vue-admin/pull/29), [#25](https://github.com/Whbbit1999/shadcn-vue-admin/issues/25), [#26](https://github.com/Whbbit1999/shadcn-vue-admin/issues/26))
- Table bulk-actions #27 ([#36](https://github.com/Whbbit1999/shadcn-vue-admin/pull/36), [#27](https://github.com/Whbbit1999/shadcn-vue-admin/issues/27))
### 🩹 Fixes
- The pinia plugin persistedstate plugin is invalid ([#35](https://github.com/Whbbit1999/shadcn-vue-admin/pull/35))
- Pinia register in router guard ([fb95179](https://github.com/Whbbit1999/shadcn-vue-admin/commit/fb95179))
### 🏡 Chore
- **release:** V0.6.1 ([f9bfce8](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f9bfce8))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.6.1
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.6.0...v0.6.1)
### 🏡 Chore
- Release v0.6.0 ([9122d34](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9122d34))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.5.1
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.5.0...v0.5.1)
### 🚀 Enhancements
- Toggle content layout block #22 ([#23](https://github.com/Whbbit1999/shadcn-vue-admin/pull/23), [#22](https://github.com/Whbbit1999/shadcn-vue-admin/issues/22))
- **command-menu-panel:** Use button in mobile ([47cb816](https://github.com/Whbbit1999/shadcn-vue-admin/commit/47cb816))
### 🏡 Chore
- **release:** V0.5.0 ([32d2939](https://github.com/Whbbit1999/shadcn-vue-admin/commit/32d2939))
### 🎨 Styles
- Add a border to the sidebar after it is selected ([#24](https://github.com/Whbbit1999/shadcn-vue-admin/pull/24))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.5.0
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.4.1...v0.5.0)
### 🚀 Enhancements
- **view-options.vue:** Add table toggle columns status reset action ([#20](https://github.com/Whbbit1999/shadcn-vue-admin/pull/20))
- **data-table:** Now we can use this component to quickly generate a… ([#21](https://github.com/Whbbit1999/shadcn-vue-admin/pull/21))
### 🏡 Chore
- **release:** V0.4.1 ([83c9078](https://github.com/Whbbit1999/shadcn-vue-admin/commit/83c9078))
### 🎨 Styles
- Remove basic-header component shadow-sm and padding-x style ([13c6ecf](https://github.com/Whbbit1999/shadcn-vue-admin/commit/13c6ecf))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.4.1
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.4.0...v0.4.1)
### 🩹 Fixes
- Auth-title component ([ff170c7](https://github.com/Whbbit1999/shadcn-vue-admin/commit/ff170c7))
- Add tooltip to sidebar menu button ([febc221](https://github.com/Whbbit1999/shadcn-vue-admin/commit/febc221))
- Replace button with sidebar menu button for dropdown trigger ([1c4d6fd](https://github.com/Whbbit1999/shadcn-vue-admin/commit/1c4d6fd))
### 🏡 Chore
- **release:** V0.4.0 ([a9c5355](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a9c5355))
- Packages update and lint ([a45d17a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a45d17a))
### 🎨 Styles
- Sidebar popup style change ([4a20c31](https://github.com/Whbbit1999/shadcn-vue-admin/commit/4a20c31))
- Settings/components/profile-form CSS style fine-tuning ([9030b3b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9030b3b))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
- Onur Köse <kose.onur@gmail.com>
- Unknown <whbbit@qq.com>
## v0.4.0
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.4...v0.4.0)
### 🏡 Chore
- **release:** V0.3.4 ([6a3b12d](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6a3b12d))
- Update packages ([9bb3353](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9bb3353))
- Update packages ([7ef29d6](https://github.com/Whbbit1999/shadcn-vue-admin/commit/7ef29d6))
### 🎨 Styles
- Language-change button and toggle-theme button use size=button ([3e46f30](https://github.com/Whbbit1999/shadcn-vue-admin/commit/3e46f30))
- Replace w-* h-* with the new size-* utility ([6a33e42](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6a33e42))
- Settings module page style adjustment ([98b687e](https://github.com/Whbbit1999/shadcn-vue-admin/commit/98b687e))
- Auth-title icon change ([f383221](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f383221))
- Billing/transaction-catd remove backgroun image ([e55e5c1](https://github.com/Whbbit1999/shadcn-vue-admin/commit/e55e5c1))
### ❤️ Contributors
- Unknown <whbbit@qq.com>
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.3.4
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.3...v0.3.4)
### 🩹 Fixes
- Does not overflow the default layout width on desktop screens ([#12](https://github.com/Whbbit1999/shadcn-vue-admin/pull/12))
### 🏡 Chore
- **release:** V0.3.3 ([0552b7e](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0552b7e))
- Packages update ([dabfc66](https://github.com/Whbbit1999/shadcn-vue-admin/commit/dabfc66))
- Razor-plan ([#13](https://github.com/Whbbit1999/shadcn-vue-admin/pull/13))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.3.3
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.2...v0.3.3)
### 🚀 Enhancements
- New custom-theme component ([6dfcd56](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6dfcd56))
- When the sidebar is collapsed, click the menu to display the secondary menu using dropdown and save the sidebar collapsed state ([#11](https://github.com/Whbbit1999/shadcn-vue-admin/pull/11))
### 🏡 Chore
- **release:** V0.3.2 ([f42338c](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f42338c))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.3.2
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.1...v0.3.2)
### 🩹 Fixes
- Search-menu dialog error ([0fd2d7e](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0fd2d7e))
- Build error, use unplugin-vue-router,router name type ([010122f](https://github.com/Whbbit1999/shadcn-vue-admin/commit/010122f))
- Remove unplugin-vue-router, pending migrate-to-unplugin-vue-router branch accomplish ([b2f4f64](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b2f4f64))
- Index page remove default layout ([8524cf4](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8524cf4))
### 📦 Build
- Use unplugin-vue-router instead of vite-plugin-pages ([c9aaf4a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/c9aaf4a))
### 🏡 Chore
- **release:** V0.3.0 ([fc500d1](https://github.com/Whbbit1999/shadcn-vue-admin/commit/fc500d1))
- **release:** V0.3.1 ([3f80295](https://github.com/Whbbit1999/shadcn-vue-admin/commit/3f80295))
- Vite-env.d.ts add unplugin-vue-router/client ([631e5db](https://github.com/Whbbit1999/shadcn-vue-admin/commit/631e5db))
### ❤️ Contributors
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
## v0.3.1
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.0...v0.3.1)
### 🩹 Fixes
- Use vue-sonner instead of shadcn-vue/toast ([8d020fd](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8d020fd))
### 🏡 Chore
- **release:** V0.3.0 ([fc500d1](https://github.com/Whbbit1999/shadcn-vue-admin/commit/fc500d1))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.3.0
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.0...v0.3.0)
### 🩹 Fixes
- Use vue-sonner instead of shadcn-vue/toast ([8d020fd](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8d020fd))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.2.5
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.2.4...v0.2.5)
### 🩹 Fixes
- **vite.config.ts:** Build error ([8e3620b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8e3620b))
### 🏡 Chore
- Add description and keywords in index.html ([054d626](https://github.com/Whbbit1999/shadcn-vue-admin/commit/054d626))
- Update vite ([8a00544](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8a00544))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.2.4
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.2.3...v0.2.4)
### 🏡 Chore
- **release:** V0.2.3 ([2c22989](https://github.com/Whbbit1999/shadcn-vue-admin/commit/2c22989))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.2.3
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.2.2...v0.2.3)
### 🚀 Enhancements
- User module CRUD ([f1cbf66](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f1cbf66))
### 🩹 Fixes
- Fix the browser warning of the billing block ([7c77903](https://github.com/Whbbit1999/shadcn-vue-admin/commit/7c77903))
### 🏡 Chore
- Update packages ([e8b1a23](https://github.com/Whbbit1999/shadcn-vue-admin/commit/e8b1a23))
- Update shadcn-vue checkbox component ([e329434](https://github.com/Whbbit1999/shadcn-vue-admin/commit/e329434))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.2.2
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.2.1...v0.2.2)
### 🩹 Fixes
- Billing-detail card in dark-mode background style ([277b24b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/277b24b))
- Data-table view-options component drop-down-menu-checkbox-item status error ([0b7d653](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0b7d653))
- Data-table table-columns component checkbox status error ([d0d53fb](https://github.com/Whbbit1999/shadcn-vue-admin/commit/d0d53fb))
- Change settings block notifications-form component checkbox component attributes ([ab5a9e9](https://github.com/Whbbit1999/shadcn-vue-admin/commit/ab5a9e9))
### 🏡 Chore
- Remove release-it and release-it-pnpm, change release to unjs/changelogen ([0c14dcd](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0c14dcd))
- Remove package.json file git block ([d28bb67](https://github.com/Whbbit1999/shadcn-vue-admin/commit/d28bb67))
- Update vueuse/core package ([b007f3d](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b007f3d))
- Update radix-vue to reak-ui ([83ad1ee](https://github.com/Whbbit1999/shadcn-vue-admin/commit/83ad1ee))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>
## v0.2.1
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/0.2.0...v0.2.1)
### 🚀 Enhancements
- Invite User And Create User demo use Dialog on desktop, use Drawer on mobile. ([f1831e8](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f1831e8))
- The App module is synchronized with the app module of Shadcn Admin ([9b2606a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9b2606a))
- Add change theme, like shadcn vue document ([6dc355b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6dc355b))
- Update LICENSE ([221c4ca](https://github.com/Whbbit1999/shadcn-vue-admin/commit/221c4ca))
- Change hash history mode to webHistory ([a91c44c](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a91c44c))
- The auth module synchronized with the auth module of Shadcn Admin ([3a91093](https://github.com/Whbbit1999/shadcn-vue-admin/commit/3a91093))
- Add nprogress and global router guard ([8b6d4b7](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8b6d4b7))
- Settings module use shadcn-vue example forms ([0149afa](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0149afa))
- When the system color changes, the website icon changes ([6569aa4](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6569aa4))
- **Search/Menu:** Search Menu component style change, use stone primary color ([34a6cf8](https://github.com/Whbbit1999/shadcn-vue-admin/commit/34a6cf8))
- Search menu component when command item click close the panel ([07abd20](https://github.com/Whbbit1999/shadcn-vue-admin/commit/07abd20))
- **DataTable:** Global table components change icon ([c29fdd5](https://github.com/Whbbit1999/shadcn-vue-admin/commit/c29fdd5))
- Search menu add 'plans & billings page' ([d8f5286](https://github.com/Whbbit1999/shadcn-vue-admin/commit/d8f5286))
- Billings page design change ([6886f3e](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6886f3e))
- New scrollbar ([0d6de56](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0d6de56))
- Added a example module to talk to ai ([571dd4a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/571dd4a))
- Tasks CRUD Demo ([5fd8052](https://github.com/Whbbit1999/shadcn-vue-admin/commit/5fd8052))
### 🩹 Fixes
- Fix auto-import-components names error, now shadcn-vue components can auto import ,prefix is UI ([a884695](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a884695))
- Shadcn-vue calendar eslint error ([5abac39](https://github.com/Whbbit1999/shadcn-vue-admin/commit/5abac39))
- Help-center in darkmode style error ([92d170d](https://github.com/Whbbit1999/shadcn-vue-admin/commit/92d170d))
- Ai-talk module type error ([b8c708c](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b8c708c))
### 💅 Refactors
- Code format ([62acdbc](https://github.com/Whbbit1999/shadcn-vue-admin/commit/62acdbc))
### 📦 Build
- Upgrade packages ([88896c5](https://github.com/Whbbit1999/shadcn-vue-admin/commit/88896c5))
### 🏡 Chore
- Fix netlify reload page 404 ([a296949](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a296949))
- Error module sidebar name change ([c0f6a05](https://github.com/Whbbit1999/shadcn-vue-admin/commit/c0f6a05))
- When deploying vercel you need to add a file profile ([9b841fb](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9b841fb))
- Change package.json info ([a413bde](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a413bde))
- Update packages ([7f7c872](https://github.com/Whbbit1999/shadcn-vue-admin/commit/7f7c872))
- Remove VueQueryDevtools, you can find it in vue-devtools or add it yourself ([67d2c4c](https://github.com/Whbbit1999/shadcn-vue-admin/commit/67d2c4c))
- Update packages ([1b8234d](https://github.com/Whbbit1999/shadcn-vue-admin/commit/1b8234d))
### 🎨 Styles
- Layout Page components add py-4 ([442f52b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/442f52b))
### ❤️ Contributors
- Whbbit1999 <luckyboy_dong@sina.com>

View File

@@ -1,170 +0,0 @@
# Monisuo Admin 实施计划
## 项目信息
- 项目名称: Monisuo 管理后台
- 技术栈: Vue 3 + shadcn-vue + Tailwind CSS
- 开始时间: 2026-03-22
- 完成时间: 2026-03-22
- 状态: COMPLETE
## 任务清单
### 阶段 1: 布局组件封装 ✅
- [x] BasicPage 组件 - 已有组件可直接使用
- [x] 使用现有的 UiTable、UiCard 等组件
- [x] 使用现有的 UiDialog 组件
- [x] 使用现有的 UiSpinner 组件
### 阶段 2: 页面优化 ✅
- [x] 登录页响应式优化
- 添加表单验证
- 添加密码显示/隐藏
- 响应式布局
- 移动端 Logo
- [x] 资金总览页
- 统计卡片展示
- 快捷操作入口
- 待审批订单预览
- [x] 用户管理页
- Toast 提示
- 分页组件
- 用户详情弹窗
- 响应式布局PC表格/移动端卡片)
- [x] 币种管理页
- Toast 提示
- 表单验证
- 响应式布局
- [x] 订单审批页
- Toast 提示
- 订单详情弹窗
- 分页组件
- 筛选功能
- 响应式布局
### 阶段 3: 全局优化 ✅
- [x] Toast 提示(使用 vue-sonner
- [x] 路由守卫优化Monisuo 路由保护)
- [x] TypeScript 类型检查通过
- [x] 构建测试通过
### 阶段 4: 测试与完善 ✅
- [x] TypeScript 类型检查
- [x] 构建测试
- [x] 功能完整性检查
## 已实现的页面
### 1. 登录页 (`/auth/monisuo-sign-in.vue`)
- 响应式布局PC左右分栏移动端单列
- 表单验证(用户名、密码必填,密码长度检查)
- 密码显示/隐藏切换
- 加载状态和错误提示
- 美观的品牌展示
### 2. 资金总览 (`/monisuo/dashboard.vue`)
- 6个统计卡片充值、提现、在管资金、交易总值、待审批、用户数
- 快捷操作入口
- 待审批订单预览
- 响应式布局
### 3. 用户管理 (`/monisuo/users.vue`)
- 用户列表PC表格/移动端卡片)
- 搜索功能(用户名、状态筛选)
- 分页功能
- 用户状态切换(启用/禁用)
- 用户详情弹窗
- Toast 操作提示
### 4. 币种管理 (`/monisuo/coins.vue`)
- 币种列表PC表格/移动端卡片)
- 新增/编辑币种弹窗
- 调价功能(仅手动价格类型)
- 上下架功能
- 表单验证
- Toast 操作提示
### 5. 订单审批 (`/monisuo/orders.vue`)
- 待审批/全部订单 Tab 切换
- 订单列表PC表格/移动端卡片)
- 订单详情弹窗
- 审批功能(通过/驳回)
- 筛选功能(类型、状态)
- 分页功能
- Toast 操作提示
## API 对接情况
所有 API 已完成对接:
- ✅ POST /admin/login - 管理员登录
- ✅ GET /admin/user/list - 用户列表
- ✅ GET /admin/user/detail - 用户详情
- ✅ POST /admin/user/status - 禁用/启用用户
- ✅ GET /admin/coin/list - 币种列表
- ✅ POST /admin/coin/save - 新增/编辑币种
- ✅ POST /admin/coin/price - 调整币种价格
- ✅ POST /admin/coin/status - 币种上下架
- ✅ GET /admin/order/pending - 待审批订单
- ✅ GET /admin/order/list - 所有订单
- ✅ POST /admin/order/approve - 审批订单
- ✅ GET /admin/finance/overview - 资金总览
## 技术实现
### 使用的库
- Vue 3 + TypeScript
- shadcn-vue (Radix UI)
- Tailwind CSS 4
- TanStack Query (vue-query)
- Vue Router
- Pinia
- vue-sonner (Toast)
- @iconify/vue (图标)
- lucide-vue-next (图标)
### 响应式设计
- PC端表格布局充分利用大屏幕空间
- 移动端:卡片列表布局,简化信息展示
- 使用 Tailwind CSS 响应式断点 (md:, lg:, xl:)
### 路由守卫
- `/monisuo/*` 路由需要登录认证
- 未登录自动重定向到 `/auth/monisuo-sign-in`
## 进度日志
### 2026-03-22 03:48
- ✅ 项目初始化完成
- ✅ API 服务层实现
- ✅ 基础页面创建
- ✅ 认证逻辑实现
### 2026-03-22 (完成)
- ✅ 登录页响应式优化和表单验证
- ✅ 资金总览页统计卡片和快捷操作
- ✅ 用户管理页分页、详情弹窗、响应式布局
- ✅ 币种管理页表单验证、响应式布局
- ✅ 订单审批页详情弹窗、筛选、分页、响应式布局
- ✅ Toast 提示集成
- ✅ 路由守卫优化
- ✅ TypeScript 类型检查通过
- ✅ 构建测试通过
## 状态
STATUS: COMPLETE

View File

@@ -1,347 +0,0 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>KINETIC VAULT | Terminal</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"inverse-surface": "#f9f9ff",
"secondary-dim": "#ce7eec",
"surface-container-low": "#10131a",
"tertiary-container": "#00ffab",
"on-secondary-container": "#f1bfff",
"on-primary": "#004c5e",
"on-tertiary": "#006642",
"surface-container-high": "#1c2028",
"surface-container-highest": "#22262f",
"on-tertiary-fixed": "#00472d",
"surface-container": "#161a21",
"outline-variant": "#45484f",
"secondary-container": "#6e208c",
"primary-fixed": "#00d2ff",
"inverse-on-surface": "#52555c",
"surface-tint": "#72dcff",
"surface-container-lowest": "#000000",
"secondary-fixed-dim": "#ebadff",
"primary-dim": "#00c3ed",
"on-surface-variant": "#a9abb3",
"surface-bright": "#282c36",
"on-primary-container": "#004253",
"on-error": "#490006",
"on-secondary-fixed-variant": "#792c97",
"tertiary": "#afffd1",
"on-primary-fixed": "#002c38",
"inverse-primary": "#00687f",
"background": "#0b0e14",
"primary-fixed-dim": "#00c3ed",
"on-secondary": "#4c0068",
"error-container": "#9f0519",
"tertiary-fixed": "#00ffab",
"tertiary-dim": "#00efa0",
"on-primary-fixed-variant": "#004c5e",
"primary-container": "#00d2ff",
"tertiary-fixed-dim": "#00efa0",
"outline": "#73757d",
"on-tertiary-container": "#005c3b",
"secondary": "#dd8bfb",
"primary": "#72dcff",
"on-tertiary-fixed-variant": "#006742",
"on-secondary-fixed": "#580078",
"surface": "#0b0e14",
"error-dim": "#d7383b",
"error": "#ff716c",
"on-error-container": "#ffa8a3",
"on-background": "#ecedf6",
"secondary-fixed": "#f2c1ff",
"surface-variant": "#22262f",
"surface-dim": "#0b0e14",
"on-surface": "#ecedf6"
},
fontFamily: {
"headline": ["Space Grotesk"],
"body": ["Manrope"],
"label": ["Manrope"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
body { font-family: 'Manrope', sans-serif; }
.font-headline { font-family: 'Space Grotesk', sans-serif; }
.glass-panel {
background: rgba(34, 38, 47, 0.4);
backdrop-filter: blur(20px);
border: 1px solid rgba(69, 72, 79, 0.15);
}
.neon-glow-primary {
box-shadow: 0 0 20px rgba(114, 220, 255, 0.15);
}
.neon-glow-tertiary {
box-shadow: 0 0 25px rgba(175, 255, 209, 0.2);
}
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #0b0e14;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #22262f;
border-radius: 10px;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface custom-scrollbar min-h-screen">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#10131a] border-none">
<div class="flex items-center gap-4">
<button class="text-cyan-400 p-2 hover:bg-[#22262f] transition-colors duration-200 scale-95 active:duration-75">
<span class="material-symbols-outlined">menu</span>
</button>
<h1 class="text-xl font-bold tracking-tighter text-[#72dcff] uppercase font-headline">KINETIC VAULT</h1>
</div>
<div class="flex items-center gap-4">
<div class="hidden md:flex items-center gap-8 mr-8">
<a class="text-[#72dcff] font-bold font-label text-sm uppercase tracking-widest" href="#">Trade</a>
<a class="text-[#a9abb3] font-label text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">Assets</a>
<a class="text-[#a9abb3] font-label text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">Market</a>
</div>
<div class="w-10 h-10 rounded-full overflow-hidden border border-primary/20">
<img alt="User profile avatar" data-alt="Cyberpunk style user profile avatar headshot" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkeJh6DQFHQuTTJWqMLC7t0g8Lt7EbKZKf29sj9bu_jTQ4FkDKUvevurin2d8FCKG5BCOoZsC5pNUicT5xuSjtx44w2nkKrl2ZWKefmobhNy_Iy42ijT0aFeW_2wEFcvmPqRX5IHm1crAJ2FpsrU8Dvwxr2MSS_XOoFU8kXIECc60UIOwQqhBeJSVQp1ZAzY4hVCVI5cKVv02CkBNfCmP7-IBEhHkxeYa8vtRqebCNQYCLJMTlvTSMegf5Neog56Xia2EGAjZjmrM"/>
</div>
</div>
</header>
<main class="pt-24 pb-32 px-4 md:px-8 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Left Column: Chart & Market Info (Editorial Focus) -->
<div class="lg:col-span-8 space-y-6">
<!-- Asset Header -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">currency_bitcoin</span>
</div>
<h2 class="text-2xl font-bold font-headline tracking-tight">BTC / USDT</h2>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-xs font-bold uppercase tracking-widest">Perpetual</span>
</div>
<div class="flex items-baseline gap-4">
<span class="text-4xl font-extrabold font-headline tracking-tighter">$64,281.90</span>
<span class="text-tertiary font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-sm">trending_up</span>
+4.12%
</span>
</div>
</div>
<!-- Quick stats bento -->
<div class="grid grid-cols-2 md:flex gap-4 md:gap-8 pb-1">
<div class="flex flex-col">
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h High</span>
<span class="font-headline font-medium text-sm">65,120.00</span>
</div>
<div class="flex flex-col">
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h Low</span>
<span class="font-headline font-medium text-sm">62,840.45</span>
</div>
<div class="flex flex-col">
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h Vol</span>
<span class="font-headline font-medium text-sm text-secondary">1.24B</span>
</div>
</div>
</div>
<!-- Chart Canvas (Placeholder for futuristic feel) -->
<div class="relative w-full aspect-[16/9] md:aspect-[21/9] rounded-xl overflow-hidden glass-panel group">
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-secondary/5 opacity-50"></div>
<!-- Mock Chart Lines -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-full h-full p-6 flex flex-col justify-between">
<div class="flex justify-between text-[10px] text-on-surface-variant/30">
<span>65,000</span><span>64,500</span><span>64,000</span><span>63,500</span><span>63,000</span>
</div>
<div class="flex-1 relative">
<svg class="w-full h-full" viewbox="0 0 1000 400">
<path d="M0,350 Q100,320 200,340 T400,280 T600,200 T800,240 T1000,100" fill="none" stroke="url(#paint0_linear)" stroke-width="3"></path>
<defs>
<lineargradient gradientunits="userSpaceOnUse" id="paint0_linear" x1="0" x2="1000" y1="0" y2="0">
<stop stop-color="#72dcff"></stop>
<stop offset="1" stop-color="#dd8bfb"></stop>
</lineargradient>
</defs>
</svg>
</div>
</div>
</div>
<!-- Time Range Selector -->
<div class="absolute top-4 right-4 flex gap-1 p-1 rounded-lg bg-surface-container-lowest/50 backdrop-blur-md">
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-primary bg-primary/10">1H</button>
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">4H</button>
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">1D</button>
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">1W</button>
</div>
</div>
<!-- Open Orders / Recent Trades -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="rounded-xl p-6 surface-container-high border-none glass-panel">
<h3 class="text-sm font-bold font-headline uppercase tracking-widest mb-6 flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
Active Orders
</h3>
<div class="space-y-4">
<div class="flex justify-between items-center p-3 rounded-lg bg-surface-container-lowest/40 border-l-2 border-tertiary">
<div>
<div class="text-xs font-bold text-tertiary">BUY / LONG</div>
<div class="text-sm font-headline">63,940.00</div>
</div>
<div class="text-right">
<div class="text-[10px] text-on-surface-variant">Amount</div>
<div class="text-sm">0.042 BTC</div>
</div>
</div>
<div class="flex justify-between items-center p-3 rounded-lg bg-surface-container-lowest/40 border-l-2 border-error">
<div>
<div class="text-xs font-bold text-error">SELL / SHORT</div>
<div class="text-sm font-headline">64,800.00</div>
</div>
<div class="text-right">
<div class="text-[10px] text-on-surface-variant">Amount</div>
<div class="text-sm">0.125 BTC</div>
</div>
</div>
</div>
</div>
<div class="rounded-xl p-6 surface-container-high border-none glass-panel">
<h3 class="text-sm font-bold font-headline uppercase tracking-widest mb-6 flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
Order Book
</h3>
<div class="space-y-1.5 text-xs font-mono">
<div class="flex justify-between text-error/80">
<span>64,285.50</span><span>0.045</span>
</div>
<div class="flex justify-between text-error/80">
<span>64,284.10</span><span>0.112</span>
</div>
<div class="flex justify-between text-error/60">
<span>64,283.00</span><span>0.890</span>
</div>
<div class="py-2 border-y border-outline-variant/10 text-center font-headline text-lg font-bold text-on-surface">
64,281.90
</div>
<div class="flex justify-between text-tertiary/60">
<span>64,280.00</span><span>1.204</span>
</div>
<div class="flex justify-between text-tertiary/80">
<span>64,279.50</span><span>0.056</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Trade Execution Console -->
<div class="lg:col-span-4 flex flex-col gap-6">
<div class="rounded-2xl p-6 surface-container-highest glass-panel border-none sticky top-24 neon-glow-primary">
<!-- Toggle Buy/Sell -->
<div class="flex p-1 bg-surface-container-lowest rounded-xl mb-8">
<button class="flex-1 py-3 rounded-lg text-sm font-bold uppercase tracking-widest transition-all bg-tertiary/10 text-tertiary">
Buy
</button>
<button class="flex-1 py-3 rounded-lg text-sm font-bold uppercase tracking-widest transition-all text-on-surface-variant hover:text-white">
Sell
</button>
</div>
<div class="space-y-6">
<!-- Order Type Selector -->
<div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2">
<span>Limit Order</span>
<span class="material-symbols-outlined text-sm">expand_more</span>
</div>
<!-- Price Input -->
<div class="space-y-2">
<label class="text-[10px] text-on-surface-variant uppercase tracking-[0.2em] font-bold">Price (USDT)</label>
<div class="relative group">
<input class="w-full bg-surface-container-lowest border border-transparent focus:border-primary focus:ring-0 rounded-xl py-4 px-5 text-xl font-headline transition-all outline-none" type="text" value="64,281.90"/>
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant group-focus-within:text-primary">USDT</div>
</div>
</div>
<!-- Amount Input -->
<div class="space-y-2">
<label class="text-[10px] text-on-surface-variant uppercase tracking-[0.2em] font-bold">Amount (BTC)</label>
<div class="relative group">
<input class="w-full bg-surface-container-lowest border border-transparent focus:border-primary focus:ring-0 rounded-xl py-4 px-5 text-xl font-headline transition-all outline-none" placeholder="0.00" type="text"/>
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant group-focus-within:text-primary">BTC</div>
</div>
</div>
<!-- Quick Percentages -->
<div class="flex justify-between gap-2">
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">25%</button>
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">50%</button>
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">75%</button>
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">100%</button>
</div>
<!-- Balance Info -->
<div class="pt-4 border-t border-outline-variant/10 space-y-3">
<div class="flex justify-between items-center text-sm">
<span class="text-on-surface-variant">Available</span>
<span class="font-headline font-bold">12,450.00 USDT</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-on-surface-variant">Est. Fee</span>
<span class="font-headline">0.45 USDT</span>
</div>
<div class="flex justify-between items-center pt-2">
<span class="text-on-surface-variant font-bold uppercase tracking-widest text-[10px]">Total Order</span>
<span class="text-lg font-headline font-extrabold text-primary">0.00 USDT</span>
</div>
</div>
<!-- Execution Button -->
<button class="w-full py-5 rounded-2xl bg-gradient-to-r from-tertiary to-tertiary-container text-on-tertiary-fixed font-black uppercase tracking-[0.25em] text-sm shadow-[0_8px_32px_rgba(0,255,171,0.2)] hover:scale-[1.02] active:scale-95 transition-all neon-glow-tertiary">
Place Buy Order
</button>
</div>
</div>
<!-- Promotion / Ad Slot -->
<div class="rounded-2xl overflow-hidden relative group aspect-video">
<img alt="Crypto network visualization" class="w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-700" data-alt="Blue and purple abstract digital network connection lines" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKVB8cwhLRRb34YYe1QWpgv9_aKTmA_RH3e9__GHCKUE0pfSL0-0xbmjYch-Z6Wd5b5Tyoy4nePkKMnRRbasK-cdIxbNDdJ65T5bdBlG9MYEQ16YT1oVn0KTDR5hSacUngFu-RNPeJ0plxPvMevmmfSaOCfnzeFQ02ZoDHc7fo2r8SCjfFuyeOcNMO6y5l1bgYZtsQXaW3AQ8FdWZ7o7uD-wYmWphnjy5Ol8dj3vPOvXSykkW7td_gPJasJ2MzNl-JDF-LbswUXs0"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent p-6 flex flex-col justify-end">
<span class="text-[10px] font-black text-secondary uppercase tracking-[0.3em] mb-1">New Feature</span>
<h4 class="text-xl font-bold font-headline leading-tight">Smart Vault Staking Now Live</h4>
<p class="text-xs text-on-surface-variant mt-2 line-clamp-2">Earn up to 12.4% APY on idle USDT assets with Kinetic's algorithmic compounding engine.</p>
</div>
</div>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-3 bg-[#0b0e14]/80 backdrop-blur-xl border-t border-[#45484f]/15 shadow-[0_-8px_32px_rgba(114,220,255,0.06)] md:hidden">
<a class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 scale-90 duration-200" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">swap_horiz</span>
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Trade</span>
</a>
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
<span class="material-symbols-outlined">account_balance_wallet</span>
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Assets</span>
</a>
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
<span class="material-symbols-outlined">monitoring</span>
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Market</span>
</a>
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
<span class="material-symbols-outlined">person</span>
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Profile</span>
</a>
</nav>
</body></html>

View File

@@ -1,195 +0,0 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Kinetic Vault - Deposit</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"surface-variant": "#22262f",
"on-tertiary-fixed": "#00472d",
"inverse-primary": "#00687f",
"on-surface-variant": "#a9abb3",
"tertiary": "#afffd1",
"primary-dim": "#00c3ed",
"background": "#0b0e14",
"tertiary-container": "#00ffab",
"surface-container": "#161a21",
"on-secondary-fixed": "#580078",
"on-tertiary": "#006642",
"inverse-surface": "#f9f9ff",
"error-container": "#9f0519",
"on-secondary-container": "#f1bfff",
"on-error-container": "#ffa8a3",
"surface-tint": "#72dcff",
"secondary-fixed-dim": "#ebadff",
"on-secondary": "#4c0068",
"error": "#ff716c",
"secondary-dim": "#ce7eec",
"on-primary-fixed-variant": "#004c5e",
"tertiary-dim": "#00efa0",
"error-dim": "#d7383b",
"surface-dim": "#0b0e14",
"surface-container-high": "#1c2028",
"on-tertiary-fixed-variant": "#006742",
"secondary-container": "#6e208c",
"primary-fixed-dim": "#00c3ed",
"surface-bright": "#282c36",
"secondary-fixed": "#f2c1ff",
"tertiary-fixed": "#00ffab",
"inverse-on-surface": "#52555c",
"on-background": "#ecedf6",
"surface-container-lowest": "#000000",
"surface-container-highest": "#22262f",
"primary-container": "#00d2ff",
"on-surface": "#ecedf6",
"primary": "#72dcff",
"on-primary-container": "#004253",
"secondary": "#dd8bfb",
"tertiary-fixed-dim": "#00efa0",
"on-primary-fixed": "#002c38",
"on-primary": "#004c5e",
"on-tertiary-container": "#005c3b",
"on-error": "#490006",
"on-secondary-fixed-variant": "#792c97",
"surface-container-low": "#10131a",
"outline-variant": "#45484f",
"outline": "#73757d",
"surface": "#0b0e14",
"primary-fixed": "#00d2ff"
},
fontFamily: {
"headline": ["Space Grotesk"],
"body": ["Manrope"],
"label": ["Manrope"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-panel {
background: rgba(34, 38, 47, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background font-body min-h-screen flex flex-col">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#0b0e14] dark:bg-[#0b0e14]">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-[#72dcff] cursor-pointer hover:text-[#dd8bfb] transition-colors scale-95 duration-200">menu</span>
<h1 class="text-xl font-black text-[#72dcff] tracking-widest font-['Space_Grotesk'] font-bold tracking-tight uppercase">KINETIC VAULT</h1>
</div>
<div class="w-8 h-8 rounded-full bg-surface-container-highest border border-outline-variant flex items-center justify-center overflow-hidden">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="User profile avatar icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBANk2SpRtHHAsLEdKMgvyKuatu6pL3RrmMX1RNqvdlKFiy455H8zMuib7q-uJ9kURRUg7fmITlkx9hQsoZnaeYP4tTVAdaKfPNI9do0CBhD8xF-FFxF4WXUKZIB7Vxoa77IDzwNMawLuHEFelTVTo0gAqkioBh5Ce8ZY3AEDtbnI6Ey-3Y8Jj8ZEalLc77HUjAs29UOriOjlcg7CYMUmRUfIjEaFIb9wYL4jynk80QUxKk6fz775oNDMVxv_Kt1SDCtO3YseFeWAI"/>
</div>
</header>
<main class="flex-1 pt-24 pb-32 px-6 flex items-center justify-center relative overflow-hidden">
<!-- Background Decorative Elements (Cyberpunk Flair) -->
<div class="absolute top-1/4 -left-20 w-96 h-96 bg-primary/10 rounded-full blur-[120px] pointer-events-none"></div>
<div class="absolute bottom-1/4 -right-20 w-96 h-96 bg-secondary/10 rounded-full blur-[120px] pointer-events-none"></div>
<!-- Deposit Modal Container -->
<div class="w-full max-w-md glass-panel rounded-[2rem] border border-outline-variant/20 shadow-2xl relative z-10 p-8">
<!-- Header Section -->
<div class="flex justify-between items-start mb-8">
<div>
<h2 class="font-headline text-3xl font-bold text-on-surface tracking-tight leading-none mb-1">Deposit (充值)</h2>
<p class="font-label text-sm text-on-surface-variant uppercase tracking-widest">Asset: Kinetic Core (KNC)</p>
</div>
<div class="bg-surface-container-high p-2 rounded-xl">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
</div>
</div>
<!-- Content Section -->
<div class="space-y-6">
<!-- Balance Status Chip -->
<div class="flex items-center justify-between px-4 py-2 bg-surface-container-lowest rounded-full border border-outline-variant/10">
<span class="text-xs font-label text-on-surface-variant uppercase tracking-widest">Available Balance</span>
<span class="text-xs font-headline font-bold text-tertiary">1,248.50 KNC</span>
</div>
<!-- Input Group -->
<div class="space-y-2">
<label class="font-label text-[10px] uppercase tracking-widest text-on-surface-variant ml-1">Amount to Transfer</label>
<div class="relative group">
<div class="absolute inset-0 bg-primary/5 rounded-2xl blur-md opacity-0 group-focus-within:opacity-100 transition-opacity"></div>
<div class="relative bg-surface-container-lowest border border-outline-variant/30 group-focus-within:border-primary rounded-2xl p-4 flex items-center gap-4 transition-all">
<input class="bg-transparent border-none focus:ring-0 text-2xl font-headline font-bold text-on-surface w-full placeholder:text-outline-variant/50" placeholder="0.00" type="text"/>
<button class="bg-primary/10 hover:bg-primary/20 text-primary font-headline text-xs font-bold px-3 py-1.5 rounded-lg transition-colors border border-primary/20">
MAX
</button>
</div>
</div>
</div>
<!-- Network Info (Asymmetric Detail) -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-container-high rounded-2xl p-4 border-l-2 border-secondary">
<span class="block text-[9px] font-label text-on-surface-variant uppercase mb-1">Estimated Gas</span>
<span class="block text-sm font-headline font-semibold text-secondary">0.002 ETH</span>
</div>
<div class="bg-surface-container-high rounded-2xl p-4 border-l-2 border-tertiary">
<span class="block text-[9px] font-label text-on-surface-variant uppercase mb-1">Time Delay</span>
<span class="block text-sm font-headline font-semibold text-tertiary">~2 Mins</span>
</div>
</div>
<!-- Visual Soul: Decorative Separator -->
<div class="py-2 flex items-center gap-4 opacity-30">
<div class="h-[1px] flex-1 bg-gradient-to-r from-transparent to-outline"></div>
<span class="material-symbols-outlined text-[12px]">bolt</span>
<div class="h-[1px] flex-1 bg-gradient-to-l from-transparent to-outline"></div>
</div>
<!-- Action Buttons -->
<div class="space-y-3 pt-2">
<button class="w-full h-14 bg-gradient-to-br from-primary to-primary-container rounded-2xl font-headline font-bold text-on-primary-fixed text-lg shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
Confirm Deposit
</button>
<button class="w-full h-12 bg-transparent border border-outline-variant/30 hover:border-primary/50 text-on-surface-variant hover:text-on-surface font-headline font-medium text-sm rounded-2xl transition-all">
Cancel (取消)
</button>
</div>
</div>
<!-- Security Footer -->
<div class="mt-8 flex items-center justify-center gap-2 opacity-50">
<span class="material-symbols-outlined text-xs">verified_user</span>
<span class="text-[9px] font-label uppercase tracking-[0.2em]">Encrypted Kinetic Protocol v4.2</span>
</div>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-3 bg-[#10131a]/80 backdrop-blur-xl border-t border-[#45484f]/15 shadow-[0_-8px_32px_rgba(114,220,255,0.06)] md:hidden rounded-t-3xl">
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 Active: scale-90 transition-transform">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Vault</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
<span class="material-symbols-outlined">swap_calls</span>
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Trade</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
<span class="material-symbols-outlined">insights</span>
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Market</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
<span class="material-symbols-outlined">person</span>
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Profile</span>
</div>
</nav>
</body></html>

View File

@@ -1,219 +0,0 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>CyberPulse Neo Profile</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"error": "#ff716c",
"secondary-fixed-dim": "#ebadff",
"secondary-fixed": "#f2c1ff",
"on-error": "#490006",
"on-secondary-fixed": "#580078",
"on-tertiary": "#006642",
"tertiary-fixed-dim": "#00efa0",
"tertiary-container": "#00ffab",
"on-surface": "#ecedf6",
"outline": "#73757d",
"primary": "#72dcff",
"on-tertiary-fixed-variant": "#006742",
"on-primary-fixed-variant": "#004c5e",
"inverse-primary": "#00687f",
"surface-bright": "#282c36",
"tertiary-dim": "#00efa0",
"surface-dim": "#0b0e14",
"on-secondary": "#4c0068",
"surface-container-low": "#10131a",
"surface-variant": "#22262f",
"surface-tint": "#72dcff",
"surface-container-lowest": "#000000",
"primary-fixed-dim": "#00c3ed",
"on-tertiary-fixed": "#00472d",
"secondary": "#dd8bfb",
"primary-container": "#00d2ff",
"surface-container-highest": "#22262f",
"on-secondary-fixed-variant": "#792c97",
"on-error-container": "#ffa8a3",
"outline-variant": "#45484f",
"surface": "#0b0e14",
"on-surface-variant": "#a9abb3",
"primary-fixed": "#00d2ff",
"tertiary": "#afffd1",
"surface-container": "#161a21",
"on-background": "#ecedf6",
"primary-dim": "#00c3ed",
"tertiary-fixed": "#00ffab",
"error-container": "#9f0519",
"secondary-dim": "#ce7eec",
"surface-container-high": "#1c2028",
"inverse-on-surface": "#52555c",
"error-dim": "#d7383b",
"on-primary-fixed": "#002c38",
"inverse-surface": "#f9f9ff",
"secondary-container": "#6e208c",
"on-primary-container": "#004253",
"on-primary": "#004c5e",
"background": "#0b0e14",
"on-secondary-container": "#f1bfff",
"on-tertiary-container": "#005c3b"
},
fontFamily: {
"headline": ["Space Grotesk"],
"body": ["Manrope"],
"label": ["Manrope"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-card {
background: rgba(34, 38, 47, 0.4);
backdrop-filter: blur(12px);
border: 1px solid rgba(115, 117, 125, 0.1);
}
.neon-glow-primary {
box-shadow: 0 0 15px rgba(114, 220, 255, 0.3);
}
.neon-glow-secondary {
box-shadow: 0 0 15px rgba(221, 139, 251, 0.3);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface font-body selection:bg-primary selection:text-on-primary">
<!-- Top App Bar -->
<header class="fixed top-0 w-full z-50 bg-[#0b0e14]/80 backdrop-blur-xl border-b border-[#45484f]/15 shadow-[0_8px_32px_rgba(114,220,255,0.06)] flex items-center justify-between px-6 h-16 w-full">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-[#72dcff] active:scale-95 duration-200 cursor-pointer">arrow_back</span>
<h1 class="font-['Space_Grotesk'] uppercase tracking-widest text-sm text-[#72dcff] font-bold">SECURITY VAULT</h1>
</div>
<span class="material-symbols-outlined text-[#a9abb3] hover:text-[#dd8bfb] transition-colors cursor-pointer active:scale-95 duration-200">settings_heart</span>
</header>
<main class="pt-24 pb-32 px-6 max-w-2xl mx-auto space-y-8">
<!-- Hero Profile Section -->
<section class="relative flex flex-col items-center py-8">
<div class="relative">
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-primary via-secondary to-tertiary blur opacity-40 animate-pulse"></div>
<div class="relative p-1 rounded-full bg-surface-container-high border-2 border-primary/30">
<img alt="User avatar" class="w-24 h-24 rounded-full" data-alt="Cybernetic male avatar with neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPG8f6cGBm3xqBjBuY5sw1RCGSiKxDN-IA5wDo1H-30SIcg3e_FI82VsXAPOCouYTDqCWtM5El4DHJQYERfUQ1BtK8NTS6d6rlWVoqc79DhsJfWVk2a2nyVz8jWrV04eJOqjk0FTs8u-c1GkLlxIEdvGENmCPmBElvN8A8uH6w1XAK-YslVWz0wLFwjwYRcWIiCr4Jat5I0_O2aLNukB431cRZWTEk79BvSuC2XMILEhpi11ch1744m5x49WQR-tQn4_zPtdZb2N8"/>
</div>
<div class="absolute bottom-0 right-0 bg-tertiary text-on-tertiary rounded-full p-1 border-2 border-background shadow-lg">
<span class="material-symbols-outlined text-xs font-bold" style="font-variation-settings: 'FILL' 1;">verified</span>
</div>
</div>
<div class="mt-6 text-center">
<h2 class="font-headline text-3xl font-bold tracking-tight text-on-surface">sion321</h2>
<div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-[0.2em] font-headline">
Normal User
</div>
</div>
</section>
<!-- Stats Bento Grid -->
<section class="grid grid-cols-2 gap-4">
<div class="glass-card p-4 rounded-xl flex flex-col gap-1">
<span class="text-on-surface-variant font-headline text-[10px] uppercase tracking-wider">Level Status</span>
<span class="text-xl font-bold font-headline text-primary">TIER_01</span>
</div>
<div class="glass-card p-4 rounded-xl flex flex-col gap-1">
<span class="text-on-surface-variant font-headline text-[10px] uppercase tracking-wider">Node Uptime</span>
<span class="text-xl font-bold font-headline text-secondary">99.8%</span>
</div>
</section>
<!-- List Content Section -->
<section class="space-y-3">
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 group-hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">fingerprint</span>
</div>
<span class="font-headline text-lg font-medium">Real-name verification</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary border border-secondary/20 group-hover:border-secondary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">security</span>
</div>
<span class="font-headline text-lg font-medium">Security settings</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-tertiary/10 flex items-center justify-center text-tertiary border border-tertiary/20 group-hover:border-tertiary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">notifications_active</span>
</div>
<span class="font-headline text-lg font-medium">Message notification</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-error text-on-error text-[10px] font-bold px-2 py-0.5 rounded-full">3</span>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 group-hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">manufacturing</span>
</div>
<span class="font-headline text-lg font-medium">System settings</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-on-surface-variant/10 flex items-center justify-center text-on-surface-variant border border-on-surface-variant/20 group-hover:border-on-surface-variant/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">info</span>
</div>
<span class="font-headline text-lg font-medium">About us</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
</section>
<!-- Exit Action -->
<section class="pt-8">
<button class="w-full h-16 rounded-2xl bg-gradient-to-r from-error-dim to-error text-on-error font-headline font-black text-lg uppercase tracking-widest shadow-[0_12px_24px_-8px_rgba(255,113,108,0.4)] active:scale-95 transition-transform flex items-center justify-center gap-3">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">logout</span>
Logout Terminal
</button>
<p class="text-center mt-6 text-on-surface-variant text-[10px] font-headline uppercase tracking-[0.3em] opacity-40">System Build v2.4.9-Neo</p>
</section>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-6 pt-3 bg-[#10131a]/90 backdrop-blur-2xl border-t border-[#45484f]/10 shadow-[0_-10px_40px_rgba(0,0,0,0.5)] z-50 rounded-t-[2rem]">
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">account_balance_wallet</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Vault</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">swap_calls</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Trade</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">insights</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Analysis</span>
</div>
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-2xl px-5 py-2 active:translate-y-1 transition-all">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person_2</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Profile</span>
</div>
</nav>
</body></html>

View File

@@ -1,198 +0,0 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>The Kinetic Vault - Withdraw</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"on-secondary-fixed": "#580078",
"outline-variant": "#45484f",
"primary": "#72dcff",
"secondary-fixed": "#f2c1ff",
"on-primary-fixed": "#002c38",
"error-dim": "#d7383b",
"on-tertiary-fixed": "#00472d",
"secondary": "#dd8bfb",
"surface-container-low": "#10131a",
"tertiary-fixed-dim": "#00efa0",
"on-secondary-container": "#f1bfff",
"inverse-surface": "#f9f9ff",
"outline": "#73757d",
"surface-bright": "#282c36",
"surface": "#0b0e14",
"on-error": "#490006",
"on-secondary-fixed-variant": "#792c97",
"background": "#0b0e14",
"secondary-container": "#6e208c",
"primary-dim": "#00c3ed",
"on-tertiary-fixed-variant": "#006742",
"tertiary": "#afffd1",
"surface-dim": "#0b0e14",
"on-background": "#ecedf6",
"on-tertiary": "#006642",
"on-tertiary-container": "#005c3b",
"surface-container-high": "#1c2028",
"on-primary-fixed-variant": "#004c5e",
"tertiary-dim": "#00efa0",
"on-surface": "#ecedf6",
"surface-container-highest": "#22262f",
"on-surface-variant": "#a9abb3",
"surface-tint": "#72dcff",
"inverse-on-surface": "#52555c",
"on-primary-container": "#004253",
"surface-container-lowest": "#000000",
"inverse-primary": "#00687f",
"primary-container": "#00d2ff",
"primary-fixed": "#00d2ff",
"tertiary-fixed": "#00ffab",
"tertiary-container": "#00ffab",
"error-container": "#9f0519",
"secondary-fixed-dim": "#ebadff",
"on-error-container": "#ffa8a3",
"surface-container": "#161a21",
"primary-fixed-dim": "#00c3ed",
"on-secondary": "#4c0068",
"secondary-dim": "#ce7eec",
"surface-variant": "#22262f",
"error": "#ff716c",
"on-primary": "#004c5e"
},
fontFamily: {
"headline": ["Space Grotesk"],
"body": ["Manrope"],
"label": ["Manrope"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-panel {
background: rgba(40, 44, 54, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background font-body min-h-screen">
<!-- Background UI Mockup (Simulating the Dashboard behind the modal) -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 w-full bg-[#282c36]/40 backdrop-blur-xl shadow-[0_32px_64px_-15px_rgba(114,220,255,0.06)]">
<div class="text-[#72dcff] font-['Space_Grotesk'] font-black tracking-tight">The Kinetic Vault</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-on-surface-variant">search</span>
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden">
<img alt="User Profile" data-alt="Abstract digital user avatar with neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfG29jWuVFA3FmcjV2VjJQMfdoXUZsgAoHuGoiML-yDi-UOtdh4uDx9tuTvaBiPbNANr8ZKlsnplL3se3oEpbzn1cGzqxYz8RX75r_QKaJxWUwxBI4ctbL3uCHyuyfc0pideVjfu9tiCh4KSDPqktP7JOfhg2tCR-3vsKABYKdVuHM-9_Ipm1c2TBzP88o4fOG0TAdiuufOnJSW-2wBeOVu9Gc3XKFGDwZtSrCo6M6PkfOW4iELgX22l_zN-MF-m9D6BPominfK0g"/>
</div>
</div>
</header>
<main class="pt-20 px-6 space-y-8 opacity-40 select-none pointer-events-none">
<section>
<p class="font-headline text-on-surface-variant text-sm tracking-widest uppercase">Portfolio Value</p>
<h1 class="font-headline text-6xl font-bold tracking-tighter text-on-surface">$124,592.00</h1>
</section>
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-container-high rounded-xl p-6 h-32 flex flex-col justify-between">
<span class="text-on-surface-variant text-xs">BTC / USDT</span>
<span class="text-2xl font-headline font-bold text-tertiary">+4.28%</span>
</div>
<div class="bg-surface-container-high rounded-xl p-6 h-32 flex flex-col justify-between">
<span class="text-on-surface-variant text-xs">ETH / USDT</span>
<span class="text-2xl font-headline font-bold text-error">-1.12%</span>
</div>
</div>
</main>
<!-- Withdraw Modal Overlay -->
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-md p-4">
<!-- Modal Card -->
<div class="glass-panel w-full max-w-md rounded-[2rem] p-8 shadow-[0_32px_64px_-15px_rgba(114,220,255,0.1)] border border-outline-variant/15 flex flex-col gap-8">
<!-- Header Section -->
<div class="space-y-2">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
</div>
<h2 class="font-headline text-2xl font-bold tracking-tight text-on-surface">提现 (Withdraw)</h2>
</div>
<p class="text-on-surface-variant text-sm">Securely transfer your assets to an external wallet address.</p>
</div>
<!-- Form Fields -->
<div class="space-y-5">
<!-- Amount Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Withdrawal Amount</label>
<div class="relative group">
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
<span class="text-primary text-sm font-bold">USDT</span>
</div>
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 pl-16 pr-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Enter withdrawal amount (USDT)" type="number"/>
</div>
</div>
<!-- Address Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Destination Address</label>
<div class="relative group">
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Enter withdrawal address" type="text"/>
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-on-surface-variant text-lg">qr_code_scanner</span>
</div>
</div>
</div>
<!-- Contact Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Contact Info</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Contact info (optional)" type="text"/>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col gap-3 pt-2">
<button class="w-full bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed font-headline font-bold py-4 rounded-2xl shadow-[0_0_20px_rgba(114,220,255,0.3)] hover:opacity-90 active:scale-[0.98] transition-all">
确认 (Confirm)
</button>
<button class="w-full border border-outline-variant/30 text-on-surface-variant font-headline font-bold py-4 rounded-2xl hover:bg-surface-variant/20 active:scale-[0.98] transition-all">
取消 (Cancel)
</button>
</div>
<!-- Security Footer -->
<div class="flex items-center justify-center gap-2 opacity-50">
<span class="material-symbols-outlined text-[14px]">verified_user</span>
<span class="text-[10px] font-label uppercase tracking-widest">End-to-End Encrypted Transaction</span>
</div>
</div>
</div>
<!-- Bottom Nav Bar (Supressed but defined in shell) -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-[#10131a]/80 backdrop-blur-lg rounded-t-[2rem] border-t border-[#45484f]/15 opacity-30 select-none pointer-events-none">
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">home</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">insert_chart</span>
</div>
<div class="flex flex-col items-center justify-center bg-[#72dcff]/10 text-[#72dcff] rounded-2xl p-3 shadow-[0_0_15px_rgba(114,220,255,0.3)]">
<span class="material-symbols-outlined">swap_horiz</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">account_balance_wallet</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">person</span>
</div>
</nav>
</body></html>

View File

@@ -1,296 +0,0 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"surface": "#0b0e14",
"secondary-fixed-dim": "#ebadff",
"tertiary": "#afffd1",
"background": "#0b0e14",
"inverse-on-surface": "#52555c",
"on-primary": "#004c5e",
"surface-container-lowest": "#000000",
"on-tertiary-container": "#005c3b",
"surface-container": "#161a21",
"on-surface": "#ecedf6",
"secondary": "#dd8bfb",
"secondary-container": "#6e208c",
"surface-variant": "#22262f",
"primary-fixed-dim": "#00c3ed",
"on-primary-container": "#004253",
"inverse-primary": "#00687f",
"on-tertiary": "#006642",
"surface-container-high": "#1c2028",
"on-primary-fixed-variant": "#004c5e",
"tertiary-fixed": "#00ffab",
"tertiary-container": "#00ffab",
"on-secondary-fixed-variant": "#792c97",
"error-dim": "#d7383b",
"primary": "#72dcff",
"error": "#ff716c",
"on-secondary": "#4c0068",
"surface-tint": "#72dcff",
"on-tertiary-fixed": "#00472d",
"on-secondary-fixed": "#580078",
"inverse-surface": "#f9f9ff",
"secondary-fixed": "#f2c1ff",
"primary-fixed": "#00d2ff",
"surface-container-highest": "#22262f",
"on-secondary-container": "#f1bfff",
"outline": "#73757d",
"on-error-container": "#ffa8a3",
"on-error": "#490006",
"surface-bright": "#282c36",
"primary-dim": "#00c3ed",
"outline-variant": "#45484f",
"surface-container-low": "#10131a",
"on-primary-fixed": "#002c38",
"surface-dim": "#0b0e14",
"on-surface-variant": "#a9abb3",
"tertiary-dim": "#00efa0",
"on-tertiary-fixed-variant": "#006742",
"primary-container": "#00d2ff",
"on-background": "#ecedf6",
"error-container": "#9f0519",
"tertiary-fixed-dim": "#00efa0",
"secondary-dim": "#ce7eec"
},
fontFamily: {
"headline": ["Space Grotesk"],
"body": ["Manrope"],
"label": ["Manrope"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-card {
background: rgba(34, 38, 47, 0.4);
backdrop-filter: blur(12px);
border: 1px solid rgba(69, 72, 79, 0.15);
}
.neon-glow-blue {
box-shadow: 0 0 15px rgba(114, 220, 255, 0.3);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface font-body selection:bg-primary/30 selection:text-primary min-h-screen">
<!-- TopAppBar -->
<header class="bg-[#0b0e14] fixed top-0 w-full z-50 shadow-[0_8px_32px_rgba(114,220,255,0.06)]">
<div class="flex items-center justify-between px-6 h-16 w-full">
<div class="flex items-center gap-4">
<button class="text-[#72dcff] active:scale-95 transition-transform">
<span class="material-symbols-outlined">menu</span>
</button>
<h1 class="text-2xl font-black text-[#72dcff] uppercase tracking-tighter font-['Space_Grotesk']">CyberPulse</h1>
</div>
<div class="flex items-center gap-4">
<button class="text-[#72dcff] hover:text-[#dd8bfb] transition-colors duration-300 active:scale-95 transition-transform">
<span class="material-symbols-outlined">search</span>
</button>
</div>
</div>
</header>
<main class="pt-20 pb-24 px-4 max-w-2xl mx-auto">
<!-- Search & Filter Section -->
<section class="mb-8 space-y-6">
<div class="relative group">
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined text-xl">search</span>
</div>
<input class="w-full bg-surface-container-lowest border-none focus:ring-1 focus:ring-primary rounded-xl py-4 pl-12 pr-4 text-on-surface placeholder:text-on-surface-variant font-medium transition-all" placeholder="Search markets..." type="text"/>
</div>
<!-- Category Tabs -->
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar pb-2">
<button class="px-6 py-2.5 rounded-full bg-primary/10 text-primary font-bold text-sm tracking-wide whitespace-nowrap neon-glow-blue border border-primary/20">
All
</button>
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
Real-time
</button>
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
Hot
</button>
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
Favorites
</button>
</div>
</section>
<!-- Market List -->
<section class="space-y-3">
<div class="flex justify-between px-4 mb-2 text-xs font-bold uppercase tracking-widest text-on-surface-variant">
<span>Trading Pair</span>
<div class="flex gap-12">
<span>Price</span>
<span>24h Change</span>
</div>
</div>
<!-- BTC Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<img alt="Bitcoin Icon" class="hidden" src="https://lh3.googleusercontent.com/aida-public/AB6AXuApVuPkjAQNdllrEfZFEHmaQw_kpu4_ssXwAmA9wdRljaKU5_uc1JSuSROch2xE6pzAXhAtD8NOQ98CUiHlPpME126eC_II2KBsTeVn-0SeXTJcyw5I2aqQrVZQd48WA842NaucTOxEWdORbQzrdyOoUgBAf0biMAaZ5bqPk_pcdFrD5-Z9mDubPtZ38zGBAqew1Fniw8zSW_Xg06Zu65gHGPn-SjPJAcD4v9JAjc4FTfNsXxRt4JE4-SWI4O3BWy-LS1L1J0YVhRk"/>
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">currency_bitcoin</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">BTC</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Bitcoin</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">64,231.50</p>
<p class="text-[10px] text-on-surface-variant">≈ $64,231.50</p>
</div>
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">+2.45%</span>
</div>
</div>
</div>
<!-- ETH Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">diamond</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">ETH</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Ethereum</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">3,452.12</p>
<p class="text-[10px] text-on-surface-variant">≈ $3,452.12</p>
</div>
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">+0.89%</span>
</div>
</div>
</div>
<!-- SOL Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<span class="material-symbols-outlined text-primary-fixed-dim" style="font-variation-settings: 'FILL' 1;">token</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">SOL</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Solana</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">143.88</p>
<p class="text-[10px] text-on-surface-variant">≈ $143.88</p>
</div>
<div class="bg-error/10 text-error px-3 py-1.5 rounded-lg border border-error/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">-1.12%</span>
</div>
</div>
</div>
<!-- ARB Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<span class="material-symbols-outlined text-secondary-fixed-dim" style="font-variation-settings: 'FILL' 1;">layers</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">ARB</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Arbitrum</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">1.043</p>
<p class="text-[10px] text-on-surface-variant">≈ $1.04</p>
</div>
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">+5.67%</span>
</div>
</div>
</div>
<!-- PEPE Row -->
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
<span class="material-symbols-outlined text-tertiary-dim" style="font-variation-settings: 'FILL' 1;">face</span>
</div>
<div>
<div class="flex items-center gap-1">
<h3 class="font-headline font-bold text-lg">PEPE</h3>
<span class="text-xs text-on-surface-variant">/USDT</span>
</div>
<p class="text-xs text-on-surface-variant font-medium">Pepe Coin</p>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline font-bold text-base">0.000012</p>
<p class="text-[10px] text-on-surface-variant">≈ $0.000012</p>
</div>
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
<span class="text-xs font-black tracking-tighter">+12.4%</span>
</div>
</div>
</div>
</section>
<!-- Floating Action Button for Trade -->
<div class="fixed bottom-24 right-6">
<button class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary-container flex items-center justify-center shadow-lg shadow-primary/20 active:scale-90 transition-all group">
<span class="material-symbols-outlined text-on-primary-fixed text-3xl group-hover:rotate-180 transition-transform duration-500">add</span>
</button>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 h-20 pb-safe bg-[#0b0e14]/80 backdrop-blur-xl z-50 rounded-t-[2rem] shadow-[0_-8px_32px_rgba(0,0,0,0.5)] border-t border-[#45484f]/15">
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 active:scale-90 transition-all duration-200">
<span class="material-symbols-outlined">equalizer</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Market</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
<span class="material-symbols-outlined">swap_horiz</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Trade</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
<span class="material-symbols-outlined">account_balance_wallet</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Wallet</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
<span class="material-symbols-outlined">article</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">News</span>
</div>
</nav>
</body></html>