{"html":"

\n \n \n \n\n

\n\n

\n HP 348/450\n AP 67/67\n ⚡\n

\n\n

\n \n\n

08:40

02.23.2026

\n\n \n

\n\n

\n Stimpak (12)\n WGT 0.5\n
\n 10mm Pistol\n WGT 4.0\n
\n Nuka-Cola Quantum\n WGT 1.0\n
\n RadAway (5)\n WGT 0.5\n
\n Power Armor Core\n WGT 3.0\n

\n\n

\n \n

SEARCHING SATELLITE...

\n\n \n

\n","css":".pipboy-wrapper {\n --pip-green: #1aff40;\n --pip-glow: rgba(26, 255, 64, 0.6);\n --bg-dark: #020a02;\n --chassis-dark: #1a1a1a;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: \"Courier New\", Courier, monospace;\n text-transform: uppercase;\n width: 100%;\n max-width: 650px;\n padding: 1rem;\n box-sizing: border-box;\n container-type: inline-size;\n container-name: pipboy;\n}\n\n.pipboy-wrapper ::selection {\n background-color: var(--pip-green);\n color: var(--bg-dark);\n text-shadow: none;\n}\n.pipboy-wrapper ::-moz-selection {\n background-color: var(--pip-green);\n color: var(--bg-dark);\n text-shadow: none;\n}\n\n.pipboy-wrapper input[type=\"radio\"] {\n display: none;\n}\n\n.pipboy-chassis {\n position: relative;\n width: 100%;\n background-image: radial-gradient(\n rgba(255, 255, 255, 0.04) 1px,\n transparent 1px\n ),\n linear-gradient(135deg, #2b2b2b, #111, #222);\n background-size:\n 3px 3px,\n 100% 100%;\n padding: 2.5rem;\n border-radius: 2rem;\n box-shadow:\n inset 0 0 20px #000,\n 0 20px 40px rgba(0, 0, 0, 0.8),\n 0 0 0 2px #333,\n 0 5px 15px rgba(26, 255, 64, 0.1);\n border: 2px solid #444;\n box-sizing: border-box;\n}\n\n.screw {\n position: absolute;\n width: 14px;\n height: 14px;\n background: linear-gradient(45deg, #555, #111);\n border-radius: 50%;\n border: 1px solid #000;\n box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2);\n}\n\n.screw::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 10px;\n height: 2px;\n background: #000;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n.tl {\n top: 15px;\n left: 15px;\n}\n.tr {\n top: 15px;\n right: 15px;\n transform: rotate(90deg);\n}\n.bl {\n bottom: 15px;\n left: 15px;\n transform: rotate(180deg);\n}\n.br {\n bottom: 15px;\n right: 15px;\n transform: rotate(270deg);\n}\n\n.crt-screen {\n background-color: var(--bg-dark);\n border-radius: 1.5rem;\n position: relative;\n overflow: hidden;\n border: 8px solid #0a0a0a;\n box-shadow:\n inset 0 0 60px rgba(0, 0, 0, 1),\n 0 0 10px rgba(0, 0, 0, 0.8);\n aspect-ratio: 4/3;\n cursor: crosshair;\n}\n\n.screen-glass {\n position: absolute;\n inset: 0;\n z-index: 10;\n pointer-events: none;\n background: radial-gradient(\n circle at 50% 50%,\n rgba(255, 255, 255, 0.03) 0%,\n rgba(0, 0, 0, 0.4) 80%\n );\n box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9);\n}\n\n.screen-glass::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 15%;\n background: linear-gradient(\n to bottom,\n transparent,\n rgba(26, 255, 64, 0.1),\n transparent\n );\n animation: crtScanline 7s linear infinite;\n pointer-events: none;\n z-index: 11;\n}\n\n.scanlines {\n position: absolute;\n inset: 0;\n z-index: 9;\n pointer-events: none;\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);\n background-size: 100% 4px;\n}\n\n.boot-sequence {\n height: 100%;\n padding: 1.5rem;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n color: var(--pip-green);\n text-shadow: 0 0 4px var(--pip-glow);\n animation: turnOnCRT 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n opacity: 0;\n}\n\n.bold {\n font-weight: 900;\n}\n.line {\n height: 2px;\n background-color: var(--pip-green);\n box-shadow: 0 0 8px var(--pip-glow);\n opacity: 0.8;\n}\n.flexible {\n flex-grow: 1;\n margin: 0 10px;\n}\n\n.top-bar,\n.bottom-bar {\n display: flex;\n align-items: center;\n font-size: 0.9rem;\n font-weight: bold;\n}\n.top-bar {\n margin-bottom: 1.5rem;\n}\n.dynamic-title {\n letter-spacing: 1px;\n}\n.stats-info {\n display: flex;\n gap: 12px;\n}\n\n.bottom-bar {\n margin-top: auto;\n}\n.nav-item {\n padding: 4px 10px;\n cursor: crosshair;\n border: 1px solid transparent;\n transition: all 0.2s;\n}\n.nav-item:hover {\n background-color: rgba(26, 255, 64, 0.15);\n}\n\n.middle-section {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.tab-content {\n display: none;\n width: 100%;\n height: 100%;\n animation: screenGlitch 0.4s ease-out;\n}\n\n#tab-stat:checked ~ .pipboy-chassis .dynamic-title::before {\n content: \"SYS_STATUS\";\n}\n#tab-inv:checked ~ .pipboy-chassis .dynamic-title::before {\n content: \"INVENTORY\";\n}\n#tab-data:checked ~ .pipboy-chassis .dynamic-title::before {\n content: \"DATA_LINK\";\n}\n\n#tab-stat:checked ~ .pipboy-chassis .content-stat,\n#tab-inv:checked ~ .pipboy-chassis .content-inv,\n#tab-data:checked ~ .pipboy-chassis .content-data {\n display: flex;\n}\n\n#tab-stat:checked ~ .pipboy-chassis label[for=\"tab-stat\"],\n#tab-inv:checked ~ .pipboy-chassis label[for=\"tab-inv\"],\n#tab-data:checked ~ .pipboy-chassis label[for=\"tab-data\"] {\n background-color: var(--pip-green);\n color: var(--bg-dark);\n text-shadow: none;\n box-shadow: 0 0 10px var(--pip-glow);\n}\n\n.content-stat {\n justify-content: space-between;\n align-items: center;\n}\n.side-menu {\n display: flex;\n flex-direction: column;\n gap: 10px;\n font-size: 1rem;\n}\n.active-box-static {\n border: 2px solid var(--pip-green);\n padding: 2px 8px;\n box-shadow: inset 0 0 10px var(--pip-glow);\n}\n\n.clock-display {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.terminal-block {\n background-color: var(--pip-green);\n border-radius: 6px;\n padding: 10px 20px;\n margin-bottom: 5px;\n box-shadow: 0 0 25px var(--pip-glow);\n animation: blockPulse 4s infinite alternate;\n}\n.terminal-block .time {\n color: var(--bg-dark);\n font-size: 4rem;\n font-weight: bold;\n text-shadow: none;\n filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));\n}\n.date {\n font-size: 1.2rem;\n font-weight: bold;\n letter-spacing: 2px;\n}\n\n.right-menu {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n}\n.rad-text {\n font-size: 1rem;\n font-weight: bold;\n letter-spacing: 2px;\n}\n.hazard-symbol {\n width: 50px;\n height: 50px;\n position: relative;\n background: conic-gradient(\n var(--pip-green) 0deg 60deg,\n transparent 60deg 120deg,\n var(--pip-green) 120deg 180deg,\n transparent 180deg 240deg,\n var(--pip-green) 240deg 300deg,\n transparent 300deg 360deg\n );\n border-radius: 50%;\n animation: radarSpin 8s linear infinite;\n box-shadow: 0 0 15px var(--pip-glow);\n}\n.hazard-core {\n position: absolute;\n inset: 10px;\n background: var(--bg-dark);\n border-radius: 50%;\n}\n.hazard-core::after {\n content: \"\";\n position: absolute;\n inset: 6px;\n background: var(--pip-green);\n border-radius: 50%;\n}\n\n.content-inv {\n flex-direction: column;\n font-size: 1rem;\n width: 100%;\n justify-content: flex-start;\n}\n.inventory-list {\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100%;\n}\n.inventory-list li {\n display: flex;\n justify-content: space-between;\n padding: 6px;\n border-bottom: 1px dashed rgba(26, 255, 64, 0.3);\n transition: none;\n cursor: crosshair;\n}\n.inventory-list li:hover,\n.active-terminal-line {\n background-color: var(--pip-green);\n color: var(--bg-dark);\n font-weight: bold;\n text-shadow: none;\n box-shadow: 0 0 10px var(--pip-glow);\n padding: 6px 11px;\n}\n\n.content-data {\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 15px;\n}\n.radar-container {\n position: relative;\n width: 160px;\n height: 160px;\n background: rgba(26, 255, 64, 0.1);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n box-shadow: inset 0 0 20px var(--pip-glow);\n border: 2px solid var(--pip-green);\n}\n.radar-container::before {\n content: \"\";\n position: absolute;\n inset: 20px;\n background: rgba(26, 255, 64, 0.15);\n border-radius: 50%;\n border: 1px dashed rgba(26, 255, 64, 0.3);\n}\n.radar-container::after {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 50px;\n background: rgba(26, 255, 64, 0.25);\n border-radius: 50%;\n border: 1px solid var(--pip-green);\n}\n.radar-container span {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n background: transparent;\n transform-origin: top left;\n animation: angularRotation 2s linear infinite;\n box-shadow: 6px -100px 40px -30px var(--pip-green);\n border-top: 2px solid var(--pip-green);\n z-index: 2;\n}\n.blip {\n position: absolute;\n width: 6px;\n height: 6px;\n background: #fff;\n border-radius: 50%;\n top: 35px;\n left: 100px;\n box-shadow:\n 0 0 10px #fff,\n 0 0 20px var(--pip-green);\n animation: blipFade 2s infinite;\n z-index: 3;\n}\n\n.radio-visualizer {\n display: flex;\n gap: 3px;\n align-items: flex-end;\n height: 15px;\n margin-left: 10px;\n}\n.bar {\n width: 4px;\n background-color: var(--pip-green);\n animation: eqBounce 1s infinite alternate;\n}\n.bar-1 {\n animation-delay: 0.1s;\n}\n.bar-2 {\n animation-delay: 0.3s;\n}\n.bar-3 {\n animation-delay: 0s;\n}\n.bar-4 {\n animation-delay: 0.4s;\n}\n\n@keyframes screenGlitch {\n 0% {\n opacity: 0;\n filter: contrast(200%);\n transform: translateY(-2px);\n text-shadow:\n 3px 0 rgba(255, 0, 0, 0.7),\n -3px 0 rgba(0, 0, 255, 0.7);\n }\n 20% {\n opacity: 0.8;\n text-shadow:\n -3px 0 rgba(255, 0, 0, 0.7),\n 3px 0 rgba(0, 0, 255, 0.7);\n }\n 50% {\n opacity: 0.5;\n filter: contrast(150%) hue-rotate(20deg);\n transform: translateY(2px);\n text-shadow:\n 2px 0 rgba(255, 0, 0, 0.7),\n -2px 0 rgba(0, 0, 255, 0.7);\n }\n 100% {\n opacity: 1;\n filter: contrast(100%);\n transform: translateY(0);\n text-shadow: 0 0 4px var(--pip-glow);\n }\n}\n\n@keyframes crtScanline {\n 0% {\n transform: translateY(-100%);\n }\n 100% {\n transform: translateY(800%);\n }\n}\n@keyframes turnOnCRT {\n 0% {\n transform: scale(1, 0.005);\n opacity: 0;\n filter: brightness(10);\n }\n 30% {\n transform: scale(1, 0.005);\n opacity: 1;\n filter: brightness(5);\n }\n 60% {\n transform: scale(1, 1);\n filter: brightness(2);\n }\n 100% {\n transform: scale(1, 1);\n opacity: 1;\n filter: brightness(1);\n }\n}\n@keyframes angularRotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes radarSpin {\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes blipFade {\n 0%,\n 85% {\n opacity: 0;\n }\n 90% {\n opacity: 1;\n transform: scale(1.5);\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes eqBounce {\n 0% {\n height: 3px;\n }\n 100% {\n height: 15px;\n }\n}\n@keyframes blockPulse {\n 0% {\n box-shadow: 0 0 15px var(--pip-glow);\n }\n 100% {\n box-shadow: 0 0 35px var(--pip-glow);\n }\n}\n@keyframes blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n}\n@keyframes flicker {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.8;\n }\n}\n@keyframes pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.3;\n }\n}\n\n.blink-colon {\n animation: blink 1s step-end infinite;\n}\n.flicker-text {\n animation: flicker 0.15s infinite;\n}\n.flicker-fast {\n animation: flicker 0.08s infinite;\n}\n.pulse-icon {\n animation: pulse 1.5s infinite ease-in-out;\n}\n\n@container pipboy (max-width: 600px) {\n .pipboy-chassis {\n padding: 1.5rem;\n border-radius: 1.5rem;\n }\n .crt-screen {\n border-width: 5px;\n }\n .boot-sequence {\n padding: 1.2rem;\n }\n .terminal-block .time {\n font-size: 3rem;\n }\n .top-bar,\n .bottom-bar {\n font-size: 0.8rem;\n }\n .side-menu,\n .inventory-list {\n font-size: 0.85rem;\n }\n .radar-container {\n width: 130px;\n height: 130px;\n }\n .radar-container::before {\n inset: 15px;\n }\n .radar-container::after {\n width: 40px;\n height: 40px;\n }\n .blip {\n top: 30px;\n left: 85px;\n }\n .hazard-symbol {\n width: 40px;\n height: 40px;\n }\n .hazard-core {\n inset: 8px;\n }\n .hazard-core::after {\n inset: 4px;\n }\n}\n\n@container pipboy (max-width: 450px) {\n .pipboy-chassis {\n padding: 1rem;\n border-radius: 1rem;\n }\n .crt-screen {\n border-width: 4px;\n }\n .boot-sequence {\n padding: 0.8rem;\n }\n .terminal-block {\n padding: 4px 8px;\n }\n .terminal-block .time {\n font-size: 1.5rem;\n }\n .date {\n font-size: 0.7rem;\n letter-spacing: 1px;\n }\n .top-bar {\n margin-bottom: 0.8rem;\n }\n .top-bar,\n .bottom-bar {\n font-size: 0.6rem;\n }\n .stats-info {\n gap: 5px;\n }\n .flexible {\n margin: 0 5px;\n }\n .nav-item {\n padding: 2px 4px;\n }\n .side-menu {\n font-size: 0.6rem;\n gap: 5px;\n }\n .inventory-list {\n font-size: 0.65rem;\n }\n .rad-text,\n .radar-text {\n font-size: 0.6rem;\n }\n .radar-container {\n width: 100px;\n height: 100px;\n }\n .radar-container::before {\n inset: 12px;\n }\n .radar-container::after {\n width: 30px;\n height: 30px;\n }\n .blip {\n top: 20px;\n left: 65px;\n width: 4px;\n height: 4px;\n }\n .hazard-symbol {\n width: 30px;\n height: 30px;\n box-shadow: 0 0 10px var(--pip-glow);\n }\n .hazard-core {\n inset: 6px;\n }\n .hazard-core::after {\n inset: 3px;\n }\n}\n"}

moody-falcon-73

👁 实时预览

📝 源代码