{"id":6,"date":"2026-07-19T14:05:31","date_gmt":"2026-07-19T14:05:31","guid":{"rendered":"https:\/\/maceinktech.com\/?page_id=6"},"modified":"2026-07-19T14:08:16","modified_gmt":"2026-07-19T14:08:16","slug":"portal","status":"publish","type":"page","link":"https:\/\/maceinktech.com\/?page_id=6","title":{"rendered":"Portal"},"content":{"rendered":"\n<div class=\"auth-viewport\">\n    <div class=\"auth-layout\">\n        <!-- Top Horizon Bar -->\n        <header class=\"bank-horizon-bar\">\n            <div class=\"brand-logo\">\u2728 ApexVault Pro<\/div>\n            <div class=\"secure-tag\">\ud83d\udd12 256-Bit TLS Institutional Node<\/div>\n        <\/header>\n\n        <!-- Main Workspace split into Graphic\/Promo Panel and Interactive Portal -->\n        <div class=\"auth-split-workspace\">\n            <!-- Left Side Banner Panel -->\n            <div class=\"auth-promo-panel\">\n                <div class=\"promo-image-overlay\"><\/div>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1563986768609-322da13575f3?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" alt=\"Institutional Digital Banking Terminal\" class=\"promo-media-element\">\n                <div class=\"promo-content-wrapper\">\n                    <h2>Next-Generation Liquidity Routing<\/h2>\n                    <p>Access real-time global clearings, cross-border multi-currency settlement chains, and customized enterprise yield tracking instantly.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Right Side Verification Panel -->\n            <div class=\"auth-action-panel\">\n                <div class=\"form-title-area\">\n                    <h1>Clearance Gateway<\/h1>\n                    <p>Please present credentials to initialize data vault communication channels.<\/p>\n                <\/div>\n\n                <!-- Input fields intentionally explicitly configured to prevent browser autofill interpolation -->\n                <form id=\"customLoginForm\" onsubmit=\"handlePortalAuth(event)\" autocomplete=\"off\">\n                    <div class=\"input-group\">\n                        <label for=\"vaultUser\">Corporate ID \/ Username<\/label>\n                        <input type=\"text\" id=\"vaultUser\" placeholder=\" \" required autocomplete=\"new-password\">\n                    <\/div>\n            \n                    <div class=\"input-group\">\n                        <label for=\"vaultPass\">Security Token \/ Password<\/label>\n                        <input type=\"password\" id=\"vaultPass\" placeholder=\" \" required autocomplete=\"new-password\">\n                    <\/div>\n \n                    <div class=\"auth-options\">\n                        <label class=\"remember-me\">\n                            <input type=\"checkbox\"> Trust this workstation hardware node\n                        <\/label>\n                        <a href=\"#\" class=\"forgot-link\" onclick=\"alert('Please contact your designated system clearance administrator.')\">Forgot token?<\/a>\n                    <\/div>\n \n                    <button type=\"submit\" class=\"btn-auth\">Verify Identity &#038; Initialize<\/button>\n                <\/form>\n \n                <div id=\"authError\" class=\"auth-error-banner\" style=\"display: none;\">\n                    <span class=\"error-icon\">\u274c<\/span>\n                    <div>\n                        <strong>Authentication Rejected<\/strong>\n                        <p>The token combination provided does not match records within this clearance node.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"auth-action-footer\">\n                    <p>Protected by ApexVault Security Layer. Unauthorized access attempts are monitored, geolocated, and logged.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Absolute Theme Override Blocks *\/\n#wpadminbar { display: none !important; visibility: hidden !important; }\nhtml { margin-top: 0px !important; }\n \n:root {\n    --bg-auth: #05070f;\n    --bg-card: #0c101d;\n    --bg-input: #060812;\n    --border-color: #1a233a;\n    --text-main: #f1f5f9;\n    --text-muted: #64748b;\n    --accent-blue: #2563eb;\n    --accent-hover: #1d4ed8;\n}\n \nbody, html { \n    margin: 0; \n    padding: 0; \n    background: var(--bg-auth); \n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; \n    color: var(--text-main); \n    height: 100vh; \n    overflow: hidden; \n}\n\n.auth-viewport { \n    position: fixed; \n    top: 0; \n    left: 0; \n    height: 100vh; \n    width: 100vw; \n    background: var(--bg-auth); \n    z-index: 999999; \n    display: flex;\n    flex-direction: column;\n}\n\n.auth-layout {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n}\n\n\/* Horizon Bar Styles *\/\n.bank-horizon-bar {\n    height: 70px;\n    background: #090d1a;\n    border-bottom: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 40px;\n    flex-shrink: 0;\n}\n\n.brand-logo { \n    font-size: 1.4rem; \n    font-weight: 700; \n    color: #fff; \n    letter-spacing: -0.5px;\n}\n\n.secure-tag {\n    font-size: 0.8rem;\n    color: #10b981;\n    font-weight: 600;\n    background: rgba(16, 185, 129, 0.08);\n    padding: 6px 14px;\n    border-radius: 20px;\n    border: 1px solid rgba(16, 185, 129, 0.2);\n}\n\n\/* Landscape Split Styles *\/\n.auth-split-workspace {\n    display: flex;\n    flex-grow: 1;\n    height: calc(100% - 70px);\n}\n\n.auth-promo-panel {\n    flex: 1.2;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    align-items: flex-end;\n    padding: 60px;\n    border-right: 1px solid var(--border-color);\n}\n\n.promo-media-element {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    z-index: 1;\n}\n\n.promo-image-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(180deg, rgba(5,7,15,0.4) 0%, rgba(5,7,15,0.95) 100%);\n    z-index: 2;\n}\n\n.promo-content-wrapper {\n    position: relative;\n    z-index: 3;\n    max-width: 600px;\n}\n\n.promo-content-wrapper h2 {\n    font-size: 2.2rem;\n    font-weight: 700;\n    margin-bottom: 15px;\n    color: #fff;\n    letter-spacing: -0.5px;\n}\n\n.promo-content-wrapper p {\n    font-size: 1rem;\n    line-height: 1.6;\n    color: #94a3b8;\n}\n\n.auth-action-panel {\n    flex: 0.9;\n    background: var(--bg-card);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 0 60px;\n    overflow-y: auto;\n}\n\n.form-title-area {\n    margin-bottom: 35px;\n}\n\n.form-title-area h1 {\n    font-size: 1.8rem;\n    margin: 0 0 10px 0;\n    font-weight: 700;\n}\n\n.form-title-area p {\n    margin: 0;\n    font-size: 0.9rem;\n    color: var(--text-muted);\n    line-height: 1.4;\n}\n\n\/* Form inputs & variables *\/\n.input-group { margin-bottom: 24px; }\n.input-group label { \n    display: block; \n    font-size: 0.75rem; \n    font-weight: 700; \n    color: #94a3b8; \n    margin-bottom: 8px; \n    text-transform: uppercase; \n    letter-spacing: 0.5px;\n}\n.input-group input { \n    width: 100%; \n    padding: 14px 16px; \n    background: var(--bg-input); \n    border: 1px solid var(--border-color); \n    border-radius: 8px; \n    color: #fff; \n    box-sizing: border-box; \n    font-size: 1rem;\n}\n.input-group input:focus { outline: none; border-color: var(--accent-blue); }\n.auth-options { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 30px; align-items: center; }\n.remember-me { display: flex; align-items: center; gap: 8px; color: #94a3b8; cursor: pointer; }\n.forgot-link { color: var(--accent-blue); text-decoration: none; font-weight: 500; }\n.forgot-link:hover { text-decoration: underline; }\n.btn-auth { width: 100%; background: var(--accent-blue); color: #fff; border: none; padding: 15px; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.2s; }\n.btn-auth:hover { background: var(--accent-hover); }\n\n.auth-error-banner { display: flex; gap: 12px; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 6px; padding: 14px; margin-top: 25px; }\n.auth-error-banner strong { color: #f87171; font-size: 0.9rem; }\n.auth-error-banner p { margin: 4px 0 0 0; font-size: 0.8rem; color: #fca5a5; }\n\n.auth-action-footer { margin-top: 50px; border-top: 1px solid var(--border-color); padding-top: 20px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }\n\n@media(max-width: 1024px) {\n    .auth-promo-panel { display: none; }\n    .auth-action-panel { flex: 1; padding: 0 40px; }\n}\n<\/style>\n\n<script>\nfunction handlePortalAuth(event) {\n    event.preventDefault();\n    const user = document.getElementById('vaultUser').value;\n    const pass = document.getElementById('vaultPass').value;\n    const errorBanner = document.getElementById('authError');\n    \n    if (user === 'bankclient' && pass === 'ApexVault2026!') {\n        errorBanner.style.display = 'none';\n        \/\/ Simulates dynamic injection or redirects directly into your system node view layout\n        document.querySelector('.auth-viewport').style.display = 'none';\n        document.querySelector('.app-viewport').style.display = 'flex';\n    } else {\n        errorBanner.style.display = 'flex';\n    }\n}\n<\/script>\n\n\n\n<div class=\"auth-viewport\">\n    <div class=\"auth-layout\">\n        <!-- Top Horizon Bar -->\n        <header class=\"bank-horizon-bar\">\n            <div class=\"brand-logo\">\u2728 ApexVault Pro<\/div>\n            <div class=\"secure-tag\">\ud83d\udd12 256-Bit TLS Institutional Node<\/div>\n        <\/header>\n\n        <!-- Main Workspace split into Graphic\/Promo Panel and Interactive Portal -->\n        <div class=\"auth-split-workspace\">\n            <!-- Left Side Banner Panel -->\n            <div class=\"auth-promo-panel\">\n                <div class=\"promo-image-overlay\"><\/div>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1563986768609-322da13575f3?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" alt=\"Institutional Digital Banking Terminal\" class=\"promo-media-element\">\n                <div class=\"promo-content-wrapper\">\n                    <h2>Next-Generation Liquidity Routing<\/h2>\n                    <p>Access real-time global clearings, cross-border multi-currency settlement chains, and customized enterprise yield tracking instantly.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Right Side Verification Panel -->\n            <div class=\"auth-action-panel\">\n                <div class=\"form-title-area\">\n                    <h1>Clearance Gateway<\/h1>\n                    <p>Please present credentials to initialize data vault communication channels.<\/p>\n                <\/div>\n\n                <!-- Input fields intentionally explicitly configured to prevent browser autofill interpolation -->\n                <form id=\"customLoginForm\" onsubmit=\"handlePortalAuth(event)\" autocomplete=\"off\">\n                    <div class=\"input-group\">\n                        <label for=\"vaultUser\">Corporate ID \/ Username<\/label>\n                        <input type=\"text\" id=\"vaultUser\" placeholder=\" \" required autocomplete=\"new-password\">\n                    <\/div>\n            \n                    <div class=\"input-group\">\n                        <label for=\"vaultPass\">Security Token \/ Password<\/label>\n                        <input type=\"password\" id=\"vaultPass\" placeholder=\" \" required autocomplete=\"new-password\">\n                    <\/div>\n \n                    <div class=\"auth-options\">\n                        <label class=\"remember-me\">\n                            <input type=\"checkbox\"> Trust this workstation hardware node\n                        <\/label>\n                        <a href=\"#\" class=\"forgot-link\" onclick=\"alert('Please contact your designated system clearance administrator.')\">Forgot token?<\/a>\n                    <\/div>\n \n                    <button type=\"submit\" class=\"btn-auth\">Verify Identity &#038; Initialize<\/button>\n                <\/form>\n \n                <div id=\"authError\" class=\"auth-error-banner\" style=\"display: none;\">\n                    <span class=\"error-icon\">\u274c<\/span>\n                    <div>\n                        <strong>Authentication Rejected<\/strong>\n                        <p>The token combination provided does not match records within this clearance node.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"auth-action-footer\">\n                    <p>Protected by ApexVault Security Layer. Unauthorized access attempts are monitored, geolocated, and logged.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* WordPress Content Layout Resets *\/\n.wp-block-post-content,\n.entry-content,\n.site-main,\n.wp-site-blocks {\n    max-width: 100% !important;\n    width: 100% !important;\n    padding: 0 !important;\n    margin: 0 !important;\n}\n\n\/* Absolute Theme Override Blocks *\/\n#wpadminbar { display: none !important; visibility: hidden !important; }\nhtml { margin-top: 0px !important; }\n \n:root {\n    --bg-auth: #05070f;\n    --bg-card: #0c101d;\n    --bg-input: #060812;\n    --border-color: #1a233a;\n    --text-main: #f1f5f9;\n    --text-muted: #64748b;\n    --accent-blue: #2563eb;\n    --accent-hover: #1d4ed8;\n}\n \nbody, html { \n    margin: 0; \n    padding: 0; \n    background: var(--bg-auth); \n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; \n    color: var(--text-main); \n    height: 100vh; \n    overflow: hidden; \n}\n\n.auth-viewport { \n    position: fixed !important; \n    top: 0 !important; \n    left: 0 !important; \n    height: 100vh !important; \n    width: 100vw !important; \n    background: var(--bg-auth); \n    z-index: 9999999 !important; \n    display: flex;\n    flex-direction: column;\n}\n\n.auth-layout {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n}\n\n\/* Horizon Bar Styles *\/\n.bank-horizon-bar {\n    height: 70px;\n    background: #090d1a;\n    border-bottom: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 40px;\n    flex-shrink: 0;\n}\n\n.brand-logo { \n    font-size: 1.4rem; \n    font-weight: 700; \n    color: #fff; \n    letter-spacing: -0.5px;\n}\n\n.secure-tag {\n    font-size: 0.8rem;\n    color: #10b981;\n    font-weight: 600;\n    background: rgba(16, 185, 129, 0.08);\n    padding: 6px 14px;\n    border-radius: 20px;\n    border: 1px solid rgba(16, 185, 129, 0.2);\n}\n\n\/* Landscape Split Styles *\/\n.auth-split-workspace {\n    display: flex;\n    flex-grow: 1;\n    height: calc(100% - 70px);\n}\n\n.auth-promo-panel {\n    flex: 1.2;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    align-items: flex-end;\n    padding: 60px;\n    border-right: 1px solid var(--border-color);\n}\n\n.promo-media-element {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    z-index: 1;\n}\n\n.promo-image-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(180deg, rgba(5,7,15,0.4) 0%, rgba(5,7,15,0.95) 100%);\n    z-index: 2;\n}\n\n.promo-content-wrapper {\n    position: relative;\n    z-index: 3;\n    max-width: 600px;\n}\n\n.promo-content-wrapper h2 {\n    font-size: 2.2rem;\n    font-weight: 700;\n    margin-bottom: 15px;\n    color: #fff;\n    letter-spacing: -0.5px;\n}\n\n.promo-content-wrapper p {\n    font-size: 1rem;\n    line-height: 1.6;\n    color: #94a3b8;\n}\n\n.auth-action-panel {\n    flex: 0.9;\n    background: var(--bg-card);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 0 60px;\n    overflow-y: auto;\n}\n\n.form-title-area {\n    margin-bottom: 35px;\n}\n\n.form-title-area h1 {\n    font-size: 1.8rem;\n    margin: 0 0 10px 0;\n    font-weight: 700;\n}\n\n.form-title-area p {\n    margin: 0;\n    font-size: 0.9rem;\n    color: var(--text-muted);\n    line-height: 1.4;\n}\n\n\/* Form inputs & variables *\/\n.input-group { margin-bottom: 24px; }\n.input-group label { \n    display: block; \n    font-size: 0.75rem; \n    font-weight: 700; \n    color: #94a3b8; \n    margin-bottom: 8px; \n    text-transform: uppercase; \n    letter-spacing: 0.5px;\n}\n.input-group input { \n    width: 100%; \n    padding: 14px 16px; \n    background: var(--bg-input); \n    border: 1px solid var(--border-color); \n    border-radius: 8px; \n    color: #fff; \n    box-sizing: border-box; \n    font-size: 1rem;\n}\n.input-group input:focus { outline: none; border-color: var(--accent-blue); }\n.auth-options { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 30px; align-items: center; }\n.remember-me { display: flex; align-items: center; gap: 8px; color: #94a3b8; cursor: pointer; }\n.forgot-link { color: var(--accent-blue); text-decoration: none; font-weight: 500; }\n.forgot-link:hover { text-decoration: underline; }\n.btn-auth { width: 100%; background: var(--accent-blue); color: #fff; border: none; padding: 15px; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.2s; }\n.btn-auth:hover { background: var(--accent-hover); }\n\n.auth-error-banner { display: flex; gap: 12px; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 6px; padding: 14px; margin-top: 25px; }\n.auth-error-banner strong { color: #f87171; font-size: 0.9rem; }\n.auth-error-banner p { margin: 4px 0 0 0; font-size: 0.8rem; color: #fca5a5; }\n\n.auth-action-footer { margin-top: 50px; border-top: 1px solid var(--border-color); padding-top: 20px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }\n\n@media(max-width: 1024px) {\n    .auth-promo-panel { display: none; }\n    .auth-action-panel { flex: 1; padding: 0 40px; }\n}\n<\/style>\n\n<script>\nfunction handlePortalAuth(event) {\n    event.preventDefault();\n    const user = document.getElementById('vaultUser').value;\n    const pass = document.getElementById('vaultPass').value;\n    const errorBanner = document.getElementById('authError');\n    \n    if (user === 'bankclient' && pass === 'ApexVault2026!') {\n        errorBanner.style.display = 'none';\n        document.querySelector('.auth-viewport').style.display = 'none';\n        \n        \/\/ This targets your dashboard template layer once successful\n        const dashboard = document.querySelector('.app-viewport');\n        if (dashboard) {\n            dashboard.style.display = 'flex';\n        } else {\n            alert('Authentication successful! Setup Part 2 (Dashboard code) right below this layout to initialize workspace assets.');\n        }\n    } else {\n        errorBanner.style.display = 'flex';\n    }\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u2728 ApexVault Pro \ud83d\udd12 256-Bit TLS Institutional Node Next-Generation Liquidity Routing Access real-time global clearings, cross-border multi-currency settlement chains, and customized enterprise yield tracking instantly. Clearance Gateway Please present credentials to initialize data vault communication channels. Corporate ID \/ Username Security Token \/ Password Trust this workstation hardware node Forgot token? Verify Identity &#038; Initialize [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"bank-canvas","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maceinktech.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maceinktech.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maceinktech.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maceinktech.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maceinktech.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":3,"href":"https:\/\/maceinktech.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/maceinktech.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/maceinktech.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}