一款8bit游戏，像素风的个人主页源码

2 个月前代码阅读 377 字数 35947
演示地址: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>
下载地址

主页源码下载
暂无评论
取消回复
私密评论
验证码
7 + 8 =