cat << 'EOF'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>深蓝工程码生成器</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
body{font-family:"Microsoft Yahei",sans-serif;background:#f3f5f9;margin:0;padding:28px;color:#222}
.wrap{max-width:760px;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:28px}
h1{text-align:center;margin:0 0 20px;color:#1543c6}
label.block{display:block;font-weight:700;margin:12px 0 8px}
input[type="text"],input[type="date"]{width:100%;padding:12px;border:1px solid #dcdfe6;border-radius:10px;font-size:15px}
.models{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 10px}
.model-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e6e8ef;border-radius:10px;cursor:pointer}
.custom-wrap{display:none;margin-top:8px}
.row{margin:10px 0 18px}
button{width:100%;padding:14px;border:0;border-radius:12px;background:#0b63ff;color:#fff;font-weight:700;font-size:16px;cursor:pointer}
table{width:100%;border-collapse:collapse;margin-top:18px}
th,td{padding:10px 8px;border-bottom:1px solid #eef0f5;text-align:center;font-size:14px}
th{background:#0b63ff;color:#fff}
.code{font-family:Consolas,Menlo,monospace;color:#c7254e}
</style>
</head>
<body>
<div class="wrap">
<h1>深蓝工程码生成器</h1>
<label class="block">VIN：</label>
<input id="vin" type="text" placeholder="如：LS6XXXXXXXXXXXXXX (17位)" />
<label class="block">车型：</label>
<div class="models" id="modelGroup">
<label class="model-item"><input type="radio" name="model" value="C385" checked /> 深蓝 SL03</label>
<label class="model-item"><input type="radio" name="model" value="C385_MCA" /> 深蓝 L07</label>
<label class="model-item"><input type="radio" name="model" value="C673" /> 深蓝 S7</label>
<label class="model-item"><input type="radio" name="model" value="C673_ICA" /> 深蓝 S07</label>
<label class="model-item"><input type="radio" name="model" value="C673 solvang" /> 深蓝 S07i</label>
<label class="model-item"><input type="radio" name="model" value="custom" /> 自定义型号</label>
</div>
<div class="custom-wrap" id="customWrap">
<input id="customModel" type="text" placeholder="请输入其它车型代号" />
</div>
<div class="row">
<label class="block">开始日期：</label>
<input id="startDate" type="date" />
</div>
<button id="btnGen">生成 10 天工程码</button>
<div id="result"></div>
</div>
<script>
(function(){
const today=new Date();
document.getElementById("startDate").value=today.toISOString().split("T")[0];
document.getElementById("modelGroup").addEventListener("change",()=>{
const val=document.querySelector('input[name="model"]:checked')?.value;
document.getElementById("customWrap").style.display=(val==="custom")?"block":"none";
});
document.getElementById("btnGen").addEventListener("click",generate);
})();
async function sha256Hex(s){
const buf=new TextEncoder("utf-8").encode(s);
const dig=await crypto.subtle.digest("SHA-256",buf);
return Array.from(new Uint8Array(dig)).map(b=>b.toString(16).padStart(2,"0")).join("");
}
function displayName(code){
if(code==="C385")return"深蓝 SL03";
if(code==="C385_MCA")return"深蓝 L07";
if(code==="C673")return"深蓝 S7";
if(code==="C673_ICA")return"深蓝 S07";
return code;
}
function parseISODate(v){
if(!v)return null;
v=v.trim().replace(/\//g,"-");
if(/^\d{4}-\d{2}-\d{2}$/.test(v))return new Date(v+"T00:00:00");
return new Date(v);
}
async function generate(){
const vin=document.getElementById("vin").value.trim();
if(!vin){alert("请输入 VIN");return;}
let model=document.querySelector('input[name="model"]:checked')?.value;
if(!model){alert("请选择车型");return;}
if(model==="custom"){
const custom=document.getElementById("customModel").value.trim();
if(!custom){alert("请输入自定义车型");return;}
model=custom;
}
const dateVal=document.getElementById("startDate").value;
const start=parseISODate(dateVal);
if(isNaN(start)){alert("无效日期");return;}
const vinTail=vin.slice(-4);
let html=`<table><thead><tr><th>日期</th><th>车型</th><th>工程码</th></tr></thead><tbody>`;
for(let i=0;i<10;i++){
const d=new Date(start.getTime()+i*86400000);
const y=d.getFullYear();
const m=String(d.getMonth()+1).padStart(2,'0');
const day=String(d.getDate()).padStart(2,'0');
const mmdd=m+day;
const plain=model+vinTail+mmdd;
const hash=await sha256Hex(plain);
const startIdx=d.getDate()+1;
const code=hash.substring(startIdx,startIdx+12);
html+=`<tr><td>${y}-${m}-${day}</td><td>${displayName(model)}</td><td class="code">${code}</td></tr>`;
}
html+=`</tbody></table>`;
document.getElementById("result").innerHTML=html;
}
</script>
</body>
</html>
EOF
{
"out":"html"
}
