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）を表示、ワンクリックコピー対応
インタラクション
- ページスクロール時に各セクションが IntersectionObserver でフェードインアニメーションをトリガー
- ユーザーアバタードロップダウンメニュー（ログイン後に表示）
2. ルーム一覧 (rooms.html)
Phira マルチプレイヤーのルーム状態をリアルタイム表示します。
機能
- サーバー状態表示 —
HEAD /roomsjsonでサーバーのオンライン状態を確認 - ルーム一覧テーブル — ルーム名、ホスト、人数、ループ状態、譜面、曲絵、ダウンロード、メンバーを表示
| 列 | 説明 |
|---|---|
| ルーム名 | ルームの名称 |
| ホスト | ホスト名（Phira ユーザーページにリンク） |
| 人数 | 現在のルーム内ユーザー数 |
| ループ | ループモードのオン/オフ |
| 譜面 | 現在選択中の譜面名（Phira 譜面ページにリンク） |
| 曲絵 | 譜面のカバーサムネイル（クリックで拡大プレビュー） |
| ダウンロード | 譜面ファイルのダウンロードボタン |
| メンバー | ルーム内のユーザー一覧を表示 |
データ取得
GET /roomsjson— ルーム一覧 JSON を取得GET 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)
サーバー運用管理インターフェース。2つのタブで構成。
4.1 サーバー制御
| 機能 | 説明 |
|---|---|
| サーバー状態 | /execute 経由で check.sh を呼び出し動作状態を確認 |
| API 状態 | GET /roomsjson で API のオンライン状態を確認 |
| サービス制御 | 起動/再起動/停止（start.sh、stop.sh に対応） |
| カスタムコマンド | 任意のシェルコマンドを入力して実行 |
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— サーバーコマンド実行（3段階のパスワード認証が必要）
5. ユーザー契約 (privacy.html)
法的文書ページ。ユーザー契約とプライバシーポリシーを含みます。
デザインスタイル
- テーマ — ダーク（
background: #000）、全画面背景画像 - UI スタイル — 毛ガラス効果（
backdrop-filter: blur()）、半透明ボーダー - インタラクション — 3D カード傾斜追従、ホバー拡大/発光、フェードインアニメーション
- ブランドカラー — アイスブルー（
#a1e5ef）
共通コンポーネント
- ナビゲーションバー — 各ページ上部で共有、Logo + ナビゲーションリンク + ユーザーステータス
- ログイン/登録ポップアップ — 再利用可能コンポーネント、ログイン/登録モード切り替え対応
- ユーザードロップダウンメニュー — ユーザー名、アバター、Phira リンク、アカウント管理入口、ログアウトを表示
- メッセージ通知 — 成功/エラーメッセージバー、5秒で自動非表示
技術スタック
- 純粋な HTML5 + CSS3（フロントエンドフレームワークなし）
- ネイティブ JavaScript（ES6+、
async/await、fetch） - ローカルストレージ（
localStorage）でログイン状態を保存 - IntersectionObserver によるスクロールアニメーション