63 lines
2.8 KiB
HTML
63 lines
2.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>湖面映星 · 星</title>
|
|||
|
|
<style>
|
|||
|
|
:root { --star:#ffe9bd; --mist:#8f9ac4; --whisper:#5a648c; }
|
|||
|
|
* { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; }
|
|||
|
|
html,body { width:100%; height:100%; overflow:hidden; }
|
|||
|
|
body {
|
|||
|
|
font-family:"PingFang SC","Hiragino Sans GB",sans-serif;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(120% 80% at 50% -10%, rgba(84,72,168,.20), transparent 60%),
|
|||
|
|
radial-gradient(90% 60% at 50% 112%, rgba(38,64,110,.28), transparent 65%),
|
|||
|
|
linear-gradient(180deg, #0b1228, #060a18 55%, #04060f);
|
|||
|
|
}
|
|||
|
|
#cv { position:fixed; inset:0; cursor:default; }
|
|||
|
|
#cv.dragging { cursor:grabbing; }
|
|||
|
|
#tip { position:fixed; z-index:3; pointer-events:none; display:none;
|
|||
|
|
font-size:10px; letter-spacing:1px; color:var(--star);
|
|||
|
|
text-shadow:0 0 10px rgba(255,233,189,.7); white-space:nowrap;
|
|||
|
|
transform:translate(-50%,-160%); }
|
|||
|
|
|
|||
|
|
#panel { position:fixed; inset:0; z-index:5; display:none;
|
|||
|
|
flex-direction:column; align-items:center; justify-content:center;
|
|||
|
|
background:radial-gradient(60% 60% at 50% 50%, rgba(4,6,15,.85), rgba(4,6,15,.6)); }
|
|||
|
|
#panel.open { display:flex; }
|
|||
|
|
#panel h2 { font-size:12px; font-weight:400; letter-spacing:5px; color:var(--star);
|
|||
|
|
margin-bottom:20px; text-shadow:0 0 14px rgba(255,233,189,.5); }
|
|||
|
|
#panel label { font-size:9px; letter-spacing:3px; color:var(--whisper); margin:14px 0 2px; }
|
|||
|
|
#panel input { width:210px; background:none; border:none;
|
|||
|
|
border-bottom:1px solid rgba(143,154,196,.35);
|
|||
|
|
color:var(--star); font-size:20px; font-weight:200;
|
|||
|
|
padding:4px 2px; outline:none; text-align:center;
|
|||
|
|
font-variant-numeric:tabular-nums; }
|
|||
|
|
#panel input:focus { border-color:rgba(255,233,189,.7); }
|
|||
|
|
#panel .btns { display:flex; gap:36px; margin-top:24px; }
|
|||
|
|
#panel .btns button { background:none; border:none; color:var(--mist);
|
|||
|
|
font-size:11px; letter-spacing:5px; cursor:pointer; transition:all .3s; }
|
|||
|
|
#panel .btns button:hover { color:var(--star); text-shadow:0 0 12px rgba(255,233,189,.6); }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="alive" style="position:fixed;top:6px;right:10px;z-index:9;font-size:9px;color:#5a648c;letter-spacing:2px;display:none;">星醒着</div>
|
|||
|
|
<canvas id="cv"></canvas>
|
|||
|
|
<div id="tip"></div>
|
|||
|
|
|
|||
|
|
<div id="panel">
|
|||
|
|
<h2>抄 一 次 表</h2>
|
|||
|
|
<label>总额度</label>
|
|||
|
|
<input id="p_cap" type="number" placeholder="—">
|
|||
|
|
<label>此刻剩余</label>
|
|||
|
|
<input id="p_rem" type="number" placeholder="—">
|
|||
|
|
<div class="btns">
|
|||
|
|
<button onclick="savePlan()">记 下</button>
|
|||
|
|
<button onclick="closePanel()">返 回</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="planet.js"></script>
|
|||
|
|
<!-- 绘制与交互逻辑已拆到 planet.js（内联脚本会被 pywebview 静默吞掉） -->
|
|||
|
|
</body>
|
|||
|
|
</html>
|