{"id":190,"date":"2026-02-05T23:59:57","date_gmt":"2026-02-05T23:59:57","guid":{"rendered":"https:\/\/3dnan.se\/?page_id=190"},"modified":"2026-02-06T00:48:36","modified_gmt":"2026-02-06T00:48:36","slug":"soon","status":"publish","type":"page","link":"https:\/\/3dnan.se\/?page_id=190","title":{"rendered":"Login"},"content":{"rendered":"
\r\n \n\n\n \n \n Pro Hacker Login<\/title>\n <style>\n \/* Reset *\/\n * {\n margin: 0; padding: 0;\n box-sizing: border-box;\n font-family: 'SF Mono', 'Courier New', Courier, monospace;\n }\n html, body {\n height: 100%;\n background: #0a0a0a;\n color: #c62346;\n overflow-y: auto;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n canvas {\n position: fixed;\n top: 0; left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n user-select: none;\n }\n \/* Container with vertical centering but scrollable *\/\n body {\n display: flex;\n justify-content: center;\n align-items: center; \/* Changed from flex-start to center *\/\n min-height: 100vh;\n padding: 80px 0;\n flex-direction: column;\n }\n\n .login-container {\n z-index: 10;\n width: 300px; \/* smaller width *\/\n padding: 0 15px;\n margin-bottom: 80px; \/* space below login for footer *\/\n }\n\n \/* Glassmorphic Panel with entrance animation *\/\n .login-box {\n background: rgba(20, 10, 10, 0.75);\n border-radius: 14px;\n padding: 28px 32px 32px;\n width: 100%;\n box-shadow:\n 0 8px 32px 0 rgba(198, 35, 70, 0.2),\n inset 0 0 40px 2px rgba(198, 35, 70, 0.15);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n border: 1.5px solid rgba(198, 35, 70, 0.25);\n text-align: center;\n user-select: none;\n\n opacity: 0;\n transform: translateY(40px);\n animation: fadeSlideIn 1s ease forwards;\n animation-delay: 0.3s;\n max-height: 420px; \/* keep UI compact vertically *\/\n overflow: visible;\n }\n\n @keyframes fadeSlideIn {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Heading *\/\n .login-box h1 {\n font-weight: 600;\n font-size: 1.6rem;\n margin-bottom: 22px;\n letter-spacing: 4px;\n color: #c62346cc;\n text-shadow: 0 0 4px rgba(198, 35, 70, 0.8);\n }\n\n \/* Labels *\/\n .login-box label {\n display: block;\n text-align: left;\n font-size: 0.9rem;\n margin-bottom: 6px;\n color: #c6234688;\n letter-spacing: 1.4px;\n font-weight: 500;\n user-select: none;\n }\n\n \/* Inputs *\/\n .login-box input[type=\"text\"],\n .login-box input[type=\"password\"] {\n width: 100%;\n padding: 10px 14px;\n margin-bottom: 18px;\n font-size: 1rem;\n color: #c62346dd;\n background: rgba(198, 35, 70, 0.1);\n border: 1.8px solid rgba(198, 35, 70, 0.3);\n border-radius: 8px;\n letter-spacing: 1.4px;\n outline-offset: 2px;\n transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;\n caret-color: #c62346cc;\n font-weight: 600;\n user-select: text;\n font-family: 'SF Mono', 'Courier New', Courier, monospace;\n box-shadow: inset 0 0 8px rgba(198, 35, 70, 0.15);\n }\n .login-box input[type=\"text\"]::placeholder,\n .login-box input[type=\"password\"]::placeholder {\n color: #c6234677;\n letter-spacing: 1.3px;\n font-weight: 400;\n }\n .login-box input[type=\"text\"]:focus,\n .login-box input[type=\"password\"]:focus {\n border-color: #c62346ff;\n background: rgba(198, 35, 70, 0.15);\n box-shadow: 0 0 14px rgba(198, 35, 70, 0.6);\n }\n\n \/* Button *\/\n .login-box button {\n width: 100%;\n padding: 12px 0;\n font-size: 1.05rem;\n font-weight: 700;\n color: #0a0a0a;\n background: linear-gradient(145deg, #c62346, #9e1f3b);\n border: none;\n border-radius: 12px;\n cursor: pointer;\n letter-spacing: 3px;\n box-shadow: 0 6px 14px rgba(198, 35, 70, 0.6);\n transition: background 0.3s ease, box-shadow 0.3s ease;\n user-select: none;\n text-transform: uppercase;\n }\n .login-box button:hover {\n background: linear-gradient(145deg, #e43958, #b82545);\n box-shadow: 0 8px 22px rgba(228, 57, 87, 0.85);\n }\n .login-box button:active {\n background: linear-gradient(145deg, #9e1f3b, #7c1932);\n box-shadow: 0 4px 10px rgba(158, 31, 59, 0.75);\n }\n\n \/* Button Error State *\/\n .login-box button.error {\n background: #cc4444 !important;\n box-shadow: 0 0 12px #cc4444;\n color: #fff !important;\n animation: none !important;\n }\n\n \/* Error Message *\/\n .error-message {\n margin-top: 10px;\n font-family: 'SF Mono', monospace;\n font-weight: 700;\n font-size: 0.9rem;\n letter-spacing: 1.6px;\n color: #cc4444;\n opacity: 0;\n transition: opacity 0.35s ease;\n user-select: none;\n min-height: 20px;\n }\n .error-message.visible {\n opacity: 1;\n }\n\n \/* Footer style *\/\n footer {\n text-align: center;\n color: #c6234655;\n font-family: monospace;\n letter-spacing: 1.2px;\n font-size: 0.85rem;\n margin-bottom: 30px;\n user-select: none;\n }\n\n \/* Responsive *\/\n @media (max-width: 420px) {\n body {\n padding: 60px 0;\n }\n .login-container {\n width: 90%;\n padding: 0 12px;\n margin-bottom: 60px;\n }\n .login-box {\n padding: 24px 24px 28px;\n max-height: 400px;\n }\n .login-box h1 {\n font-size: 1.4rem;\n margin-bottom: 20px;\n }\n .login-box input[type=\"text\"],\n .login-box input[type=\"password\"] {\n font-size: 0.95rem;\n padding: 8px 12px;\n }\n .login-box button {\n font-size: 1rem;\n padding: 10px 0;\n }\n footer {\n font-size: 0.75rem;\n margin-bottom: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <canvas id=\"matrix\"><\/canvas>\n\n <div class=\"login-container\">\n <form class=\"login-box\" id=\"loginForm\" autocomplete=\"off\" spellcheck=\"false\" autocorrect=\"off\" autocapitalize=\"off\" novalidate>\n <h1>ACCESS PORTAL<\/h1>\n\n <label for=\"username\">USERNAME<\/label>\n <input type=\"text\" id=\"username\" placeholder=\"Enter username\" required autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" \/>\n\n <label for=\"password\">PASSWORD<\/label>\n <input type=\"password\" id=\"password\" placeholder=\"Enter password\" required autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" \/>\n\n <button type=\"submit\" id=\"loginBtn\">LOGIN<\/button>\n <div id=\"errorMsg\" class=\"error-message\">Login info false<\/div>\n <\/form>\n <\/div>\n\n <footer>\n © 2026 3dnan\n <\/footer>\n\n <audio id=\"hackingSound\" preload=\"auto\" src=\"https:\/\/actions.google.com\/sounds\/v1\/alarms\/hacking_success.ogg\"><\/audio>\n\n <script>\n \/\/ Matrix background with subtle red characters\n const canvas = document.getElementById('matrix');\n const ctx = canvas.getContext('2d');\n\n let width = canvas.width = window.innerWidth;\n let height = canvas.height = window.innerHeight;\n\n const letters = 'abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()-_=+[]{}|;:,.<>?'.split('');\n const fontSize = 16;\n const columns = Math.floor(width \/ fontSize);\n const drops = new Array(columns).fill(1);\n\n function draw() {\n ctx.fillStyle = 'rgba(10, 10, 10, 0.06)';\n ctx.fillRect(0, 0, width, height);\n\n ctx.fillStyle = '#c62346';\n ctx.font = fontSize + 'px monospace';\n\n for(let i = 0; i < drops.length; i++) {\n const text = letters[Math.floor(Math.random() * letters.length)];\n ctx.fillText(text, i * fontSize, drops[i] * fontSize);\n\n if (drops[i] * fontSize > height && Math.random() > 0.975) {\n drops[i] = 0;\n }\n drops[i]++;\n }\n }\n\n setInterval(draw, 35);\n\n window.addEventListener('resize', () => {\n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n });\n\n \/\/ Login form behavior\n const loginForm = document.getElementById('loginForm');\n const loginBtn = document.getElementById('loginBtn');\n const errorMsg = document.getElementById('errorMsg');\n\n loginForm.addEventListener('submit', e => {\n e.preventDefault();\n\n errorMsg.classList.add('visible');\n loginBtn.classList.add('error');\n\n \/\/ Shake animation\n loginBtn.style.animation = 'shake 0.3s ease';\n setTimeout(() => {\n loginBtn.style.animation = '';\n }, 300);\n\n setTimeout(() => {\n loginBtn.classList.remove('error');\n errorMsg.classList.remove('visible');\n }, 1600);\n });\n\n \/\/ Shake keyframes for button on error\n const styleSheet = document.createElement('style');\n styleSheet.textContent = `\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-5px); }\n 50% { transform: translateX(5px); }\n 75% { transform: translateX(-5px); }\n }\n `;\n document.head.appendChild(styleSheet);\n\n \/\/ Play hacking sound once on page load\n const hackingSound = document.getElementById('hackingSound');\n window.addEventListener('load', () => {\n hackingSound.currentTime = 0;\n hackingSound.play().catch(() => {\n \/\/ Autoplay might be blocked, no worries\n });\n });\n <\/script>\n\n<\/body>\n<\/html>\n <\/div>\r\n ","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-190","page","type-page","status-publish","hentry"],"mb":[],"mfb_rest_fields":["title","gutenberg_elementor_mode"],"_links":{"self":[{"href":"https:\/\/3dnan.se\/index.php?rest_route=\/wp\/v2\/pages\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3dnan.se\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3dnan.se\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3dnan.se\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3dnan.se\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=190"}],"version-history":[{"count":15,"href":"https:\/\/3dnan.se\/index.php?rest_route=\/wp\/v2\/pages\/190\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/3dnan.se\/index.php?rest_route=\/wp\/v2\/pages\/190\/revisions\/221"}],"wp:attachment":[{"href":"https:\/\/3dnan.se\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}