diff --git a/world.html b/world.html index e22b96c..48d7ba6 100644 --- a/world.html +++ b/world.html @@ -245,42 +245,203 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa .toolbar-toggle{ background:rgba(139,92,246,.2); border-color:rgba(139,92,246,.5); color:#c4b5fd; } .toolbar-toggle:hover{ background:linear-gradient(135deg, rgba(139,92,246,.4), rgba(74,175,255,.3)); border-color:rgba(139,92,246,.7); color:#fff; } -/* ===== 任务侧栏（左侧固定面板，独立于通用 modal） ===== */ +/* ===== 任务侧栏：赛博蓝粉霓虹风格（蓝为主 + 浅粉点缀） ===== */ +@keyframes tsp-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} } +@keyframes tsp-flicker{ 0%,100%{opacity:1} 92%{opacity:1} 94%{opacity:.55} 96%{opacity:1} } .task-side-panel{ position: fixed; left: max(14px, env(safe-area-inset-left)); top: calc(58px + env(safe-area-inset-top) + 12px + 100px); - width: 320px; + width: 340px; /* 高度限制：可用高度(减 topBar58 + bottomBar72 + padding24 + 安全区)再减半，避免盖住聊天框 */ max-height: calc((100vh - 58px - 72px - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2); z-index: 250; /* 高于 #microView(200)，进入微观世界也能看到；低于 #dataPanel(260) 与 #appModal(400) */ display:flex; flex-direction: column; - background: linear-gradient(180deg, rgba(17,23,42,.96), rgba(10,14,26,.96)); - border: 1px solid rgba(139,92,246,.35); border-radius: 14px; - box-shadow: 0 12px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); - backdrop-filter: blur(8px); - font-size: 13px; color: #cfd5ea; + color: #ffd4e8; + font-family: 'Consolas','Courier New','Microsoft YaHei',monospace; + /* 暗底 + 蓝粉霓虹网格（蓝为主、浅粉点缀） */ + background: + linear-gradient(rgba(43,157,255,.05) 1px, transparent 1px) 0 0/100% 24px, + linear-gradient(90deg, rgba(255,158,209,.05) 1px, transparent 1px) 0 0/24px 100%, + radial-gradient(ellipse at 50% 0, rgba(43,157,255,.10), transparent 65%), + linear-gradient(180deg, #070a12 0%, #030408 100%); + border: 1px solid rgba(43,157,255,.45); + border-radius: 10px; + box-shadow: + 0 0 0 1px rgba(0,0,0,.6), + 0 0 22px rgba(43,157,255,.18), + 0 0 14px rgba(255,158,209,.12), + 0 18px 50px rgba(0,0,0,.7), + inset 0 0 30px rgba(0,0,0,.6); + overflow: hidden; +} +/* 扫描线叠加 */ +.task-side-panel::before{ + content:''; + position:absolute; inset:0; pointer-events:none; z-index:6; + background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); + opacity:.55; mix-blend-mode: overlay; } .task-side-panel[hidden]{ display:none !important; } + .tsp-head{ + position:relative; z-index:2; display: flex; align-items: center; justify-content: space-between; - padding: 12px 14px; border-bottom: 1px solid rgba(139,92,246,.22); flex: 0 0 auto; + padding: 12px 16px; + background: linear-gradient(90deg, rgba(43,157,255,.14), rgba(255,158,209,.05) 60%, transparent); + border-bottom: 1px solid rgba(43,157,255,.35); + flex: 0 0 auto; } -.tsp-title{ font-size: 15px; font-weight: 700; color: #fff; margin: 0; letter-spacing: .5px; } +.tsp-title{ + font-family: 'Consolas','Courier New',monospace; + font-size: 16px; font-weight: 700; letter-spacing: 1px; + color: #5bc4ff; + text-shadow: 0 0 8px rgba(43,157,255,.6); + margin: 0; + animation: tsp-flicker 4s infinite; +} +.tsp-title::before{ content:'> '; color: #2b9dff; } +.tsp-title::after{ content:'_'; margin-left:2px; color:#2b9dff; animation: tsp-blink 1s steps(1) infinite; } .tsp-close{ - width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); - background: rgba(255,80,80,.12); color: #ffaaaa; - font-size: 14px; font-weight: 700; cursor: pointer; + position:relative; z-index:2; + width: 28px; height: 28px; border-radius: 6px; + border: 1px solid #ff3b3b; + background: radial-gradient(circle at 30% 30%, #ff6b6b, #b81d1d 60%, #5a0c0c); + color: #fff; font-size: 15px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; - transition: background .15s, transform .12s; + cursor: pointer; text-shadow: 0 1px 2px #000; + box-shadow: 0 0 10px rgba(255,60,60,.35), inset 0 1px 0 rgba(255,255,255,.25); + transition: transform .12s, filter .15s, box-shadow .15s; } -.tsp-close:hover{ background: rgba(255,80,80,.28); color: #fff; transform: scale(1.06); } -.tsp-close:active{ transform: scale(.94); } -.tsp-body{ flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 14px; scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.35) rgba(255,255,255,.04); } -.tsp-body::-webkit-scrollbar{ width: 6px; } -.tsp-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 4px; } -.tsp-body::-webkit-scrollbar-thumb{ background: rgba(139,92,246,.35); border-radius: 4px; } -.tsp-body::-webkit-scrollbar-thumb:hover{ background: rgba(139,92,246,.55); } +.tsp-close:hover{ transform: scale(1.08); filter: brightness(1.15); box-shadow: 0 0 14px rgba(255,60,60,.6); } +.tsp-close:active{ transform: scale(.95); } + +.tsp-body{ + position:relative; z-index:2; + flex: 1 1 auto; overflow-y: auto; + padding: 10px 14px 14px; + scrollbar-width: thin; + scrollbar-color: #2b9dff #070a12; +} +.tsp-body::-webkit-scrollbar{ width: 8px; } +.tsp-body::-webkit-scrollbar-track{ background: #070a12; border-radius: 4px; border: 1px solid rgba(43,157,255,.2); } +.tsp-body::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,#2b9dff,#ff9ed1); border-radius: 4px; border: 1px solid rgba(43,157,255,.3); } +.tsp-body::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg,#6db8ff,#ffb0d8); } + +.chapter-title{ + margin: 14px 0 8px; padding: 5px 0; + text-align: left; + font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #5bc4ff; + text-shadow: 0 0 8px rgba(43,157,255,.45); + border-left: 3px solid #2b9dff; + background: linear-gradient(90deg, rgba(43,157,255,.10), transparent); + padding-left: 10px; +} +.chapter-title::before{ content: '// '; color: #ff9ed1; opacity:.8; } + +.task-card{ + position: relative; + margin: 10px 0; padding: 12px 14px; + color: #ffd4e8; + background: linear-gradient(160deg, rgba(10,16,24,.92), rgba(8,6,18,.92)); + border: 1px solid rgba(43,157,255,.30); + border-left: 3px solid #2b9dff; + border-radius: 8px; + box-shadow: + 0 4px 14px rgba(0,0,0,.5), + inset 0 0 18px rgba(43,157,255,.05); + overflow: hidden; + transition: transform .18s, box-shadow .18s, border-color .18s; +} +.task-card:hover{ + transform: translateY(-2px); + border-color: rgba(43,157,255,.6); + box-shadow: 0 8px 22px rgba(0,0,0,.55), inset 0 0 22px rgba(43,157,255,.10), 0 0 14px rgba(43,157,255,.18), 0 0 10px rgba(255,158,209,.10); +} +.task-card.locked{ opacity:.5; filter: grayscale(.6); } +.task-card.done{ border-left-color:#5bc4ff; } +.task-card.done::after{ + content:'✓'; + position:absolute; right:8px; top:6px; + font-size: 42px; font-weight: 900; color: #2b9dff; + opacity:.14; pointer-events:none; +} + +.task-card-header{ + display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; +} +.task-title{ + font-family: 'Consolas','Courier New',monospace; + font-size: 14px; font-weight: 700; color: #ffffff; letter-spacing: .3px; + text-shadow: 0 0 6px rgba(43,157,255,.3); +} +.task-title::before{ content:''; } +.task-state{ + flex-shrink: 0; + font-size: 11px; font-weight: 700; + padding: 2px 8px; border-radius: 4px; + border: 1px solid currentColor; + box-shadow: 0 0 8px currentColor; +} +.task-state.state-done{ color:#5bc4ff; background:rgba(43,157,255,.12); } +.task-state.state-claimable{ color:#ff9ed1; background:rgba(255,158,209,.12); } +.task-state.state-in_progress{ color:#9aa7ff; background:rgba(85,102,255,.12); } +.task-state.state-locked{ color:#6b6b6b; background:rgba(255,255,255,.04); box-shadow:none; } + +.task-desc{ + margin: 6px 0 8px; + font-size: 12px; line-height: 1.55; color: #a8c5ff; +} + +.task-objective{ margin: 6px 0; } +.task-obj-meta{ + display: flex; justify-content: space-between; align-items: center; + font-size: 11px; color: #b8d4ff; margin-bottom: 3px; +} +.task-obj-meta .hint{ color: #6a7fb8; } + +.task-progress{ + height: 8px; + background: #070a12; + border-radius: 4px; + overflow: hidden; + border: 1px solid rgba(43,157,255,.25); + box-shadow: inset 0 1px 3px rgba(0,0,0,.6); +} +.task-progress-fill{ + height: 100%; + background: linear-gradient(90deg, #2b9dff, #ff9ed1); + border-radius: 4px 0 0 4px; + box-shadow: 0 0 8px rgba(43,157,255,.55); + transition: width .35s ease; +} + +.task-reward{ + margin: 8px 0 4px; + font-size: 12px; font-weight: 700; color: #ffcf4d; + text-shadow: 0 0 6px rgba(255,207,77,.35); +} + +.task-claim-btn{ + margin-top: 8px; + padding: 6px 16px; + border: 1px solid #2b9dff; + border-radius: 6px; + font-family: 'Consolas','Courier New',monospace; + font-size: 12px; font-weight: 800; letter-spacing: 1px; + color: #031024; + cursor: pointer; + background: linear-gradient(180deg, rgba(43,157,255,.95), rgba(255,158,209,.95)); + box-shadow: 0 0 12px rgba(43,157,255,.4), inset 0 1px 0 rgba(255,255,255,.3); + text-shadow: none; + transition: transform .12s, filter .12s, box-shadow .12s; +} +.task-claim-btn:hover:not(:disabled){ transform: translateY(-1px); filter: brightness(1.12); box-shadow: 0 0 18px rgba(43,157,255,.6), 0 0 12px rgba(255,158,209,.4); } +.task-claim-btn:active:not(:disabled){ transform: translateY(1px); } +.task-claim-btn:disabled{ + background: #1a1a1a; color: #555; border-color:#333; cursor:not-allowed; box-shadow:none; +} + @media (max-width: 768px){ - .task-side-panel{ width: min(300px, calc(100vw - 28px)); } + .task-side-panel{ width: min(320px, calc(100vw - 28px)); } } @media (max-width: 420px){ .task-side-panel{ left: 8px; right: 8px; width: auto; max-height: 50vh; } @@ -2833,14 +2994,14 @@ function renderTaskPanel() { taskData.chapters.forEach(ch => { const list = taskData.tasks.filter(t => t.chapter === ch); if (!list.length) return; - html += `
第 ${ch} 章
`; + html += `
第 ${ch} 章
`; list.forEach(t => { const locked = t.state === 'locked'; const done = t.state === 'done'; const claimable = t.state === 'claimable'; const rewards = []; - if (t.reward_exp) rewards.push(`⭐${t.reward_exp} 经验`); - if (t.reward_res && t.reward_res.gold) rewards.push(`🪙${t.reward_res.gold} 金币`); + if (t.reward_exp) rewards.push(`⭐ ${t.reward_exp} 经验`); + if (t.reward_res && t.reward_res.gold) rewards.push(`🪙 ${t.reward_res.gold} 金币`); // 目标进度 let objHtml = ''; (t.objectives || []).forEach(o => { @@ -2848,32 +3009,27 @@ function renderTaskPanel() { const have = Math.min(o.have || 0, need); const pct = need ? Math.round(have / need * 100) : 100; objHtml += ` -
-
- ${o.label || o.type}${o.hint ? ` (${o.hint})` : ''} +
+
+ ${o.label || o.type}${o.hint ? ` (${o.hint})` : ''} ${have}/${need}
-
-
+
+
`; }); const btnLabel = done ? '已完成' : (claimable ? '领取奖励' : (locked ? '未解锁' : '进行中')); - const btnColor = done ? '#33414f' : (claimable ? '#3a7afe' : '#33414f'); - const btnCursor = (done || locked || !claimable) ? 'not-allowed' : 'pointer'; html += ` -
-
- ${t.title} - ${stateLabel[t.state] || t.state} +
+
+ ${t.title} + ${stateLabel[t.state] || t.state}
-
${t.desc || ''}
+
${t.desc || ''}
${objHtml} - ${rewards.length ? `
奖励：${rewards.join(' · ')}
` : ''} - ${done ? '' : ``} + ${rewards.length ? `
奖励：${rewards.join(' · ')}
` : ''} + ${done ? '' : ``}
`; }); });