1332 lines
44 KiB
HTML
1332 lines
44 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 · 掉落模拟器与精确概率计算器 (Maxroll 风格)</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; }
|
||
|
||
/* 顶部导航 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, #421200 0%, #7d2900 100%);
|
||
color: #ffb17a;
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
border: 1px solid #b84300;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
header nav a {
|
||
color: var(--gold-primary);
|
||
text-decoration: none;
|
||
margin-left: 14px;
|
||
font-size: 12px;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
header nav a:hover {
|
||
background: rgba(200, 161, 90, 0.12);
|
||
color: #fff;
|
||
}
|
||
|
||
/* 页面双栏主容器 */
|
||
#app-container {
|
||
display: grid;
|
||
grid-template-columns: 390px 1fr;
|
||
height: calc(100vh - 44px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 左侧控制器栏 Sidebar */
|
||
.sidebar {
|
||
background: var(--bg-panel);
|
||
border-right: 1px solid var(--border-dim);
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar-section {
|
||
padding: 12px 14px;
|
||
border-bottom: 1px solid var(--border-dim);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.section-headline {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--gold-primary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 难度切换按钮组 */
|
||
.diff-segmented-control {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 4px;
|
||
background: #0d0a07;
|
||
padding: 3px;
|
||
border-radius: 5px;
|
||
border: 1px solid var(--border-dim);
|
||
}
|
||
.diff-btn {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--text-dim);
|
||
padding: 6px 4px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.diff-btn:hover {
|
||
color: var(--gold-light);
|
||
background: rgba(200, 161, 90, 0.08);
|
||
}
|
||
.diff-btn.active {
|
||
background: linear-gradient(180deg, #382718 0%, #24190f 100%);
|
||
color: var(--gold-bright);
|
||
border: 1px solid var(--border-gold);
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
|
||
}
|
||
|
||
/* 怪物分类 Chips */
|
||
.monster-cat-row {
|
||
display: flex;
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.monster-cat-chip {
|
||
background: #14100c;
|
||
border: 1px solid var(--border-dim);
|
||
color: var(--text-dim);
|
||
font-size: 11px;
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.monster-cat-chip:hover {
|
||
border-color: var(--border-gold);
|
||
color: var(--gold-light);
|
||
}
|
||
.monster-cat-chip.active {
|
||
background: #302315;
|
||
border-color: var(--gold-primary);
|
||
color: var(--gold-bright);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 怪物搜索框 */
|
||
.search-box-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.search-box-wrapper input {
|
||
width: 100%;
|
||
background: #0d0a07;
|
||
border: 1px solid var(--border-dim);
|
||
color: var(--gold-light);
|
||
padding: 6px 10px 6px 28px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
}
|
||
.search-box-wrapper input:focus {
|
||
outline: none;
|
||
border-color: var(--gold-primary);
|
||
background: #130f0a;
|
||
}
|
||
.search-box-icon {
|
||
position: absolute;
|
||
left: 8px;
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 怪物列表滚动区 */
|
||
.monster-list-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
max-height: 220px;
|
||
overflow-y: auto;
|
||
padding-right: 2px;
|
||
}
|
||
.monster-item-card {
|
||
background: #14100c;
|
||
border: 1px solid var(--border-dim);
|
||
border-radius: 4px;
|
||
padding: 6px 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.12s ease;
|
||
}
|
||
.monster-item-card:hover {
|
||
background: #1e1711;
|
||
border-color: #4a3826;
|
||
}
|
||
.monster-item-card.selected {
|
||
background: linear-gradient(90deg, #2b1f13 0%, #1c150e 100%);
|
||
border: 1px solid var(--gold-primary);
|
||
box-shadow: 0 0 8px rgba(200, 161, 90, 0.2);
|
||
}
|
||
.mon-icon {
|
||
font-size: 16px;
|
||
width: 24px;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.mon-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.mon-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 6px;
|
||
}
|
||
.mon-name {
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
color: var(--gold-light);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.monster-item-card.selected .mon-name {
|
||
color: var(--gold-bright);
|
||
}
|
||
.mon-cat-badge {
|
||
font-size: 9px;
|
||
padding: 1px 4px;
|
||
border-radius: 3px;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
.badge-boss { background: #5c1818; color: #ff9999; border: 1px solid #802020; }
|
||
.badge-superunique { background: #473210; color: #f0c674; border: 1px solid #6b4d1b; }
|
||
.badge-farm { background: #1a3d24; color: #85e89d; border: 1px solid #285e37; }
|
||
.badge-chest { background: #2f274a; color: #b392f0; border: 1px solid #4a3d75; }
|
||
.badge-normal { background: #222222; color: #cccccc; border: 1px solid #444444; }
|
||
.mon-meta {
|
||
font-size: 10px;
|
||
color: var(--text-dim);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 选定怪物规格看板 (Monster Spec Card) */
|
||
.monster-spec-card {
|
||
background: linear-gradient(180deg, #1d1610 0%, #120e0a 100%);
|
||
border: 1px solid var(--border-gold);
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||
}
|
||
.spec-header-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.spec-header-icon {
|
||
font-size: 24px;
|
||
width: 32px;
|
||
height: 32px;
|
||
background: #0d0a07;
|
||
border: 1px solid var(--border-dim);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.spec-title-box {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.spec-title {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--gold-bright);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.spec-sub {
|
||
font-size: 10px;
|
||
color: var(--text-dim);
|
||
}
|
||
.spec-grid-4 {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 6px;
|
||
background: #0b0906;
|
||
padding: 6px 8px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--border-dim);
|
||
}
|
||
.spec-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
.spec-item-label {
|
||
font-size: 9px;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
}
|
||
.spec-item-val {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--gold-light);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.quest-drop-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #14100c;
|
||
border: 1px solid var(--border-dim);
|
||
border-radius: 4px;
|
||
padding: 6px 10px;
|
||
}
|
||
.quest-drop-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 11px;
|
||
color: var(--gold-light);
|
||
cursor: pointer;
|
||
}
|
||
.quest-banner {
|
||
background: linear-gradient(90deg, #473210 0%, #261b0a 100%);
|
||
border: 1px solid var(--gold-primary);
|
||
color: #ffe49e;
|
||
padding: 5px 8px;
|
||
border-radius: 4px;
|
||
font-size: 10px;
|
||
display: none;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* 快速筹码 Chips (Players / MF) */
|
||
.chips-row {
|
||
display: flex;
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.chip-btn {
|
||
background: #120e0a;
|
||
border: 1px solid var(--border-dim);
|
||
color: var(--text-dim);
|
||
font-size: 11px;
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.12s ease;
|
||
}
|
||
.chip-btn:hover {
|
||
border-color: var(--border-gold);
|
||
color: var(--gold-light);
|
||
}
|
||
.chip-btn.active {
|
||
background: #352617;
|
||
border-color: var(--gold-primary);
|
||
color: var(--gold-bright);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.form-grid-2 {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 8px;
|
||
}
|
||
.form-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
}
|
||
.form-field label {
|
||
font-size: 10px;
|
||
color: var(--text-dim);
|
||
}
|
||
.form-field input, .form-field select {
|
||
background: #0d0a07;
|
||
border: 1px solid var(--border-dim);
|
||
color: var(--gold-light);
|
||
padding: 5px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
}
|
||
.form-field input:focus, .form-field select:focus {
|
||
outline: none;
|
||
border-color: var(--gold-primary);
|
||
}
|
||
|
||
/* 按钮系统 */
|
||
.btn {
|
||
background: var(--btn-bg);
|
||
border: 1px solid var(--border-dim);
|
||
color: var(--gold-light);
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.btn:hover:not(:disabled) {
|
||
background: var(--btn-hover);
|
||
border-color: var(--gold-primary);
|
||
color: #fff;
|
||
}
|
||
.btn:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
.btn-gold {
|
||
background: linear-gradient(180deg, #45321d 0%, #2a1e12 100%);
|
||
border: 1px solid var(--gold-primary);
|
||
color: var(--gold-bright);
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
|
||
}
|
||
.btn-gold:hover:not(:disabled) {
|
||
background: linear-gradient(180deg, #574026 0%, #3a2a19 100%);
|
||
color: #fff;
|
||
}
|
||
.btn-danger { color: #ff7777; border-color: #662222; }
|
||
.btn-danger:hover:not(:disabled) { background: #3b1111; border-color: #aa3333; color: #fff; }
|
||
|
||
/* 右侧主视口 Main Area */
|
||
#main-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: var(--bg-main);
|
||
}
|
||
|
||
/* 顶层视图切换 Tabs (Maxroll Style) */
|
||
.view-tabs-header {
|
||
height: 40px;
|
||
background: #110d0a;
|
||
border-bottom: 1px solid var(--border-dim);
|
||
display: flex;
|
||
align-items: stretch;
|
||
padding: 0 16px;
|
||
gap: 8px;
|
||
}
|
||
.view-tab-btn {
|
||
background: transparent;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
color: var(--text-dim);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
padding: 0 14px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.view-tab-btn:hover {
|
||
color: var(--gold-light);
|
||
background: rgba(200, 161, 90, 0.05);
|
||
}
|
||
.view-tab-btn.active {
|
||
color: var(--gold-bright);
|
||
border-bottom: 2px solid var(--gold-primary);
|
||
background: rgba(200, 161, 90, 0.09);
|
||
}
|
||
|
||
/* 核心统计横幅 Status Bar */
|
||
.target-status-bar {
|
||
background: #16110c;
|
||
border-bottom: 1px solid var(--border-dim);
|
||
padding: 8px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.target-status-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.status-target-pill {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: #0d0a07;
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--border-gold);
|
||
}
|
||
.status-label {
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
}
|
||
.status-value {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--gold-bright);
|
||
}
|
||
.target-metrics-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.metric-mini {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
.metric-mini-label {
|
||
font-size: 9px;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
}
|
||
.metric-mini-val {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--gold-light);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* 掉落分类 Tabs 导航 (Maxroll Category Chips) */
|
||
.category-nav-bar {
|
||
background: #130f0a;
|
||
border-bottom: 1px solid var(--border-dim);
|
||
padding: 6px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
overflow-x: auto;
|
||
}
|
||
.item-cat-tab {
|
||
background: #1a140f;
|
||
border: 1px solid var(--border-dim);
|
||
color: var(--text-dim);
|
||
padding: 4px 10px;
|
||
border-radius: 14px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
transition: all 0.12s ease;
|
||
}
|
||
.item-cat-tab:hover {
|
||
border-color: var(--border-gold);
|
||
color: var(--gold-light);
|
||
}
|
||
.item-cat-tab.active {
|
||
background: #3a2a19;
|
||
border-color: var(--gold-primary);
|
||
color: var(--gold-bright);
|
||
}
|
||
.cat-count {
|
||
background: #0d0a07;
|
||
padding: 1px 5px;
|
||
border-radius: 8px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: var(--gold-light);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.item-cat-tab.active .cat-count {
|
||
background: #14100c;
|
||
color: var(--gold-bright);
|
||
border: 1px solid var(--border-gold);
|
||
}
|
||
|
||
/* 工具栏 Toolbar (搜索 / 排序 / 导出) */
|
||
.drop-toolbar {
|
||
padding: 8px 16px;
|
||
background: #110d09;
|
||
border-bottom: 1px solid var(--border-dim);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.toolbar-search {
|
||
flex: 1;
|
||
max-width: 420px;
|
||
position: relative;
|
||
}
|
||
.toolbar-search input {
|
||
width: 100%;
|
||
background: #0a0805;
|
||
border: 1px solid var(--border-dim);
|
||
color: var(--gold-light);
|
||
padding: 6px 12px 6px 28px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
}
|
||
.toolbar-search input:focus {
|
||
outline: none;
|
||
border-color: var(--gold-primary);
|
||
}
|
||
.toolbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 视口内容容器 */
|
||
.view-pane {
|
||
display: none;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 12px 16px;
|
||
}
|
||
.view-pane.active {
|
||
display: block;
|
||
}
|
||
|
||
/* Maxroll 风格掉落卡片 (Maxroll Item Drop Cards) */
|
||
.cards-list-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding-bottom: 40px;
|
||
}
|
||
.maxroll-item-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-dim);
|
||
border-radius: 5px;
|
||
padding: 8px 14px;
|
||
display: grid;
|
||
grid-template-columns: 280px 1fr 180px;
|
||
align-items: center;
|
||
gap: 16px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.maxroll-item-card:hover {
|
||
background: var(--bg-card-hover);
|
||
border-color: #4a3a2a;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 3px 8px rgba(0,0,0,0.4);
|
||
}
|
||
|
||
/* 品质特定边框与背景 */
|
||
.maxroll-item-card.tag-unique {
|
||
border-left: 3px solid var(--q-unique);
|
||
background: linear-gradient(90deg, var(--q-unique-bg) 0%, var(--bg-card) 40%);
|
||
}
|
||
.maxroll-item-card.tag-set {
|
||
border-left: 3px solid var(--q-set);
|
||
background: linear-gradient(90deg, var(--q-set-bg) 0%, var(--bg-card) 40%);
|
||
}
|
||
.maxroll-item-card.tag-rune {
|
||
border-left: 3px solid var(--q-rune);
|
||
background: linear-gradient(90deg, var(--q-rune-bg) 0%, var(--bg-card) 40%);
|
||
}
|
||
.maxroll-item-card.tag-gem {
|
||
border-left: 3px solid var(--q-gem);
|
||
background: linear-gradient(90deg, var(--q-gem-bg) 0%, var(--bg-card) 40%);
|
||
}
|
||
.maxroll-item-card.tag-misc {
|
||
border-left: 3px solid #ffd700;
|
||
}
|
||
.maxroll-item-card.tag-base {
|
||
border-left: 3px solid #8c8273;
|
||
}
|
||
|
||
/* 卡片左部：Rank、品质徽章、名称、代码 */
|
||
.card-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
}
|
||
.card-rank {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--text-muted);
|
||
width: 24px;
|
||
text-align: center;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.card-quality-tag {
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
padding: 2px 5px;
|
||
border-radius: 3px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
flex-shrink: 0;
|
||
}
|
||
.card-quality-tag.tag-unique { background: #4a3416; color: var(--q-unique); border: 1px solid #7a5420; }
|
||
.card-quality-tag.tag-set { background: #164019; color: var(--q-set); border: 1px solid #236928; }
|
||
.card-quality-tag.tag-rune { background: #4d2600; color: var(--q-rune); border: 1px solid #804000; }
|
||
.card-quality-tag.tag-gem { background: #3d1c47; color: var(--q-gem); border: 1px solid #6b327d; }
|
||
.card-quality-tag.tag-misc { background: #383116; color: #ffd700; border: 1px solid #635724; }
|
||
.card-quality-tag.tag-base { background: #26211c; color: var(--text-dim); border: 1px solid #423b33; }
|
||
|
||
.card-title-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
min-width: 0;
|
||
}
|
||
.card-main-title {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.card-sub-meta {
|
||
font-size: 10px;
|
||
color: var(--text-dim);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.item-code-badge {
|
||
background: #0b0906;
|
||
padding: 1px 4px;
|
||
border-radius: 3px;
|
||
border: 1px solid var(--border-dim);
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
color: var(--gold-primary);
|
||
}
|
||
|
||
/* 卡片中部：相对几率视觉条 */
|
||
.card-center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
.odds-bar-track {
|
||
background: #0a0805;
|
||
border: 1px solid var(--border-dim);
|
||
border-radius: 3px;
|
||
height: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.odds-bar-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #6e5428 0%, #c8a15a 100%);
|
||
border-radius: 2px;
|
||
transition: width 0.2s ease;
|
||
}
|
||
.odds-bar-fill.tag-unique { background: linear-gradient(90deg, #7a5522 0%, #c8a15a 100%); }
|
||
.odds-bar-fill.tag-set { background: linear-gradient(90deg, #1e5924 0%, #00e600 100%); }
|
||
.odds-bar-fill.tag-rune { background: linear-gradient(90deg, #733a00 0%, #ff8c00 100%); }
|
||
.odds-bar-fill.tag-gem { background: linear-gradient(90deg, #572566 0%, #d880ff 100%); }
|
||
.odds-bar-fill.tag-misc { background: linear-gradient(90deg, #594d19 0%, #ffd700 100%); }
|
||
|
||
.odds-bar-labels {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 10px;
|
||
color: var(--text-dim);
|
||
}
|
||
.odds-pct {
|
||
font-weight: 700;
|
||
color: var(--gold-light);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.odds-expected {
|
||
color: var(--text-muted);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* 卡片右部：大号几率比药丸与平均轮数 */
|
||
.card-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 3px;
|
||
}
|
||
.odds-ratio-pill {
|
||
background: #1a140f;
|
||
border: 1px solid var(--border-gold);
|
||
color: var(--gold-bright);
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
padding: 3px 10px;
|
||
border-radius: 12px;
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: 0.02em;
|
||
white-space: nowrap;
|
||
}
|
||
.odds-ratio-pill.tag-unique { border-color: var(--q-unique); color: #ffdca3; }
|
||
.odds-ratio-pill.tag-set { border-color: var(--q-set); color: #99ff99; }
|
||
.odds-ratio-pill.tag-rune { border-color: var(--q-rune); color: #ffbe80; }
|
||
.odds-ratio-pill.tag-gem { border-color: var(--q-gem); color: #f0beff; }
|
||
.runs-estimate {
|
||
font-size: 10px;
|
||
color: var(--text-dim);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* 模拟进度条 */
|
||
.sim-progress-box {
|
||
background: #15110c;
|
||
border: 1px solid var(--border-gold);
|
||
border-radius: 6px;
|
||
padding: 10px 14px;
|
||
margin-bottom: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.sim-progress-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
.progress-track {
|
||
background: #0a0805;
|
||
border: 1px solid var(--border-dim);
|
||
height: 10px;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #7a5420 0%, #eecf87 100%);
|
||
width: 0%;
|
||
transition: width 0.1s linear;
|
||
}
|
||
|
||
/* 模拟统计表格 (品质直方图) */
|
||
.quality-table-box {
|
||
background: #14100c;
|
||
border: 1px solid var(--border-dim);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
}
|
||
.quality-table-box table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 11px;
|
||
}
|
||
.quality-table-box th {
|
||
background: #1a140f;
|
||
padding: 6px 10px;
|
||
text-align: left;
|
||
color: var(--text-dim);
|
||
border-bottom: 1px solid var(--border-dim);
|
||
}
|
||
.quality-table-box td {
|
||
padding: 5px 10px;
|
||
border-bottom: 1px solid #1c1712;
|
||
}
|
||
|
||
/* 反查视图表格 */
|
||
.reverse-table-box {
|
||
background: #14100c;
|
||
border: 1px solid var(--border-dim);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
.reverse-table-box table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 11px;
|
||
}
|
||
.reverse-table-box th {
|
||
background: #1c1611;
|
||
padding: 8px 10px;
|
||
color: var(--text-dim);
|
||
border-bottom: 1px solid var(--border-dim);
|
||
text-align: left;
|
||
}
|
||
.reverse-table-box td {
|
||
padding: 6px 10px;
|
||
border-bottom: 1px solid #1c1712;
|
||
}
|
||
.reverse-table-box tr:hover td {
|
||
background: rgba(200, 161, 90, 0.05);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航 Header -->
|
||
<header>
|
||
<h1>
|
||
<span>💎</span>
|
||
<span>暗黑破坏神 2 · 掉落计算器与精确概率表</span>
|
||
<span class="brand-badge">Maxroll 风格</span>
|
||
</h1>
|
||
<nav>
|
||
<a href="/acts.html">🎮 战役漫步 (acts.html)</a>
|
||
<a href="/arena.html">⚔️ 战斗竞技场 (arena.html)</a>
|
||
<a href="/boss.html">💀 幕首领击杀 (boss.html)</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<div id="app-container">
|
||
<!-- 左侧栏：怪物选择器与全局参数 (Maxroll Monster Selector) -->
|
||
<aside class="sidebar">
|
||
<!-- 1. 难度切换 -->
|
||
<div class="sidebar-section">
|
||
<div class="section-headline">
|
||
<span>🗺️ 游戏难度 (Difficulty)</span>
|
||
</div>
|
||
<div class="diff-segmented-control">
|
||
<button class="diff-btn" data-diff="normal">🌱 普通 (Normal)</button>
|
||
<button class="diff-btn" data-diff="nightmare">⚡ 噩梦 (Nightmare)</button>
|
||
<button class="diff-btn active" data-diff="hell">🔥 地狱 (Hell)</button>
|
||
</div>
|
||
<!-- 隐藏的原生 select 保持同步 -->
|
||
<select id="difficulty" style="display: none;">
|
||
<option value="normal">普通 (Normal)</option>
|
||
<option value="nightmare">噩梦 (Nightmare)</option>
|
||
<option value="hell" selected>地狱 (Hell)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 2. 怪物选择器 -->
|
||
<div class="sidebar-section">
|
||
<div class="section-headline">
|
||
<span>👾 怪物选择器 (Monster Selector)</span>
|
||
</div>
|
||
|
||
<!-- 怪物分类 Chips -->
|
||
<div class="monster-cat-row">
|
||
<button class="monster-cat-chip active" data-cat="all">🌟 全部</button>
|
||
<button class="monster-cat-chip" data-cat="boss">👑 幕首领</button>
|
||
<button class="monster-cat-chip" data-cat="superunique">⭐ 固定暗金</button>
|
||
<button class="monster-cat-chip" data-cat="farm">🌾 刷宝圣地</button>
|
||
<button class="monster-cat-chip" data-cat="chest">📦 超级宝箱</button>
|
||
<button class="monster-cat-chip" data-cat="normal">⚔️ 常规怪物</button>
|
||
</div>
|
||
|
||
<!-- 实时怪物搜索框 -->
|
||
<div class="search-box-wrapper">
|
||
<span class="search-box-icon">🔍</span>
|
||
<input type="search" id="monster-search-input" placeholder="输入怪物名称、首领或场景 (如 巴尔, 皮叔, 牛关)..." />
|
||
</div>
|
||
|
||
<!-- 怪物滚动列表 -->
|
||
<div class="monster-list-container" id="monster-list">
|
||
<!-- 由 renderMonsterList() 动态填充 -->
|
||
</div>
|
||
|
||
<!-- 兼容旧版的下拉框与输入框 (默认折叠) -->
|
||
<details style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">
|
||
<summary style="cursor: pointer; padding: 2px 0;">⚙️ 高级自定义 TC (Custom TC)</summary>
|
||
<div style="display: flex; flex-direction: column; gap: 6px; padding-top: 6px;">
|
||
<select id="tc-preset" style="width: 100%; display: none;">
|
||
<option value="Baal (H)" selected>Baal (H)</option>
|
||
</select>
|
||
<div style="display: flex; gap: 6px;">
|
||
<input type="text" id="tc-input" value="Baal (H)" placeholder="直接输入 TC 名称，例如 Baal (H)" style="flex: 1;" />
|
||
<button class="btn" id="btn-apply-custom-tc">应用</button>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<!-- 3. 选定怪物规格面板 (Monster Spec Card) -->
|
||
<div class="sidebar-section">
|
||
<div class="section-headline">
|
||
<span>📋 怪物规格与掉落属性 (Monster Spec)</span>
|
||
</div>
|
||
|
||
<div class="monster-spec-card">
|
||
<div class="spec-header-row">
|
||
<div class="spec-header-icon" id="monster-card-icon">👿</div>
|
||
<div class="spec-title-box">
|
||
<div class="spec-title" id="monster-card-title">巴尔 (Baal)</div>
|
||
<div class="spec-sub">
|
||
<span id="monster-card-badge">第 5 幕 · 幕关底首领</span> · <span id="monster-card-area">毁灭王座 / 世界之石要塞</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-grid-4">
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">mlvl 等级</span>
|
||
<span class="spec-item-val" id="monster-card-mlvl">99</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">Picks 次数</span>
|
||
<span class="spec-item-val" id="monster-card-picks">7 次</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">NoDrop 率</span>
|
||
<span class="spec-item-val" id="monster-card-nodrop">24.3%</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-item-label">当前 TC</span>
|
||
<span class="spec-item-val" id="monster-card-tc" style="font-size: 10px;">Baal (H)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Boss 首杀 / Bug 首杀开关 -->
|
||
<div class="quest-drop-box">
|
||
<label class="quest-drop-label">
|
||
<input type="checkbox" id="quest-drop-toggle" />
|
||
<span>👑 Boss 首次击杀 / Bug 首杀 (Quest Drop)</span>
|
||
</label>
|
||
<!-- 兼容旧版 ID -->
|
||
<input type="checkbox" id="quest-drop" style="display: none;" />
|
||
</div>
|
||
|
||
<div class="quest-banner" id="quest-drop-banner">
|
||
<span>✨</span>
|
||
<span><strong>首杀已激活</strong>：NoDrop 已清零，必定掉落高品质装备！</span>
|
||
</div>
|
||
|
||
<div style="font-size: 10px; color: var(--text-dim); line-height: 1.4;" id="monster-card-desc">
|
||
第五幕终极世界之石关底首领，极高品质装备与大号符文产出。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. 掉落人数与寻宝率 MF -->
|
||
<div class="sidebar-section">
|
||
<div class="section-headline">
|
||
<span>👥 掉落人数与魔法寻宝率 (MF)</span>
|
||
</div>
|
||
|
||
<div class="form-field">
|
||
<label>游戏总人数 (/players N)</label>
|
||
<div class="chips-row">
|
||
<button class="chip-btn player-chip active" data-players="1">1P (单人)</button>
|
||
<button class="chip-btn player-chip" data-players="3">3P</button>
|
||
<button class="chip-btn player-chip" data-players="5">5P</button>
|
||
<button class="chip-btn player-chip" data-players="7">7P</button>
|
||
<button class="chip-btn player-chip" data-players="8">8P (满人)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid-2">
|
||
<div class="form-field">
|
||
<label>游戏房间人数</label>
|
||
<input type="number" id="game-players" min="1" max="8" value="1" />
|
||
</div>
|
||
<div class="form-field">
|
||
<label>同队附近人数</label>
|
||
<input type="number" id="party-players" min="1" max="8" value="1" />
|
||
</div>
|
||
</div>
|
||
|
||
<div style="font-size: 10px; color: var(--gold-primary);" id="effective-players-hint">
|
||
当前有效掉落人数: 1 人 (NoDrop 缩减已生效)
|
||
</div>
|
||
|
||
<div class="form-field" style="margin-top: 4px;">
|
||
<label>魔法寻宝率 MF % (Magic Find)</label>
|
||
<div class="chips-row">
|
||
<button class="chip-btn mf-chip active" data-mf="0">0%</button>
|
||
<button class="chip-btn mf-chip" data-mf="100">100%</button>
|
||
<button class="chip-btn mf-chip" data-mf="200">200%</button>
|
||
<button class="chip-btn mf-chip" data-mf="300">300%</button>
|
||
<button class="chip-btn mf-chip" data-mf="500">500%</button>
|
||
</div>
|
||
<input type="number" id="magic-find" min="0" max="2000" value="0" style="margin-top: 4px;" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. 蒙特卡洛抽样模拟配置 -->
|
||
<div class="sidebar-section">
|
||
<div class="section-headline">
|
||
<span>🎲 蒙特卡洛掉落模拟器 (Simulation)</span>
|
||
</div>
|
||
|
||
<div class="form-grid-2">
|
||
<div class="form-field">
|
||
<label>模拟轮数 (Runs N)</label>
|
||
<select id="sim-runs">
|
||
<option value="1000">1,000 轮</option>
|
||
<option value="10000" selected>10,000 轮</option>
|
||
<option value="100000">100,000 轮</option>
|
||
<option value="1000000">1,000,000 轮 (百万)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-field">
|
||
<label>随机种子 (Seed, 可选)</label>
|
||
<input type="number" id="sim-seed" placeholder="随机 (留空)" />
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 6px; margin-top: 4px;">
|
||
<button class="btn btn-gold" id="btn-start" style="flex: 1;">▶ 开始模拟抽样</button>
|
||
<button class="btn" id="btn-pause" disabled>⏸ 暂停</button>
|
||
<button class="btn btn-danger" id="btn-stop" disabled>⏹ 停止</button>
|
||
</div>
|
||
|
||
<button class="btn" id="btn-calc-exact" style="width: 100%; margin-top: 2px;">📐 刷新精确理论概率表</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右侧主区域：Maxroll 风格掉落列表与全景分析 -->
|
||
<main id="main-area">
|
||
<!-- 顶层视图切换 Tabs (Maxroll Style) -->
|
||
<div class="view-tabs-header">
|
||
<button class="view-tab-btn active" data-view="exact">📐 精确掉落几率表 (Exact Odds)</button>
|
||
<button class="view-tab-btn" data-view="sim">🎲 蒙特卡洛实测模拟 (Monte Carlo Sim)</button>
|
||
<button class="view-tab-btn" data-view="reverse">🔍 全局物品掉落反查 (Reverse TC Lookup)</button>
|
||
</div>
|
||
|
||
<!-- 目标与状态实时横幅 -->
|
||
<div class="target-status-bar">
|
||
<div class="target-status-left">
|
||
<div class="status-target-pill">
|
||
<span class="status-label">目标:</span>
|
||
<span class="status-value" id="stat-target-name">巴尔 (Baal)</span>
|
||
</div>
|
||
<div class="status-target-pill">
|
||
<span class="status-label">TC:</span>
|
||
<span class="status-value" id="stat-current-tc">Baal (H)</span>
|
||
</div>
|
||
<div class="status-target-pill">
|
||
<span class="status-label">有效人数:</span>
|
||
<span class="status-value" id="stat-eff-players">1 P</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="target-metrics-group">
|
||
<div class="metric-mini">
|
||
<span class="metric-mini-label">可掉落叶子</span>
|
||
<span class="metric-mini-val" id="stat-total-items">0 种</span>
|
||
</div>
|
||
<div class="metric-mini">
|
||
<span class="metric-mini-label">NoDrop 概率</span>
|
||
<span class="metric-mini-val" id="stat-nodrop-pct">0.0%</span>
|
||
</div>
|
||
<div class="metric-mini">
|
||
<span class="metric-mini-label">期望件数/击杀</span>
|
||
<span class="metric-mini-val" id="stat-avg-drops">0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 掉落多维分类 Tabs 导航 (Maxroll Category Chips with Live Counts) -->
|
||
<div class="category-nav-bar">
|
||
<button class="item-cat-tab active" data-cat="all">🌟 全部 <span class="cat-count">0</span></button>
|
||
<button class="item-cat-tab" data-cat="unique">⭐ 暗金装备 <span class="cat-count">0</span></button>
|
||
<button class="item-cat-tab" data-cat="set">🌿 绿色套装 <span class="cat-count">0</span></button>
|
||
<button class="item-cat-tab" data-cat="rune">🔥 符文宝石 <span class="cat-count">0</span></button>
|
||
<button class="item-cat-tab" data-cat="base">🛡️ 装备底模 <span class="cat-count">0</span></button>
|
||
<button class="item-cat-tab" data-cat="charm_gem">💎 护身符/珠宝 <span class="cat-count">0</span></button>
|
||
<button class="item-cat-tab" data-cat="misc">🧪 杂项/钥匙/精华 <span class="cat-count">0</span></button>
|
||
</div>
|
||
|
||
<!-- 检索与排序工具栏 -->
|
||
<div class="drop-toolbar">
|
||
<div class="toolbar-search">
|
||
<span class="search-box-icon" style="top: 8px;">🔍</span>
|
||
<input type="search" id="item-search-input" placeholder="搜索物品名称、代码或底模 (如 军帽, uap, 贝, 30#, 幻化, 权冠)..." />
|
||
</div>
|
||
|
||
<div class="toolbar-actions">
|
||
<label style="font-size: 11px; color: var(--text-dim);">排序依据:</label>
|
||
<select id="item-sort-select" style="background: #0d0a07; border: 1px solid var(--border-dim); color: var(--gold-light); padding: 4px 8px; border-radius: 4px; font-size: 11px;">
|
||
<option value="odds-desc" selected>概率从高到低 (Highest Odds)</option>
|
||
<option value="odds-asc">概率从低到高 (Rarest First)</option>
|
||
<option value="qlvl">底模 qlvl 等级 (Item Level)</option>
|
||
<option value="quality">物品品质类别 (Quality Tier)</option>
|
||
<option value="name">物品名称拼音 (Name A-Z)</option>
|
||
</select>
|
||
<button class="btn" id="btn-export-csv">📥 导出 CSV 报表</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视口 1: 精确掉落几率表 (Maxroll Drop Card List) -->
|
||
<div class="view-pane active" id="view-exact">
|
||
<div id="exact-tc-info" style="display: none;"></div>
|
||
<div class="cards-list-container" id="exact-items-container">
|
||
<!-- 由 renderExactDropCards() 渲染高质感 Maxroll 风格掉落卡片 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视口 2: 蒙特卡洛实测模拟 (Simulated Drops & Quality Histogram) -->
|
||
<div class="view-pane" id="view-sim">
|
||
<!-- 模拟进度条 -->
|
||
<div class="sim-progress-box">
|
||
<div class="sim-progress-header">
|
||
<span id="sim-progress-text">就绪：点击左侧「开始模拟抽样」运行 Monte Carlo 模拟</span>
|
||
<span style="color: var(--text-muted);">Non-blocking chunked loop</span>
|
||
</div>
|
||
<div class="progress-track">
|
||
<div class="progress-fill" id="sim-progress-bar"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 品质分布直方图 -->
|
||
<div class="quality-table-box">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 200px;">品质类别 (Quality Tier)</th>
|
||
<th style="width: 120px;">实测掉落件数 (Count)</th>
|
||
<th style="width: 100px;">掉落占比 (%)</th>
|
||
<th>分布直方图 (Histogram)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="quality-tbody">
|
||
<tr><td colspan="4" style="text-align: center; color: var(--text-dim); padding: 16px;">暂无模拟数据</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 模拟掉落卡片列表 -->
|
||
<div class="cards-list-container" id="sim-items-container">
|
||
<div style="text-align: center; color: var(--text-dim); padding: 40px;">暂无模拟结果，请点击左侧「开始模拟抽样」运行抽样</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视口 3: 全局物品掉落反查 (Reverse TC Lookup) -->
|
||
<div class="view-pane" id="view-reverse">
|
||
<div class="search-box-wrapper" style="margin-bottom: 12px;">
|
||
<span class="search-box-icon">🔍</span>
|
||
<input type="search" id="reverse-search-input" placeholder="输入物品代码或名称反查全暗黑2掉落源 (例如 Shako, uap, r33, cap, ber)..." style="font-size: 13px; padding: 8px 12px 8px 30px;" />
|
||
</div>
|
||
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||
<span style="font-size: 11px; color: var(--gold-primary); font-weight: 600;">反查匹配的 TreasureClass 掉落源</span>
|
||
<span id="reverse-match-count" style="font-size: 11px; color: var(--text-dim);">0 项匹配</span>
|
||
</div>
|
||
|
||
<div class="reverse-table-box">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 220px;">所属掉落表 (Treasure Class)</th>
|
||
<th style="width: 200px;">匹配物品 (Matched Item)</th>
|
||
<th style="width: 70px;">挑选次数</th>
|
||
<th style="width: 110px;">单次概率 (Single)</th>
|
||
<th style="width: 120px;">综合概率 (Compound)</th>
|
||
<th style="width: 140px;">掉落几率比 (1 in X Odds)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="reverse-tbody">
|
||
<tr><td colspan="6" style="text-align: center; color: var(--text-dim); padding: 24px;">在上方搜索框输入物品代码或名称（例如 Shako、uap、r33、cap）反查可掉落的 TC 列表</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 逻辑脚本加载 -->
|
||
<script type="module" src="/src/loot.ts"></script>
|
||
</body>
|
||
</html>
|