from html import escape
CSS = """
:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b1020; color: #eef2ff; min-height: 100vh; }
main { width: min(760px, calc(100% - 32px)); margin: 48px auto; }
.card { background: #151b2f; border: 1px solid #303957; border-radius: 18px; padding: 28px; box-shadow: 0 18px 60px #0007; }
h1 { margin: 0 0 8px; font-size: 30px; }
h2 { margin-top: 28px; font-size: 20px; }
p, li { color: #cbd5e1; line-height: 1.6; }
label { display: block; margin: 18px 0 7px; font-weight: 700; }
input, textarea { width: 100%; border: 1px solid #465171; border-radius: 10px; background: #0d1325; color: #fff; padding: 12px 13px; font: inherit; }
textarea { min-height: 120px; resize: vertical; }
button, .button { display: inline-block; margin-top: 20px; border: 0; border-radius: 10px; background: #facc15; color: #151515; font-weight: 800; padding: 12px 18px; cursor: pointer; text-decoration: none; }
button.secondary, .button.secondary { background: #334155; color: #fff; }
button.danger { background: #ef4444; color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.stat { background: #0d1325; border: 1px solid #303957; border-radius: 12px; padding: 14px; }
.stat b { display: block; margin-bottom: 6px; }
code { color: #fde68a; overflow-wrap: anywhere; }
.notice { border-left: 4px solid #facc15; background: #272313; padding: 12px 14px; border-radius: 8px; }
.error { border-left-color: #ef4444; background: #31151b; }
.success { border-left-color: #22c55e; background: #10281d; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row form { margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { width: auto; margin-top: 5px; }
small { color: #94a3b8; }
hr { border: 0; border-top: 1px solid #303957; margin: 28px 0; }
"""
def shell(title: str, content: str) -> str:
return f"""
{escape(title)}
"""
def setup_page(error: str = "") -> str:
error_html = f'{escape(error)}
' if error else ""
return shell(
"首次設定 — Arena Playwright API",
f"""
🎭 首次設定
所有執行設定都會在這個 Space 內完成。本版本使用暫存設定，Space 重啟後需重新設定。
{error_html}
請先從 Space 的 Logs 找到本次啟動產生的 SETUP CODE。這可避免陌生人搶先設定公開 Space。
""",
)
def setup_complete_page(api_key: str, base_url: str) -> str:
return shell(
"設定完成 — Arena Playwright API",
f"""
✅ 設定完成
Playwright 瀏覽器已啟動。請立即保存下面的 API Key。
OpenWebUI：URL 使用上面的 /v1，API Key 使用這個值。
""",
)
def login_page(error: str = "") -> str:
error_html = f'{escape(error)}
' if error else ""
return shell(
"管理員登入",
f"""
管理員登入
{error_html}
""",
)
def admin_page(
*,
browser_ready: bool,
api_key: str,
masked_token: str,
message: str = "",
error: bool = False,
) -> str:
message_html = ""
if message:
kind = "error" if error else "success"
message_html = f'{escape(message)}
'
status = "已啟動" if browser_ready else "未啟動"
return shell(
"管理 — Arena Playwright API",
f"""
管理設定
所有設定都是暫存；Space 重啟後會清除並產生新的 SETUP CODE。
{message_html}
Playwright{escape(status)}
Arena Cookie{escape(masked_token)}
目前 API 連線
更新設定
""",
)