演示地址:https://lua.hk
截图
源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一如既往 - PLAYER STATUS</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
<style>
:root {
--bg-deep: #0a0a12;
--bg-panel: #111827;
--border-light: #5c7a9a;
--border-highlight: #a0c4e8;
--border-shadow: #1a2a3a;
--text-primary: #e8e8f0;
--text-secondary: #b0c4d8;
--text-dim: #6a7a8a;
--neon-pink: #ff6b9d;
--neon-cyan: #00e5ff;
--neon-green: #39ff14;
--neon-gold: #ffd740;
--neon-purple: #b388ff;
--hp-green: #4cff4c;
--hp-yellow: #ffe040;
--hp-red: #ff4444;
--mp-blue: #4488ff;
--mp-purple: #aa66ff;
--exp-gold: #ffaa00;
--window-bg: #1a1e2e;
--crt-flicker: rgba(255, 255, 255, 0.015);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg-deep);
background-image:
radial-gradient(ellipse at center, rgba(40, 20, 60, 0.6) 0%, transparent 70%),
radial-gradient(circle at 20% 30%, rgba(80, 30, 100, 0.25) 0%, transparent 50%),
radial-gradient(circle at 75% 60%, rgba(20, 50, 90, 0.3) 0%, transparent 50%),
radial-gradient(circle at 50% 80%, rgba(60, 10, 80, 0.2) 0%, transparent 40%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'VT323', 'Courier New', monospace;
padding: 20px;
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect x='2' y='2' width='4' height='4' fill='white'/><rect x='6' y='6' width='4' height='4' fill='white'/><rect x='10' y='10' width='4' height='4' fill='white'/></svg>") 8 8, auto;
position: relative;
overflow-x: hidden;
transition: filter 0.3s ease;
}
body.modal-open {
overflow: hidden;
}
body.modal-open .main-container {
filter: blur(2px) brightness(0.7);
pointer-events: none;
transition: filter 0.35s ease, brightness 0.35s ease;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 4px);
animation: scanlineMove 0.1s linear infinite;
}
@keyframes scanlineMove {
0% { background-position: 0 0; }
100% { background-position: 0 4px; }
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9998;
background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.5);
}
.particles-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--neon-cyan);
animation: floatUp 6s ease-in infinite;
opacity: 0;
box-shadow: 0 0 6px var(--neon-cyan), 0 0 12px var(--neon-cyan);
}
.particle:nth-child(odd) {
background: var(--neon-pink);
box-shadow: 0 0 6px var(--neon-pink), 0 0 12px var(--neon-pink);
}
.particle:nth-child(3n) {
background: var(--neon-gold);
box-shadow: 0 0 6px var(--neon-gold), 0 0 12px var(--neon-gold);
width: 3px;
height: 3px;
}
.particle:nth-child(5n+2) {
background: var(--neon-purple);
box-shadow: 0 0 6px var(--neon-purple), 0 0 12px var(--neon-purple);
width: 5px;
height: 5px;
}
@keyframes floatUp {
0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
10% { opacity: 1; transform: translateY(-20px) translateX(5px) scale(1); }
30% { transform: translateY(-80px) translateX(-15px) scale(1.5); opacity: 0.9; }
60% { transform: translateY(-180px) translateX(20px) scale(0.8); opacity: 0.5; }
100% { transform: translateY(-350px) translateX(-30px) scale(0); opacity: 0; }
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 7s; }
.particle:nth-child(2) { left: 25%; animation-delay: 1.5s; animation-duration: 5.5s; }
.particle:nth-child(3) { left: 40%; animation-delay: 3s; animation-duration: 6.5s; }
.particle:nth-child(4) { left: 55%; animation-delay: 0.8s; animation-duration: 8s; }
.particle:nth-child(5) { left: 70%; animation-delay: 2.2s; animation-duration: 5s; }
.particle:nth-child(6) { left: 85%; animation-delay: 4s; animation-duration: 7.5s; }
.particle:nth-child(7) { left: 15%; animation-delay: 3.5s; animation-duration: 6s; }
.particle:nth-child(8) { left: 60%; animation-delay: 1s; animation-duration: 5.8s; }
.particle:nth-child(9) { left: 78%; animation-delay: 2.8s; animation-duration: 6.8s; }
.particle:nth-child(10) { left: 32%; animation-delay: 4.5s; animation-duration: 7.2s; }
.main-container {
position: relative;
z-index: 10;
width: 100%;
max-width: 820px;
display: flex;
flex-direction: column;
gap: 16px;
transition: filter 0.35s ease, opacity 0.35s ease;
}
.pixel-panel {
background: var(--window-bg);
border: 3px solid var(--border-light);
outline: 2px solid var(--border-shadow);
outline-offset: -6px;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05), 0 0 0 4px var(--border-shadow), 0 0 0 6px rgba(0, 0, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 60px rgba(100, 60, 180, 0.15);
position: relative;
padding: 20px 24px;
image-rendering: pixelated;
}
.pixel-panel::before {
content: '◆';
position: absolute;
top: -10px;
left: -10px;
font-size: 16px;
color: var(--neon-gold);
text-shadow: 0 0 8px var(--neon-gold), 0 0 16px var(--neon-gold);
animation: cornerGlow 2s ease-in-out infinite;
z-index: 5;
}
.pixel-panel::after {
content: '◆';
position: absolute;
bottom: -10px;
right: -10px;
font-size: 16px;
color: var(--neon-cyan);
text-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan);
animation: cornerGlow 2s ease-in-out 1s infinite;
z-index: 5;
}
@keyframes cornerGlow {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
.title-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: #0d0f1a;
border: 3px solid var(--border-light);
outline: 2px solid var(--border-shadow);
outline-offset: -6px;
box-shadow: 0 0 0 4px var(--border-shadow), 0 0 0 6px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.5);
padding: 14px 20px;
position: relative;
}
.title-bar::before {
content: '📁';
position: absolute;
left: -8px;
top: -14px;
font-size: 18px;
animation: bounceIcon 3s ease-in-out infinite;
}
@keyframes bounceIcon {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(-6px); }
50% { transform: translateY(0); }
70% { transform: translateY(-3px); }
}
.title-text {
font-family: 'Press Start 2P', 'Courier New', monospace;
font-size: 13px;
color: var(--text-primary);
letter-spacing: 2px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 25px rgba(180, 140, 255, 0.5);
animation: titleFlicker 5s ease-in-out infinite;
display: flex;
align-items: center;
gap: 8px;
}
@keyframes titleFlicker {
0%, 100% { opacity: 1; }
92% { opacity: 1; }
93% { opacity: 0.7; }
94% { opacity: 1; }
96% { opacity: 0.8; }
97% { opacity: 1; }
}
.title-blip {
display: inline-block;
width: 10px;
height: 10px;
background: var(--neon-green);
animation: blipBlink 1s step-end infinite;
box-shadow: 0 0 8px var(--neon-green);
}
@keyframes blipBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.15; }
}
.title-lv {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
color: var(--neon-gold);
background: rgba(0, 0, 0, 0.5);
padding: 6px 10px;
border: 2px solid var(--neon-gold);
text-shadow: 0 0 8px var(--neon-gold);
letter-spacing: 1px;
}
.content-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 16px;
}
.character-panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.avatar-frame {
width: 140px;
height: 140px;
border: 4px solid var(--border-highlight);
outline: 3px solid var(--border-shadow);
outline-offset: -8px;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3), 0 0 0 5px var(--border-shadow), 0 0 0 7px rgba(0, 0, 0, 0.4), 0 0 30px rgba(180, 130, 255, 0.35);
background: #1a1a2e;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
image-rendering: pixelated;
}
.pixel-avatar {
display: grid;
grid-template-columns: repeat(8, 14px);
grid-template-rows: repeat(8, 14px);
gap: 1px;
image-rendering: pixelated;
transform: scale(1.05);
}
.pixel-avatar .px { width: 14px; height: 14px; border-radius: 1px; }
.px-skin { background: #f4c7a8; }
.px-skin-dark { background: #e8b898; }
.px-hair { background: #3a2a5c; }
.px-hair-light { background: #5a4a7c; }
.px-eye { background: #1a1a1a; }
.px-eye-highlight { background: #ffffff; }
.px-mouth { background: #d4887a; }
.px-clothes { background: #c0392b; }
.px-clothes-dark { background: #8b1a1a; }
.px-accent { background: #f0c040; }
.px-bg { background: transparent; }
.avatar-label {
font-family: 'Press Start 2P', monospace;
font-size: 14px;
color: var(--neon-cyan);
text-shadow: 0 0 8px var(--neon-cyan);
letter-spacing: 1px;
text-align: center;
animation: labelPulse 3s ease-in-out infinite;
}
@keyframes labelPulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; text-shadow: 0 0 16px var(--neon-cyan), 0 0 30px var(--neon-cyan); }
}
.status-bars {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.status-row {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--text-primary);
}
.status-label { width: 28px; text-align: right; letter-spacing: 0px; flex-shrink: 0; }
.status-bar-outer {
flex: 1;
height: 14px;
border: 2px solid #333;
background: #0a0a0a;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}
.status-bar-inner {
height: 100%;
width: 0%;
transition: width 0.8s ease-out;
position: relative;
}
.status-bar-inner.hp {
background: linear-gradient(180deg, #5cff5c 0%, #2a8a2a 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px rgba(76, 255, 76, 0.4);
}
.status-bar-inner.mp {
background: linear-gradient(180deg, #66aaff 0%, #2244aa 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px rgba(68, 136, 255, 0.4);
}
.status-bar-inner.exp {
background: linear-gradient(180deg, #ffcc44 0%, #aa7700 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px rgba(255, 170, 0, 0.4);
}
.status-value {
font-size: 7px;
min-width: 42px;
text-align: left;
flex-shrink: 0;
color: var(--text-secondary);
}
.status-bar-inner::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: rgba(255, 255, 255, 0.15);
pointer-events: none;
}
.stats-table {
width: 100%;
font-family: 'Press Start 2P', monospace;
font-size: 14px;
color: var(--text-secondary);
border-collapse: collapse;
}
.stats-table tr { border-bottom: 1px dotted rgba(255, 255, 255, 0.1); }
.stats-table td { padding: 5px 4px; letter-spacing: 0.5px; }
.stats-table .stat-name { color: var(--neon-gold); text-shadow: 0 0 4px rgba(255, 215, 64, 0.4); white-space: nowrap; }
.stats-table .stat-val { text-align: right; color: var(--text-primary); font-size: 9px; }
.main-panel { display: flex; flex-direction: column; gap: 16px; }
.dialog-box {
position: relative;
padding: 16px 20px;
background: #151929;
border: 2px solid #4a5568;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25), 0 0 0 1px #2d3748;
}
.dialog-box .dialog-arrow {
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid #4a5568;
animation: arrowBounce 1.5s ease-in-out infinite;
}
@keyframes arrowBounce {
0%, 100% { bottom: -12px; opacity: 0.7; }
50% { bottom: -18px; opacity: 1; }
}
.dialog-text {
font-family: 'VT323', 'Courier New', monospace;
font-size: 18px;
color: #d0d8e8;
line-height: 1.5;
letter-spacing: 0.5px;
}
.dialog-text .highlight { color: var(--neon-gold); text-shadow: 0 0 6px rgba(255, 215, 64, 0.5); font-weight: bold; }
.dialog-text .highlight2 { color: var(--neon-pink); text-shadow: 0 0 6px rgba(255, 107, 157, 0.5); }
.skills-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skill-card {
background: #131725;
border: 2px solid #3a4055;
padding: 12px 14px;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.skill-card:hover {
border-color: var(--neon-cyan);
box-shadow: 0 0 20px rgba(0, 229, 255, 0.2), inset 0 0 20px rgba(0, 229, 255, 0.05);
transform: translateY(-2px);
}
.skill-card:active { transform: scale(0.96); transition: transform 0.05s ease; }
.skill-card .skill-icon { font-size: 22px; margin-bottom: 4px; display: block; }
.skill-card .skill-name { font-family: 'Press Start 2P', monospace; color: var(--neon-cyan); letter-spacing: 1px; text-shadow: 0 0 6px rgba(0, 229, 255, 0.4); }
.skill-card .skill-desc { font-family: 'VT323', monospace; font-size: 14px; color: #8899aa; margin-top: 4px; letter-spacing: 0.3px; }
.skill-card .skill-lv { position: absolute; top: 8px; right: 10px; font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-gold); background: rgba(0, 0, 0, 0.5); padding: 2px 6px; border: 1px solid rgba(255, 215, 64, 0.4); }
.menu-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.menu-item {
font-family: 'Press Start 2P', monospace;
font-size: 9px;
padding: 10px 16px;
background: #111520;
border: 2px solid #3a4055;
color: #b0c0d0;
cursor: pointer;
letter-spacing: 1px;
transition: all 0.15s ease;
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
position: relative;
user-select: none;
}
.menu-item:hover {
border-color: var(--neon-pink);
color: #ffffff;
box-shadow: 0 0 16px rgba(255, 107, 157, 0.35), inset 0 0 12px rgba(255, 107, 157, 0.08);
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.menu-item:active { background: #1a1025; transform: scale(0.94); transition: transform 0.04s ease; }
.menu-item .menu-cursor { display: inline-block; animation: cursorBlink 0.9s step-end infinite; color: var(--neon-pink); font-size: 12px; }
@keyframes cursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.menu-item .menu-dot { width: 6px; height: 6px; background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); animation: dotPulse 1.5s ease-in-out infinite; }
@keyframes dotPulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.6); }
}
.status-footer {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: #667788;
padding: 8px 4px;
letter-spacing: 0.5px;
}
.status-footer .footer-dot { display: inline-block; width: 6px; height: 6px; background: var(--neon-green); margin-right: 4px; box-shadow: 0 0 5px var(--neon-green); animation: dotPulse 2s ease-in-out infinite; }
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
background: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0.35s ease;
background-image: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.85) 100%), repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 6px);
}
.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-window {
position: relative;
background: var(--window-bg);
border: 4px solid var(--border-light);
outline: 3px solid var(--border-shadow);
outline-offset: -8px;
box-shadow: inset 0 0 0 3px rgba(255,255,255,0.04), 0 0 0 6px var(--border-shadow), 0 0 0 9px rgba(0,0,0,0.5), 0 0 60px rgba(100,60,180,0.35), 0 0 120px rgba(255,107,157,0.2), 0 20px 60px rgba(0,0,0,0.7);
width: 90%;
max-width: 560px;
max-height: 85vh;
overflow-y: auto;
padding: 0;
transform: scale(0.85);
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
image-rendering: pixelated;
clip-path: polygon(0px 12px, 4px 12px, 4px 4px, 12px 4px, 12px 0px, calc(100% - 12px) 0px, calc(100% - 12px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 12px), 0px calc(100% - 12px));
}
.modal-overlay.active .modal-window { transform: scale(1); }
.modal-title-bar { display: flex; align-items: center; justify-content: space-between; background: #0d0f1a; border-bottom: 3px solid var(--border-light); padding: 14px 18px; position: sticky; top: 0; z-index: 2; }
.modal-title-bar .modal-title-text { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--text-primary); letter-spacing: 2px; text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(180,140,255,0.5); display: flex; align-items: center; gap: 8px; }
.modal-title-bar .modal-title-icon { display: inline-block; width: 12px; height: 12px; background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); animation: blipBlink 1.2s step-end infinite; }
.modal-close-btn { font-family: 'Press Start 2P', monospace; font-size: 14px; color: #ff6666; background: rgba(0,0,0,0.5); border: 2px solid #ff4444; padding: 6px 10px; cursor: pointer; letter-spacing: 0; line-height: 1; transition: all 0.15s ease; text-shadow: 0 0 8px #ff4444; box-shadow: 0 0 10px rgba(255,68,68,0.3); user-select: none; }
.modal-close-btn:hover { background: #ff4444; color: #000; border-color: #fff; box-shadow: 0 0 25px rgba(255,68,68,0.7), 0 0 50px rgba(255,68,68,0.4); text-shadow: none; transform: scale(1.08); }
.modal-content { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.modal-avatar-section { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.modal-avatar-mini { width: 72px; height: 72px; border: 3px solid var(--border-highlight); outline: 2px solid var(--border-shadow); outline-offset: -6px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3), 0 0 0 4px var(--border-shadow), 0 0 20px rgba(180,130,255,0.3); background: #1a1a2e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-avatar-mini .pixel-avatar { grid-template-columns: repeat(8,8px); grid-template-rows: repeat(8,8px); gap:0.5px; transform:scale(1);}
.modal-avatar-mini .pixel-avatar .px { width:8px; height:8px;}
.modal-player-name { font-family:'Press Start 2P'; font-size:12px; color:var(--text-primary); letter-spacing:1px; margin-bottom:4px;}
.modal-player-title { font-family:'Press Start 2P'; font-size:13px; color:var(--neon-gold); margin-bottom:6px;}
.modal-player-id { font-family:'VT323'; font-size:15px; color:#8899aa; }
.modal-divider { width:100%; height:2px; background: repeating-linear-gradient(90deg, var(--border-light) 0px, var(--border-light) 8px, transparent 8px, transparent 14px); opacity:0.6; margin:2px 0;}
.modal-bio { font-family:'VT323'; font-size:17px; color:#c8d0dc; line-height:1.6; background:rgba(0,0,0,0.25); padding:14px 16px; border-left:4px solid var(--neon-cyan); }
.modal-bio .highlight { color:var(--neon-gold); text-shadow:0 0 6px rgba(255,215,64,0.4);}
.modal-bio .highlight2 { color:var(--neon-pink); text-shadow:0 0 6px rgba(255,107,157,0.4);}
.modal-bio .highlight3 { color:var(--neon-cyan); text-shadow:0 0 6px rgba(0,229,255,0.4);}
.modal-tags { display:flex; flex-wrap:wrap; gap:8px;}
.modal-tag { font-family:'Press Start 2P'; font-size:10px; padding:6px 10px; border:2px solid; letter-spacing:1px; transition:0.2s; cursor:default;}
.modal-tag.tag-frontend { border-color:#00e5ff; color:#00e5ff; }
.modal-tag.tag-design { border-color:#ff6b9d; color:#ff6b9d; }
.modal-tag.tag-creative { border-color:#ffd740; color:#ffd740; }
.modal-tag.tag-code { border-color:#39ff14; color:#39ff14; }
.modal-tag.tag-pixel { border-color:#b388ff; color:#b388ff; }
.modal-tag:hover { transform:translateY(-3px); box-shadow:0 0 20px currentColor;}
.modal-contact-list { list-style:none; display:flex; flex-direction:column; gap:8px;}
.modal-contact-list li { font-family:'VT323'; font-size:16px; color:#b0c0d0; display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.08);}
.modal-contact-list li:hover { border-color:var(--neon-cyan); background:rgba(0,229,255,0.04);}
.modal-contact-list .contact-icon { font-size:18px; width:28px; text-align:center;}
.modal-contact-list .contact-value { color:var(--text-primary); word-break:break-all;}
.modal-contact-list a { color:var(--neon-cyan); text-decoration:none; }
.modal-contact-list a:hover { color:#fff; text-shadow:0 0 12px var(--neon-cyan);}
.modal-footer-hint { text-align:center; font-family:'Press Start 2P'; font-size:10px; color:#556677; }
@media (max-width: 700px) {
.content-grid { grid-template-columns: 1fr; }
.character-panel { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.avatar-frame { width: 90px; height: 90px; }
.pixel-avatar { grid-template-columns: repeat(8, 10px); grid-template-rows: repeat(8, 10px); }
.pixel-avatar .px { width: 10px; height: 10px; }
.skills-section { grid-template-columns: 1fr; }
.modal-window { max-width: 94%; }
}
</style>
</head>
<body>
<div class="particles-container">
<div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div>
</div>
<div class="modal-overlay" id="contactModal" aria-hidden="true">
<div class="modal-window" role="dialog" aria-modal="true">
<div class="modal-title-bar">
<span class="modal-title-text"><span class="modal-title-icon"></span> PLAYER INFO</span>
<button class="modal-close-btn" id="modalCloseBtn">✕</button>
</div>
<div class="modal-content">
<div class="modal-avatar-section">
<div class="modal-avatar-mini">
<div class="pixel-avatar">
<span class="px px-bg"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-bg"></span>
<span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair-light"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair-light"></span><span class="px px-hair"></span><span class="px px-hair"></span>
<span class="px px-hair"></span><span class="px px-skin"></span><span class="px px-skin"></span><span class="px px-eye"></span><span class="px px-eye-highlight"></span><span class="px px-eye"></span><span class="px px-skin"></span><span class="px px-hair"></span>
<span class="px px-hair"></span><span class="px px-skin"></span><span class="px px-skin"></span><span class="px px-skin-dark"></span><span class="px px-skin"></span><span class="px px-skin-dark"></span><span class="px px-skin"></span><span class="px px-hair"></span>
<span class="px px-hair"></span><span class="px px-skin"></span><span class="px px-skin-dark"></span><span class="px px-mouth"></span><span class="px px-skin"></span><span class="px px-mouth"></span><span class="px px-skin-dark"></span><span class="px px-hair"></span>
<span class="px px-bg"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-clothes-dark"></span><span class="px px-accent"></span><span class="px px-clothes-dark"></span><span class="px px-clothes"></span><span class="px px-clothes"></span>
<span class="px px-bg"></span><span class="px px-clothes"></span><span class="px px-clothes-dark"></span><span class="px px-clothes"></span><span class="px px-clothes-dark"></span><span class="px px-clothes"></span><span class="px px-clothes-dark"></span><span class="px px-clothes"></span>
<span class="px px-bg"></span><span class="px px-bg"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-bg"></span>
</div>
</div>
<div class="modal-player-info">
<div class="modal-player-name">蝴蝶</div>
<div class="modal-player-title">⚔ 孤独的冒险者 / 大魔法师 ⚔</div>
<div class="modal-player-id" id="modalPlayerId">ID: Zardsay // Lv.<span id="modalLv">--</span></div>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-bio">
「 我是<span class="highlight">蝴蝶</span>！<br>
一个<span class="highlight2">默默无闻</span>的人<br>
热爱探索一切的未知<br>
虽然现在的我很伤心<br>
但是我永远相信<span class="highlight">美好</span>的事情一直在发生。」
</div>
<div class="modal-tags">
<span class="modal-tag tag-frontend">😤 傲慢</span>
<span class="modal-tag tag-design">🍋 嫉妒</span>
<span class="modal-tag tag-creative">😡 暴怒</span>
<span class="modal-tag tag-code">😫 懒惰</span>
<span class="modal-tag tag-pixel">🤑 贪婪</span>
<span class="modal-tag tag-design">🍟 暴食</span>
<span class="modal-tag tag-creative">😍 色欲</span>
</div>
<div class="modal-divider"></div>
<ul class="modal-contact-list">
<li><span class="contact-icon">📧</span><span>邮箱：</span><span class="contact-value"><a href="mailto:yourname@example.com">zero@yiru.net</a></span></li>
<li><span class="contact-icon">🌐</span><span>网站：</span><span class="contact-value"><a href="https://yiru.net">yiru.net</a></span></li>
</ul>
<div class="modal-footer-hint"><span class="key-icon">ESC</span> 关闭窗口 ｜ 点击外部区域也可关闭</div>
</div>
</div>
</div>
<div class="main-container">
<div class="title-bar">
<span class="title-text"><span class="title-blip"></span> PLAYER STATUS</span>
<span class="title-lv" id="lvDisplay">Lv.--</span>
</div>
<div class="content-grid">
<div class="character-panel">
<div class="avatar-frame">
<div class="pixel-avatar">
<span class="px px-bg"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-bg"></span>
<span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair-light"></span><span class="px px-hair"></span><span class="px px-hair"></span><span class="px px-hair-light"></span><span class="px px-hair"></span><span class="px px-hair"></span>
<span class="px px-hair"></span><span class="px px-skin"></span><span class="px px-skin"></span><span class="px px-eye"></span><span class="px px-eye-highlight"></span><span class="px px-eye"></span><span class="px px-skin"></span><span class="px px-hair"></span>
<span class="px px-hair"></span><span class="px px-skin"></span><span class="px px-skin"></span><span class="px px-skin-dark"></span><span class="px px-skin"></span><span class="px px-skin-dark"></span><span class="px px-skin"></span><span class="px px-hair"></span>
<span class="px px-hair"></span><span class="px px-skin"></span><span class="px px-skin-dark"></span><span class="px px-mouth"></span><span class="px px-skin"></span><span class="px px-mouth"></span><span class="px px-skin-dark"></span><span class="px px-hair"></span>
<span class="px px-bg"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-clothes-dark"></span><span class="px px-accent"></span><span class="px px-clothes-dark"></span><span class="px px-clothes"></span><span class="px px-clothes"></span>
<span class="px px-bg"></span><span class="px px-clothes"></span><span class="px px-clothes-dark"></span><span class="px px-clothes"></span><span class="px px-clothes-dark"></span><span class="px px-clothes"></span><span class="px px-clothes-dark"></span><span class="px px-clothes"></span>
<span class="px px-bg"></span><span class="px px-bg"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-clothes"></span><span class="px px-bg"></span>
</div>
</div>
<span class="avatar-label">▼ 蝴蝶 ▼</span>
<div class="status-bars">
<div class="status-row">
<span class="status-label" style="color:#4cff4c;">HP</span>
<div class="status-bar-outer"><div class="status-bar-inner hp" id="hpBar"></div></div>
<span class="status-value" id="hpValue">--/--</span>
</div>
<div class="status-row">
<span class="status-label" style="color:#66aaff;">MP</span>
<div class="status-bar-outer"><div class="status-bar-inner mp" id="mpBar"></div></div>
<span class="status-value" id="mpValue">--/--</span>
</div>
<div class="status-row">
<span class="status-label" style="color:#ffcc44;">EXP</span>
<div class="status-bar-outer"><div class="status-bar-inner exp" id="expBar"></div></div>
<span class="status-value" id="expValue">--%</span>
</div>
</div>
<table class="stats-table">
<tr><td class="stat-name">⚔️ 攻撃力</td><td class="stat-val">178</td></tr>
<tr><td class="stat-name">🛡️ 防御力</td><td class="stat-val">0</td></tr>
<tr><td class="stat-name">⚡ 敏捷</td><td class="stat-val">134</td></tr>
<tr><td class="stat-name">✨ 運</td><td class="stat-val">50%</td></tr>
<tr><td class="stat-name">🎯 命中</td><td class="stat-val">91%</td></tr>
</table>
</div>
<div class="main-panel">
<div class="pixel-panel dialog-box">
<p class="dialog-text">
<span class="highlight">多少事，</span><br>
<span class="highlight2">从来急；</span><br>
<span class="highlight3">天地转，</span><br>
<span class="highlight">光阴迫。</span><br>
<span class="highlight2">一万年太久，只争朝夕。</span>
</p>
<div class="dialog-arrow"></div>
</div>
<div class="skills-section">
<div class="skill-card"><span class="skill-icon">🫕</span><span class="skill-name">大胃袋</span><span class="skill-lv">Lv.1</span><p class="skill-desc">唯有美食不可辜负</p></div>
<div class="skill-card"><span class="skill-icon">🍬</span><span class="skill-name">血糖</span><span class="skill-lv">Lv.5</span><p class="skill-desc">我应该能戒糖吧</p></div>
<div class="skill-card"><span class="skill-icon">🎮</span><span class="skill-name">游戏</span><span class="skill-lv">Lv.9</span><p class="skill-desc">其实我是打电动糕手</p></div>
<div class="skill-card"><span class="skill-icon">🔮</span><span class="skill-name">活着</span><span class="skill-lv">MAX</span><p class="skill-desc">+1+1+1+1+1+1+1</p></div>
</div>
</div>
</div>
<div class="pixel-panel menu-bar" style="padding:12px 16px;">
<a href="#" class="menu-item" id="contactMenuBtn"><span class="menu-dot"></span> 关于我</a>
</div>
<div class="status-footer">
<span><span class="footer-dot"></span> SYSTEM READY</span>
<span>© 2024 一如既往</span>
<span id="uptimeDisplay">⌛ 起動時間: --日</span>
</div>
</div>
<script>
// 立即执行动态数值初始化，避免静态占位符闪烁
(function() {
const MAX_HP = 400;
const MAX_MP = 200;
const BASE_LV = 31;
const START_YEAR = 2026;
function updateStats() {
const now = new Date();
const currentYear = now.getFullYear();
// 等级：基础31，每过一整年+1
const extraLv = Math.max(0, currentYear - START_YEAR);
const lv = BASE_LV + extraLv;
document.getElementById('lvDisplay').textContent = `Lv.${lv}`;
const modalLvSpan = document.getElementById('modalLv');
if (modalLvSpan) modalLvSpan.textContent = lv;
// EXP：一年365天进度条
const startOfYear = new Date(currentYear, 0, 1);
const diffFromYearStart = now - startOfYear;
const dayOfYear = Math.floor(diffFromYearStart / (1000 * 60 * 60 * 24)) + 1;
const totalDays = 365;
const expPercent = Math.min(100, Math.max(0, (dayOfYear / totalDays) * 100));
document.getElementById('expBar').style.width = expPercent + '%';
document.getElementById('expValue').textContent = Math.floor(expPercent) + '%';
// HP：与吃饭时间相关 (早饭8:00, 午饭12:00, 晚饭18:00)
const currentHour = now.getHours();
const currentMinute = now.getMinutes();
const currentTimeInHours = currentHour + currentMinute / 60;
const mealTimes = [8, 12, 18];
let minDiff = Infinity;
mealTimes.forEach(meal => {
let diff = Math.abs(currentTimeInHours - meal);
if (currentTimeInHours < mealTimes[0]) {
const diffToYesterdayDinner = Math.abs(currentTimeInHours + 24 - 18);
if (diffToYesterdayDinner < diff) diff = diffToYesterdayDinner;
}
if (diff < minDiff) minDiff = diff;
});
const hpPercent = Math.max(20, 100 - Math.min(80, minDiff * 15));
const currentHP = Math.round(MAX_HP * (hpPercent / 100));
document.getElementById('hpBar').style.width = hpPercent + '%';
document.getElementById('hpValue').textContent = `${currentHP}/${MAX_HP}`;
// MP：与睡眠时间相关 (睡眠时段22:00-次日7:00，MP逐渐恢复)
const sleepStartMinutes = 22 * 60;
const sleepEndMinutes = 7 * 60;
const currentMinutes = currentHour * 60 + currentMinute;
let mpPercent;
if (currentMinutes >= 420 && currentMinutes < 1320) {
const elapsedWake = currentMinutes - 420;
const totalWake = 900;
mpPercent = 100 - (elapsedWake / totalWake) * 80;
} else {
let elapsedSleep;
if (currentMinutes >= 1320) {
elapsedSleep = currentMinutes - 1320;
} else {
elapsedSleep = currentMinutes + (24 * 60 - 1320);
}
const totalSleep = 540;
mpPercent = 20 + (elapsedSleep / totalSleep) * 80;
}
mpPercent = Math.min(100, Math.max(20, mpPercent));
const currentMP = Math.round(MAX_MP * (mpPercent / 100));
document.getElementById('mpBar').style.width = mpPercent + '%';
document.getElementById('mpValue').textContent = `${currentMP}/${MAX_MP}`;
// 启动时间
const daysSinceEpoch = Math.floor(now / (1000 * 60 * 60 * 24));
document.getElementById('uptimeDisplay').textContent = `⌛ 起動時間: ${daysSinceEpoch}日`;
}
updateStats();
setInterval(updateStats, 60000);
// 状态条加载动画（仅首次触发过渡效果）
['hpBar','mpBar','expBar'].forEach(id => {
const bar = document.getElementById(id);
if (bar) {
const currentWidth = bar.style.width;
bar.style.transition = 'none';
bar.style.width = '0%';
requestAnimationFrame(() => {
requestAnimationFrame(() => {
bar.style.transition = 'width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
bar.style.width = currentWidth;
});
});
}
});
})();
// 弹窗控制
const modalOverlay = document.getElementById('contactModal');
const modalCloseBtn = document.getElementById('modalCloseBtn');
const contactMenuBtn = document.getElementById('contactMenuBtn');
const modalWindow = modalOverlay.querySelector('.modal-window');
function openModal() {
modalOverlay.classList.add('active');
document.body.classList.add('modal-open');
modalOverlay.setAttribute('aria-hidden', 'false');
setTimeout(() => modalCloseBtn.focus(), 100);
}
function closeModal() {
modalOverlay.classList.remove('active');
document.body.classList.remove('modal-open');
modalOverlay.setAttribute('aria-hidden', 'true');
setTimeout(() => contactMenuBtn.focus(), 100);
}
contactMenuBtn.addEventListener('click', (e) => { e.preventDefault(); openModal(); });
modalCloseBtn.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeModal(); });
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modalOverlay.classList.contains('active')) closeModal(); });
modalWindow.addEventListener('click', (e) => e.stopPropagation());
// 菜单项反馈
document.querySelectorAll('.menu-item').forEach(item => {
if (item.id === 'contactMenuBtn') return;
item.addEventListener('click', function(e) {
e.preventDefault();
this.style.borderColor = '#ffffff';
this.style.boxShadow = '0 0 25px rgba(255,255,255,0.6)';
setTimeout(() => { this.style.borderColor = ''; this.style.boxShadow = ''; }, 150);
});
});
document.querySelectorAll('.skill-card').forEach(card => {
card.addEventListener('click', function() {
this.style.borderColor = '#ffffff';
setTimeout(() => { this.style.borderColor = ''; }, 200);
});
});
// 粒子随机颜色
setInterval(() => {
const particles = document.querySelectorAll('.particle');
const colors = ['#ff6b9d','#00e5ff','#ffd740','#b388ff','#39ff14','#ff8844'];
const p = particles[Math.floor(Math.random() * particles.length)];
if (p && Math.random() > 0.7) {
const c = colors[Math.floor(Math.random() * colors.length)];
p.style.background = c;
p.style.boxShadow = `0 0 8px ${c}, 0 0 16px ${c}`;
setTimeout(() => { p.style.background = ''; p.style.boxShadow = ''; }, 400);
}
}, 3000);
console.log('%c六朝何事, 只成门户私计。',
'font-family:"Press Start 2P",monospace;color:#39ff14;font-size:10px;');
</script>
</body>
</html>
评论
暂无评论