锻造大师（改版）

<!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;
}
.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;
}
</style>
</head>
<body>
<div class="container">
  <h1 class="title">⚒️ 锻造大师</h1>
  <div class="subtip">改版配置｜损坏减半 | 大成功+5 | 成功+5 | 总权重130</div>
  <div class="panel">
    <div class="rate-card">
      <div class="rate-item great">🟢 大成功 · 15</div>
      <div class="rate-item success">✅ 成功 · 65</div>
      <div class="rate-item damage">💥 损坏 · 20</div>
      <div class="rate-item broken">🪨 破损 · 30</div>
    </div>
    <button class="forge-btn" onclick="startForge()">开始锻造</button>
    <div class="result-box" id="result"></div>
    <div class="log-box">
      <div class="log-title">📜 锻造记录</div>
      <div id="log"></div>
    </div>
  </div>
</div>

<script>
const table = [
  {text:"🟢【大成功】装备大幅强化，属性暴涨！", weight:15, css:"great"},
  {text:"✅【成功】锻造顺利，装备正常强化", weight:65, css:"success"},
  {text:"💥【损坏】装备损坏，材料损失一半", weight:20, css:"damage"},
  {text:"🪨【破损】装备破损，锻造失败，材料全没", weight:30, css:"broken"},
];
const totalWeight = 130;
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;
    }
  }
  document.getElementById("result").innerHTML = `<span class="${pick.css}">${pick.text}</span>`;
  document.getElementById("log").innerHTML += pick.text + "<br>";
}
</script>
</body>
</html>