锻造大师（带装备价值版）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锻造大师 · 价值版</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body {
  background: linear-gradient(140deg, #12141d, #271c1c);
  min-height: 100vh;
  padding: 30px 16px;
  color: #f0f0f0;
}
.container {
  max-width: 520px;
  margin: 0 auto;
}
.title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #ffc46b;
  text-shadow: 0 0 12px #ff882277;
  margin-bottom: 8px;
}
.value-box{
  text-align:center;
  font-size:24px;
  color:#ffd700;
  font-weight:bold;
  margin-bottom:12px;
}
.subtip {
  text-align: center;
  color: #b8b8b8;
  font-size: 14px;
  margin-bottom: 24px;
}
.panel {
  background: rgba(36, 32, 44, 0.75);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 24px;
  border: 1px solid #ffb86444;
}
.rate-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.rate-item {
  background: rgba(255,255,255,0.08);
  padding:12px;
  border-radius:12px;
  text-align:center;
  font-size:15px;
}
.great {color:#88ff88;}
.success {color:#74b8ff;}
.damage {color:#ffdd77;}
.broken {color:#ff6b6b;}
.forge-btn {
  width:100%;
  border:none;
  background: linear-gradient(90deg, #ff7b26, #ffb040);
  color:#222;
  font-weight:bold;
  font-size:20px;
  padding:16px;
  border-radius:14px;
  cursor:pointer;
  transition: all 0.2s ease;
}
.forge-btn:active {
  transform: scale(0.97);
  filter: brightness(0.85);
}
.result-box {
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:bold;
  margin:20px 0;
  text-align:center;
}
.log-box {
  background: rgba(0,0,0,0.35);
  border-radius:14px;
  padding:16px;
  height:210px;
  overflow-y:auto;
  font-size:14px;
  line-height:1.7;
}
.log-title {
  color:#ccc;
  margin-bottom:6px;
}
.reset-btn{
  margin-top:12px;
  width:100%;
  background:#444;
  color:white;
  border:none;
  padding:12px;
  border-radius:12px;
  font-size:16px;
}
</style>
</head>
<body>
<div class="container">
  <h1 class="title">⚒️ 锻造大师</h1>
  <div class="value-box" id="valueText">当前装备价值：0 万</div>
  <div class="subtip">改版配置｜损坏减半 | 大成功+5 | 成功+5 | 总权重130</div>
  <div class="panel">
    <div class="rate-card">
      <div class="rate-item great">🟢 大成功 · 15（+100万）</div>
      <div class="rate-item success">✅ 成功 · 65（+30万）</div>
      <div class="rate-item damage">💥 损坏 · 20（价值减半）</div>
      <div class="rate-item broken">🪨 破损 · 30（价值清零）</div>
    </div>
    <button class="forge-btn" id="forgeBtn">开始锻造</button>
    <div class="result-box" id="result"></div>
    <div class="log-box">
      <div class="log-title">📜 锻造记录</div>
      <div id="log"></div>
    </div>
    <button class="reset-btn" id="resetBtn">重新打造新装备（重置价值）</button>
  </div>
</div>

<script>
let equipValue = 0;
const table = [
  {text:"🟢【大成功】装备大幅强化，属性暴涨！价值+100万", weight:15, css:"great", action:()=>{ equipValue += 100; }},
  {text:"✅【成功】锻造顺利，装备正常强化，价值+30万", weight:65, css:"success", action:()=>{ equipValue += 30; }},
  {text:"💥【损坏】装备损坏，材料损失一半！价值减半", weight:20, css:"damage", action:()=>{ equipValue = Math.floor(equipValue / 2); }},
  {text:"🪨【破损】装备破损，锻造失败，材料全没！价值清零", weight:30, css:"broken", action:()=>{ equipValue = 0; }},
];
const totalWeight = 130;

function updateValueUI(){
  document.getElementById("valueText").innerText = `当前装备价值：${equipValue} 万`;
}
function startForge(){
  let random = Math.floor(Math.random() * totalWeight) + 1;
  let sum = 0;
  let pick;
  for(let i of table){
    sum += i.weight;
    if(random <= sum){
      pick = i;
      break;
    }
  }
  pick.action();
  updateValueUI();
  document.getElementById("result").innerHTML = `<span class="${pick.css}">${pick.text}</span>`;
  document.getElementById("log").innerHTML += pick.text + "<br>";
}
function resetEquip(){
  equipValue = 0;
  updateValueUI();
  document.getElementById("result").innerText = "";
  document.getElementById("log").innerHTML = "锻造记录：<br>";
}

document.addEventListener('DOMContentLoaded',()=>{
  document.getElementById('forgeBtn').addEventListener('click',startForge);
  document.getElementById('resetBtn').addEventListener('click',resetEquip);
  updateValueUI();
})
</script>
</body>
</html>