925 lines
29 KiB
HTML
925 lines
29 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>暗黑破坏神 2 · 幕首领击杀与战利品属性模拟器 (Act Boss Loot Simulator)</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
--bg-void: #080604;
|
|
--bg-main: #0e0a07;
|
|
--bg-panel: rgba(20, 15, 11, 0.95);
|
|
--bg-card: #15110c;
|
|
--bg-card-hover: #211a13;
|
|
--border-dim: #2b2219;
|
|
--border-gold: #73572d;
|
|
--border-gold-glow: #c8a15a;
|
|
--gold-primary: #c8a15a;
|
|
--gold-bright: #eecf87;
|
|
--gold-light: #f5eedc;
|
|
--text-dim: #998772;
|
|
--text-muted: #6e5e4d;
|
|
--btn-bg: #1c1611;
|
|
--btn-hover: #33271c;
|
|
--pill-bg: #1b150f;
|
|
|
|
/* Diablo Item Quality Colors */
|
|
--q-unique: #c8a15a;
|
|
--q-unique-bg: rgba(200, 161, 90, 0.08);
|
|
--q-unique-border: rgba(200, 161, 90, 0.35);
|
|
--q-set: #00e600;
|
|
--q-set-bg: rgba(0, 230, 0, 0.08);
|
|
--q-set-border: rgba(0, 230, 0, 0.35);
|
|
--q-rune: #ff8c00;
|
|
--q-rune-bg: rgba(255, 140, 0, 0.08);
|
|
--q-rune-border: rgba(255, 140, 0, 0.35);
|
|
--q-rare: #ffff60;
|
|
--q-rare-bg: rgba(255, 255, 96, 0.08);
|
|
--q-magic: #4880ff;
|
|
--q-magic-bg: rgba(72, 128, 255, 0.08);
|
|
--q-base: #e0d5c1;
|
|
--q-gem: #d880ff;
|
|
--q-gem-bg: rgba(216, 128, 255, 0.08);
|
|
--q-misc: #ffd700;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
background: var(--bg-void);
|
|
color: var(--gold-light);
|
|
font: 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: #0c0907; }
|
|
::-webkit-scrollbar-thumb { background: #2f251c; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #523f2f; }
|
|
|
|
/* Top Header */
|
|
header {
|
|
height: 44px;
|
|
background: linear-gradient(180deg, #18120d 0%, #100c09 100%);
|
|
border-bottom: 1px solid var(--border-gold);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
|
|
z-index: 100;
|
|
position: relative;
|
|
}
|
|
header h1 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--gold-bright);
|
|
letter-spacing: 0.06em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
|
|
}
|
|
.brand-badge {
|
|
background: linear-gradient(135deg, #7d0000 0%, #b81c00 100%);
|
|
color: #ffcfcf;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
border: 1px solid #ff4d4d;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
header nav {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
header nav a {
|
|
color: var(--gold-primary);
|
|
text-decoration: none;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid transparent;
|
|
font-size: 11px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
header nav a:hover {
|
|
background: var(--btn-hover);
|
|
border-color: var(--border-gold);
|
|
color: var(--gold-bright);
|
|
}
|
|
header nav a.active {
|
|
background: #33140a;
|
|
border-color: #ff5722;
|
|
color: #ffccbc;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Main Layout */
|
|
.app-layout {
|
|
display: flex;
|
|
height: calc(100vh - 44px);
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Left Control Sidebar */
|
|
aside.sidebar-controls {
|
|
width: 420px;
|
|
min-width: 420px;
|
|
max-width: 420px;
|
|
background: var(--bg-main);
|
|
border-right: 1px solid var(--border-dim);
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Section Box */
|
|
.control-section {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-dim);
|
|
border-radius: 6px;
|
|
padding: 14px;
|
|
}
|
|
.section-header {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--gold-bright);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Boss Selector Grid */
|
|
.boss-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.boss-select-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
background: #0f0b08;
|
|
border: 1px solid var(--border-dim);
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.boss-select-card:hover {
|
|
background: #1c150e;
|
|
border-color: var(--border-gold);
|
|
}
|
|
.boss-select-card.selected {
|
|
background: linear-gradient(90deg, rgba(200, 161, 90, 0.15) 0%, rgba(33, 26, 19, 0.4) 100%);
|
|
border-color: var(--gold-primary);
|
|
box-shadow: 0 0 8px rgba(200, 161, 90, 0.2);
|
|
}
|
|
.boss-card-icon {
|
|
font-size: 20px;
|
|
width: 32px;
|
|
text-align: center;
|
|
}
|
|
.boss-card-info {
|
|
flex: 1;
|
|
}
|
|
.boss-card-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--gold-bright);
|
|
}
|
|
.boss-card-sub {
|
|
font-size: 10px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* Difficulty Pills */
|
|
.diff-pills-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.diff-pill {
|
|
flex: 1;
|
|
padding: 6px 0;
|
|
text-align: center;
|
|
background: #100c08;
|
|
border: 1px solid var(--border-dim);
|
|
border-radius: 4px;
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.diff-pill:hover {
|
|
background: var(--btn-hover);
|
|
color: var(--gold-light);
|
|
}
|
|
.diff-pill.active {
|
|
background: #2a1b0c;
|
|
border-color: var(--gold-primary);
|
|
color: var(--gold-bright);
|
|
}
|
|
|
|
/* Quest Checkbox Row */
|
|
.quest-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
background: #0d0906;
|
|
border: 1px dashed var(--border-dim);
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
}
|
|
.quest-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
color: var(--gold-light);
|
|
}
|
|
.quest-label input {
|
|
accent-color: var(--gold-primary);
|
|
}
|
|
|
|
/* Boss Spec Preview Box */
|
|
.boss-spec-box {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #0d0a07;
|
|
border-radius: 4px;
|
|
border-left: 3px solid var(--gold-primary);
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
}
|
|
.boss-spec-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
}
|
|
.boss-spec-name {
|
|
font-weight: 700;
|
|
color: var(--gold-bright);
|
|
}
|
|
.boss-quest-badge {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
.boss-quest-badge.quest-on {
|
|
background: rgba(255, 215, 0, 0.15);
|
|
color: #ffd700;
|
|
border: 1px solid #ffd700;
|
|
}
|
|
.boss-quest-badge.quest-off {
|
|
background: rgba(150, 150, 150, 0.1);
|
|
color: #888;
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
/* Sliders & Parameter Controls */
|
|
.param-group {
|
|
margin-bottom: 14px;
|
|
}
|
|
.param-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
.param-title {
|
|
font-size: 11px;
|
|
color: var(--gold-primary);
|
|
font-weight: 600;
|
|
}
|
|
.param-val-badge {
|
|
background: #211910;
|
|
border: 1px solid var(--border-gold);
|
|
color: var(--gold-bright);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
}
|
|
.param-slider {
|
|
width: 100%;
|
|
accent-color: var(--gold-primary);
|
|
cursor: pointer;
|
|
}
|
|
.param-pills-row {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-top: 6px;
|
|
}
|
|
.pp-pill, .mf-preset-btn {
|
|
flex: 1;
|
|
padding: 3px 0;
|
|
text-align: center;
|
|
background: #110d09;
|
|
border: 1px solid var(--border-dim);
|
|
border-radius: 3px;
|
|
color: var(--text-dim);
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
}
|
|
.pp-pill:hover, .mf-preset-btn:hover {
|
|
background: var(--btn-hover);
|
|
color: var(--gold-light);
|
|
}
|
|
.pp-pill.active {
|
|
background: #2b1c0e;
|
|
border-color: var(--gold-primary);
|
|
color: var(--gold-bright);
|
|
font-weight: 700;
|
|
}
|
|
.param-tip {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Big Kill Action Buttons */
|
|
.actions-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.btn-big-kill {
|
|
background: linear-gradient(180deg, #7c1200 0%, #440a00 100%);
|
|
border: 1px solid #ff4400;
|
|
color: #fff;
|
|
padding: 12px 16px;
|
|
border-radius: 6px;
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
box-shadow: 0 4px 14px rgba(180, 20, 0, 0.4);
|
|
transition: all 0.15s ease;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
|
}
|
|
.btn-big-kill:hover {
|
|
background: linear-gradient(180deg, #991600 0%, #590d00 100%);
|
|
border-color: #ff6622;
|
|
box-shadow: 0 4px 20px rgba(220, 30, 0, 0.6);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-big-kill:active {
|
|
transform: translateY(1px);
|
|
box-shadow: 0 2px 6px rgba(180, 20, 0, 0.4);
|
|
}
|
|
.btn-sub-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.btn-sub-action {
|
|
flex: 1;
|
|
padding: 8px 10px;
|
|
background: #18120d;
|
|
border: 1px solid var(--border-dim);
|
|
border-radius: 4px;
|
|
color: var(--gold-light);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.btn-sub-action:hover {
|
|
background: #2b1f15;
|
|
border-color: var(--border-gold);
|
|
}
|
|
|
|
/* Stats Board */
|
|
.stats-board-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px;
|
|
}
|
|
.stat-chip {
|
|
padding: 6px 8px;
|
|
background: #0e0a07;
|
|
border: 1px solid var(--border-dim);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.stat-chip-label {
|
|
font-size: 9px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
.stat-chip-val {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: var(--gold-bright);
|
|
margin-top: 2px;
|
|
}
|
|
.stat-chip.unique .stat-chip-val { color: var(--q-unique); }
|
|
.stat-chip.set .stat-chip-val { color: var(--q-set); }
|
|
.stat-chip.rare .stat-chip-val { color: var(--q-rare); }
|
|
.stat-chip.rune .stat-chip-val { color: var(--q-rune); }
|
|
|
|
/* Right Showcase Area */
|
|
main.loot-showcase {
|
|
flex: 1;
|
|
background: var(--bg-void);
|
|
overflow-y: auto;
|
|
padding: 20px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Screen Flash Effect */
|
|
@keyframes killPulse {
|
|
0% { box-shadow: inset 0 0 0 0 rgba(255, 68, 0, 0); }
|
|
30% { box-shadow: inset 0 0 60px 10px rgba(255, 68, 0, 0.35); }
|
|
100% { box-shadow: inset 0 0 0 0 rgba(255, 68, 0, 0); }
|
|
}
|
|
.kill-flash {
|
|
animation: killPulse 0.45s ease-out;
|
|
}
|
|
|
|
/* Kill Banner */
|
|
.kill-banner-box {
|
|
background: linear-gradient(90deg, #241108 0%, #150b05 100%);
|
|
border: 1px solid #7c2409;
|
|
border-radius: 6px;
|
|
padding: 12px 18px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
|
|
}
|
|
.banner-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.banner-icon {
|
|
font-size: 24px;
|
|
}
|
|
.banner-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
color: #ff9d6c;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.banner-sub {
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Empty Placeholder */
|
|
.empty-loot-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120px 0;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
.placeholder-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 12px;
|
|
opacity: 0.6;
|
|
}
|
|
.placeholder-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-dim);
|
|
margin-bottom: 6px;
|
|
}
|
|
.placeholder-desc {
|
|
font-size: 12px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* Items Grid */
|
|
.loot-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Showcase Toolbar & Language Switcher (Issue #122) */
|
|
.showcase-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #0d0906;
|
|
border: 1px solid #2a1c11;
|
|
border-radius: 6px;
|
|
padding: 8px 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.toolbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.toolbar-icon {
|
|
font-size: 14px;
|
|
}
|
|
.toolbar-title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--gold-bright);
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
.lang-switch-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.lang-label {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
margin-right: 4px;
|
|
}
|
|
.lang-pill {
|
|
background: #18110b;
|
|
border: 1px solid #3d2a1b;
|
|
color: #aa9c8d;
|
|
padding: 3px 10px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.lang-pill:hover {
|
|
background: #24170e;
|
|
border-color: var(--border-gold);
|
|
color: var(--gold-bright);
|
|
}
|
|
.lang-pill.active {
|
|
background: linear-gradient(180deg, #44260d 0%, #2e1806 100%);
|
|
border-color: #ff9800;
|
|
color: #ffe082;
|
|
box-shadow: 0 0 8px rgba(255, 152, 0, 0.35);
|
|
}
|
|
|
|
/* Diablo II Authentic Tooltip / Item Card */
|
|
.d2-item-card {
|
|
background: #080604;
|
|
border: 2px solid #332517;
|
|
border-radius: 6px;
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
|
|
position: relative;
|
|
transition: transform 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
.d2-item-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
/* Card Quality Border Themes */
|
|
.d2-item-card.quality-unique, .d2-item-card.quality-暗金 { border-color: rgba(200, 161, 90, 0.5); background: linear-gradient(180deg, #161009 0%, #0a0704 100%); }
|
|
.d2-item-card.quality-set, .d2-item-card.quality-套装 { border-color: rgba(0, 230, 0, 0.4); background: linear-gradient(180deg, #091609 0%, #040a04 100%); }
|
|
.d2-item-card.quality-rare, .d2-item-card.quality-亮金 { border-color: rgba(255, 255, 96, 0.4); background: linear-gradient(180deg, #161609 0%, #0a0a04 100%); }
|
|
.d2-item-card.quality-magic, .d2-item-card.quality-魔法 { border-color: rgba(72, 128, 255, 0.4); background: linear-gradient(180deg, #09101c 0%, #04070c 100%); }
|
|
.d2-item-card.quality-rune, .d2-item-card.quality-符文 { border-color: rgba(255, 140, 0, 0.5); background: linear-gradient(180deg, #180f07 0%, #0a0603 100%); }
|
|
.d2-item-card.quality-gem, .d2-item-card.quality-宝石 { border-color: rgba(220, 220, 220, 0.4); background: linear-gradient(180deg, #141416 0%, #08080a 100%); }
|
|
|
|
/* Item Card Header */
|
|
.item-card-header {
|
|
text-align: center;
|
|
border-bottom: 1px solid #201811;
|
|
padding-bottom: 8px;
|
|
}
|
|
.item-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
|
|
}
|
|
.item-subtitle {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
margin-top: 2px;
|
|
}
|
|
.item-tags {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
}
|
|
.item-quality-pill {
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
border: 1px solid;
|
|
text-transform: uppercase;
|
|
}
|
|
.item-ilvl-pill {
|
|
font-size: 9px;
|
|
color: var(--text-muted);
|
|
background: #120e0a;
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Base Stats Block */
|
|
.item-base-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
border-bottom: 1px dashed #1c150e;
|
|
padding-bottom: 8px;
|
|
}
|
|
.base-stat-item .val-white {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
.base-stat-item .val-blue {
|
|
color: #6888ff;
|
|
font-weight: 700;
|
|
}
|
|
.base-stat-item .val-base {
|
|
color: #9e9382;
|
|
font-weight: 500;
|
|
}
|
|
.base-stat-item.req {
|
|
color: #b08d74;
|
|
}
|
|
|
|
/* Affix Lines Block (Canonical Blue Lines) */
|
|
.item-affix-lines {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
.tooltip-stat-line.line-blue {
|
|
color: #4880ff;
|
|
font-weight: 600;
|
|
text-shadow: 0 0 6px rgba(72, 128, 255, 0.4);
|
|
}
|
|
.tooltip-stat-line.line-white {
|
|
color: #e0d5c1;
|
|
}
|
|
.tooltip-stat-line.line-gold {
|
|
color: #c8a15a;
|
|
font-weight: 700;
|
|
}
|
|
.tooltip-stat-line.line-green {
|
|
color: #00e600;
|
|
font-weight: 700;
|
|
}
|
|
.tooltip-stat-line.line-orange {
|
|
color: #ff8c00;
|
|
font-weight: 700;
|
|
}
|
|
.tooltip-stat-line.line-red {
|
|
color: #d03a3a;
|
|
font-weight: 700;
|
|
margin-top: 6px;
|
|
}
|
|
.tooltip-stat-line.line-instruction {
|
|
color: #e0d5c1;
|
|
margin-bottom: 6px;
|
|
}
|
|
.tooltip-stat-line.line-gray {
|
|
color: #999999;
|
|
}
|
|
.tooltip-stat-line.line-yellow {
|
|
color: #ffff00;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Top Navigation -->
|
|
<header>
|
|
<h1>
|
|
<span>DIABLO II</span>
|
|
<span class="brand-badge">BOSS KILL SIMULATOR</span>
|
|
<span style="font-size: 11px; color: var(--text-dim); font-weight: normal; margin-left: 8px;">1.13c 幕首领战利品与词缀生成器</span>
|
|
</h1>
|
|
<nav>
|
|
<a href="./acts.html">🏰 旷野与战役 (Acts)</a>
|
|
<a href="./arena.html">⚔️ 竞技场 (Arena)</a>
|
|
<a href="./loot.html">📊 掉落几率计算器 (Loot)</a>
|
|
<a href="./boss.html" class="active">💀 首领击杀模拟 (Boss Sim)</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Workspace -->
|
|
<div class="app-layout">
|
|
<!-- Left Controls Sidebar -->
|
|
<aside class="sidebar-controls">
|
|
<!-- 1. Act Boss Selector -->
|
|
<div class="control-section">
|
|
<div class="section-header">
|
|
<span>选择幕首领 (Act Boss)</span>
|
|
<span style="color: var(--gold-primary); font-size: 10px;">Acts 1-5</span>
|
|
</div>
|
|
|
|
<!-- Boss List -->
|
|
<div class="boss-grid" id="boss-list-container">
|
|
<!-- Rendered by src/boss.ts -->
|
|
</div>
|
|
|
|
<!-- Difficulty Select -->
|
|
<div class="diff-pills-row">
|
|
<button type="button" class="diff-pill" data-diff="normal">普通 (Normal)</button>
|
|
<button type="button" class="diff-pill" data-diff="nightmare">噩梦 (Nightmare)</button>
|
|
<button type="button" class="diff-pill active" data-diff="hell">地狱 (Hell)</button>
|
|
</div>
|
|
|
|
<!-- Quest Kill Toggle -->
|
|
<div class="quest-row">
|
|
<label class="quest-label">
|
|
<input type="checkbox" id="quest-kill-toggle" checked />
|
|
<span>任务首杀判定 (Quest Kill / Bug Kill)</span>
|
|
</label>
|
|
<span style="color: #ffd700; font-weight: bold; font-size: 10px;">移除垃圾掉落</span>
|
|
</div>
|
|
|
|
<!-- Selected Boss Info Card -->
|
|
<div class="boss-spec-box">
|
|
<div class="boss-spec-header">
|
|
<span class="boss-spec-name" id="boss-preview-name">墨菲斯托 (Mephisto)</span>
|
|
<span class="boss-quest-badge quest-on" id="boss-preview-quest">🌟 首杀判定启用</span>
|
|
</div>
|
|
<div id="boss-preview-title" style="color: var(--gold-primary); font-weight: 600; margin-bottom: 2px;">第三幕 · 憎恨之王 [HELL]</div>
|
|
<div id="boss-preview-area" style="color: var(--text-dim); margin-bottom: 4px;">憎恨囚牢第三层</div>
|
|
<div style="display: flex; gap: 8px; margin-bottom: 4px;">
|
|
<span id="boss-preview-mlvl" style="color: #ff9d6c; font-weight: 700;">mlvl 87</span>
|
|
<span id="boss-preview-tc" style="color: var(--text-dim);">TC: Mephistoq (H)</span>
|
|
</div>
|
|
<div id="boss-preview-desc" style="color: var(--text-muted); font-size: 10px; margin-top: 4px; line-height: 1.4;"></div>
|
|
<div style="margin-top: 6px; padding-top: 4px; border-top: 1px dashed #201811; color: var(--gold-light); font-size: 10px;">
|
|
<strong>核心产出：</strong><span id="boss-preview-highlights">军帽、暴风之盾、眼球、海蛇皮</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Player Parameters (PP / MF) -->
|
|
<div class="control-section">
|
|
<div class="section-header">
|
|
<span>角色属性与房间 (Settings)</span>
|
|
<span style="color: var(--text-muted); font-size: 10px;">PP数 & 寻宝率</span>
|
|
</div>
|
|
|
|
<!-- Players Count (PP) -->
|
|
<div class="param-group">
|
|
<div class="param-header">
|
|
<span class="param-title">房间人数 (Players Count)</span>
|
|
<span class="param-val-badge" id="players-val">1P</span>
|
|
</div>
|
|
<input type="range" class="param-slider" id="players-range" min="1" max="8" step="1" value="1" />
|
|
<div class="param-pills-row">
|
|
<button type="button" class="pp-pill active" data-pp="1">1P (单人)</button>
|
|
<button type="button" class="pp-pill" data-pp="3">3P</button>
|
|
<button type="button" class="pp-pill" data-pp="5">5P</button>
|
|
<button type="button" class="pp-pill" data-pp="7">7P (极低NoDrop)</button>
|
|
<button type="button" class="pp-pill" data-pp="8">8P (满人)</button>
|
|
</div>
|
|
<div class="param-tip" id="tip-nodrop">1P 模式下单次挑选无掉落率: 18.7%</div>
|
|
</div>
|
|
|
|
<!-- Magic Find (MF) -->
|
|
<div class="param-group">
|
|
<div class="param-header">
|
|
<span class="param-title">更加寻获魔法装备 (Magic Find %)</span>
|
|
<input type="number" id="mf-input" min="0" max="1000" step="10" value="250" style="width: 68px; background: #0c0805; border: 1px solid var(--border-gold); color: var(--gold-bright); text-align: center; border-radius: 3px; font-weight: 700;" />
|
|
</div>
|
|
<input type="range" class="param-slider" id="mf-range" min="0" max="1000" step="10" value="250" />
|
|
<div class="param-pills-row">
|
|
<button type="button" class="mf-preset-btn" data-mf="0">0%</button>
|
|
<button type="button" class="mf-preset-btn" data-mf="150">150%</button>
|
|
<button type="button" class="mf-preset-btn" data-mf="250">250% (推荐)</button>
|
|
<button type="button" class="mf-preset-btn" data-mf="400">400%</button>
|
|
<button type="button" class="mf-preset-btn" data-mf="600">600%</button>
|
|
</div>
|
|
<div class="param-tip" id="tip-mf">实际寻宝率 250% · 暗金等效修正: +125%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Actions -->
|
|
<div class="control-section" style="background: transparent; border: none; padding: 0;">
|
|
<div class="actions-container">
|
|
<button type="button" class="btn-big-kill" id="btn-kill-boss">
|
|
<span>💥</span>
|
|
<span>模拟击杀 Boss (Kill Boss)</span>
|
|
<span style="font-size: 11px; opacity: 0.75; font-weight: normal;">[空格键]</span>
|
|
</button>
|
|
<div class="btn-sub-actions">
|
|
<button type="button" class="btn-sub-action" id="btn-kill-10">⚔️ 连杀 10 次</button>
|
|
<button type="button" class="btn-sub-action" id="btn-clear-loot">🔄 清空战利品</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. Session Stats Board -->
|
|
<div class="control-section">
|
|
<div class="section-header">
|
|
<span>战利品统计 (Session Stats)</span>
|
|
<span style="color: var(--text-muted); font-size: 10px;">累计战报</span>
|
|
</div>
|
|
<div class="stats-board-grid">
|
|
<div class="stat-chip">
|
|
<span class="stat-chip-label">击杀首领次数</span>
|
|
<span class="stat-chip-val" id="stat-total-kills">0</span>
|
|
</div>
|
|
<div class="stat-chip">
|
|
<span class="stat-chip-label">掉落装备总数</span>
|
|
<span class="stat-chip-val" id="stat-total-items">0</span>
|
|
</div>
|
|
<div class="stat-chip unique">
|
|
<span class="stat-chip-label">暗金装备 (Unique)</span>
|
|
<span class="stat-chip-val" id="stat-uniques">0</span>
|
|
</div>
|
|
<div class="stat-chip set">
|
|
<span class="stat-chip-label">绿色套装 (Set)</span>
|
|
<span class="stat-chip-val" id="stat-sets">0</span>
|
|
</div>
|
|
<div class="stat-chip rare">
|
|
<span class="stat-chip-label">黄金装备 (Rare)</span>
|
|
<span class="stat-chip-val" id="stat-rares">0</span>
|
|
</div>
|
|
<div class="stat-chip">
|
|
<span class="stat-chip-label">魔法装备 (Magic)</span>
|
|
<span class="stat-chip-val" id="stat-magics" style="color: var(--q-magic);">0</span>
|
|
</div>
|
|
<div class="stat-chip rune">
|
|
<span class="stat-chip-label">高级符文 (Rune)</span>
|
|
<span class="stat-chip-val" id="stat-runes">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Right Loot Showcase -->
|
|
<main class="loot-showcase" id="loot-showcase-panel">
|
|
<!-- Kill Result Banner -->
|
|
<div class="kill-banner-box" id="kill-result-banner">
|
|
<div class="banner-main">
|
|
<span class="banner-icon">⚔️</span>
|
|
<span class="banner-title">击杀模拟器已就绪</span>
|
|
<span class="banner-sub">请在左侧选择幕首领并点击「模拟击杀 Boss」生成对应物品与属性</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Showcase Toolbar / Language Switcher -->
|
|
<div class="showcase-toolbar">
|
|
<div class="toolbar-left">
|
|
<span class="toolbar-icon">💎</span>
|
|
<span class="toolbar-title">战利品展示面板</span>
|
|
</div>
|
|
<div class="lang-switch-row">
|
|
<span class="lang-label">装备语言:</span>
|
|
<button type="button" class="lang-pill active" data-lang="en">EN 原版</button>
|
|
<button type="button" class="lang-pill" data-lang="zh">中文</button>
|
|
<button type="button" class="lang-pill" data-lang="bilingual">EN / ZH 双语</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loot Grid -->
|
|
<div class="loot-grid" id="loot-items-grid">
|
|
<!-- Rendered by src/boss.ts -->
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Script Entry -->
|
|
<script type="module" src="/src/boss.ts"></script>
|
|
</body>
|
|
</html>
|