HSNPhira v1 前端
HSNPhira v1 前端由純 HTML + CSS + JavaScript 建構，採用毛玻璃（Glassmorphism）和 3D 卡片互動的暗色主題設計。所有頁面透過共享的後端 API 提供資料。
頁面列表
| 頁面 | 說明 | 存取權限 |
|---|---|---|
index.html | 首頁 / 登入註冊 | 公開 |
rooms.html | 房間列表 | 公開 |
account.html | 帳號管理 | 需登入 |
admin.html | 管理員控制台（伺服器控制 + 用戶管理） | 需管理員權限 |
privacy.html | 用戶協議 / 隱私政策 | 公開 |
1. 首頁 (index.html)
項目首屏，用於展示伺服器概覽和引導用戶。
內容
- 導航欄 — Logo + 頁面連結（主頁、房間列表）
- 主視覺 — 全屏背景圖（漸入動畫），標題"HyperSynapse Network Phira多人遊戲伺服器"
- 用戶數統計 — 透過
fetch("/usertotal")取得已註冊用戶總數並展示 - QQ 群引導 — 展示 QQ 群號（1049578201），支援一鍵複製
互動
- 頁面滾動時各 section 透過 IntersectionObserver 觸發漸入動畫
- 用戶頭像下拉選單（登入後顯示）
2. 房間列表 (rooms.html)
即時顯示 Phira 多人遊戲的房間狀態。
功能
- 伺服器狀態指示 — 透過
HEAD /roomsjson檢查伺服器線上狀態 - 房間列表表格 — 顯示房間名、房主、人數、循環狀態、譜面、曲繪、下載、人員
| 列 | 說明 |
|---|---|
| 房間名 | 房間名稱 |
| 房主 | 房主名稱（連結到 Phira 用戶頁） |
| 人數 | 當前房間內用戶數 |
| 循環 | 循環模式是否開啟 |
| 譜面 | 當前選擇的譜面名稱（連結到 Phira 譜面頁） |
| 曲繪 | 譜面封面縮圖（點擊放大預覽） |
| 下載 | 譜面檔案下載按鈕 |
| 人員 | 查看房間內用戶列表 |
資料獲取
GET /roomsjson— 獲取房間列表 JSONGET https://phira.5wyxi.com/chart/{id}— 獲取譜面元資料（名稱、曲繪、檔案）
互動細節
- 3D 傾斜跟隨效果 — 滑鼠移動時表格產生旋轉視差
- 曲繪點擊放大（Lightbox）
- 房間用戶列表彈出視窗（房主高亮顯示）
- 強制橫屏適配（手遊設備）
- 登入/註冊彈窗（與
account.html共用）
3. 帳號管理 (account.html)
用戶查看和修改自己的帳戶資訊。
功能
- 用戶資訊展示 — 頭像、用戶名、ID、Phira ID、RKS、註冊日期、權限徽章
- 修改用戶名 — 輸入新用戶名 + 當前密碼確認
- 修改密碼 — 當前密碼 → 新密碼 → 確認新密碼（最少 6 位）
- 權限資訊 — 顯示管理員/開發者狀態（唯讀）
資訊卡片
| 區域 | 內容 |
|---|---|
| 頭像區 | 大尺寸頭像 + 名字 + ID |
| 統計區 | RKS 值、註冊日期、線上狀態 |
| 資訊網格 | 用戶名、Phira 用戶名、帳戶狀態、最後登入時間 |
| 權限網格 | 管理員狀態、開發者權限 |
API 互動
POST /usermgr/login— 登入POST /usermgr/register— 註冊POST /usermgr/update_account— 更新用戶名/密碼
4. 管理員控制台 (admin.html)
伺服器維運管理介面，包含兩個標籤頁。
4.1 伺服器控制
| 功能 | 說明 |
|---|---|
| 伺服器狀態 | 透過 /execute 呼叫 check.sh 檢測執行狀態 |
| API 狀態 | 透過 GET /roomsjson 檢測 API 是否在線 |
| 服務控制 | 啟動/重啟/關閉（對應 start.sh、stop.sh） |
| 自訂命令 | 輸入任意 shell 命令執行 |
4.2 用戶管理
| 功能 | 說明 |
|---|---|
| 用戶列表 | 表格展示所有用戶（ID、用戶名、頭像、Phira ID、RKS、權限） |
| 搜尋過濾 | 按用戶名/Phira ID 搜尋，按管理員/開發者狀態篩選 |
| 批次操作 | 批次設定/取消管理員或開發者權限 |
| 編輯用戶 | 修改用戶名、密碼、Phira ID、管理員/開發者狀態 |
安全
- 需登入且具有管理員權限（
admin === "yes"） - 修改敏感欄位（admin、dev、password）需要超級管理員密碼
- 操作前彈出管理員密碼驗證彈窗
API 互動
POST /admin/users— 取得用戶列表POST /admin/update— 更新單個用戶POST /admin/batch-update— 批次更新用戶POST /postadmin/execute— 執行伺服器命令（需要三層密碼驗證）
5. 用戶協議 (privacy.html)
法律文件頁面，包含用戶協議和隱私政策。
設計風格
- 主題 — 暗色（
background: #000），全屏背景圖 - UI 風格 — 毛玻璃效果（
backdrop-filter: blur()），半透明邊框 - 互動 — 3D 卡片傾斜跟隨、hover 放大/發光、漸入動畫
- 品牌色 — 冰藍色（
#a1e5ef）
通用元件
- 導航欄 — 各頁面頂部共享，含 Logo + 導航連結 + 用戶狀態
- 登入/註冊彈窗 — 複用元件，支援登入/註冊模式切換
- 用戶下拉選單 — 顯示用戶名、頭像、Phira 連結、帳號管理入口、登出
- 消息提示 — 成功/錯誤消息條，5 秒自動隱藏
技術棧
- 純 HTML5 + CSS3（無前端框架）
- 原生 JavaScript（ES6+，
async/await、fetch） - 本地儲存（
localStorage）保存登入狀態 - IntersectionObserver 實現滾動動畫