{"id":29558,"date":"2026-04-05T10:17:05","date_gmt":"2026-04-05T10:17:05","guid":{"rendered":"https:\/\/magnificum.net\/?page_id=29558"},"modified":"2026-04-06T07:21:22","modified_gmt":"2026-04-06T07:21:22","slug":"id","status":"publish","type":"page","link":"https:\/\/magnificum.net\/en\/id\/","title":{"rendered":"identification app"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nFACE\/\/SCAN<\/title>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/aframe@1.4.2\/dist\/aframe.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/mind-ar@1.2.5\/dist\/mindar-image-aframe.prod.js\"><\/script>\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');\r\n:root{\r\n --neon:#7dd3fc;--neon-dim:#7dd3fc44;--neon-glow:#7dd3fc18;\r\n --bg:#0c0e13;--bg2:#0f1319;--text:#bae6fd;--muted:#334155;\r\n --vignette-strength: rgba(8,10,15,0.94);\r\n}\r\n*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}\r\nhtml,body{\r\n width:100%;height:100%;background:var(--bg);\r\n font-family:'Share Tech Mono',monospace;color:var(--text);\r\n overflow:hidden;touch-action:none;\r\n \/* Verhindert Bounce\/Overscroll auf iOS *\/\r\n position:fixed;\r\n}\r\n\r\n\/* \u2500\u2500 STARTUP \u2500\u2500 *\/\r\n#startup{\r\n position:fixed;inset:0;z-index:1000;background:var(--bg);\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;\r\n}\r\n.logo{\r\n font-family:'Orbitron',sans-serif;font-weight:900;\r\n font-size:clamp(14px,5vw,34px);color:var(--neon);\r\n letter-spacing:clamp(2px,1.2vw,7px);\r\n text-shadow:0 0 30px #00ff8880;animation:logopulse 3s ease-in-out infinite;\r\n margin-bottom:6px;text-align:center;padding:0 20px;line-height:1.3;word-break:break-word;\r\n}\r\n.logo-sub{font-size:9px;color:var(--muted);letter-spacing:5px;margin-bottom:36px}\r\n@keyframes logopulse{0%,100%{text-shadow:0 0 20px #00ff8860}50%{text-shadow:0 0 50px #00ff88aa}}\r\n.scan-icon{\r\n width:100px;height:100px;border:1.5px solid var(--neon-dim);\r\n position:relative;margin-bottom:28px;animation:iconpulse 2s ease-in-out infinite;\r\n}\r\n@keyframes iconpulse{0%,100%{border-color:var(--neon-dim)}50%{border-color:var(--neon);box-shadow:0 0 20px var(--neon-glow)}}\r\n.sc{position:absolute;width:13px;height:13px;border-color:var(--neon);border-style:solid}\r\n.sc.tl{top:-1px;left:-1px;border-width:2px 0 0 2px}.sc.tr{top:-1px;right:-1px;border-width:2px 2px 0 0}\r\n.sc.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}.sc.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}\r\n.scan-icon svg{position:absolute;inset:16px;width:68px;height:68px;opacity:.45}\r\n.scanline-anim{position:absolute;width:100%;height:2px;background:linear-gradient(90deg,transparent,#7dd3fc,transparent);animation:scanmove 2s ease-in-out infinite;top:0}\r\n@keyframes scanmove{0%{top:4px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:96px;opacity:0}}\r\n\r\n.boot-lines{font-size:10px;color:var(--muted);width:min(240px,80vw);margin-bottom:24px;line-height:2.2}\r\n.bl{opacity:0;animation:fadein .3s forwards}\r\n.bl:nth-child(1){animation-delay:.3s}.bl:nth-child(2){animation-delay:.8s}\r\n.bl:nth-child(3){animation-delay:1.3s}.bl:nth-child(4){animation-delay:1.8s;color:var(--neon)}\r\n@keyframes fadein{to{opacity:1}}\r\n\r\n.start-btn{\r\n font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:4px;\r\n color:var(--bg);background:var(--neon);border:none;\r\n padding:15px 36px;cursor:pointer;\r\n clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);\r\n opacity:0;animation:btnshow .4s forwards 2.3s;\r\n transition:background .2s,transform .1s;\r\n \/* Mindest-Tippgr\u00f6\u00dfe f\u00fcr Mobile *\/\r\n min-height:50px;\r\n}\r\n.start-btn:hover{background:#00ffaa}.start-btn:active{transform:scale(.97)}\r\n@keyframes btnshow{to{opacity:1}}\r\n.version{position:absolute;bottom:14px;font-size:8px;color:var(--muted);letter-spacing:2px;text-align:center;padding:0 16px}\r\n\r\n\/* \u2500\u2500 INIT LOADER (neu) \u2500\u2500 *\/\r\n#init-loader{\r\n position:fixed;inset:0;z-index:500;background:var(--bg);\r\n display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;\r\n}\r\n.init-spinner{\r\n width:52px;height:52px;border:2px solid var(--neon-dim);\r\n border-top-color:var(--neon);border-radius:50%;\r\n animation:spin 1s linear infinite;\r\n}\r\n@keyframes spin{to{transform:rotate(360deg)}}\r\n.init-text{font-size:9px;color:var(--muted);letter-spacing:3px;text-align:center;line-height:2}\r\n.init-text span{color:var(--neon)}\r\n#init-retry{\r\n display:none;\r\n font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;\r\n color:var(--bg);background:#ff3355;border:none;\r\n padding:12px 24px;cursor:pointer;margin-top:10px;\r\n clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);\r\n}\r\n\r\n\/* \u2500\u2500 AR CONTAINER \u2500\u2500 *\/\r\n#ar-container{\r\n position:fixed;inset:0;display:none;width:100%;height:100%;\r\n \/* iOS Safari braucht expliziten z-index *\/\r\n z-index:1;\r\n}\r\n#ar-container a-scene{\r\n position:absolute !important;top:0 !important;left:0 !important;\r\n width:100% !important;height:100% !important;\r\n}\r\n#ar-container canvas{\r\n width:100% !important;height:100% !important;object-fit:cover !important;\r\n}\r\n#ar-container video{\r\n position:absolute !important;\r\n top:50% !important;left:50% !important;\r\n transform:translate(-50%,-50%) !important;\r\n width:100% !important;height:100% !important;\r\n object-fit:cover !important;\r\n min-width:100% !important;min-height:100% !important;\r\n \/* iOS braucht das explizit *\/\r\n -webkit-transform:translate(-50%,-50%) !important;\r\n}\r\n\r\n\/* \u2500\u2500 KAMERA OVERLAY \u2014 st\u00e4rkere Abdunkelung \u2500\u2500 *\/\r\n#cam-overlay{\r\n position:fixed;inset:0;z-index:99;pointer-events:none;display:none;\r\n}\r\n\/* Starkes Vignette rundum \u2014 haupts\u00e4chlich oben\/unten f\u00fcr HUD-Lesbarkeit *\/\r\n#cam-overlay .vignette{\r\n position:absolute;inset:0;\r\n background:\r\n \/* Oben: tief schwarz f\u00fcr Logo + Status *\/\r\n linear-gradient(to bottom,\r\n rgba(8,10,15,0.88) 0%,\r\n rgba(8,10,15,0.60) 12%,\r\n transparent 28%\r\n ),\r\n \/* Unten: tief schwarz f\u00fcr Button + Prompt *\/\r\n linear-gradient(to top,\r\n rgba(8,10,15,0.92) 0%,\r\n rgba(8,10,15,0.65) 14%,\r\n transparent 30%\r\n ),\r\n \/* Seiten: mittel *\/\r\n linear-gradient(to right,\r\n rgba(8,10,15,0.55) 0%,\r\n transparent 18%\r\n ),\r\n linear-gradient(to left,\r\n rgba(8,10,15,0.55) 0%,\r\n transparent 18%\r\n );\r\n}\r\n\/* Mittig: Kamera bleibt klar sichtbar \u2014 leichte Abdunkelung *\/\r\n#cam-overlay .vignette-center{\r\n position:absolute;inset:0;\r\n background:radial-gradient(ellipse 60% 50% at 50% 48%, transparent 40%, rgba(8,10,15,0.45) 100%);\r\n}\r\n#cam-overlay .scanline-sweep{\r\n position:absolute;left:0;right:0;height:1px;\r\n background:linear-gradient(90deg,transparent,#7dd3fc20,#7dd3fc50,#7dd3fc20,transparent);\r\n animation:sweepline 4s linear infinite;opacity:0.4;\r\n}\r\n@keyframes sweepline{0%{top:-1px}100%{top:100%}}\r\n#cam-overlay .corner{position:absolute;width:26px;height:26px}\r\n#cam-overlay .corner.tl{top:68px;left:14px;border-top:1.5px solid #7dd3fc70;border-left:1.5px solid #7dd3fc70}\r\n#cam-overlay .corner.tr{top:68px;right:14px;border-top:1.5px solid #7dd3fc70;border-right:1.5px solid #7dd3fc70}\r\n#cam-overlay .corner.bl{bottom:198px;left:14px;border-bottom:1.5px solid #7dd3fc70;border-left:1.5px solid #7dd3fc70}\r\n#cam-overlay .corner.br{bottom:198px;right:14px;border-bottom:1.5px solid #7dd3fc70;border-right:1.5px solid #7dd3fc70}\r\n#cam-overlay .grid-lines{\r\n position:absolute;inset:0;\r\n background-image:\r\n linear-gradient(rgba(125,211,252,0.03) 1px,transparent 1px),\r\n linear-gradient(90deg,rgba(125,211,252,0.03) 1px,transparent 1px);\r\n background-size:44px 44px;\r\n}\r\n#cam-overlay.scanning .scanline-sweep{animation-duration:.8s;opacity:0.8}\r\n\r\n\/* \u2500\u2500 HUD \u2500\u2500 *\/\r\n#hud{position:fixed;inset:0;z-index:100;pointer-events:none;display:none}\r\n.hud-top{\r\n position:absolute;top:0;left:0;right:0;\r\n padding:env(safe-area-inset-top, 14px) 18px 14px;\r\n padding-top:max(env(safe-area-inset-top), 14px);\r\n display:flex;justify-content:space-between;align-items:flex-start;\r\n}\r\n.hud-logo{\r\n font-family:'Orbitron',sans-serif;font-weight:900;font-size:15px;\r\n color:var(--neon);letter-spacing:4px;text-shadow:0 0 20px #00ff8860;\r\n}\r\n.hud-status{font-size:9px;color:#8ab0c8;letter-spacing:2px;text-align:right;line-height:1.9}\r\n.sdot{\r\n display:inline-block;width:6px;height:6px;border-radius:50%;\r\n background:var(--neon);margin-right:4px;vertical-align:middle;\r\n animation:blink 1.2s ease-in-out infinite;\r\n}\r\n@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}\r\n.hc{position:absolute;width:40px;height:40px}\r\n.hc.tl{top:58px;left:14px;border-top:1px solid var(--neon-dim);border-left:1px solid var(--neon-dim)}\r\n.hc.tr{top:58px;right:14px;border-top:1px solid var(--neon-dim);border-right:1px solid var(--neon-dim)}\r\n.hc.bl{bottom:190px;left:14px;border-bottom:1px solid var(--neon-dim);border-left:1px solid var(--neon-dim)}\r\n.hc.br{bottom:190px;right:14px;border-bottom:1px solid var(--neon-dim);border-right:1px solid var(--neon-dim)}\r\n.scan-prompt{\r\n position:absolute;bottom:172px;left:50%;transform:translateX(-50%);\r\n font-size:9px;color:#8ab0c8;letter-spacing:3px;white-space:nowrap;\r\n animation:promptpulse 2s ease-in-out infinite;\r\n \/* Leichter Hintergrund f\u00fcr bessere Lesbarkeit *\/\r\n background:rgba(8,10,15,0.5);padding:4px 10px;\r\n}\r\n@keyframes promptpulse{0%,100%{opacity:.5}50%{opacity:1}}\r\n\r\n\/* \u2500\u2500 SCAN BUTTON \u2500\u2500 *\/\r\n#scan-btn-wrap{\r\n position:fixed;bottom:max(28px, env(safe-area-inset-bottom, 0px));\r\n left:50%;transform:translateX(-50%);\r\n z-index:201;display:none;flex-direction:column;align-items:center;gap:10px;\r\n transition:opacity .35s, transform .35s;\r\n}\r\n#scan-btn-wrap.hidden{\r\n opacity:0;pointer-events:none;transform:translateX(-50%) translateY(24px);\r\n}\r\n#scan-status{\r\n font-family:'Share Tech Mono',monospace;font-size:9px;\r\n color:#7dd3fc99;letter-spacing:2px;text-align:center;min-height:14px;\r\n \/* Hintergrund f\u00fcr Lesbarkeit *\/\r\n background:rgba(8,10,15,0.6);padding:2px 8px;\r\n}\r\n#scan-btn{\r\n width:72px;height:72px;border-radius:50%;\r\n background:rgba(15,19,25,0.85);border:2px solid var(--neon);\r\n color:var(--neon);font-family:'Orbitron',sans-serif;\r\n cursor:pointer;\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;\r\n transition:background .2s,box-shadow .2s;\r\n touch-action:manipulation;pointer-events:all;\r\n \/* iOS: verhindert Doppeltipp-Zoom *\/\r\n touch-action:manipulation;\r\n}\r\n#scan-btn:active{transform:scale(0.93)}\r\n#scan-btn.scanning{animation:btnpulse .7s ease-in-out infinite}\r\n@keyframes btnpulse{\r\n 0%,100%{box-shadow:0 0 10px #7dd3fc40;border-color:#7dd3fc}\r\n 50%{box-shadow:0 0 35px #7dd3fccc;border-color:#a5e3ff}\r\n}\r\n#scan-btn svg{width:22px;height:22px;flex-shrink:0}\r\n#scan-btn .btn-label{font-size:7px;letter-spacing:3px}\r\n\r\n\/* \u2500\u2500 INFO CARD \u2500\u2500 *\/\r\n#info-card{\r\n position:fixed;bottom:0;left:0;right:0;z-index:200;\r\n background:var(--bg2);border-top:1px solid var(--neon-dim);\r\n padding:18px 22px max(30px, env(safe-area-inset-bottom, 30px));\r\n transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.3,1);\r\n pointer-events:all;max-height:58vh;overflow-y:auto;\r\n \/* iOS Momentum-Scrolling *\/\r\n -webkit-overflow-scrolling:touch;\r\n}\r\n#info-card.visible{transform:translateY(0)}\r\n.card-sl{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);animation:csl 3s linear infinite}\r\n@keyframes csl{0%{transform:scaleX(0);opacity:0}20%{opacity:1}50%{transform:scaleX(1)}80%{opacity:1}100%{transform:scaleX(0) translateX(200%);opacity:0}}\r\n.card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}\r\n.card-id{font-size:9px;color:var(--muted);letter-spacing:3px;margin-bottom:3px}\r\n.card-name{font-family:'Orbitron',sans-serif;font-weight:700;font-size:18px;color:var(--neon);letter-spacing:2px;text-shadow:0 0 20px #00ff8860;line-height:1.1}\r\n.card-close{\r\n background:none;border:1px solid var(--muted);color:var(--muted);\r\n font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;\r\n padding:8px 12px;cursor:pointer;pointer-events:all;\r\n transition:border-color .2s,color .2s;flex-shrink:0;margin-left:10px;margin-top:12px;\r\n min-height:38px;\/* Tippgr\u00f6\u00dfe *\/\r\n}\r\n.card-close:hover{border-color:var(--neon);color:var(--neon)}\r\n.card-div{height:1px;background:linear-gradient(90deg,var(--neon-dim),transparent);margin-bottom:12px}\r\n.card-source{display:flex;align-items:center;gap:8px;margin-bottom:10px}\r\n.source-plat{font-size:9px;letter-spacing:2px;color:var(--bg);background:var(--neon);padding:3px 8px;clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);font-weight:bold}\r\n.source-cnt{font-size:9px;color:var(--muted);letter-spacing:1px}\r\n.card-desc{font-size:11px;color:#7ab898;line-height:1.8;margin-bottom:14px}\r\n.card-links{display:flex;flex-direction:column;gap:7px}\r\n.card-link{\r\n display:flex;align-items:center;gap:10px;border:1px solid var(--neon-dim);\r\n padding:12px 13px;text-decoration:none;color:var(--neon);font-size:11px;letter-spacing:1px;\r\n transition:background .2s,border-color .2s;pointer-events:all;position:relative;overflow:hidden;\r\n min-height:44px;\/* iOS Mindest-Tippgr\u00f6\u00dfe *\/\r\n}\r\n.card-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--neon);transform:scaleY(0);transition:transform .2s;transform-origin:bottom}\r\n.card-link:hover::before{transform:scaleY(1)}\r\n.card-link:hover{background:var(--neon-glow);border-color:var(--neon)}\r\n.link-arrow{font-size:13px}.link-label{flex:1}.link-ext{font-size:9px;color:var(--muted)}\r\n\r\n\/* \u2500\u2500 FEEDBACK \u2500\u2500 *\/\r\n#found{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:150;text-align:center;pointer-events:none;opacity:0;transition:opacity .3s}\r\n#found.show{opacity:1}\r\n.found-ring{width:86px;height:86px;border-radius:50%;border:2px solid var(--neon);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px var(--neon-glow),inset 0 0 30px var(--neon-glow);animation:ringpop .5s ease-out}\r\n@keyframes ringpop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}\r\n.found-check{font-size:30px;color:#7dd3fc}\r\n.found-txt{font-family:'Orbitron',sans-serif;font-size:9px;color:#7dd3fc;letter-spacing:4px}\r\n\r\n#flash{position:fixed;inset:0;z-index:500;background:#7dd3fc;opacity:0;pointer-events:none;transition:opacity .08s}\r\n#flash.on{opacity:.18}\r\n\r\n#no-data{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:300;pointer-events:none;opacity:0;transition:opacity .4s;text-align:center;width:min(260px,80vw)}\r\n#no-data.show{opacity:1}\r\n.nd-box{border:1px solid #ff3355;background:#0a0508;padding:20px 24px;position:relative;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%)}\r\n.nd-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#ff3355,transparent)}\r\n.nd-icon{font-family:'Orbitron',sans-serif;font-size:26px;color:#ff3355;margin-bottom:8px;display:block}\r\n.nd-title{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:#ff3355;letter-spacing:3px;margin-bottom:6px}\r\n.nd-sub{font-size:9px;color:#7a3344;letter-spacing:2px;line-height:1.7}\r\n\r\n#info-card::-webkit-scrollbar{width:2px}\r\n#info-card::-webkit-scrollbar-thumb{background:var(--neon-dim)}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"startup\">\r\n <div class=\"logo\">IDENTITY RECOGNITION SYSTEM<\/div>\r\n <div class=\"logo-sub\">v2.4<\/div>\r\n <div class=\"scan-icon\">\r\n <div class=\"sc tl\"><\/div><div class=\"sc tr\"><\/div><div class=\"sc bl\"><\/div><div class=\"sc br\"><\/div>\r\n <svg viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <circle cx=\"30\" cy=\"22\" r=\"10\" stroke=\"#00ff88\" stroke-width=\"1.5\"\/>\r\n <path d=\"M10 52c0-11 9-20 20-20s20 9 20 20\" stroke=\"#00ff88\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <line x1=\"4\" y1=\"22\" x2=\"12\" y2=\"22\" stroke=\"#00ff88\" stroke-width=\"1\"\/>\r\n <line x1=\"48\" y1=\"22\" x2=\"56\" y2=\"22\" stroke=\"#00ff88\" stroke-width=\"1\"\/>\r\n <\/svg>\r\n <div class=\"scanline-anim\"><\/div>\r\n <\/div>\r\n <div class=\"boot-lines\">\r\n <div class=\"bl\">> Initialisiere Kamera-Modul...<\/div>\r\n <div class=\"bl\">> Lade Online-Datenbank...<\/div>\r\n <div class=\"bl\">> Initialisiere verschl\u00fcsselten Transfer...<\/div>\r\n <div class=\"bl\">> SYSTEM BEREIT \/\/ SYSTEM READY \u2713<\/div>\r\n <\/div>\r\n <button class=\"start-btn\" id=\"startBtn\">SCAN STARTEN<\/button>\r\n <div class=\"version\">IDENTITY RECOGNITION SYSTEM \u00b7 BUILD 2024.04 \u00b7 ENCRYPTED<\/div>\r\n<\/div>\r\n\r\n<!-- Init-Loader: zeigt Fortschritt w\u00e4hrend AR l\u00e4dt -->\r\n<div id=\"init-loader\">\r\n <div class=\"init-spinner\"><\/div>\r\n <div class=\"init-text\">\r\n KAMERA WIRD GESTARTET<br>\r\n <span id=\"init-msg\">BITTE WARTEN \u00b7 PLEASE WAIT<\/span>\r\n <\/div>\r\n <button id=\"init-retry\" onclick=\"retryAR()\">\u21ba NEU STARTEN<\/button>\r\n<\/div>\r\n\r\n<div id=\"ar-container\"><\/div>\r\n\r\n<div id=\"cam-overlay\">\r\n <div class=\"grid-lines\"><\/div>\r\n <div class=\"vignette\"><\/div>\r\n <div class=\"vignette-center\"><\/div>\r\n <div class=\"scanline-sweep\"><\/div>\r\n <div class=\"corner tl\"><\/div><div class=\"corner tr\"><\/div>\r\n <div class=\"corner bl\"><\/div><div class=\"corner br\"><\/div>\r\n<\/div>\r\n\r\n<div id=\"hud\">\r\n <div class=\"hud-top\">\r\n <div class=\"hud-logo\">FACE\/\/SCAN<\/div>\r\n <div class=\"hud-status\"><span class=\"sdot\"><\/span>LIVE<br>SCANNING \u00b7 AKTIV<\/div>\r\n <\/div>\r\n <div class=\"hc tl\"><\/div><div class=\"hc tr\"><\/div><div class=\"hc bl\"><\/div><div class=\"hc br\"><\/div>\r\n <div class=\"scan-prompt\">FOTO AUSRICHTEN \u00b7 DANN SCAN DR\u00dcCKEN<\/div>\r\n<\/div>\r\n\r\n<div id=\"found\">\r\n <div class=\"found-ring\"><div class=\"found-check\">\u2713<\/div><\/div>\r\n <div class=\"found-txt\">IDENTIT\u00c4T ERKANNT<\/div>\r\n<\/div>\r\n<div id=\"no-data\">\r\n <div class=\"nd-box\">\r\n <span class=\"nd-icon\">\u26a0<\/span>\r\n <div class=\"nd-title\">KEINE DATEN GEFUNDEN<\/div>\r\n <div class=\"nd-sub\">NO DATA FOUND<br>SUBJEKT NICHT IN DATENBANK<br>SUBJECT NOT IN DATABASE<\/div>\r\n <\/div>\r\n<\/div>\r\n<div id=\"flash\"><\/div>\r\n\r\n<div id=\"info-card\">\r\n <div class=\"card-sl\"><\/div>\r\n <div class=\"card-header\">\r\n <div>\r\n <div class=\"card-id\" id=\"cid\">SUBJEKT \u00b7 001<\/div>\r\n <div class=\"card-name\" id=\"cname\">\u2014<\/div>\r\n <\/div>\r\n <button class=\"card-close\" id=\"closeCard\">\u2715 CLOSE<\/button>\r\n <\/div>\r\n <div class=\"card-div\"><\/div>\r\n <div class=\"card-source\" id=\"csource\"><\/div>\r\n <div class=\"card-desc\" id=\"cdesc\"><\/div>\r\n <div class=\"card-links\" id=\"clinks\"><\/div>\r\n<\/div>\r\n\r\n<div id=\"scan-btn-wrap\">\r\n <div id=\"scan-status\"><\/div>\r\n <button id=\"scan-btn\" disabled>\r\n <svg viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <circle cx=\"11\" cy=\"8\" r=\"4\" stroke=\"#7dd3fc\" stroke-width=\"1.5\"\/>\r\n <path d=\"M3 20c0-4.4 3.6-8 8-8s8 3.6 8 8\" stroke=\"#7dd3fc\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <line x1=\"2\" y1=\"11\" x2=\"5\" y2=\"11\" stroke=\"#7dd3fc\" stroke-width=\"1\"\/>\r\n <line x1=\"17\" y1=\"11\" x2=\"20\" y2=\"11\" stroke=\"#7dd3fc\" stroke-width=\"1\"\/>\r\n <\/svg>\r\n <span class=\"btn-label\">SCAN<\/span>\r\n <\/button>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \u2550\u2550\u2550 DATENBANK \u2550\u2550\u2550\r\nconst DB = {\r\n laeticia: {\r\n id:\"001\", name:\"Laeticia Gomez\", platform:\"FRANKFURTER ALLGEMEINE\", count:\"1 Beitrag \/\/ 1 post\",\r\n desc:\"Gefunden in 1 \u00f6ffentlichem Beitrag. Identit\u00e4t best\u00e4tigt durch Gesichtsabgleich. \/\/ Found in 1 public post. Identity confirmed via facial recognition.\",\r\n links:[{label:\"Zum Beitrag \/\/ To Post\", url:\"https:\/\/magnificum.net\/wp-content\/uploads\/Laeticia-Gomez-in-der-Frankfurter-Allgemeine.png\"}]\r\n },\r\n portia: {\r\n id:\"002\", name:\"Portia Sung\", platform:\"INSTAPIC\", count:\"1 Beitrag \/\/ 1 post\",\r\n desc:\"Gefunden in 1 \u00f6ffentlichen Instapic-Beitrag. Identit\u00e4t best\u00e4tigt durch Bildabgleich. \/\/ Found in 1 public Instapic post. Identity confirmed via image matching.\",\r\n links:[{label:\"Zum Beitrag \/\/ To Post\", url:\"https:\/\/magnificum.net\/wp-content\/uploads\/PortiaSung.png\"}]\r\n }\r\n};\r\n\r\nfunction getCharacter(i) {\r\n if (i <= 1) return DB.laeticia;\r\n if (i === 2) return DB.portia;\r\n return null;\r\n}\r\n\r\nconst MIND_URL = \"https:\/\/magnificum.net\/wp-content\/uploads\/targets-8.mind\";\r\nconst TARGET_COUNT = 3;\r\nconst SCAN_DURATION = 2500;\r\n\r\n\/\/ \u2500\u2500 DOM-Referenzen \u2500\u2500\r\nconst scanBtnWrap = document.getElementById('scan-btn-wrap');\r\nconst scanBtn = document.getElementById('scan-btn');\r\nconst scanStatusEl = document.getElementById('scan-status');\r\nconst infoCard = document.getElementById('info-card');\r\nconst initLoader = document.getElementById('init-loader');\r\nconst initMsg = document.getElementById('init-msg');\r\nconst initRetry = document.getElementById('init-retry');\r\nconst arContainer = document.getElementById('ar-container');\r\nconst camOverlay = document.getElementById('cam-overlay');\r\nconst hudEl = document.getElementById('hud');\r\n\r\n\/\/ \u2500\u2500 State \u2500\u2500\r\nlet sceneEl = null;\r\nlet arSystemReady = false;\r\nlet isScanning = false;\r\nlet noDataTimer = null;\r\nlet initTimeout = null; \/\/ Watchdog-Timer\r\nlet arStarted = false; \/\/ Wurde AR schon einmal gestartet?\r\n\r\nconst targetVisible = new Array(TARGET_COUNT).fill(false);\r\n\r\nfunction getFirstVisibleChar() {\r\n for (let i = 0; i < TARGET_COUNT; i++) {\r\n if (targetVisible[i]) return getCharacter(i);\r\n }\r\n return null;\r\n}\r\n\r\n\/\/ \u2500\u2500 UI Helfer \u2500\u2500\r\nfunction setScanReady(ready) {\r\n scanBtn.disabled = !ready;\r\n scanBtn.style.opacity = ready ? '1' : '0.45';\r\n scanStatusEl.textContent = ready ? 'BEREIT \u00b7 READY' : 'INITIALISIERE\u2026';\r\n}\r\nfunction hideScanBtn() {\r\n scanBtnWrap.classList.add('hidden');\r\n}\r\nfunction showScanBtn() {\r\n scanBtnWrap.classList.remove('hidden');\r\n}\r\n\r\nfunction showInitLoader(msg) {\r\n initMsg.textContent = msg || 'BITTE WARTEN \u00b7 PLEASE WAIT';\r\n initRetry.style.display = 'none';\r\n initLoader.style.display = 'flex';\r\n}\r\nfunction hideInitLoader() {\r\n initLoader.style.display = 'none';\r\n clearTimeout(initTimeout);\r\n}\r\nfunction showInitError(msg) {\r\n initMsg.textContent = msg || 'FEHLER \u00b7 ERROR';\r\n initRetry.style.display = 'block';\r\n clearTimeout(initTimeout);\r\n}\r\n\r\n\/\/ \u2500\u2500 Watchdog: wenn AR nach 20s nicht ready \u2192 Retry anzeigen \u2500\u2500\r\nfunction startInitWatchdog() {\r\n clearTimeout(initTimeout);\r\n initTimeout = setTimeout(() => {\r\n if (!arSystemReady) {\r\n showInitError('TIMEOUT \u00b7 BITTE NOCHMAL VERSUCHEN');\r\n }\r\n }, 20000);\r\n}\r\n\r\n\/\/ \u2500\u2500 Kamera-Berechtigung vorher holen (verhindert h\u00e4ngende Initialisierung) \u2500\u2500\r\nasync function requestCameraPermission() {\r\n try {\r\n \/\/ Kurz aufmachen und gleich wieder schlie\u00dfen \u2014 nur um Berechtigung zu triggern\r\n const stream = await navigator.mediaDevices.getUserMedia({\r\n video: { facingMode: 'environment' },\r\n audio: false\r\n });\r\n \/\/ Stream sofort stoppen \u2014 MindAR \u00f6ffnet ihn selbst neu\r\n stream.getTracks().forEach(t => t.stop());\r\n return true;\r\n } catch (err) {\r\n console.error('Kamera-Berechtigung verweigert:', err);\r\n return false;\r\n }\r\n}\r\n\r\n\/\/ \u2500\u2500 AR aufbauen \u2500\u2500\r\nfunction destroyAR() {\r\n arSystemReady = false;\r\n setScanReady(false);\r\n clearTimeout(initTimeout);\r\n targetVisible.fill(false);\r\n\r\n \/\/ Laufende Kamera-Streams stoppen\r\n document.querySelectorAll('video').forEach(v => {\r\n if (v.srcObject) {\r\n v.srcObject.getTracks().forEach(t => t.stop());\r\n v.srcObject = null;\r\n }\r\n });\r\n\r\n if (sceneEl) {\r\n \/\/ MindAR System sauber beenden\r\n try {\r\n const sys = sceneEl.systems && sceneEl.systems['mindar-image-system'];\r\n if (sys && typeof sys.stop === 'function') sys.stop();\r\n } catch(e) {}\r\n if (sceneEl.parentNode) sceneEl.parentNode.removeChild(sceneEl);\r\n sceneEl = null;\r\n }\r\n}\r\n\r\nfunction buildAR() {\r\n destroyAR();\r\n showInitLoader('KAMERA WIRD GESTARTET \u00b7 STARTING CAMERA');\r\n startInitWatchdog();\r\n\r\n const scene = document.createElement('a-scene');\r\n scene.setAttribute('mindar-image',\r\n `imageTargetSrc: ${MIND_URL}; autoStart: true; uiLoading: no; uiError: no; uiScanning: no; filterMinCF: 0.001; filterBeta: 1000;`\r\n );\r\n scene.setAttribute('color-space', 'sRGB');\r\n scene.setAttribute('renderer', 'colorManagement: true, physicallyCorrectLights');\r\n scene.setAttribute('vr-mode-ui', 'enabled: false');\r\n scene.setAttribute('device-orientation-permission-ui', 'enabled: false');\r\n scene.setAttribute('embedded', '');\r\n scene.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%';\r\n\r\n const cam = document.createElement('a-camera');\r\n cam.setAttribute('position', '0 0 0');\r\n cam.setAttribute('look-controls', 'enabled: false');\r\n cam.setAttribute('cursor', 'rayOrigin: mouse');\r\n scene.appendChild(cam);\r\n\r\n for (let i = 0; i < TARGET_COUNT; i++) {\r\n const entity = document.createElement('a-entity');\r\n entity.setAttribute('mindar-image-target', `targetIndex: ${i}`);\r\n const plane = document.createElement('a-plane');\r\n plane.setAttribute('position', '0 0 0.001');\r\n plane.setAttribute('width', '1');\r\n plane.setAttribute('height', '0.1');\r\n plane.setAttribute('material', 'opacity: 0.0');\r\n entity.appendChild(plane);\r\n entity.addEventListener('targetFound', () => { targetVisible[i] = true; });\r\n entity.addEventListener('targetLost', () => { targetVisible[i] = false; });\r\n scene.appendChild(entity);\r\n }\r\n\r\n \/\/ AR bereit\r\n scene.addEventListener('arReady', () => {\r\n arSystemReady = true;\r\n hideInitLoader();\r\n setScanReady(true);\r\n\r\n \/\/ Video-Element auf Vollbild zwingen (iOS braucht Verz\u00f6gerung)\r\n function fixVideo() {\r\n const videos = document.querySelectorAll('#ar-container video');\r\n videos.forEach(v => {\r\n v.setAttribute('playsinline', '');\r\n v.setAttribute('webkit-playsinline', '');\r\n v.style.cssText =\r\n 'position:absolute !important;top:50% !important;left:50% !important;' +\r\n 'transform:translate(-50%,-50%) !important;' +\r\n '-webkit-transform:translate(-50%,-50%) !important;' +\r\n 'width:100% !important;height:100% !important;' +\r\n 'object-fit:cover !important;min-width:100% !important;min-height:100% !important;' +\r\n 'z-index:0 !important;';\r\n });\r\n }\r\n fixVideo();\r\n setTimeout(fixVideo, 500);\r\n setTimeout(fixVideo, 1500);\r\n });\r\n\r\n \/\/ AR Fehler abfangen\r\n scene.addEventListener('arError', (e) => {\r\n console.error('AR Error:', e);\r\n showInitError('KAMERA-FEHLER \u00b7 RETRY');\r\n });\r\n\r\n sceneEl = scene;\r\n arContainer.appendChild(scene);\r\n}\r\n\r\n\/\/ \u2500\u2500 Neu starten (Retry-Button) \u2500\u2500\r\nfunction retryAR() {\r\n initMsg.textContent = 'NEUSTART \u00b7 RESTARTING\u2026';\r\n initRetry.style.display = 'none';\r\n setTimeout(buildAR, 300);\r\n}\r\nwindow.retryAR = retryAR;\r\n\r\n\/\/ \u2500\u2500 Scan ausl\u00f6sen \u2500\u2500\r\nfunction triggerScan() {\r\n if (isScanning || !arSystemReady) return;\r\n isScanning = true;\r\n hideNoData();\r\n\r\n \/\/ Snapshot des aktuell sichtbaren Targets\r\n const foundChar = getFirstVisibleChar();\r\n\r\n scanBtn.classList.add('scanning');\r\n scanBtn.disabled = true;\r\n camOverlay.classList.add('scanning');\r\n scanStatusEl.textContent = 'ANALYSIERE \u00b7 \u00b7 \u00b7';\r\n\r\n setTimeout(() => {\r\n scanBtn.classList.remove('scanning');\r\n camOverlay.classList.remove('scanning');\r\n isScanning = false;\r\n\r\n if (foundChar) {\r\n scanStatusEl.textContent = 'IDENTIT\u00c4T ERKANNT \u2713';\r\n showCard(foundChar);\r\n } else {\r\n scanBtn.disabled = false;\r\n scanStatusEl.textContent = 'KEINE DATEN GEFUNDEN';\r\n showNoData();\r\n setTimeout(() => { if (!isScanning) scanStatusEl.textContent = 'BEREIT \u00b7 READY'; }, 3000);\r\n }\r\n }, SCAN_DURATION);\r\n}\r\n\r\nscanBtn.addEventListener('click', triggerScan);\r\n\r\ndocument.getElementById('closeCard').addEventListener('click', () => {\r\n infoCard.classList.remove('visible');\r\n showScanBtn();\r\n scanBtn.disabled = false;\r\n scanStatusEl.textContent = 'BEREIT \u00b7 READY';\r\n});\r\n\r\nfunction showNoData() {\r\n clearTimeout(noDataTimer);\r\n document.getElementById('no-data').classList.add('show');\r\n noDataTimer = setTimeout(hideNoData, 3000);\r\n}\r\nfunction hideNoData() {\r\n clearTimeout(noDataTimer);\r\n document.getElementById('no-data').classList.remove('show');\r\n}\r\n\r\n\/\/ \u2500\u2500 App starten \u2500\u2500\r\ndocument.getElementById('startBtn').addEventListener('click', async () => {\r\n document.getElementById('startup').style.display = 'none';\r\n arContainer.style.display = 'block';\r\n hudEl.style.display = 'block';\r\n camOverlay.style.display = 'block';\r\n scanBtnWrap.style.display = 'flex';\r\n\r\n \/\/ Zuerst Kamera-Berechtigung holen\r\n showInitLoader('KAMERA-ZUGRIFF WIRD ANGEFRAGT \u00b7 REQUESTING CAMERA');\r\n const granted = await requestCameraPermission();\r\n\r\n if (!granted) {\r\n showInitError('KAMERA-ZUGRIFF VERWEIGERT \u00b7 PLEASE ALLOW CAMERA');\r\n return;\r\n }\r\n\r\n \/\/ Kurze Pause damit der Browser den Kamera-Stream vollst\u00e4ndig freigibt\r\n setTimeout(buildAR, 400);\r\n});\r\n\r\n\/\/ \u2500\u2500 Sichtbarkeit: bei Tab-Wechsel neu aufbauen \u2500\u2500\r\ndocument.addEventListener('visibilitychange', () => {\r\n if (!document.hidden && arStarted && arContainer.style.display !== 'none') {\r\n buildAR();\r\n }\r\n});\r\n\r\n\/\/ \u2500\u2500 Info-Card anzeigen \u2500\u2500\r\nfunction showCard(c) {\r\n if (!c) return;\r\n const flash = document.getElementById('flash');\r\n flash.classList.add('on');\r\n setTimeout(() => flash.classList.remove('on'), 180);\r\n const found = document.getElementById('found');\r\n found.classList.add('show');\r\n setTimeout(() => found.classList.remove('show'), 1800);\r\n\r\n document.getElementById('cid').textContent = 'SUBJEKT \u00b7 ' + c.id;\r\n document.getElementById('cname').textContent = c.name;\r\n document.getElementById('csource').innerHTML =\r\n `<span class=\"source-plat\">${c.platform}<\/span><span class=\"source-cnt\">${c.count}<\/span>`;\r\n document.getElementById('cdesc').textContent = c.desc;\r\n document.getElementById('clinks').innerHTML = c.links.map(l =>\r\n `<a class=\"card-link\" href=\"${l.url}\" target=\"_blank\" rel=\"noopener\">\r\n <span class=\"link-arrow\">\u2192<\/span>\r\n <span class=\"link-label\">${l.label}<\/span>\r\n <span class=\"link-ext\">\u2197<\/span>\r\n <\/a>`\r\n ).join('');\r\n infoCard.classList.add('visible');\r\n hideScanBtn();\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FACE\/\/SCAN IDENTITY RECOGNITION SYSTEM v2.4 > Initialisiere Kamera-Modul… > Lade Online-Datenbank… > Initialisiere verschl\u00fcsselten Transfer… > SYSTEM BEREIT \/\/ SYSTEM READY \u2713 SCAN STARTEN IDENTITY RECOGNITION SYSTEM \u00b7 BUILD 2024.04 \u00b7 ENCRYPTED KAMERA WIRD GESTARTET BITTE WARTEN \u00b7 PLEASE WAIT \u21ba NEU STARTEN FACE\/\/SCAN LIVESCANNING \u00b7 AKTIV FOTO AUSRICHTEN \u00b7 DANN SCAN DR\u00dcCKEN \u2713 IDENTIT\u00c4T […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-29558","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/29558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/comments?post=29558"}],"version-history":[{"count":0,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/29558\/revisions"}],"wp:attachment":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/media?parent=29558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}