{"html":"

BIG BROTHER IS LOADING

\n","css":".orwellian-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n margin: 0;\n overflow: hidden;\n font-family: \"Arial Black\", \"Helvetica Neue\", Arial, sans-serif;\n font-weight: 900;\n}\n.orwellian-container .orwellian-loader {\n width: 280px;\n height: 280px;\n background-color: #000;\n border: 10px solid #333;\n position: relative;\n overflow: hidden;\n padding: 20px;\n box-sizing: border-box;\n}\n\n.orwellian-container .eye {\n width: 160px;\n height: 60px;\n background-color: #fff;\n border-radius: 50%;\n position: absolute;\n top: 30%;\n left: 50%;\n transform: translate(-50%, -60%);\n animation: pulse 2s infinite;\n overflow: hidden;\n z-index: 10;\n}\n\n.orwellian-container .pupil {\n width: 50px;\n height: 50px;\n background-color: #000;\n border-radius: 50%;\n position: absolute;\n top: 33%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: look-diagonal 4s infinite ease-in-out;\n}\n\n.orwellian-container .pupil::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 30px;\n height: 30px;\n background: radial-gradient(circle, rgb(255, 0, 0) 0%, transparent 70%);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n opacity: 0.7;\n}\n\n.orwellian-container .eyelid {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: #000;\n animation: blink 4s infinite;\n}\n\n.orwellian-container .spotlight {\n position: absolute;\n top: 30%;\n left: 50%;\n width: 47px;\n height: 200px;\n background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), transparent);\n filter: blur(8px);\n transform-origin: top;\n animation: spotlight-sweep-diagonal 4s infinite ease-in-out;\n}\n\n.orwellian-container .text {\n position: absolute;\n bottom: 20px;\n left: 10px;\n right: 10px;\n text-align: center;\n font-size: 20px;\n font-weight: bold;\n color: #f8d17c;\n text-transform: uppercase;\n letter-spacing: 1px;\n animation: glitch 1s infinite;\n z-index: 20;\n}\n\n.orwellian-container .scan-lines {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n to bottom,\n transparent 50%,\n rgba(0, 0, 0, 0.3) 50%\n );\n background-size: 100% 4px;\n animation: scan 10s linear infinite;\n z-index: 30;\n opacity: 0.3;\n pointer-events: none;\n}\n\n.orwellian-container .tv-effect {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),\n linear-gradient(\n 90deg,\n rgba(255, 0, 0, 0.06),\n rgba(0, 255, 0, 0.02),\n rgba(0, 0, 255, 0.06)\n );\n background-size: 100% 2px, 3px 100%;\n animation: tv-flicker 0.15s infinite;\n z-index: 35;\n pointer-events: none;\n opacity: 0.5;\n}\n\n.orwellian-container .orwellian-loader::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: repeating-linear-gradient(\n 0deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.03) 1px,\n transparent 1px,\n transparent 2px\n );\n pointer-events: none;\n z-index: 40;\n}\n\n.orwellian-container .orwellian-loader::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(\n circle at center,\n transparent 30%,\n rgba(0, 0, 0, 0.5) 90%\n );\n z-index: 35;\n pointer-events: none;\n}\n\n@keyframes look-diagonal {\n 0%,\n 100% {\n transform: translateX(-50%) rotate(0deg);\n }\n 25% {\n transform: translateX(-40%) rotate(-15deg);\n }\n 75% {\n transform: translateX(-60%) rotate(15deg);\n }\n}\n\n@keyframes spotlight-sweep-diagonal {\n 0%,\n 100% {\n transform: translateX(-50%) rotate(0deg);\n }\n 25% {\n transform: translateX(-40%) rotate(-15deg);\n }\n 75% {\n transform: translateX(-60%) rotate(15deg);\n }\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n transform: translate(-50%, -60%) scale(1);\n }\n 50% {\n transform: translate(-50%, -60%) scale(1.05);\n }\n}\n\n@keyframes glitch {\n 0%,\n 100% {\n transform: translate(0, 0);\n opacity: 1;\n }\n 25% {\n transform: translate(-2px, 2px);\n opacity: 0.75;\n }\n 50% {\n transform: translate(2px, -2px);\n opacity: 0.5;\n }\n 75% {\n transform: translate(-2px, -2px);\n opacity: 0.75;\n }\n}\n\n@keyframes blink {\n 0%,\n 90%,\n 100% {\n height: 0;\n }\n 95% {\n height: 100%;\n }\n}\n\n@keyframes scan {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 0 100%;\n }\n}\n\n@keyframes tv-flicker {\n 0% {\n opacity: 0.27049;\n }\n 5% {\n opacity: 0.34801;\n }\n 10% {\n opacity: 0.23175;\n }\n 15% {\n opacity: 0.40923;\n }\n 20% {\n opacity: 0.29481;\n }\n 25% {\n opacity: 0.38584;\n }\n 30% {\n opacity: 0.24928;\n }\n 35% {\n opacity: 0.32451;\n }\n 40% {\n opacity: 0.37031;\n }\n 45% {\n opacity: 0.26941;\n }\n 50% {\n opacity: 0.35755;\n }\n 55% {\n opacity: 0.29288;\n }\n 60% {\n opacity: 0.31821;\n }\n 65% {\n opacity: 0.39726;\n }\n 70% {\n opacity: 0.25294;\n }\n 75% {\n opacity: 0.36898;\n }\n 80% {\n opacity: 0.28995;\n }\n 85% {\n opacity: 0.3398;\n }\n 90% {\n opacity: 0.38703;\n }\n 95% {\n opacity: 0.24619;\n }\n 100% {\n opacity: 0.35762;\n }\n}\n\n/* Additional styles to ensure full coverage */\n.orwellian-container {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 300px; /* Ensures a minimum height for the container */\n}\n\n/* Responsive adjustments */\n@media (max-width: 480px) {\n .orwellian-container .orwellian-loader {\n width: 240px;\n height: 240px;\n }\n\n .orwellian-container .eye {\n width: 140px;\n height: 50px;\n }\n\n .orwellian-container .pupil {\n width: 40px;\n height: 40px;\n }\n\n .orwellian-container .spotlight {\n width: 40px;\n height: 160px;\n }\n\n .orwellian-container .text {\n font-size: 16px;\n }\n}\n\n/* Accessibility improvements */\n.orwellian-container .text {\n user-select: none; /* Prevents text selection */\n}\n\n.orwellian-container .orwellian-loader:focus {\n outline: 2px solid #fff;\n outline-offset: 2px;\n}\n\n.orwellian-container .orwellian-loader {\n animation: subtle-rotate 6s infinite ease-in-out;\n}\n\n/* Enhance TV effect */\n.orwellian-container .tv-effect::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(\n circle at center,\n rgba(255, 255, 255, 0.1) 0%,\n transparent 80%\n ),\n repeating-radial-gradient(\n circle at center,\n rgba(0, 0, 0, 0) 0,\n rgba(0, 0, 0, 0.1) 1px,\n transparent 1px,\n transparent 4px\n );\n background-size: 100% 100%, 3px 3px;\n pointer-events: none;\n}\n\n/* Improve text readability */\n.orwellian-container .text {\n text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),\n 0 0 10px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);\n}\n\n/* Enhance spotlight effect */\n.orwellian-container .spotlight::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(\n circle at top,\n rgba(255, 255, 255, 0.2) 0%,\n transparent 70%\n );\n filter: blur(5px);\n}\n\n/* Add a pulsating glow to the eye */\n@keyframes eye-glow {\n 0%,\n 100% {\n box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);\n }\n 50% {\n box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);\n }\n}\n\n.orwellian-container .eye {\n animation: pulse 2s infinite, eye-glow 4s infinite;\n}\n"}

brown-puma-30

👁 实时预览

📝 源代码