63 lines
5.2 KiB
HTML
63 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>TQ Cat 用户信息配置</title>
|
|
<style>
|
|
:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#28231e;background:#f5f0e8}
|
|
body{margin:0;padding:24px 14px}main{max-width:720px;margin:auto;background:#fffdf9;border:1px solid #ded4c6;border-radius:18px;padding:26px;box-shadow:0 12px 36px #49351d14}
|
|
h1,h2{margin-top:0}.hint,#status{color:#6b6156}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
|
|
label{display:grid;gap:6px;font-size:14px;color:#62584d}input{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid #cec2b2;border-radius:9px;font:inherit}
|
|
fieldset{margin:20px 0;padding:18px;border:1px solid #ded4c6;border-radius:12px}legend{padding:0 8px;font-weight:700}
|
|
button{padding:11px 18px;border:0;border-radius:9px;background:#955033;color:#fff;font:inherit;font-weight:700;cursor:pointer}button:disabled{opacity:.55;cursor:wait}
|
|
#result{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}dt{color:#74695e}dd{margin:0;font-weight:650}
|
|
.ok{color:#28733c}.error{color:#a12f2f}@media(max-width:560px){main{padding:19px}.grid{grid-template-columns:1fr}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>TQ Cat 用户信息配置</h1>
|
|
<p class="hint">当前页面由设备提供。提交后设备会保存资料并获取今日喜色与财位。</p>
|
|
<form id="profile">
|
|
<fieldset>
|
|
<legend>生辰信息</legend>
|
|
<div class="grid">
|
|
<label>出生年份<input name="birthYear" type="number" min="1900" max="2100" required></label>
|
|
<label>出生月份<input name="birthMonth" type="number" min="1" max="12" required></label>
|
|
<label>出生日期<input name="birthDay" type="number" min="1" max="31" required></label>
|
|
<label>出生小时<input name="birthHour" type="number" min="0" max="23" required></label>
|
|
<label>出生分钟<input name="birthMinute" type="number" min="0" max="59" required></label>
|
|
<label>出生地点<input name="birthPlace" maxlength="63" placeholder="广东省广州市" required></label>
|
|
<label>当前居住地（可选）<input name="currentResidence" maxlength="63" placeholder="广东省深圳市"></label>
|
|
<label>MBTI（可选）<input name="mbti" maxlength="7" placeholder="INFJ"></label>
|
|
</div>
|
|
</fieldset>
|
|
<button id="submit" type="submit">保存并刷新今日结果</button>
|
|
<p id="status" role="status">正在读取设备资料...</p>
|
|
</form>
|
|
<fieldset>
|
|
<legend>今日结果</legend>
|
|
<dl id="result">
|
|
<dt>生辰八字</dt><dd id="bazi">-</dd>
|
|
<dt>五行属性</dt><dd id="element">-</dd>
|
|
<dt>今日喜色</dt><dd id="color">-</dd>
|
|
<dt>今日财位</dt><dd id="direction">-</dd>
|
|
<dt>日期</dt><dd id="date">-</dd>
|
|
</dl>
|
|
</fieldset>
|
|
</main>
|
|
<script>
|
|
"use strict";
|
|
const form=document.querySelector("#profile"),statusNode=document.querySelector("#status"),submit=document.querySelector("#submit");
|
|
function status(text,kind=""){statusNode.textContent=text;statusNode.className=kind}
|
|
function showResult(data){for(const [id,key] of [["bazi","bazi"],["element","element"],["color","luckyColor"],["direction","wealthDirection"],["date","targetDate"]])document.querySelector("#"+id).textContent=data[key]||"-"}
|
|
async function jsonFetch(url,options){const response=await fetch(url,{cache:"no-store",...options});const data=await response.json();if(!response.ok)throw new Error(data.error||("HTTP "+response.status));return data}
|
|
async function loadProfile(){try{const data=await jsonFetch("/api/profile");if(data.configured)for(const name of ["birthYear","birthMonth","birthDay","birthHour","birthMinute","birthPlace","currentResidence","mbti"])form.elements[name].value=data[name]??"";status(data.configured?"已读取设备中的用户资料":"尚未配置用户资料",data.configured?"ok":"")}catch(error){status("读取资料失败："+error.message,"error")}}
|
|
async function loadFortune(){try{const data=await jsonFetch("/api/fortune");if(data.status==="ready"){showResult(data);status("今日结果已更新","ok")}else if(data.status==="pending")status("资料已保存，设备正在获取今日结果...");}catch(error){status("读取今日结果失败："+error.message,"error")}}
|
|
form.addEventListener("submit",async event=>{event.preventDefault();submit.disabled=true;const values=new FormData(form),payload={};for(const name of ["birthYear","birthMonth","birthDay","birthHour","birthMinute"])payload[name]=Number(values.get(name));for(const name of ["birthPlace","currentResidence","mbti"])payload[name]=String(values.get(name)||"").trim();try{await jsonFetch("/api/profile",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(payload)});showResult({});status("资料已保存，设备正在获取今日结果...","ok");await loadFortune()}catch(error){status("保存失败："+error.message,"error")}finally{submit.disabled=false}});
|
|
loadProfile().then(loadFortune);setInterval(loadFortune,2000);
|
|
</script>
|
|
</body>
|
|
</html>
|