CYBER_SCAN \/\/ Integrated Monitor<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <style>\n :root {\n --neon-cyan: #00f3ff;\n --neon-pink: #ff00ff;\n --dark-bg: #050505;\n --grid-color: rgba(0, 243, 255, 0.15); \/* \u30b0\u30ea\u30c3\u30c9\u3092\u5c11\u3057\u660e\u308b\u304f\u8abf\u6574 *\/\n --transition-speed: 0.4s;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; }\n\n body {\n background-color: var(--dark-bg);\n color: var(--neon-cyan);\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n padding: 20px;\n perspective: 1000px; \/* 3D\u52b9\u679c\u306e\u305f\u3081\u306b\u8ffd\u52a0 *\/\n }\n\n \/* --- \u5909\u66f4\u70b9: \u52d5\u304f\u80cc\u666f\u6f14\u51fa --- *\/\n .bg-grid-container {\n position: fixed;\n inset: 0;\n z-index: -1;\n overflow: hidden;\n transform-style: preserve-3d;\n }\n\n .bg-grid {\n position: absolute;\n inset: -100%; \/* \u753b\u9762\u5916\u307e\u3067\u5e83\u3052\u3066\u56de\u8ee2\u6642\u306e\u5207\u308c\u76ee\u3092\u96a0\u3059 *\/\n background-image: linear-gradient(var(--grid-color) 1px, transparent 1px),\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\n background-size: 60px 60px;\n \n \/* 3D\u56de\u8ee2\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u9069\u7528 *\/\n transform-origin: center center;\n transform: rotateX(70deg); \/* \u30b0\u30ea\u30c3\u30c9\u3092\u5bdd\u304b\u305b\u3066\u5965\u884c\u304d\u3092\u51fa\u3059 *\/\n animation: grid-scroll 5s linear infinite;\n }\n\n \/* \u30b0\u30ea\u30c3\u30c9\u304c\u624b\u524d\u306b\u6d41\u308c\u3066\u304f\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n @keyframes grid-scroll {\n 0% { background-position: 0 0; }\n 100% { background-position: 0 60px; \/* background-size\u306e\u9ad8\u3055\u306b\u5408\u308f\u305b\u3066\u30eb\u30fc\u30d7 *\/ }\n }\n\n \/* \u9060\u304f\u3092\u6697\u304f\u3059\u308b\u30f4\u30a3\u30cd\u30c3\u30c8\u52b9\u679c *\/\n .bg-vignette {\n position: fixed;\n inset: 0;\n background: radial-gradient(circle at center, transparent 30%, var(--dark-bg) 90%);\n z-index: -1;\n pointer-events: none;\n }\n \/* --------------------------- *\/\n\n \/* \u8d77\u52d5\u753b\u9762 *\/\n #boot-screen {\n position: fixed;\n inset: 0;\n background: black;\n z-index: 2000;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n transition: opacity 1s;\n }\n\n \/* \u30e2\u30fc\u30c9\u5207\u66ff\u30b9\u30a4\u30c3\u30c1 *\/\n .mode-switcher {\n margin-bottom: 20px;\n display: flex;\n gap: 10px;\n z-index: 100;\n }\n\n .mode-btn {\n background: rgba(0, 243, 255, 0.1);\n border: 1px solid var(--neon-cyan);\n color: var(--neon-cyan);\n padding: 8px 20px;\n cursor: pointer;\n text-transform: uppercase;\n font-weight: bold;\n transition: all 0.3s;\n }\n\n .mode-btn.active {\n background: var(--neon-cyan);\n color: black;\n box-shadow: 0 0 15px var(--neon-cyan);\n }\n\n \/* \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30ca *\/\n .app-frame {\n width: 100%;\n max-width: 800px;\n background: rgba(5, 5, 10, 0.85); \/* \u80cc\u666f\u306e\u52d5\u304d\u304c\u898b\u3048\u308b\u3088\u3046\u306b\u5c11\u3057\u900f\u660e\u5ea6\u3092\u4e0a\u3052\u308b *\/\n border: 2px solid var(--neon-cyan);\n padding: 30px;\n position: relative;\n box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);\n clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);\n backdrop-filter: blur(5px); \/* \u3059\u308a\u30ac\u30e9\u30b9\u52b9\u679c\u3092\u8ffd\u52a0 *\/\n }\n\n \/* \u30e2\u30fc\u30c9\u5225\u306e\u8868\u793a\u5236\u5fa1 *\/\n .view-content { transition: opacity var(--transition-speed); }\n .hidden { display: none; opacity: 0; }\n\n \/* \u30b7\u30f3\u30d7\u30eb\u30e2\u30fc\u30c9\u7528 *\/\n #simple-view { text-align: center; padding: 40px 0; }\n .huge-fps {\n font-size: clamp(5rem, 20vw, 10rem);\n font-weight: 900;\n text-shadow: 0 0 20px var(--neon-cyan);\n }\n\n \/* \u30d7\u30ed\u30e2\u30fc\u30c9\u7528\uff08\u30b0\u30e9\u30d5\u3068\u8a73\u7d30\uff09 *\/\n #pro-view .graph-box {\n height: 200px;\n border-left: 2px solid var(--neon-pink);\n border-bottom: 2px solid var(--neon-pink);\n margin: 20px 0;\n position: relative;\n background: rgba(0, 243, 255, 0.02); \/* \u30b0\u30e9\u30d5\u80cc\u666f\u3092\u5c11\u3057\u660e\u308b\u304f *\/\n }\n\n canvas { width: 100%; height: 100%; }\n\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n margin-top: 20px;\n }\n\n @media (min-width: 600px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }\n\n .stat-card {\n background: rgba(0, 243, 255, 0.05);\n border: 1px solid rgba(0, 243, 255, 0.2);\n padding: 10px;\n }\n\n .label { font-size: 0.65rem; color: var(--neon-pink); text-transform: uppercase; }\n .val { font-size: 1.2rem; font-weight: bold; }\n\n \/* \u30a2\u30af\u30b7\u30e7\u30f3\u30dc\u30bf\u30f3 *\/\n .actions {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n flex-wrap: wrap;\n }\n\n .btn-action {\n flex: 1;\n padding: 12px;\n background: none;\n border: 1px solid var(--neon-cyan);\n color: var(--neon-cyan);\n cursor: pointer;\n font-weight: bold;\n transition: all 0.3s;\n }\n\n .btn-share { border-color: var(--neon-pink); color: var(--neon-pink); }\n .btn-action:hover { background: var(--neon-cyan); color: black; box-shadow: 0 0 15px var(--neon-cyan); }\n .btn-share:hover { background: var(--neon-pink); color: white; box-shadow: 0 0 15px var(--neon-pink); }\n\n\n \/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n @keyframes scanline {\n 0% { transform: translateY(-100%); }\n 100% { transform: translateY(100%); }\n }\n .scanline {\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, transparent, rgba(0, 243, 255, 0.1), transparent);\n height: 50px;\n animation: scanline 4s linear infinite;\n pointer-events: none;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"bg-grid-container\">\n <div class=\"bg-grid\"><\/div>\n <\/div>\n <div class=\"bg-vignette\"><\/div>\n <div id=\"boot-screen\">\n <div id=\"boot-text\" style=\"letter-spacing: 5px;\">SYSTEM_INITIALIZING…<\/div>\n <\/div>\n\n <div class=\"mode-switcher\">\n <button class=\"mode-btn active\" onclick=\"switchMode('simple')\">Minimal<\/button>\n <button class=\"mode-btn\" onclick=\"switchMode('pro')\">Pro Statistics<\/button>\n <\/div>\n\n <div class=\"app-frame\" id=\"capture-area\">\n <div class=\"scanline\"><\/div>\n <div style=\"font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 10px;\">SYS_MONITOR \/\/ V.2.1 (ANIMATED)<\/div>\n \n <div id=\"simple-view\" class=\"view-content\">\n <div class=\"huge-fps\" id=\"fps-simple\">—<\/div>\n <div style=\"color: var(--neon-pink); letter-spacing: 3px;\">CURRENT FPS<\/div>\n <\/div>\n\n <div id=\"pro-view\" class=\"view-content hidden\">\n <div style=\"display: flex; justify-content: space-between; align-items: baseline;\">\n <div>\n <div class=\"huge-fps\" id=\"fps-pro\" style=\"font-size: 4rem;\">—<\/div>\n <div style=\"font-size: 0.7rem; color: var(--neon-pink);\">REAL-TIME<\/div>\n <\/div>\n <div id=\"res-val\" style=\"font-size: 0.8rem; opacity: 0.8;\">—<\/div>\n <\/div>\n\n <div class=\"graph-box\">\n <canvas id=\"fps-graph\"><\/canvas>\n <\/div>\n\n <div class=\"stats-grid\">\n <div class=\"stat-card\"><div class=\"label\">Average<\/div><div class=\"val\" id=\"avg-fps\">—<\/div><\/div>\n <div class=\"stat-card\"><div class=\"label\">Min FPS<\/div><div class=\"val\" id=\"min-fps\">—<\/div><\/div>\n <div class=\"stat-card\"><div class=\"label\">Max FPS<\/div><div class=\"val\" id=\"max-fps\">—<\/div><\/div>\n <div class=\"stat-card\"><div class=\"label\">Frame Time<\/div><div class=\"val\" id=\"frame-time\">—<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"actions\">\n <button class=\"btn-action\" onclick=\"downloadImage()\">SAVE IMAGE<\/button>\n <button class=\"btn-action btn-share\" onclick=\"shareOnX()\">SHARE STATS<\/button>\n <\/div>\n <\/div>\n\n <script>\n let currentMode = 'simple';\n let fpsHistory = new Array(100).fill(0); \/\/ \u30b0\u30e9\u30d5\u306e\u89e3\u50cf\u5ea6\u3092\u5c11\u3057\u4e0a\u3052\u307e\u3057\u305f\n let maxFps = 0;\n const canvas = document.getElementById('fps-graph');\n const ctx = canvas.getContext('2d');\n\n \/\/ \u8d77\u52d5\u30b7\u30fc\u30af\u30a8\u30f3\u30b9\n window.addEventListener('load', () => {\n const bootText = document.getElementById('boot-text');\n \/\/ \u30bf\u30a4\u30d4\u30f3\u30b0\u98a8\u306e\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u8ffd\u52a0\n let text = \"SCANNING HARDWARE...\";\n let i = 0;\n setTimeout(() => {\n bootText.innerText = \"\";\n const typing = setInterval(() => {\n bootText.innerText += text[i];\n i++;\n if (i === text.length) clearInterval(typing);\n }, 50);\n }, 700);\n\n setTimeout(() => {\n bootText.innerText = \"ESTABLISHING NEURAL LINK...\";\n bootText.style.color = \"var(--neon-pink)\";\n }, 2500);\n\n setTimeout(() => {\n document.getElementById('boot-screen').style.opacity = '0';\n setTimeout(() => document.getElementById('boot-screen').style.display = 'none', 1000);\n startEngine();\n }, 3500);\n });\n\n function switchMode(mode) {\n currentMode = mode;\n document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\n event.target.classList.add('active');\n\n const sView = document.getElementById('simple-view');\n const pView = document.getElementById('pro-view');\n\n if (mode === 'simple') {\n sView.classList.remove('hidden');\n pView.classList.add('hidden');\n } else {\n sView.classList.add('hidden');\n pView.classList.remove('hidden');\n resizeCanvas();\n }\n }\n\n function resizeCanvas() {\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n }\n\n function startEngine() {\n let lastTime = performance.now();\n let frames = 0;\n document.getElementById('res-val').innerText = `RES: ${window.screen.width} x ${window.screen.height}`;\n\n function loop() {\n const now = performance.now();\n const delta = now - lastTime;\n frames++;\n\n if (delta >= 500) { \/\/ 0.5\u79d2\u3054\u3068\u306b\u66f4\u65b0\n const fps = Math.round((frames * 1000) \/ delta);\n \n \/\/ \u30c7\u30fc\u30bf\u66f4\u65b0\n fpsHistory.push(fps);\n fpsHistory.shift();\n maxFps = Math.max(...fpsHistory, 60); \/\/ \u6700\u4f4e\u3067\u308260\u3092\u57fa\u6e96\u306b\u3059\u308b\n\n \/\/ UI\u66f4\u65b0\n document.getElementById('fps-simple').innerText = fps;\n document.getElementById('fps-pro').innerText = fps;\n \n const validFps = fpsHistory.filter(v => v > 0);\n if (validFps.length > 0) {\n document.getElementById('avg-fps').innerText = Math.round(validFps.reduce((a,b)=>a+b)\/validFps.length);\n document.getElementById('min-fps').innerText = Math.min(...validFps);\n document.getElementById('max-fps').innerText = Math.max(...validFps);\n }\n document.getElementById('frame-time').innerText = (delta \/ frames).toFixed(1) + \"ms\";\n\n if (currentMode === 'pro') drawGraph();\n\n frames = 0;\n lastTime = now;\n }\n requestAnimationFrame(loop);\n }\n requestAnimationFrame(loop);\n }\n\n function drawGraph() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n \/\/ \u30b0\u30e9\u30d5\u306e\u7dda\u3092\u5149\u3089\u305b\u308b\n ctx.strokeStyle = '#ff00ff';\n ctx.lineWidth = 2;\n ctx.shadowBlur = 10;\n ctx.shadowColor = '#ff00ff';\n \n ctx.beginPath();\n const slice = canvas.width \/ (fpsHistory.length - 1);\n fpsHistory.forEach((v, i) => {\n const x = i * slice;\n \/\/ \u30b0\u30e9\u30d5\u306e\u4e0a\u9650\u3092\u52d5\u7684\u306b\u8abf\u6574\uff08\u6700\u5927\u5024\u306e1.2\u500d\uff09\n const y = canvas.height - (v \/ (maxFps * 1.2)) * canvas.height;\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n \n \/\/ \u5f71\u3092\u30ea\u30bb\u30c3\u30c8\n ctx.shadowBlur = 0;\n }\n\n async function downloadImage() {\n \/\/ \u30dc\u30bf\u30f3\u306e\u30db\u30d0\u30fc\u52b9\u679c\u306a\u3069\u3092\u4e00\u6642\u7684\u306b\u30aa\u30d5\u306b\u3059\u308b\u305f\u3081\u306e\u30af\u30e9\u30b9\u8ffd\u52a0\uff08\u4efb\u610f\uff09\n const area = document.getElementById('capture-area');\n \/\/ \u80cc\u666f\u3092\u900f\u904e\u3055\u305b\u3066\u4fdd\u5b58\n const canvasImg = await html2canvas(area, { backgroundColor: null });\n const link = document.createElement('a');\n link.download = `CYBER_SCAN_${Date.now()}.png`;\n link.href = canvasImg.toDataURL('image\/png');\n link.click();\n }\n\n function shareOnX() {\n const fps = document.getElementById('fps-simple').innerText;\n const res = document.getElementById('res-val').innerText;\n \/\/ \u30b7\u30a7\u30a2\u7528\u30c6\u30ad\u30b9\u30c8\u3092\u5c11\u3057\u30ea\u30c3\u30c1\u306b\n const text = encodeURIComponent(`\u3010CYBER SCAN \/\/ SYSTEM REPORT\u3011\\nSTATUS: STABLE\\nFPS: ${fps}\\nRESOLUTION: ${res.replace('RES: ', '')}\\n\\n#CyberScan #FPS\u8a08\u6e2c #PCGaming`);\n \n navigator.clipboard.writeText(`CYBER SCAN REPORT\\nFPS: ${fps}\\n${res}`);\n alert(\"\u3010SYSTEM MESSAGE\u3011\\n\u8a73\u7d30\u30c7\u30fc\u30bf\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u8ee2\u9001\u3057\u307e\u3057\u305f\u3002\\n\u4fdd\u5b58\u3057\u305f\u753b\u50cf\u3092\u6dfb\u4ed8\u3057\u3066\u9001\u4fe1\u3057\u3066\u304f\u3060\u3055\u3044\u3002\");\n window.open(`https:\/\/twitter.com\/intent\/tweet?text=${text}`, '_blank');\n }\n\n window.addEventListener('resize', resizeCanvas);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>CYBER_SCAN \/\/ Integrated Monitor SYSTEM_INITIALIZING… Minimal Pro Statistics SYS_MONITOR \/\/ V.2.1 (ANIMA […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":10,"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2025-12-30T15:02:43","date_gmt":"2025-12-30T15:02:43","guid":{"rendered":"https:\/\/nova-analyser.marucape.com\/?page_id=6"},"modified":"2026-01-07T11:43:17","modified_gmt":"2026-01-07T11:43:17","slug":"nova-analyser","status":"publish","type":"page","link":"https:\/\/nova-analyser.marucape.com\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n CYBER_SCAN \/\/ Integrated Monitor<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <style>\n :root {\n --neon-cyan: #00f3ff;\n --neon-pink: #ff00ff;\n --dark-bg: #050505;\n --grid-color: rgba(0, 243, 255, 0.15); \/* \u30b0\u30ea\u30c3\u30c9\u3092\u5c11\u3057\u660e\u308b\u304f\u8abf\u6574 *\/\n --transition-speed: 0.4s;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; }\n\n body {\n background-color: var(--dark-bg);\n color: var(--neon-cyan);\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n padding: 20px;\n perspective: 1000px; \/* 3D\u52b9\u679c\u306e\u305f\u3081\u306b\u8ffd\u52a0 *\/\n }\n\n \/* --- \u5909\u66f4\u70b9: \u52d5\u304f\u80cc\u666f\u6f14\u51fa --- *\/\n .bg-grid-container {\n position: fixed;\n inset: 0;\n z-index: -1;\n overflow: hidden;\n transform-style: preserve-3d;\n }\n\n .bg-grid {\n position: absolute;\n inset: -100%; \/* \u753b\u9762\u5916\u307e\u3067\u5e83\u3052\u3066\u56de\u8ee2\u6642\u306e\u5207\u308c\u76ee\u3092\u96a0\u3059 *\/\n background-image: linear-gradient(var(--grid-color) 1px, transparent 1px),\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\n background-size: 60px 60px;\n \n \/* 3D\u56de\u8ee2\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u9069\u7528 *\/\n transform-origin: center center;\n transform: rotateX(70deg); \/* \u30b0\u30ea\u30c3\u30c9\u3092\u5bdd\u304b\u305b\u3066\u5965\u884c\u304d\u3092\u51fa\u3059 *\/\n animation: grid-scroll 5s linear infinite;\n }\n\n \/* \u30b0\u30ea\u30c3\u30c9\u304c\u624b\u524d\u306b\u6d41\u308c\u3066\u304f\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n @keyframes grid-scroll {\n 0% { background-position: 0 0; }\n 100% { background-position: 0 60px; \/* background-size\u306e\u9ad8\u3055\u306b\u5408\u308f\u305b\u3066\u30eb\u30fc\u30d7 *\/ }\n }\n\n \/* \u9060\u304f\u3092\u6697\u304f\u3059\u308b\u30f4\u30a3\u30cd\u30c3\u30c8\u52b9\u679c *\/\n .bg-vignette {\n position: fixed;\n inset: 0;\n background: radial-gradient(circle at center, transparent 30%, var(--dark-bg) 90%);\n z-index: -1;\n pointer-events: none;\n }\n \/* --------------------------- *\/\n\n \/* \u8d77\u52d5\u753b\u9762 *\/\n #boot-screen {\n position: fixed;\n inset: 0;\n background: black;\n z-index: 2000;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n transition: opacity 1s;\n }\n\n \/* \u30e2\u30fc\u30c9\u5207\u66ff\u30b9\u30a4\u30c3\u30c1 *\/\n .mode-switcher {\n margin-bottom: 20px;\n display: flex;\n gap: 10px;\n z-index: 100;\n }\n\n .mode-btn {\n background: rgba(0, 243, 255, 0.1);\n border: 1px solid var(--neon-cyan);\n color: var(--neon-cyan);\n padding: 8px 20px;\n cursor: pointer;\n text-transform: uppercase;\n font-weight: bold;\n transition: all 0.3s;\n }\n\n .mode-btn.active {\n background: var(--neon-cyan);\n color: black;\n box-shadow: 0 0 15px var(--neon-cyan);\n }\n\n \/* \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30ca *\/\n .app-frame {\n width: 100%;\n max-width: 800px;\n background: rgba(5, 5, 10, 0.85); \/* \u80cc\u666f\u306e\u52d5\u304d\u304c\u898b\u3048\u308b\u3088\u3046\u306b\u5c11\u3057\u900f\u660e\u5ea6\u3092\u4e0a\u3052\u308b *\/\n border: 2px solid var(--neon-cyan);\n padding: 30px;\n position: relative;\n box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);\n clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);\n backdrop-filter: blur(5px); \/* \u3059\u308a\u30ac\u30e9\u30b9\u52b9\u679c\u3092\u8ffd\u52a0 *\/\n }\n\n \/* \u30e2\u30fc\u30c9\u5225\u306e\u8868\u793a\u5236\u5fa1 *\/\n .view-content { transition: opacity var(--transition-speed); }\n .hidden { display: none; opacity: 0; }\n\n \/* \u30b7\u30f3\u30d7\u30eb\u30e2\u30fc\u30c9\u7528 *\/\n #simple-view { text-align: center; padding: 40px 0; }\n .huge-fps {\n font-size: clamp(5rem, 20vw, 10rem);\n font-weight: 900;\n text-shadow: 0 0 20px var(--neon-cyan);\n }\n\n \/* \u30d7\u30ed\u30e2\u30fc\u30c9\u7528\uff08\u30b0\u30e9\u30d5\u3068\u8a73\u7d30\uff09 *\/\n #pro-view .graph-box {\n height: 200px;\n border-left: 2px solid var(--neon-pink);\n border-bottom: 2px solid var(--neon-pink);\n margin: 20px 0;\n position: relative;\n background: rgba(0, 243, 255, 0.02); \/* \u30b0\u30e9\u30d5\u80cc\u666f\u3092\u5c11\u3057\u660e\u308b\u304f *\/\n }\n\n canvas { width: 100%; height: 100%; }\n\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n margin-top: 20px;\n }\n\n @media (min-width: 600px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }\n\n .stat-card {\n background: rgba(0, 243, 255, 0.05);\n border: 1px solid rgba(0, 243, 255, 0.2);\n padding: 10px;\n }\n\n .label { font-size: 0.65rem; color: var(--neon-pink); text-transform: uppercase; }\n .val { font-size: 1.2rem; font-weight: bold; }\n\n \/* \u30a2\u30af\u30b7\u30e7\u30f3\u30dc\u30bf\u30f3 *\/\n .actions {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n flex-wrap: wrap;\n }\n\n .btn-action {\n flex: 1;\n padding: 12px;\n background: none;\n border: 1px solid var(--neon-cyan);\n color: var(--neon-cyan);\n cursor: pointer;\n font-weight: bold;\n transition: all 0.3s;\n }\n\n .btn-share { border-color: var(--neon-pink); color: var(--neon-pink); }\n .btn-action:hover { background: var(--neon-cyan); color: black; box-shadow: 0 0 15px var(--neon-cyan); }\n .btn-share:hover { background: var(--neon-pink); color: white; box-shadow: 0 0 15px var(--neon-pink); }\n\n\n \/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n @keyframes scanline {\n 0% { transform: translateY(-100%); }\n 100% { transform: translateY(100%); }\n }\n .scanline {\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, transparent, rgba(0, 243, 255, 0.1), transparent);\n height: 50px;\n animation: scanline 4s linear infinite;\n pointer-events: none;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"bg-grid-container\">\n <div class=\"bg-grid\"><\/div>\n <\/div>\n <div class=\"bg-vignette\"><\/div>\n <div id=\"boot-screen\">\n <div id=\"boot-text\" style=\"letter-spacing: 5px;\">SYSTEM_INITIALIZING…<\/div>\n <\/div>\n\n <div class=\"mode-switcher\">\n <button class=\"mode-btn active\" onclick=\"switchMode('simple')\">Minimal<\/button>\n <button class=\"mode-btn\" onclick=\"switchMode('pro')\">Pro Statistics<\/button>\n <\/div>\n\n <div class=\"app-frame\" id=\"capture-area\">\n <div class=\"scanline\"><\/div>\n <div style=\"font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 10px;\">SYS_MONITOR \/\/ V.2.1 (ANIMATED)<\/div>\n \n <div id=\"simple-view\" class=\"view-content\">\n <div class=\"huge-fps\" id=\"fps-simple\">—<\/div>\n <div style=\"color: var(--neon-pink); letter-spacing: 3px;\">CURRENT FPS<\/div>\n <\/div>\n\n <div id=\"pro-view\" class=\"view-content hidden\">\n <div style=\"display: flex; justify-content: space-between; align-items: baseline;\">\n <div>\n <div class=\"huge-fps\" id=\"fps-pro\" style=\"font-size: 4rem;\">—<\/div>\n <div style=\"font-size: 0.7rem; color: var(--neon-pink);\">REAL-TIME<\/div>\n <\/div>\n <div id=\"res-val\" style=\"font-size: 0.8rem; opacity: 0.8;\">—<\/div>\n <\/div>\n\n <div class=\"graph-box\">\n <canvas id=\"fps-graph\"><\/canvas>\n <\/div>\n\n <div class=\"stats-grid\">\n <div class=\"stat-card\"><div class=\"label\">Average<\/div><div class=\"val\" id=\"avg-fps\">—<\/div><\/div>\n <div class=\"stat-card\"><div class=\"label\">Min FPS<\/div><div class=\"val\" id=\"min-fps\">—<\/div><\/div>\n <div class=\"stat-card\"><div class=\"label\">Max FPS<\/div><div class=\"val\" id=\"max-fps\">—<\/div><\/div>\n <div class=\"stat-card\"><div class=\"label\">Frame Time<\/div><div class=\"val\" id=\"frame-time\">—<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"actions\">\n <button class=\"btn-action\" onclick=\"downloadImage()\">SAVE IMAGE<\/button>\n <button class=\"btn-action btn-share\" onclick=\"shareOnX()\">SHARE STATS<\/button>\n <\/div>\n <\/div>\n\n <script>\n let currentMode = 'simple';\n let fpsHistory = new Array(100).fill(0); \/\/ \u30b0\u30e9\u30d5\u306e\u89e3\u50cf\u5ea6\u3092\u5c11\u3057\u4e0a\u3052\u307e\u3057\u305f\n let maxFps = 0;\n const canvas = document.getElementById('fps-graph');\n const ctx = canvas.getContext('2d');\n\n \/\/ \u8d77\u52d5\u30b7\u30fc\u30af\u30a8\u30f3\u30b9\n window.addEventListener('load', () => {\n const bootText = document.getElementById('boot-text');\n \/\/ \u30bf\u30a4\u30d4\u30f3\u30b0\u98a8\u306e\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u8ffd\u52a0\n let text = \"SCANNING HARDWARE...\";\n let i = 0;\n setTimeout(() => {\n bootText.innerText = \"\";\n const typing = setInterval(() => {\n bootText.innerText += text[i];\n i++;\n if (i === text.length) clearInterval(typing);\n }, 50);\n }, 700);\n\n setTimeout(() => {\n bootText.innerText = \"ESTABLISHING NEURAL LINK...\";\n bootText.style.color = \"var(--neon-pink)\";\n }, 2500);\n\n setTimeout(() => {\n document.getElementById('boot-screen').style.opacity = '0';\n setTimeout(() => document.getElementById('boot-screen').style.display = 'none', 1000);\n startEngine();\n }, 3500);\n });\n\n function switchMode(mode) {\n currentMode = mode;\n document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\n event.target.classList.add('active');\n\n const sView = document.getElementById('simple-view');\n const pView = document.getElementById('pro-view');\n\n if (mode === 'simple') {\n sView.classList.remove('hidden');\n pView.classList.add('hidden');\n } else {\n sView.classList.add('hidden');\n pView.classList.remove('hidden');\n resizeCanvas();\n }\n }\n\n function resizeCanvas() {\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n }\n\n function startEngine() {\n let lastTime = performance.now();\n let frames = 0;\n document.getElementById('res-val').innerText = `RES: ${window.screen.width} x ${window.screen.height}`;\n\n function loop() {\n const now = performance.now();\n const delta = now - lastTime;\n frames++;\n\n if (delta >= 500) { \/\/ 0.5\u79d2\u3054\u3068\u306b\u66f4\u65b0\n const fps = Math.round((frames * 1000) \/ delta);\n \n \/\/ \u30c7\u30fc\u30bf\u66f4\u65b0\n fpsHistory.push(fps);\n fpsHistory.shift();\n maxFps = Math.max(...fpsHistory, 60); \/\/ \u6700\u4f4e\u3067\u308260\u3092\u57fa\u6e96\u306b\u3059\u308b\n\n \/\/ UI\u66f4\u65b0\n document.getElementById('fps-simple').innerText = fps;\n document.getElementById('fps-pro').innerText = fps;\n \n const validFps = fpsHistory.filter(v => v > 0);\n if (validFps.length > 0) {\n document.getElementById('avg-fps').innerText = Math.round(validFps.reduce((a,b)=>a+b)\/validFps.length);\n document.getElementById('min-fps').innerText = Math.min(...validFps);\n document.getElementById('max-fps').innerText = Math.max(...validFps);\n }\n document.getElementById('frame-time').innerText = (delta \/ frames).toFixed(1) + \"ms\";\n\n if (currentMode === 'pro') drawGraph();\n\n frames = 0;\n lastTime = now;\n }\n requestAnimationFrame(loop);\n }\n requestAnimationFrame(loop);\n }\n\n function drawGraph() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n \/\/ \u30b0\u30e9\u30d5\u306e\u7dda\u3092\u5149\u3089\u305b\u308b\n ctx.strokeStyle = '#ff00ff';\n ctx.lineWidth = 2;\n ctx.shadowBlur = 10;\n ctx.shadowColor = '#ff00ff';\n \n ctx.beginPath();\n const slice = canvas.width \/ (fpsHistory.length - 1);\n fpsHistory.forEach((v, i) => {\n const x = i * slice;\n \/\/ \u30b0\u30e9\u30d5\u306e\u4e0a\u9650\u3092\u52d5\u7684\u306b\u8abf\u6574\uff08\u6700\u5927\u5024\u306e1.2\u500d\uff09\n const y = canvas.height - (v \/ (maxFps * 1.2)) * canvas.height;\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n \n \/\/ \u5f71\u3092\u30ea\u30bb\u30c3\u30c8\n ctx.shadowBlur = 0;\n }\n\n async function downloadImage() {\n \/\/ \u30dc\u30bf\u30f3\u306e\u30db\u30d0\u30fc\u52b9\u679c\u306a\u3069\u3092\u4e00\u6642\u7684\u306b\u30aa\u30d5\u306b\u3059\u308b\u305f\u3081\u306e\u30af\u30e9\u30b9\u8ffd\u52a0\uff08\u4efb\u610f\uff09\n const area = document.getElementById('capture-area');\n \/\/ \u80cc\u666f\u3092\u900f\u904e\u3055\u305b\u3066\u4fdd\u5b58\n const canvasImg = await html2canvas(area, { backgroundColor: null });\n const link = document.createElement('a');\n link.download = `CYBER_SCAN_${Date.now()}.png`;\n link.href = canvasImg.toDataURL('image\/png');\n link.click();\n }\n\n function shareOnX() {\n const fps = document.getElementById('fps-simple').innerText;\n const res = document.getElementById('res-val').innerText;\n \/\/ \u30b7\u30a7\u30a2\u7528\u30c6\u30ad\u30b9\u30c8\u3092\u5c11\u3057\u30ea\u30c3\u30c1\u306b\n const text = encodeURIComponent(`\u3010CYBER SCAN \/\/ SYSTEM REPORT\u3011\\nSTATUS: STABLE\\nFPS: ${fps}\\nRESOLUTION: ${res.replace('RES: ', '')}\\n\\n#CyberScan #FPS\u8a08\u6e2c #PCGaming`);\n \n navigator.clipboard.writeText(`CYBER SCAN REPORT\\nFPS: ${fps}\\n${res}`);\n alert(\"\u3010SYSTEM MESSAGE\u3011\\n\u8a73\u7d30\u30c7\u30fc\u30bf\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u8ee2\u9001\u3057\u307e\u3057\u305f\u3002\\n\u4fdd\u5b58\u3057\u305f\u753b\u50cf\u3092\u6dfb\u4ed8\u3057\u3066\u9001\u4fe1\u3057\u3066\u304f\u3060\u3055\u3044\u3002\");\n window.open(`https:\/\/twitter.com\/intent\/tweet?text=${text}`, '_blank');\n }\n\n window.addEventListener('resize', resizeCanvas);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>CYBER_SCAN \/\/ Integrated Monitor SYSTEM_INITIALIZING… Minimal Pro Statistics SYS_MONITOR \/\/ V.2.1 (ANIMA […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":10,"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/nova-analyser.marucape.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}